.nav-trigger { position: absolute; top: 25px; right: 20px; display: none; width: 30px; height: 26px; }
.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: 19px; }
.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 !important; }

@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%; }

    #masthead #subtitle,
    #masthead #title { max-width: calc(100% - 300px); height: auto; }

    #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 #callout { width: 100%; }
    #content .right { margin-left: 20px; margin-bottom: 10px; width: 300px; }
    #content .right .filler { width: 100%; }
    #content .right .filler .bt ul li { padding-right: 15px; }
    #content .right .filler .bt ul a { display: inline-block; background-position: right center; }

    #content .welcome { width: 100%; margin: 0; padding: 130px 30px 30px; }
    #gradient #content .welcome { position: relative; z-index: 1; }
#content .quote  {height: auto!important;padding-bottom:7px!important;}
#content .quote img{margin-left: 20px;margin-top: 0px;margin-right: 15px;height:150px!important;width: auto!important;}

    
    /*#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 {margin: 0px 0px 12px 0!important;width:100%!important;}
#content.vid-page #videos {margin: 0px 0px 12px 0!important;width:100%!important;}
#content.vid-page #videos .video img {position: static!important;}
#content.vid-page #callout {display: none;}
#content.vid-page #videos .video .caption h4 {font-size: 13px!important;}
#content.vid-page #videos .video .caption h4 br {display: none!important;}
#content.vid-page #videos .video .caption p strong, #content.vid-page #videos .video .caption p {font-size: 12px!important;line-height: 15px;}
#content.vid-page #videos .video .caption p strong {display: block!important;}
#content.vid-page #videos .video .caption p br {display: none!important;}
#content.vid-page #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: 900px){
#content #questions {width: 400px!important;}
}
@media(max-width: 810px){
#content #questions {width: 360px!important;}
}

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

    /* ------------------------------------------------------------ *\
        Banner
    \* ------------------------------------------------------------ */
    
    #banner,
    #banner #masthead { height: 70px; }
    #banner #masthead .button { display: none; }
    #masthead #subtitle,
    #masthead #title { width: calc(80% - 110px); max-width: 100%; left: 75px; }
    #masthead #title { top: 12px; }
    #masthead #subtitle { top: 50px; }
    #masthead #mmy { height: 70px; width: auto; }
	#photo {display: none!important;}

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

    /* ------------------------------------------------------------ *\
        Topnav
    \* ------------------------------------------------------------ */
    
    #topnav { background: #60aedd; padding: 20px 20px 10px; text-align: center; opacity: 0; visibility: hidden; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; top: 70px; }
    #topnav.active { opacity: 1; visibility: visible;background-color:#D6E9F7!important; }
    #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;display:block; }

    /* ------------------------------------------------------------ *\
        Content
    \* ------------------------------------------------------------ */
    
    #content {width:95%!important;margin: 0 auto!important;padding:20px 0!important;}
	#content h1 { font-size: 26px !important; line-height: 1.3 !important; }
    #content h2 { font-size: 24px !important; line-height: 1.3 !important; }
    #content h4 { font-size: 28px !important; line-height: 1.3 !important;padding-left:0!important; }
    #content h5 { font-size: 16px !important; line-height: 1.3 !important; }
    #content ul,
    #content ol,
    #content p {
	font-size: 14px !important;
	margin: 0 0 9px;
	line-height: 1.5em !important;
}
    #content .quote p { font-size: 16px !important; line-height: 1.8em !important; }
    #content .quote p br { display: none!important; }
    #content { padding-left: 0; padding-right: 0; padding-top: 50%; -webkit-background-size: 100% auto; background-size: 100% auto; }
    #content #questions { float: none; width: 100%; margin-left: 0; }
    #content #support { float: none; width: 100%; margin-left: 0; }
	#content #support .rajaraam {background-size: 100%!important;width: 100%!important;}
	#content #support .rajaraam .bt {background: none!important;}
	#content #support .rajaraam p br {display: none!important;}
	#content #support #list .item{background-size: 100%!important;width: 100%!important;}

	#content .right-top h2 {padding-left: 12px;}
	#content .right-top h2 br{display: none;}
    #content .top_left { width: 100%; padding: 20px; }
    #content .top_left h3 { font-size: 14px; }
	#content #questions {width: 100%!important;}
	#content #questions .different h4{margin-bottom: 0px!important;}
    #gradient #content { padding-top: 0; }
    #gradient #content h4 { font-size: 18px !important; padding: 5px; }
    #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 .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%; }


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

#content.vid-page {padding: 20px!important;}
#content.vid-page #videos .video .caption h4 {line-height: 18px!important;}
#content.vid-page #videos .video .caption p strong, #content.vid-page #videos .video .caption p {line-height: 12px!important;}

	/* ------------------------------------------------------------ *\
        Copyright
    \* ------------------------------------------------------------ */
    
    div#copyright:before { display:none!important; }
    div#copyright img { display:none!important; }
    div#copyright p { width: 100%; margin-left: 0; padding: 0 20px; }
	
    /* ------------------------------------------------------------ *\
        Sidenav tweak
    \* ------------------------------------------------------------ */
	
    #content .sidenav { float: none!important; width: 100%!important; }
    #content .sidenav  {overflow:hidden!important;margin-bottom:12px!important;}
    #content .sidenav li {float:left!important;margin-bottom:12px!important;width:100px!important;padding:0!important;}
}

@media(max-width: 650px){
    #content #home_subtitle { top: 4%; }
    #masthead #subtitle,
    #masthead #title { width: calc(100% - 110px); max-width: 100%; }
    #masthead #title {top: 20px; }
    div#copyright:before { height: 100px; }
	#content.vid-page h1 {margin-bottom: 0!important;}
	#content.vid-page .video a.frame {display: none!important;}
	#content.vid-page #videos .video {height:auto!important;padding-bottom:12px!important;}
	#content.vid-page #videos .caption {position:static!important;width:100%!important;height:auto!important;padding:0!important;}
	#content.vid-page #videos .video .caption h4 {margin: 0!important;padding:4px 0!important;}
	#content.vid-page #videos .video .caption p {font-size: 13px!important; margin-top: 0!important;}
	#content.vid-page #videos .video .caption p strong {display: inline!important;font-size: 13px!important;}
	#content.vid-page #videos .caption h4.lower {margin-top: 76px!important;}
	#content.vid-page #videos .caption br {display:none!important;}
	#content.vid-page #videos .caption img {position:static!important; }
	#content.vid-page #videos .caption h4.lower {padding:12px 0 0!important; }
	#content.vid-page #videos #excerpts {margin-bottom: 60px!important;border-bottom: none!important;}
	#content.vid-page #videos .excerpt {padding:0 0 4px!important;border-bottom: 1px solid #db7b02;border-left:none!important;float:none!important;width:auto!important;}
	#content.vid-page #videos .excerpt p {position:static!important;}
	#content.vid-page #videos #excerpts .excerpt img {height: auto!important;margin:6px 0!important;}
}

@media(max-width: 475px){
    #masthead #title { width: calc(100% - 70px); max-width: 100%; left: 75px;top: 25px; }
    #masthead #subtitle { top: 50px; }

    #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: 400px){
    #content #home_subtitle { top: 2.5%; }
}
@media(max-width: 340px){
    #masthead #title { width: calc(95% - 70px); max-width: 100%; }
#content #videos .caption h4.lower {margin-top: 106px!important;}
}