/* ===========================================================
	Pegion - Responsive Multi-purpose Landing Page Template 
	Version:	1.0 
	Designed by: The Template Lab 
 =============================================================


1. Global CSS
    1.1. General CSS
    1.2. Typography
2. Master Color Setting
    2.1. Background Color Setting
    2.2. Text Color Setting
    2.3 Border color Setting
3. Common CSS
4. Navbar Section
5. Banner Section
    5.1. Text and Button Section
    5.2. Signup Form
6. Feature Section
7. About Section
8. More-features Section
9. Count Section
10. Gallery Section
11. Subscribe Section
12. Pricing Section
13. Free-trail Section
14. Testimonial Section
15. Blog Section
16. Team Section
17. Contact Section
18. Footer Section
=============================================*/

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

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

body {
    color: #5f6368;
    font-size: 15px;
}

section {
    /*Changed By Om and adopted local padding styling for each section*/
    /*padding: 55px 0;*/
}

a:hover {
    text-decoration: none;
}

/*---------------------------
		Responsive CSS
-----------------------------*/

@media screen and (max-width: 575.98px) {
    section {
        padding: 70px 0px;
    }
    body {
        font-size: 14px;
    }
}


/* -----------------------
    1.2. Typography 
----------------------- */

body {
    font-family: 'Raleway', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #111;
}

h1 {
    font-weight: 300;
}

h2 {
    font-size: 39px;
}

h3 {
    font-size: 30px;
}

h4 {
    font-size: 20px;
}

h5 {
    font-size: 18px;
}

.heading {
    font-weight: 300;
    font-size: 38px;
}

.head-paragraph {
    font-size: 17px;
}

/*---------------------------
		Responsive CSS
-----------------------------*/

@media screen and (max-width: 991.98px) {
    h4 {
        font-size: 19px;
    }
}

@media screen and (max-width: 575.98px) {
    .heading {
        font-size: 35px;
    }
    .head-paragraph {
        font-size: 16px;
    }
}

/*================================
    2. Master Color Setting
=================================*/

/*-----------------------------------
    2.1. Background Color Setting
-------------------------------------*/

.box-heading::after,
.button-style,
.play-button,
.team-heading {
    background-color: #f26539;
    /*background-color: #770DDB;*/
}


.button-style:hover {
    background-color: #f79663;
}

/*-----------------------------------
    2.2. Text Color Setting
-------------------------------------*/

.blog-box:hover h4,
.icon,
.pricing-box:hover h2 {
    color: #f79663
    ;

}

.blog-box:hover h6,
.icon,
.pricing-box:hover h2 {
    color: #f79663
    ;
}
/*----------------------------------
    2.3 Border color Setting
----------------------------------*/

.subscribe .form-inline input,
.contact .form-inline input:focus,
.contact .form-inline textarea:focus {
    border: solid 1px #770DDB;
}


/* ==================================
   	    3. Common CSS
================================== */

.button-style {
    padding: 11px 40px;
    outline: none;
    border: none;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    border-radius: 0;
    -webkit-transition: all linear .3s;
    transition: all linear .3s;

}

.parallax {
    background-attachment: fixed !important;
}

.overlay {
    position: relative;
}

.overlay::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #ed6e1c;;
    opacity: 0.8;
}

.bg-grey {
    background: #eee;
}

h2.heading {
    margin-top: 0!important;
    margin-bottom: 0;
    color: #000;
}

.head-paragraph {
    margin-bottom: 35px;
    color: #111;
}

.box-heading::after {
    width: 100px;
    height: 3px;
    display: block;
    margin: 20px auto 20px;
    content: '';
}

.left.box-heading::after {
    margin: 20px 0 20px;
}

.white-text {
    color: #fff!important;
}

@media (max-width: 575.98px) {
    .xs-mb-1 {
        margin-bottom: 0.25rem;
    }
    .xs-mb-2 {
        margin-bottom: 0.5rem;
    }
    .xs-mb-3 {
        margin-bottom: 1rem;
    }
    .xs-mb-4 {
        margin-bottom: 1.5rem!important;
    }
    .xs-mb-5 {
        margin-bottom: 3rem;
    }
}

