/*-------------------------------------------------------*/
/* Big tablets to 1200px (widths smaller than 1140 rows) */
/*-------------------------------------------------------*/

@media only screen and (max-width: 1200px) {
    .header-text-box {
        width: 100%;
        padding: 0 2%;
    }
    
    .brane-pics {
        width: 60%;
    }

    
    .centered-text {
        text-align: center;
        
    }
    
    h1 {
        display: block;
    }
    
    h4 {
        display: block;
    }
    
    
    .main-video {
        width: 100%;
    }
    
    .video-slider {
        width: 96%;
    }
    
    .header-text-btn {
        text-align: center;
        
    }
    
    .row { padding: 0 2%}
    
    .id-pic {
        width: 14%;
    }
    
}


/*-------------------------------------------------------------------------------*/
/* iPad in portrait mode is 1024px, so this targets Small tablets to Big tablets */
/*-------------------------------------------------------------------------------*/

@media only screen and (max-width: 1023px) {
    
    body { font-size: 18px; }  /* that's why it comes handy to define ine the main file the font-sizes in percentages */
    section { padding: 60px 0; }
    
    .long-copy {
    width: 80%;
    margin-left: 10%; 
    }
    
    
    #logo-main {
    height: 130px;
    margin-top: 20px;    
    margin-bottom: 60px;
    vertical-align: middle;
    background-size: 17%;
}
    
    .header-text-btn {
    float: none;
    margin-left: 0px;
    text-align: center;
    margin-bottom: 120px;
}
    
    .centered-text {
        margin-top: 250px;
        text-align: center;
        display: block;
    }
    
    .brane-pics {
        width: 70%;
    }

    .main-video {
        width: 100%;
        margin-top: 30px;
    }
    
    .video-slider {
        width: 96%;
        padding-bottom: 10px;
    }
    
    .playlist-genres {
        font-size: 11px;
        border-right: none;
    }
    
    .vid-description {
        width: auto;
    }
    
    .contact-form {width: 80%;}
    
    .social-links {
        float: none;
    }
    
    .id-pic {
        width: 17%;
    }
    
}



/*------------------------------------------------------------------------------*/
/* Small phones to small tablets (481-767px), as the width of the ipad is 768px */
/*------------------------------------------------------------------------------*/

@media only screen and (max-width: 767px) {
    body {font-size: 16px;}
    section {padding: 30px 0;}
    
    .row,
    .header-text-box {padding: 0 4%;}
    .header-text-btn {padding-left: 25%;}
    
    .main-nav li a:hover{
    color: rgba(156, 235, 142, 0.72);
}
    
    .main-nav-logo {
        margin-top: 40px;
        
    }
    
    .header-text-btn {
    float: none;
    margin-left: 0px;
    text-align: center;
}
    
    #logo-main {
    background-size: 100%;
        display: block;
        height: 100px;
        width: 100px;
    }
    
    .centered-text {
        margin-left: 0px;
        padding-left: 0px;
        padding-top: 0px;
        font-size: 110%;
        text-align: center;
        margin-top: 210px;
    }
    
    .col {width: 100% ; margin: 0 0 4% 0;} /*the columns are no longer side-by-side but stacked, and we only keep the margin on the bottom */
    
            .main-nav { display: none; }
            .mobile-nav-icon {
                display: inline-block;
                position: relative;
                z-index: 9999;
            }

            .main-nav {
                float: none;
                position: absolute;
                z-index: 8888;
                width: 100%;
                height: 100vh;
                margin: 0;
                margin-left: -2%;
                background-color: rgba(4, 5, 10, 0.92);
                text-align: center;
                padding-top: 20vh;
            }

            .main-nav li {
                display: block;
                margin-left: 0;
                font-size: 110%;
            }

            .main-nav li a:link,
            .main-nav li a:visited {
                display: block;
                border: 0;
                padding: 10px 0;
                font-size: 100%;
            }


            .sticky .main-nav { margin-top: 0;}


            .sticky .main-nav li a:link,
            .sticky .main-nav li a:visited {
                padding: 10px 0;
                color: rgba(231, 245, 255, 0.57);
            }

    

            .sticky .mobile-nav-icon { margin-top: 10px; }
            .sticky .mobile-nav-icon i { color: #555; }
            .sticky .mobile-nav-icon i.ion-close-round { color: #fff; }
    
    
    h1 {font-size: 180%;
    width: 115%;
        display: block;
        
    }
    h2 {font-size: 150%;}
    h4 {
        font-size: 240%;
        width: 115%;
        margin-left: 0%;
        display: block;
    }
    
    .long-copy {
        width: 100%;
        margin-left: 0%;
    }
    
    .brane-pics {
        width: 80%;
    }
    
     .main-video {
        width: 100%;
        margin-top: 30px;
    }
    
    .video-slider {
        width: 92%;
        padding-bottom: 10px;
    }
    
    .playlist-genres {
        font-size: 11px;
        border-right: none;
    }
    
    .vid-description {
        width: auto;
    }
    
    .title-vid {
        width: auto;
    }
    
    .app-screen {width: 40%;}
    .steps-box:first-child {text-align: center;}
    
    .social-links {
    padding-left: 20px;
    }
    
    .id-pic {
        width: 24%;
    }
    
    
}


/*------------------------------*/
/* Small phones from 0 to 480px */
/*------------------------------*/

@media only screen and (max-width: 480px) {
    section {padding: 25px 0;}
    .contact-form {width: 100%;}
    
    .social-links {
    padding: 0px 10px;
        margin-top: 40px;
    }
    
    .main-nav li a:hover{
    color: rgba(156, 235, 142, 0.72);
}

    .section-portfolio {
        height: 100vh;
    }
    
    .centered-text {
        width: 100%;
        padding-top: 80px;
        padding-bottom: 0px;
        font-size: 80%;
    }
    
    .brane-pics {
        width: 100%;
    }
    
    h1 {
        width: 120%;
        display: block;
        font-size: 30px;
        margin-bottom: 24px;
    }
    
    h4 {
        width: 120%;
        padding-left: 10px;
        margin-left: 0px;
        display: block;
        font-size: 31px;
    }
    
    .super {
    font-size: 35%;
    font-weight: 200;
 }

    .main-video {
        width: 100%;
        height: 250px;
        margin-top: 30px;
    }
    
    .video-slider {
        width: 92%;
        padding-bottom: 10px;
    }
    
    .playlist-genres {
        font-size: 11px;
        border-right: none;
    }
    
    .vid-description {
        width: auto;
        float: none;
    }
    
    .title-vid {
        width: auto;
    }
    
    #logo-main {
        height: 160px;
        width: 160px;
        background-size: 80%;
        margin-bottom: 80px;
        display: block;
    }
    
    .id-pic {
        width: 30%;
    }

    footer {
        padding-top: 10px;
    }
    

    
}