@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900,300);
@font-face {
    font-family:'GothamRounded-Book';
    src: url('../fonts/GothamRounded-Book_gdi.eot');
    src: url('../fonts/GothamRounded-Book_gdi.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GothamRounded-Book_gdi.woff') format('woff'),
        url('../fonts/GothamRounded-Book_gdi.ttf') format('truetype'),
        url('../fonts/GothamRounded-Book_gdi.svg#GothamRounded-Book') format('svg');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-2212;
}

html,body{
    line-height: 1.4;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
     -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    width: 100%;
    height: 100%;
    background: url('../img/background2021.jpg');
    background-position: center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;


}

body:before{
    content: '';
    position: fixed;
    width: 100%;
    height: 100%;
    top:0px;
    left:0px;
    z-index: 0;
    background-color: transparent;
    background-image: -webkit-linear-gradient(rgba(0,0,0,1) 0,rgba(0,0,0,.5) 20%,rgba(0,0,0,0) 70%);
    background-image: linear-gradient(rgba(0,0,0,1) 0,rgba(0,0,0,.5) 20%,rgba(0,0,0,0) 70%); 
}
body:after{
    content: '';
    position: fixed;
    width: 100%;
    height: 100%;
    top:0px;
    left:0px;
    opacity: 0.5;
    z-index: 0;
    background-color: transparent;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVQIW2NkYGD4z8DAwMgABXAGNgGwSgwVAFbmAgXxvZSoAAAAAElFTkSuQmCC)repeat;

}