@media (max-width: 767.98px) {
    .sm-mb-1 {
        margin-bottom: .25rem;
    }
    .sm-mb-2 {
        margin-bottom: 0.5rem;
    }
    .sm-mb-3 {
        margin-bottom: 1rem!important;
    }
    .sm-mb-4 {
        margin-bottom: 1.5rem!important;
    }
    .sm-mb-5 {
        margin-bottom: 3rem;
    }
}

@media (max-width: 991.98px) {
    .md-mb-1 {
        margin-bottom: .25rem;
    }
    .md-mb-2 {
        margin-bottom: 0.5rem;
    }
    .md-mb-3 {
        margin-bottom: 1rem;
    }
    .md-mb-4 {
        margin-bottom: 1.5rem;
    }
    .md-mb-5 {
        margin-bottom: 3rem;
    }
}

/*====================================
        4. Navbar Section
====================================*/

.navbar {
    background: none !important;
    padding: 2px 15px;
    margin-top: 10px;
}

.nav-link {
    color: #fff !important;
    padding: 0px 15px !important;
    font-size: 15px;
}

.nav-bg {
    background: #fff !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    margin-top: 0;
}

.nav-bg a {
    color: #111 !important;
}

.logo-dark {
    display: none;
}

.nav-bg .logo-dark {
    display: block;
}

.nav-bg .logo {
    display: none;
}


/*---------------------------
		Responsive
---------------------------*/

@media screen and (max-width: 991.98px) {
    .navbar-expand-lg {
        background: #fff !important;
    }
    .navbar {
        margin-top: 0 !important;
    }
    .nav-link {
        color: #666 !important;
    }
    .nav-item {
        border-bottom: solid 1px #ccc;
        padding: 10px 0;
    }
    .nav-item:last-child {
        border-bottom: none;
    }
    .logo-dark {
        display: block;
    }
    .logo {
        display: none;
    }
}

@media screen and (max-width: 400.98px) {
    .navbar-brand img {
        max-width: 200px;
    }
}

/*====================================
		5. Banner Section
====================================*/

/* ----------------------------------------
   	    5.1. Text and Button Section
------------------------------------------ */

.jumbotron {
    background-size: cover;
    background-position: top;
    padding: 0px;
    color: #fff;
    margin-bottom: 0;
}

.display-4 {
    font-weight: 200;
    color: #fff;
    font-size: 45px;
}

.display-4 span {
    font-weight: 500;
    font-size: 65px;
}

.jumbotron .button-style {
    background-color: #fff;
    border: solid 2px #fff;
    padding: 11px 40px;
    color: #222;
}

.jumbotron .button-style:hover {
    background-color: transparent;
    color: #fff;
}
.jumbotron .btn-2{
	background-color: transparent;
	color: #fff;
}
.jumbotron .btn-2:hover{
	background-color: #fff;
	color: #222;
}

/*-------------------------
     5.2. Signup Form 
--------------------------*/

.signup-box {
    width: 100%;
    height: auto;
    color: #fff;
    margin-top: 60px;
    background-color: rgba(0, 0, 0, 0.15);
}

.signup-box .singup-button {
    background-color: transparent !important;
}

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

.signup-box h2 {
    padding-top: 15px;
    color: #fff;
}

.signup-box .form-group input {
    background-color: transparent;
    border: solid 1px rgba(199, 191, 191, 0.50);
    border-radius: 0;
    outline: none;
    box-shadow: none;
    color: #fff;
}

.signup-box .form-group input:focus {
    box-shadow: none;
}

.form-control::placeholder {
    color: #fff !important;
}

.signup-box-body {
    width: 100%;
    padding: 20px;
    padding-top: 25px;
}

.signup-box .singup-button {
    background-color: transparent;
    color: #fff;
    padding: 12px 40px;
    font-weight: 500;
    cursor: pointer;
    font-size: 15px;
    letter-spacing: 1px;
    border-radius: 0;
    border: solid 1px rgba(199, 191, 191, 0.50);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
}

