*{
/*  box-sizing: border-box;*/
}

@keyframes antenna_left{
  0%{
    transform: rotate(0deg);
  } 
  50%{
    transform: rotate(0deg);
  }
  54%{
    transform: rotate(-20deg);
  }
  57%{
    transform: rotate(0deg);
  }
  89%{
    transform: rotate(0deg);
  }
  91%{
    transform: rotate(-10deg);
  }
  93%{
    transform: rotate(0deg);
  }

  100%{
    transform: rotate(0deg);
  }
}

@keyframes antenna_right{
  0%{
    transform: rotate(0deg);
  } 
  20%{
    transform: rotate(0deg);
  } 
  24%{
    transform: rotate(17deg);
  }
  29%{
    transform: rotate(0deg);
  }
  49%{
    transform: rotate(0deg);
  }
  54%{
    transform: rotate(10deg);
  }
  56%{
    transform: rotate(0deg);
  }

  100%{
    transform: rotate(0deg);
  }
}    


body{
  font-family: "Comfortaa", Arial, Helvetica, sans-serif;
  font-weight: 400;
  margin: 0;
  overflow-x: hidden;

  background-image: url(../images/main_bg.jpg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

h1, h2, h3, h4, h5{
  font-family: "Philosopher", "Times New Roman", serif;
  font-weight: 700;
}

#wrapper{
  padding-top: 1px;
}

header{
  width: 100%;
  height: 185px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row;
  flex-flow: row;
  position: fixed;
  top: 0;
  z-index: 100;
  /* shadow filter follows the SVG contour, box-shadow does not */
  filter: drop-shadow(0 7px 12px rgba(0,0,0,0.7));
  transition: all .3s ease-in-out;
}

.small_header{
  height: 80px;
  overflow: hidden;
}
header.small_header #inner_header svg#header_middle{
/*  opacity: 0;*/
  display: none;
}
header.small_header #inner_header{
  background-color: rgba(55, 165, 194, 0.3);
  background: linear-gradient(rgba(210, 220, 248, 0.79),rgba(155, 165, 194, 0.79));
}
header.small_header #inner_header #tagline{
  opacity: 0;
  top: -20px;
}
header.small_header #inner_header #cta{
  top: 14px;
  right: 2px;
}
header.small_header #inner_header #logo{
  top: 13px;
  left: 0;
  
}
header.small_header #inner_header #logo svg{
  width: 85px;
  height: 56px;
}

header.small_header + #hero_top #cta_home{
  opacity: 0;
}
header.small_header #inner_header #cta{
  display: block;
}
nav.moved{
  top: 40px;
}
header #header_left,
header #header_right{
   background: linear-gradient(rgba(210, 220, 248, 0.79),rgba(155, 165, 194, 0.79));
   -webkit-flex: 1 1 auto;
   flex: 1 1 auto;
}
header #inner_header{
  -webkit-flex: 0 0 960px;
  flex: 0 0 960px;
  background-color: rgba(55, 165, 194, 0);
  position: relative;
}
header #inner_header svg#header_middle{
  height: 185px;
  opacity: 1;
  transition: opacity .4s ease-in-out;
}

header #inner_header #logo{
  position: absolute;
  top: 16px;
  left: 16px;
  width: 136px;
  height: 110px;
  transition: all .3s ease-in-out;
}

header #inner_header #logo svg {
  -webkit-perspective: 800px;
  perspective: 800px;
  display:block;
  width: 136px;
  height: 110px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: all .3s ease-in-out;
}
#logo svg #butterfly_merged{
  -webkit-perspective: 800px;
  perspective: 800px;
  display: block;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#logo svg #Right_wing{
  display:block;
  -webkit-transition: all .6s cubic-bezier(.15,.04,.48,1.31);
  transition: all .6s cubic-bezier(.15,.04,.48,1.31);
  -webkit-transform-origin: 240px; 
  transform-origin: 240px; 
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
#logo svg #Left_wing{
  display:block;
  -webkit-transition: all .6s cubic-bezier(.73,0,.48,1.31);
  transition: all .6s cubic-bezier(.73,0,.48,1.31);
  -webkit-transform-origin: 240px; 
  transform-origin: 240px; 
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
#logo svg:hover #Right_wing {
  -webkit-transform: rotateY(-65deg);
  transform: rotateY(-65deg);
}
#logo svg:hover #Left_wing{
  -webkit-transform: rotateY(65deg);
  transform: rotateY(65deg);
}

