/*------------------------------------------------------------------

wLander - Responsive Multipurpose Landing Page Template 
Version:	1.0 
Designed by: Weblabx 
=====================================================================


[Table of contents]


1. Global CSS
	1.1 General CSS
	1.2 Typography

2. Master color setting
    2.1 Background Color
    2.2 Text Color
    2.3 Border Color
    2.4 Box Shadow Color

3. Common CSS

3. Banner section
	3.1. Banner Text
	3.2. Signup Box

4. Features Section 
    4.1 Basic Style
    4.2 Features Icon

5. Benefits Section
    5.1 Basic Style
    5.2 Video Frame

6. Few Facts Section
    6.1 Basic Style
    6.2 Facts Icon
    6.3 Facts Number

7. Pricing Table Section

8. Testimonail Section

9. Subscribe Section

10. Footer Section

-------------------------------------------------------------------*/



/*=================================
   1. Global CSS
=================================*/

/*--------------------------------
   1.1 General CSS 
--------------------------------*/

body {
    font-family: 'Roboto', arial, serif;
    line-height: 1.6;
    font-size: 15px;
    color: #666;
}

section {
    padding: 60px 0;
}
section[style^="background"] h2{
    color: #fff !important;
}
button {
    padding: 9px 30px;
    font-size: 16px;
    border: none;
}

.row {
    margin-left: 15px;
    margin-right: 15px;
}

/*--------------------------------
   1.2 Typography
--------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Oswald;
    color: #333;
    font-weight: 400;
}

h1 {
    font-size: 48px;
}

h2 {
    font-size: 34px;
}

h3 {
    font-size: 24px;
}

h4 {
    font-size: 20px;
}


/*=================================
   2. Master color setting
=================================*/

/*--------------------------------
   2.1 Background Color setting
--------------------------------*/
.wbutton,
.signup-box-headling,
.signup-button,
.btn-signup,
.feature:hover .icon,
.table-dark,
.table-title,
.social-icons .fa:hover,
.box-header::after,
.social-icons .fa:hover,
.table-wrapper.table-dark {
    background-color: #6F453D;
}

.wbutton:hover,
.signup-button:hover,
.btn-signup:hover {
    background: #363636;
}

/*--------------------------------
   2.2 Text Color setting
--------------------------------*/
a,
.counter-section .icon-counter,
.icon-features,
.feature .icon,
.button,
.feature-details h3,
.icon-container-cirlce,
.table-dark .pricing-row,
.table-wrapper:hover .pricing-row,
.footer-contact span,
.table-wrapper a .button:hover,
.btn-bordered.white:hover {
    color: #6F453D;
}

.footer-contact span {
    color: #FFF;
}


/*--------------------------------
   2.3 Border Color setting
--------------------------------*/
.arrow-down,
.feature .icon,
.feature:hover .icon,
.video-frame,
.subscribe .form-control,
.subscribe .form-control:focus {
    border-color: #6F453D !important;
}


/*--------------------------------
   2.4 Box Shadows Color setting
--------------------------------*/
.subscribe .form-control:focus {
    box-shadow: 0 0 8px #6F453D;
}

.signup-box .form-control:focus {
    box-shadow: 0 0 0 2px #6F453D;
}



/*================================
   3. COMMON CSS
================================*/
.bg-grey{
    background:#eee;
}
.fix-background {
    position: relative;
}

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

.parallax {
    background-size: cover;
    background-attachment: fixed;
}