.signup-box .singup-button:hover {
    border: solid 1px rgba(199, 191, 191, 0.50);
    background-color: #fff!important;
    color: #222;
}

/*---------------------------
		Responsive CSS
-----------------------------*/

@media screen and (max-width: 1199.98px) {
    .jumbotron h1 {
        margin-top: 0!important;
    }
    .display-4 span {
        font-size: 55px;
    }
    .signup-box {
        margin-top: 20px;
    }
}

@media screen and (max-width: 991.98px) {
    .display-4 {
        font-size: 33px;
    }
    .display-4 span {
        font-size: 35px;
    }
    .jumbotron .lead {
        font-size: 17px;
    }
    .signup-box h2 {
        font-size: 25px;
    }
    .signup-box .singup-button {
        padding: 9px 0;
    }
}

@media screen and (max-width: 767.98px) {
	.jumbotron{
		padding: 140px 0;
	}
    .jumbotron h1 {
        margin-top: 50px!important;
    }
    .signup-box {
        margin-top: 50px;
    }
    .signup-box .singup-button {
        padding: 12px 40px;
    }
}

@media screen and (max-width: 470.98px) {
    .display-4 {
        font-size: 30px;
    }
    .display-4 span {
        font-size: 35px;
    }
    .jumbotron .lead {
        font-size: 16px;
    }
    .jumbotron .button-style {
        padding: 10px 35px;
    }
}

@media screen and (max-width: 470.98px) {
    .display-4 {
        font-size: 28px;
    }
    .display-4 span {
        font-size: 30px;
    }
    .jumbotron .lead {
        font-size: 16px;
    }
    .jumbotron .button-style {
        padding: 9px 30px;
    }
}

@media screen and (max-width: 360.98px) {
    .display-4 {
        font-size: 23px;
    }
    .display-4 span {
        font-size: 26px;
    }
    .jumbotron .lead {
        font-size: 15px;
    }
	.jumbotron .button-style {
        padding: 9px 25px;
    }
}

/* =============================
   		6. Feature Section
================================ */

.feature {
    position: relative;
    top: -50px;
}

.feature::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 1;
    background-color: #fff;
    transform: skewY(177deg)
}

.feature-box {
    padding: 20px 15px 10px;
    -webkit-transition: all linear .3s;
    transition: all linear .3s;
}
.feature-section {
     padding: 550px 0;

}
/*---------------------------
		Responsive CSS
-----------------------------*/

@media screen and (max-width: 767.98px) {
    .feature-body {
        margin-bottom: 25px!important;
    }
    .feature-body:nth-child(n+3) {
        margin-bottom: 0;
    }
}

@media screen and (max-width: 575.98px) {
    .feature-body:last-child {
        margin-bottom: 0!important;
    }
}


/*====================================
		7. About Section
====================================*/

.about {
    position: relative;
    top: -50px;
}

.about::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 1;
    transform: skewY(177deg);
    background-color: #eee;
}

.play-button {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    padding-left: 35px;
    font-size: 40px;
    line-height: 90px;
    transition: 0.5s;
}

.play-button:hover {
    transform: scale(1.1);
}

.list-with-icon {
    margin-left: 0;
    padding-left: 0;
}

.list-with-icon li {
    list-style-type: none;
    padding-left: 0;
    line-height: 2;
}

.about .button-style {
    padding: 9px 30px;
}

/*---------------------------
		Responsive CSS
-----------------------------*/

@media screen and (max-width: 1199.98px) {
    .about h3 {
        font-size: 27px;
    }
}


/*====================================
		8. More-features Section
====================================*/

.more-features {
    position: relative;
    top: -50px;
}

.more-features::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 1;
    transform: skewY(177deg);
    background-color: #fff;
}

.more-features .features-box {
    background-color: #eee;
}

.more-features .features-box p {
    margin-bottom: 0;
}

.more-features .features-body:nth-child(n+4) {
    margin-top: 25px;
}

/*---------------------------
		Responsive CSS
-----------------------------*/