#logo #Left_wing{

}  
#logo #antenna_left{

  -webkit-transform-origin: 219px 113px;
  transform-origin: 219px 113px;

  -webkit-animation: antenna_left 6s ease-in-out forwards infinite;
  animation: antenna_left 6s ease-in-out forwards infinite;
}
#logo #antenna_right{
  -webkit-transform-origin: 247px 113px;
  transform-origin: 247px 113px;
/*      transform: rotate(25deg);*/
  -webkit-animation: antenna_right 5s ease-in-out forwards infinite;
  animation: antenna_right 5s ease-in-out forwards infinite;
}

#inner_header #tagline{
  font-family: "Philosopher", "Times New Roman", serif;
  position: absolute; 
  top: 14px;
  right: 0;
  font-size: 2.7em;
  text-shadow: 3px 3px 3px rgba(0,0,0,0.29);
  transition: all .3s ease-in-out;
}

/* Navigation */

div#navcontainer{
/*  margin: 0 auto;*/
  width: 960px;
  position: fixed;
  z-index: 1010;
  right: 50%;
  margin-right: -480px;
  
}
#navcontainer #close_button{
  display: none;
}

nav{
  position: absolute;
  right: 0;
  top: 80px;
  font-family: "Philosopher", "Times New Roman", serif;
  z-index:3000;
  transition: top .3s ease-in-out;
}

nav #menu{
  display: none;
}

nav #navlist{
  margin: 0;
  padding: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
}
nav #navlist li{
  list-style-type: none;
  display: -webkit-flex;
  display: flex;
  
}
nav #navlist li a{
  text-decoration: none;
  position: relative;
  color: #000;
  font-size: 22px;
  display: block;
/*  padding: 5px 12px 5px 12px;*/
  padding: 5px 1.2vw 5px 1.2vw;
}
nav #navlist li a::after{
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  left: 0;
  bottom: 0;
  height: 6px;
  z-index: 400;
  transform: scale(0,1);
  background-color: #3d59a8;
  transition: transform .2s ease-in-out;
}

nav #navlist li a:hover::after{
  transform: scale(.8,1);
}
nav #navlist li:last-of-type a::after{
  width: 119%;
}
nav #navlist li:last-of-type a{
  padding-right: 0;
}
#inner_hero{
  position: relative;
  margin: 0 auto;
  max-width: 960px;
}

#hero_top #subject_info{
  position: absolute;
  top: 185px;
  left: 0px;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
#hero_top #headshot img{
  border-radius: 50%;
  border: 5px solid #3d59a8;
  box-shadow: 0 12px 18px 2px rgba(0,0,0,0.54);
  position: absolute;
  z-index: 25;
}


#hero_top{
  background-image: url(../images/hero_home.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: contain;
  height: 494px;
  -webkit-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
}

#hero_top_simple{
  background-image: url(../images/hero_home.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 0 -200px;
  background-size: contain;
  height: 435px;
  -webkit-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
}

#hero_top #credentials{
  position: absolute;
  font-size: 14px;
  background-color: rgba(75,80,93,0.84);
  padding: 9px 4px 9px 35px;
  color: #fff;
  text-shadow: 3px 3px 1px rgba(0,0,0,74);
  border: 5px solid #3d59a8;
  width: 309px;
  left: 160px;
  top: 43px;
  line-height: 1.8;
  border-radius: 0 35px 0 0;
}
span.bigger{
  font-size: 1.3em;
  font-weight: 700;
}

#hero_top #cta_home{
  font-size: 28px;
  position: absolute;
  top: 228px;
  right: 0;
  color: #fff;
  font-weight: 700;
  transition: all .3s ease-in-out;
}
/* Version for pages with no hero */
#inner_header #cta{
  font-size: 22px;
  position: absolute;
  top: 133px;
  right: 0;
  color: #000;
  font-weight: 700;
  transition: all .3s ease-in-out;
}

a[href^=tel]{
  text-decoration: none;
  color: inherit;
  cursor: default;
  pointer-events: none;
}

#hero_top #statements{
  position:absolute;
  left: 0;
  top: 369px;
/*  bottom: 3px;*/
  color: #fff;
  font-size: 18px;
}



