.nav-trigger {position: absolute;top: 10px;right: 10px;display: none;width: 36px;height: 26px;z-index: 100;}
.nav-trigger span { position: absolute; display: block; height: 2px; width: 100%; background: #fff; transition: top .2s .25s, left .2s .25s, opacity .2s .25s, transform .2s 0s; }
.nav-trigger span:nth-child(1) { top: 0; }
.nav-trigger span:nth-child(2) { top: 9px; }
.nav-trigger span:nth-child(3) { top: 18px; }
.nav-trigger.active span { transition: background .2s, top .2s, left .2s, opacity .2s, transform .2s .25s; } 
.nav-trigger.active span:nth-child(3),
.nav-trigger.active span:nth-child(1) { top: 12px; }
.nav-trigger.active span:nth-child(2) { opacity: 0; }
.nav-trigger.active span:nth-child(1) { transform: rotate(45deg); }
.nav-trigger.active span:nth-child(3) { transform: rotate(-45deg); }

.mobile-only { display: none; }
.mobile { display: none; }

@media(max-width: 1023px){
    /* ------------------------------------------------------------ *\
        Base
    \* ------------------------------------------------------------ */
    
    * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

    body { min-width: 320px; }

    img { max-width: 100%; height: auto; }

    /* ------------------------------------------------------------ *\
        Wrapper
    \* ------------------------------------------------------------ */
    
    #wrapper { width: auto; padding: 0; margin: 0 10px 50px; background: #fff; box-shadow: 0 0 20px #E19145; }

    /* ------------------------------------------------------------ *\
        Banner
    \* ------------------------------------------------------------ */
    
    #banner #masthead { width: 100%; }
    #banner #masthead .button { height: auto; padding-top: 5px; padding-bottom: 5px; }

    /* ------------------------------------------------------------ *\
        Content
    \* ------------------------------------------------------------ */
    
    #content { width: 100%; padding-left: 10px; padding-right: 10px; height: auto; }
    #content #home_quote { left: 0; width: 100%; height: auto; max-width: 686px; }
    #content #home_subtitle { width: 100%; left: 0; height: auto; margin-left: 0; }
    #content .welcome { width: 100%; margin: 0; padding: 130px 30px 30px; }

    /*#gradient #content:not(.content-secondary) { padding-bottom: 30%; background: url(/images/stars.jpg) no-repeat 0 0; -webkit-background-size: cover; background-size: cover; position: relative; }
    #gradient #content:not(.content-secondary):before { content: ''; background: url(/images/planets.png) no-repeat 0 0; width: 100%; height: 0; padding-bottom: 19.2%; display: inline-block; position: absolute; top: 0; left: 0; -webkit-background-size: cover; background-size: cover; }
    #gradient #content:not(.content-secondary):after { content: ''; background: url(/images/welcome-bottom.png) no-repeat 0 0; width: 100%; height: 0; padding-bottom: 52.3%; position: absolute; bottom: 0; left: 0; -webkit-background-size: cover; background-size: cover; }
    #gradient #content .welcome { position: relative; z-index: 1; }*/
    
    #gradient #topnav { background: none !important; }

    /* ------------------------------------------------------------ *\
        Top Nav
    \* ------------------------------------------------------------ */
    
    #topnav { width: 100%; left: 0; height: auto; padding-bottom: 20px; }
    #topnav ul { width: 100%; position: static; text-align: center; height: auto; }
    #topnav ul:after { content: ''; line-height: 0; display: table; clear: both; }
    #topnav ul li { float: none; display: inline-block; vertical-align: middle; margin: 0 3px 10px; }

    /* ------------------------------------------------------------ *\
        Photos
    \* ------------------------------------------------------------ */
    
    .photos { float: none; height: auto; }
    .photos:after { content: ''; line-height: 0; display: table; clear: both; }
    .photos img { width: 50%; float: left; }
    .photos img:first-child { width: 42%; }
    .photos img ~ img { margin-left: 4%; }

    /* ------------------------------------------------------------ *\
        Bottom
    \* ------------------------------------------------------------ */
    
    #bottom { display: none; }

    /* ------------------------------------------------------------ *\
        Copyright
    \* ------------------------------------------------------------ */
    
    div#copyright { width: 100%; padding-bottom: 40px; }
    div#copyright img { left: 0; max-width: 48%; height: auto; }
    div#copyright p { width: 50%; margin-left: 50%; padding-right: 15px; }

    /* ------------------------------------------------------------ *\
        Cookie Bar
    \* ------------------------------------------------------------ */
    
    #cookie-bar.fixed.bottom { width: 100%; height: auto; }

    /* ------------------------------------------------------------ *\
        Video Page
    \* ------------------------------------------------------------ */
    

#content.vid-page #callout {
	display: none;
}
#content #videos .video .caption h4 {
	font-size: 13px!important;
}
#content #videos .video .caption p {
	font-size: 12px!important;
}
#content #videos #excerpts {
	margin-bottom: 9px!important;
}
#content #videos #excerpts .excerpt p {
	font-size: 12px!important;
	padding-top:3!important;
}
#content #videos #excerpts .excerpt img {
	height: 20px!important;
	width:auto!important;
	margin-top:0!important;
}



}

