/*
Theme Name:     Optimizer-Custom
Description:    
Author:         Thanh Dang
Template:       optimizer_pro-2

(optional values you can add: Theme URI, Author URI, Version, License, License URI, Tags, Text Domain)
*/


/* ==========================================================================
    General
    ========================================================================= */

.single_wrap {
    width: 100%;
    float: none;
}

#mega-menu-wrap-product-menu #mega-menu-product-menu{
	padding-left: 8em;
	margin-top: 1em;
}

#mega-menu-wrap-product-menu #mega-menu-product-menu > li.mega-menu-item > a.mega-menu-link {
	font-size: 1.2em;
	font-family: Poppins;
	color: #fff !important
}

#mega-menu-wrap-product-menu .mega-menu-toggle .mega-toggle-block-right{
	float: left;
}




/* ==========================================================================
    Product page
    ========================================================================= */

#panel-2-0-0-0{
	background: url("/wp-content/uploads/2018/03/produt-img-07-march.png") no-repeat 50% 100%;
	background-size: 68%;
	height: auto !important;
	padding-bottom: 39%;
	position: relative;
}

#panel-2-0-0-1, #panel-2-0-0-2, #panel-2-0-0-3, #panel-2-0-0-4,
#panel-1832-0-0-1, #panel-1832-0-0-3{
	margin-top: 2em;
	height: auto !important;
}

#product .fp-tableCell{
	height: auto !important;
}

.supported-tech{
	margin-top: 4em;
}

.wpls-logo-showcase {
	margin: auto!important;
}

.product-header {
	text-align: center;
}

.product-header .header-title h2{
	color: #2f3235;
	line-height: 1.2em;
	padding: 0 5%;
}

#product .fp-tableCell {
    display: block;
}

#product .fp-slidesNav.bottom {
    bottom: 0 !important;
}

/* ==========================================================================
    Subpage
    ========================================================================= */

/* Header Section */

.sub-header{
	max-width: 100%;
}

.sub-header .img-col{
	max-width: 100%;
	margin-top: 3em;
}

.sub-header .img-col img{
	max-width: none;
	width: 700px;
	z-index: 10;
	box-shadow: -1px 92px 99px -62px rgba(0,0,0,.26),0 25px 65px 0 rgba(0,0,0,.08);
	overflow-x: hidden;
}	

 .audit .sub-header .img-col img{
	width: 400px;
}

.sub-header .text-col {
	z-index: 2;
	line-height: 0
}

.sub-header .main-text{
	margin-top: 10%;
	padding-right: 5%;
}

.sub-header .main-text h2{
	font-size: 3em;
	line-height: 1.4;
	color: #2f3235;
	margin-bottom:0;
	font-weight: 600;

}

.sub-header .sub-text{
	width: 80%;
}

.sub-header .sub-text p{
	line-height: 1.4;
	text-align: justify;
    text-justify: inter-word;
	font-weight: 400;
}

.sub-header .btn{
	margin-top: 1em;
	margin-bottom: 2em;
}

.sub-header .video-col{
	margin-top: 10%;
	margin-left: 5%;
}

.sub-header .condition-link{
	line-height: 1.5;
	margin-top: 1em;
}
/* CTA Section */

.sub-cta {
	margin-top: 6em;
	max-width: 100%;
}
.cta-text {
	margin-top: 8%;
	z-index: 1;

}

.cta-text .main-text h3{
	line-height: 1.2;
	font-size: 2em;
	color: #2f3235;
	font-weight: 700;
	text-align: right;
}

.cta-arrow{
	margin-top: 12%;
	max-width: 100%;
}

.cta-arrow .line{
	float:left;
	width: 350px;
	border-top: 3px solid #ed3139;
	background: transparent;

}

.cta-arrow .head {
	float:left;
	width: 25px;
	height: 25px;
	background:transparent;
	border-right: solid #ed3139 3px;
	border-bottom: solid #ed3139 3px;
	transform: rotate(-45deg) translate(-12px,-28.5px);
	-ms-transform: rotate(-45deg) translate(-12px,-28.5px);
	-webkit-transform: rotate(-45deg) translate(-12px,-28.5px);
}

