/* LAYOUT */


object
{
 position:absolute;
 height: 100%;
 width: 100%;
 display: block
}

body
{
  height: 100%;
  margin-bottom: 55px;
  overflow-x: hidden;
}

div
{
  padding:0;
}

.hidden
{
  display: none;
}

.group-ib
{
  vertical-align: middle;
  display: inline-block;
}

.group-ib input[type="radio"]
{
  vertical-align: bottom;
}



/* IMAGES */

.right
{
  padding-left: 20px;
  float: right;
}

.left
{
  float: left;
  padding-right: 20px;
}

.kid-zone
{
  border-top: none;
  background-image: url(../img/puzzle_sm.png);
  background-color: rgba(255,255,255,.8);
  background-blend-mode: color;
}

.two-wide
{
  width: 33%;
  padding: 40px;
}

.full-width
{
  margin: 0 auto;
  display: block;
}

.headers-left
{
  text-align: left;
}

.headers-center
{
  text-align: center;
}

section
{
  text-align: center;
}

section ul
{
  text-align: left;
}

.kid-zone section p
{
  background: rgba(255,255,255,.8);
  padding: 40px;
  border: 2px solid orange;
  border-radius: 15px;
}

.kid-zone ul
{
   list-style-type: none;
   padding-left: 0;
}
.kid-zone li
{ text-align: center;
   list-style-type: none;
   padding-left: none
}

img
{
  padding-top: 20px;
  padding-bottom: 20px;
}

article img
{
  max-width: 100px;
  margin: 0 auto;
}
article p { max-width: 600px;}

#mri_drawing
{
  display: inline-block;
  width: 40%;
}

h1,h2
{
  padding:0;
  margin:0;
  line-height: 1.2em;
  padding-top: 20px;
  padding-bottom: 5px;
}

.left-40 {
    margin-left: 40px;
}
h2.call-to-action
{
  padding-bottom: 40px;
  padding-top: 40px;
}


#content-container
{
  vertical-align: top;
  display: inline-block;
  width: 50%;
  margin-top: 55px;
  margin-left: 40px;
  text-align: left;
}


#nav-container
{
  vertical-align: top;
  display: inline-block;
  width: 30%;
  text-align: center;
}


header
{
  padding: 0px;
  margin: 0px;
  height: 130px;
  position: relative;
  top:0;
  left:0;
  text-align: left;
}

section
{
  display: inline-block;
  width: 100%;
}

/* SECTION CONTENT */


section li
{
}

section ul
{
}
section ol
{
  text-align: left;
}

.address
{
  list-style-type: none;
  padding-left: 0;
}
.faq-item li
{
  padding: 20px;
  margin: 10px;
  border-radius: 10px;
  display: inline-block;
  border: 5px solid rgb(244, 242, 242);
  background-color: lightgreen;
}

.faq-item li:hover
{
    border: 5px solid rgba(255, 165, 0, 0.8);
}

.faq-item p
{
  margin: 10px;
  padding: 20px;
  border-radius: 10px;
}

.faq-item .answer:hover,
.faq-item:hover
{
  cursor: pointer;
}
.faq-item .answer
{
  background: rgba(144, 238, 144, 0.5);
}

.team-list
{
   list-style-type: disc;
   width: 50%;
   padding:0;
   margin-left: 20px;
   margin-bottom: 25px;
}

.team-list li {
}

section p,
section ul,
section h2
{
  text-align: left;
}

.team-member ul
{
  list-style-type: none;
}

section h1
{
  display: block;
  text-align: center;
  margin-top: 25px;
  margin-bottom: 25px;
  border-bottom-color: white;
}

section h1 a
{
  display: block;
  text-align: center;
}

article
{
  margin-bottom: 50px;
}

header img,
header ul
{
  display: inline-block;
  vertical-align: top;
}

.carousel-img
{
  padding-left: 0.5%;
  padding-right: 0.5%;
  display: inline-block;
  max-width: 30%;
  margin: 0;
}

.carousel-container
{
  height: auto;
  margin-bottom: 0px;
  max-width: 700px;;
  text-align: center;
  background: rgba(255, 165, 0, 0.46);
  border-radius: 10px;
}

.carousel-container div
{
 height: 400px;
}


.contact-details
 {
  background: rgba(255, 165, 0, 0.46);
  border-radius: 10px;
  list-style-type: none;
  margin-left: 0px;
  margin-bottom: 40px;
  padding: 20px;
}
section h1
{
  display:inline-block;
  border-bottom: 5px solid lightgreen;
}

.ethos li
{
  margin-left: 0;
  padding-left: 0;
}

.ethos li:first-child
{
  border-bottom: 5px solid lightgreen;
}

ul.ethos li:first-child
{
  display: inline-block;
}

ul.ethos li:nth-child(2)
{
  padding-top: 1em;
}

.search-box
{
  display: inline-block;
}

.mobile-menu-toggle
{
  display: none;
}
#orange,
#green,
#blue
{
  position:absolute;
  top:0;
  left:0;
  width: 0;
  height: 0;
}

#orange
{
  z-index: 20;
}

