@media (max-width: 1900px) {


    #home .how .flex .box {

        padding: 0 35px 40px 35px;
    }

    #topwrapper li.login {

        display: block;
        margin: 0;
    }

    #topwrapper .logo {
        margin: 0 40px;
    }

    #topwrapper li {

        margin: 0 40px;
    }

    #pages.about .two {
        margin: -70px 0 0 -50px;
    }

    #pages.about #how .flex .box {
    width:14.6%;

    }

    #pages.donate .options{
        width:95%;
    }

    #pages.account .left h2{
        line-height:1;
    }

    }

@media (max-width: 1600px) {
    .video-bg{
        width:140%;
    }

    #home .how .flex .box {
        padding: 0 32px 40px 32px;
    }

    #topwrapper li{
        margin:0 40px;
    }

    #pages.about .one .pix {
        width: 570px;
    }

    #pages.about .two .text {
        padding: 130px 0 0 5%;
        width: 60%;
    }

    #topwrapper li.login{
        right:40px;
    }

    #home .how .flex .box, #pages.about #how .flex .box {

        padding: 0 35px 60px 35px;
    }

    #pages.donate .options .box{
        width:500px;
    }
}

@media (max-width: 1400px) {
    .main-menu{
        position: absolute;
        display: none;
        right:0;
        top: 0;
        height: 100%;
        transition: left 0.3s ease, box-shadow 0.3s ease;
        z-index: 999;
        width:100%;
    }

    #navwrapper .main-menu ul.nav{
        list-style: none;
        margin: 0;
        height: 100vh;
        flex-direction:column;

        width: 100%;
        background: #FAF3E8;
        z-index: 9;

    }

    #navwrapper .fa.fa-close{
        color:#400519;
    }

    #navwrapper .menu-toggle span{
        color:#fff;
        font-size:18px;
        display: block;
        z-index:9;
        width: 16px;
        height: 20px;
        position:fixed;
        top:0px;
        right:0px;
        background:rgba(0,0,0,0.7);
        padding:10px 12px 10px 12px;
    }

    #navwrapper .menu-toggle, #navwrapper .menu-close{
        display:block;
        text-align:right;
        font-size:21px;
    }

    #navwrapper .logo{
        display: none;
    }

    #topwrapper #navwrapper li{
        margin:0;
    }


    #navwrapper .sub_menu li a {
        font-size: 14px;
        padding: .75em  5px;
    }

    #topwrapper #navwrapper  li a,  #topwrapper #navwrapper .main-menu a, #home #topwrapper li a{
        display: block;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        padding:30px 0;
        font-family: "quiche-sans", sans-serif;
        font-size:30px;
        color:#400519;
    }

    #home #topwrapper .button.join{
        border:none;
    }

    .main-menu .menu-close {
        position: absolute;
        right: 10px;
        top: -35px;
        border-bottom: none!important;
    }

    .main-menu:target, .main-menu[aria-expanded="true"]{
        display: block;
        right: 0;
        outline: none;
        -moz-box-shadow: 3px 0 12px rgba(0,0,0,.25);
        -webkit-box-shadow: 3px 0 12px rgba(0,0,0,.25);
        box-shadow: 3px 0 12px rgba(0,0,0,.25);
    }

    .main-menu:target .menu-close, .main-menu[aria-expanded="true"] .menu-close{
        z-index: 1001;
    }

    #topwrapper .button.join{
        border:none;
    }

    .main-menu:target ul, .main-menu[aria-expanded="true"] ul {
        position: relative;
        z-index: 1000;
    }

    .main-menu:target + .backdrop,
    .main-menu[aria-expanded="true"] + .backdrop{
        position: absolute;
        display: block;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 998;
        background: #000;
        background: rgba(0,0,0,.85);
        cursor: default;

    }
    .main-menu,
    .main-menu:target + .backdrop,
    .main-menu[aria-expanded="true"] + .backdrop{
        position: fixed;

    }

    #topwrapper .logo.mobile{
        display:block;
    }

    #home #topwrapper .button.join{
        padding:0;
        position:relative;
        right:0;
        top:0;
    }

    #topwrapper {

        padding: 45px 0 290px 0;

    }

    #footerwrapper ul{
        display:none;
    }

    #pages.about .one .text {
        padding: 0 0 0 4%;

    }

    #footerwrapper .logo{
        margin:0 auto;
    }

    #pages.about .two .pix {
        width: 332px;
    }

    #pages.about .two {
        margin: -70px 0 0 -0px;
    }

    #pages.about #how .flex .box {
        width: 13.7%;
    }

    #pages.apply .flex{
        width:80%;
    }

    #pages.contact .form {

        padding: 40px 3%;
        width: 26%;
    }

    #pages.volunteer .banner, #pages.contact .banner{
        width:65%;
    }

    #pages.donate .options {
        width: 100%;
    }

    #pages.donate .options .box{
        width:40%;
    }

    #pages.donate .title{
        font-size:65px;
    }


    #pages.donate.sponsor #part1 .options, #pages.donate.sponsor #part1 .ticketbox.general{
        width:245px;
    }

    #pages.donate.sponsor #part1 .ticketbox.general{
        width:240px;
    }

    #pages.donate.sponsor .ticket{
        font-size:30px;
    }

    #pages.donate.sponsor .ticketprice {
        font-size: 40px;
    }

    #pages.donate.sponsor .ticketbox.general .ticket{
        font-size:15px;
    }

    #pages.donate.sponsor #part1 .ticketbox.general .ticketprice {

        margin: 13px auto 0 auto;
    }

    #pages.donate.sponsor .selectdate{
        font-size:15px;
    }

    #pages.donate.sponsor #part2{
        width:45%;
    }

    #pages.contact.account .form{
        width:100%;
    }


}