main{
  margin: 0 auto;
  max-width: 960px;
  min-height: 600px;
  padding: 0;
}
main.nohero{
/*  margin-top: 250px;*/
}

main .content_box{
  background-color: rgba(220,233,238,0.8);
  border: 5px solid #3d59a8;
  border-radius: 0 40px 0 40px;
  padding: 0px 10px 10px 10px;
  line-height: 1.5;

  text-align: justify;
  margin-bottom: 20px;
}

main .content_box h2{
  margin-top: 0;
  line-height: 1.2;
  clear: both;
}

main .content_box ul li{
  list-style-position: inside;
}

main .content_box hr{
  clear: both;
}

main .highlightbox{
  background-color: #ffd;
  border: 3px solid #3d59a8; 
  padding: 14px;
  border-radius: 20px 0 20px 0;
  margin-left: 20px;
  margin-right: 20px;
  box-shadow: 0 5px 12px rgba(0,0,0,0.5);
}

main .wheel_img img{
  float: left;
  shape-outside: ellipse(155px 155px at 50% 50%);
  shape-margin: 21px;
  margin-right: 43px;
}
main .content_box ul#shaped{
  list-style-position: inside;
  padding: 0;
  margin: 0;
}
main .content_box ul#shaped li{
  margin-bottom: .9em;
}

/* Generic classes */
/* NOTE: These need to match edit.css */

  .float_img_right{
	float: right;
	margin-left: 20px;  
  }
  .float_img_left{
	float: left;
	margin-right: 20px;  
  }
  
.highlightbox{
  background-color: #ffd;
  border: 3px solid #3d59a8; 
  padding: 13px;
  border-radius: 20px 0 20px 0;
  margin-left: 20px;
  margin-right: 20px;
  box-shadow: 0 5px 12px rgba(0,0,0,0.5);
}

  .reg_orange{
	font-style: normal;
	color: #c30;  
  }
  .med_gray{
	color: #666;  
  }
 .textbelowimage{
  clear: both;
}
  .bold_red{
	color:  #5A0001;
	font-style: 600; 	  
  } 
  .text_shadow{
	 text-shadow: 1px 1px 2px rgba(0,0,0,0.60);  
  }

  
  .alternate_font{
	font-family: 'Philosopher', Arial, Verdana, sans-serif;  
  }

img.shadow{
  box-shadow: 0px 5px 12px rgba(0,0,0,0.5);
}

img.no_image_shadow{
  box-shadow: none;
}

/*    footer      */

footer{
  width: 100%;
/*  height: 193px;*/
  background-color: #2e2f31;
  color: #fff;
  font-size: 14px;
}

footer address{
  font-style: normal;
}
footer #inner_footer{
  max-width: 960px;
  height: 193px;
  margin: 0 auto;
  display: -webkit-flex;
  display: flex;
  position: relative;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
footer #footer_left{
  -webkit-flex-grow: 1;
  flex-grow: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column;
  flex-flow: column;
  padding-top: 19px;
  height: 193px;
}
footer #footer_left div{
  margin-bottom: 1em;
}

footer #footer_main{
  flex-grow: 3; 
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  height: 193px;
/*  text-align: center;*/
}

footer #footer_right{
  -webkit-flex-grow: 1; 
  flex-grow: 1; 
  display: -webkit-flex;
  display: flex;
  height: 193px;
/*  text-align: right;*/
}
footer #footer_right #map{
  position: absolute;
  right: 0;
  width: 226px;
  height: 173px;
  margin-top: 10px;
  background-color: #ccc;
}

  /* Form rules */

#pageform label {
  display: block;
  float: left;
  width: 140px;
}

#pageform input[type=text],
 #pageform input[type=email],
 #pageform input[type=tel],
 #pageform input[type=date],
 #pageform input[type=password] {
  width: 200px;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  background-color: rgba(250,253,258,0.8);
  color: #000;
  font-size: 16px;
  font-weight: 700;
  padding: 2px;
  margin-bottom: 10px;
  -webkit-transition: background-color ease-in-out .2s;
  transition: background-color ease-in-out .2s;
}

#pageform textarea {
  max-width: 100%;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  background-color: #ddd;
  color: #000;
  padding: 2px;
  font-size: 14px;
  margin-bottom: 10px;
  font-weight: 700;
  -webkit-transition: background-color ease-in-out .2s;
  transition: background-color ease-in-out .2s;
}

