/* 
    Created on : Oct 19, 2017, 8:18:37 PM
    Author     : Chartrade
*/
/*@font-face {
    font-family: 'HelveticaNeue';
    src: url('../assets/fonts/HelveticaNeue.ttf');
}*/
@font-face {
    font-family: 'Open Sans';
    src: url('../css/fonts/OpenSans-Regular.ttf');
}
@font-face {
	font-family: 'engebrechtre';
	src: url('../css/fonts/engebrechtre rg.ttf');
}
body{
    overflow-x: hidden;
    font-family: 'Open Sans', sans-serif;
}

ul{
    list-style: none;
    margin: 0px;
    padding: 0px;
}
.left{
    float: left;
}
.right{
    float: right;
}
*{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.clear-both{
    clear: both;
}
.pull-left{float: left;}
.pull-right{float: right;}
.content{
    width: 1200px;
    margin: 0 auto;
    height: auto;
    min-height: 1px;
    overflow: hidden;
}


/*-----------------------------------------------------------------------------*/
/*---------------------------- start navigation -------------------------------*/
/*-----------------------------------------------------------------------------*/
nav{
    width: 1200px;
    background-color: #0083bf;
    height: 60px;
    position: absolute;
    right: 0px;
    left: 0px;
    margin: 0 auto;
    top: 40px;
    z-index: 99999999;
}
nav::after {
    width: 100%;
    background-color: #0083bf;
    position: absolute;
    right: -100%;
    height: inherit;
    content: '';
}
nav.fixed{
    position: fixed;
    top: 0px;
    width: 100%;
}
nav .container-menu{
    width: 1200px;
    margin: 0 auto;
}
nav img.logo{
    float: left;
    margin: 13px 0px 0px 30px;
    width: 250px;
}
nav ul{
    float: right;
}
nav ul li{
    float: left;
}
nav ul li a{
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-text-transform: uppercase;
    -moz-text-transform: uppercase;
    font-size: 14px;
    padding: 23px 22px 20px 22px;
    display: block;
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    display: block;
    height: 60px;
}
nav ul li.active a,
nav ul li a:hover{
    background-color: #fff;
    color: #0083bf;
}
nav ul li.search{
    position: relative;
}
nav ul li.search img{
    margin: 15px 35px 0px 15px;
    cursor: pointer;
}
nav ul li.search input{
    display: none;
    position: absolute;
    right: 85px;
    top: 0px;
    height: 60px;
    border: none;
    width: 755px;
    text-align: center;
    outline: none;
}
nav .container-menu .menu-responsive{
    display: none;
}
@media only screen and (max-width : 1224px) {
    nav{width: 100%;}
}
@media only screen and (min-width : 1024px) and (max-width : 1224px) {
    nav .container-menu{width: 992px;}
    nav ul li a{padding: 24px 16px 20px 16px;font-size: 13px;}
    nav img.logo{width: 245px;margin: 18px 0px 0px 0px;}
    nav ul li.search input{width: 640px;}
}
/*@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {*/
@media only screen and (max-width : 1024px) {
    nav{top: 0px;}
    nav .container-menu{width: 768px;}
    nav .container-menu .menu-responsive{cursor: pointer;display: block;width: 32px;float: right;margin-top: 20px;}
    /*nav ul{position: absolute;right: 0px;width: 300px;background-color: #3D3E3E;}*/
    nav ul{display: none;position: absolute;right: 0px;width: 300px;background-color: #0083BF;top: 60px;}
    nav ul li{width: 100%;text-align: center;}
    nav ul li a{padding: 8px 22px 8px 22px;height: auto;}
    nav ul li.search img{margin: 0px;width: 28px;}
    nav ul li.search input{height: 30px;right: 0px;width: 100%;}
/*    nav ul li a{color: #000;}*/
    nav img.logo{margin-left: 0px;}
}
@media only screen and (max-width : 768px) {
    nav{width: 100%;}
    nav .container-menu{width: 500px;}
    nav img.logo{width: 220px;margin-bottom: 0px;margin-top: 17px;}
}
@media only screen and (max-width : 500px) {
    nav .container-menu{width: 300px;}
}
/*-----------------------------------------------------------------------------*/
/*---------------------------- end navigation -------------------------------*/
/*-----------------------------------------------------------------------------*/









/*-----------------------------------------------------------------------------*/
/*---------------------------- start our-brands section -------------------------------*/
/*-----------------------------------------------------------------------------*/
.our-brands{
    background-color: #eaebec;
    padding-bottom: 45px;
}
.our-brands h3{
    text-align: center;
    margin-top: 20px;
    font-family: 'engebrechtre';
}
.our-brands h3 a{
    text-decoration: none;
    color: #000;
    font-size: 30px;
    font-weight: normal;
    letter-spacing: 1px;
}
.our-brands h3 img:first-child{
    width: 45px;
    margin-right: 10px;
}
.our-brands h3 span{
    font-size: 20px;
    font-weight: normal;
    color: #3d3e3e;
}

.container-slider{
    position: relative;
}
.bx-wrapper{
    width: 1200px;
    margin: 0 auto;
}
.bx-wrapper .bx-viewport{
    padding: 10px 4px;
}
.our-brands article{
    box-shadow: 0px 0px 6px #999;
    -webkit-box-shadow: 0px 0px 6px #999;
    -moz-box-shadow: 0px 0px 6px #999;
    height: 280px;
    background-color: #fff;
    overflow: hidden;
}
.our-brands article:after{
    width: 0px;
    height: 0px;
    margin: 0 auto;
    content: '';
    z-index: 9999999;
    border-top: 4px solid #b1b2b3;
    border-right: 110px solid transparent;
    border-left: 110px solid transparent;
    position: absolute;
    right: 0px;
    left: 0px;
    bottom: -4px;
}
.our-brands .brand-img{
    margin-top: 95px;
    text-align: center;
}
.our-brands .brand-img img{
    margin: 0 auto; width: 200px;
}
.our-brands .read-more{
    position: absolute;
    bottom: 0px;
    background-color: #3d3e3e;
    text-align: center;
    right: 0px;
    left: 0px;
    width: 48px;
    height: 48px;
    margin: 0 auto;
}
.our-brands .read-more img{
    width: 20px;
    margin-top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
}
.bx-wrapper .bx-controls-direction a{
    position: absolute;
    top: 50%;
    margin-top: -24px;
    outline: 0;
    width: 34px;
    height: 54px;
    text-indent: -9999px;
    z-index: 9999;
    background-color: #0083bf;
}
.bx-wrapper .bx-prev{
    left: 0px;
    background: url(../images/left_angle.png) no-repeat;
    background-position: 8px 18px;
    background-size: 16px;
}
.bx-wrapper .bx-next{
    right: 0px;
    background: url(../images/right_angle.png) no-repeat;
    background-position: 12px 18px;
    background-size: 16px;
}


@media only screen and (min-width : 1024px) and (max-width : 1224px){
    .bx-wrapper{width: 992px;}
    .our-brands article{height: 240px;}
    .our-brands .brand-img img{width: 150px;}
    .our-brands .brand-img{margin-top: 85px;}
}
@media only screen and (min-width : 788px) and (max-width : 1024px){
    .our-brands .brand-img img{width: 130px;}
    .our-brands article{height: 200px;}
    .bx-wrapper{width: 768px;}
    .our-brands .brand-img{margin-top: 65px;}
}
@media only screen and (min-width : 520px) and (max-width : 788px){
    .our-brands .brand-img img{width: 80px;}
    .our-brands article{height: 140px;}
    .bx-wrapper{width: 500px;}
    .our-brands .brand-img{margin-top: 40px;}
}
@media only screen and (max-width : 520px){
    .our-brands{padding-bottom: 35px;}
    .our-brands .brand-img img{width: 150px;}
    .our-brands article{height: 160px;}
    .bx-wrapper{width: 255px;}
    .our-brands .brand-img{margin-top: 40px;}
    
    .our-brands h3{margin-top: 15px;margin-bottom: 2px;}
    .our-brands h3 img:first-child{width: 28px;}
    .our-brands h3 a{font-size: 20px;}
}
/*-----------------------------------------------------------------------------*/
/*---------------------------- end our-brands section -------------------------------*/
/*-----------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------*/
/*---------------------------- start our-brands full page -------------------------------*/
/*-----------------------------------------------------------------------------*/
.breadcrumb{
    background-color: #0083bf;
    height: 40px;
    padding: 9px 20px;
    color: #fff;
}
.our-brands.page .container-slider{
    width: 1224px;
    margin: 0 auto;
    height: auto;
    min-height: 1px;
    overflow: hidden;
    padding: 5px;
}
.our-brands.page .container-slider article{
    width: 281px;
    height: 280px;
    float: left;
    margin-right: 25px;
    margin-bottom: 25px;
    position: relative;
}
.our-brands.page .container-slider article:nth-child(4n+4){margin-right: 0px;}
@media only screen and (min-width : 1024px) and (max-width : 1224px){
    .our-brands.page .container-slider{width: 1024px;}
    .our-brands.page .container-slider article{width: 234px;height: 234px;}
}
@media only screen and (min-width : 788px) and (max-width : 1024px){
    .our-brands.page .container-slider{width: 768px;}
    .our-brands.page .container-slider article{width: 236px;height: 236px;}
    .our-brands.page .container-slider article:nth-child(4n+4){margin-right: 25px;}
    .our-brands.page .container-slider article:nth-child(3n+3){margin-right: 0px;}
}
@media only screen and (min-width : 520px) and (max-width : 788px){
    .our-brands.page .container-slider{width: 500px;}
    .our-brands.page .container-slider article{width: 232px;height: 232px;}
    .our-brands.page .container-slider article:nth-child(2n+2){margin-right: 0px;}
    .our-brands.page .container-slider article .brand-img{margin-top: 75px;}
    .our-brands.page .container-slider article .brand-img img{width: 150px;}
}
@media only screen and (max-width : 520px){
    .our-brands.page .container-slider{width: 300px;}
    .our-brands.page .container-slider article{width: 290px;height: 210px;margin-left: 0px;}
    .our-brands.page .container-slider article .brand-img{margin-top: 60px;}
    .our-brands.page .container-slider article .brand-img img{width: 190px;}
}
/*-----------------------------------------------------------------------------*/
/*---------------------------- end our-brands full page -------------------------------*/
/*-----------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------*/
/*---------------------------- start quote-section -------------------------------*/
/*-----------------------------------------------------------------------------*/
.quote-section{
    margin-top: 15px;
    margin-bottom: 15px;
    background-image: url('../images/background-img.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    width: 100%;
    height: 350px;
    padding-top: 0.1px;
}
.quote-section .overlay{
    background-color: rgba(0,0,0,0.6);
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    width: 100%;
    z-index: 8;
}
.quote-section .details{
    z-index: 999;
    color: #fff;
    position: relative;
    width: 400px;
    margin: 0 auto;
    margin-top: 130px;
}
.quote-section .details h3{
    display: block;
    clear: both;
    text-align: center;
    padding: 15px;
    margin: 0px;
    font-weight: normal;
    font-size: 24px;
}
.quote-section .details img.left{
    clear: both;
}
@media only screen and (min-width : 788px) and (max-width : 1224px){
    .quote-section{height: 250px;}
    .quote-section .details{margin-top: 80px;}
}
@media only screen and (min-width : 520px) and (max-width : 788px){
    .quote-section{height: 200px;}
    .quote-section .details{margin-top: 55px;}
}
@media only screen  and (max-width : 520px){
    .quote-section{height: 180px;}
    .quote-section .details{margin-top: 45px;width: 300px;}
    .quote-section .details .right,
    .quote-section .details .left{width: 20px;}
    .quote-section .details h3{font-size: 18px;}
}
/*-----------------------------------------------------------------------------*/
/*---------------------------- end quote-section -------------------------------*/
/*-----------------------------------------------------------------------------*/






/*-----------------------------------------------------------------------------*/
/*---------------------------- start shadow design -------------------------------*/
/*-----------------------------------------------------------------------------*/
.shadow-top{
    background-image: url(../images/shadow-top.png);
    background-repeat: no-repeat;
    margin: 0 auto;
    height: 8px;
    margin-top: -8px;
    width: 1000px;
}
.shadow-bottom{
    background-image: url(../images/shadow-bottom.png);
    background-repeat: no-repeat;
    margin: 0 auto;
    height: 8px;
    margin-bottom: -8px;
    width: 1000px;
}
@media only screen and (min-width : 788px) and (max-width : 1024px){
    .shadow-top{width: 768px;background-size: contain;}
    .shadow-bottom{width: 768px;background-size: contain;}
}
@media only screen and (min-width : 520px) and (max-width : 788px){
    .shadow-top{width: 500px;background-size: contain;}
    .shadow-bottom{width: 500px;background-size: contain;}
}
@media only screen and (max-width : 520px){
    .shadow-top{width: 300px;background-size: contain;}
    .shadow-bottom{width: 300px;background-size: contain;}
}
/*-----------------------------------------------------------------------------*/
/*---------------------------- end shadow design -------------------------------*/
/*-----------------------------------------------------------------------------*/





/*-----------------------------------------------------------------------------*/
/*---------------------------- start footer -------------------------------*/
/*-----------------------------------------------------------------------------*/
footer{
    background-image: url(../images/background-footer.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 500px;
    position: relative;
    overflow: hidden;
}
/*---------------------------- animated images -------------------------------*/
.z-item{
    position: absolute;
}
.z-item-3{
    right: -80px;
    top: 50px;
    width: 290px;
}
.z-item-4{
    left: 0px;
    top: 100px;
}

file:///C:/Users/user/Desktop/chartrade/public_html/images/item-2.png
 /*Tada*/ 
.tada {
    -webkit-animation-name: tada;
    animation-name: tada;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    /*-webkit-animation-iteration-count: infinite;*/
    /*animation-iteration-count: infinite;*/
}

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    -ms-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    -ms-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    -ms-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}


/*---------------------------- socialmedia -------------------------------*/
footer .socialmedia{
    width: 1200px;
    margin: 0 auto;
    margin-top: 35px;
}
footer .socialmedia img{
    margin-right: 5px;
}
/*---------------------------- footer-middle -------------------------------*/
.footer-middle{
    width: 500px;
    height: 200px;
    margin: 0 auto;
    margin-top: 60px;
}
.footer-middle > div{
    text-align: center;
}
.footer-middle img{}
.footer-middle h3{
    font-weight: normal;
    font-size: 24px;
    margin-top: 0px;
}
.footer-middle a{
    text-decoration: none;
    color: #fff;
}
/*---------------------------- codesign -------------------------------*/
footer .codesign{
    width: 1200px;
    margin: 0 auto;
    color: #fff;
    margin-top: 60px;
}
footer .codesign span{
    font-size: 13px;
}
footer .codesign .left span{
    margin-top: 18px;
    display: block;
    float: right;
    margin-left: 12px;
}
footer .codesign .right span{
    margin-top: 18px;
    display: block;
    margin-right: 12px;
    float: left;
}
footer .codesign .right img{
    width: 60px;
    margin-top: 16px;
}
@media only screen and (min-width : 1024px) and (max-width : 1224px){
    footer .socialmedia{width: 992px;}
    footer .codesign{width: 992px;}
}
@media only screen and (min-width : 788px) and (max-width : 1024px){
    footer .socialmedia{width: 768px;}
    footer .codesign{width: 768px;}
}
@media only screen and (max-width : 1024px){
    .z-item-4{left: -130px;width: 330px;}
    .z-item-3{right: -160px;top: 110px;width: 330px;}
    .footer-middle{width: 500px;}
    .footer-middle img{height: 30px;}
    .footer-middle h3{font-size: 22px;}
}
@media only screen and (min-width : 520px) and (max-width : 788px){
    footer .socialmedia{width: 500px;}
    footer .codesign{width: 500px;}
}
@media only screen and (max-width : 788px){
    footer{height: auto;}
    .z-item-3{display: none;}
    .z-item-4{left: -90px;width: 190px;}
    .footer-middle{height: 90px;}
}
@media only screen and (max-width : 520px){
    footer .socialmedia{width: 300px;text-align: center;}
    .footer-middle{width: 300px;height: 210px;}
    .footer-middle .right, .footer-middle .left{width: 100%;}
    footer .codesign{width: 210px;height: 100px;margin-top: 30px;}
    footer .codesign .left, footer .codesign .right{margin-bottom: 20px;}
	footer .codesign .right{ float:none; text-align:center}
	footer .codesign .right img{ margin-top:0}
}
/*-----------------------------------------------------------------------------*/
/*---------------------------- end footer -------------------------------*/
/*-----------------------------------------------------------------------------*/




/*-----------------------------------------------------------------------------*/
/*---------------------------- start header-subpages -------------------------------*/
/*-----------------------------------------------------------------------------*/
.header-subpages{
    width: 100%;
    height: 250px;
    background-color: #333;
    background-image: url('../images/header-subpages.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 15px;
    padding-top: 0.2px;
    position: relative;
}
.header-subpages .content{
    position: relative;
    height: inherit;
    overflow: inherit;
}
.header-subpages h1{
    text-align: center;
    color: #fff;
    margin: 0 auto;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 40px;
    font-family: 'engebrechtre';
    font-weight: normal;
    letter-spacing: 1px;
    font-size: 42px;
}
.header-subpages .bird{
    position: absolute;
    width: 180px;
    left: 0;
    bottom: -18px;
}
.header-subpages .post{
    position: absolute;
    width: 150px;
    right: 0px;
    bottom: 0px;
}
.header-subpages .apple{
    position: absolute;
    width: 130px;
    right: 0px;
    bottom: 0px;
}
.header-subpages .bread{
    position: absolute;
    left: -40px;
    bottom: 25px;
    width: 260px;
}
.header-subpages .onion{
    position: absolute;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    bottom: 80px;
    width: 100px;
}
.header-subpages .left-arrow{
    position: absolute;
    right: 510px;
    bottom: 100px;
    /*width: 160px;*/
}
.header-subpages .potato{
    position: absolute;
    right: -15px;
    bottom: 20px;
    width: 160px;
}
@media only screen and (max-width : 1024px){
    .header-subpages{height: 210px;}
}
@media only screen and (max-width : 520px){
    .header-subpages .apple{width: 70px;}
    .header-subpages h1{font-size: 38px;}
    .header-subpages img{display: none;}
}

/*-----------------------------------------------------------------------------*/
/*---------------------------- end header-subpages -------------------------------*/
/*-----------------------------------------------------------------------------*/




/*-----------------------------------------------------------------------------*/
/*---------------------------- start contact us page -------------------------------*/
/*-----------------------------------------------------------------------------*/
article.contactus{
    background-color: #eaebec;
}
.contactus > div.content{
    height: 500px;
}
.contactus section{
    background-color: #fff;
    float: left;
    width: 720px;
    height: inherit;
    padding: 10px 40px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.contactus section .small-icons{
    width: 16px;
    float: left;
    margin-top: 5px;
    margin-right: 10px;
}
.contactus section span{
    font-size: 13px;
}
.contactus section .follow-us li{
    float: left;
    margin-right: 15px;
}
.contactus section .follow-us li img{
    height: 16px;
}
.contactus form{
    background-color: #0083bf;
    float: right;
    width: 480px;
    height: inherit;
    padding: 10px 40px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    color: #fff;
    position: relative;
}
form#frmContactus:before{
    content: '';
    position: absolute;
    top: 70px;
    left: -20px;
    width: 0px;
    height: 0px;
    border-top: solid 17px transparent;
    border-bottom: solid 17px transparent;
    border-right: solid 20px #0083bf;
}
.contactus form input, .contactus form textarea{
    width: 100%;
    height: 34px;
    padding-left: 10px;
    box-sizing: border-box;
    border: solid thin #fff;
    background-color: transparent;
    color: #fff;
    margin-bottom: 20px;
    font-size: 14px;
}
.contactus form textarea{
    height: 180px;
    padding-top: 8px;
}
.contactus form input[name='submit']{
    width: 100px;
    float: right;
}
.contactus input::-webkit-input-placeholder, .contactus textarea::-webkit-input-placeholder {
    color: white !important;
}
.contactus input:-moz-placeholder, .contactus textarea:-moz-placeholder{ /* Firefox 18- */
    color: white !important;  
}
.contactus input::-moz-placeholder, .contactus textarea::-moz-placeholder{  /* Firefox 19+ */
    color: white !important;  
}
.contactus input:-ms-input-placeholder, .contactus textarea:-ms-input-placeholder{  
    color: white !important;  
}
@media only screen and (min-width : 1024px) and (max-width : 1224px){
    .contactus section{width: 620px;}
    .contactus form{width: 370px;}
}
@media only screen and (max-width : 1024px){
    .contactus section{width: 100%;}
    .contactus form{width: 100%;margin-top: 30px;}
    .contactus > div.content{height: auto;}
}
/*-----------------------------------------------------------------------------*/
/*---------------------------- end contact us page -------------------------------*/
/*-----------------------------------------------------------------------------*/






/*-----------------------------------------------------------------------------*/
/*---------------------------- start text pages -------------------------------*/
/*-----------------------------------------------------------------------------*/
.text-page{
    background-color: #eaebec;
    position: relative;
}
.text-page section{
    background-color: #fff;
    padding: 10px 40px;
}
.text-page section .block{
    width: 100%;
    height: auto;
    min-height: 1px;
    overflow: hidden;
}
.text-page section .block .details{
    width: 540px;
}
.text-page section .block .details.nofl{width:auto; float:none}

.text-page section .block .details h3{
    margin: 0px;
	padding-top: 30px;
}
.text-page section .block .details h2{margin-top:0}
.text-page section .block .details h3:first-child{ padding-top:0}
.text-page section .block img{
    width: 540px;
}
.text-page section .block p{
    font-size: 17px;
    line-height: 26px;
}
@media only screen and (min-width : 1024px) and (max-width : 1224px){
    .text-page section .block .details{width: 440px;}
    .text-page section .block img{width: 440px;}
}
@media only screen and (max-width : 1024px){
    .text-page section .block .details{width: 100%;}
    .text-page section .block img{width: 100%;margin-bottom: 30px;}
}
/*-----------------------------------------------------------------------------*/
/*---------------------------- end text-page -------------------------------*/
/*-----------------------------------------------------------------------------*/

.tooltipster-light{border:1px solid #0083bf;background:#fff;color:#0083bf;text-transform:uppercase}.tooltipster-arrow{top:-1px}
.tooltipster-light .tooltipster-content{font-size:13px;line-height:20px;padding:6px 18px;}
.ld{position:relative}.ld.ac .lds{display:block}
.ld .lds{display:none;z-index:999;left:0;right:0;top:0;bottom:0;position:absolute;text-align:center;margin:0 auto;background:url(../images/w-rep.png) left top repeat}.ld .lds div{position:relative;height:100%}.ld .lds div span{background:url(../images/lod.gif) center center no-repeat;height:100%;display:block;position:absolute;left:0;right:0;text-align:center;font-size:14px;font-weight:bold;color:#987d4a}.ld .lds .em{background:none;padding-top:13.5%;text-transform:uppercase}
.rmsg{margin-top: -10px;padding-bottom: 10px;color: #000;font-weight:bold}
#frmServices{height:340px;}
.ni{padding-top:25px;margin-top:30px;border-top:1px solid #0083bf}.ni:first-child{margin-top:0;padding-top:0;border-top:none}
.ni h2{margin:0;padding:0}
.ni h2 a{color:#0083bf;text-decoration:none}.ni h2 a:hover,.nsi div a:hover{color:#333}
.nsi div a{font-size: 13px;color: #0083bf;text-decoration:none}
/*-----------------------------------------------------------------------------*/
/*---------------------------- start our-products new section -------------------------------*/
/*-----------------------------------------------------------------------------*/
.our-brands.page aside{width: 300px;}
.our-brands.page aside ul li{
    background-color: white;
    width: 100%;
    height: 100px;
    margin-bottom: 4px;
    text-align: center;
    position: relative;
    cursor: pointer;
}
.our-brands.page aside ul li.active:after,
.our-brands.page aside ul li:hover:after{
    content: '';
    border-left: solid 6px #0083bf;
    position: absolute;
    left: 0px;
    height: 100%; top: 0;
}
.our-brands.page aside ul li a img{
    position: absolute;
    right: 0px;
    left: 0px;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    width: 150px;
}
.our-brands.page aside ul li a{display: block;width: 100%;height: 100%;}
.our-brands.page .products-list{width: 875px;}
.our-brands.page .products-list article .read-more{z-index: 10;}
.our-brands.page .products-list article .overlay.animate{bottom: 0px;opacity: 1;}
.our-brands.page .products-list article .overlay{
    background-color: #0083bf;
    position: absolute;
    bottom: -150px;
    color: #fff;
    z-index: 9;
    padding: 10px 30px 30px 30px;
    opacity: 0;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz--transition: all 0.5s ease;
}
.our-brands.page .products-list article .overlay a{color: #fff;text-decoration: none;}




.products-list{background-color: #eaebec;}
.products-list{
    height: auto;
    min-height: 1px;
    overflow: hidden;
}
.products-list article{
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
    width: 277px;
    height: 350px;
    text-align: center;
    background-color: #fff;
    position: relative;
}
.products-list article:nth-of-type(3n+3){margin-right: 0px;}
.products-list article div.product-img{
    margin-top: 40px;
    height: 230px;
    position: relative;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-`: all .3s ease-in-out;
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
}
.products-list article div.product-img:hover{
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
}
.products-list article div.product-img img{
    position: absolute;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
	max-height: 100%;
	max-width: 100%;
}
.products-list article div.read-more{
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: auto;
    background-color: #000;
    width: 40px;
    height: 40px;
    text-align: center;
}
.products-list article div.read-more img{width: 20px;margin-top: 20px;}
.products-list article h3 a{color: #000;text-decoration: none;}




@media only screen and (min-width : 1024px) and (max-width : 1224px){
    .our-brands.page aside{width: 240px;}
    .our-brands.page .products-list{width: 725px;}
    .products-list article{margin-right: 15px;width: 230px;}
}
@media only screen and (max-width : 1024px){
    .our-brands.page aside{width: 100%;}
    .our-brands.page aside{margin-bottom: 10px;}
    .our-brands.page aside ul li{margin-right: 10px;margin-bottom: 10px;width: 100px;height: 60px;float: left;}
    .our-brands.page aside ul li a img{width: 70px;}
    .our-brands.page aside ul li.active::after, .our-brands.page aside ul li:hover::after{border-left: solid 2px #0083bf;}
}
@media only screen and (min-width : 788px) and (max-width : 1024px){
    .our-brands.page .products-list{width: 768px;}
    .products-list article{margin-right: 15px;width: 246px;}
}
@media only screen and (min-width : 520px) and (max-width : 788px){
    .our-brands.page .products-list{width: 500px;}
    .products-list article{margin-right: 0px;width: 100%;}
}
@media only screen and (max-width : 520px){
    .our-brands.page .products-list{width: 300px;}
    .products-list article{margin-right: 0px;width: 100%;}
    .our-brands.page aside ul li{width: 90px;}
}
/*-----------------------------------------------------------------------------*/
/*---------------------------- end our-products new section -------------------------------*/
/*-----------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------*/
/*---------------------------- start our-products old section -------------------------------*/
/*-----------------------------------------------------------------------------*/
.our-products{
    background-color: #eaebec;
}
.our-products .content{
    width: 1224px;
    margin: 0 auto;
    height: auto;
    min-height: 1px;
    overflow: hidden;
}
.our-products .content article{
    float: left;
    margin-right: 25px;
    margin-bottom: 25px;
    width: 287px;
    height: 350px;
    text-align: center;
    background-color: #fff;
    position: relative;
}
.our-products .content article:nth-child(4n+4){
    margin-right: 0px;
}
.our-products .content article div.product-img{
    margin-top: 40px;
    height: 230px;
    position: relative;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
}
.our-products .content article div.product-img:hover{
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
}
.our-products .content article div.product-img img{
    position: absolute;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
	max-width: 100%;
    max-height: 100%;
}
.our-products .content article div.read-more{
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: #000;
    width: 40px;
    height: 40px;
    text-align: center;
}
.our-products .content article div.read-more img{
    width: 20px;
    margin-top: 10px;
}
.our-products .content article h3 a{
    color: #000;
    text-decoration: none;
}
.brand-details{
    background-color: #fff;
    padding: 10px 40px;
    margin-bottom: 5px;
}
@media only screen and (min-width : 1024px) and (max-width : 1224px){
    .our-products .content{width: 992px;}
    .our-products .content article{width: 229px;}
    .our-products .content article div.product-img img{max-width: 190px;height: auto;}
}
@media only screen and (min-width : 788px) and (max-width : 1024px){
    .our-products .content{width: 768px;}
    .our-products .content article{width: 100%;}
    .our-products .content article div.product-img img{max-width: 130px;height: auto;}
    .our-products .content article h3 a{font-size: 15px;}
}
@media only screen and (min-width : 520px) and (max-width : 788px){
    .our-products .content{width: 500px;}
    .our-products .content article{width: 100%;height: 290px;}
    .our-products .content article div.product-img{height: 160px;}
    .our-products .content article div.product-img img{max-width: 110px;height: auto;}
    .our-products .content article h3 a{font-size: 14px;}
}
@media only screen and (max-width : 520px){
    .our-products .content{width: 300px}
    .our-products .content article{width: 100%;}
}
/*-----------------------------------------------------------------------------*/
/*---------------------------- end our-products old section -------------------------------*/
/*-----------------------------------------------------------------------------*/






/*-----------------------------------------------------------------------------*/
/*---------------------------- start related-products -------------------------------*/
/*-----------------------------------------------------------------------------*/
.related-products > h3{
    text-align: center;
    margin-top: 20px;
    font-family: 'engebrechtre';
}
.related-products > h3 a{
    text-decoration: none;
    color: #000;
    font-size: 28px;
    font-weight: normal;
    letter-spacing: 1px;
}
.related-products{
    padding-bottom: 40px;
}
.related-products .content{
    width: 100%;
}


@media only screen and (min-width : 1024px) and (max-width : 1224px){
    .content{width: 992px;}
}
@media only screen and (min-width : 788px) and (max-width : 1024px){
    .content{width: 768px;}
}
@media only screen and (min-width : 520px) and (max-width : 788px){
    .content{width: 500px;}
}
@media only screen and (max-width : 520px){
    .content{width: 300px}
}

.hd{display:none}
.prt{padding-top:9px}
.content.ab{background:url(../images/ab.jpg) left top no-repeat #fff;background-size:cover}
.text-page .content.ab section{background:none}
.services-form input,.services-form textarea,.services-form select{width: 100%;height: 40px;padding-left: 15px;padding-top: 2px;padding-bottom: 2px;margin-bottom: 15px;font-size: 14px;border: solid thin #ddd;}
.services-form textarea{height: 105px;}
.services-form input[type='submit']{background-color:#0083bf;color:white;height:30px}
.services-form p{font-size:14px;}
.sr a{color:#0083bf}.sr a:hover{text-decoration:none}
.gold-bold{color:#987d4a;font-size:19px!important;font-weight:bold}
.blue-bold{color:#0083bf;font-size:19px!important;font-weight:bold}
.codesign .left{padding-top:15px;}
.trms{text-align:center;position:relative;top:36px;left:-60px;font-size:13px}.trms a{color:#fff;text-align:center;font-size:14px;}.trms a:hover{text-decoration:none}