/* Media Queries */

@media screen and (max-width: 1200px){

	/* Navigation */

	div#logo-wrap{
		left: 2%;
	}

	nav#header-nav{
		right: 2%;
	}
	
}

@media screen and (max-width: 1100px){

	body.front div#logo-wrap{
		width: 200px;
	    position: absolute;
	    left: 4%;
	    top: 20px;
	}

	div#logo-wrap{
		left: 4%;
	}

	/* Navigation */

	nav#mobile{
		display: block;
	}

	nav#header-nav{
		display: none;
		position: absolute;
		right: -300px;
		width: 300px;
		background-color: #262262;
		top: 0px;
		box-shadow: 0px 8px 14px rgba(0,0,0,0.3);
		z-index: 10;
	}

	nav#header-nav ul#header-links{
		width: 100%;
		margin-top: 73px;
	}

	nav#header-nav ul#header-links li{
		display: block;
		width: 100% !important;
		margin: 0;
		padding: 0;
	}

	nav#header-nav ul#header-links li a:hover:after{
		width: 0%;
		background: transparent;
	}

	nav#header-nav ul#header-links li a,
	nav#header-nav ul#header-links li a:visited{
		border-bottom: 2px solid #fff;
		padding: 10px 10px 5px 10px;
		box-sizing: border-box;
		display: block;
		width: 100%;
		background-color: #262262;
		-webkit-transition: all .4s;
		-moz-transition: all .4s;
		-ms-transition: all .4s;
		-o-transition: all .4s;
		transition: all .4s;
	}

	nav#header-nav ul#header-links li a:hover{
		background-color: #363188;
	}

	nav#header-nav ul#header-links li a:first-child{
		border-top: 2px solid #fff;
	}

	nav#header-nav ul#header-links li a:last-child{
		border-bottom: 2px solid transparent;
		/* border-bottom: 2px solid #fff; */
	}

	nav#header-nav ul#header-links li:last-of-type {
		border-bottom: 2px solid #fff;
	}

	.vote-mail.h-volunteer a {
		border-bottom: 2px solid #fff !important;
	}

	nav#header-nav ul#header-social-links{
		display: block;
		width: 100%;
	}

	nav#header-nav ul#header-social-links li{
		display: block;
		width: 100%;
		text-align: center;
		margin: 0px;
	}

	nav#header-nav ul#header-social-links li a,
	nav#header-nav ul#header-social-links li a:visited{
		border-bottom: 2px solid transparent;
		padding: 15px 10px 10px 10px;
		box-sizing: border-box;
		display: block;
		-webkit-transition: all .4s;
		-moz-transition: all .4s;
		-ms-transition: all .4s;
		-o-transition: all .4s;
		transition: all .4s;
	}

	nav#header-nav ul#header-social-links li.h-facebook a,
	nav#header-nav ul#header-social-links li.h-facebook a:visited{
		background-color: #004482;
	}

	nav#header-nav ul#header-social-links li.h-facebook a:hover{
		background-color: #0458a5;
	}

	nav#header-nav ul#header-social-links li.h-facebook a:hover > svg g,
	nav#header-nav ul#header-social-links li.h-twitter a:hover > svg g{
		fill: #fff;
	}

	nav#header-nav ul#header-social-links li.h-twitter a,
	nav#header-nav ul#header-social-links li.h-twitter a:visited{
		background-color: #36B8FF;
	}

	nav#header-nav ul#header-social-links li.h-twitter a:hover{
		background-color: #30a0dd;
	}
	
	nav#header-nav ul#header-social-links li.h-facebook,
	nav#header-nav ul#header-social-links li.h-twitter{
		display: inline-block;
		vertical-align: top;
		width: 50%;
		box-sizing: border-box;
	}

	nav#header-nav ul#header-social-links li.h-twitter{
		margin-left: -5px;
	}

	nav#header-nav li.h-volunteer a,
	nav#header-nav li.h-volunteer a:visited
	nav#header-nav li.h-contribute a,
	nav#header-nav li.h-contribute a:visited {
		/* background-color: #4942ad; */
		background-color: #F12129;
		border-bottom: 2px solid #fff;
		border-top: 2px solid #fff;
	}

	nav#header-nav li.h-volunteer a:hover{
		/* background-color: #26225D; */
		background-color: #4942ad;
	}

	nav#header-nav ul#header-social-links li.h-twitter a,
	nav#header-nav ul#header-social-links li.h-twitter a:visited{
		padding: 20px 10px 10px 10px;
	}
	.top-header-a-div {
		margin: 0;
	}
}


