@font-face {
  font-family: 'Convection-Bold';
  src: url('../fonts/Convection-Bold.eot?#iefix') format('embedded-opentype'),  
  url('../fonts/Convection-Bold.woff') format('woff'), 
  url('../fonts/Convection-Bold.ttf')  format('truetype'), 
  url('../fonts/Convection-Bold.svg#Convection-Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
html{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
*, *:before, *:after{-webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit;}


body{margin: 0; padding: 0; line-height: 22px; color: #5c5c5c; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; -webkit-tap-highlight-color: rgba(0,0,0,0); font-family: 'Open Sans', sans-serif; font-weight:400; background: #fff; overflow-y: auto !important;}
 .cookiesbg {display: none;}
img{border:0; max-width: 100%; height: auto;}
:focus {outline:0;}
::-moz-focus-inner {border:0;}
a{outline:none; text-decoration:none; -webkit-tap-highlight-color: rgba(0,0,0,0); transition: all ease 0.4s; -webkit-transition: all ease 0.4s;}
strong{font-weight:700;}
textarea,
select,
input[type="text"],
input[type="button"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="reset"],
input[type="submit"]{-webkit-appearance:none; border-radius: none;}
textarea{overflow: hidden; resize: none;}
.verticalCenter{display:table; width:100%; height:100%;}
.verticalInner{display:table-cell; vertical-align:middle;}
::-webkit-input-placeholder{color:#000; opacity:1;}
:-moz-placeholder{color:#000; opacity:1;}
::-moz-placeholder{color:#000; opacity:1;}
:-ms-input-placeholder{color:#000; opacity:1;}
select option{color: #000;}
select::-ms-expand {display: none;}
select:focus::-ms-value{background: none; color:#000}
html{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
*, *:before, *:after{-webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit;}
h1,h2,h3,h4,h5,h6{margin:10px 0 15px;}
h1{font-size:36px;}
h2{font-size:30px;}
h3{font-size:24px;}
h4{font-size:22px;}
h5{font-size:20px;}
h6{font-size:18px;}
p{margin: 0 0 10px 0;}
.container{max-width:1000px; margin: 0 auto; padding: 0 15px;}
.fancyText1{width: 100%; float: left; border-left: 2px solid #000; padding: 0 0 0 9px; margin: 0 0 35px 0;}
.fancyText1 p{color: #000; font-size: 12px; line-height: 12px; text-transform: uppercase; margin:2px 0 0 0;}
.fancyText1 h3{margin: 0 0 1px 0; font-weight: 700; text-transform: uppercase; color: #000; font-size: 16px; line-height: 18px;}


/*==========================Buttons=======================*/
.btn1{display: inline-block; vertical-align: top; text-transform:uppercase; font-size: 12.86px; color: #000; font-weight: 700; position: relative; padding: 0 0 2px 0;}
.btn1:after{transition: all ease 0.5s; content: ""; height: 2px; position: absolute; bottom: 0; left: 0; width:0; background: #e7b220;}
.btn1:hover:after{width: 100%;}
.btn1:hover{text-decoration: none;}



/*=====================Header=====================*/
.header{width: 100%; float: left; position: relative;}
.headerInner{margin: 0  0 54px 0;}
.header .container{max-width: 1000px}
.headerTop{width: 100%; float: left; position: relative; background: #000; padding: 14px 0 12px;}
.headerTop .htlogo{position: absolute; top:10px; left: 50%; margin: 0 0 0 -169.5px;}
.brandstudio{float: right; display: flex;}
.createdText{float: left; width: 71px; display: table-cell; vertical-align:middle; font-size: 10px; font-weight: 600; color: #fff; text-transform: uppercase;}
.brandstudioLogo{display: table-cell; vertical-align:middle; overflow: hidden;}
.brandstudioLogo img{max-width: 77px; float: left;}
.headerBottom{background: #f8f023; width: 100%; float: left; position: relative;}
.headerBottom .container{position: relative;}
.mainnav{float: right; margin:0; transition: all ease 0.4s; -webkit-transition: all ease 0.4s; -moz-transition:all ease 0.4s; -ms-transition: all ease 0.4s; left:-200%; top:0; position: fixed; z-index: 1; height: 100%; width: 80%; background: rgba(0,0,0,0.95); overflow-y: auto;}
.mainnav ul{list-style: none; margin:0; padding: 0;}
.mainnav ul li {padding:0; position: relative; width: 100%; float: left;}
.mainnav ul li a{display:block; font-weight:500; color:#efefef; font-size: 15px; text-decoration: none; padding: 15px; border-bottom: 1px solid rgba(239,239,239,0.08);}
.mobileNav{width: 40px; height: 40px; border-radius: 50%; background: #e7e5e6; position: absolute; top: 50px; right:10px; z-index:6; display: none;}
.menuicon{position:relative; margin:0; top: 0; right: 0; width:40px; height:40px; cursor: pointer; z-index: 6;}
.hamburger{width:14px; height: 2px; background-color: #807f7f;  -webkit-transition:.5s; -o-transition: .5s; transition:.5s; position: absolute; top: 50%; left:50%; margin:-6px 0 0 -7px;}
.active .hamburger{margin: -9px 0 0 -7px;}
.hamburger:before,
.hamburger:after{content: ""; position: absolute; width: 14px; height: 2px; background-color: #807f7f; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; left:50%; margin: 0 0 0 -7px;}
.hamburger:before{top:5px;}
.hamburger:after{top: 10px;}
.menuicon.active .hamburger{-webkit-box-shadow: 0 2px 5px rgba(0,0,0, 0) ; box-shadow: 0 2px 5px rgba(0,0,0, 0) ; background-color: rgba(0,0,0,0);}
.menuicon.active .hamburger:before{top: 8px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
.menuicon.active .hamburger:after{top: 8px;-webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg);}
.menurotate{width: 32px; height: 32px; position: absolute; left: 4px; top:4px; background: url(../images/menu.png) no-repeat; -webkit-animation:rotating 10s linear infinite; animation:rotating 10s linear infinite;}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


/*=====================Banner=====================*/
.herobanner{width: 100%; float: left; position: relative; background: #e9e7e8; text-align: center;}
.heroCont{width: 100%; top: 0; left: 0; height: 100%; position: absolute;}
.heroCont .container{height: 100%; text-align: left;}
.herobanner h1{font-family:'Convection-Bold'; color:#e7b220; font-size:122px; margin:-50px 0 0 -8px; line-height:95px; animation-name:bannertitle; animation-duration:.8s;  animation-delay:.5s;  animation-fill-mode:forwards; opacity:0; animation-timing-function:ease-out;}
@keyframes bannertitle {
  0% {
    -webkit-transform: translateX(-40px);
    transform: translateX(-40px);
    opacity:0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity:1;
  }
}
@-webkit-keyframes bannertitle {
  0% {
    -webkit-transform: translateX(-40px);
    transform: translateX(-40px);
    opacity:0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity:1;
  }
}
.herobanner h2{color: #20201e; font-size: 14.92px; text-transform: uppercase; margin: 20px 0 0 0; animation-name:subtitle; animation-duration:.8s;  animation-delay:.5s;  animation-fill-mode: forwards; opacity: 0; animation-timing-function: ease-out;}
@keyframes subtitle {
  0% {
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
    opacity:0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity:1;
  }
}
@-webkit-keyframes subtitle {
  0% {
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
    opacity:0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity:1;
  }
}
.herobanner h2 a{text-decoration: none; color: #0074bc; font-weight:800; font-size: 16px;}
.herobanner h2 a:hover{color: #025487;}
.herobanner .verticalInner{position: relative;}
.herobanner img{width: 100%; float: left;}
.mobile-banner{display: none;}


.pageContent{width: 100%; float: left; position: relative; background: #e6e4e5;}
.callOut{width: 100%; float: left; position: relative; padding: 20px 0;}
.callOut p{font-size: 20px; color: #000000;}
.articlesList{width: 100%; float: left; position: relative;}
.articlesListIn{width: 100%; float: left; position: relative; display: flex; flex-wrap: wrap;}
.articlePost{width: 32%; float: left; background: #fff; padding: 13px 25px 15px 25px; margin: 0 2% 19px 0;}
@media(min-width:991px){
  .articlePost:nth-child(3n+3){margin: 0 0 19px 0;} 
}
.articlePost h4{font-size: 16.53px; font-weight: 700; color: #292b2d; margin: 0;}
.articlePost h4 a{color: #292b2d; word-wrap: break-word;}
.articlePost h4 a:hover{text-decoration: none; color:#e7b220;}
.articlePost .articleThumb{width: 100%; float: left; position: relative; overflow: hidden; margin: 12px 0 9px;}
.articlePost .articleThumb img{width: 100%; float: left; transition: all ease 0.5s;}
.articlePost .articleThumb:hover img{transform: scale(1.1);}
.articlePost p{font-size: 12px; clear: both; line-height: 14px;}
.ads{width: 100%; float: left; position: relative; text-align: center; margin: 4px 0 23px 0;}
.desktopAd{display: inline-block; vertical-align: top;}
.mobileAd{display: inline-block; vertical-align: top; display: none;}
.desktopAd img,
.mobileAd img{display: inline-block; vertical-align: bottom;}


/*=====================Footer=====================*/
.footer{width: 100%; float: left; position: relative; background: #474753; padding: 12px 0 11px;}
.footer .copyright{font-size: 12px; color: #fff; display: inline-block; vertical-align: top; margin:7px 0 0 0;}
.mobileview{display: none!important;}

.customShares{position: fixed; top:35%; left: 0; z-index:2;}
.customShares ul{list-style: none; margin: 0; padding: 0;}
.customShares ul li img{display: inline-block; vertical-align: bottom;}
.customShares ul li.fb-share{background: #006ab2;}
.customShares ul li.twitter-share{background: #00b1f0;}
.customShares ul li.linkedin-share{background: #007bb6;}
.customShares ul li.whatsapp-share{background: #00d979;}
.customShares ul li.whatsapp-share-mobile{display: none;}
.customShares ul li{transition:all ease .4s;}
.customShares ul li:hover{opacity: .8;}
.customShares ul li a{display: block;}


/*==========================Responsive=======================*/
@media(max-width: 1199px){
.visible-sm{display: block;}
.hide-sm{display: none;}
.callOut p{font-size: 14px;}
.articlePost p{font-size: 13px; line-height: 16px;}
.herobanner h1{font-size: 60px; line-height: 50px; margin: -50px 0 0 -3px;}
.herobanner h2{margin: 10px 0 0 0;}


}


@media(max-width:990px){
.articlePost{width: 49%; margin: 0 2% 15px 0; padding: 15px;}
.articlePost:nth-child(2n+2){margin: 0 0 15px 0;}


}


@media(max-width: 767px){
.visible-xs{display: block;}
.hide-xs{display: none;}
.mainnav.mainnavActive{left: 0;}
.mobileNav{display: block;}
.headerTop {padding: 10px 0;}
.header .brandstudio{display: none;}
.headerTop .htlogo{position: static; width: 100%; float: left; margin: 0; text-align: center;}
.headerTop .htlogo img{max-width: 213px; display: inline-block; vertical-align: top;}
.herobanner h1 {font-size: 62px; margin: 0 0 0 -3px; line-height:52px;}
.herobanner h2{margin: 15px 0 0 0;}
.desktop-banner{display: none;}
.mobile-banner{display: inline-block; vertical-align: top;}
.heroCont{position: static; float: left; padding: 32px 0 17px 0;}
.footer{background: #fff; padding: 26px 0 77px 0;}  
.footer .copyright{display: block; text-align: center; border-top: 1px solid #999999; width: 100%; float: left; color: #464752; font-weight: 600; padding: 26px 0 0 0; margin: 35px 0 0 0;}
.footer .brandstudio{width: 100%; text-align: center; display: block;}
.footer .createdText{width: 100%; float: left; text-align: center; font-size: 12px; color: #464752; text-indent: -39px;}
.footer .brandstudioLogo{width: 100%; float: left; text-align: center; margin: 3px 0 0 0;}
.footer .brandstudioLogo a{display: inline-block; vertical-align:top;}
.mobilehide{display: none!important;}
.mobileview{display: block!important;}
.brandstudioLogo img{max-width: 109px;}
.desktopAd{display: none;}
.mobileAd{display: inline-block;}
.customShares ul li{text-align: center;}
.customShares{top: inherit; bottom: 0; width: 100%;}
.customShares ul li{width: 25%; float: left;}
.customShares ul li.whatsapp-share{display: none}
.customShares ul li.whatsapp-share-mobile{display: block;}

}



@media(max-width: 479px){
.articlePost{width: 100%; margin: 0 0 15px 0;}
.articlesListIn{display:block;}

}