.rec-shape{
	width: 300px;
	height: 250px;
	transform: translate(185px,-210px);
	-ms-transform: translate(185px,-210px);
	-webkit-transform: translate(185px,-210px);
	border: solid #ed3139 4px;
	background: transparent;	
	float: right;
	position: relative;
	z-index: -1;	
	margin-bottom: -15%;
}

.rec-shape:after {
    content: '';
    display: block;
    position: absolute;
	width: 8px;
    height: 100px;
    top: 75px;
    left: -6px;
    background-color: #fff;
	z-index: -1;
}

/* Feature Section */

.sub-feature {
	margin-left: 7%;
}

.sub-feature .section-title h2{
	margin-bottom: 0;
	text-align: left;
}

.sub-feature .section-title .divider{
	margin: 0;
}

.sub-feature .list-text{
	width: 80%;
}

.sub-feature .list-text .main-feature{
	list-style: none;
	font-family: Poppins;
	font-size: 1.1em;
	font-weight: 600;
	border-bottom: 1px solid #423b3d;
	padding: 27px 0 27px 10px;
	padding-left: 4em;
    text-indent:-4em;
}

.sub-feature .list-text .number {
	color: #ed3139;
	font-size: 1.6em;
	font-weight: 600;
	margin-right: 25px;
	text-align: right;
	position: relative;
	top: 7px;
}

.sub-feature .list-text .inner-feature{
	list-style-type: square;
	color: #ed3139;
	margin-left: 6%;
	margin-top: 10px;
	padding-left: 0;
    text-indent: 0;
}

.sub-feature .list-text .inner-feature span{
	color: #231f20;
	font-family: Poppins;
	font-size: 0.9em;
	font-weight: 500;
}


#sla {
	font-family: Poppins;
	font-size: 1em ;
	color: #231f20;
	font-weight: 500;
	cursor: pointer;
	text-decoration: underline !important;
	margin-left: 50px;

}




/* Process Step Section */

.sub-process{
	max-width: 100%;
	overflow-x: hidden;
}

#process .row{
	margin-right: 0;
}

.sub-process .section-title h2{
	margin-bottom: 0;
	text-align: left;

}

.sub-process .section-title .divider{
	margin: 0;
	width: 170px;

}

.sub-process .text-col{
	margin-left: 7%;
	margin-bottom: 5%;
	margin-top: 3.5em;

}

.sub-process .main-text h3{
	font-size: 3em;
	text-decoration: underline;
	font-weight: 700;
}

.sub-process .process-text{
	width: 90%;
}

.sub-process .process-text li{
	list-style: none;
	font-family: Poppins;
	font-size: 1.2em;
	font-weight: 500;
	margin-bottom: 10px;
	padding-left: 2.7em;
    text-indent:-2.7em;
}

.sub-process .process-number{
	font-family: Poppins;
	font-size: 1.3em !important;
	color: #fff;
	font-weight: 600;
	background-color: #ed3139;
	display: inline-block;
    height: 46px;
    width: 46px;
    line-height: 46px;
    -moz-border-radius: 30px;
    border-radius: 30px;
	margin-right: 20px;
	text-align: center;
	margin-top:20px;
	padding-left: 0;
    text-indent: 0;
}

.sub-process .img-col{
	margin-top: 6%;
	margin-bottom: 5%;
	max-width: 100%;
	float: right;
	padding-right: 0;
}

.sub-process .img-col img{
	min-width: 679px;
}

.sub-process .process-text p{
	font-family: Poppins;
	font-size: 1.5em;
	font-weight: 600;
	
}
.sub-process .register-btn{
	text-indent: 0;
}

.sub-process .btn{
	font-size: 0.9em;
	text-indent: 0 ;
	margin-top: 1em;
	margin-left: 1em;
}

.sub-process .register-input input[name="email"], .sub-header .register-input input[name="email"]{
	color: #2f3235;
	font-size: 0.9em;
	text-indent: 0 ;
	margin-top: 1em;
	border-color: #b3b3b3 ;
	display: block;
}
.sub-process .register-input input[name="email"]{
	margin-left: 1em;
}


.sub-process .condition-link{
	margin-top: 1em;
	margin-left: 1em;
}