@media (max-width: 1200px) {

    #home .join .box{
        top:80px;
    }

    #home .join h2 {
        margin: 60px 0 60px 0;
    }

    #home .join{
        padding:80px 0;
    }

    #home .member{
        padding: 150px 0px 100px 0px;
    }

    #home .how .flex, #pages.about #how .flex{
        flex-direction:column;
        border:none;
    }

    #home .how .flex .box, #home .how .flex .box.last, #pages.about #how .flex .box, #pages.about #how .flex .box.last{

        width: 90%;
        display: flex;
        justify-content:space-between;
        border: 1px solid #EDD1A8;
        padding: 15px 5%;
        margin: 0 0 15px 0;
    }

    #home .how .flex .box .top, #pages.about #how .box .top{
        border:none;
        padding:0;
        text-align:left;
        width:250px;

    }

    #home .how .small br, #pages.about #how .box .small br{
        display:none;
    }

    #home .large, #pages.about #how .box .large{
        margin:0  0px;
        width:250px;
        text-align:left;
    }

    #home .how .small, #pages.about #how .box .small {

        text-align: left;
        width: 65%;
    }

    .video-bg {
        width: 170%;
        left: -25%;
    }

    #home .join .pic{
        left:0;
        width:500px;
    }

    #home .join .pic img{
        width:100%;
    }

    #home .join .large{
        width:100%;
        margin:20px 0;
    }

    #home .join .par{
        width:43%;
    }

    h1{
        font-size:45px;
    }

    h3{
        font-size:25px;
    }

    #pages.donate .ticketprice{
        font-size:40px;
    }

    #dn-center .dn-field .dn-textfield{
        border-radius:0;
    }

    #home .bot .amount, #home .bot .title{
        font-size:30px;
    }

   h2, #home .how .flex .number{
        font-size:40px;
    }

    #home .how .flex .box .icon{
        margin:-20px 0 0 0;
    }

    #home .how .flex .box .icon img{
        width:40px;
    }

    #home .member{
        background-attachment: scroll;
    }

    #pages.about .one .pix {
        width: 470px;
    }

    #pages.about .larger {
        margin: 0px 0;
    }

    #pages.about .two .text {
        padding: 100px 0 0 4%;
    }

    #pages.about #history .pix{
        width:45%;
    }

    .padding {
        padding: 70px 0px;
    }

    #topwrapper li.login{
        position:relative;
        right:0;
    }

    #pages.volunteer .main, #pages.contact .main {
        padding: 0 0 50px 0;
    }

    #pages.volunteer .main, #pages.contact .main{
        flex-direction:column;
    }

    #pages.volunteer .banner, #pages.contact .banner {
        width: 100%;
        padding: 50px 0;
    }

    #pages.contact .form{
        padding:40px 10%;
        width:80%;
        margin:40px 0 0 0;
    }

    #pages.contact.account .form{
        padding:40px 2%;
        width:96%;
    }

    #pages.donate .options .box {
        width: 38%;
        height:330px;
        background-position: center;
    }

    #pages.donate .title {
        font-size: 40px;
    }

    #pages.donate .overlay{
        width:80%;
    }

    #pages.donate.sponsor #part1 .options, #pages.donate.sponsor #part1 .ticketbox.general{
        width:45%;
        margin:20px;
    }

    #pages.donate.sponsor #part1 .ticketbox.general {
        width: 41.8%;
    }

    #pages.donate.sponsor .selectdate label{
        display:inline-block;
        margin:10px 0 0 0;
    }

}