@media screen and (max-width: 767.98px) {
    .more-features .features-body {
        margin-top: 0!important;
        margin-bottom: 25px;
    }
    .more-features .features-body:last-child {
        margin-bottom: 0;
    }
}


/*====================================
		9. Count Section
====================================*/

.count {
    position: relative;
    top: -50px;
}

.count::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transform: skewY(177deg);
    background-image: url(../images/count.jpeg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}


.count h3 {
    font-size: 52px;
    font-weight: 400;
}

.count p {
    font-weight: 700;
}

/*---------------------------
		Responsive CSS
-----------------------------*/

@media screen and (max-width: 767.98px) {
    .count .icon {
        margin-bottom: 0!important;
    }
    .count-box {
        margin-bottom: 40px;
    }
    .count-box:nth-child(n+3) {
        margin-bottom: 0;
    }
}

@media screen and (max-width: 575.98px) {
    .count-box {
        margin-bottom: 40px!important;
    }
    .count-box:last-child {
        margin-bottom: 0!important;
    }
}


/*====================================
		10. Gallery Section
====================================*/

.gallery {
    position: relative;
    top: -50px;
}

.gallery::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 1;
    transform: skewY(177deg);
}

.gallery .mix-btn {
    margin: 0 auto;
    display: inline;
}

.gallery-in {
    margin-top: 25px;
}

.gallery .mix {
    padding: 3px!important;
}

.gallery .mix-btn .button-style {
    padding: 10px 36px;
}

.gallery .mix {
    padding: 8px;
}

.mix:nth-child(n+1) {
    margin-bottom: 0;
}

.mix:nth-child(n+5) {
    margin-bottom: 0;
}

/*----------------------
    Responsive CSS
----------------------*/

@media screen and (max-width: 767.98px) {
    .gallery .mix-btn .button-style {
        padding: 10px 30px;
        font-size: 14px;
    }

    .gallery .mix:nth-child(n+7) {
        padding-bottom: 0!important;
    }
}

@media screen and (max-width: 575.98px) {
    .gallery .mix:nth-child(n+7) {
        padding-bottom: 8px!important;
    }
    .gallery .mix:last-child {
        padding-bottom: 0!important;
    }
}

@media screen and (max-width: 460.98px) {
    .gallery .mix-btn .button-style {
        padding: 9px 25px;
    }
}

@media screen and (max-width: 420.98px) {
    .gallery .mix-btn .button-style {
        padding: 8px 20px;
    }
}

@media screen and (max-width: 380.98px) {
    .gallery .mix-btn .button-style {
        padding: 7px 18px;
    }
}

@media screen and (max-width: 380.98px) {
    .gallery .mix-btn .button-style {
        padding: 6px 15px;
    }
}

@media screen and (max-width: 340.98px) {
    .gallery .mix-btn .button-style {
        padding: 4px 13px;
    }
}

@media screen and (max-width: 324.98px) {
    .gallery .mix-btn .button-style {
        padding: 4px 12px;
    }
}

/*====================================
		11. Subscribe Section
====================================*/

.subscribe {
    position: relative;
    top: -50px;
}

.subscribe::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transform: skewY(177deg);
    background-image: url(../images/subscribe.jpeg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.subscribe .form-inline {
    padding: 3px;
    background-color: #fff;
}

.subscribe .form-inline input {
    width: 70%;
    padding: 10px 15px;
    border-radius: 0;
}

.subscribe .form-control::placeholder {
    color: #111!important;
}

.subscribe .form-inline input:focus {
    box-shadow: none;
}

.subscribe .form-inline .button-style {
    width: 30%;
}

/*---------------------------
		Responsive CSS
-----------------------------*/

@media screen and (max-width: 991.98px) {
    .subscribe .form-inline input {
        width: 60%;
        padding: 10px 15px;
    }
    .subscribe .form-inline .button-style {
        width: 40%;
    }
}

@media screen and (max-width: 380.98px) {
    .subscribe .form-inline .button-style {
        width: 40%;
        font-size: 14px;
        padding: 12px 0;
    }
    .subscribe .form-inline input {
        padding: 9px 15px;
    }
}


/* ==============================
   		12. Pricing Section
================================ */

.pricing {
    position: relative;
    top: -50px;
}

.pricing::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 1;
    transform: skewY(177deg);
    background-color: #eee;
}

