:root{


	/* Colors */

	--primary: 		 #0084CE;
	--secondary: 	 #4cca4c;
	--dark:  		 #404040;
	--light:                ;
	--black: 			#000;
    --white:            #fff;

	/* Easing */
   	--ease-in: all cubic-bezier(0.0, 0.0, 0.2, 1) 250ms;
    --ease-out: all cubic-bezier(0.4, 0.0, 1, 1) 200ms;

}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{

	color:  var(--black);
}

h4.small-title{
    font-weight: 700;
}

a{
    color: var(--primary)
}

body{
    background: #fff;
    font-family: 'Nunito', sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    color: var(--dark);
    font-weight: 400;
    font-size: 16px;
}

.form-group input {
    border: 1px solid #616161;
    border-radius: 4px;
    height: 40px;
    padding: 10px;

}
.box-contact {
    margin-top: -70px;
}
/****  #Header  *****/
header {
    position: fixed;
    top: 0;
    height: 100px;
    z-index: 100;
    background: transparent;
    width: 100%;
    padding: 10px;
    transition: var(--ease-out);
    -webkit-transition: var(--ease-out);
    background: transparent;
    box-shadow: none;
}

header.decorate {
    height: 60px;
    background: #fff;
    transition: var(--ease-in);
    -webkit-transition: var(--ease-in);
     box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

}


header #logo {
    margin-top: 14px;
    transition: var(--ease-in);
    -webkit-transition: var(--ease-in);
}

header #logo img {
    height: 40px;
    transition: var(--ease-in);
    -webkit-transition: var(--ease-in);

}

header.decorate #logo img {
    height: 30px;
    transition: var(--ease-out);
    -webkit-transition: var(--ease-out);

}

header.decorate #logo {
    margin-top: 7px;
    transition: var(--ease-out);
    -webkit-transition: var(--ease-out);
}
header.decorate #logo .color,
header #logo .blanco{
    display: block;
}

header.decorate #logo .blanco,
header #logo .color{
    display: none;
}

header.decorate  .nav-tabs .nav-link {
    border-bottom: .214rem solid transparent;
    color: #000;
    text-transform: initial;
    font-size: 16px;
    font-weight: 400;
    padding: 0.55em .8575em;
    transition: var(--ease-in);
    -webkit-transition: var(--ease-in);
}

header.decorate  .nav-item .btn-outline-primary {
    background: var(--primary);
    color: var(--white) !important;
    padding: 5px 16px 3px;
    top: 2px;

        transition: var(--ease-in);
    -webkit-transition: var(--ease-in);
}

header .nav-item .btn-outline-primary {
    background: var(--primary);
    color: var(--white) !important;
    padding: 7px 16px 5px;
    top: 15px;
        transition: var(--ease-in);
    -webkit-transition: var(--ease-in);
}

#invitation a.btn.btn-outline {
    border-color: #fff;
    color: #fff;
}

header.decorate  .nav-item .btn-outline-secondary {
    background: var(--secondary);
    color: var(--white) !important;
    padding: 5px 16px 3px;
    top: 2px;

        transition: var(--ease-in);
    -webkit-transition: var(--ease-in);
}

header .nav-item .btn-outline-secondary {
    background: var(--secondary);
    color: var(--white) !important;
    padding: 7px 16px 5px;
    top: 15px;
        transition: var(--ease-in);
    -webkit-transition: var(--ease-in);
    margin-right: 15px;
}


box-price .col-6 {
    padding: 5px 15px;
    text-align: left;
}

.nav-tabs .nav-link {
    border-bottom: .214rem solid transparent;
    color: #fff;
    text-transform: initial;
    font-size: 16px;
    font-weight: 400;
    transition: var(--ease-out);
    -webkit-transition: var(--ease-out);
}


#contactanos {
    z-index: 100;
    position: fixed;
    bottom: 20px;
    /*right: 20px;*/
    left: 180px;
}
#contactanos a{
    display: table-cell;
    background: #34af23;
}   


div#mfesecure-ts-image {
    left: 0;
    right: inherit;
}

#contactanos span{
    position: absolute;
    right: 0;
    width: 180px;
    background: #306528;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    padding: 5px 15px;
    border-radius: 20px;
    color: #fff;
    top: 10px;
} 
/****  #Sections  *****/


.box-price{
    border:1px solid #707070;
    background: #fff;

    padding: 15px 0;
}


.box-price.reco{
    border:1px solid var(--primary);
    background: #fff;

    padding: 15px 0;
}
.box-price.reco .precio{
    background: var(--primary);
}
.precio {
    padding: 10px 0px;
    background: #707070;
    color: #fff;
    margin-bottom: 10px;
}

.precio p {
    margin: 0;
}
.precio h3 {
    color: #fff;
    margin: 0;
    font-weight: 600;
}
#invitation{
    background: var(--primary);

}

