/* --------------------------------------
=========================================
Landro - Responsive Landing Page 
Version: 1.0 (Initial Release)
Designed By: Omar Faruk
=========================================

1-IMPORT ESSENTIAL FONTS FOR TYPOGRAPHY AND STYLES.
    - 1.1 IMPORT GOOGLE FONTS.
    - 1.2 IMPORT CUSTOM FONT FOR INPUT EFFECT.



2- SOME COMMON STYLES.
    -2.1 GENERAL STYLES.
    -2.2 PRE-LOADER STYLES.
    -2.3 ANCORE TEXT AND BOLD TEXT STYLES.
    -2.4 MISE FIXING STYLES.



 3- COMPONENTS STYLES.
    -3.1 BACKGROUND , OVERLAY , LAYOUT ETC
    -3.2 BORDER FROM BOTTOM EFFECT STYLE.
    -3.3 BORDER FROM LEFT EFFECT STYLE.
    -3.4 HOVER GROW EFFECT.
    -3.5 STANDART BUTTON EFFECT STYLE.
    -3.6 COMMON TYPOGRAPHY FOR HEADINGS AND PARAGRAPH.



 4- ALL SECTIONS SPECIFIC STYLES.
    -4.1 HEADER SECTION STYLES.
    -4.2 FEATURE SECTION STYLES.
    -4.3 ABOUT SECTION STYLES.
    -4.4 TESTIMONIAL SECTION STYLES.
    -4.5 FAQ SECTION STYLES.
    -4.6 PRICING TABLE STYLES
    -4.7 EMAIL SUBSCRIBTION SECTION STYLES.
    -4.8 FOOTER SECTION STYLES 




-----------------------------------------*/
/*===========================================
=           1. IMPORT FONTS            =
===========================================*/

/*==========  1.1 IMPORT GOOGLE FONT  ==========*/

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic|Raleway:500,600,700);

/*==========  1.2 IMPORT CUSTOM FONT FOR INPUT EFFECT  ==========*/


@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: 'codropsicons';
	src:url('../fonts/codropsicons/codropsicons.eot');
	src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
		url('../fonts/codropsicons/codropsicons.woff') format('woff'),
		url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
		url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
}









/*========================================
=            2. COMMON STYLES            =
========================================*/

/*==========  2.1 GENERAL STYLES  ==========*/
html{
	font-size:100%;
}

body{
	background: #ffffff;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 16px;
	color: #727272;
	line-height: 25px;
	text-align: center;
	overflow-x: hidden !important;
	margin: auto !important;
}



/*==========  2.2 PRE-LOADER  ==========*/

.preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fefefe;
	z-index: 99999;
	height: 100%;
	width: 100%;
	overflow: hidden !important;
}

.status {
	width: 40px;
	height: 40px;
	position: absolute;
	left: 50%;
	top: 50%;
	background-image: url(../images/loading.gif);
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: cover;
	background-size: cover;
	margin: -20px 0 0 -20px;
}



/*========== 2.3 ANCORE AND BOLD TEXT STYLES  ==========*/



a {
	text-decoration: none;
  -webkit-transition: all ease 0.25s;
	-moz-transition: all ease 0.25s;
	transition: all ease 0.25s;
}

a:hover {
	text-decoration: underline;
}

a:focus {
	outline: inherit;
	color: inherit;
}

strong {
	font-weight: 700;
}

.strong {
	font-weight: 700;
}



/*========== 2.4 MISE FIXING  ==========*/



@-webkit-viewport {
	width: device-width;
}

@-moz-viewport {
	width: device-width;
}

@-ms-viewport {
	width: device-width;
}

@-o-viewport {
	width: device-width;
}

@viewport {
	width: device-width;
}

*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

ul,
ol {
	padding-left: 0 !important;
}

li {
	list-style: none;
} 



/*=========================================
=           3.COMPONENTS STYLES            =
=========================================*/

/*========== 3.1 BACKGROUNDs,COLORS, OVERLAY & LAYOUTS  ==========*/
.section-bg-color {
  background: rgba(222, 222, 222, 0.24) none repeat scroll 0 0;
}

#section-2,
#section-3,
#section-4,
#section-5,
#section-6,
#section-7,
#section-9,
.header-section .color-overlay,
.email-subscribtion-section .color-overlay{
	padding-top: 75px;
	padding-bottom: 75px
}

.section-heading-white h2, .section-heading-white h4{
  color:#ffffff;
}

.color-overlay {
  background: rgba(0, 0, 0, 0.69) none repeat scroll 0 0;
}
.standard-button:hover, .standard-button:active, .standard-button:focus{
	text-decoration: none;
}


.section-heading, .section-heading-white {

  padding-top: 60px;
  padding-bottom:60px;
}


/*========== 3.2 BORDER FROM BOTTOM EFFECT  ==========*/