#pageform textarea:hover,
 #pageform input[type=text]:hover,
 #pageform input[type=email]:hover,
 #pageform input[type=tel]:hover {
  background-color: #eef;
}

span.req {
  font-size: 150%;
  color: #900;
}

label.req:before,
 p.req:before {
  content: "*";
  font-size: 150%;
  color: #900;
}

#content #msg {
  color: #222;
  background-color: #ccc;
  padding: 3px;
  border: 2px solid #f00;
  display: none;
  margin: 15px;
  box-shadow: 0px 3px 4px rgba(0,0,0,0.60);
}

#pageform input[type=submit],
 #pageform input[type=button],
 #pageform input[type=reset] {
  border: solid 1px #424242;
  background-color: #B3B3B3;
  box-shadow: 0px 2px 4px rgba(0,0,0,0.60);
  color: #000;
  border-radius: 5px;
  font-size: 16px;
  padding: 6px 13px 5px 11px;
  margin-right: 8px;
  -webkit-transition: .2s ease;
  -webkit-transition-property: color, border;
  transition: .2s ease;
  transition-property: color, border;
  background: linear-gradient(to top, #777374, #A2A2A2);
}

#pageform input[type=submit]:hover,
 #pageform input[type=button]:hover,
 #pageform input[type=reset]:hover {
  color: #fff;
  border: 1px solid #B5B5B5;
}

#pageform input[type=button]:active,
 #pageform input[type=reset]:active {
  background-image: none;
  background-color: #fff;
  border-color: #f00;
}

#pageform input[type=checkbox] + label,
#pageform input[type=radio] + label{
  float:none;
  display: inline;
}

#pageform label.longlabel{
  float: none;
  width: auto;
}

#pageform .horizontal_radio{
  display: flex;
}

#pageform .horizontal_radio .label_left{
  text-align: right;
}

#pageform .horizontal_radio .button_and_text{
  display: flex;
  margin-left: 10px;
  margin-right: 10px;
  justify-content: center;
  flex-wrap: nowrap;
}
#pageform .horizontal_radio label{
  display: block;
  text-align: center;
  float:none;
  width: auto;
}
#pageform .horizontal_radio .button{
  display: inline-block;
}

#pageform .horizontal_radio .label_right{
  
}

/* End form styles */

#userinfo{
  border: 4px solid #88b;
  background-color: #ccc;
  padding: 6px;
  border-radius: 10px;
  right: 0;
  top:120px;
  position: absolute;
}


/*********************** Media Queries **************************/




@media all and (max-width: 1828px){
  #hero_top_simple{
    background-position: 0 -128px;
  }
}

@media all and (max-width: 1630px){
  #hero_top_simple{
    background-position: 0 -50px !important;
  }
}


/* Switch the sunset image to "cover" where it starts to move up away from the text. */
@media all and (max-width: 1415px){
  #hero_top{
    background-size: cover;
    background-attachment: initial;
    background-position: top center;
  }
  #hero_top_simple{
    background-size: cover;
    background-attachment: initial;
    background-position: top center !important;
  }
}

@media all and (max-width: 975px){
  header{
    display: block;
    width: 100%;
  }
  /* SVG middle image needs   height: 185px; in desktop, but not mobile. This needs to override the desktop rule. */
  header #inner_header svg#header_middle{
    max-width: 100%;
    height: auto;
  }
  
  header #inner_header #logo svg{
    width: 13.5vw;
    height: 11.5vw;
  }

  div#navcontainer{
    width: 100%;
    right: 0;
    margin-right: 0;
  }
  
  nav{
    right: 16px;
    top: 8vw;
  }
  nav #navlist li a{
    padding: 5px 1.2vw 5px 1.2vw;
    font-size: 2.33vw
  }

  header #inner_header #tagline{
    font-size: 4.5vw;
    right: 16px;
  }
  
  
  #hero_top{
    height:47vw;
  }
  #hero_top_simple{
    height:47vw;
  }
  #hero_top #subject_info{
    left: 16px;
    -webkit-transform: scale(.7);
    transform: scale(.7);
    top: 20vw
  }
  
  #hero_top #cta_home{
    right: 16px;
    top: 24vw;
    font-size: 3vw;
  }
  
  #inner_header #cta{
    font-size: 2.3vw;
    top: 14vw;
    right: 16px;
  }
  
  #hero_top #statements{
    font-size: 1.7vw;
    left: 16px;
    top: 36vw;
