@charset "utf-8";
/* CSS Document */

*{ margin:0; padding:0;}
img { border:none;}
body { font-family:Arial, Helvetica, sans-serif; font-size:12px;}
a:link, a:active, a:visited { text-decoration:none;}


@font-face {font-family: 'Hum521b';
    src: url('../fonts/Hum521b.eot');
    src: url('../fonts/Hum521b.eot') format('embedded-opentype'),
         url('../fonts/Hum521b.woff2') format('woff2'),
         url('../fonts/Hum521b.woff') format('woff'),
         url('../fonts/Hum521b.ttf') format('truetype'),
         url('../fonts/Hum521b.svg#Hum521b') format('svg');
}

@font-face {
     font-family: 'hum521l';
    src: url('../fonts/hum521l.eot');
    src: url('../fonts/hum521l.eot') format('embedded-opentype'),
         url('../fonts/hum521l.woff2') format('woff2'),
         url('../fonts/hum521l.woff') format('woff'),
         url('../fonts/hum521l.ttf') format('truetype'),
         url('../fonts/hum521l.svg#hum521l') format('svg');
}

@font-face {
    font-family: 'Hum521n';
    src: url('../fonts/Hum521n.eot');
    src: url('../fonts/Hum521n.eot') format('embedded-opentype'),
         url('../fonts/Hum521n.woff2') format('woff2'),
         url('../fonts/Hum521n.woff') format('woff'),
         url('../fonts/Hum521n.ttf') format('truetype'),
         url('../fonts/Hum521n.svg#Hum521n') format('svg');
}


.clear { clear:both;}

.wrapper { width: 100%;}
.container { width: 100%; max-width:1280px; margin: 0 auto;}
.Logo { position:relative; width:131px; padding: 30px 0;}
.Logo a { /*position:absolute; top:20px; left:40px;*/}

