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

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

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

@media screen and (max-width: 1200px) {
    .inner {
        width:90% !important;
    }
}

@media screen and (max-width: 900px) {
    #footer .inner {
        width:90%;
    }
}

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

    #campaignsearchsection, #campaignsearch, #resourcesandconnect .contentleft, #resourcesandconnect .contentright {
        width:100%;
    }

	#volform #formleft, #volform #formright {
		width:100%;
		margin-right:0;
		margin-bottom:10px;
	}

	#volform .formrow {
		margin-bottom:10px;
	}

	#submit {
		width:100%;
        padding:10px;
        font-size:20px;
	}

    body #primarycontent .boxitem {
        width:45%;
        margin-right:2%;
    }

    body #primarycontent .boxitem:nth-of-type(even) {
        margin-right:0;
    }

    #events, #map {
        width:100%;
    }

    #candidatecards .card {
        max-width:100%;
    }
}

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


    #resourcesandconnect .contentright .socialbtn {
        width:75px;
    }

    #resourcesandconnect .contentright {
        padding:50px 0;
    }

    #resourcesandconnect .contentleft .inside {
        width:90%;
    }

    .boxitem .con a.btn {
        position:relative;
        bottom:0;
        width:100%;
    }

    #masthead h2 {
        font-size:30px;
        line-height:35px;
    }

    #prefooter .socialbtn {
        width:54px;
        margin-right:20px;
    }

    #language {
        margin-right:10px;
    }

    #language a {
        padding: 10px 14px;
    }

    #donatebtn {
        padding:10px 19px;
    }

	#logo {
		width:70%;
		margin-right:0;
		margin-bottom:20px;
	}

	#donatebtn {
		vertical-align:middle;
		float:none;
		top:0;
	}

	body #primarycontent .boxitem {
		width:100%;
		margin-right:0;
        height:auto;
	}

	#largeaction .con, #largeaction .con .pintobtm {
		position:relative;
		width:100%;
	}

	.disclaimer .col-md.footerLogo {
		width:100%;
		border:none;
	}

	#masthead #actions .actionitem {
		width:20%;
	}

    #largeaction .con br {
        display:none;
    }

    #largeaction .con {
        position:absolute;
        top:30px;
        padding:0 20px;
        transform:none;
    }

    #largeaction .con {
        top:30px;
        transform:none;
    }

    #largeaction h3 {
        font-size: 24px;
        line-height: 30px;
    }

    #largeaction p {
        font-size:15px;
        line-height:20px;
    }
}

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

}

@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.5s opacity ease-in;
        -moz-transition: 0.5s opacity ease-in;
        -o-transition: 0.5s opacity ease-in;
        -ms-transition: 0.5s opacity ease-in;
        transition: 0.5s opacity ease-in;
        -webkit-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
    }
    
    .fade-in.animated {
        opacity: 1;
    }

    span.cursor {
        display:inline-block;
        border-right:solid 4px;
        animation: animated-cursor 1s steps(29,end) infinite;
    }

    @keyframes animated-cursor {
      from{border-right-color:#2a2a2a;}
      to{border-right-color: transparent;}
    }

}