b{;font-weight: 700;}
h1{font-size: 24px; font-weight: 400;color: #757374}
h2{font-size: 22px; font-weight: 400;color: #757374}
h3{font-size: 20px; font-weight: 400;color: #757374}
h4{font-size: 18px; font-weight: 400;color: #757374}
h5{font-size: 16px; font-weight: 400;color: #757374}
hr{margin: 10px 0;border: 0; border-top: 1px solid #000;}
p,label,span,a,label,li{font-size: 14px;text-decoration: none; color: #000}

.row{margin: 0px !important;}

/*-----COMMON -----*/
.bold{font-weight: 700;}
.italic{font-style: italic;}
.bottom{vertical-align: baseline;}
.uppercase{text-transform: uppercase;}
.right{float:right;}
.left{float:left;}
.center{text-align: center !important;}
.text-left{text-align: left !important;}
.text-right{text-align:right !important;}
.justify{text-align: justify;}
.hide{display: none !important;}
.show{display: block !important;}
.inline{display: inline-block !important;}
.m-hide{display: block !important;}
.w-hide{display: none !important;}

/*-----LAYOUT -----*/
.wrapper{position: fixed;width: 100%;height: 100%;z-index: 1000;}
.main{padding: 0px 15px; max-width: 850px; margin: 0 auto; position: relative;}

/*-----MINI MENU -----*/
.mini-menu{position: relative;background: rgba(167,9,9,.7)}
.mini-menu .dropdown{color: #fff;padding: 1px 0px 5px 0px;float: right;}
.mini-menu .dropdown .lang{color: #fff;}
.mini-menu .dropdown .lang:hover{text-decoration: underline;}
.mini-menu .dropdown a .caret{border-top-color: #fff;}
.mini-menu .dropdown-menu{text-align: left;min-width: 100px;border-radius: 0px;padding: 0px;}
.mini-menu .dropdown-menu li:hover a{background: #F5821F;color: #fff;transition: all 0.3s ease;}

/*-----BRAND -----*/
.brand{position: relative; margin-bottom: 15px;}
.brand .logo-wrap{padding-top: 15px; padding-bottom: 5px;}
.brand .logo-wrap .logo{position: relative;padding: 15px 0;}
.brand .logo-wrap .logo img{height: 50px; border-radius: 4px;}
.brand .tagline{font-family:'GothamRounded-Book';position: absolute;top: 50%;font-size: 18px;font-weight: 700;color: #fff;text-align: justify;padding-left: 230px; padding-right:15px;-ms-transform: translateY(-50%);-webkit-transform: translateY(-50%); transform: translateY(-50%);}

.brand .select select {line-height:inherit;}
.brand .form-inline{margin-bottom: 0px;}

/*-----OVERWRITE -----*/
.btn-primary{
    padding-top:8px;
    padding-bottom:10px;
    position: relative;
    color: #fff !important;
    cursor: pointer;
    background: #01aba8 linear-gradient(#01aba8, #019895) repeat scroll 0% 0%;
    border-radius: 4px !important;
    box-shadow: 0px 0px rgba(0, 0, 0, 0), 0px -5px rgba(0, 0, 0, .3) inset;
    border: 0px none;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.selected {
    background: #01aba8 linear-gradient(#01aba8, #01aba8) repeat scroll 0% 0%;
    transition: all 0.3s ease !important;
}
.btn i{display: none;}
.btn span{color: #fff}
.btn-loading span{display: none;}
.btn-loading i{display: block; font-size: 19px;}
.btn-loading{pointer-events: none;cursor: not-allowed;filter: alpha(opacity=75);opacity: .75;}

.btn-danger{
    color: #000 !important;
    padding-top:8px;
    padding-bottom:10px;
    position: relative;
    color: #FFF;
    cursor: pointer;
    background: #FF6666 linear-gradient(#FF6666, #D7202A) repeat scroll 0% 0%;
    border-radius: 4px !important;
    box-shadow: 0px 0px rgba(0, 0, 0, 0), 0px -3px rgba(0, 0, 0, .3) inset;
    border: 0px none;
}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.selected {
    box-shadow: 0px 0px rgba(0, 0, 0, 0), 0px -3px rgba(0, 0, 0, .1) inset;
    background: #FF6666 linear-gradient(#FF6666, #FF6666) repeat scroll 0% 0%;
}

.input{border-radius: 4px !important;}
.select{border-radius: 4px !important;}
.select select{border-radius: 4px !important;}
.select.invalid select{border-radius: 4px !important;}

.link-primary-o{color: #0074C0 !important;}
.form-control:focus {border-color: transparent;outline: 0;-webkit-box-shadow: none);box-shadow: none;}

/*-----CONTENT -----*/
.content{position: relative;overflow: auto;-webkit-overflow-scrolling: touch;}
.bottom{position: fixed;bottom: 30px;}
.slimScrollBar{background: #01a9a6 !important;border-radius: 4px !important;opacity: 1 !important;}

.select.load{position: relative;}
.select.load span{display: none;}
.select.load:before{content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0,0,0,.3);border-radius: 4px;}
.select.load:after{content: '';position: absolute;right: 5px;width: 30px;height: 30px;background-image: url('../img/load.svg');background-size: contain;top: 4px;}


/*-----SEARCH & HEADER -----*/
.search{padding-top:15px; padding-bottom:15px;text-align: center;width: 100%;position: relative;border-bottom: 2px dashed rgba(255,255,255,.3);border-top: 2px dashed rgba(255,255,255,.3);}

.header{position: relative; min-height: 37px;}
.header .title{color: #fff !important;font-weight: 900; padding-right: 100px;text-align: left;position: absolute;width:100%;left: 0; top: 50%;-ms-transform: translateY(-50%);-webkit-transform: translateY(-50%); transform: translateY(-50%);}
.header .title span{color: #fff !important;}
.header .btn-header{position: absolute; right:0px; top: 50%;-ms-transform: translateY(-50%);-webkit-transform: translateY(-50%); transform: translateY(-50%);}
.header .loader{position: absolute; right:70px; top: 50%;-ms-transform: translateY(-50%);-webkit-transform: translateY(-50%); transform: translateY(-50%);}


/*-----SEARCH DETAIL -----*/
.search-detail{padding: 50px;position: relative; border-radius: 4px;background: rgba(255,255,255,.8); text-align: center;}
.search-detail .title{font-size: 25px;color:#000;}


/*-----JOB DETAIL -----*/
.job-detail{padding: 15px;position: relative; border-radius: 4px;background: rgba(255,255,255,.8);}
.job-content{padding: 10px 0;}
.job-content strong{color: #000 !important}
.job-content ul{margin: 0 !important;padding: 0 !important;margin-bottom: 15px !important;list-style-type: square !important;padding-left: 20px !important; }
.job-content ul:last-child{margin: 0 !important;padding: 0 !important;margin-bottom: 0px !important;list-style-type: square !important;padding-left: 20px !important; }
.job-content p{margin: 0 !important;}


/*-----STORE -----*/
.store-list{padding: 10px;margin-bottom: 10px;position: relative;padding-right: 50px; border-radius: 4px;border: 1px solid #000;}
.store-list.active{background: rgba(0, 168, 165, .8);transition:all 0.3s ease;}
.store-list:last-child{margin-bottom: 0px;}
.store-list .checkbox{margin: 0px !important;position: absolute;right: 14px;top: 50%;-ms-transform: translateY(-50%);-webkit-transform: translateY(-50%); transform: translateY(-50%);}

.store-list .checkbox input[type="checkbox"]:not(:checked) + label:before,
.store-list .checkbox input[type="checkbox"]:checked + label:before {content: '';position: absolute;left:0; top: 0;width: 25px; height: 25px;border: 1px solid #000;background:#fff;border-radius: 4px;}
/* checked mark aspect */
.store-list .checkbox input[type="checkbox"]:not(:checked) + label:after,
.store-list .checkbox input[type="checkbox"]:checked + label:after {content: '';position: absolute;width: 15px;height: 6px;background: transparent;top: 45%;left: 5px;border: 2px solid #000;border-top: none;border-right: none;-ms-transform: translateY(-50%);-webkit-transform: translateY(-50%); transform: translateY(-50%);-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);transition:all 0.4s ease;}
/* checked mark aspect changes */
.store-list .checkbox input[type="checkbox"]:not(:checked) + label:after {opacity: 0;}
.store-list .checkbox input[type="checkbox"]:checked + label:after {opacity: 1;}



/*-----APPLY JOB -----*/
.apply-job{padding: 15px;position: relative; border-radius: 4px;background: rgba(255,255,255,.8);}
.apply-job .radio input[type=radio] + label { color: #000;}
.apply-job .radio label:before {content: ''; width: 11px; height: 11px; border-radius: 100%; background: #fff;border:1px solid #fff;position: absolute;top: 4px;left: 2px;z-index: 1;}
.apply-job .radio label:after{content:'';width: 15px;height: 15px;border-radius: 100%;background: #fff;border:1px solid #000;position: absolute;left: 0;z-index: 0; top: 2px;}
.apply-job .radio label{margin-left: 22px;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: pointer;color: #A3A1A1;padding: 0px !important}
.apply-job .radio input[type=radio]:checked + label:before { background: #000;transition: all 0.4s ease;}


.apply-job .checkbox input[type="checkbox"]:not(:checked) + label:before,
.apply-job .checkbox input[type="checkbox"]:checked + label:before {content: '';position: absolute;left:0; top: 50%;width: 15px; height: 15px;border: 1px solid #000;background:#fff;border-radius: 0px;-ms-transform: translateY(-50%);-webkit-transform: translateY(-50%); transform: translateY(-50%);}
.apply-job .checkbox input[type="checkbox"]:not(:checked) + label:after,
.apply-job .checkbox input[type="checkbox"]:checked + label:after {content: '';position: absolute;width: 9px;height: 4px;background: transparent;top: 43%;left: 3px;border: 2px solid #000;border-top: none;border-right: none;-ms-transform: translateY(-50%);-webkit-transform: translateY(-50%); transform: translateY(-50%);;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);transition:all 0.4s ease;}
.apply-job .checkbox input[type="checkbox"]:not(:checked) + label {color: #000; }
.apply-job .checkbox input[type="checkbox"]:checked + label {color: #000;}

.apply-job .form-group.lang{padding-left: 120px;}
.apply-job .form-group.lang .radio{display: inline-block;margin-right: 20px;}

.apply-job .link-primary-o{color: #E4C18A !important;}
.apply-job .btn-submit{float: right;}
.apply-job .checkbox{float: left}

.apply-job .input, .apply-job .input:focus {
    -webkit-box-shadow: 0 0px 0 rgba(0,0,0,0),0 2px 5px rgba(0,0,0,.5) inset,0 0px 0 transparent; 
     box-shadow: 0 0px 0 rgba(0,0,0,0),0 2px 5px rgba(0,0,0,.5) inset,0 0px 0 transparent; 
}

.apply-job .select select, .apply-job .select select:focus {
    -webkit-box-shadow: 0 0px 0 rgba(0,0,0,0),0 2px 5px rgba(0,0,0,.5) inset,0 0px 0 transparent; 
     box-shadow: 0 0px 0 rgba(0,0,0,0),0 2px 5px rgba(0,0,0,.5) inset,0 0px 0 transparent; 
}
/*-----THANK -----*/
.thank{padding: 50px;position: relative; border-radius: 4px;background: rgba(255,255,255,.9); text-align: center;}
.thank .title{font-size: 25px;color:#000;}
.thank .sub-title{margin-bottom: 25px; color: #757374;}
.thank-you-input{ background: white; color: black; margin-right: 5px !important; border:0; height: 30px; padding-left: 10px;}
.thank-wrapper{margin-bottom: 25px;}
.thank-friend-wrapper{position: relative;}
.thank-friend{background: white; color: #757374; text-align: left; padding: 10px; margin-bottom: 10px;}
.thank-icon{padding-right: 5px;}
.thank-friend-remove{position: absolute; right: -20px; top: 10px;}
#recommend button.add{border: 0; background: #302931; color: white; height: 30px;}
#recommend button.tell{border: 0; background: #27BB99; color: white; height: 30px; width: 50%; margin: 15px 0;width: 400px;}
#recommend-message{ margin-bottom: 10px; }


/*-----MODAL -----*/
.modal{top:35% !important;width: 400px;display: none;-ms-transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin: 0px !important; right: auto; bottom: auto;}
.modal p{color: #000 !important}
.modal-wrap{position: relative;text-align: left;background: #fff;border-radius: 4px;}
.modal-header{border-bottom: 1px solid #ddd;padding: 15px;}
.modal-header .title{line-height: 1em;font-size: 16px;font-weight: 700;}
.modal-header .close-modal{float: right; color: #D70D0D;cursor: pointer;}
.modal-body{border-bottom: 1px solid #ddd;padding: 15px;}
.modal-footer{padding: 15px;border: none;}


/*-----OTHERS -----*/
/*.load{position: relative;}
.load a{ color: #000; cursor: pointer;}
.load a:hover{text-decoration: underline;}
.load img{width: 40px;}
*/
.loader{width: 40px;height: 40px;background-image: url('../img/load.svg');background-size: contain}
/*.submit-bottom{position: relative;}
.submit-bottom .loader{float: right;}*/
.search-adv{display: block;}
.btn-hide{float: right;color: #fff;cursor: pointer;margin-bottom: -3px;}
.btn-hide:hover{text-decoration: underline;color: #fff;}
.asterik{color:#d2322d;font-size: 18px;}


 
/*-----TABLET LANDSCAPE & DEKSTOP -----*/
/*-------------------------------------*/
@media only screen and (max-width: 960px){


}

/*-----TABLET POTRAIT -----*/
/*------------------------*/
@media only screen and (max-width: 768px){
    .m-hide{display: none !important;}
    .w-hide{display: block !important;}

    .brand .form-inline{margin-bottom: 5px;}

    .modal{left: 0 !important;top: 0 !important;padding: 15px;width: 100%;-ms-transform: none;-webkit-transform: none; transform: none}

    .brand .logo-wrap{padding:0px;}
    
    .apply-job .form-group.lang{padding-left: 120px;}
    .apply-job .form-group.lang .radio{display:block;margin-right: 0px;}
    

}


/*-----PHONE POTRAIT -----*/
/*-------------------------*/
@media only screen and (max-width: 568px){
    
    /*----- FONT SIZE -----*/
    h1{font-size: 18px; font-weight: 400}
    h2{font-size: 16px; font-weight: 400}
    h3{font-size: 14px; font-weight: 400}

    p,label,span,a,label,select,li,input[type="text"],input[type="password"],textarea {font-size: 12px !important;}
    .btn{font-size: 12px;padding-top:8px;padding-bottom:10px;}
    .select select {font-size: 12px !important; padding-top: 8px; padding-bottom: 7px;}
    .modal-header .title{font-size: 14px;}

    .brand .logo-wrap .logo img{height: 30px;}
    .brand .tagline{font-size: 12px !important;padding-left: 125px !important;}
    .brand .logo-wrap .logo{padding-bottom: 10px;}
    
    .apply-job .btn-submit{display: block;float: none; width: 100%;}
    .apply-job .checkbox{display: block;float: none;}

    .search{padding-top: 10px !important;}
    .search{padding-bottom: 10px !important;}
    .header {min-height: 0px;}

    .search-detail{padding: 15px;}
    .thank{padding: 15px;}
    .select.load:after{width: 20px;height: 20px;top: 6px;}

    html, body{background: url('../img/back.jpg');
        background: url('../img/back.jpg');
        background-position: center;
        background-attachment: none;
        -webkit-background-size: none;
        -moz-background-size: none;
        -o-background-size: none;
        background-size: none;
    }

    /*.loader{width: 32px;height: 32px;}
    .submit-bottom .loader{
      float: none;
      margin: 0 auto;
      margin-top: 3px;
    }*/

    .apply-job .checkbox input[type="checkbox"]:not(:checked) + label:before,
    .apply-job .checkbox input[type="checkbox"]:checked + label:before {content: '';position: absolute;left:0; top: 50%;width: 22px; height: 22px;}
    .apply-job .checkbox input[type="checkbox"]:not(:checked) + label:after,
    .apply-job .checkbox input[type="checkbox"]:checked + label:after {content: '';position: absolute;width: 14px;height: 5px;top: 40%;left: 4px;}
    .apply-job .checkbox input[type="checkbox"]:not(:checked) + label, .apply-job .checkbox input[type="checkbox"]:checked + label {padding-left: 33px;}

}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

    .l-wrap-footer {display: none;}

    .search{
        margin: 0px -2px;
    }

    .search .col-3-11, .search .col-2-11{
        width: 25%;
        padding: 0px 2px;
    }

    .apply-job .checkbox input[type="checkbox"]:not(:checked) + label:before,
    .apply-job .checkbox input[type="checkbox"]:checked + label:before {content: '';position: absolute;left:0; top: 50%;width: 22px; height: 22px;}
    .apply-job .checkbox input[type="checkbox"]:not(:checked) + label:after,
    .apply-job .checkbox input[type="checkbox"]:checked + label:after {content: '';position: absolute;width: 14px;height: 5px;top: 40%;left: 4px;}
    .apply-job .checkbox input[type="checkbox"]:not(:checked) + label, .apply-job .checkbox input[type="checkbox"]:checked + label {padding-left: 33px;}
}