/*
    Estilos por: Jhon Gomez Marin
    Instagram: @jhon_gomezm
    Fecha: 21-06-2019
    Proyecto: MAVILTEX
*/


/*Fuente OpenSans*/
@font-face {
    font-family:"OpenSans";
    src:url("../fonts/OpenSans-Regular.eot?") format("eot"),
    url("../fonts/OpenSans-Regular.woff") format("woff"),
    url("../fonts/OpenSans-Regular.ttf") format("truetype"),
    url("../fonts/OpenSans-Regular.svg#OpenSans") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'Poppins-Regular';
	src: url('../fonts/Poppins-Regular.eot');
    src: local('☺'), url('../fonts/Poppins-Regular.woff') format('woff'), 
    url('../fonts/Poppins-Regular.ttf') format('truetype'), 
    url('../fonts/Poppins-Regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family:"Guld Script";
    src:url("../fonts/GuldScript_PersonalUseOnly.eot?") format("eot"),
    url("../fonts/GuldScript_PersonalUseOnly.woff") format("woff"),
    url("../fonts/GuldScript_PersonalUseOnly.ttf") format("truetype"),
    url("../fonts/GuldScript_PersonalUseOnly.svg#GuldScriptPERSONALUSEONLY") format("svg");
    font-weight:normal;
    font-style:normal;
}



*{
    padding: 0px;
	border: 0px;
	padding: 0px;
	outline: none;
    text-decoration: none;
}

body{
    background-color: #fff !important;
    overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6,
p, 
li,
button,
label {
    font-family: "Poppins-Regular";
    font-weight: normal;
}


/*
    =======================
    NAVBAR WITH INFORMATION
    =======================
*/

nav.navbar-info{
    height: 30px;
}

a.navbar-info{
    color: #909AA4 !important;
    font-size: 12px;
    font-weight: bold;
}

/*
    ==================
        MAIN NAVBAR
    ==================
*/
nav.navbar-main { height: 80px;}

a.navbar-text{ color: #909AA4 !important; font-size: 15px;}

a.link-nav:hover{ color: #3F88C8 !important; }

.btn-contact{
    background-color: #92C84A;
    border-radius: 20px;
    color: #fff;
    font-size: 15px;
    padding: 5px 15px;
    border: 1px solid transparent;
}

.btn-contact:hover{
    color: #fff;
    font-size: 15px;
}

.logo{ width: 125px; }

#my-nav{
    background-color: #fff;
    z-index: 10;
    width: 120% !important;
}
/*
    ==============
        BANNER
    ==============
*/
#banner {
    background-repeat: no-repeat;
    background-size: cover;
    height: 85vh;
    width: 100%;
}

div.title > p {
    color: #fff;
    position: absolute;
    line-height: 50px;
    font-size: 50px;
	left: 50%;
    top: 50%;
    /* width: 700px; */
	transform: translate(-50%, -35%);
    z-index: 3;
    text-shadow: 2px 2px 10px #000;
}


.btn-mav{
    margin-top: 20px;
    border-radius: 20px;
    padding: 7px 30px;
    color: #3F88C8;
    text-shadow: 0px 0px 0px #fff;
}
/*
    ==================
        SLIDER
    ==================
*/
.owl-theme .owl-nav {
    margin-top: 10px;
    display: none;
}

.owl-theme .owl-dots, 
.owl-theme .owl-nav {
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    margin-top: -30px;
    position: relative;
}

/*
    =================
        SERVICES
    =================
*/


.card-services{ 
    border-radius: 8px;
    -webkit-transition: all 0.5s; /* Safari prior 6.1 */
    transition: all 0.5s;
}

.card-services:hover{ 
    border-radius: 8px;
    box-shadow: 2px 2px 15px #999999;
    -webkit-transition: all 0.5s; /* Safari prior 6.1 */
    transition: all 0.5s;
}

.img-card-services{
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.card-title-services{
    color: #3F88C8;
    font-family: 'Poppins-Regular';
    font-size: 17px;
    text-align: center;

}

.text-services {
    color: #3F88C8;
    background-color: #fbfbfb;
    border-radius: 40px;
    font-size: 22px;
    text-align: center;
}

.subtext-services{ color: #666666 !important;}

.description-services{
    color: #888888 !important;
    font-size: 14px;
    text-align: center;
}

.btn-services{
    border-radius: 20px;
    font-family: 'Poppins Regular';
    font-size: 11px; 
    background-color: #92C84A !important;
    color: #fff;
}

/*
    ==============
        ECOLOGY
    ==============
*/
.ecology{
    background-image: url(../images/ecology.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
}



/*
    ==============
        BRAND
    ==============
*/

.contain-brand{
    background-color: #F8FAFD;
}

.text-brand {
    color: #3F88C8;
    background-color: #fff;
    border-radius: 40px;
    font-size: 22px;
    text-align: center;
}


/*
=============
FOOTER
=============
*/

.text-footer{
    color: #6b7885;
    font-size: 14px;
}

.sidenav,
#main{
    display: none;
}
/*
==================
    CONTACT
==================
*/
.title-contact{
    color: #3F88C8;
    background-color: #fff;
    border-radius: 40px;
    font-size: 22px;
    text-align: center;
}

.subtitle-contact,
.label-contact{
    color: #666666;
}

/*
===================
        ABOUT
===================
*/

.subtitle-about,
.description-about,
.check-about,
.responsability-about{
    color: #666666;
}

/*
    =============
    MEDIA QUERY
    =============
*/

@media (min-width: 768px) and (max-width: 973px) {

        nav.navbar-info{
            height: 80px;
        }

        a.navbar-info{
            color: #909AA4 !important;
            font-size: 12px;
            font-weight: bold;
        }

        div.title > p {
            color: #fff;
            position: absolute;
            line-height: 50px;
            font-size: 43px;
            left: 50%;
            top: 50%;
            /* width: 700px; */
            transform: translate(-50%, -35%);
            z-index: 3;
            text-shadow: 2px 2px 10px #000;
        }

        #banner {
            background-repeat: no-repeat;
            background-size: cover;
            height: 65vh;
            width: 100%;
            position: relative;
            z-index: 1;
        }

        .sidenav,
        #main{
            display: block;
        }

        .sidenav {
            height: 100%;
            width: 0;
            position: fixed;
            z-index: 11;
            top: 0;
            left: 0;
            background-color: #3F88C8;
            overflow-x: hidden;
            transition: 0.5s;
            padding-top: 60px;
        }

        a.closebtn{
            color: #fff;
            position: absolute;
            top: 0;
            right: 25px;
            font-size: 47px;
            margin-left: 50px;
            text-decoration:none;
        }

        .sidenav a.hamburguesa-a {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 20px;
            color: #fff;
            display: block;
            transition: 0.3s;
        }

        .sidenav a:hover {
            color: #f1f1f1;
        }


        #main {
            transition: margin-left .3s;
            padding: 16px;
        }

        button.content-span{
            background-color: #3F88C8;
            border: none;
            border-radius: 50%;
            height: 50px;
            width: 50px;
            margin-left: 70%;
            outline: 0;
        }


        @media screen and (max-height: 450px) {
            .sidenav {padding-top: 15px;}
            .sidenav a.hamburguesa-a {font-size: 18px;}
        }

}

@media (min-width: 425px) and (max-width: 767px) {
        nav.navbar-info{
            height: 80px;
        }

        a.navbar-info{
            color: #909AA4 !important;
            font-size: 12px;
            font-weight: bold;
        }

        div.title > p {
            color: #fff;
            position: absolute;
            line-height: 20px;
            font-size: 20px;
            left: 50%;
            top: 40%;
            /* width: 700px; */
            transform: translate(-50%, -50%);
            z-index: 3;
            text-shadow: 2px 2px 10px #000;
        }

        #banner {
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
            height: 50vh;
            width: 100%;
            position: relative;
            z-index: 1;
        }

        .btn-mav{
            margin-top: 20px;
            border-radius: 20px;
            font-size: 10px;
            padding: 7px 30px;
            color: #3F88C8;
            text-shadow: 0px 0px 0px #fff;
        }


        .sidenav,
        #main{
            display: block;
        }

        .sidenav {
            height: 100%;
            width: 0;
            position: fixed;
            z-index: 11;
            top: 0;
            left: 0;
            background-color: #3F88C8;
            overflow-x: hidden;
            transition: 0.5s;
            padding-top: 60px;
        }

        a.closebtn{
            color: #fff;
            position: absolute;
            top: 0;
            right: 25px;
            font-size: 47px;
            margin-left: 50px;
            text-decoration:none;
        }

        .sidenav a.hamburguesa-a {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 20px;
            color: #fff;
            display: block;
            transition: 0.3s;
        }

        .sidenav a:hover {
            color: #f1f1f1;
        }


        #main {
            transition: margin-left .3s;
            padding: 16px;
        }

        button.content-span{
            background-color: #3F88C8;
            border: none;
            border-radius: 5%;
            height: 50px;
            width: 50px;
            margin-left: 10%;
            margin-top: -10px;
            outline: 0;
        }

}

