@import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700"); /**  Basic Page CSS **/ 
body {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-size: 2em;
  position: relative;
  padding-top:3rem;
  background-color: #000000;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  margin: 0;
}


.page {
  padding: 150px 0px 150px 0px;
} /* The container <div> - needed to position the dropdown content */ .dropbtn {
  background-color: transparent;
  padding: 8px 20px 8px 10px;
  font-size: 20px;
  border-radius: 0px 10px 10px 0px;
  outline: none;
  cursor: pointer;
} /* Dropdown Content (Hidden by Default) */ /* Dropdown button on hover & focus */ 
.dropdown {
  position: fixed;
  display: block;
  top: 100px;
  left: -2px;
} /* Dropdown Button */ 
.dropdown-content {
  display: none;
  position: absolute;
  background-color: transparent;
  min-width: 25px;
  z-index: 1;
  font-size: 22px;
  text-align: center;
  border-radius: 0px 10px 10px 0px;
} /* Links inside the dropdown */ 
.dropdown-content a {
  color: #FFFFFF;
  padding: 8px 10px 8px 10px;
  text-decoration: none;
  display: block;
  outline: none;
} /* Change color of dropdown links on hover */ 
.dropdown-content a:hover {
  background-color: #565656;
  color: #FFFFFF;
  border-radius: 0px 10px 10px 0px;
} /* Show the dropdown menu on hover */ /* Change color of dropdown links on hover */

.dropdown:hover .dropdown-content {
  display: block;
} /* Change the background color of the dropdown button when the dropdown content is shown */ /** slide out media end**/ /**  Header Navigation **/ 
.navbar-nav {
  margin: 35px 0px 5px 10px;
  padding-left: 20px;
  outline: none;
}
header .navbar {
  padding: 0px;
  transition: all .5s ease-out;
  outline: none;
}
header .navbar-default {
  background-color: #000000;
  border: none;
  outline: none;
}
header .navbar-default .navbar-nav a {
  color: #EC2800;
  padding: 15px 10px 25px;
  letter-spacing: .1em;
  font-weight: 300;
  outline: none;
}
header .navbar-default .navbar-nav a:hover {
  color: #FFFFFF;
  background: transparent;
}
header .navbar-default .navbar-nav .active a {
  font-weight: 700;
  color: #EC2800;
  background: transparent;
  text-shadow: none;
}
header .navbar-default .navbar-nav .active a:hover {
  color: #EC2800;
  background: transparent;
  text-shadow: none;
  font-weight: 700;
}
.navbar-default .navbar-nav .active a:focus {
  background-color: transparent;
  color: #EC2800;
}
.navbar-default .navbar-nav li a {
  color: #ec2800;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
  border: none;
} /**  Navbar Brand **/ 

header .navbar-brand {
  background: url(../images/logos/treehouse-studios-logo.svg);
  background-repeat: no-repeat;
  background-position: 0px 0px;
  height: auto;
  outline: none;
}

header .navbar-brand h1 {
  color: #EC2800;
  margin: 0;
  font-size: 1.6em;
  font-weight: 300;
  padding-left: 65px;
  letter-spacing:.32rem;  
  outline: none;
}

header .navbar-brand span.subhead {
  font-family: "Roboto", sans-serif !important;
  display: block;
  color: #9F9D9D;
  font-size: 0.8em;
  font-weight: 500;
  letter-spacing: .134em;
  outline: none;
} /**  Navbar Toggle **/ 
.navbar-toggle {
  margin-top: 18px;
}
header .navbar-toggle {
  background-color: #000000;
}
header .navbar-default .navbar-toggle .icon-bar {
  background-color: #FFFFFF;
}
.navbar-default .navbar-toggle {
  border-color: #ffffff;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
  background-color: #5A5A5A;
  border-color: #FFFFFF;
} /**  Navbar Toggle end**/ /**  nav inbody **/ 
header .inbody .navbar-nav {
  margin-top: 37px;
}
header .navbar-default.inbody .navbar-nav a {
  outline: none;
  padding: 0px 10px 0px;
} /** brand **/ 
header .inbody .navbar-brand {
  background-size: 2.5em;
  background-position: top left;
  padding-top: 25px;
  margin-top: 6px;
}
header .inbody .navbar-brand h1 {
  font-size: 1.4em;
  padding: 0px 0px 0px 40px;
  background-position: top left;
  letter-spacing: .04rem;
  color:#000000;
}
header .inbody .navbar-brand span.subhead {
  display: none;
} /**  Carousel Fade **/ 


.carousel {
  width: auto;
  position: relative;
  background-color: #000000;
  margin-bottom:10px;
  margin-top:15px;
  
}
.carousel-inner .item img{
    margin: 0 auto;
}