@media(max-width:768px){
    /* ------------------------------------------------------------ *\
        Helpers
    \* ------------------------------------------------------------ */
    
    .desktop { display: none !important; }
    .mobile-only { display: inline-block !important; }
    .mobile { display: block !important; }

    /* ------------------------------------------------------------ *\
        Banner
    \* ------------------------------------------------------------ */
    #banner {width: 100%;top: 0!important;z-index: 100!important;height: 70px!important;}
    #banner #masthead { width: 100%;}
    #banner #masthead img#mmy { height: 70px!important;width:auto!important; }
    #banner #masthead .button { display: none!important; }
    #masthead .title { width: 400px;left: 75px;top: 18px; }
    #masthead .subtitle  {width: 397px;left: 75px;top: 48px;}
    #banner #masthead .button { height: auto; padding-top: 5px; padding-bottom: 5px; }


    /* ------------------------------------------------------------ *\
        Nav
    \* ------------------------------------------------------------ */
    
    .nav-trigger { display: inline-block; }

    /* ------------------------------------------------------------ *\
        Topnav
    \* ------------------------------------------------------------ */
    
    #topnav { background: #60aedd!important; padding: 20px 20px 10px; text-align: center; opacity: 0; visibility: hidden; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; top: 70px; }
    #wrapper #topnav.active { opacity: 1!important; visibility: visible;background-color: #D6E9F7!important;padding-bottom: 12px; }
    #topnav ul li { display: block; margin: 15px 0; }
    #topnav ul li + li { margin-left: 0; }
    
    #topnav .button { background: #ce2b06; color: #fff; text-decoration: none; text-transform: uppercase; display: block; width: 197px; font: 16px/20px MyriadProLight,sans-serif; margin: 0; margin-left: 10px; height: auto; padding: 5px; margin-bottom: 10px; }
    #topnav .button span { background-image: url(/images/arrow-buttons.png); background-repeat: no-repeat; background-position: right 3px; padding-right: 16px; }
    #topnav .button .sm { font: 11px/14px MyriadPro,sans-serif; letter-spacing: 1px; background: none; }

    /* ------------------------------------------------------------ *\
        Photo
    \* ------------------------------------------------------------ */
    
	#photo {
	display: none!important;
}

/* ------------------------------------------------------------ *\
        Content
    \* ------------------------------------------------------------ */
    
    #content h1 { font-size: 26px !important; line-height: 1.5em !important; }
    #content h2 { font-size: 24px !important; line-height: 1.5em !important; }
    #content h4 { font-size: 28px !important; line-height: 1.5em !important; }

    #content ul,
    #content p { font-size: 14px !important; line-height: 1.5em !important; }

    #content {
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 20px!important;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
}
    #content #support { float: none; width: 100%; margin-left: 0; }
    #content #support h2 br { display: none; }
	#content #support #right-top {height: 50px!important;}
	#content #support #right-top h2 {padding: 10px 0px 0px 20px!important;}

	#content #support #list .item{
	border-bottom: 3px solid #fff;
	background-image: none!important;
	background-color: #D6E9F7;
	padding:0px 0px!important;
}
	#content #support #list .item img {
	height:16px!important;
	width:auto!important;
	margin-top:6px!important;
}
	#content #support #list .item p {
