/*
====================================================

* 	[Master Stylesheet]
	
	Template Name 	:  Buildwall
	Version    		:  1.0
	Author     		:  W3Engineers Ltd.
	Author URI 		:  https://themeforest.net/user/w3engineers 

====================================================
	
	TOC
	
	1. PRIMARY STYLES
		RESPONSIVE 
	2. COMMON STYLES
		RESPONSIVE 
		SLOPED SIDE 
	3. GO TOP
	4. SWIPER SLIDER STYLING
		SWIPER SIDED CRONTROL 
		SWIPER TWO SIDED CRONTROL 
		BOTTOM ALIGN 
		RESPONSIVE 
		TOP ALIGN 
	5. PRELOADER STYLING
		
===================================================


/* ---------------------------------
1. PRIMARY STYLES
--------------------------------- */

html { width: 100%; height: 100%; font-size: 100%; overflow-x: hidden; -ms-touch-action: manipulation; touch-action: manipulation; }
	
body { font-size: 16px; font-family: 'Lato', sans-serif; font-weight: 400; margin: 0; word-wrap: break-word; 
	line-height: 1.3; width: 100%; overflow-x: hidden; word-break: break-word; 
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #111; }

h1, h2, h3, h4, h5, h6{ line-height: 1; }

h1, h2, h3, h4, h5, h6, p, ul, li, a { margin: 0; padding: 0; line-height: inherit; font-weight: inherit; }

h1 { font-size: 4.5em; }
h2 {font-size: 3em; font-weight: 300; }
h3 {font-size: 2.5em; font-weight: 300; }
h4 {font-size: 1.5em; }
h5 { font-size: 1.2em; }
h6 { font-size: .95em; }

p,span{ font-size: 1.1em; line-height: 1.6; }

p{ color: #555; }

a{ display: inline-block; cursor: pointer; color: inherit; -webkit-transition: all .25s ease; transition: all .25s ease; }

button{ cursor: pointer; color: inherit; outline: 0; border: 0; box-shadow: none; background: none; 
	-webkit-transition: all .25s ease; transition: all .25s ease; }

input, textarea{ display: inline-block; color: inherit; max-width: 100%; -webkit-transition: all .2s; transition: all .2s; }

a:hover, a:focus, a:active,
button:hover, button:focus, button:active{ text-decoration: none; color: inherit; }

input:focus,
textarea:focus{ box-shadow: 0; outline: 0; border: 1px solid #035ccc; }

ul { margin: 0; }

li { display: inline-block; list-style: none; }

img { height: auto; width: 100%; }

b { font-weight: 600; }

i,span { display: inline-block; }

b.max-bold{ font-weight: 700; }

i{ line-height: 1; }

input{ border: 0; outline: 0; }


/* RESPONSIVE */

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

	h1 { font-size: 4em; }
	h2 {font-size: 2.8em; }
	h3 {font-size: 2.5em; }
	
}

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

    body { font-size: 14px; }
	
	h1 { font-size: 3.5em; }
	h2 {font-size: 2.5em; }
	h3 {font-size: 2.2em; }

}

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

	h1 { font-size: 3em; }
	h2 {font-size: 2.5em; }
	h3 {font-size: 2em; }
	
}


/* ---------------------------------
2. COMMON STYLES
--------------------------------- */

.section{ padding: 100px 0 70px; }

.heading{ text-align: center; margin: 0 auto 80px; }