#invitation .subtitle,
#invitation h2,
#invitation button{
    color: var(--white);
    
}


#card-soluciones{
    background: #eee;
}

.card .material-icons{
    font-size: 64px;
    color: var(--primary);
}


p.card-subtitle {
    font-weight: 700;
    color: var(--dark);
}
/****  #Prefixes  *****/

form{
    margin:0;
}

.container-fluid.fix,
.row.fix{
	max-width: 1200px;
    margin:0 auto;
}
.row{
    margin-right: 0;
    margin-left: 0;
}

 .btn.btn-raised.btn-primary {
    color: #fff;
    background-color: var(--primary);
    border-color: var(--primary);
    font-size: 16px;
    text-transform: initial;
    font-weight: 700;
}

.btn.btn-raised.btn-primary:hover{
    color: #fff;
    background-color: #03A9F4;
    border-color: #03A9F4;
}



.custom-file-control, .form-control, .is-focused .custom-file-control, .is-focused .form-control {
    background-image: none;
}
bmd-form-group [class*=" bmd-label"], .bmd-form-group [class^=bmd-label] {
    position: absolute;
    pointer-events: none;
    transition:none;
    font-size: 15px !important;
    background: #fff;
    transform: translate(10px, 5px);
    -webkit-transform: translate(10px, 5px);
    padding: 0px 5px;
}

.btn-whatsapp{
    background: #34af23 !important;
    color: #fff !important;
    margin: 20px 0;
}

.btn-whatsapp img{
    max-width: 24px;
    padding-right: 5px;
}



.is-focused [class*=" bmd-label"], .is-focused [class^=bmd-label] {
    color: var(--primary);
}

.is-focused input, .is-focused textarea {
    border-color: var(--primary) !important;
}


[class*=" bmd-label"], [class^=bmd-label] {
    color: rgba(0, 0, 0, 0.70);
}
.btn-primary.custom-file-control:before, .btn.btn-primary {
    color: var(--primary);
    background-color: transparent;
    border-color: #ccc;
    font-size: 16px;
    text-transform: initial;
    font-weight: 400;
}

button.btn.btn-outline-primary {
    font-size: 16px;
    text-transform: inherit;
    font-weight: 700;
    border-color: #fff;
}

/****  #Nav *****/



#hero-header {
    height: 100vh;
    width: 100%;
}


#hero-content {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    z-index: 5;
    max-width: 800px;
    padding: 15px;
    text-align: center;
    overflow: hidden;
    width: 100%;
}


#hero-content h1 {
    font-size: 48px;
    margin-bottom: 1rem;
    color: #fff;
    font-weight: 700;
}

#hero-content h4{
    margin-bottom: 2rem;
    color: #fff;
    font-weight: 300;


}


.bg-gray{
    background: #eee;
    display: block;
}
#owl-nosotros {
    margin: 0 auto;
    max-width: 600px;
    width: 100%;
}

div#owl-hero {
    background: #000;
}

.item.hero{
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.item.hero.hero1{
    background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url(../imglanding/bg-smart4.jpg) ;
}

.item.hero.hero2{
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),url(../imglanding/bg-smart.jpg);
}

.item.hero.hero3{
    background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url(../imglanding/bg-smart3.jpg);
}
.btn.nav-link.login {
    padding: 5px 16px;
    background: var(--primary);
    margin-top: 14px;
    border-radius: 4px;
}

.btn.nav-link.login {
    padding: 5px 16px;
    background: var(--primary);
    margin-top: 14px;
    border-radius: 4px;
}


.btn .material-icons{
    vertical-align: middle;
}



.calltoact {
    color: #fff;
    background-color: var(--secondary);
    border: 1px solid var(--secondary);
    text-transform: inherit;
    font-size: 18px;
    font-weight: 600;
    transition: var(--ease-out);
    -webkit-transition: var(--ease-out);
}

.calltoact:hover{
	transition: var(--ease-in);
	-webkit-transition: var(--ease-in);
    color: #000;
    background-color: #fff;
}


.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #0084ce;
}


#clientes{
	background: #fff;
	padding: 20px 0;
}

#clientes img.img-cliente {
    -webkit-filter: saturate(0%);
    filter: saturate(0%);
    max-width: 120px;
    margin: 0 auto;
    transition: var(--ease-out);
    -webkit-transition: var(--ease-out);
}
#clientes img.img-cliente:hover {
    -webkit-filter: saturate(100%);
    filter: saturate(100%);
    max-width: 120px;
    margin: 0 auto;
    transition: var(--ease-in);
	-webkit-transition: var(--ease-in);
}

#owl-clientes .owl-wrapper {
 	margin:20px 0;
}

#owl-clientes .owl-wrapper {
  display: table !important;
}
#owl-clientes .owl-item {
  display: table-cell;
  float: none;
  vertical-align: middle;
}
#owl-clientes .owl-item > div {
  text-align: center;
}