.pricing-head {
    position: relative;
}

.pricing-head h3 {
    font-size: 30px;
    margin: 0;
}

.pricing-head h2 {
    font-size: 55px;
    margin: 0 0 20px;
    -webkit-transition: all linear .3s;
    transition: all linear .3s;
}

.pricing-head span {
    font-size: 30px;
    position: absolute;
    bottom: 12px;
    padding-left: 5px;
}

.pricing-content ul {
    padding: 0;
    margin: 0;
}

.pricing-content ul li {
    line-height: 2.5;
    color: #444;
}


.pricing-content ul i {
    padding-right: 5px;
}

.pricing-content .button-style {
    margin-top: 15px;
    padding: 11px 80px;
    font-size: 15px;
    border-radius: 4px;
}


/*---------------------------
		Responsive CSS
-----------------------------*/

@media screen and (max-width: 991.98px) {
    .pricing-content .button-style {
        padding: 10px 70px;
        font-size: 14px;
    }
    .pricing-head h2 {
        font-size: 45px;
    }
    .pricing-head h3 {
        font-size: 26px;
    }
    .pricing-head span {
        font-size: 23px;
    }
    .pricing-content ul li {
        line-height: 2.5;
    }
}

@media screen and (max-width: 767.98px) {
    .pricing-body {
        margin-bottom: 40px;
    }
    .pricing-body:last-child {
        margin-bottom: 0;
    }
}

/*====================================
		13. Free-trail Section
====================================*/

.free-trail {
    position: relative;
    top: -50px;
}

.free-trail::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transform: skewY(177deg);
    background-image: url(../images/free-trail.jpeg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.free-trail h2 {
    float: left;
    font-size: 45px;
    letter-spacing: 1px;
    margin-bottom: 0;
}

.free-trail .button-style {
    padding: 12px 50px;
    font-size: 20px;
    letter-spacing: 1px;
}


/*---------------------------
		Responsive CSS
-----------------------------*/

@media screen and (max-width: 1199.98px) {
    .free-trail h2 {
        font-size: 40px;
    }
    .free-trail .button-style {
        padding: 11px 40px;
        font-size: 18px;
    }
}

@media screen and (max-width: 991.98px) {
    .free-trail h2 {
        font-size: 27px;
    }
    .free-trail .button-style {
        padding: 10px 30px;
        font-size: 15px;
    }
}

@media screen and (max-width: 767.98px) {
    .free-trail h2 {
        font-size: 30px;
    }
    .free-trail .button-style {
        padding: 11px 35px;
    }
}

@media screen and (max-width: 500.98px) {
    .free-trail h2 {
        float: none;
    }
    .free-trail .button-style {
        margin-top: 15px;
    }
}

@media screen and (max-width: 350.98px) {
    .free-trail h2 {
        font-size: 24px;
    }
}

/* ====================================
   		14. Testimonial Section
====================================== */

.testimonial {
    position: relative;
    top: -50px;
}

.testimonial::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 1;
    transform: skewY(177deg);
    background-color: #eee;
}

.testimonial .head-paragraph {
    margin-bottom: -15px;
}

.testimonial-box {
    padding: 35px 25px 25px;
    background-color: #fff;
    margin: 0;
}

.testimonial-box h3 {
    margin-top: 20px;
    margin-bottom: 3px;
    font-size: 22px;
}

.testimonial-box .name-heading {
    margin: 0;
    font-size: 12px;
}

.testimonial-box p {
    font-size: 15px;
    margin-top: 10px;
}

.testimonial-icon {
    color: #666;
    padding-right: 8px;
}

.testimonial-icon:last-child {
    padding-right: 0;
    padding-left: 8px;
}

.testimonial-img img {
    height: 92px;
    width: 92px;
    border-radius: 50%;
}