.pre-heading{ margin-bottom: 5px; letter-spacing: 2px; color: #035ccc; }

.float-left{ float: left; }

.float-right{ float: right; }

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

.full-height{ height: 100%; }

.display-table { display: table; width: 100%; height: 100%; }

.display-table-cell { display: table-cell; vertical-align: middle; }

.width-30{ width: 30%; }
.width-35{ width: 35%; }
.width-40{ width: 40%; }
.width-50{ width: 50%; }
.width-60{ width: 60%; }
.width-65{ width: 65%; }
.width-70{ width: 70%; }

.position-relative{ position: relative; }

.mar-b-0{ margin-bottom: 0px; }
.mar-b-5{ margin-bottom: 5px; }
.mar-b-10{ margin-bottom: 10px; }
.mar-b-15{ margin-bottom: 15px; }
.mar-b-20{ margin-bottom: 20px; }
.mar-b-30{ margin-bottom: 30px; }
.mar-b-50{ margin-bottom: 50px; }

.mar-t-10{ margin-top: 10px; }
.mar-t-20{ margin-top: 20px; }
.mar-t-30{ margin-top: 30px; }
.mar-t-50{ margin-top: 50px; }

.mar-tb-5{ margin-top: 5px; margin-bottom: 5px; }
.mar-tb-10{ margin-top: 10px; margin-bottom: 10px; }
.mar-tb-15{ margin-top: 15px; margin-bottom: 15px; }
.mar-tb-20{ margin-top: 20px; margin-bottom: 20px; }
.mar-tb-30{ margin-top: 30px; margin-bottom: 30px; }
.mar-tb-50{ margin-top: 50px; margin-bottom: 50px; }

.mar-r-20{ margin-right: 20px; }

.btn{ font-size: 1em; letter-spacing: 1px; padding: 14px 25px; border-radius: 100px; border: 0; position: relative; overflow: hidden;
	z-index: 1; box-shadow: 2px 10px 40px rgba(0,0,0,.15);
	background: #fa951f; color: #fff; 
	background: -webkit-linear-gradient(24deg, #fa951f, #ff6a03); background: linear-gradient(24deg, #fa951f, #ff6a03); }

.btn i{ margin-right: 10px; }

.btn:after{ content:''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; opacity: 0;
	background: -webkit-linear-gradient(34deg, #f56d45, #0575E6);  
	background: linear-gradient(34deg, #f56d45, #0575E6); 
	-webkit-transition: all .25s ease-out; transition: all .25s ease-out; }
	
.btn:focus:after,
.btn:hover:after{ opacity: 1; }

.btn:focus,
.btn:hover{ color: #fff; box-shadow: 5px 10px 40px rgba(0,0,0,.15); }

.display-none{ display: none; }

.read-more-link{ position: relative; padding-bottom: 3px; overflow: hidden; }

.read-more-link:before,
.read-more-link:after{ content:''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #999;
	-webkit-transition: all .25s; transition: all .25s; }

.read-more-link:before{ -webkit-transform: translateX(-110%); transform: translateX(-110%);
	-webkit-transition: all .25s .25s; transition: all .25s .25s; }

.read-more-link:hover:before{ -webkit-transform: translateX(0%); transform: translateX(0%); }

.read-more-link:hover:after{ -webkit-transform: translateX(100%); transform: translateX(100%); }

.position-relative{ position: relative; z-index: 1; }


/* BACKGROUNDS */

.gradient-bg{ background: #3acfd5; background: -webkit-linear-gradient(32deg, #3acfd5, #3a4ed5);  
	background: linear-gradient(32deg, #3acfd5, #3a4ed5); }

.gradient-bg-2{ background: #ff5959;
	background: -webkit-linear-gradient(24deg, #ff5959, #ff9102); background: linear-gradient(24deg, #ff5959, #ff9102); }

	
/* GRADIENT LOGOS */
	
.gradient-icon{ height: 90px; width: 90px; background-image: url(../images/Logos.png); background-size: cover; }

.g-icon-customize{ background-position: 0 0; }
.g-icon-design{ background-position: 11% 0; }
.g-icon-flexible{ background-position: 22% 0; }
.g-icon-responsive{ background-position: 33% 0; }
.g-icon-elegenstyle{ background-position: 45% 0; }
.g-icon-mobilefirst{ background-position: 56% 0; }
.g-icon-easyuse{ background-position: 67% 0; }
.g-icon-lightweight{ background-position: 77.5% 0; }
.g-icon-support{ background-position: 89% 0; }
	
	
/* RESPONSIVE */

@media only screen and (max-width: 992px) {
	
	.section{ padding: 80px 0 50px; }

	.heading{ margin: 0 auto 60px; }
	
}

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

	.section{ padding: 50px 0 20px; }
	
	.heading{ margin-bottom: 40px; }
	
	.section .heading .title{ padding: 0; }
	
	.section .heading .display-table-cell{ width: 100%; }
	
	.section .heading{ text-align: center; padding: 0px; }
	
	.section .heading-info,
	.section .heading:after{ display: none; }
  
	.section .heading.heading-right .title{ padding-right: 0px; }
  
}


/* SLOPED SIDE */

.triangle{ position: absolute; top: 0; bottom: 0; left: 0px; right: 0; z-index: -1; overflow: hidden;  }

.triangle-bottom:after{ content:''; position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; height: 150px;
	border-bottom: 150px solid #fff; border-left: 100vw solid transparent; border-right: 0px solid transparent; }
	
.triangle-top:before{ content:''; position: absolute; top: 0; left: 0; right: 0; z-index: 1; 
	border-top: 150px solid #fff; border-right: 100vw solid transparent; border-left: 0px solid transparent; }
	

/* ---------------------------------
3. GO TOP
--------------------------------- */

#back-to-top:focus,
#back-to-top{ height: 45px; width: 45px; line-height: 41px; border-radius: 50px; text-align: center; position: fixed; 
	bottom: 20px; right: 20px; z-index: 1000; font-size: 1.1em; opacity: 0; box-shadow: 2px 10px 30px rgba(0,0,0,.2); 
	background: #fff; border: 2px solid #0575E6; color: #000;
	-webkit-transform: scale(0);  transform: scale(0); 
	-webkit-transition: all 0.3s ease-out;  transition: all 0.3s ease-out; }

#back-to-top:hover{ box-shadow: 2px 5px 20px rgba(0,0,0,.3); background: #0575E6; color: #fff; }

#back-to-top.show{ opacity: 1; -webkit-transform: scale(1); transform: scale(1); }


/* ---------------------------------
4. SWIPER SLIDER STYLING
--------------------------------- */

.swiper-slide,
.swiper-wrapper{ transition-timing-function: cubic-bezier(.1,.54,.23,.99); }


/* SWIPER SIDED CRONTROL */

.swpr-control.one-sided{ height: 60px; line-height: 60px; width: 60px; }

.swpr-control.one-sided .swiper-button-next,
.swpr-control.one-sided .swiper-button-prev{ position: static; height: 100%; width: 50%; float: left; font-size: 1.5em; 
	margin: 0; background: none;
	-webkit-transition: all .2s; transition: all .2s; }


/* SWIPER TWO SIDED CRONTROL */

.swpr-control.two-sided .swiper-button-next,
.swpr-control.two-sided .swiper-button-prev{ position: absolute; top: 50%; height: 42px; width: 42px; line-height: 42px; z-index: 10;
	margin: -20px 0 0; border-radius: 40px; font-size: 1.5em; text-align: center; 
	box-shadow: 2px 5px 30px rgba(0,0,0,.1);
	background: #00F260; color: #fff; 
	background: -webkit-linear-gradient(to right, #0575E6, #00F260);  
	background: linear-gradient(to right, #0575E6, #00F260);
	-webkit-transition: all .2s; transition: all .2s; }

.swpr-control.two-sided .swiper-button-next{ right: 0px; }
.swpr-control.two-sided .swiper-button-prev{ left: 0px; }


/* BOTTOM ALIGN */

.swpr-control.bottom-align{ position: absolute; bottom: -30px; left: 50%; margin-left: -40px; height: 30px; line-height: 30px; 
	width: 80px; z-index: 10; }

.swpr-control.bottom-align:after{ content:''; position: absolute; left: 50%; width: 1px; top: 5px; bottom: 5px; background: #aaa;
	transform: rotate(20deg); }

.swpr-control.bottom-align .swiper-button-next,
.swpr-control.bottom-align .swiper-button-prev{ position: static; height: 100%; width: 50%; float: left; font-size: 1.8em; 
	text-align: center; margin: 0; background: none; color: #666;
	-webkit-transition: all .2s; transition: all .2s; }
	

/* RESPONSIVE */

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

	.swpr-control.bottom-align{ bottom: -30px; }
}


/* TOP ALIGN */

.swpr-control.top-align{ position: absolute; top: -50px; left: auto; right: 0; margin-left: 0px; height: 30px; line-height: 30px; 
	width: 80px; z-index: 10; }

.swpr-control.top-align .swiper-button-next,
.swpr-control.top-align .swiper-button-prev{ position: static; height: 100%; width: 50%; float: left; font-size: 1.8em; 
	text-align: center; margin: 0; background: none; color: #666;
	-webkit-transition: all .2s; transition: all .2s; }
	

/* RESPONSIVE */

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

	.swpr-control.top-align{ top: -20px; }
}


/* ---------------------------------
5. PRELOADER STYLING
--------------------------------- */

.loader-wrapper{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 100000; background: #fff; }


@-webkit-keyframes mainAnimation {
	0% {  width: 50px; -webkit-transform: translateX(0px) translateY(0px) rotate(0deg); }
	20% { width: 50px; -webkit-transform: translateX(0px) translateY(0px) rotate(0deg); }
	40% { width: 150px;  -webkit-transform: translateX(-50px) translateY(0px) rotate(0deg); }
	60% { width: 150px;  -webkit-transform-origin: bottom right; -webkit-transform: translateX(-150px) translateY(0px) rotate(90deg); }
	80% { width: 50px;  -webkit-transform: translateX(-25px) translateY(0px) rotate(90deg); }
	100% { width: 50px; -webkit-transform: translateX(-50px) translateY(0px) rotate(90deg); }
}
@keyframes mainAnimation {
	0% { width: 50px; transform: translateX(0px) translateY(0px) rotate(0deg); }
	20% { width: 50px; transform: translateX(0px) translateY(0px) rotate(0deg); }
	40% { width: 150px; transform: translateX(-50px) translateY(0px) rotate(0deg); }
	60% { width: 150px; transform-origin: bottom right;  transform: translateX(-150px) translateY(0px) rotate(90deg); }
	80% {  width: 50px; transform: translateX(-25px) translateY(0px) rotate(90deg); }
	100% { width: 50px; transform: translateX(-50px) translateY(0px) rotate(90deg); }
}
@-webkit-keyframes secundaryAnimation {
	0% {   -webkit-transform: translateX(0px) translateY(0px) rotate(0deg); }
	20% { -webkit-transform: translateX(0px) translateY(0px) rotate(180deg); }
	40% { -webkit-transform: translateX(0px) translateY(0px) rotate(180deg); }
	60% { -webkit-transform: translateX(0px) translateY(0px) rotate(0deg); }
	80% {  -webkit-transform: translateX(0px) translateY(0px) rotate(0deg); }
	100% {  -webkit-transform: translateX(0px) translateY(0px) rotate(180deg); }
}
@keyframes secundaryAnimation {
	0% { transform: translateX(0px) translateY(0px) rotate(0deg); }
	20% { transform: translateX(0px) translateY(0px) rotate(180deg); }
	40% { transform: translateX(0px) translateY(0px) rotate(180deg); }
	60% { transform: translateX(0px) translateY(0px) rotate(0deg); }
	80% { transform: translateX(0px) translateY(0px) rotate(0deg); }
	100% { transform: translateX(0px) translateY(0px) rotate(180deg); }
}
@-webkit-keyframes shadowAnimation {
	0% { width: 150px; -webkit-transform: translateX(-25px) translateY(0px) rotate(0deg); }
	20% { width: 75px; -webkit-transform: translateX(37.5px) translateY(0px) rotate(0deg); }
	40% { width: 200px; -webkit-transform: translateX(-25px) translateY(0px) rotate(0deg); }
	60% { width: 75px; -webkit-transform: translateX(37.5px) translateY(0px) rotate(0deg); }
	80% { width: 75px; -webkit-transform: translateX(37.5px) translateY(0px) rotate(0deg); }
	100% { width: 150px; -webkit-transform: translateX(-25px) translateY(0px) rotate(0deg); }
}
@keyframes shadowAnimation {
	0% { width: 150px; transform: translateX(-25px) translateY(0px) rotate(0deg); }
	20% { width: 75px; transform: translateX(37.5px) translateY(0px) rotate(0deg); }
	40% { width: 200px; transform: translateX(-25px) translateY(0px) rotate(0deg); }
	60% { width: 75px; transform: translateX(37.5px) translateY(0px) rotate(0deg); }
	80% { width: 75px; transform: translateX(37.5px) translateY(0px) rotate(0deg); }
	100% { width: 150px; transform: translateX(-25px) translateY(0px) rotate(0deg); }
}
@-webkit-keyframes float {
	0% { top: 50%; }
	50% { top: 51%; }
	100% { top: 50%; }
}
@keyframes float {
	0% { top: 50%; }
	50% { top: 51%; }
	100% { top: 50%; }
}

.loader { position: absolute; width: 50px; height: 50px; top: 50%; left: 50%; margin-top: -25px; margin-left: -25px; z-index: 2;
  background-color: #035ccc;
  -webkit-transform: translateX(0px) translateY(0px) rotate(0deg); transform: translateX(0px) translateY(0px) rotate(0deg);
  -webkit-animation: mainAnimation 2.6s ease 0s infinite forwards; animation: mainAnimation 2.6s ease 0s infinite forwards; }

.loader:after { content: ''; display: inline-block; position: absolute; width: 50px; height: 50px; top: 0; left: -50px;
  background-color: #035ccc;
  -webkit-transform-origin: top right; transform-origin: top right;
  -webkit-transform: translateX(0px) translateY(0px) rotate(0deg); transform: translateX(0px) translateY(0px) rotate(0deg);
  -webkit-animation: secundaryAnimation 2.6s ease 0s infinite forwards; animation: secundaryAnimation 2.6s ease 0s infinite forwards; }

.shadow { position: absolute; width: 100px; height: 10px; top: 50%; left: 50%; margin-top: 50px; margin-left: -75px;
	border-radius: 50%; z-index: 1; background-color: #95a5a6;
	-webkit-transform: translateX(0px) translateY(0px) rotate(0deg); transform: translateX(0px) translateY(0px) rotate(0deg);
	-webkit-animation: shadowAnimation 2.6s ease 0s infinite forwards, float 5s ease-in-out 0s infinite forwards;
	animation: shadowAnimation 2.6s ease 0s infinite forwards, float 5s ease-in-out 0s infinite forwards; }