:root{

    --logocolor:#00ff00;

    --logocolor2:#01d401;

    --background:#8c8c8c;

    --border:#b6b6b6;

    --border2:#e6e6e6;

    --text:#3d3d3d;

    --text2:#6c6c6c;

}

html{float:left;margin:0;padding:0;width:100%;overflow-x: hidden;box-sizing: border-box;}

body{float:left;margin:0;padding:0;width:100%;overflow-x: hidden;box-sizing: border-box;}

h1,h2,h3,h4,h5,h6,a,span,p{color:var(--text);}

*{font-family: "Roboto", sans-serif;box-sizing: border-box;}

a{text-decoration: none;}

.container{float:left;width:1200px;margin:0 calc(50% - 600px);}

header{float:left;width:100%;padding:10px 0 5px;box-shadow: 0 0 10px 5px #ccc;}

.headerTop{float:right;width:100%;font-size:14px;}

.headerTopLogout{float:right;border-left:1px solid var(--logocolor2);border-left:2px solid var(--border);padding:0 0 0 10px;height:28px;margin-left:10px;}

.headerTopLogout a{float:left;padding:5px 10px;background-color:var(--logocolor2);color:white;text-transform: uppercase;font-weight: 700;border-radius: 5px;}

.headerTopUser{float:right;width:auto;border-left:2px solid var(--border);padding:0 0 0 10px;height:28px;display:flex;align-items: center;margin-left:10px;}

.headerTopUser a{float:left;}

.headerTopUser a img{float:right;width:18px;height:20px;padding:7px 3px;object-fit: cover;background-color: var(--logocolor2);margin-left:5px;}

.headerTopData{float:right;width:auto;height:28px;display:flex;align-items: center;}

.headerTopData a{float:left;}



.headerMid{float:left;width:100%;margin:0 0 10px;position:relative;}

.hmLogo{float:left;width:150px;height:auto;}

.hmLogo img{float:left;width:100%;height:60px;object-fit: contain;}

.hmMenu{float:right;max-width:calc(100% - 160px);margin:30px 0 -1px 10px;}

.hmMenu a{float:left;text-transform: uppercase;font-size: 18px;font-weight: 500;margin:0 0 0 40px;padding:10px 0 5px 0;border-top:2px solid #fff;transition: 0.6s;}

.hmMenuActive{border-top:2px solid var(--logocolor2)!important;}

.hmMenu a:hover{border-top:2px solid var(--logocolor2);}

.hmMenuBig{float:left;position:absolute;width:100%;background-color:white;left:0;top:67px;box-shadow: 0 0 3px 2px #f2f2f2;border-radius: 5px;justify-content: center;display:none;z-index:9999;}

.hmMenuLits{float:right;width:150px;position:absolute;background-color:white;right:-50px;top:65px;box-shadow: 0 0 3px 2px #f2f2f2;border-radius: 5px;display:none;z-index:9999;}

.hmMenuLit{float:left;width:100%;padding:5px 10px;text-align: center;}

.hmMenuLit p{float:left;Width:100%;margin:0!important;font-size:15px!important;text-transform: capitalize!important;font-weight: 500!important;}

.hmMenuLit p a{float:left;Width:100%;margin:0!important;font-size:15px!important;text-transform: capitalize!important;font-weight: 500!important;}





.hmMenuSub{float:left;width:auto;margin:10px 20px;border-right: 1px solid var(--border2);min-width: 90px;}

.hmMenuSub:last-child{border-right:transparent;}

.hmMenuSub p{float:left;font-size:16px;font-weight: 500;width:100%;text-align: left;margin:10px 0;text-transform: capitalize;}

.hmmSub{float:left;width:100%;display: block;}

.hmmSub p{float:left;width:100%;text-align:left;font-size:14px;font-weight: 400;margin:3px 0!important;text-transform: capitalize;color:var(--text2);}



.loginBodys{float:left;width:100%;min-height:100vh;margin-bottom:20vh;}

.loginHeader{float:left;width:100%;position: relative;z-index: 999;}

.loginHeader img{float:left;width:200px;padding:30px 0 10px;}

.loginHeader h1{float:right;max-width:calc(100% - 200px);text-transform: uppercase;font-weight: 500;color:white;font-size:24px;letter-spacing: 1.5px;margin:70px 0 0;}

.loginBody{float:left;width:100%;position:relative;min-height: 400px;}

.loginBody img{float:left;width:100%;height:100vh;object-fit: cover;position:fixed;top:0;left:0;}

.loginForm{float:right;width:300px;position:relative;z-index:9999;background-color:#01d401be;padding:20px 20px 50px 20px;}

.loginForm h2{float:left;width:100%;text-align: center;color:white;margin:20px 0;}

.loginForm input{float:left;width:100%;height:40px;line-height: 40px;border:1px solid var(--border2);margin:5px 0;font-size:16px;padding:5px 10px;}

.loginBtn{float:left;width:100%;background-color: var(--text2);color:white;text-transform: uppercase;padding:10px;text-align: center;}

.lfRemember{float:left;width:100%;margin:10px 0;display: flex;justify-content: center;}

.lfRemember input{float:left;Width:20px;height:20px;}

.lfRemember span{float:left;margin:5px 0 5px 10px;color:white;font-size:16px;}

.forgotBtn{float:left;width:100%;text-align: center;text-decoration: underline;color:white;margin:10px 0;}

.passArea{float:left;width:100%;height:50px;position:relative;}
.passArea img{float:right;width:20px;height:20px;position: absolute;right:5px;top:14px;object-fit: contain;left:auto;cursor:pointer;}



.bodyArea{float:left;width:100%;}

.slideArea{float:left;width:100%;height:600px;}

.slideArea img{float:left;width:100%;height:100%;object-fit: cover;}



.productArea{float:left;width:100%;}

.productFilter{float:left;width: 100%;padding:10px 0 5px;margin:0 0 5px 0;border-bottom:2px solid var(--border2);}

.productFilter p{float:left;font-weight: 600;font-size:15px;}

.pfRight{float:right;}

.pfSelect{float:left;position:relative;}

.pfSelect select{float:left;line-height: 35px;height:35px;width:170px;margin:6px 8px 8px 15px;border:1px solid var(--border)}

.pfSelect select option{line-height: 40px;padding:10px 0;}

.paProducts{float:left;width:100%;}

.paProductsHeader{float:left;width:100%;margin:20px 0 0;}

.paProductsHeader h3{float:left;font-size:24px;font-weight: 500;text-transform: uppercase;margin:0 0 5px;}

.paProductsHeader a{float:right;padding:5px 10px;border:1px solid var(--border);border-radius:5px;}

.paProductsHeader a img{float:left;width: 10px;height: 8px;object-fit: contain;transform: rotate(270deg);margin:4px 5px 0 0;}

.paProductBody{float:left;width:100%;border-bottom:2px solid var(--border2);}

.paProductCase{float:left;padding:20px;}

.paProduct{float:left;width:100%;}

.paProduct img{float:left;width:100%;height:200px;object-fit: cover;border-radius:5px;}

.paProduct a{float:left;width:100%;font-weight: 500;margin:10px 0;height:40px;display:flex;align-items: center;line-height: 20px;}

.paProductIcons{float:left;width:100%;}

.paProductIcons img{float:left;width:20px!important;height:20px!important;object-fit: cover;margin:0 5px 0 0;}

.paProductFunctions{float:left;width:100%;margin:0;}

.paProductFunctions p{float:left;font-weight: 500;font-size: 16px;}

.oldprice{font-size:15px!important;color:var(--text2);font-weight: 400!important;margin:16px 0 1px 5px;text-decoration: line-through;}

.infoBtn, .addBtn{float:right!important;width:auto!important;height:auto!important;font-weight: 600!important;font-size:15px;}

.infoBtn{padding:5px 10px!important;border-radius:5px;border:1px solid var(--logocolor2);margin-right:5px!important;}

.addBtn{padding:6px 10px;border-radius:5px;background-color: var(--logocolor2);color:white;}



footer{float:left;width:100%;padding:0;}

.footerHeader{float:left;width:100%;background: linear-gradient(45deg, #848484, #5b5b5b);padding:5% 0;}

.fhItems{float:left;width:100%;padding:0 10%;}

.fhItem{float:left;width:50%;padding:0 5%;display:flex;align-items: center;justify-content:center;flex-direction: column;color:white;text-align: center;}

.fhItem img{float:left;width:100px;height:100px;object-fit: cover;border-radius:50%;}

.fhItem h3{float:left;width:100%;font: size 20px;margin:10px 0;letter-spacing: 1px;font-weight: 400;color:white;}

.fhItem p{float:left;width:100%;margin:5px 0;color:white;}

.fhItem a{float:left;background-color:var(--logocolor2);color:white;padding:10px 15px;border-radius:10px;margin:20px 0 10px 0;color:white;}

.footerBottom{float:left;width:100%;background-color:#00000094;color:white;display:flex;justify-content: center;}

.footerBottom a{float:left;margin:10px;color:white;}



.modalAreas{float:left;width:100%;height:100vh;background-color:rgba(0, 0, 0, 0.30);position:fixed;display:none;align-items: center;justify-content: center;overflow: scroll;z-index:9999;}

.modalAreas::-webkit-scrollbar{display:none;}

.modalBack{float:left;position:absolute;width:100%;height:100vh;z-index:998;}

.modalArea{float:left;width:100%;width:60%;height:80vh;background-color:white;z-index:999;padding:10px 30px;overflow-x:scroll;position:relative;}.modalArea::-webkit-scrollbar{display:none;}

.maClose{float:right;position:absolute;right: 0;background-color:#01d401;padding:7px 10px;top:0;cursor:pointer;}

.maHeader{float:left;width:100%;position:relative;height:400px;}

.maHeader h3{float:left;width:100%;font-size:24px;}

.maHeader img{float:left;width:50%;height:300px;object-fit:contain;margin-right:5%;}

.maHeader p{float:left;width:45%;}

.maHeaderIcons{float:right;width:45%;margin-top:10px;}

.maHeaderIcons img{float:right;width:20px;height:20px;object-fit: contain;margin:0 0 0 5px;}

.maHeaderFunction{float:right;position:absolute;bottom:25px;right:0}

.maHeaderFunction span{font-weight: 500;}

.maHeaderFunction a{background: #01d401;color:white;padding:5px 10px;border-radius:5px;margin-left:5px;}

.maBody{float:left;width:100%;}

.mabTable{float:left;width:48%;margin-right:4%;}

table {font-family: arial, sans-serif;border-collapse: collapse;width: 100%;}

td, th {border: 1px solid #cccccc;text-align: left;padding: 8px;}

tr:nth-child(even) {background-color: #dddddd;}



.mabAlergy{float:left;width:48%;}

.mabAlergy p{float:left;width:100%;margin:5px 0;}

.mabAlergy p span{font-weight: 700!important;}

.mabAlergy p:last-child{margin-top:10px;}

.mabOthers{float:left;width:100%;margin:10px 0;}



.paProductCategory{float:left;width:25%;padding:10px;}

.paProductCategory h2{font-size:20px;margin:0 0 10px;}

.papcMain{float:left;width:100%;font-size:16px!important;font-weight: 500;margin:5px 0;}

.papcMainActive{color:var(--logocolor2);}

.pabcSub{float:left;}

.papcSub a{float:left;width:100%;font-size:14px;color:var(--text2);margin:3px 3px 3px 7px;}

.papcSubActive{color:var(--logocolor2)!important;}

.papcSub a:last-child{margin-bottom:10px;}

.paProductsBody{float:left;width:75%;padding:10px;}



.corporatePages{float:left;width:100%;margin:0 0 20px}

.corporatePages img{float:left;width:100%;}

.img300{height:350px;object-fit: cover;}

.corporatePages h1{float:left;width:100%;color:var(--text2);font-weight: 500;margin:10px 0;text-transform: uppercase;line-height: 40px;font-size:28px;}

.corporatePages h4{float:left;width:100%;font-size:18px;font-weight: 500;color:var(--logocolor2);margin:7px 0;}

.corporatePages p{float:left;width:100%;margin:7px 0;}

.ulTitle{float:left;width:100%;margin:7px 0;}

.corporatePages ul{float:left;width:100%;}

.corporatePages li{float:left;width:100%;margin:5px 0;}

.corporatePages a{float:left;background-color:var(--logocolor2);padding:10px 15px;border-radius:5px;color:White;margin:15px 0;}



.cpSymbols{float:left;width:103%;margin:10px -1.65% 20px;}

.cpSymbol{float:left;width:30%;margin:1% 1.55%;border:1px solid #ccc;padding:10px;box-shadow: 0 0 5px 3px #ccc;border-radius:10px;display:flex;align-items: center;justify-content: center;flex-direction: column;}

.cpSymbol img{float:left;width:50px;height:50px;object-fit: cover;margin:20px calc(50% - 25px) 10px;}

.cpSymbol h3{float:left;width:100%;text-align:center;margin:20px 0 0;font-size:20px;}

.cpSymbol p{float:left;width:100%;height:130px;margin:10px 0;display: flex;align-items: center;text-align: center;}



.howToUseArea{float:left;width:100%;margin:30px 0;}

.htuaLeft{float:left;width:100%;margin:20px 0;}

.htuaLeft img{float:left;width:400px;height:300px;object-fit: contain;margin-right:30px;}

.htuaLeftDesc{float:left;width:calc(100% - 430px);}

.htuaLeftDesc h3{float:left;width:100%;margin:7px 0;font-size:22px;text-transform: uppercase;font-weight: 500;}

.htuaLeftDesc p{float:left;width:100%;margin:7px 0;}

.htuaLeftDesc a{float:left;background-color:var(--logocolor2);padding:10px 15px;border-radius:5px;color:White;margin:15px 0;}

.htuaRight{float:left;width:100%;margin:20px 0;}

.htuaRight img{float:right;width:400px;height:300px;object-fit: contain;margin-left:30px;}

.htuaRightDesc{float:left;width:calc(100% - 430px);}

.htuaRightDesc h3{float:left;width:100%;margin:7px 0;font-size:22px;text-transform: uppercase;font-weight: 500;}

.htuaRightDesc p{float:left;width:100%;margin:7px 0;}

.htuaRightDesc a{float:left;background-color:var(--logocolor2);padding:10px 15px;border-radius:5px;color:White;margin:15px 0;}



.searchAreas{float:left;width:100%;margin:10px 0 0;border-bottom:1px solid #ccc;padding:20px 0;}

.searchArea{float:left;width:50%;margin:20px 4% 0 0;}

.searchArea label{float:left;width:40%;line-height: 20px;margin:5px 0 0;}

.searchArea input, .searchArea select{float:left;width:60%;border:1px solid #ccc;line-height: 35px;

height:35px;font-size:16px;padding:5px 10px;border-radius:5px;}

.searchAreaCheck{float:left!important;width:20px!important;height:19px!important;margin-right:10px;}

.searchArea2{float:left;width:46%;margin:20px 0 0 0;}

.searchArea2 label{float:left;width:60%;line-height: 20px;margin:5px 0 0;}

.searchArea2 input, .searchArea2 select{float:left;width:40%;border:1px solid #ccc;line-height: 35px;height:35px;font-size:16px;padding:5px 10px;border-radius:5px;}



.saSymbols{float:left;width:100%;padding:10px 0 30px;border-bottom:1px solid #ccc;}

.saSymbol{float:left;width:25%;}

.saSymbol input{float:left;width:20px;height:20px;}

.saSymbol img{float:left;width:28px;height:28px;object-fit: contain;margin:1px 8px;}

.saSymbol span{float:left;margin:1px;}



.sSearchBtn{float:left;width:100%;}

.sSearchBtn a{float:right;}



.cartAlert{float:left;width:100%;font-weight: 500;font-size:24px;margin:0 0 15px;}

.cartTable{float:left;width:100%;}

.cartTable table {font-family: arial, sans-serif;border-collapse: collapse;width: 100%;}

.cartTabletd, th {border: 1px solid #ccc;text-align: left;padding: 8px;}

.cartTable tr:first-child{background-color:#3d3d3d;color:white;text-align: center;}

.cartTable tr:nth-child(even) {background-color: #fff;text-align:center;}

.cartTable td select{float:left;width:100%;height:40px;}

.cartTable td span{float:left;width:100%;margin:5px 0 0 5px;}

.cartTable td img{float:left;width:100px;height:100px;object-fit: contain;margin-right:10px;}

.cartTable td input{float:left;width:25px;height:25px;}

.cartProductDetail{float:left;width:calc(100% - 110px);}

.cartProductDetail h3{float:left;width:100%;margin:5px 0;}

.cartProductDetail h4{float:left;width:100%;margin:5px 0;color:var(--text);}

.cartProductDetail a{float:left;width:auto;margin:5px;padding:5px 10px 6px;}

.cartError{background-color:red!important;}

.cartRadioArea{float:left;width:100%;display:flex;justify-content: center;}

.cartDetails{float:left;width:700px;background-color:var(--border2);margin:20px 0;text-align: right;}

.cartDetail{float:right;width:100%;}

.cartDetail p{float:left;width:calc(100% - 120px);margin:10px 0;}

.cartDetail h3{float:left;width:calc(100% - 120px);margin:10px 0;font-size:18px;font-weight: 600;}

.cartDetail h2{float:left;width:100px;margin:10px 0;font-size:18px;font-weight: 600;}

.cartDetail span{float:left;width:100px;margin:10px 0;}

.cartCoupon{float:right;width:200px;margin:10px 0;}

.cartCoupon p{float:left;width:100%;}

.cartCoupon input{float:left;line-height: 30px;width:100%;}

.cartCoupon a{float:right;}

.cdError{color:rgb(191, 70, 70)!important;}



.cartFunctions{float:left;width:100%;margin:20px 0;}

.cartFunctions a{font-size:20px;}

.cartFunctions a:last-child{float:right;}



.contactArea{float:left;width:100%;margin:20px 0;}

.contactPhone{float:left;width:100%;background-color: transparent!important;margin: 10px 0!important;padding:0!important}

.contactPhone img{float:left;width:50px;height:30px;object-fit:contain;margin:5px 10px 10px 0;}

.contactPhone span{float:left;line-height: 40px;margin:0}

.contactAreaLeft{float:left;width:48%;margin-right:4;}

.contactAreaRight{float:left;width:48%;}

.formElement{float:left;width:50%;padding:10px 20px;}

.formElementF h3{float:left;width:100%;margin:5px 0;line-height: 25px;}

.formElementF{float:left;width:100%;padding:10px 20px;}

.formElement label{float:left;width:100%;color:var(--text2);margin:0 0 5px 0;}

.formElement input{float:left;width:100%;line-height: 25px;border:1px solid var(--border);}

.formElementF label{float:left;width:100%;color:var(--text2);margin:0 0 5px 0;}

.formElementF textarea{float:left;width:100%;line-height: 25px;border:1px solid var(--border);}



.checkoutLeft{float:left;width:60%;padding:0 10% 0 0;}

.clArea{float:left;width:100%;}

.clArea h4{float:left;width:100%;color:var(--text);}

.clArea textarea{float:left;Width:100%;height:100px;border:1px solid var(--border);}

.paymentTypes{float:left;Width:100%;margin:20px 0;}

.paymentType{float:left;width:100%;display:flex;justify-content: center;align-items: center;}

.paymentType input{float:left;width:20px;height:20px;margin-right:5px;cursor:pointer;}

.paymentType p{float:left;width:calc(100% - 25px);margin:2px 0;line-height: 20px;}

.checkoutRight{float:left;width:40%;}



.profileArea{float:left;width:100%;margin:10px 0;padding:15px 0 35px;border-bottom:2px solid var(--border2);}

.profileArea:last-child{border-bottom:transparent;}

.profileArea a{float:right;}

.profileArea h3{float:left;width:100%;color:var(--text2);font-weight: 500;font-size:20px;}

.profileArea h5{float:left;width:100%;font-weight: 600;font-size:16px;}

.paInputArea{float:left;width:100%;margin:10px 0;}

.paInputArea p{float:left;width:150px;margin-right:5%;line-height: 30px;font-weight: 500;}

.paInputArea input{float:left;width:400px;line-height: 30px;border:1px solid var(--border);border-radius:5px;padding:5px 10px;}

.paInputArea select{float:left;width:400px;line-height: 30px;height:40px;border:1px solid var(--border);border-radius:5px;padding:5px 10px;}

.paInputArea2{float:left;width:100%;margin:5px 0;}

.paInputArea2 input{float:left;width:20px;height:20px;margin:5px 10px 2px 0;}

.paInputArea2 p{float:left;width:calc(90% - 40px);margin:5px 0;}

.paInputArea2 p a{float:none!important;background-color:transparent;padding:0;color:black;font-weight: 600;}

.paSymbolArea{float:left;width:25%;margin:5px 0;}

.paSymbolArea input{float:left;width:20px;height:20px;margin:1px 5px 1px 0px;}

.paSymbolArea img{float:left;width:25px;height:25px;margin:0 10px 1px 5px;}

.paSymbolArea p{float:left;margin:0;width:calc(100% - 80px);}



.profileTab{float:left;width:100%;border-bottom:1px solid #ccc;margin:20px 0;padding:0;}

.profileTab a{float:left;padding:10px 30px;background-color:var(--text);color:white;margin:0;border-radius:0;}

.pActive{background-color:var(--logocolor2)!important;color:white;}



.mobilArea{display:none;}



.orderDetail{float:right;width:300px;background-color:#f2f2f2;padding:10px 5px;margin:20px 0;}

.odItem{float:left;width:100%;}

.odItem span{float:left;width:220px;}

.odItem p{float:left;width:70px;text-align: right;}



@media only screen and (max-width: 1360px) {

    .container{float:left;width:1100px;margin:0 calc(50% - 550px);}

    .modalArea{width:80%;}

}

@media only screen and (max-width: 1200px) {

    .container{float:left;width:1000px;margin:0 calc(50% - 500px);}

}

@media only screen and (max-width: 1120px) {

    .container{float:left;width:900px;margin:0 calc(50% - 450px);}

}

@media only screen and (max-width: 1060px) {

    .container{float:left;width:860px;margin:0 calc(50% - 430px);}

    .modalArea{width:90%;}

}

@media only screen and (max-width: 950px) {

    .container{float:left;width:840px;margin:0 calc(50% - 420px);}

    .mobilArea{display:block;}

    .headerTop{margin:3px 0 5px;font-size:16px;}

    .headerMid{margin:0 0 5px;}

    .hmMobilMenu{float:right;width:50px;margin:10px 0 0;}

    .hmMobilMenu img{float:left;width:50px;height: 50px;object-fit: contain;}

    .hmMenu{position:fixed;height: 100vh;right: -330px;top:0;background-color: white;width:330px;margin:0;padding:10px 20px;box-shadow: 0 0 5px 2px #ccc;z-index:9999;transition:0.6s;}

    .hmMenu img{width:200px;margin:80px calc(50% - 100px);}

    .hmMenu a{float:left;width:100%;font-size:20px;}

    .hmMenu span{position:absolute;right:10px;top:15px;font-size:26px;font-weight: 600;background-color:var(--logocolor2);color:white;padding:5px 10px;border-radius:5px;cursor:pointer;}

    .paProductsBody{width:100%;}

    .paProductCategory{float:left;width:300px;height:100vh;position:fixed;left:-300px;top:0;background-color:white;padding:10% 10px;transition:0.6s;}

    .paProductCategory span{position:absolute;right:0;top:0;background-color:var(--logocolor2);color:white;font-size:20px;font-weight: 600;padding:5px 10px;cursor:pointer;}

    .cMenuLogo{float:left;width:100%;}

    .cMenuLogo img{float:left;width:140px;margin:10% calc(50% - 70px);}

    .cMenuOp{float:left;position:absolute;right:-75px;top:20%;background-color:var(--logocolor2);color:white;font-weight: 600;padding:7px 10px;font-size:20px;text-transform: uppercase;cursor:pointer;}

    .cartTable{overflow-x: scroll;}

    .cartTable table{min-width:700px;}
    .profileArea{overflow-x: scroll;font-size:14px;}
    .profileArea td,th{font-size:14px;}
}

@media only screen and (max-width: 880px) {

    .container{float:left;width:800px;margin:0 calc(50% - 400px);}

    .htuaLeft img{width:340px;margin:10px calc(50% - 170px)}

    .htuaLeftDesc{width:100%;}

    .htuaLeftDesc h3{text-align: center;}

    .htuaRight img{width:340px;margin:10px calc(50% - 170px)}

    .htuaRightDesc{width:100%;}

    .htuaRightDesc h3{text-align: center;}

    .searchArea{float:left;width:100%;}

    .searchArea label{width:50%;}

    .searchArea input, .searchArea select{width:50%;}

    .searchArea2{float:left;width:100%;}

    .searchArea2 label{width:50%;}

    .searchArea2 input, select{width:50%;}

    .saSymbol{width:200px;margin:5px 0;}

    .cpSymbol{width:47%;margin:1% 1.5%;}

}

@media only screen and (max-width: 820px) {

    .container{float:left;width:720px;margin:0 calc(50% - 360px);}

    .modalArea{width:96%;height:95vh;}

    .loginHeader img{float:left;width:200px;margin:10px calc(50% - 100px);}

    .loginHeader h1{float:left;width:100%;text-align: center;margin:10px 0;max-width: 100%;}

    .loginBody{min-height: 450px;}

    .loginForm{margin:10px calc(50% - 150px);}

}

@media only screen and (max-width: 760px) {

    .container{float:left;width:680px;margin:0 calc(50% - 340px);}

}

@media only screen and (max-width: 710px) {

    .container{float:left;width:640px;margin:0 calc(50% - 320px);}

    .headerTopData{display:none;}

    .headerTopUser{border-left:none;}

}

@media only screen and (max-width: 660px) {

    .container{float:left;width:580px;margin:0 calc(50% - 290px);}

    .modalArea{padding:10px 20px;}

    .maHeader{position:initial;height:auto;}

    .maHeader img{float:left;width:340px;margin:10px calc(50% - 170px);}

    .maHeader p{float:left;width:100%; margin:10px 0;}

    .maHeaderIcons{float:left;width:calc(100% - 150px);}

    .maHeaderIcons img{float:left;width:23px;height:23px;margin:5px 2px;}

    .mabTable{float:left;width:100%;margin:10px 0;}

    .mabAllergy{float:left;width:100%;margin:10px 0;}

    .maHeaderFunction{float:right;position:initial;margin:15px 0;}

}

@media only screen and (max-width: 610px) {

    .container{float:left;width:500px;margin:0 calc(50% - 250px);}

    .fhItem{width:100%;margin:30px 0;}

    .contactAreaLeft{width:100%;margin:20px 0!important;padding:0 5%;}

    .contactAreaRight{width:100%;margin:20px 0!important;}

    .cpSymbol{width:400px;margin:10px calc(50% - 200px) 20px;}

}

@media only screen and (max-width: 530px) {

    .container{float:left;width:460px;margin:0 calc(50% - 230px);}

}

@media only screen and (max-width: 480px) {

    .container{float:left;width:400px;margin:0 calc(50% - 200px);}

    .corporatePages{font-size:14px;}

    .cpSymbol{width:360px;margin:10px calc(50% - 180px) 20px;}

}

@media only screen and (max-width: 420px) {

    .container{float:left;width:380px;margin:0 calc(50% - 190px);}

    .headerTop{font-size:14px;}

    .maHeader img{float:left;width:300px;margin:10px calc(50% - 150px);}

    .maHeaderIcons img{float:left;width:20px;height:20px;margin:5px 2px;}

    .saSymbol{float:left;width:160px;}

    

}

@media only screen and (max-width: 400px) {

    .container{float:left;width:85%;margin:0 7.5%;}

    .modalArea{padding:10px;}

    .headerTop{font-size:13px;}

    .headerTopLogout{margin-left:5px;padding:0 0 0 5px;height:25px;}

    .headerTopUser{margin-left:0px;padding:0;height:25px;}

    .headerTopUser a{width:200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

    .headerTopUser a img{display:none;}

    .saSymbol{float:left;width:145px;overflow: hidden;}

    .saSymbol input{width:18px;height:18px;}

    .saSymbol img{width:22px;height:22px;margin:1px 3px;}

    .cpSymbol{width:320px;margin:10px calc(50% - 160px) 20px;}

}

@media only screen and (max-width: 355px) {

    .headerTopUser{height:22px;}

    .headerTopLogout{height:22px;}

    .headerTopLogout a{padding:3px 5px;}

    .headerTopUser a{width:170px;font-size:12px;}

}