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

* 	[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
		GO TOP
		RESPONSIVE 
		PRELOADER
		
===================================================


/* ---------------------------------
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: 'Open Sans', 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{ font-family: 'Open Sans', sans-serif; }

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; line-height: 1; }
h2 {font-size: 3em;  line-height: 1; }
h3 {font-size: 2em; }
h4 {font-size: 1.5em; }
h5 { font-size: 1.25em; }
h6 { font-size: .95em; }

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

p{ color: #444; }

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; }

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; border-color: #ffcc00!important; }

ul { margin: 0; }



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: 767px) {

    body { font-size: 14px; }
	
	h1 { font-size: 3em; }
	h2 {font-size: 2.5em; }
	h3 {font-size: 1.8em; }

}

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

	h1{ font-size: 2.2em; }
	
}

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

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

.section .heading{ position: relative; margin-bottom: 80px; text-align: right; }

.section .heading .title{ padding-right: 20px; }

.section .heading .title .main-title{ padding-bottom: 4px; }

.section .heading .title .pre-heading{ font-size: 1em; margin: 10px 0 5px; letter-spacing: 2px; color: #666; }

.section .heading .heading-info{ text-align: left; padding-left: 20px; }

.section .heading:after{ content: ''; position: absolute; top: 0; bottom: 0; left: 50%; margin-left: -3px; width: 6px; 
	background: #ffcc00; }

.section .heading .display-table-cell{ width: 50%; }


.section .heading.heading-right .title{ padding-right: 26px; }

.section .heading.heading-right:after{ left: auto; right: 0; }


.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; }

.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: 12px 40px; border-radius: 2px; border: 1px solid #ffcc00; 
	background: #ffcc00; color: #111; }

.btn:focus,
.btn:hover{ background: transparent; }

.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%); }



/* GO TOP */

#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 #ffcc00; 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:focus,
#back-to-top:hover{ box-shadow: 2px 5px 20px rgba(0,0,0,.3); background: #ffcc00; color: #000; }

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



/* RESPONSIVE */

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

	.section{ padding: 50px 0 20px; }
	.section .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; }
  
}


/* PRELOADER */

.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: #ffcc00;
  -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: #ffcc00;
  -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; }