﻿@media screen and (max-width:768px) {
    body {  }
    .InnerWrapper { font-size: 11px; line-height: 16px;   }

    h1 { font-size: 20px; color: #050505; margin-bottom: 10px;  padding-bottom: 5px; border-bottom: 1px solid #cbcbcb; }
    h2 { font-size: 16px; color: #050505; margin-bottom: 10px;  padding-bottom: 5px; border-bottom: 1px solid #cbcbcb; }
    h3 { font-size: 12px; color: #050505; margin-bottom: 10px;  padding-bottom: 5px; border-bottom: 1px solid #cbcbcb; }
    p {  margin-bottom: 10px; }

    .btn { font-size:11px; height:28px; background-size:1px 28px; }
    .txt { height:28px; }

    .HeaderOuterWrapper { float:left; width:100%; background:#000; border-top:2px solid #ECC148  }
    .HeaderInnerWrapper { margin:0px auto; width:480px; }
    .HeaderContent .Logo {display:none; }
    .HeaderContent .LogoMobile {float:left; display:block; width:60px; margin-top:10px; }
    .HeaderContent .LogoASKO { display:block; float:right; margin-right:10px; margin-top:10px }
    .HeaderContent .LogoMobileASKO { }
    .HeaderContent .UserInfoWrapper {font-size:10px; padding:5px; padding-top:0px; line-height:16px; width:100%; box-sizing:border-box;   }
    .HeaderContent .UserInfoWrapper p { float:left; clear:none; width:auto; margin-right:5px; line-height:34px; margin-bottom:0px; padding-bottom:0px; }    
    .HeaderContent .UserInfoWrapper p span {display:inline;  }
    .HeaderContent .UserInfoWrapper .btn {float:right; clear:none !important; margin-top:4px !important; }
    .HeaderContent .MobileNav {
        display:block;
    }
    .HeaderContent .NavWrapper { float:left; font-size:10px; position:relative; }
    .HeaderContent .NavWrapper ul { display:none;  position:absolute; width:100%; background:#fff; top:30px; border:1px solid #444; z-index:999; }
    .HeaderContent .NavWrapper ul li { float:left; clear:left; margin-bottom:0px; margin-top:5px; padding-left:20px; padding-right:20px; width:100%; box-sizing:border-box;  }
    .HeaderContent .NavWrapper ul li:last-child { margin-bottom:5px; }
    .HeaderContent .NavWrapper ul li a { color:#444; width:100%; display:block; box-sizing:border-box; }

    .MainOuterWrapper { float:left; width:100%; }
    .MainInnerWrapper { margin:0px auto; width:480px; }

    .FooterOuterWrapper { float:left; width:100%; }
    .FooterInnerWrapper {margin:0px auto; width:480px; font-size:11px; }
    .FooterContent {text-align:center; padding:10px;}
    .FooterContent span { display:block; float:none; margin-bottom: 5px;  }
    .FooterContent span:after { content:''}

    .txtSearch { width:430px; } 
    .btnSearch { float:right; } 

    /* ANNUAL BONUS */
    .btnCalculate {  }
    .ddlDeliveryRate, .txtOrderSum { width:350px; }
    
    
    /* PRICE CALCULATOR */
    .ProductSearchWrapper .txtSearch { width:390px; } 
    .ProductSearchWrapper .btnSearch { float:right; }
    .ProductSearchWrapper { float:left; }
    .Products { width:100%; }

    .SelectedProductWrapper {   }

    
    .CreateEmailWrapper label {  width:90px !important; }
    .CreateEmailWrapper .txt { width:390px; }
    .CreateEmailWrapper .btn {}

    /* FORM */
    .Form label {  width:130px; }
    .Form span {   }
    .Form input[type=text], .Form input[type=number], .Form input[type=email] {   } 
    .Form select {  }

    /* GRIDVIEW */
    .GridView { font-size:10px;  }
    .GridView .GridViewHeader { font-size:10px; }
    .GridView .GridViewRow {font-size:10px; }
    .GridView .GridViewFooter {font-size:10px;}
    .GridView .GridViewPager .dxp-lead {  font-size:10px; }

    .GridViewButton {  }
    .GridViewButton span { font-size:11px; height:28px; background-size:1px 28px; height:26px; box-sizing:border-box; line-height:26px;   }
    .GridViewButton span:hover {   }
    .GridViewHeaderActionButtons { width:140px !important; }

    .GridViewEdit label { font-size:12px; }    
    .GridViewEdit input[type=text] { height:26px; font-size:12px;}
    
    .Members .GridViewHeader:nth-child(1) {width:60px;}
    .Members .GridViewHeader:nth-child(2) {width:280px;}
    .Members .GridViewHeader:nth-child(3) { width:80px;}
    .Members .GridViewHeader:nth-child(4) {width:60px;}
    
    .Bonus .GridViewHeader { font-size:8px;   font-weight:700; }
    .Bonus .GridViewRow {font-size:8px;}
    .Bonus .GridViewFooter {font-size:8px; font-weight:700;}

    .Bonus .GridViewHeader:nth-child(1) {width:180px;}
    .Bonus .GridViewHeader:nth-child(2) {width:60px;}
    .Bonus .GridViewHeader:nth-child(3) {width:60px;}
    .Bonus .GridViewHeader:nth-child(4) {width:60px;}
    .Bonus .GridViewHeader:nth-child(5) {width:60px;}
    .Bonus .GridViewHeader:nth-child(6) {width:60px;}
    .Bonus .GridViewHeader td { white-space:normal; }

    .Users .GridViewHeader:nth-child(4) {}

    .Products { width:100% !important;}

    /* TABS */
    .TabWrapper { margin-top:37px;  }

    /* TABLE */
    .Table { width:480px; margin-top:10px; }
    .Table tr.Result2  td { font-size:13px;}
    .Table tr td { padding:6px; }

    .LoginOuterWrapper { }
    .LoginInnerWrapper {  margin:100px auto;  width:400px; color:#050505;   font-family: 'Lato'; font-size: 12px; line-height: 20px;   }

    .LoginContent { padding:30px; font-size:12px; width:340px;  }
    .LoginContent .Logo {  margin-bottom:30px; width:340px;  }
    .LoginContent label { width:90px;  }
    .LoginContent input[type=text],.LoginContent input[type=password],.LoginContent input[type=email] { width:250px; }
    .LoginContent input[type=button],.LoginContent input[type=submit] {  }

    .LoginContent .ForgotPasswordButton { font-size:12px; }
    .LoginContent .ForgotPasswordButton:hover {  }

    .PopupOuterWrapper {  }
    .PopupInnerWrapper { margin:160px auto; width:263px;  color:#050505; font-family: 'Lato'; font-size: 14px; line-height: 20px;  }

    .PopupContent { font-size:12px; }
    .PopupContent .btnForgotPassword { margin-right:10px; }

    .SetPasswordOuterWrapper {  }
    .SetPasswordInnerWrapper {  margin:100px auto;  width:400px;  font-family: 'Lato'; font-size: 12px; line-height: 20px;  }

    .SetPasswordContent { padding:30px; width:340px; font-size:12px; }
    .SetPasswordContent .Logo { margin-bottom:30px; width:340px; }
    .SetPasswordContent label { width:90px;   }
    .SetPasswordContent input[type=text],.SetPasswordContent input[type=password],.SetPasswordContent input[type=email] {  width:250px; }
    .SetPasswordContent input[type=button],.SetPasswordContent input[type=submit] {  }
    
    .IPBLink { float:right; color:#aaa; margin-top:5px; font-size:12px; }
    .IPBLink:hover { color:#ccc;  }

    /* CAMPAIGNS */
    .ArticlesOuterWrapper article { width:50%; box-sizing:border-box; margin-bottom:10px; padding:10px; float:left;}
    .ArticlesOuterWrapper article:nth-child(3n+1) { clear:none;}
    .ArticlesOuterWrapper article:nth-child(2n+1) { clear:left;}

    /* TOOLTIP */
    .HoverTooltip { max-width:418px;}
}