@media screen and (max-width: 950px){

	.inner{
		width: 90%;
	}

	/* Footer */

	footer{
		padding: 60px 5%;
		box-sizing: border-box;
	}

	nav#footer-nav{
		width: 100%;
	}

	nav#footer-nav ul li{
		display: block;
		width: 100%;
		margin: 0 0 10px 0;
	}

	nav#footer-nav ul li.f-contribute{
		margin: 0 0 15px 0;
	}

	nav#footer-nav li a:hover:after{
		width: 0%;
		background: transparent;
	}

	nav#footer-nav ul li a:hover{
		color: #F12129;
	}

	nav#footer-nav ul li.f-contribute a:hover{
		color: #fff;
	}

	nav#footer-nav ul#top-list{
		width: 100%;
	}

	nav#footer-nav ul#top-list li{
		width: 100% !important;
	}

	nav#footer-nav ul li.f-volunteer a,
	nav#footer-nav ul li.f-volunteer a:visited{
		padding: 10px 24px;
	}

}

@media screen and (max-width: 850px){

	/* Home Page */

	#signupbar #donatelanguage,
	#signupbar #donatebuttons{
		width: 70%;
		display: block;
		margin-right: 0%;
		margin: auto;
	}

	#signupbar #donatebuttons{
		margin-top: 40px;
	}

	p.learnmore a,
	p.learnmore a:visited{
		font-size: 25px;
	}

	div#office-loc,
	div#map-wrap img{
		display: block;
		width: 100%;
	}

	div#office-loc{
		margin-left: 0px;
		padding-left: 0px;
		margin-top: 40px;
	}

	/* Bio Page */

	div#bio-text-wrap img.float-right,
	div#bio-text-wrap img.float-left,
	div#bio-text-wrap .video-left{
		float: none;
		margin: 20px auto;
		display: block;
	}

	div#bio-text-wrap .video-left{
		margin: 40px auto;
	}

	.volunteer-form-wrapper form input[type=text],
	.volunteer-form-wrapper form input[type=email],
	.volunteer-form-wrapper form input[type=tel] {
		width: 100%;
		margin: 10px 0;
	}

}


@media screen and (max-width: 780px){

	/* Home Page */

	#signupbar #donatelanguage,
	#signupbar #donatebuttons{
		width: 90%;
	}

	/* NGP Form */

	#presignup{
		padding: 40px 0px 33px 0px;
		box-sizing: border-box;
	}

	#NVSignupForm3500000000014421 .at-row.at-row-solo.EmailAddress,
	#NVSignupForm3500000000014421 .at-row.at-row-solo.PostalCode,
	#NVSignupForm3500000000014421 form .at-form-submit{
		width: 100%;
		margin: 0px;
		box-sizing: border-box;
	}

	#NVSignupForm3500000000014421 form .at-form-submit .at-submit{
		width: 100%;
	}

	#NVSignupForm3500000000014421 .at-form-submit .at-submit{
		margin: 0px;
	}

	#NVSignupForm3500000000014421 .at-form-submit{
		padding: 0px !important;
	}

}


@media screen and (max-width: 780px){

	/* Media */

	div.media-item{
		width: 100%;
		margin-right: 0%;
		display: block;
	}

	div.media-item:nth-child(2n){
		margin-left: 0px;
	}

	p#btn-see-more a,
	p#btn-see-more a:visited{
		font-size: 23px;
	}


	/* Supporters */

	div.supporter-item{
		width: 47.4%;
		padding: 0px 4%;
		box-sizing: border-box;
	}

	div.supporter-item:nth-child(2n){
		margin-right: 0%;
	}

}


@media screen and (max-width: 560px){

	body.not-front header{
		min-height: 460px;
	}

	div#content-wrap h2{
		font-size: 40px;
	}

	div#notice-bar{
		padding: 12px 20px;
	}

	div#notice-bar p{
		font-size: 15px;
		line-height: 20px;
	}

	div#notice-bar span img{
		width: 15px;
	}

	/*div#notice-bar span{
		width: 15px;
	}*/

	/* Home Page */

	body.front header{
		background: url('../images/home/mobile-feature-home.jpg') no-repeat;
	    background-position: top center;
	    min-height: 460px;
	    background-size: cover;
	}

	div#top-wrap{
		margin-top: 0px;
	}

	#signupbar #donatelanguage,
	#signupbar #donatebuttons{
		width: 100%;
	}

	#signupbar #donatebuttons a.smallbtn{
		font-size: 35px;
	}

	#signupbar #donatebuttons span{
		font-size: 18px;
		top: 8px;
	}

	#signupbar #donatebuttons a.contribute{
		font-size: 25px;
	}

	div#intro-sec h2{
		font-size: 40px;
	}

	p.learnmore a,
	p.learnmore a:visited{
		padding: 20px 10px;
		font-size: 23px;
	}

	/* Media Page */

	body.media header{
		background: url('../images/media/mobile-feature-media.jpg') no-repeat;
	    background-position: top center;
	    min-height: 460px;
	    background-size: cover;
	}

	div#redbox{
		padding: 40px 20px;
	}

	/* Issues Page */

	div#issues-wrap div.issue-item h2{
		font-size: 30px;
	}

	div#issues-wrap div.issue-item{
		padding: 50px 0 40px 0;
	}

	div.issue-item img.issue-left,
	div.issue-item img.issue-right{
		float: none;
		margin: 20px 0px;
	}


	/* FAQ Page */

	div.ques-item h3{
		font-size: 30px;
		line-height: 36px;
	}

	/* Supporters Page */

	div.supporter-item{
		width: 47.2%;
		padding: 0px 4%;
		box-sizing: border-box;
	}


	/* Privacy Page */

	div#privacy-policy-wrap ul,
	div#privacy-policy-wrap ol{
		padding-left: 40px;
	}

}