.sub-process #condition-checkbox{
	margin-left: 3em;
}

.condition-link span{
	font-size: .8em;
	text-indent: 0;
}

.condition-link a{
	text-decoration: underline;
	font-weight: 600;
}

.sub-process  ::-webkit-input-placeholder {color: #b3b3b3;}
.sub-process ::-moz-placeholder {color: #b3b3b3;}
.sub-process :-moz-placeholder {color: #b3b3b3;}
.sub-process  ::-ms-input-placeholder {color: #b3b3b3;}
.sub-process  :-ms-input-placeholder {color: #b3b3b3;}

/* For Enterprise page */

.sub-process .process-text .inner-list li{
	list-style-type: square;
	color: #ed3139;
	margin-left: 6%;
	margin-top: 10px;
	padding-left: 0;
    text-indent: 0;
}

.sub-process .inner-list li .text{
	color: #231f20;
	font-family: Poppins;
	font-size: 0.7em;
	font-weight: 500;

}

.sub-process .hook{
	margin-top: 20px;
	margin-left: 20px;
}

.sub-process .hook span{
	color: #ed3139;
	font-size: 1.5em;
}
.page-id-256 .sub-process .img-col, .page-id-191 .sub-process .img-col{
 margin-top: 10%;
}

/* ==========================================================================
    Price calculator
    ========================================================================= */

#panel-1833-0-0-4{
	background: linear-gradient(
    to bottom, 
    #fff 0%, 
    #fff 50%, 
    #f1f2f2 50%, 
    #f1f2f2  100%
  );
	margin-top: 1.5em;
}


.price-calculator{
	width: 45%;
	margin: 1.5em auto;
	float: none;
	font-family: Poppins;
	position: relative;
	text-align: center;
	box-shadow: -1px 92px 99px -62px rgba(0,0,0,.26),0 25px 65px 0 rgba(0,0,0,.08);
	background-color: #fff;
	padding-top: 2em;
	padding-bottom: 1em;
}

.price-calculator .label-above .nf-field-label{
	display: block;
	margin: auto;
	margin-bottom: 10px;
	color: #ed3139;
}

.price-calculator .field-wrap select{
	width: 50% !important;
}

.price-calculator hr {
	width: 70%;
    border-top: 1px solid #d3d7dc;
}


#price-result{
	color: #ed3139;
	font-size: 2em;
	text-align: center;
	font-family: Poppins;
	font-weight: 600;
	margin: 0 auto;
}

/* ==========================================================================
    SG-Audit
    ========================================================================= */
.sg-audit .sub-header .img-col img {
    width: 500px;
}
.sg-audit .sub-header .img-col{
	margin-left: 8%;
}

.ex-use-case{
	padding: 2em 6em;
}

.ex-row{
	margin-top: 2.5em;
}
.ex{
	text-align: center;
}
.ex:not(.ex-4){
	margin-right: 1.5em;
}

.ex-icon .lnr{
	font-weight: 600;
	font-size: 1.8em;
	color: #ee3139;
}

.sg-audit .sub-feature p{
	margin-left: 50px;
	padding-right: 2em;
}

.testi-logo{
	text-align: center;
}

.testi-logo img{
	vertical-align: middle;
	padding: 1em;
}

.testimonial{
	margin: 2em 0;
}

.testimonial .text{
	text-align: center;
	padding: 1em
}
/* ==========================================================================
    Proposal form
    ========================================================================= */

#panel-1832-0-0-4{
	background: linear-gradient(
    to bottom, 
    #fff 0%, 
    #fff 50%, 
    #f1f2f2 50%, 
    #f1f2f2  100%
  );
	margin-top: 1.5em;
}

.enterprise-info{
	width: 65%;
	margin: 1.5em auto;
	float: none;
	font-family: Poppins;
	position: relative;
	box-shadow: -1px 92px 99px -62px rgba(0,0,0,.26),0 25px 65px 0 rgba(0,0,0,.08);
	background-color: #fff;
	padding: 2em;
}

.enterprise-info input[type="button"]{
	width: 100% !important;
}
.enterprise-info{
	margin: 5.5em auto;
}