/*    top: 325px;*/
  }
  
  main{
    padding: 0 16px 0 16px;
  }
  
  .content_box img{
    max-width: 100%;
    height: auto;
  }
  footer #footer_left{
    padding-left: 16px;
  }
  footer #footer_right #map{
    right: 16px;
  }
  


}




/* Switch footer to columns at 870 */
@media all and (max-width: 870px){
  footer #inner_footer{
    -webkit-flex-direction: column;
    flex-direction: column;
    height: auto;
    padding-left: 12px;
  }
  footer #footer_left{
    -webkit-order: 1;
    order: 1;
    padding-left: 0;
  }
  footer #footer_main{
    -webkit-order: 3;
    order: 3;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    height: auto;
    text-align: left;
    padding-bottom: 15px;
  }
  footer #footer_right{
    -webkit-order: 2;
    order: 2;
    
  }
  footer #footer_right #map{
    position: static;
  }
}

/* Mobile under 768px */
@media all and (max-width: 767px){
  
a[href^=tel]{
  text-decoration: none;
  color: inherit;
  cursor: default;
  pointer-events: auto;
}
  
  /* Prevent hover effect on mobile. User could tap the butterfly and it would be "stuck" in closed position. */
  #logo svg:hover #Right_wing {
    -webkit-transform: none;
    transform: none;
  }
  #logo svg:hover #Left_wing{
    -webkit-transform: none;
    transform: none;
  }  
  
  #inner_container{
    width: 100vw;
    -webkit-transform: rotateY(0) translateZ(50vw);
    transform: rotateY(0) translateZ(50vw);
    background-color: #fff;
    height: 100%;
    padding-top: 1px;
  }  
  
  header #inner_header #logo{
    left: 72px;
    width: auto;
    height: auto;
  }
  header #inner_header nav{
    top: 50px;
    right: auto;
  }
  header #inner_header #tagline{
/*    right: 32px;*/
  }

  
  #inner_header #cta{
    font-size: 2.7vw;
    top: 11vw;
  }
  #navcontainer #close_button{
    height: 30px;
    width: 30px;
    display: block;
    position: absolute;
    top: 22px;
    left: 16px;
    cursor: pointer;
  }
  #navcontainer #close_button span{
    display: block;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    background-color: #fff;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
  }
  
  #wrapper.active #navcontainer #close_button #cross_1{
    -webkit-transform: rotate(45deg) translate(4px, 4px);
    transform: rotate(45deg) translate(4px, 4px);
  }
  #wrapper.active #navcontainer #close_button #cross_2{
    -webkit-transform: rotate(-45deg) translate(-2px, 1px);
    transform: rotate(-45deg) translate(-2px, 1px);
  }
  #navcontainer #close_button #cross_1{
    -webkit-transform: rotate(-300deg) translate(4px, 4px);
    transform: rotate(-300deg) translate(4px, 4px);
  }
  #navcontainer #close_button #cross_2{
    -webkit-transform: rotate(300deg) translate(-2px, 1px);
    transform: rotate(300deg) translate(-2px, 1px);
  }
  nav ul#navlist{
    width: 100vw;
    position: static;
    text-align: left;
    display:block;
  }
  nav ul#navlist li{
    margin-bottom: 1em;
    display: block;
  }
  nav ul#navlist li a{
    padding: 5px 1.2vw 5px 5.2vw;
    color: #fff;
    font-size: 1.3em;
  }
  #menu_button{
    display: block;
    position: absolute;
    top: 26px;
    left: 16px;
    width: 30px;
    height: 30px;
    z-index: 1000;
    cursor: pointer;
  }
  #menu_button a#menu #topbar,
  #menu_button a#menu #middlebar,
  #menu_button a#menu #bottombar{
    display: block;
/*    height: 0;*/
    border-top: 2px solid #000;
      border-bottom: 2px solid #000;
    margin-bottom: 9px;
    background-color: #000;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
  }
  #hero_top{
    height: 380px;
  }
  #hero_top_simple{
    height: 380px;
  }
  #hero_top #statements{
    font-size: 12px;
    top: 282px;
    padding-right: 16px;
  }
  #hero_top #cta_home{
