/*
Author: Shiraj Rafeek (AKA Sheej)
Purpose: Main Style Sheet to govern the responsive design
*/

/*Import CSS Files for Responsive Design*/
@import url('tranquil_kyc_tab.css');
@import url('tranquil_kyc_topnav.css');
@import url('tranquil_kyc_footer.css');

/* TOPNAV - START Responsive layout - when the screen is less than 800px wide*/
    @media screen and (max-width: 400px) {
        /* START responsive to show icon in Top Navigation */ 
        .topnav a:not(:first-child)  {display: none;}
        .topnav a.icon, .topnav a.profile, .topnav a.login {
            float: right;
            display: block;
        }
        .topnav.responsive {position: relative;}

        .topnav.responsive .icon, .topnav.responsive .profile, .topnav.responsive .login {
            position: absolute;
            right: 0;
            top: 0;
        }
        .topnav.responsive a{
            float: right;
            display: block;
            text-align: right;
            width: 100%;
            margin: 0;
            padding: 1px;
        }
    }
/* TOPNAV - END responsive to show icon in Top Navigation */

/* SERVICE BUTTONS - START Responsive layout - when the screen is less than 800px wide*/
    @media screen and (max-width: 800px) {
        /* START responsive to show icon in Top Navigation 
        .btn img{
            width:100%;
            height:100%;        
        }*/ 
    }

    @media screen and (min-width: 800px) {
        /* START responsive to show icon in Top Navigation 
        .btn img{
            width:100%;
            height:100%;        
        }*/ 
    }
/* SERVICE NAV - END responsive to show icon in Top Navigation */


/* START responsive Tab */ 
    @media screen and (max-width: 2000px) {
        .tabcolumn {
        width: 33%;
        display: block;
        }
        /* Style the tab content */
        .tabvcontent {
            margin-bottom: 18%;
        }
        /* Style the tab content 

        .topnav .logo {
            width: 100%;
            height: 100%;
            margin-top: 2px;
        }*/
    }
    @media screen and (width: 1500px) {
        .tabcolumn {
        width: 33%;
        display: block;
        }
        /* Style the tab content */
        .tabvcontent {
            margin-bottom: 22%;
        }
        /* Style the tab content 

        .topnav .logo {
            width: 100px;
            height: 100px;
            margin-top: 2px;
        }*/
    }
    @media screen and (width: 1000px) {
        .tabcolumn {
            width: 50%;
            display: block;
        }
        .tabvcontent {
            margin-bottom: 18%;
        }
        /* Style the tab content 

        .topnav .logo {
            width: 100px;
            height: 100px;
            margin-top: 2px;
        }*/
    }
    @media screen and (width: 800px) {
        .tabcolumn {
            width: 100%;
            display: block;
        }
        .tabvcontent {
            margin-bottom: 20%;
        }
        /* Style the tab content 

        .topnav .logo {
            width: 80px;
            height: 80px;
            margin-top: 2px;
        }*/
    }
    @media screen and (width: 600px) {
        .tabcolumn {
            width: 100%;
            display: block;
        }
        .tabvcontent {
            margin-bottom: 20%;
        }
        /* Style the tab content 

        .topnav .logo {
            width: 80px;
            height: 80px;
            margin-top: 5px;
        }*/
    }
    @media screen and (width: 400px) {
        .tabcolumn  {
        width: 100%;
        display: block;
        }
        .tabvcontent {
            margin-bottom: 10%;
        }
                /* Style the tab content 

        .topnav .logo {
            width: 80px;
            height: 80px;
            margin-top: 5px;
        }*/
    }
    @media screen and (width: 300px) {
        .tabcolumn  {
        width: 100%;
        display: block;
        }
        .tabvcontent {
            margin-bottom: 2%;
        }
                /* Style the tab content

        .topnav .logo {
            width: 80px;
            height: 80px;
            margin-top: 5px;
        } */
    }
/* End responsive Column */