@media (max-width: 1000px) {
    #home .join .box{
        height:650px;
    }

    #home .member {
        padding: 100px 0px 80px 0px;
        margin:60px 0 0 0;
    }

    #footerwrapper ul{
        display:none;
    }

    #footerwrapper .logo{
        margin:0 auto;
    }

    #home .head {
        min-height: 500px;
        height:100%;
    }

    #home .head .overlay {
        padding: 20% 0 0 0;
    }

    #pages .banner{
        margin:0;
    }

    #pages.join .banner{
        margin:0 0 40px 0;
    }

    #pages.about .one .text {
        padding: 0 0 0 3%;
        width:40%;
    }

    #pages {
        font-size: 16px;
    }

    #pages.about .two .pix {
        width: 302px;
    }

    #pages.about #history h2 {
        font-size: 35px;

        margin: 0 0 20px 0;
    }




}

@media (max-width: 960px) {
    #topwrapper img {
        max-width: 250px;
    }

    #home .head .overlay {
        padding: 15% 0 0 0;
    }

    #home .head {
        min-height: 450px;
    }

    #home .join .pic {

        width: 400px;
    }

    #home .join .par {
        width: 48%;
    }

    #home .join .main{
        width:95%;
    }

    #home .join .box {
        height: 550px;
    }

    #home .member .text{
        width:95%;
    }

    #home .member{
        margin:0;
    }

    #pages.about .one, #pages.about .two{
        flex-direction:column;
    }

    #pages.about .two .pix{
        display:none;
    }

    #pages.about .two{
        margin:40px 0 0 0;
    }

    #pages.about .two .text {
        padding: 0px 0 0 0%;
        width:100%;
    }

    #pages.about .one .pix{
        margin:0 0 40px 0;
    }

    #pages.about .one .pix, #pages.about .one .text{
        width:100%;
        padding:0;
    }

    #pages.about .cols {
        column-count: 2;
    }

    #pages.donate .options .box{
        width:35%;
        height:290px;
    }

    #pages.donate.sponsor #part1 .options, #pages.donate.sponsor #part1 .ticketbox.general{
        width:42%;
    }

    #pages.donate.sponsor #part1 .ticketbox.general{
        width:38%;
    }

    #pages.account .left{
        margin:0 0 50px 0;
    }

    #pages.account .left, #pages.account .list{
        width:100%;
        border:none;
        padding:0;
    }

    #pages.contact.account .form{
        flex-direction:column;
    }
}