margin-left: 47px!important;
}
	#content .right-top h2 {padding-left: 12px;}
	#content .right-top h2 br {display: none;}
    #content #support .filler br { display: none; }
    #content #support .filler .bt { background: none; }
    #content #support .filler .bt ul li { background: none; padding-left:12px;}

    #content #support .filler .bt ul { font-size: 16px; }
	#content #support #whysupport  {padding-bottom:15px!important;height:auto!important;margin-bottom: 12px!important;}
	#content #support #whysupport h2 br {display: none!important;}
	#content #support #whysupport h2,
	#content #support #whysupport h4,
	#content #support #whysupport p
	{padding-left: 20px!important;}
    #content .top_left { width: 100%; padding: 20px; }
    #content .top_left h3 { font-size: 14px; }
    #content #home_quote { top: -30px; }
    #content #home_subtitle { top: 5.5%; }

	#content #questions {
	width: auto!important;
	padding: 0!important;
	display: block!important;
	float: none;
}
	#content #questions h2 {font-size: 24px!important;line-height: 30px!important;}
	#content #questions a.toggle, #content #questions h3 {font-size: 14px;line-height: 22px;}
    #gradient #content { padding-top: 0; }
    #gradient #content h4 { font-size: 18px !important; padding: 5px;padding-left:0!important; }
    #content .welcome { padding-top: 70px; }

    .content-secondary { padding: 30% 10px 30px !important; }

    #content .accordians .toggle { font-size: 16px; }
    #content .accordians .toggle span.des { font-size: 14px; }
    #content .accordians .element p { padding-right: 10px; }

    #content .sidenav { float: none; width: 100%; }
    #content .main { float: none; width: 100%; margin: 0; padding: 0; }

    #content .grahas p { padding-top: 7px; padding-bottom: 7px; background-repeat: repeat-y; }

    #content .days .right { width: 100%; float: none; border: 0; display:none;}
    #content .days .right h4 { font-size: 16px !important; }

    .gradient:after { content: ''; line-height: 0; display: table; clear: both; }

    #content .chart p { width: 100%; }

    /* ------------------------------------------------------------ *\
        Form
    \* ------------------------------------------------------------ */
    
    #content form .row { text-align: left; }
    #content form .row label {
	float: none;
	width: 100%;
	display: block;
	text-align: left;
	font-size: 14px;
}

    form .row input[type=text],
    form .row select,
    form .row textarea { width: 100%; }

    /* ------------------------------------------------------------ *\
        Copyright
    \* ------------------------------------------------------------ */
    
    /*#copyright:before { content: ''; background: #86bef7; width: 10px; height: 130px; display: inline-block; position: absolute; top: 0px; right: 14%; }*/ 
    #copyright { width: 100%; margin: 0 0 4px 0; padding: 0 20px; }
    #copyright br { display: none!important; }
	
    /* ------------------------------------------------------------ *\
        Sidenav tweak
    \* ------------------------------------------------------------ */
	
	div.sidenav  {
		overflow:hidden;
		margin-bottom:12px;
	}
	div.sidenav.calendar li {
		float:left;
		margin-bottom:12px!important;
		width:100px;
		padding:0;
	}
	#content .sidenav.principles ul li{
	padding-left: 15px!important;
	margin-bottom:14px;
	white-space:nowrap;
	float:left;
	margin-left:12px;
}
	#content .sidenav.principles ul li span{
	font: 21px MyriadProSemiBold, sans-serif!important;
	top: -5px;
}
}

@media(max-width: 550px){
 div#copyright:before { height: 100px; }
	#content.vid-page h1 {margin-bottom: 0!important;}
	#content .video a.frame {display: none!important;}
	#content #videos .video {height:auto!important;padding-bottom:12px!important;}
	#content #videos .caption {position:static!important;width:100%!important;height:auto!important;padding:0!important;}
	#content #videos .caption h4 {margin-top: 0!important;margin-bottom:0!important;}
	#content #videos .caption p {margin-top: 0!important;}
	#content #videos .caption h4.lower {margin-top: 76px!important;}
	#content #videos .caption br {display:none!important;}
	#content #videos .caption img {position:static!important; }
	#content #videos #excerpts {margin-bottom: 60px!important;border-bottom: none!important;}
	#content #videos .excerpt {padding:0 0 4px!important;border-bottom: 1px solid #db7b02;border-left:none!important;float:none!important;width:auto!important;;}
	#content #videos #excerpts .excerpt img {height: auto!important;margin:6px 0!important;}
}

@media(max-width: 490px){
 #masthead .title,
 #masthead .subtitle {width: 360px;}
}
@media(max-width: 475px){
    #content #home_subtitle { top: 3.5%; }
	#content .right .filler .bt ul a{
	display: block;
}
    div#copyright:before { height: 80px; }

    .photos img { width: 100% !important; float: none; }
    .photos img ~ img { margin-left: 0; margin-top: 10px; }

    .gradient .photo { float: none; width: 100%; text-align: center; margin: 0; }
    .gradient .photo img { margin: 0 auto 10px; }
}

@media(max-width: 460px){
 #masthead .title,
 #masthead .subtitle {width: 320px;}
}
@media(max-width: 425px){
 #masthead .title,
 #masthead .subtitle {width: 290px;}
}
@media(max-width: 400px){
 #masthead .title {width: 260px;}
 #masthead .subtitle {width: 300px;}
 #masthead .title {top:20px}
 #masthead .subtitle  {top:45px}
 #content #home_subtitle { top: 2.5%; }
}
@media(max-width: 385px){
 #masthead .title { width: calc(100% - 80px)!important;  }
 #masthead .subtitle { width: calc(100% - 50px)!important;}
#content #support #right-top h2 {font-size: 20px!important;line-height: 34px!important;
}
}
@media(max-width: 340px){
/* #masthead .title {width: 210px;}
 #masthead .subtitle {width: 260px;}
 #masthead .title {top:25px}
 #masthead .subtitle  {top:46px}*/
#content #videos .caption h4.lower {margin-top: 106px!important;}
}
@media(max-width: 320px){
    /*#masthead .title { width: 200px!important;top:28px!important;}
    #masthead .subtitle  { width: 190px!important;top:46px!important; }*/
}