.testimonial-img {
    border-radius: 50%;
    height: 100px;
    width: 100px;
    border: solid 4px #fff;
    position: relative;
    bottom: -50px;
    margin: 0 auto;
    background-color: #fff;
}

.owl-theme .owl-dots .owl-dot span {
    font-size: 35px !important;
    padding: 0 5px !important;
    line-height: 1;
    outline: none!important;
    margin-top: 15px;
}

/* ==============================
   		15. Blog Section
================================ */

.blog {
    position: relative;
    top: -50px;
}

.blog::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 1;
    transform: skewY(177deg);
}

.blog-box h4 {
    font-size: 15px;
    font-weight: 300;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    padding-top: 30px;
}

.blog-box p {
    margin-bottom: 10px;
}

.blog-info {
    margin: 10px auto 5px;
}

.blog-info i {
    font-size: 16px;
    padding-right: 5px;
}

.blog-info span {
    font-size: 11px;
}

.blog-info {
    padding: 0 13px 0;
}

.blog-text {
    padding: 0 13px;
}

/*---------------------------
		Responsive CSS
-----------------------------*/

@media screen and (max-width: 1199.98px) {
    .blog-box h4 {
        font-size: 17px;
    }
}

@media screen and (max-width: 991.98px) {
    .blog-box h4 {
        font-size: 17px;
    }
    .blog-info i {
        font-size: 10px;
        padding-right: 2px;
    }

    .blog-info span {
        font-size: 10px;
    }
}

@media screen and (max-width: 767.98px) {
    .blog-body {
        margin-bottom: 25px;
    }
    .blog-body:last-child {
        margin-bottom: 0;
    }
    .blog-box h4 {
        font-size: 15px;
    }
    .blog-info i {
        font-size: 14px;
        padding-right: 3px;
    }

    .blog-info span {
        font-size: 14px;
    }
}

@media screen and (max-width: 575.98px) {
    .blog-box h4 {
        font-size: 16px;
    }
    .blog-info i {
        font-size: 13px;
        padding-right: 3px;
    }

    .blog-info span {
        font-size: 13px;
    }
}

@media screen and (max-width: 400.98px) {
    .blog-box h4 {
        font-size: 14px;
    }
    .blog-info i {
        font-size: 11px;
        padding-right: 3px;
    }

    .blog-info span {
        font-size: 11px;
    }
}

@media screen and (max-width: 341.98px) {
    .blog-box h4 {
        font-size: 12px;
    }
    .blog-info i {
        font-size: 10px;
        padding-right: 2px;
    }

    .blog-info span {
        font-size: 10px;
    }
}


/* ==============================
   		16. Team Section
================================ */

.team {
    position: relative;
    top: -50px;
}

.team::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 1;
    transform: skewY(177deg);
    background-color: #eee;
}

.team-box h3 {
    font-size: 22px;
    color: #fff;
    font-weight: 600;
}

.team-box i {
    font-size: 18px;
    color: #fff;
    padding-right: 10px;
}

.team-box {
    position: relative;
}

.team-heading {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
}

.team-body:hover .team-heading {
    bottom: 0;
    height: 100%;
    opacity: .7;
}