@media (max-width: 850px) {
    h3{
        margin:20px 0 30px 0;
    }

    #home .head {
        min-height: 350px;
    }

    #home .join .par{
        float:none;
        width:100%;
    }

    #home .join .pic{
        position:relative;
        width:100%;
        margin:0 0 40px 0;
    }

    #home .member .text{
        margin:30px auto;
    }

    .padding{
        padding:50px 0;
    }

    #home .bot .flex{
        flex-direction:column;
    }

    #home .bot .col{
        width:95%;
        display:flex;
        margin:0 auto 20px auto;
    }

    #home .bot .box{
        color:#000;
        border:none;
    }

    #home .bot .top br{
        display:none;
    }

    #home .bot .top div{
        position:relative;
        z-index:8;
    }

    #home .bot{
        padding:0 0 150px 0;
    }

    #home .bot .top:after{
        content:'';
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:rgba(0,0,0,0.3);
    }

    #home .bot .top{
        width:50%;
        position:relative;
        background-position:center;
        padding:100px 0 30px 30px;
    }

    #pages.about #history .flex{
        flex-direction:column;
        margin:40px 0 0 0;
    }

    #pages.about #history .left, #pages.about #history .pix{
        width:100%;
    }

    #pages.about #history .left{
        margin:0 0 30px 0;
    }

    #pages.about #how .bottom {
        margin: 20px 0 0 0%;
    }

    #pages.apply .flex {
        width: 100%;
    }

    #pages.apply .left{
        width:48%;

    }

    #pages.donate .options .box{
        width:100%;
        margin:0 0 40px 0;
        padding:0;
        background-size:cover;
    }

    #pages.donate .options{
        flex-direction:column;
    }

    #pages.donate .options .box.show {
        background:none;
        background-image: url(images/sponsor-once.jpg);
        background-size:cover;

    }

    #pages.donate .options{
        margin:40px 0 0 0;
    }
}

@media (max-width: 750px) {
    #home .bot {
         padding: 0 0 100px 0;
    }

    #pages.donate #part1{
        float:none;
        width:100%;
        text-align:left;
        padding:0 0 50px 0;
    }

    #pages.join.donate #part1{
        padding:0;
    }

    #pages.donate #part2, #pages.donate #part3, #pages.donate #part4{
        float:none;
        width:100%;
        clear:both;
    }

    #pages.donate .ticketbox{
        float:none;
        margin:40px auto 0px auto;
        text-align:center;
        display:block;
    }

    #pages.donate .large{
        text-align:center;
    }

    #pages .banner{
        padding:80px 0;
    }

    #pages.apply .flex{
        flex-direction:column;
    }

    #pages.apply .left{
        width:100%;
        text-align:left;
        margin:0 0 40px 0;
    }

    #pages.apply .large {

        margin: 20px 0;
        width: 100%;
    }

    #pages.apply .form{
        padding:40px 5%;
        width:90%;
    }

    #pages.donate.sponsor #part2 {
        width: 80%;
    }

    #pages.donate.sponsor .ticketbox.general .ticket {
        font-size: 14px;
    }
}

@media (max-width: 650px) {
    h3{
        font-size:23px;
    }

    #home .head .overlay {
        padding: 18% 0 0 0;
    }

    #home .head {
        min-height: 300px;
    }

    #home .member{
        padding:50px 0;
    }

    #home .large, #pages.about #how .box .large{
        font-size:18px;
    }

    #pages.about .cols {
        column-count: 1;
    }

    #pages.donate.sponsor #part1 .options, #pages.donate.sponsor #part1 .ticketbox.general{
        margin:12px;
    }

    #pages.donate.sponsor #part1 .ticketbox.general {
        width: 36%;
        padding:24px 15px;
    }

    #pages.donate.sponsor .ticketprice {
        font-size: 30px;
    }

    #pages.donate.sponsor .ticket {
        font-size: 22px;
    }

    #pages.donate.sponsor #part1 .ticketbox.general .ticketprice {
        margin: 4px auto 0 auto;
    }

    #pages.donate.sponsor .selectdate{
        padding:20px 0;
        font-size:15px;
        line-height:0.3;
    }

}

