/*General*/
body,ul,li,p{padding: 0; margin: 0;}
body{font-family: 'LatoWeb', sans-serif; -webkit-font-smoothing: antialiased;}
div.page-wrapper{min-height: 100%;margin-bottom: -50px;}
div.page-wrapper:after{content:"";display:block; height:50px;}
.container{width: 1100px; margin: 0 auto; display: block;}
.primaryButton{background-color: #50b9ce;transition: all .2s ease-out;}
.primaryButton:hover{background-color: #287e90;}
.clr{display: block; clear: both;}
.message{border: 1px solid #ddd;margin-bottom: 20px;box-sizing: border-box;padding: 20px;background-color: #f0f0f0;color: #777;}
.message.error{border-color:#c00 ; color:#c00 ; background-color:#FFEDED ;}
.message.success{border-color:green ; color:green ; background-color:#E7FFE7 ;}

/*Forms*/
form{margin: 0;}
form div.formField label{display: block; font-size: 12px; font-family: 'LatoWebHeavy'; color: #314555; margin-bottom: 2px;}
form div.formField.error label{color: red}
form div.formField{margin-top: 10px}
form div.formField:first-child{margin-top: 0;}
form div.formField input,
form .captchaWrapper input,
form div.formField textarea{outline: 0; display: block; font-size: 16px; padding: 5px 10px; font-family: 'LatoWeb'; line-height: normal; border: 1px solid #ccc; box-sizing: border-box;}
form div.formField.error input,
form .captchaWrapper.error input,
form div.formField.error textarea{border-color: #f99; background-color: #fee;}
form div.formField input{width: 50%; height: 30px;}
form div.formField textarea{width: 100%}
.captchaWrapper{float: left; position: relative; margin-top: 10px;}
.captchaWrapper img{float: left; height: 30px; width: auto; margin-right: 10px;}
.captchaWrapper input{width: 100px; text-align: left; float: left; height: 30px}
.captchaWrapper i{position: absolute; width: 28px; height: 28px; right: 1px; top: 1px; text-align: center; line-height: 28px; cursor: pointer;}
.captchaWrapper i:hover{background-color: #EAEDF0}
button[type="submit"]{float: right; display: block; border: 0; outline: 0; margin-top: 10px; height: 30px; background-color: #50B9CE; color: white; font-family: 'LatoWebHeavy'; font-size: 14px; width: 100px; position: relative; padding: 0 30px 0 0; cursor: pointer;}
button[type="submit"]:after{position: absolute; content: ''; width: 0; height: 0; border-top: 15px solid rgba(80, 185, 206, 0); border-right: 15px solid #FFF; border-bottom: 15px solid #FFF; border-left: 15px solid rgba(80, 185, 206, 0); top: 0; right: 0;}
button[type="submit"]:hover{background-color: #287e90;}
button[type="submit"]:hover:after{border-left-color: #287e90; border-top-color: #287e90;}

.user .container button {
    float: left;
    color: #fff;
    display: block;
    border: none;
    outline: none;
    background-color: #cc0000;
    padding: 10px 20px;
    font-family: 'LatoWeb';
    height: 37px;
    box-sizing: border-box;
    margin-left: 20px;
    cursor: pointer;
}
.user .container div {
    float: left;
}
.user {
    background-color: #ffcc00;
    overflow: hidden;
    padding: 10px 0;
    line-height: 37px;
}

/*Header*/
header{display: block; width: 100%;	height: 180px; background-color: #fff;}
header div.topBarWrapper{width: 100%; height: 50px; position: relative;}
header div.topBarWrapper:before{content: ""; position: absolute; top: 0; right: 50%; bottom: 0; left: 0; background-color: #eaedf0;}
header div.topBarWrapper div.topBar{width: 100%; height: 50px; background-color: #eaedf0; position: relative; z-index: 1;}
header div.topBarWrapper div.topBar a.tb-rightLink{float: right; height: 100%; display: flex; flex-direction: column; justify-content: center; position: relative; text-decoration: none !important; color: #fff; padding: 0 60px 0 30px; font-family: 'LatoWebHeavy'; text-transform: uppercase;}
header div.topBarWrapper div.topBar a.tb-rightLink:after{content: ""; position: absolute; width: 0; height: 0; border-top: 25px solid #50B9CE; border-right: 25px solid #FFF; border-bottom: 25px solid #FFF; border-left: 25px solid #50B9CE; top: 0; right: 0; transition: all .2s ease-out;}
header div.topBarWrapper div.topBar a.tb-rightLink:hover:after{border-top-color: #287e90; border-left-color: #287e90;}
header div.topBarWrapper div.topBar p.tb-leftLink {float: left; height: 100%; text-decoration: none !important; line-height: 50px; color: #2c3740;}
header div.topBarWrapper div.topBar p.tb-leftLink i{font-size: 20px; margin: 0 5px 0 0; position: relative; top: 3px;}
header div.topBarWrapper div.topBar p.tb-leftLink a{color: #2c3740; text-decoration: none !important; transition: all .2s ease-out;}
header div.topBarWrapper div.topBar p.tb-leftLink a:hover{color: #287e90;}
header div.headerWrapper{height: 130px; position: relative;}
header div.headerWrapper:before{position: absolute; content: ""; top: 80px; right: 0; bottom: 0; left: 50%; background: #314555; height: 50px;}
header div.headerWrapper div.hLeft{float: left; width: 300px; height: 100%;}
header div.headerWrapper div.hLeft a.logo{display: block; float: left; width: 100%; color: #314555; text-decoration: none;}
header div.headerWrapper div.hLeft a.logo img{display: block; height: 100px; margin: 15px 0; float: left; transition: all .3s ease; animation-name: logoRotation; animation-duration: 10s; animation-delay: 4s; animation-iteration-count: infinite;}
header div.headerWrapper div.hLeft a.logo span{line-height: 100px; display: block; float: left; margin: 13px 0 0 10px; font-weight: bold; font-size: 30px;}
header div.headerWrapper div.hRight{float: right; width: calc(100% - 300px); height: 100%;}
header div.headerWrapper div.hRight div.callUsNow{width: 100%; height: 80px; display: flex; flex-direction: column; justify-content: center;}
header div.headerWrapper div.hRight nav{background-color: #314555; height: 50px; position: relative; padding-left: 50px; box-sizing: border-box;}
header div.headerWrapper div.hRight nav:after{position: absolute; content: ""; top: 0; left: 0; bottom: 0; width: 0; height: 0; border-top: 25px solid #FFF; border-right: 25px solid #314555; border-bottom: 25px solid #314555; border-left: 25px solid #FFF;}
header div.headerWrapper div.hRight nav ul{list-style: none; height: 50px; position: relative;}
header div.headerWrapper div.hRight nav ul li{float: left; border-left: 1px solid #405667;}
header div.headerWrapper div.hRight nav ul li:first-child{border: 0;}
header div.headerWrapper div.hRight nav ul li a{text-decoration: none !important;color: #fff;font-family: 'LatoWebSemibold';text-transform: uppercase;line-height: 50px;padding: 0 30px;display: block;height: 50px;transition: all .2s ease-out;}
header div.headerWrapper div.hRight nav ul li a:hover,
header div.headerWrapper div.hRight nav ul li.active a{background-color: #2a3b48}
header div.headerWrapper div.hRight nav ul li:first-child a{padding-left: 20px}
header div.headerWrapper div.hRight nav ul li:first-child a:after{position: absolute; content: ""; top: 0; right: 100%; bottom: 0; width: 0; height: 0; border-top: 25px solid #FFF; border-right: 25px solid #314555; border-bottom: 25px solid #314555; border-left: 25px solid #FFF; z-index: 1; transition: all .2s ease-out;}
header div.headerWrapper div.hRight nav ul li:first-child a:hover:after{border-right-color: #2a3b48; border-bottom-color: #2a3b48;}
header div.headerWrapper div.hRight div.callUsNow p{float: right;text-transform: uppercase;text-align: right; font-size: 13px; line-height: 13px;}
header div.headerWrapper div.hRight div.callUsNow p span{float: right;display: block;}
header div.headerWrapper div.hRight div.callUsNow p span.phoneNumber{text-align: left;color: #314555;font-family: 'LatoWebHeavy';}
header div.headerWrapper div.hRight div.callUsNow p span.callUsFor{text-align: right;border-right: 1px solid #ccc;margin-right: 10px;padding-right: 10px;color: #ccc;}

/*Main*/
main section.pageBanner{height: 80px; position: relative;}
main section.pageBanner:before{ position: absolute; content: ''; left: 0; top: 0; bottom: 0; width: 50%; background-color: #50B9CE;}
main section.pageBanner h1{font-weight: normal; font-family: 'LatoWebHeavy'; font-size: 50px; color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); margin: 0; float: left; background-color: #50b9ce; height: 80px; line-height: 80px; position: relative; width: 50%;}
main section.pageBanner h1:after{position: absolute; content: ''; width: 0; height: 0; border-top: 40px solid #50B9CE; border-right: 40px solid transparent; border-bottom: 40px solid transparent; border-left: 40px solid #50B9CE; left: 100%;}
main > div.container{overflow: hidden;}
main section.side{width: calc(50% - 80px); float: right; background-color: #ccc; height: 300px; position: relative; margin-bottom: 80px;}
main section.side:after{position: absolute; content: ""; width: 0; height: 0;top: 0; left: 0; border-top: 40px solid #FFF; border-right: 40px solid rgba(255, 255, 255, 0); border-bottom: 40px solid rgba(255, 255, 255, 0); border-left: 40px solid #FFF;}
main section.content{width: 50%; float: left; margin-bottom: 80px; padding-top: 80px;}

/*Index*/
section.hugeSlider{text-align: center; position: relative; height: 500px; overflow: hidden;}
section.hugeSlider *{outline: none;}
section.hugeSlider div img{display: block;width: 100%;}
section.whycaraneh{ text-align: center; padding: 50px 0; overflow: hidden; background-color: #EFEFEF}
section.whycaraneh h3{margin: 0; color: #314555; font-weight: normal; font-size: 24px; clear: both; margin-bottom: 30px;}
.wcbItem{width: 33.3%; float: left; box-sizing: border-box; padding: 0 15px;}
.wcbItem i{font-size: 100px; color: #50B9CE;}
.wcbItem h4{color: #314555; font-size: 18px; font-weight: normal; font-family: 'LatoWebHeavy'}
.wcbItem p{color: #777}

/*About*/
section.about{ text-align: center; padding: 50px 0; overflow: hidden;}
section.about h3{margin: 0; color: #314555; font-weight: normal; font-size: 24px; clear: both; margin-bottom: 30px;}
section.about p{color: #777}
section.about p a{text-decoration: none; color: #50B9CE}
section.about p a:hover{text-decoration: underline;}

/*Contact*/
main#contact section.side div#mapWrapper{display: block; width: 100%; height: 100%;}
main#contact div#mapWrapper{margin-bottom: 25px;}
main#contact .contactInfo{background-color: #EAEDF0; box-sizing: border-box; padding: 15px; font-size: 13px; line-height: 20px; color: #314555;}
main#contact .contactInfo p i{position: relative; top: 1px; margin-right: 8px; color: #314555;}

/*Login*/
main#login section.content{width: 300px}
main#login button[type="submit"]{float: left;}
main#login input{width: 100%}
main#login a.forgotPassword{float: right; margin-top: 10px; line-height: 30px; font-size: 12px; text-decoration: none; color: #314555; font-family: 'LatoWebHeavy'; position: relative;}
main#login a.forgotPassword:after{position: absolute; content: ''; left: 0; right: 0; bottom: 5px; height: 1px; background-color: #000; transition: all .2s ease;}
main#login a.forgotPassword:hover:after{transform: scale();}

/*Tracking*/
main#tracking section.content{width: 300px}
main#tracking button[type="submit"]{float: left;}
main#tracking input{width: 100%}

/*Services*/
main#services h2{margin: 0; font-family: 'LatoWebHeavy'; font-size: 18px; color: #50b9ce; font-weight: normal;}
main#services p{font-size: 14px; margin-bottom: 20px; text-align: justify;}
main#about ul {font-size: 14px; padding-left: 16px; margin: -10px 0 0;}

/*About (Page)*/
main#about h2{margin: 0 0 5px; font-family: 'LatoWebHeavy'; font-size: 18px; color: #50b9ce; font-weight: normal;}
main#about p{font-size: 14px; margin-bottom: 20px; text-align: justify;}
main#about ul {font-size: 14px; padding-left: 16px; margin: -10px 0 0;}

/*New Form*/
/*main#newform section.content{width: 300px}*/
main#newform{overflow: hidden;}
main#newform .formField{width: 50%; float: left; margin: 0 0 10px; box-sizing: border-box;}
main#newform .formField:nth-child(2n){padding-left: 10px;}
main#newform .formField:nth-child(2n+1){padding-right: 10px;}
main#newform .actions{clear: both;}
main#newform button[type="submit"]{float: left;}
main#newform input{width: 100%}
/*main#newform a.cancel{float: right; margin-top: 10px; line-height: 30px; font-size: 12px; text-decoration: none; color: #314555; font-family: 'LatoWebHeavy'; position: relative;}*/
/*main#newform a.cancel:after{position: absolute; content: ''; left: 0; right: 0; bottom: 5px; height: 1px; background-color: #000; transition: all .2s ease;}*/
/*main#newform a.cancel:hover:after{transform: scale();}*/

/*Records*/
main#records section.content{width: 100%;}
main#records section.content > div{margin-bottom: 20px;}
main#records table {width: 100%;border-collapse: collapse;}
main#records table thead {background-color: #314555; color: #fff; font-weight: normal; font-family: 'LatoWebHeavy';}
main#records table td,
main#records table th {padding: 5px 10px 3px; font-size: 14px; line-height: normal;}
main#records table td.left,
main#records table th.left{text-align: left}
main#records table td.center,
main#records table th.center{text-align: center}
main#records table td.right,
main#records table th.right{text-align: right}
main#records table tbody,
main#records table tbody td{border: 1px solid #ddd;}
main#records table tbody tr:nth-child(2n+1){background-color: #f5f5f5}
main#records table tfoot td{padding: 0;}
main#records table tfoot td div#pagination{padding-top: 30px}
main#records table tfoot td div#pagination ul{list-style: none; text-align: center;}
main#records table tfoot td div#pagination ul li{display: inline-block;margin:0 4px;}
main#records table tfoot td div#pagination ul li a{text-decoration: none; display: block; background-color: #50B9CE; color: #fff; padding: 5px 8px 3px; line-height: normal;}
main#records table tfoot td div#pagination ul li a.active,
main#records table tfoot td div#pagination ul li a:hover{background-color: #314555}
main#records a.newEntryBtn{float: right; text-decoration: none; background-color: #50b9ce; color: white; font-size: 18px; padding: 0px 60px 0 20px; display: block; position: relative; margin-bottom: 10px; height: 40px; line-height: 40px; transition: all .3s ease;}
main#records a.newEntryBtn:after{content: ''; position: absolute; right: 0; width: 0; height: 0; border-top: 20px solid #FFF; border-right: 20px solid #FFF; border-bottom: 20px solid #50B9CE; border-left: 20px solid #50B9CE; transition: all .3s ease;}
main#records a.newEntryBtn:hover{background-color: #287e90;}
main#records a.newEntryBtn:hover:after{border-left-color: #287e90; border-bottom-color: #287e90;}

/*Not Found*/
.notFoundWrapper p{position: relative; font-family: 'LatoWebHeavy'; color: #314555;}
.notFoundWrapper span{position: absolute; left: 0; right: 0; font-size: 300px; font-family: 'LatoWebHeavy'; top: 0; bottom: 0; line-height: 400px; text-shadow: 0 0 25px rgb(234, 237, 240); color: rgba(0, 0, 0, 0);}
.notFoundWrapper{text-align: center; height: 400px; display: flex; flex-direction: column; justify-content: center; position: relative;}

/*Footer*/
footer{height: 50px; overflow: hidden; position: relative;}
footer:before{ position: absolute; content: ''; top: 0; bottom: 0; right: 0; left: 70%; background-color: #314555;}
footer small{line-height: 50px; float: left; color: #aaa; font-size: 14px;}
footer ul{float: right; list-style: none; background-color: #314555; position: relative; width: calc(50% - 40px);}
footer ul:after{position: absolute; content: ''; width: 0; height: 0; border-top: 25px solid #fff; border-right: 20px solid #314555; border-bottom: 25px solid #314555; border-left: 20px solid #fff; right: 100%;}
footer ul li{float: left;}
footer ul li a{display: block; height: 50px; line-height: 50px; text-decoration: none; padding: 0 20px; color: #fff;}


@keyframes logoRotation {
    0%  {transform: rotateY(0deg);}
    10% {transform: rotateY(90deg);}
    20% {transform: rotateY(0deg);}
    30% {transform: rotateY(0deg);}
    40% {transform: rotateY(0deg);}
    50% {transform: rotateY(0deg);}
    60% {transform: rotateY(0deg);}
    70% {transform: rotateY(0deg);}
    80% {transform: rotateY(0deg);}
    90% {transform: rotateY(0deg);}
    100% {transform: rotateY(0deg);}
}


/*caranehbar.net css styles, developed by Khashayar Pouradaby, pouradaby@gmail.com