.border-from-bottom::before {
  bottom: 0;
  content: "";
  height: 4px;
  left: 0;
  position: absolute;
  right: 0;
  transform: translateY(4px);
  transition-duration: 0.3s;
  transition-property: transform;
  transition-timing-function: ease-out;
  z-index: -1;
}
.border-from-bottom {
  backface-visibility: hidden;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  display: inline-block;
  overflow: hidden;
  position: relative;
  transform: translateZ(0px);
  vertical-align: middle;
}
.border-from-bottom:hover::before, .border-from-bottom:focus::before, .border-from-bottom:active::before {
  transform: translateY(0px);
}

/*========== 3.3 BORDER FROM LEFT EFFECT  ==========*/


.boder-from-left::before {
  
  bottom: 0;
  content: "";
  height: 4px;
  left: 0;
  position: absolute;
  right: 100%;
  transition-duration: 0.3s;
  transition-property: right;
  transition-timing-function: ease-out;
  z-index: -1;
}

.boder-from-left {
  backface-visibility: hidden;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  display: inline-block;
  overflow: hidden;
  position: relative;
  transform: translateZ(0px);
  vertical-align: middle;
}
.boder-from-left:hover::before, .boder-from-left:focus::before, .boder-from-left:active::before {
  right: 0;
}


/*========== 3.4 HOVER-GROW-EFFECT  ==========*/


.hover-grow-shadow {
  backface-visibility: hidden;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  display: inline-block;
  transform: translateZ(0px);
  transition-duration: 0.3s;
  transition-property: box-shadow, transform;
  vertical-align: middle;
}
.hover-grow-shadow:hover, .hover-grow-shadow:focus, .hover-grow-shadow:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  transform: scale(1.1);
}



/*========== 3.5 STANDARD BUTTON EFFECT  ==========*/


.standard-button {
  color: #fff !important;
  backface-visibility: hidden;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  display: inline-block;
  transform: translateZ(0px);
  transition-duration: 0.3s;
  transition-property: transform;
  transition-timing-function: ease-out;
  vertical-align: middle;
}
.standard-button:hover, .standard-button:focus, .standard-button:active {
  transform: translateY(8px);
}



/*========== 3.6 TYPOGRAPHY  ==========*/


h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Raleway', sans-serif;
	margin-bottom: 0;
	margin-top: 0;
}

h1 {
	font-size: 2.813rem;
	line-height: 3.75rem;
	font-weight: 500;
}

h2 {
	font-size: 2.188rem;
	line-height: 3.125rem;
	font-weight: 500;
}

h3 {
	font-size: 1.5rem;
	line-height: 2.375rem;
	font-weight: 600;
}

h4 {
	font-size: 1.25rem;
	line-height: 2rem;
	font-weight: 600;
}

h5 {
	font-size: 18px;
	line-height: 28px;
	font-weight: 700;
  border-bottom: 2px solid;
  border-top: 2px solid;
  display: inline-block;
  padding: 5px 0;
}

h6 {
	font-size: 16px;
	line-height: 25px;
	font-weight: 700;
}



/*==================================================
=            4. SECTION SPECIFIC STYLES            =
==================================================*/




/*========== 4.1 HEADER STYLES  ==========*/
.header-section {
  background: rgba(0, 0, 0, 0) url("../images/header-bg.jpg") no-repeat fixed center center / cover ;
}

.header-text {
  margin-bottom: 70px;
  margin-top: 70px;
  padding:10px;
}
.header-text h1{
	color: #fff
}

.hovicon {
    display: inline-block;
    font-size: 45px;
    line-height: 90px;
    cursor: pointer;
    margin: 20px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    text-align: center;
    position: relative;
    text-decoration: none;
    z-index: 1;
    color: #fff;
}
.hovicon:after {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    content:'';
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.hovicon:before {
    speak: none;
    font-size: 48px;
    line-height: 55px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    display: block;
    -webkit-font-smoothing: antialiased;
}


 .hovicon.effect-7 {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 1);
    -webkit-transition: background 0.2s, color 0.2s;
    -moz-transition: background 0.2s, color 0.2s;
    transition: background 0.2s, color 0.2s;
}
.hovicon.effect-7:hover, .hovicon.effect-7:hover i {
    color: #fff;
}
.hovicon.effect-7:after {
    top: -8px;
    left: -8px;
    padding: 8px;
    z-index: -1;
    opacity: 0;
}

 .hovicon.effect-7.sub-b:after {
    box-shadow: 3px 3px rgba(255, 255, 255, 1);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
    -moz-transition: opacity 0.2s, -moz-transform 0.2s;
    transition: opacity 0.2s, transform 0.2s;
}
.hovicon.effect-7.sub-b:hover:after {
    opacity: 1;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}
.hovicon.effect-7.sub-b:before {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.7;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s;
}
.hovicon.effect-7.sub-b:hover:before {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  transform: rotate(-55deg);
  -webkit-transform: rotate(-55deg);
  -moz-transform: rotate(-55deg);
  -ms-transform: rotate(-55deg);
}

.subscribtion-button {
  margin-bottom: 30px;
  margin-top: 30px;
}


.input {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin: 1em;
  max-width: 465px;
  width: calc(100% - 2em);
  vertical-align: top;
}

.input__field {
  position: relative;
  display: block;
  float: right;
  padding: 0.8em;
  width: 60%;
  border: none;
  border-radius: 0;
  background: #f0f0f0;
  color: #aaa;
  font-weight: bold;
  -webkit-appearance: none; /* for box shadows to show on iOS */
}