.team-box .text {
    color: #fff;
    font-size: 15px;
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

/*---------------------------
		Responsive CSS
-----------------------------*/

@media screen and (max-width: 1199.98px) {
    .team-box .text {
        font-size: 13px;
    }
    .team-box i {
        font-size: 16px;
    }
}

@media screen and (max-width: 767.98px) {
    .team-body {
        margin-bottom: 25px;
    }
    .team-body:last-child {
        margin-bottom: 0;
    }
    .team-box .text {
        font-size: 16px;
    }
    .team-box i {
        font-size: 16px;
    }
}


/* ==============================
   		17. Contact Section
================================ */

.contact {
    position: relative;
    top: -50px;
}

.contact::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 1;
    transform: skewY(177deg);
    background-image: url(../images/contact.jpeg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.contact .form-inline input {
    padding: 14px 15px;
    width: 49%;
    margin-bottom: 8px;
    border-radius: 0;
    font-size: 15px;
    color: #222;
}

.contact .form-inline textarea {
    margin-bottom: 8px;
    width: 99.5%;
    border-radius: 0;
    font-size: 15px;
}

.contact .form-inline .form-control::placeholder {
    color: #222!important;
}

.contact .form-inline .button-style {
    padding: 14px 0;
    font-size: 16px;
    width: 99.5%;
}

.contact .form-inline input:focus {
    border-radius: 0;
    box-shadow: none;
}

.contact .form-inline textarea:focus {
    border-radius: 0;
    box-shadow: none;
}

/*---------------------------
		Responsive CSS
-----------------------------*/

@media screen and (max-width: 991.98px) {
    .contact .form-inline input {
        width: 100%!important;
        margin-right: 0!important;
    }
    .contact .form-inline textarea {
        width: 100%;
    }
    .contact .form-inline .button-style {
        width: 100%;
    }
}

/* ===================================
   		18. Footer Section
==================================== */

.footer {
    background: #000000;
    padding: 130px 0 60px;
    margin-top: -100px;
}

.footer p {
    color: #fff;
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1.7;
    letter-spacing: .01em;
    font-weight: 300;
}

.footer_icon .fa {
    padding: 0 12px;
    font-size: 20px;
    color: #fff!important;
}

.footer_icon .fa:hover {
    color: #007bff;
}

/*---------------------------
		Responsive CSS
-----------------------------*/

@media screen and (max-width: 575.98px) {
    .footer {
        padding: 100px 0 40px;
    }
    .footer p {
        font-size: 14px;
    }
}

#home {
 position: relative;
 height: 650px;
 min-height: 500px;
 width: 100%;
 background-size: cover !important;
 -webkit-background-size: cover !important;
 text-align: center;
 overflow: hidden;
}
#product {
 position: relative;
 height: 200px;
 min-height: 500px;
 width: 100%;
 background-size: cover !important;
 -webkit-background-size: cover !important;
 text-align: center;
 overflow: hidden;
}

#myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
}

#home.video-bg-hero {
    position: absolute;
    top: 50%;
    left: 50%;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    z-index: -100;
    display: none;
}

#custom-search-input {
    margin:0;
    margin-top: 10px;
    padding: 10px;
}
 
#custom-search-input .search-query {
    width:100%;
    padding-right: 3px;
    padding-left: 15px;
        /* IE7-8 doesn't have border-radius, so don't indent the padding */
    margin-bottom: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 0;
}
 
#custom-search-input button {
    border: 0;
    background: none;
    /** belows styles are working good */
    padding: 0 8px 0 10px;
    border-left: solid 1px #ccc;
    margin: 8px 0 0 0;
    position: absolute;
    right:0;
    /* IE7-8 doesn't have border-radius, so don't indent the padding */
    margin-bottom: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color:#D9230F;
    cursor: unset;
    z-index: 2;
}
#custom-search-input span fa {
    font-size: 23px;
}
 
.search-query:focus{
    z-index: 0;   
}

.product .letter {
    right: 30px;
    top: -50px;
    font-size: 5.0rem;
    font-weight: 600;
    color: #e77844;
    z-index: -1;
}
.product .product-item {
    text-align: center;
    margin-bottom: 50px;
	/*text-transform: uppercase;*/
}
.product .product-item .product-links {
    display: inline-block;
    position: relative;
    /*margin-top: 10px;*/
    -right: 15px;
    font-size: 14px;
}
.producttype h2{
	text-transform: uppercase;
}
#product .colmiddle {
    vertical-align: middle;
}
.blankspace{
	height: 100px;
}
.align-items-vcenter{
    vertical-align: center;
}
.col.middle {
    vertical-align: middle;
    height: 150px;
    margin-top: 150px;
    text-align: left;
    color: #fff;
}
.header-text h1{
    color: #fff;
}


/*Start*/

.custstyle {
    position: relative;
    top: -50px;
}

.custstyle::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 1;
    transform: skewY(177deg);
    background-image: url(../images/custstyle.jpeg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

#classModal {}

.modal-body {
  overflow-x: auto;
}

}