.error{color:#FF0000;font-size:12px; display:inline-block; padding:3px 0 3px 21px;}

/* banner start */

.bannerleft { float:left; width:66%; }
#bannerH {background: url(../images/bannerbg2.jpg) #ffffff no-repeat scroll top center;  width: 100%; min-height: 800px;   /*position:relative;*/}
#thankyou #bannerH {background: url(../images/bannerbgthank.jpg) #ffffff no-repeat scroll top center;  width: 100%;   /*position:relative;*/}

.img_caption { /*float:left; width:628px*/; }
.bannerimgrelative { position: relative; top: 120px; left: 9px;}
 

.leftpanH {/*width: 55%; float:left; position: absolute; bottom:-15px;*/ padding-left: 10px; margin-bottom:30px;}

.leftpanH p { font-size:20px; /*padding: 7px 0 7px 34px;*/ padding:4px 0 4px 5px; font-family: 'Hum521n';  color:#3d3d3d;}
.leftpanH ul {margin-left:60px;}
.leftpanH  li {color:#3d3d3d;  font-size:18px;}
.leftpanH  li p { font-size:20px; padding: 6px 0 2px 5px; font-family: 'Hum521n';  color:#3d3d3d; }


#thankyou .leftpanH p {  padding:7px 0px;}

.leftpanH h3 {font-family:'Hum521n';  line-height:30px; font-size:24px; color:#3d3d3d; font-weight:bold;  padding:25px 0 5px 0px; }

.parent_infoH { max-width:750px; /*max-width:580px;*/ float:left;  /* margin-top:9%;*/}
#thankyou .parent_infoH { margin-top:1%;}

/* Banner end */

/* form start */
.formsection {/*float:right; position:relative; width:38%;*//*max-width:360px;*/ margin-top:0; margin-right: 7px; font-family:'Hum521n'; font-size:15px; position:absolute; right:20px;  }

#thankyou .formsection { margin-top:70px;  }

.formsectionthanks {float:right; position:relative;/* width:38%;*//*max-width:360px;*/ margin-bottom:150px; margin-right: 7px; font-family:'Hum521n'; font-size:15px  }

.main-formH {
	background: #fff;
	border: none;
	border-radius: 15px;
	/*position: absolute;*/
	left: 0px;
	border: 1px solid #ecece3;
}
.main-formH h2 {background:#ecece3;text-align:center; padding:20px 10px 10px;font-size:24px;border:2px solid #ecece3;border-radius: 15px 15px 0px 0px;margin-bottom: 15px; color:#737373;   }
.inputGlobal { padding: 15px 2% 15px 3%; width:95%;/* max-width: 278px; */   border: solid 1px #c8c8c8; border-radius: 10px;  font-family: 'Hum521n'; font-size: 16px; position: relative;  resize: none; color:#737373; }
.textareasectionH {border: medium none !important; margin: 5px 3px 12px 0px; min-width: 92%; padding: 0px 15px 0px 15px;  width: 90%; font-size: 14px;}
#contact button[type="submit"] {cursor: pointer; width: 100%; border: none;background: #ffcb08; color: #000; margin: 5px 0 15px; padding: 15px 10px; font-size: 18px; border-radius: 8px; font-family:'Hum521n'; text-transform:uppercase;   }

/* form end */

.clientsH { margin:50px auto 20px; width:872px;}
.clientsH h1 { text-align:center; font-size:35px; font-family: 'Hum521n'; padding:30px 0 40px 0px; font-weight:normal; }
.clientlisT   {padding: 0;    margin: 0 0 35px 0;    list-style: none;    text-align: center; }
.clientlisT li {display: inline-block;    width: 24%;    padding: 10px 0px 40px;    vertical-align: middle;}
.seo_playbook { width:100%; background:#ffffff; padding:90px 0 90px 0px;}
.seo_playbook h1 { text-align:center; font-family: 'Hum521n'; font-weight:normal; padding:0px 0 25px 0px; font-size:35px;}
.seo_playbook h2 { padding:20px 0 10px 0px;}
.seo_playbook h3 { font-size:17px}
.seo_playbook p { font-size:18px; color:#282828; line-height:30px; padding:10px 0 7px 0px;  font-family: 'Hum521n';}



.playbooklist li {width: 200px; height: 200px;border-radius: 50%;background: #f2f2eb; text-align: center;display: inline-block; vertical-align: middle; margin: 30px 30px 0; padding: 25px 15px 20px 15px; box-sizing: border-box;}
.playbooklist { text-align:center; }

.icon {width: 104px;  height: 77px; display: inline-block; background-size: contain; position: relative; top:7px;}
.playbooklist li h3 {    font-size:20px;    padding: 2px 0px 15px 0px;    color: #737373;  font-family: 'Hum521n'; font-weight:normal; }
.playbooklist li.lastnomragin_right { margin-right:0px;}


.why_choose { width:94%; padding:80px 3% 65px 3%; background:#ffcb08;}
.why_choose h1 { text-align:center; font-size:35px; font-family: 'Hum521n'; padding:0px 0 15px 0px; font-weight:normal; }
.why_choose p { font-size:18px; color:#282828; line-height:30px; padding:15px 0 15px 0px;  font-family: 'Hum521n';}


#footer{ font-size:18px; background:#f2f2eb;  color: #737373; font-family: 'Hum521n'; width:94%; padding:24px 3% 35px 3%; }
.leftPara {float: right; display: inline;}
.rightpara {float: left;display: inline;}
.leftPara a {color:#737373; text-decoration:underline;}
.rightpara a { color:#737373; }



 /***********************************
    BUTTON EFFECT 
************************************/ 

 .color-bg {   /*  display: none;*/     background-color: #ffca08; }
 .color-bg {
    -webkit-transition: width .4s ease;
    -moz-transition: width .4s ease;
    -ms-transition: width .4s ease;
    -o-transition: width .4s ease;
    transition: width .4s ease;
    width: 0;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
}
.viewMore a:hover .color-bg {   display: block;   width: 100%; }
 
 

 
.viewMore{ text-align: left; }
.viewMore a { display: inline-block; font-size: 16px; font-weight:bold; color: #000000; background-color: #ffca08; padding: 5px 40px; cursor: pointer; position:relative; z-index:1;}
.viewMore a:hover,.getInTouch a:hover{color:black;}
.viewMore a .color-bg,.getInTouch a .color-bg{z-index:-1;}

.clientlisT .owl-prev {
    position: absolute;
    left: -10px!important;
    top: 50%;
    background: url(../images/prev.png) center no-repeat;
    display: block!important;
    height: 73px;
    width: 36px;
    margin-top: -55px;
    color: transparent;
}
.clientlisT .owl-next {
    position: absolute;
    right: -10px!important;
    top: 50%;
    background: url(../images/next.png) center no-repeat;
    display: block!important;
    height: 73px;
    width: 36px;
    margin-top: -55px;
    color: transparent;
}
 
.thankYouMsg{ text-align: center; }
.online {font-family: 'Hum521b', Arial, Helvetica, sans-serif; font-size: 55px; color: #aaaaaa; text-align: center; letter-spacing: -1px;}
.thankYouMsg p { font-size: 18px; color: #3d3d3d; padding: 10px;}
.thankYouMsg button{
    cursor: pointer;
    width: 90%;
    border: none;
    background: #ffcb08;
    color: #000;
    margin: 18px 0 15px;
    padding: 15px 10px;
    font-size: 18px;
    border-radius: 8px;
    font-family: 'Hum521n';
    text-transform: uppercase;
}
.thankYouMsg a{ outline: none; }
.visitSite{ width: 100%; max-width: 200px; }
.visitSite:hover{ background: #cecec0;}
 


.scrollTopBtn{ position: fixed; right: 20px; bottom: 30px; display: none; cursor: pointer; }

@media only screen and (max-width: 1280px){
.bannerleft { margin-left:30px }
.Logo {padding: 30px; }
}

@media only screen and (max-width: 1250px){
.formsection { float:left;    width:90%;    margin: 0 5%;    top:0px;    min-width: 290px; position:relative; right:initial; }
.textareasectionH {width:97%;}
#thankyou .bannerleft { float:none; margin:0 auto; }
#thankyou .formsection { float:none; margin:0 auto; width:360px; }
 
.clientlisT li  { vertical-align: middle; width: 25%;display: inline-block; }

.formsectionthanks { margin: 10px auto; max-width:320px; position:relative;/* width:38%;*//**/ float:none; margin-bottom:30px;}
.main-formH { position:relative;}
.parent_infoH { float:none; width:auto;}
.textareasectionH { width:90%; margin:5px auto 12px;}
/*.main-formH h2 { border-radius:0px;}*/


}

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

.bannerleft { float:none; width:90%; margin: 0 auto; }


.clientlisT li  { vertical-align: middle; width:34%;display: inline-block; }
.clientsH { max-width:100%; margin:0;}

#bannerH {background: url(../images/mobile-banner.jpg) #fdfefe no-repeat scroll top center; background-size:contain;}
.img_caption { width:80%;}
.parent_infoH { margin:0;}


}
 



@media only screen and (max-width:620px){
.leftPara { float:none; width:100%; text-align:center; display:block; padding-bottom:20px}
.rightpara {float:none; width:100%; text-align:center; display:block;}
.clientlisT li { width: 47%;}
}

@media only screen and (max-width:540px){
.leftpanH { padding:0;}
.leftpanH h3{ font-size:18px; } 
.leftpanH p, .leftpanH li p { font-size:15px;}
.clientsH {
    margin: 50px auto 20px auto;
    width: 80%;
    max-width: 872px;
}
}
@media only screen and (min-width: 1400px){
.formsection{ right: calc((100% - 1360px)/2); }
}