CSS for landing pages

style.css

/* start langind page banner offers */
@media (min-width: 790px) {
	.page-sec1 {
		margin-top: 35px;
	}
}
.page-sec1 {
	float:left;
	width:100%;
	box-sizing: content-box;
	position:relative;
}
.page-sec1 img{
	float:left;
	width:100%;
	max-width: 100% !important;
}
.banner-text{
	float:left;
	position: absolute;
	left: 50px;
	bottom:16px;
	text-align: left;
}
.banner-text h2{
	float:left;
	width:100%;
	color: #276a58;
	font-size: 47px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	line-height: 47px;
	margin: 0 0 10px 0;
}
.banner-text h3{
	float:left;
	width:100%;
	color: #276a58;
	font-size:28px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	line-height: 28px;
	margin: 0 0 10px 0;
}
.banner-text ul{
	margin:0 0 0 -27px;
	padding: 0;
}
.banner-text ul li{
	float:left;
	padding: 0 72px 0 27px;
	color: #276a58;
	font-size:24px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	line-height: 72px;
	list-style: none;
	background:url(images/arrow.png) no-repeat 0 0;
}
.banner-text ul li:last-child{
	padding-right:0;
}
.page-sec2 {
	float:left;
	width:100%;
	text-align: center;
	padding: 20px 0 40px 0;
	position:relative;
}
.page-sec2 h4, .page-sec2 h1 {
	color: #000;
	font-size: 24px;
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 600;
	line-height: 28px;
	margin: 0 0 20px 0;
}
.page-sec2 > p{
	color: #000;
	font-size: 14px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	line-height:18px;
}
.page-row{
	margin:0 -22px;
}
.page-col4{
	float:left;
	width:33.333%;
	padding: 0 22px;
	margin: 0 0 40px 0;
}
body.page-id-1201 .page-col4 {
	padding: 0 12px;
}
.col-inner{
	float:left;
	width:100%;
	background: #0b4170;
	padding: 20px;
	color: #fff;
	height: 426px;
}
body.page-id-1191 .col-inner {
	height: 580px;
}
body.page-id-1201 .col-inner {
	height: 608px;
}
#offer-form-content form ::-webkit-input-placeholder {
	/* Chrome/Opera/Safari */
	color: #0b4170;
}
#offer-form-content form ::-moz-placeholder {
	/* Firefox 19+ */
	color: #0b4170;
}
#offer-form-content form :-ms-input-placeholder {
	/* IE 10+ */
	color: #0b4170;
}
#offer-form-content form :-moz-placeholder {
	/* Firefox 18- */
	color: #0b4170;
}
@media (min-width: 900px) {
	body.page-id-1201 .col-inner {
		height: 460px;
	}
}
@media (max-width: 768px) {
	body.page-id-1201 .col-inner {
		height: auto;
	}
	body.page-id-1191 .col-inner {
		height: auto;
	}
}
.col-inner h5{
	text-transform: none;
	letter-spacing: initial;
	color: #fff;
	font-size: 18px;
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 600;
	line-height: 22px;
	border-bottom: solid 1px #ffffff;
	padding: 0 0 10px;
	margin: 0 0 6px 0;
}
.col-inner p{
	font-size: 14px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	line-height:18px;
	color: #fff;
}
.col-inner ul{
	margin: 0;
	padding: 0 0 0 13px;
	text-align: left;
}
.col-inner ul li{
	font-size: 14px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	line-height:28px;
	margin: 0;
	color: #fff;
}
.col-inner.last-box ul li {
	line-height: 21px;
}
/* contact fomr inputs */
#offer-form-content form input {
	border-radius: 0;
	margin-bottom: 0;
	height: 40px;
}
#offer-form-content input[type="submit"] {
	border-radius: 6px;
	display:inline-block;
	border: none;
	width:185px !important;
	padding: 9.5px 0;
	color: #fff;
	background: #0b4170;
	text-transform: uppercase;
	font-size: 14px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
}
#offer-form-content input[type="submit"]:hover {
	color: #fff;
	background: #444;
}
.form-sec{
	float:right;
	width:310px;
	height:503px;
	margin:-556px 23px 0 0;
	border:solid 2px #0b4170;
	border-radius: 4px;
	padding: 23px 18px 0 18px;
	background: rgba(255, 255, 255, 0.6);
}
.form-img{
	float:left;
	width:100%;
	margin: 0 0 15px 0;
}
.form-sec h2{
	color: #0b4170;
	font-size: 31px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	line-height:31px;
	margin: 0 0 22px 0;
	letter-spacing: initial;
}
/* for invisalign ad */
@media (min-width: 1024px) {
	.page-id-1898 .form-sec h2 {
		color: #fff;
	}
}
.form-row{
	float:left;
	width:100%;
	margin: 0 0 20px 0;
}
.form-input{
	float:left;
	width: 100%;
	background: #fff;
	border: solid 1px #fff;
	height: 40px;
	padding: 0 12px;
	color: #959595;
	font-size: 12px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
}
.wpcf7-not-valid{
	border-color:red !important;
}
.wpcf7-not-valid-tip{
	display:none !important;
}
body div.wpcf7-response-output {
	margin: 0;
	padding: 0;
	font-size: 11px;
	border: none !important;
	float: left;
	margin-top: -13px;
	line-height: 14px;
	width: 100%;
	margin-bottom: 10px;
}
/* specific for theme */
.page-template-offer-template #content-wrap {
	padding: 0 0 ;
}
.page-id-807 .breadcrumb{
	display:none !important;
}
.page-sec1-banner{
	float:left;
	width:100%;
	position:relative;
}
.banner-text2{
	float:left;
	position: absolute;
	left:23px;
	top:63px;
	text-align: left;
}
.white-border {
	border-color:#fff;
}
.banner-text2 h2{
	float:left;
	width:100%;
	color: #276a58;
	font-size: 114px !important;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600 !important;
	line-height: 114px;
	margin: 0 0 20px 0;
}
.banner-text2 h2 span{
	float:left;
}
.banner-text2 h2 i{
	font-style: normal;
	font-size: 52px;
	float:left;
	line-height: 52px;
}
.banner-text2 h2 small{
	font-size: 60px;
	float:left;
	line-height: 60px;
}
.banner-text2 h3{
	float:left;
	width:100%;
	margin: 0 0 30px 0;
}
.banner-text2 ul{
	float:left;
	width:100%;
	margin:0;
	padding: 0;
}
.banner-text2 ul li{
	list-style: none;
	float: left;
	clear: both;
	width: 212px;
	height: 72px;
	background:url(images/bg.png) no-repeat 0 0;
	padding: 0 0 0 28px;
	color: #fff;
	font-size: 36px !important;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600 !important;
	line-height: 72px;
}
.banner-text2 ul li h6{
	font-size:24px !important;
	line-height: 28px;
	padding: 8px 0 0 0;
}
.inner-container img{
	max-width:80%;
}
#why-choose-us-text p {
	padding: 0 30px;
}
@media screen and (max-width: 1024px) {
	.banner-text ul li {
		padding: 0 30px 0 27px;
		font-size: 16px;
	}
	.col-inner {
		height: 434px;
	}
	.form-sec {
		float: right;
		width: 100%;
		height: auto;
		margin:0 0 20px;
		border: none;
		border-radius: 0;
		padding: 25px 30px 0 30px;
		background: #e1e1e1;
	}
	.form-img{
		display:none;
	}
	.page-sec2 {
		padding: 0 0 40px 0;
	}
	.form-sec h2 {
		text-align: left;
	}
	.page-inner {
		padding: 0;
	}
}
@media screen and (max-width: 800px) {
	.form-sec {
		float: right;
		width: 100%;
		height: auto;
		margin:0 0 20px;
		border: none;
		border-radius: 0;
		padding: 25px 30px 0 30px;
		background: #e1e1e1;
	}
	.form-img{
		display:none;
	}
	.page-sec2 {
		padding: 0 0 40px 0;
	}
	.form-sec h2 {
		text-align: left;
	}
	.page-inner {
		padding: 0;
	}
	.banner-text {
		left: 30px;
	}
	.banner-text h2 {
		font-size: 30px;
		line-height: 30px;
	}
	.banner-text h3 {
		font-size: 18px;
		line-height: 18px;
	}
	.banner-text ul li {
		padding: 0 45px 0 24px;
		font-size: 15px;
		background-size: auto 50px;
		line-height: 50px;
	}
	.banner-text ul {
		margin: 0 0 0 -24px;
	}
	.page-sec2 h4, .page-sec2 h1 {
		padding: 0 30px;
		font-size: 18px;
		line-height: 22px;
	}
	.page-row {
		margin: 0;
	}
	.page-col4 {
		float: left;
		width: 100%;
		padding: 0 30px;
		margin: 0 0 30px 0;
	}
	.col-inner {
		height: auto;
	}
	.page-sec2 > p {
		padding: 0 30px;
	}
}
@media screen and (max-width: 479px) {
	.banner-text ul li {
		padding: 0 20px 0 20px;
		font-size: 12px;
		background-size: auto 40px;
		line-height: 40px;
	}
	.banner-text2 h2 {
		font-size: 70px !important;
	}
	.banner-text2 h2 small,.banner-text2 h2 i {
		font-style: normal;
		font-size: 30px;
		float: left;
		line-height: 60px;
	}
}
/* dental implants banner images */
.mobile-banner {
	display: none;
}
@media (max-width: 479px) {
	.desktop-banner {
		display: none;
	}
	.mobile-banner {
		display: block;
	}
}
/* end landing page CSS */