@media screen and (min-width: 1100px){

    .fade-in-from-bottom{
        opacity: 0;
        animation-timing-function: ease-out;
        -webkit-transform: translateY(15px);
        -moz-transform: translateY(15px);
        -o-transform: translateY(15px);
        -ms-transform: translateY(15px);
        transform: translateY(15px);
    }

    .fade-in-from-bottom.animated{
        animation-name: fade-from-bottom;
        animation-duration: 0.5s;
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    @keyframes fade-from-bottom{
        0%{
            opacity: 0;
            -webkit-transform: translateY(15px);
            -moz-transform: translateY(15px);
            -o-transform: translateY(15px);
            -ms-transform: translateY(15px);
            transform: translateY(15px);
        }
        90%{
            opacity: 1;
        }
        100%{
            -webkit-transform: translateY(0);
            -moz-transform: translateY(0);
            -o-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0);
        }
    }

    .fade-in-from-left{
        opacity: 0;
        animation-timing-function: ease-out;
        -webkit-transform: translateX(-15px);
        -moz-transform: translateX(-15px);
        -o-transform: translateX(-15px);
        -ms-transform: translateX(-15px);
        transform: translateX(-15px);
    }

   	.fade-in-from-left.animated{
        animation-name: fade-from-left;
        animation-duration: 0.5s;
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    @keyframes fade-from-left{
        0%{
            opacity: 0;
            -webkit-transform: translateX(-15px);
            -moz-transform: translateX(-15px);
            -o-transform: translateX(-15px);
            -ms-transform: translateX(-15px);
            transform: translateX(-15px);
        }
        90% {
            opacity: 1;
        }
        100% {
            -webkit-transform: translateX(0);
            -moz-transform: translateX(0);
            -o-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
        }
    }

    .fade-in-from-right{
        opacity: 0;
        animation-timing-function: ease-out;
        -webkit-transform: translateX(40px);
        -moz-transform: translateX(40px);
        -o-transform: translateX(40px);
        -ms-transform: translateX(40px);
        transform: translateX(40px);
    }

    .fade-in-from-right.animated{
        animation-name: fade-from-right;
        animation-duration: 0.5s;
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    @keyframes fade-from-right{
        0%{
            opacity: 0;
            -webkit-transform: translateX(40px);
            -moz-transform: translateX(40px);
            -o-transform: translateX(40px);
            -ms-transform: translateX(40px);
             transform: translateX(40px);
        }
        90%{
            opacity: 1;
        }
        100%{
            -webkit-transform: translateX(0);
            -moz-transform: translateX(0);
            -o-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
        }
    }

    .fade-in{
        opacity: 0;
        -webkit-transition: 0.3s opacity ease-in;
        -moz-transition: 0.3s opacity ease-in;
        -o-transition: 0.3s opacity ease-in;
        -ms-transition: 0.3s opacity ease-in;
        transition: 0.3s opacity ease-in;
        -webkit-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
    }
    
    .fade-in.animated {
        opacity: 1;
    }

}


@media screen and (max-width: 1370px) and (min-width: 1200px){

	div#logo-wrap{
		left: 2%;
	}

	nav#header-nav{
		right: 2%;
	}

	nav#header-nav ul#header-links li{
		padding: 5px 3px;
	}

	nav#header-nav ul#header-links{
		width: 560px;
	}

	/* ul#header-social-links li:nth-child(2) */
	ul#header-social-links li.h-volunteer {
		margin-right: 30px;
	}

}


@media screen and (max-width: 1200px) and (min-width: 1100px){

	div#logo-wrap{
		width: 185px;
	}

	nav#header-nav ul#header-links li{
		padding: 5px 3px;
	}

	nav#header-nav ul#header-links{
		width: 500px;
	}

	nav#header-nav ul li a,
	nav#header-nav ul li a:visited{
		font-size: 15px;
	}

	/* ul#header-social-links li:nth-child(2) */
	ul#header-social-links li.h-volunteer {
		margin-right: 20px;
	}

}