/***** Texts *****/

.subtitle {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    font-size: 18px;
    color:var(--dark);
}


iframe.video{
    width: 600px;
    height: 350px;
}

/*** Titulo ***/

#tiny-header{

    background:url(../imglanding/bg-smart-blur.jpg);
    width: 100%;
    height: 250px;
}

.icon{
    max-width: 220px;
    margin:0 auto;
}

#tiny-header .title{
    width: 100%;
    top: 125px;
    color: #fff;
    text-align: center;
    position: absolute;
    font-weight: 700;
}

section#beneficios {
    background: var(--primary);
    color: #fff;
}

section#beneficios  .owl-item .card {
    min-height: 160px;
}
/*** Login  ***/


#login-content {
    background: url(../imglanding/bg-smart-blur.jpg);
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
}
.box-login {
    padding:15px;
    width: 100%;
    max-width: 400px;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    position: absolute;

}


.back{
    bottom: 30px;
    position: absolute;
    left: 50%;
    color: #fff;
    transform: translateX(-50%);
}
.box{
    padding:15px 0;
    background: #fff;
        border-radius: 4px;
}

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

    header {
        background: #fff;
        z-index: 150;
        height: 50px;
             box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    }

 


    header #nav-button {    
        position: fixed;
        right: 0;
        top: 0;
        width: 50px;
        height: 50px;
        padding: 10px;
        background: transparent;
        border: 0;
        transform: scale(1);
        transition: var(--ease-out);
        -webkit-transition: var(--ease-out);
        border-radius: 50%;
        background: transparent;
        display: block !important;
    }


    header #nav-button.active {
        transform: scale(.7);
        transition: var(--ease-in);
        -webkit-transition: var(--ease-in);
        background:var(--primary);
    }



    header #nav-button span{
        background: var(--primary);
        width: 28px;
        height: 2px;
        border-radius: 0px;
        position: absolute;
        left: 11px;
        transition: var(--ease-out);
        -webkit-transition: var(--ease-out);

    }

    header #nav-button.active span{
        background:#fff;
    }

    header #nav-button span.line1{
        top: 13px;
    }
    header #nav-button span.line2{  
        top: 24px;
    }
    header #nav-button span.line3{
        top: 35px;
    }

    header #nav-button.active span.line1{
        -webkit-transform: rotate(225deg);
        -moz-transform: rotate(225deg);
        -ms-transform: rotate(225deg);
        -o-transform: rotate(225deg);
        transform: rotate(225deg);
        top: 24px !important;
    }
    header #nav-button.active span.line2{
        width: 0px !important;
    }
    header #nav-button.active span.line3{
        -webkit-transform: rotate(-225deg);
        -moz-transform: rotate(-225deg);
        -ms-transform: rotate(-225deg);
        -o-transform: rotate(-225deg);
        transform: rotate(-225deg);
        top: 24px !important;
    }


    #menu {
        background: #fff;
        position: fixed;
        right: 0;
        top: 0;
        width: 200px;
        height: 100vh;
        padding-top: 50px;
        z-index: -1;
        transform:translateX(200px);
        -webkit-transform:translateX(200px);
        transition: var(--ease-out);
        -webkit-transition: var(--ease-out);

    }

    #menu.on {

        -webkit-transition: var(--ease-in);
        transition: var(--ease-in);
        transform:translateX(0px);
        -webkit-transform:translateX(0px);
    }

    #menu li.nav-item {
        width: 100%;
        text-align: left;
    }

    #menu li.nav-item a{
        color: var(--dark);
        padding: 8px;
            width: 100%;
    }

        header #logo .blanco{
            display: none;
        }

         header #logo .color{
            display: block;
            position: relative;
            left: -20px;
            height: 30px;
           
        }

        header #logo {
        margin-top: 14px;
        transition: var(--ease-in);
        -webkit-transition: var(--ease-in);
        width: 100% !important;
        text-align: center;
        margin: 0;
        max-width: 100%;
        flex: 0 0 100%;
    }


    #hero-content h1 {
        font-size: 30px;
     
    }

    #hero-content h4 {

        font-size: 16px !important;
    }


iframe.video {
    width: 100%;
    height: auto;
}

h4.small-title {
    font-size: 20px;
    font-weight: 700;
}


.subtitle, p {
    font-size: 16px;
}


h2{font-size: 24px;}

#overlay{
        background: rgba(0, 0, 0, 0.5);
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        z-index: 98;
        position: fixed;
        display: none
    }

    #overlay.on{
        display: block;
    }

    #tiny-header {
        height: 180px;
    }

    #tiny-header .title {
        font-size: 28px;
        top: 100px;
    }

    footer{
        text-align: center;
    }

    .box-contact {
        margin-top: 0px;
    }

#content h4 {
    font-size: 18px;
    margin-bottom: 0;
}

}