.input__field:focus {
  outline: none;
}

.input__label {
  display: inline-block;
  float: right;
  padding: 0 1em;
  width: 40%;
  color: #6a7989;
  font-weight: bold;
  font-size: 70.25%;
  -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.input__label-content {
  position: relative;
  display: block;
  padding: 1.6em 0;
  width: 100%;
}

.graphic {
  position: absolute;
  top: 0;
  left: 0;
  fill: none;
}



.input--madoka {
  margin: 1.1em;
}

.input__field--madoka {
  width: 100%;
  background: transparent;
  color: #ffffff;
}

.input__label--madoka {
  position: absolute;
  width: 100%;
  height: 100%;
  color: #ffffff;
  text-align: left;
  cursor: text;
}

.input__label-content--madoka {
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}

.graphic--madoka {
  -webkit-transform: scale3d(1, -1, 1);
  transform: scale3d(1, -1, 1);
  -webkit-transition: stroke-dashoffset 0.3s;
  transition: stroke-dashoffset 0.3s;
  pointer-events: none;

  stroke: #ffffff;
  stroke-width: 5px;
  stroke-dasharray: 962;
  stroke-dashoffset: 558;
}

.input__field--madoka:focus + .input__label--madoka,
.input--filled .input__label--madoka {
  cursor: default;
  pointer-events: none;
}

.input__field--madoka:focus + .input__label--madoka .graphic--madoka,
.input--filled .graphic--madoka {
  stroke-dashoffset: 0;
}

.input__field--madoka:focus + .input__label--madoka .input__label-content--madoka,
.input--filled .input__label-content--madoka {
  -webkit-transform: scale3d(0.81, 0.81, 1) translate3d(0, 4em, 0);
  transform: scale3d(0.81, 0.81, 1) translate3d(0, 4em, 0);
}




/*========== 4.2 FEATURE STYLES  ==========*/
.single-feature {
  margin-bottom: 30px;
}

.feature-heading {
  padding-bottom: 60px;
  padding-top: 60px;
}
.feature-heading  h4 {
  color: #333;
}
.feature-icon {
  border: 2px solid;
  border-radius: 50%;
  display: inline-block;
  font-size: 65px;
  padding: 20px;
}
.feature-content {
  margin-top: 20px;
  padding-top: 10px;
}


/*========== 4.3  ABOUT PRODUCTS STYLES  ==========*/
.left-about:hover .boder-from-left::before{
 right:0;
}
.left-about-heading {
  margin-bottom: 20px;
}
.about-content-text {
  padding-bottom: 20px;
}
.about-lists {
  margin-top: 10px;
}
.single-list-item {
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 3px;
}
.about-list-icon {
  border-radius: 3px;
  color: #fff;
  margin-right: 10px;
  padding: 8px;
}
.about-list-content p{
	margin-bottom: 0;
}




/*========== 4.4 TESTIMONIAL STYLE  ==========*/

.testimonial-heading{
	margin-bottom: 20px;
  margin-top: 20px;
}
.testimonial-heading h4{
	color: #333;
}
.testimonial-iteam {
  font-style: italic;
}
.quote-icon {
  font-size: 70px;
  padding: 10px;
}
.client-info {
  font-style: normal;
  margin-top: 20px;
}
.client-name {
  font-size: 20px;
  font-weight: bold;
}
.company-name {
  margin-top: -10px;
}






/*========== 4.5 FAQ STYLES  ==========*/
.faq-header {
  padding-bottom: 60px;
  padding-top: 60px;
}
.faq-header > h4 {
  color: #333;
}
.single-faq {
  margin-bottom: 20px;
  padding-bottom: 10px;
  padding-top: 10px;
}
.single-faq h5 {
  margin-bottom: 20px;
}





/*========== 4.6 PRICING TABLE STYLES  ==========*/

.single-pricing-table {
  background: #fff none repeat scroll 0 0;
  padding-bottom: 30px;
  padding-top: 30px;

}
.pricing-table-heading {
  margin-bottom: 60px;
  margin-top: 60px;
}
.pricing-table-heading h2{
 color: #333
}
.pricing-table-heading h4{
 color: #333
}
.pricing-head {
  margin-bottom: 20px;
}
..pricing-table-content {
  padding-bottom: 30px;
  padding-top: 30px;
} 
.single-pricing-table span {
  font-size: 20px;
}




/*========== 4.7 EMAIL SUBSCRIBTION STYLES  ==========*/
.email-subscribtion-section{
	background: rgba(0, 0, 0, 0) url("../images/subs-bg.jpg") no-repeat fixed center center / cover ;
}
.subscribtion-heading {
  margin-bottom: 60px;
  margin-top: 60px;
}
.subscribtion-heading h2,h4{
	color: #ffffff;
	text-transform: capitalize;
}




/*========== 4.8 FOOTER SECTION STYLES  ==========*/
footer:hover .hover-grow-shadow{
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  transform: scale(1.1);
}

.copyright-text {
  margin-bottom: 15px;
  margin-top: 15px;
}