.carousel.fade {
  opacity: 4;
}
.carousel.fade .item {
  transition: opacity ease-out 1s;
  left: 0;
  opacity: 0;
  top: 0;
  position: absolute;
  width: 100%;
  display: block;
}
.carousel.fade .item:first-child {
  top: auto;
  opacity: 1;
  position: relative;
}
.carousel.fade .item.active {
  opacity: 1;
}
.carousel-control {
  opacity: 0;
}
.carousel-control.right, .carousel-control.left {
  background-image: none;
}
.carousel-indicators li {
  border: 1px solid #EC2800;
  height: 10px;
  width: 10px;
}
.carousel-indicators .active {
  background-color: #EC2800;
  height: 10px;
  width: 10px;
}

#featured .item {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  height: 100%;
} /** slideout social media **/ /**  Page **/ /**  Mission **/ 
#mission {
  background-color:#9A9A9A;
}



#mission h2 {
  text-align: center;
  padding: 20px 0px 20px 0px;
  color: #000000;
  font-weight: 500;
  letter-spacing: .08em;
  font-size: 1.8em;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}
.mission-statment {
  color: #000000;
  line-height: 45px;
  font-size: 1.4em;
  letter-spacing: .05em;
  font-weight: 300;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  word-wrap: break-word; /* Non standard for webkit */ word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;  
}
.linkstyle {
  font-weight: 400;
  color: #ffffff;
}
/** links 1 **/ 



#services a:link {
    color: #EC2800;
    text-decoration: none;
}
#services a:visted{
    color: #EC2800;
}
#services a:hover, a:focus{
    color: #7D1703;
    text-decoration: none;
} 
/** links 2**/ 

/** Services **/ 

#services h3 {
    color: #EC2800;
    letter-spacing: .03rem;
    line-height: 28px;
    font-weight: 500;
    font-size: 2.2em;
    border-bottom: solid 1px;
}

.service {
  margin: 20px 0px 30px 0px;
  text-align: center;
  padding: 0px;

} /** Services end**/ 

/**  Testimonials **/ 
#testimonials {
  background-color: #ec2800;
}
#testimonials h2 {
  display: none;
}
#testimonials blockquote {
  margin: 0;
  padding: 0;
  border-left: none;
  min-height: 500px;
  position: relative;
}
#testimonials blockquote .quote {
  background-color: #ec2800;
  padding: 20px 5%;
  position: absolute;
  bottom: 0;
  width: 100%;
  font-weight: 400;
  border-radius: 0 50px 0 0;
  color: #000000;
  letter-spacing: .02em;
}
#testimonials .quote:hover {
  background-color: #FFFFFF;
}
#testimonials #isabelle {
  background: url("../images/testimonials/boomerang.jpg") no-repeat center center;
  background-size: cover;
}
#testimonials #scott {
  background: url("../images/testimonials/carsleuth.jpg") no-repeat center center;
  background-size: cover;
}
#testimonials #carol {
  background: url("../images/testimonials/art-bar.jpg") no-repeat center center;
  background-size: cover;
}
#testimonials #joanna-lumley {
  background: url(../images/testimonials/joanna-lumley.jpg) no-repeat center center;
  background-size: cover;
}
#testimonials .quote {
  font-size: 1.3em;
  line-height: 140%;
  font-weight: 400;
}
#testimonials .quote .more, #testimonials .customer {
  opacity: 100%;
  font-size: 0;
  line-height: 0;
  padding-top: 10px;
}
#testimonials .quote:hover .more {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  display: block;
  opacity: 1;
  font-size: .65em;
  line-height: 150%;
}
#testimonials .quote:hover .customer {
  display: block;
  font-size: .8em;
  text-align: right;
  padding-bottom: 15px;
}
#testimonials .quote .intro::after {
  content: '...';
}
#testimonials .quote:hover .intro::after {
  content: '';
} /**  Testimonials end **/ /** Contact **/ 

#contact {
  background-color: #EC2800;
  padding: 150px 0px 150px 0px;
}

#contact a:link{
  color: #ffffff;
    text-decoration: none;
}
#contact a:hover, a:focus{
  color: #9A9797;
    text-decoration: none;
  
}
.contact h4 {
  font-size: 1.4em;
  letter-spacing: .07em;
  text-align: center;
  line-height: 40px;
  font-weight: 400;
  color: #000;
}
#contact .contact h2 {
  display: none;
}
.call {
  border-bottom: 1px solid #000000;
  border-top: 1px solid #000000;
  padding-top: 10px;
  padding-bottom: 10px;
}
.enquire {
  margin-top: 40px;
} /**form**/ .btn-primary {
  background-color: #565656;
  border-color: #565656;
  padding: 3px 30px 3px 30px;
  letter-spacing: .4em;
  color: #ffffff;
}
.btn-primary:hover {
  background-color: #000000;
}
.form-control {
  letter-spacing: .1em;
  font-weight: 400;
  background-color: #ccc;
} /**  Footer **/ 