/*    right: 32px;*/
  }
  
  main{
    padding: 0 16px 0 16px;
  }
  main.nohero{
/*    margin-top: 20vw;*/
  }

  main .content_box{
    font-size: .85rem;
  }
  
  main h1{
    font-size: 5vw;
  }
  
  footer #inner_footer{
    padding-left: 16px;
  }
  
  div#outer3d{
    -webkit-perspective: 1000px;
    perspective: 1000px;
    -webkit-perspective-origin: center 40vw;
    perspective-origin: center 40vw;
    width: 100vw;
  }

  #wrapper{
    width: 100vw;
/*        position: relative;*/
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: center center;
    transform-origin: center center;
/*    transform-origin: center center -50vw;
      Note: This was causing issues with the facing side of the cube 
      stretching so that outer parts (including nav) were not visible. 
      Safari version 16.1 and earlier do not correctly render anything
      with a "z" value in transform-origin. 
      This method is not *quite* as nice as the original, because the 
      transition point is no longer 50wv back from the faces (ie: rotating
      along a central pole). The rotation looks slightly less realistic. 
      This is 2023. When iOS 16.1 is no longer an issue, I would want to 
      do this the original way again. Refer to page_cube.html in my 
      "experiments" folder in the capstone folder. */
    -webkit-transform: rotateY(0deg) translateZ(-50vw);
    transform: rotateY(0deg) translateZ(-50vw);
    -webkit-transition: all 0.7s cubic-bezier(.62,-0.1,.4,1.29);
    transition: all 0.7s cubic-bezier(.62,-0.1,.4,1.29);
  }
  #wrapper.active{
    -webkit-transform: rotateY(-90deg) translateZ(0vw) translateX(-50vw);
    transform: rotateY(-90deg) translateZ(0vw) translateX(-50vw);
  }
  
  #wrapper.active #middlebar
  {
    -webkit-transform: translate(400px,0);
    transform: translate(400px,0);
    opacity: 0;
  }
  #wrapper.active #topbar{
    -webkit-transform: translate(0, -300px);
    transform: translate(0, -300px);
    opacity: 0;
  }
  #wrapper.active #bottombar{
    -webkit-transform: translate(0, 300px);
    transform: translate(0, 300px);
    opacity: 0;
  }
  
  div#navcontainer{
    height: 100%;

    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotateY(90deg) translateZ(50vw); 
    transform: rotateY(90deg) translateZ(50vw); 
    background: rgba(102,102,102,0.9);
    position:fixed;
    width: 100vw;
  }
  nav{
    text-align: left;
    top: 60px;
    right:auto;
    
  }
} /* End Mobile 768 media query */

@media all and (max-width: 579px){
  #hero_top{
    height: 320px;
  }
  
  #hero_top_simple{
    height: 183px;
  }
  #hero_top #cta_home{
    top: 55px;
    z-index: 110;
    color: #000;
    position: fixed;
  }
  #subject_info #headshot{
    

    z-index:200;
    position: absolute;
  }

  #subject_info #headshot img{
    width: 134px;
    height: 134px;
  }
  #subject_info #credentials{
    left: 113px;
    top: 18px;
    position: absolute;
    z-index:120;
    width: 101vw;
  }
  #hero_top #statements{
    font-size: 12px;
    top: 200px;
  }
}

@media all and (max-width: 550px){
  main .wheel_img img{
    float: none;
    text-align: center;
    margin: 0;
    max-width: 100%;
    height: auto;
  }
  main .wheel_img{
    text-align: center;
  }


  #hero_top #subject_info{
    top: 103px;
  }
}

@media all and (max-width: 475px){
  #hero_top #subject_info{
    -webkit-transform: none;
    transform: none;
    width: 95%;
  }
  #hero_top #subject_info #headshot img{
    width: 83px;
    height: 83px;
  }

  #menu_button{
    top: 12px;
    left: 12px;
    width: 30px;
  }
  header #inner_header #logo{
    left: 55px;
    top: 8px;
  }
  #inner_header #tagline{
    top: 8px;
  }
  
  #hero_top #cta_home{
    top: 35px;
  }
  #subject_info #credentials{
    width: auto;
    position: static;
    margin-right: 12px;
    height: 69px;
    margin-left: 60px;
    font-size: 9px;
    padding: 3px 8px 3px 35px;
    margin-top: 5px;
    
  }
  
  #pageform .horizontal_radio .button{
    width: 5vw;
  }
  #hero_top #statements{
    font-size: 11px;
  }
}