@media (min-width: 320px) and (max-width: 424px) {
        nav.navbar-info{
            height: 80px;
        }

        a.navbar-info{
            color: #909AA4 !important;
            font-size: 12px;
            font-weight: bold;
        }

        div.title > p {
            color: #fff;
            position: absolute;
            line-height: 25px;
            font-size: 20px;
            left: 50%;
            top: 38%;
            /* width: 700px; */
            transform: translate(-50%, -50%);
            z-index: 3;
            text-shadow: 2px 2px 10px #000;
        }

        #banner {
            background-repeat: no-repeat;
            background-size: contain;
            height: 200px;
            width: 100%;
            position: relative;
            z-index: 1;
        }


        .sidenav,
        #main {
            display: block;
        }

        .btn-mav{
            font-size: 8px;
        }

        .sidenav {
            height: 100%;
            width: 0;
            position: fixed;
            z-index: 11;
            top: 0;
            left: 0;
            background-color: #3F88C8;
            overflow-x: hidden;
            transition: 0.5s;
            padding-top: 60px;
        }

        a.closebtn{
            color: #fff;
            position: absolute;
            top: 0;
            right: 25px;
            font-size: 47px;
            margin-left: 50px;
            text-decoration:none;
        }

        .sidenav a.hamburguesa-a {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 20px;
            color: #fff;
            display: block;
            transition: 0.3s;
        }

        .sidenav a:hover {
            color: #f1f1f1;
        }


        #main {
            transition: margin-left .3s;
            padding: 16px;
        }

        button.content-span{
            background-color: #3F88C8;
            border: none;
            border-radius: 5%;
            height: 50px;
            width: 50px;
            margin-left: 10%;
            margin-top: -10px;
            outline: 0;
        }

}