.opacity-light,
.opacity-dark{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.opacity-light {
    opacity: 0.5;
}

.opacity-dark {
    opacity: 0.8;
}

.bg-black {
    background: #000;
}

.grey-bg {
    background: #eee;
}

.wbutton {
    padding: 12px 26px;
    font-size: 16px;
    color: #fff;
    border: none;
    font-weight: 500;
    border-radius: 2px;
}

.wbutton:visited {
    color: #fff;
}

p + a>.wbutton {
    margin-top: 10px;
    display: inline-block;
}

a ~ .section-description {
    margin-top: 30px;
}

h2.box-header{
    font-size: 38px;
    margin-top: 0;
}
.box-header::after {
    width: 75px;
    height: 4px;
    display: block;
    margin: 25px auto;
    content: '';
}

.left.box-header::after {
    margin-left: 0;
}
@media only screen and (max-width: 768px) {
    h2.box-header {
        font-size: 32px;
    }
}

@media only screen and (max-width: 480px) {
    .box-header::after,
    .left.box-header::after {
        margin-top: 10px;
    }
    h2.box-header {
        font-size: 28px;
    }
}

.description {
    font-size: 18px;
    margin-bottom: 20px;
}
@media only screen and (max-width: 360px) {
	.description {
		font-size: 17px;
	}	
}


/*================================
   4. Banner Section
================================*/

/*--------------------------------
   4.1 Basic Style
--------------------------------*/
.banner {
    width: 100%;
    min-height: 670px;
    background-size: cover;
    background-position: bottom;
}

.logo {
    margin-bottom: 63px;
    margin-top: 15px;
}

@media only screen and (max-width: 992px) {
    .logo {
        margin-bottom: 50px;
        width: 250px;
    }
}

.banner-text {
    padding-top: 0;
    color: #fff !important;
    font-size: 21px;
    text-shadow: 0 0 3px #000;
}

@media only screen and (max-width: 992px) {
    .banner-text {
        font-size: 19px;
    }
}

.banner-text h1 {
    font-size: 55px;
    line-height: 1.2;
    letter-spacing: -1px;
    text-shadow: 0 0 15px #000;
    margin-bottom: 45px;
    margin-top: 0;
    color: #fff;
}

@media only screen and (max-width: 992px) {
    .banner-text h1 {
        font-size: 48px;
    }
}
@media only screen and (max-width: 360px) {
    .banner-text h1 {
        font-size: 39px;
    }
}

.banner-text h3 {
    font-family: Roboto;
    font-size: 26px;
    font-weight: 300;
    text-shadow: 0 0 11px #000;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0;
    color: #fff;
}

@media only screen and (max-width: 992px) {
    .banner-text h3 {
        font-size: 24px;
    }
}
@media only screen and (max-width: 360px) {
    .banner-text h3 {
        font-size: 21px;
		letter-spacing: 0;
    }
}

.banner-text button {
    margin-top: 25px;
}

.wbutton-bordered {
    background: none;
    border: solid 2px;
    color: #fff;
    font-size: 20px;
    padding: 9px 30px;
    font-family: oswald;
    -webkit-transition: all linear 0.3s;
    transition: all linear 0.3s;
    border-radius: 2px;
}

.wbutton-bordered:hover {
    background: #fff;
    border-color: #fff;
    color: #6F453D;
}


@media only screen and (max-width: 360px) {
    .wbutton-bordered {
        font-size: 18px;
    }
}



/*--------------------------------
   4.2 Signup Box
--------------------------------*/
.signup-box {
    width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .signup-box {
        margin-top: 60px;
    }
}

.signup-box .form-control {
    border: none;
    height: 43px;
    margin-bottom: 20px;
}

.signup-box-headling {
    width: 100%;
    height: auto;
    padding: 5px 20px;
    position: relative;
    text-align: center;
}

.signup-box-headling h2,
.signup-box-headling h3{
    color: #fff;
}

.signup-box-headling h2{
    margin-bottom: 6px
}
@media only screen and (max-width: 480px) {
	.signup-box-headling h2{
		font-size: 28px;
	}
	.signup-box-headling h3{
		font-size: 22px;
	}
}
.signup-box-headling h3 {
    margin-top: 0;
    margin-bottom: 30px;
    font-family: Pacifico;
}

.arrow-down {
    width: 0;
    height: 0;
    border-left: 20px solid transparent !important;
    border-right: 20px solid transparent !important;
    border-top: 20px solid;
    bottom: -17px;
    left: 45%;
    position: absolute;
}

.signup-box-body {
    width: 100%;
    padding: 20px;
    background: #eee;
    padding-top: 40px;
}
.signup-button {
    height: 46px;
    font-size: 18px;
    border: none;
    border-bottom: solid 4px #ccc;
    width: 100%;
    color: #fff;
}
@media only screen and (max-width: 480px) {
	.signup-button {
        font-size: 17px;
        height: 72px;
	}
}

.btn-signup {
    height: 46px;
    font-size: 18px;
    border-bottom: solid 4px #ccc;
}

.btn-signup:hover {
    color: #fff;
}
.contact-form input[type="text"],
.contact-form input[type="email"] {
    height: 48px;
}

.contact-form .form-control {
    box-shadow: none;
    border-radius: 0;
}



/*================================
    Features Section
================================*/

/*--------------------------------
   4.1 Basic Style
--------------------------------*/
.icon-features {
    font-size: 55px;
    margin-bottom: 10px;
    border: solid 2px #eee;
    -webkit-transition: all linear 0.3s;
    transition: all linear 0.3s;
    border-radius: 50%;
}

.section-header {
    margin-bottom: 60px;
    text-align: center;
}

.feature {
    width: 100%;
    margin-bottom: 40px;
    overflow: hidden;
}

@media only screen and (max-width: 992px) {
    .feature {
        margin-bottom: 25px;
    }
}

.feature:last-child {
    margin-bottom: 0;
}

.feature .icon-container {
    min-height: 80px;
    float: left;
}


/*--------------------------------
   5.2 Feature Icon
--------------------------------*/
.feature .icon {
    width: 70px;
    height: 70px;
    line-height: 70px;
    font-size: 30px;
    border-radius: 50%;
    border: solid 2px;
    margin-right: 20px;
    text-align: center;
    -webkit-transition: all linear 0.3s;
    transition: all linear 0.3s;
}
.feature:hover .icon {
    border: solid 2px;
    color: #fff;
}

@media only screen and (max-width: 992px) {
    .feature .icon {
        width: 70px;
        height: 70px;
        line-height: 70px;
    }
}



/*--------------------------------
   5.2 Feature Text
--------------------------------*/
.feature-details {
    overflow: hidden;
}

.feature-details h3 {
    font-family: Roboto;
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 23px;
    font-weight: 300;
    color: #333;
}

@media only screen and (max-width: 992px) {
    .feature-details h3 {
        font-size: 21px;
    }
}

.feature-details p {
    line-height: 1.3;
    font-size: 16px;
}

@media only screen and (max-width: 992px) {
    .feature-details p {
        font-size: 15px;
    }
}


@media only screen and (max-width: 992px) {
    .sm-top-margin {
        margin-top: 30px;
    }
}

.icon-container-cirlce {
    width: 100px;
    height: 100px;
    line-height: 130px;
    text-align: center;
    margin: 0 auto;
}



/*=================================
    5. Benefits Section
=================================*/
.benefit:last-child {
    margin-bottom: 0;
}

.benefit h3 {
    font-family: Roboto;
    font-weight: 400;
    font-size: 22px;
    margin-top: 10px;
    margin-bottom: 12px;
}

@media (max-width: 767px) {
    .benefit {
        margin-bottom: 35px;
    }
    .features-img {
        text-align: center !important;
    }
    .features-img img {
        display: inline;
        margin-top: 45px;
    }
}

@media only screen and (max-width: 480px) {
    .benefit h3{
        font-size: 20px;
    }
}

.announcement {
    padding: 35px 0;
}

.video-frame {
    border-width: 5px !important;
    border-style: solid !important;
}


/*=================================
   6. Few Facts Section
=================================*/

/*--------------------------------
   6.1 General CSS 
--------------------------------*/
.counter-item {
    margin-top: 25px;
    font-size: 18px;
}
@media only screen and (max-width: 992px) {
    .counter-item {
        font-size: 16px;
    }
}
@media only screen and (max-width: 768px) {
    .counter-item {
        margin-bottom: 40px;
    }
	.counter-item:last-child {
        margin-bottom: 0;
    }
}



/*--------------------------------
   6.2 Facts Icon 
--------------------------------*/
.counter-section .icon-counter {
    font-size: 70px;
    margin-bottom: 15px;
}


/*--------------------------------
   6.3 Facts Number 
---------------------------------*/
.counter-section .number {
    font-size: 38px;
    line-height: 1;
}



/*================================
   7. Pricing Table Section
================================*/

.table-wrapper {
    width: 100%;
    height: auto;
    padding: 10px 20px 30px;
    text-align: center;
    -webkit-transition: all linear 0.2s;
    transition: all linear 0.2s;
    margin-top: 25px;
	margin-bottom: 8px;
}

.button {
    font-size: 18px;
    padding: 7px 25px;
    border: none;
    border: solid 2px;
    background: none;
    margin-top: 20px;
    -webkit-transition: all linear 0.2s;
    transition: all linear 0.2s;
    border-radius: 2px;
}

.table-wrapper:hover .button,
.table-dark .button {
    color: #fff;
    border-color: #fff;
}

.table-wrapper .button:hover {
    background: #fff;
}

.table-title {
    margin: 0;
    padding-top: 5px;
    padding-bottom: 15px;
    margin-top: 0;
    font-size: 60px;
}

.table-wrapper ul {
    margin: 0;
    padding: 0;
}

.table-wrapper ul li {
    border-bottom: dashed 1px #ddd;
    padding-top: 10px;
    padding-bottom: 10px;
    list-style-type: none;
    font-size: 16px;
}

.table-dark ul li,
.table-wrapper:hover ul li {
    border-color: #fff;
}

.pricing-row {
    font-size: 23px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    box-sizing: border-box;
    padding-top: 30px;
    margin: 0 auto;
    color: #fff;
    margin-top: 25px;
    margin-bottom: 25px;
}

.currency-part {
    position: relative;
    top: -23px;
    right: -8px;
}

.number-part {
    font-size: 60px;
}

.decimal-part {
    position: relative;
    top: -28px;
    left: -4px;
}

.time-part {
    font-size: 16px;
    opacity: 0.7;
    position: relative;
    left: -22px;
}



/*=================================
   8. Testimonail Section
=================================*/
.testimonial {
    text-align: center;
    color:#fff; 
    text-shadow:0 0 2px #000;
}

.testimonial-text { 
    font-size: 18px;
    line-height: 1.6;
    margin: 20px auto 0;
}

.testimonial-photo {
    margin-top: 25px;
    display: inline-block;
}

.testimonial-photo img {
    width: 100px;
    border-radius: 50%;
}

.testimonial-author {
    padding: 15px 0;
    font-size: 18px;
}



/*=================================
   9. Subscribe Section
=================================*/
.subscribe p {
    text-align: center;
    font-size: 16px;
}

.subscribe .form-control {
    border: solid 2px;
    height: 44px;
}

.subscribe .wbutton {
    width: 100%;
    font-size: 18px;
    padding: 9px 0;
	margin-bottom: 8px;
}

.social-icons {
    margin-top: 5px;
    margin-bottom: 15px;
    text-align: center;
}

.social-icons .fa {
    background: #666;
    color: #fff;
    font-size: 18px;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    margin-right: 1px;
    -webkit-transition: all linear 0.5s;
    transition: all linear 0.5s;
}

.social-icons .fa:hover {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}



/*=================================
   10. Footer
=================================*/
#page-footer {
    background: #444;
    color: #fff;
    padding: 45px 0 0;
}

.footer-contact {
    margin-bottom: 40px;
}

.footer-contact span {
    margin-bottom: 12px;
}

.footer-bottom {
    border-top: solid 1px #666;
    color: #aaa;
    padding: 15px 0;
    text-align: center;
    font-size: 15px;
}

.icon-lg {
    font-size: 42px;
}

ul.contact {
    margin: 0;
    padding: 0;
}

ul.contact li {
    list-style-type: none;
    height: 30px;
}

ul.contact .glyphicon {
    margin-right: 10px;
    color: #fff;
}

.social-icon {
    margin-bottom: 10px;
    margin-top: 5px;
}

.social-icon i {
    margin-right: 5px;
    font-size: 20px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    text-align: center;
    padding-top: 11px;
    color: #fff;
    -webkit-transition: all linear 0.2s;
    transition: all linear 0.2s;
}

.social-icon i:hover {
    background: #31aae2;
}

.social-icon b:hover {
    margin-right: 30px;
    border-top-color: blue
}

.copyright {
    border-top: solid 1px #666;
    padding: 15px 0;
    margin-top: 20px;
}

.scrool_top {
    width: 350px;
}

@media only screen and (max-width: 768px) {
    .scrool_top {
        width: 100%;
    }
}