@media (max-width: 550px) {
    #home .how .bg{
        width:100%;

    }

    #home .how .bg img{
        width:100%;
    }


    #home .how .flex .number, #pages.about #how .flex .number{
        font-size:55px;
    }

    #home .how .flex .box .icon img, #pages.about #how .flex .box .icon img {
        width: 45px;
    }

    #home .bot .col{
        flex-direction:column;
        margin:0 auto 40px auto;
    }

    #home .join .main {
        width: 92%;
    }

    #home .bot {
        padding: 0 0 40px 0;
        background-size:400%;
    }

    h2  {
        font-size: 35px;
    }

    #home .bot .box {
        color: #fff;
        padding:30px;
        border:1px solid #fff;
    }


    #home .bot .top{
        padding:100px 0 30px 5%;
        width:95%;
    }


    #topwrapper img {
        max-width: 150px;
    }

    #home #topwrapper{
        padding:25px 0 0 0;
    }

    h3 {
        font-size: 16px;
    }

    #home .join .box {
        top: 0;
    }

    .button{
        font-size:15px;
    }

    #home .head {
        min-height: 600px;
    }

    h1{
        font-size:24px;
    }

    #home .join h2 {
        margin: 20px 0 40px 0;
    }

    #home .join .box {
        top: 0;
    }

    #home .bot .flex{
        margin:0;
    }

    #home .head h3 {
        margin: 20px 0 70px 0;
    }

    #home .how .small, #pages.about #how .box .small{
        width:100%;
        margin:20px 0 0 0;
    }

    #home .large, #pages.about #how .flex .large{
        margin:20px 0 0 0;
    }

    #home .head .overlay {
        padding: 85% 0 0 0;
    }

    #home .bot h2{
        font-size:25px;
        text-align:center;
    }

    #home .join {
        padding: 20px 0;
        background: #FAF3E8;
    }

    #home .how .flex .box, #pages.about #how .flex .box {
        flex-direction:column;
    }

    #home .bot .flex.two{
        margin:0 0 20px 0;
        background-image: url(images/home-stats.jpg);
        position:relative;
    }

    #topwrapper{
        margin:0 0 -200px 0;
        padding: 25px 0 250px 0;
    }

    #topwrapper {
        margin: 0 0 -70px 0;
        padding: 25px 0 100px 0;
    }

    #pages .banner{
        padding:80px 0;
    }

    h2 {
        font-size:25px;
    }

    #home .how .flex .top, #pages.about #how .flex .top{
        display:flex;
    }


    #home .how .flex .box .icon, #pages.about #how .flex .box .icon{
        margin:0 0 0 7px;
    }

    #pages.donate #step3:checked ~ #part2{
        display:none;
    }

    .video-bg {

        top: 0;
        left: -130%;
        width: 290%;
    }

    #pages .banner {
        padding: 40px 0;
    }

    #pages.about #history h2 {
        font-size: 30px;
        line-height: 1;

    }

    #pages.about #history .center{
        text-align:left;
    }

    #pages.about li{
        flex-direction:column;
    }

    .padding {
        padding: 30px 0;
    }

    #pages.about .one {
        margin: 30px 0 0 0;
    }

    h4{
        font-size:30px;
    }

    #pages.about .title br{
        display:none;
    }

    #pages.about .title{
        text-align:left;
        margin:0;
    }

    #pages.about .one .pix {
        margin: 0 0 30px 0;
    }

    #pages.apply .large{
        font-size:30px;
    }

    #pages.volunteer .text{
        margin:30px 0 0 0;
    }

    #pages.volunteer .banner, #pages.contact .banner{
        padding:30px 5%;
        width:90%;
    }

    #pages.volunteer .main, #pages.contact .main {
        padding: 0 0 20px 0;
    }

    #pages.donate .options{
        margin:40px 0;
    }

    #pages.donate.sponsor .selectdate{
        line-height:1;
    }

    #pages.donate.sponsor .selectdate label{
        display:block;
        width:150px;
        margin:10px auto;
    }

    #pages.donate.sponsor #part2 {
        width: 100%;
    }

    #pages.donate .overlay{
        left:30px;
        bottom:30px;
    }

    #pages.account .left h2 {
        font-size: 35px;
    }

    #pages.donate.sponsor #part1 .options, #pages.donate.sponsor #part1 .ticketbox.general{
        margin:0 auto;
        padding:15px 5%;
        width:90%;
        float:none;
    }

    #pages.donate.sponsor #part1 .ticketbox.general{
        width:80%;
    }

    #pages.account .num {

        margin: 20px 0 0 0;

        font-size: 35px;
    }

    #pages.account .stats {

        margin: 50px 0 0 0;
        padding: 0px 0 0 0;
    }


}