/* for all devices (until the @media block) */


body{
    padding:0;
    margin: 0;
    font-family: Arial;
    font-size: 14px;
    color: #525252;
    font-weight: normal;
    line-height: 18px;
    letter-spacing: 0.5pt;
    margin-bottom: 30px;
}


    .flex-container {
        margin: 0 auto;
        position: relative;
        background-color: #fff;
        max-width: 1300px;
        width: 100%;
        display: -webkit-flex; /* Safari */
        display: flex; /* Standard syntax */
    }

    .flex-container .column {
        -webkit-flex: 1; /* Safari */
        -ms-flex: 1; /* IE 10 */
        flex: 1; /* Standard syntax */

    }

    .lft_content {
        max-width: 20%;
    }

    .content {
        max-width: 45%;
        position: relative;
    }

    .navbar {
        max-width: 30%;
        padding: 50px 40px 40px 40px;
        box-sizing: border-box
    }

    .r_navbar {
        max-width: 5%;
        display: block;
    }

    .clr_grey {
        background-color: #e7e7e7;
        background-image: url("images/wave6.png");
        background-repeat: repeat-y;
    }

    .clr_white {
        background-color: #ffffff;
    }

    .clr_blue {
        background-color: #01aef0;
    }

    .main_pdds {
        padding: 30px
    }
.logo_bg_mob{ display: none;}
    .footer {
        position: relative;
        background-color: #01aef0;
        max-width: 1300px;
        width: 100%;
        min-height: 80px;
        margin: 0 auto;
        padding: 20px 20px;
        box-sizing: border-box;
        overflow: hidden;
    }


    .footer .clmn_left {
        float: left;
        width: 50%;
        overflow: hidden;
        box-sizing: border-box;
    }

    .footer .clmn_right {
        float: left;
        width: 50%;
        overflow: hidden;
        box-sizing: border-box;
    }



@media (max-width: 900px) {
    .lft_content { max-width: 20%}
    .content { max-width: 45%;position: relative}
    .navbar { max-width: 35%; padding: 3%;}
    .r_navbar{ max-width: 0%; display: none;}
    .column .img { max-width: none; width: 100%}
    h1 {font-size: 5vw!important; line-height: 5vw!important;letter-spacing: 4.5pt!important; margin-top: -10px; }
    h1 .logo_strong{ font-size:6vw!important; line-height: 6vw!important;letter-spacing: 4.5pt!important; }
    h1 .logo_strong{ font-size:6vw!important; line-height: 6vw!important;letter-spacing: 4.5pt!important; }
    h2, p , ul li, .footer ul li, .footer ul li a, .footer .dsgned, .ftr li {font-size: 12px!important;line-height: 16px!important;letter-spacing: 0.3pt!important; }
    .logo_bg{ display: none; }
    .footer .clmn_left { width: 30%; }
    .footer .clmn_right { width: 70%;}
}

@media (max-width: 620px) {
    .flex-container { width: 100%;  display: block; padding: 0%; box-sizing: border-box;    }
    .flex-container .column { width: 100%;display: block;box-sizing: border-box;padding: 5%;}
    .lft_content, .r_navbar { display: none!important; }
    .logo_bg_mob img{margin-bottom: 0px!important; }
    .logo_bg_mob{ max-width: 420px; margin: 0 auto; display: block; overflow: hidden;}
    h1 {font-size: 4vw!important; line-height: 4vw!important;letter-spacing: 3.5pt!important; margin-top: 10px!important; }
    h1 strong, h1 .logo_strong strong{ display:inline!important; }
    h1 .logo_strong{ font-size:5vw!important; line-height: 5vw!important;letter-spacing: 3.5pt!important;display:inline!important; }
    h1 .logo_strong { display:block!important;margin-bottom: 20px!important;margin-top: 5px!important; }
    h2, p , ul li, .footer ul li, .footer ul li a, .footer .dsgned, .ftr li {font-size: 12px!important;line-height: 16px!important;letter-spacing: 0.3pt!important; }
    .content { max-width: 100%!important;position: relative}
    .navbar { max-width: 100%!important; position: relative;}

    .footer .clmn_left,.footer .clmn_right  { width: 100%; display: block;    padding-left: 0; margin-left: 0; }
    .footer .dsgned, .footer ul{ padding-left: 0!important;}
    .footer .dsgned { padding: 0px!important; float: right!important;text-align: left; width: 100%; }
    .footer .dsgned,.footer .dsgned a {font-size: 11px!important;}
    .footer .clmn_right{float: left!important;}
    .footer .clmn_right ul li a{padding-left:10px!important;}
}

