/*------------------------------------------------------------------
[Table of contents]

1. Body
2. Navigation / .navbar-default
3. Header / .header-content
4. Buttons / .btn-default
5. Features / .mockup
6. Info / #Music-Mentor
7. Footer / footer
8. Responsive / @media (max-width: 1366px)
-------------------------------------------------------------------*/



/*------------------------------------------------------------------
[1. Body]
*/

html,
body {
  height: 100%;
  width: 100%;
}
html{ overflow-x: hidden; }
body {
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  background: #212121;
  color: #454545;
}
a {
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
  color: #37c0ef;
}
a:hover,
a:focus {
  color: #1197c5;
}
p {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 20px;
}
img, textarea, input, button, a:focus{
  outline: none;
}
.bg-white {
  background-color: #ffffff;
}
.bg-grey {
  background-color: #212121;
  color: #ffffff;
}
.bg-light-grey{
  background: #e6e6e6;
}
.white{color: #ffffff;}
.black{color: #212121;}
.grey{color: #818181;}
.cyan{color: #37c0ef;}
.purple{color: #a42cd6;}

.grey-line{width: 100%; height: 1px; background: #cccccc;}

.text-faded {
  color: rgba(255, 255, 255, 0.7);
}
section {
  padding: 100px 0;
}
aside {
  padding: 50px 0;
}
ul{list-style: none;}

.has-svg{position: relative;}

.separator.separator-top {
  top: -99px;
  bottom: auto;
}
svg:not(:root) {
  overflow: hidden;
}
.separator {
  position: absolute;
  left: 0;
  bottom: -99px;
  z-index: 900;
  width: 100%;
  height: 100px;
}
.bg-grey .separator path {
  fill: #212121;
}
.bg-light-grey .separator path {
  fill: #e6e6e6;
}
.bg-white .separator path {
  fill: #ffffff;
}

.p-0{
  padding: 0;
}
.p-t-40{padding-top: 40px;}
.p-b-40{padding-bottom: 40px;}
.p-contact{padding: 70px;}
.p-b-0{padding-bottom: 0px;}

.f-s120{font-size: 120px !important;}
.f-s72{font-size: 72px !important;}
.f-s65{font-size: 65px !important;}
.f-s60{font-size: 60px !important;}
.f-s48{font-size: 48px !important;}
.f-s36{font-size: 36px !important;}
.f-s24{font-size: 24px !important;}
.f-s21{font-size: 21px !important;}
.f-s18{font-size: 18px !important;}
.f-s16{font-size: 16px !important;}
.f-s14{font-size: 14px !important;}

.f-w300{font-weight: 300;}
.f-w500{font-weight: 500;}
.f-w700{font-weight: 700;}
.f-w900{font-weight: 900;}

.m-t-5{margin-top: 5px;}
.m-t-10{margin-top: 10px;}
.m-t-15{margin-top: 15px;}
.m-t-20{margin-top: 20px;}
.m-t-40{margin-top: 40px;}
.m-t-70{margin-top: 70px;}
.m-l-5{margin-left: 5px;}
.m-l-10{margin-left: 10px;}
.m-l-20{margin-left: 20px;}
.m-l-40{margin-left: 40px;}
.m-r-5{margin-right: 5px;}
.m-r-10{margin-right: 10px;}
.m-r-20{margin-right: 20px;}
.m-r-40{margin-right: 40px;}
.m-b-5{margin-bottom: 5px;}
.m-b-10{margin-bottom: 10px;}
.m-b-20{margin-bottom: 20px;}
.m-b-30{margin-bottom: 30px;}
.m-b-40{margin-bottom: 40px;}
.m-b-70{margin-bottom: 70px;}


::-moz-selection {
  color: white;
  text-shadow: none;
  background: #37c0ef;
}
::selection {
  color: white;
  text-shadow: none;
  background: #37c0ef;
}
img::selection {
  color: white;
  background: transparent;
}
img::-moz-selection {
  color: white;
  background: transparent;
}


/*------------------------------------------------------------------
[2. Navigation / .navbar-default]
*/

.navbar-default {
  background-color: white;
  border-color: rgba(34, 34, 34, 0.05);
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
  -webkit-transform: translate3d(0,0,1px);
  transform:translate(0,0,1px);
}
.navbar-default .navbar-header .navbar-toggle {
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  background: #37c0ef;
  border: none !important;
  text-transform: uppercase;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus{
  border: #0b88b3 !important;
  background: #0b88b3 !important;
}
.navbar-default .nav > li > a,
.navbar-default .nav > li > a:focus {
  font-weight: 500;
  font-size: 14px;
  color: #ffffff;
}
.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus:hover {
  color: #37c0ef;
}
.navbar-default .nav > li.active > a,
.navbar-default .nav > li.active > a:focus {
  color: #37c0ef !important;
  background-color: transparent;
}
.navbar-default .nav > li.active > a:hover,
.navbar-default .nav > li.active > a:focus:hover {
  background-color: transparent;
}
@media (min-width: 768px) {
  .navbar-default {
    background-color: transparent;
    border-color: transparent;
  }
  .navbar-default .nav > li > a,
  .navbar-default .nav > li > a:focus {
    color: rgba(255, 255, 255, 0.7);
  }
  .navbar-default .nav > li > a:hover,
  .navbar-default .nav > li > a:focus:hover {
    color: white;
  }
  .navbar-default.affix {
    background-color: #212121 !important;
    border-color: none;
  }
  .navbar-default.affix .nav > li > a,
  .navbar-default.affix .nav > li > a:focus {
    color: #ffffff;
  }
  .navbar-default.affix .nav > li > a:hover,
  .navbar-default.affix .nav > li > a:focus:hover {
    color: #37c0ef;
  }
}

/*------------------------------------------------------------------
[3. Header / .header-content]
*/

.main_image {background-image: url('../img/mainimage.jpg'); background-position-y:bottom;}

header {
  position: relative;
  width: 100%;
  min-height: auto;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  background-position: top;
  text-align: center;
  color: white;
  -webkit-transform: translate3d(0,0,0px);
  transform:translate(0,0,0px);
}
header .header-content {
  position: relative;
  text-align: center;
  padding: 100px 15px 100px;
  width: 100%;
}
header .header-content .header-content-inner h1, h1#HeadingTitle {
  font-weight: 500;
  margin-top: 70px;
  margin-bottom: 0;
  font-size: 30px;
}
header .header-content .header-content-inner a{
  margin-top: 50px;
}
header .header-content .header-content-inner p {
  font-weight: 300;
  color: #ffffff;
  font-size: 16px;
  margin-bottom: 50px;
}

@media (min-width: 769px) {
    h1#HeadingTitle {font-size: 72px;}
}


@media (min-width: 768px) {
  header {
    min-height: 100%;
  }
  header .header-content {
    position: absolute;
    top: 40%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 0 50px;
  }
  header .header-content .header-content-inner {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
  header .header-content .header-content-inner h1 {
    font-size: 72px;
  }
  header .header-content .header-content-inner p {
    font-size: 18px;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 480px) and (max-width: 768px) {
    h1#HeadingTitle {font-size: 48px;}
}

@media (max-width: 480px) {
    h1#HeadingTitle {margin-top: 0px;}
}
/*------------------------------------------------------------------
[4. Buttons / .btn-default]
*/

.btn-default {
  color: #ffffff;
  background-color: transparent !important;
  border: 1px solid #ffffff !important;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
}
.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  color: #ffffff;
  background-color: #37c0ef !important;
  border-color: #37c0ef !important;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  background-image: none;
}

.btn-primary {
  color: white;
  background-color: #37c0ef;
  border-color: #37c0ef;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  color: white;
  background-color: #0b88b3;
  border-color: #0b88b3;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-image: none;
}

.btn {
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  border: none;
  border-radius: 300px;
  font-weight: 500;
  text-transform: uppercase;
}
.btn-lg{
  padding: 15px 60px;
}

.btn_span_space{margin-right:50px; display:inline}


/*------------------------------------------------------------------
[5. Features / .mockup]
*/

.mockup{min-height: 650px;}
.mockup img{
  position: absolute;
  z-index: 1000;
  top: -290px;
}
.section-heading {
  margin-top: 0;
}
.service-box {
  max-width: 400px;
  margin: 50px auto 0;
}
@media (min-width: 992px) {
  .service-box {
    margin: 20px auto 0;
  }
}
.service-box p {
  margin-bottom: 0;
}
#features{padding-top: 120px; padding-bottom: 170px;}

.service-box i{
  background: transparent;
  border: 3px solid #a42cd6;
  border-radius: 500px;
  width: 150px;
  height: 150px;
  padding-top: 45px;
  color: #212121;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
}
.service-box h3{
  font-weight: 700;
  color: #212121;
}
.service-box:hover i{
  background: #37c0ef;
  border-color: #37c0ef;
  color: #fff;
}
.service-box:hover h3{
  color: #37c0ef;
}

/*------------------------------------------------------------------
[6. Info / #Music-Mentor]
*/
#Music-Mentor {
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  background-position: top;
  /*background-image: url('../img/header.jpg');*/
  color: white;
  min-height: 900px;
}

.contactus input, .contactus textarea{
  border: 1px solid #818181 !important;
  padding: 20px!important;
  font-size: 18px !important;
  border-radius: 0px !important;
}
.contactus textarea{
  padding: 10px 20px !important;
  height: 200px;
}
.contactus label{
  font-weight: 500;
}


/*------------------------------------------------------------------
[7. Footer / footer]
*/

footer ul{padding: 0px;}
footer li{display: inline; margin-right: 20px;}
footer li a{color: #212121;}
footer li a:hover{color: #37c0ef;}




/*============ Video wrapers ============ */

.video-wrapper {
	overflow: hidden;
	width: 100%;
	padding:0px;
	height: auto;
}
.video-wrapper video {
	width: 100%;
}

/*video padding
 ------------------------------ */
.video-padding-top {
	padding-top: 150px;
}
.video-padding-bottom {
	padding-bottom: 150px;
}

.col-centered {
	float: none;
	margin: 0 auto;
}

.margin-bottom {
	margin-bottom: 30px;
}


/*------------------------------------------------------------------
[8. Responsive / @media (max-width: 1366px)]
*/

@media (max-width: 1366px) {
  header .header-content .header-content-inner h1 {
    font-size: 56px;
  }
  header .header-content .header-content-inner p{
    margin-bottom: 5px;
  }
}

@media (max-width: 1024px) {
  #About-MCL h3, #Sneak-Peek h3, #Music-Mentor h3, #Sign-Up h3{font-size: 48px !important;}
  #About-MCL h2, #Sneak-Peek h2, #Music-Mentor h2, #Sign-Up h2{font-size: 90px !important;}
}

@media (max-width: 980px) {
  .mockup {
    min-height: 350px;
  }
  #Sneak-Peek, #Music-Mentor, #Sign-Up{text-align: center;}
  #Music-Mentor img{ margin-top: 50px;}
}

@media (max-width: 768px) {
  header .header-content .header-content-inner h1 {
    font-size: 42px;
  }
}

@media (max-width: 768px) {
  .navbar-default .navbar-collapse, .navbar-default .navbar-form, .navbar-default{
    border: none !important;
    background: #212121;
  }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    #screenshot{min-height:400px;}
}


@media (max-width: 767px) {
    .main_image {background-image: url('../img/mainimage_SM.jpg'); background-position-y:bottom;}
}

@media (max-width: 667px) {
  header .header-content .header-content-inner a{margin-top: 20px;}
  .mockup img{ top: -125px;}
}

@media (max-width: 568px) {
  .mockup {min-height: 300px;}
  #About-MCL h3, #Sneak-Peek h3, #Music-Mentor h3, #Sign-Up h3{font-size: 34px !important;}
  #About-MCL h2, #Sneak-Peek h2, #Music-Mentor h2, #Sign-Up h2{font-size: 64px !important;}
  #About-MCL p, #Sneak-Peek p, #Music-Mentor p, #Sign-Up p{font-size: 16px !important;}
  .btn_span_space{margin-top:20px; display:block;}
}

@media (max-width: 479px) {
  #footer_logo_mcl{width:95%; clear:both;}
  #footer_logo_ymh {width:95%; clear:both;}
}