footer {
  background-color: #000000;
  outline: none; 
}

footer a {
  font-size: 18px;
  color: #EC2800;
  font-weight: 300;
  letter-spacing: .06em;
  outline: none;
}
footer a:hover {
  color: #FFFFFF !important;
  outline: none;
  text-decoration: none;
}
footer .phone {
  font-weight: 400;
  color: #EC2800;
  letter-spacing: .09em;
  padding-right: 5px;
  outline: none;
}
footer p {
    font-size: 14px;
    color: #929292;
    letter-spacing: .08em;
    line-height: 25px;
    outline: none;
    text-align: center;
}
footer .navbar {
  margin-bottom: 0px;
  min-height: 0;
  padding-top: 45px;
  outline: none;
}
footer .navbar-default {
  background-color: transparent;
  border: none;
  margin-right: 40px;
  outline: none;
}
footer navbar navbar-default .phone {
  color: #EC2800;
  outline: none;
}
.credits {
  text-align: center;
  letter-spacing: 1em;
} 
/** footer end**/ 

/** @media: 992 **/ 

@media (max-width: 992px) {
  .navbar-header {
    float: none;
  }
  .navbar-left, .navbar-right {
    float: none !important;
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
    display: none !important;
  }
  .navbar-nav {
    float: none !important;
    margin-top: 7.5px;
  }
  .navbar-nav > li {
    float: none;
  }
  .navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .collapse.in {
    display: block !important;
  } /** page**/ .page {
    padding: 50px 0px 50px 0px;
  } /** navbar brand**/ 
    
    header .navbar-default {
    background-color: #000000;
    border: none;
    outline: none;
  }
  header .navbar-brand { background:url"../images/logos/treehouse-studios-logo-mobile.svg)";    
    background-repeat: no-repeat;
    height: auto;
    outline: none;
  }
  header .navbar-brand h1 {
    font-size: 1.1em;
    background-position: top left;
    letter-spacing:.32rem;
    margin: 0;
    font-weight: 300;
    padding-left: 55px;
    outline: none;
  
    }
  header .navbar-brand span.subhead {
    display: block;
    color: #9F9D9D;
    font-size: 0.88em;
    font-weight: 500;
    letter-spacing: .13em;
    outline: none;
  } 
    /** navbar brand end**/ /** navbar brand inbody**/ 
    header .inbody .navbar-brand {
    background: url(../images/logos/treehouse-studios-logo-mobile.svg);
    background-repeat: no-repeat;
    height: auto;
    outline: none;
  }
  header .inbody .navbar-brand h1 {
    font-size: 1.1em;
    background-position: top left;
    letter-spacing: .04em;
    margin: 0;
    font-weight: 300;
    padding-left: 55px;
    outline: none;
  }
  header .inbody .navbar-nav {
    margin-top: 0px;
    outline: none;
  } /** navbar brand inbody end**/ .navbar-nav {
    margin: 0px 0px 0px 0px;
    padding-left: 0px;
    outline: none;
  }
  .navbar-default .navbar-nav li a {
    color: #ec2800;
    outline: none;
  }
  header .navbar-default .navbar-nav a {
    padding: 6px 0px 6px 6px;
    letter-spacing: .1em;
    outline: none;
  }
  header .navbar-default .navbar-nav .active a {
    color: #EC2800;
    background: transparent;
    text-shadow: none;
  }
  header .navbar-default.inbody .navbar-nav a {
    padding: 6px 0px 6px 6px;
    letter-spacing: .1em;
    outline: none;
  } /** mission **/ 
    #mission h2 {
    letter-spacing: .07em;
    font-size: 1.4em;
  }
  .mission-statment {
    line-height: 35px;
    font-size: 1em;
    letter-spacing: .04em;
  } /** mission end**/ /**testimonials**/ /**testimonials end**/ /**contact**/ .contact h4 {
    font-size: 1.2em;
    letter-spacing: .05em;
    line-height: 30px;
  } /**contact end**/ 
    
    /**form**/ .form-group {
    padding: 0px 15px 0px 15px
  } /**form end**/ /** footer **/ 
    footer p {
    text-align: center;
    letter-spacing: .04em;
  }
  footer .navbar-default {
    text-align: center;
  }
  .credits {
    text-align: center;
  } /**  Testimonials **/ .dropdown-content a:focus {
    background-color: #565656;
    color: #FFFFFF;
    border-radius: 0px 10px 10px 0px;
  } /* Show the dropdown menu on hover */ /* Change color of dropdown links on hover */ .dropdown:focus .dropdown-content {
    display: block;
  } /* Change the background color of the dropdown button when the dropdown content is shown */ /**  Testimonials end **/
} /** @media: 992 end**/