#green
{
  z-index: 10;
}

#blue
{
  height: 100%;
  width: 100%;
  z-index: 5;
}

#logo_container_mobile
{
  display: none;
}

#logo_container
{
  position: absolute;
  top: -25px;
  right: -25px;
  border-radius: 50%;
  padding: 30px;
  z-index:4000;
  box-shadow: 5px 5px 20px 2px #555;
}

#transcend_logo
{
  margin: 0;
  padding: 0;
  z-index:4500;
  vertical-align: middle;
}


.footer-alt
{
  background: transparent;
  border-top: none;
}
footer nav
{
  margin: 0 auto;
  padding-top: 40px;
  padding-bottom: 50px;
  text-align: center;
  width: 100%;
}

footer nav ul
{
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.copyright
{
  padding:0px 0px 10px 0px;

}


.ethos
{
  display: inline-block;
  text-align: right;
  float: right;
  height: auto;
  width: 50%;

}

.ethos:after
{
  clear:both;
}

footer
{
  padding:0;
  width: 100%;
  height: 170px;
  border-top: 5px solid rgb(244, 242, 242);
  position: relative;
  text-align: center;
  bottom:0;
  left:0;
  margin-top: 40px;
}

footer li
{
  text-align:left;
  display: inline-block;
}

@media (max-width: 1000px)
{
  #content-container
  {
    margin-left:5%;
    width:60%;
  }

  #mri_drawing {
    width: 35%;
  }
  #transcend_logo
  {

    width: 16vw;
  }
  #logo_container
  {
     padding: 30px;
  }
}

@media (max-width: 760px)
{
  section
  {
  }


}

@media (max-width: 700px)
{


  .carousel-img:nth-child(3) { max-width: 80%;}
  .carousel-img:nth-child(1) { display: none;}
  .carousel-img:nth-child(2) { display: none;}
  .carousel-container { background: none;}
  .copyright { font-size: .8em; padding-bottom: 0px;}
  .long-shadow
  {
    font: normal 50px/1 "Fredoka One", Helvetica, sans-serif;
  }
  .ethos
  {
    padding-top: 20px;
    width: 100%;
  }
  form
  {
    width: 90%;
    margin: 0 auto;
  }
  img
  {
    width: 80%;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 20px;
    padding-bottom: 20px;
    display: block;
  }

  #mri_drawing
  { padding-bottom: 50px;}

  #content-container
  {
    min-height: 350px;
    width: 100%;
    margin: 0 auto;
  }
  section
  {
    box-sizing: border-box;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 0px;
  }

  section h1,
  section h1 a
  {
    line-height: 1.5em;
    display: block;
    text-align: center;
  }

  .mobile-menu-toggle
  {
    display: block;
    position: absolute;
    bottom: 20px;
    left: 25px;
    z-index: 2000;
  }

  header
  {
    height: 190px;
  }



  article header
  {
    text-align: center;
    height: auto;
  }
  article header img,
  article header ul
  {
    display: block;
  }

  article header ul
  {
    margin: 0px;
    padding: 0px;
  }
  article header li
  {
    padding-left: 0px;
    margin-left: 0px;
    width: 75%;
    margin: 0 auto;
    text-align: center;
  }

  #transcend_logo_mobile
  {
    padding-top: 30px;
    margin-left: -10px;
    width: 150%;
  }
  #logo_container {
    display: none;
  }

  .horizontal-nav {
    height: auto;
   }
  .horizontal-nav li { padding-left: 5px; padding-right: 5px }

  .search-box {
    display: none;
    padding-top: 10px;
  }

  #logo_container_mobile
  {
    position: relative;
    bottom: 20px;
    display: block;
    z-index: 50;
  }

  #logo_mobile_border {
   position: relative;
   z-index: 100;
   height: 110px;
   width: 110px;
   margin: 0 auto;
   text-align: center;
   border-radius: 50%;
  }

  #blue
  {
    height: 100%;
  }

  #green
  {
     display: none;
  }

  #orange
  {
     display: none;
  }

  ul.ethos
  {
    margin-left: 0;
    padding-left: 0;
    text-align: left;
    margin-bottom: 15px;
    margin: 0 auto;
  }


  .vertical-nav
  {
    display: block;
    position: absolute;
    top: 0;
    right: 100%;
    width: 100%;
    z-index: 5000;
    padding-bottom: 400px;
  }

  .close
  {
    display: list-item;
  }

  .nav-hide
  {
    -webkit-transform: translate(-100%,0);
    -webkit-transition: .5s ease;
    transform: translate(-100%,0);
    transition: .5s ease;
  }
  .nav-show
  {
    -webkit-transform: translate(100%,0);
    -webkit-transition: .5s ease;
    transform: translate(100%,0);
    transition: .5s ease;
  }

  nav.vertical-nav
  {
    width: 100%;
    box-sizing: border-box;
    margin-top: 0px;
    padding-bottom: 500px;
  }
  .footer-nav {
    text-align: left; padding-left: 10%;
   }
}

img.fcon,
img.spercept {
    width: 30%;
    margin-right: 30px;
}