/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
/*@media screen and (max-width: 640px) {*/


@media screen and (max-width: 800px) {
    
    .menu.desktop {
        display:none;
    }
    
    .menu.mobile {
        display:block;
    }
    
    #header1.startBanner {
        padding-top:5px;
    }
    
    .modals {
        display:block;
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    .modal {
        /*left:0px;*/
        top:0%;
    }
    
    .darkener {
        overflow:auto;
    }
    
    .debounce {
        position:relative;
        left:0%;
        width:100%;
        height: 50px;
        padding: 0;
        margin-top: 8px;
        margin-bottom: 4px;
        opacity:0.7;
        
        
        /*box-sizing: border-box;*/
        /*-webkit-transition: background-color .25s;*/
        /*background-image: url(../images/streamez_low_profile.png);*/
        /*background-position: 36%;*/
        /*background-size: contain;*/
        /*background-repeat: no-repeat;*/
        /*transition: background-color .25s;*/
        transform-origin: 50% 110%;
    }
    
    
    .colrow {
    }
    

    .wrappa .flex.colrow {
        display:flex;
        flex-direction: column;
        align-items:center;
        justify-content:flex-start;
    }
    
    .slabel {
        line-height:18px;
    }
    
    .frow {
        width:90%;
        height:42px;
    }
    
    .frow.wide {
        width:100%;
    }
    
    .slanty {
        /*padding:2% 5%;*/
    }
    
    .slanty .pre {
        font-size:20px;
        padding-right:0;
    }
    
    .slanty input {
        font-size:20px;
    }
    
    .slanty .start {
        font-size:18px;
    }
    
    .colm {
        height:auto;
    }
    
    .colm .perp .just, 
    .colm.left .perp .im,
    .colm.right .perp .im {
        width:94%;
    }
    
    .colm.left .perp {
        padding-right:2%;
        align-items:center;
    }
    
    .colm.right .perp {
        padding-left:2%;
        align-items:center;
    }
    
    .wrappa {
        flex-direction:column;
        /*height:300%;*/
        /*overflow:auto;*/
        padding:0% 1%;
    }
    
    .colm.left, .colm.middle, .colm.right {
        width:100%;
    }
    
    .colm.middle {
        order:0;
    }
    
    .just .text .head {
        font-size:5vw;
        white-space:nowrap;
        padding:10px 0;
    }
    
    .just .text .buy.button {
        /*font-size:1em;*/
        padding:28px;
    }
    
    .features {
        max-width: 95%;
        width: 95%;
    }
    
    .block {
        padding:2% 5%;
    }
    
    
    
     /* modals */
    .modal {
        width:90%;
        height:100%;
        max-height:none;
        max-width:none;
        padding:50px 5%;
        padding:0 50px;
        width:100%;
        height:100%;
        border:none;
    }
    
    .modal.ezdeck {
        padding:10px 50px;
        padding:50px;
        padding:20px;
        padding:2%;
        padding:10%;
    }
    
    /*.modal .title {*/
    /*    padding:10px 0;*/
    /*}*/
    
    .modal.ezdeck .buy.options {
        /*font-size:0.6em;*/
        width:115%;
    }
    
    .flip-card-back ul {
        font-size:0.9em;
    }
    
    /*.modal .featlink {*/
    /*    padding:5px 0;*/
    /*}*/
    
    /*.modal .buy.container {*/
    /*    padding:3%;*/
    /*    padding-bottom:30px;*/
    /*}*/
    
    /*.modal .buy.container .flex.row {*/
    /*    width:100%;*/
    /*}*/
    
    /*.modal .buy.options .featlink {*/
    /*    padding-bottom:20px;*/
    /*}*/
    
    .modal.static .flex.col {
        width:100%;
        margin-left: 0%;
    }
}


@media screen and (max-width: 720px) {
    
    .darkener {
        display:block;
    }

    .modal .back {
        /*position: fixed;*/
    }
    
    .post.active {
        right:8px;
    }
    
}

@media screen and (max-width: 600px) {
    .frow {
        width: 98% !important;
    }
    
    .modal.buying {
        padding:4%;
    }
    
    .buying .summary {
        font-size:1.5em;
    }
    
    .slanty.small input {
        font-size:15px;
    }
    
    .customer.time {
        /*width: calc(100% + 40px);*/
        /*position: absolute;*/
        letter-spacing: -0.5px;
    }
    
    .abs {
        min-height:520px;
    }
}


@media screen and (max-width: 500px) {
    
    
    .purple {
        max-width:90%;
        /*max-height:90%;*/
    }
    
    .modal .buy.container .price {
        font-size: 1.6em;
    }
    
    .flip-card-back ul {
        font-size:0.7em;
        padding-left: 0;
        padding-left: 14px;
    }
    
    .flip-card ul li:before {
        margin-left:-10px;
    }
}