@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800&display=swap');
/** #######################
        Global
####################### **/
html {
    box-sizing: border-box;
    font-size: 62.5%; /** 1rem = 10px **/
}
*, *:before, *:after {
    box-sizing: inherit;
}
body {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.6rem;
    line-height: 1.4;
    color: white;
}
.container {
    max-width: 1200px;
    width: 100%;
    padding: 20px;
    margin: 0 auto;
}
h1,
h2,
h3,
h4,
p {margin: 0;}

h1 {font-size: 5rem;}
h2 {font-size: 3rem;}
h3 {font-size: 2.4rem;}
h4 {font-size: 2rem;}

img {max-width: 100%;}

a{text-decoration: none;}

/** #######################
        Utilities
####################### **/
.centrar-texto {text-align: center;}
.center-box{margin:0 auto;}
.no-margin {margin: 0;}

/** #######################
        Grid
####################### **/
@media (min-width: 768px) {
    .grid {display: flex;justify-content: space-between;flex-wrap: wrap;}
    .col-center {justify-content: center;}
    .col-1 {flex: 0 0 calc(8.3%);}
    .col-2 {flex: 0 0 calc(16.6%);}
    .col-3 {flex: 0 0 calc(24.9%);}
    .col-4 {flex: 0 0 calc(33.3%);}
    .col-5 {flex: 0 0 calc(41.6%);}
    .col-6 {flex: 0 0 calc(50%);}
    .col-7 {flex: 0 0 calc(58.3%);}
    .col-8 {flex: 0 0 calc(66.6%);}
    .col-9 {flex: 0 0 calc(74.9%);}
    .col-10 {flex: 0 0 calc(83.3%);}
    .col-11 {flex: 0 0 calc(91.6%);}
    .col-12 {flex: 0 0 100%;}
}

/** #######################
        Spaces
####################### **/
.pt-0{padding-top: 0!important}
.mt-0{margin-top: 0!important}
.pb-0{padding-bottom: 0!important}
.mb-0{margin-bottom: 0!important}
.mt-1{margin-top: 1rem} .mt-2{margin-top: 2rem} .mt-3{margin-top: 3rem} .mt-3{margin-top: 5rem} .mb-1{margin-bottom: 1rem} .mb-3{margin-bottom: 3rem} .mb-3{margin-bottom: 5rem} 
.pt-1{padding-top: 1rem} .pt-3{padding-top: 3rem} .pt-3{padding-top: 5rem} .pb-1{padding-bottom: 1rem} .pb-3{padding-bottom: 3rem} .pb-3{padding-bottom: 5rem} 
.my-1{margin: 1rem 0} .my-2{margin: 2rem 0} .my-3{margin: 3rem 0} .my-3{margin: 5rem 0} .mx-1{margin: 0 1rem} .mx-3{margin: 0 3rem} .mx-3{margin: 0 5rem} 
.py-1{padding: 1rem 0} .py-3{padding: 3rem 0} .py-3{padding: 5rem 0} .px-1{padding: 0 1rem} .px-3{padding: 0 3rem} .px-3{padding: 0 5rem} 

/** #######################
        Buttons
####################### **/
.btn {
    text-align: center;
    padding: .7rem 2.5rem;
    background-color: transparent;
    color: #fff;
    text-decoration: none;
    font-size: 1.7rem;
    border-radius: 1rem;
    border: 2px solid #fff;
    transition: 0.3s;
}
.btn:hover {
    cursor: pointer;
    color: #1c1c1c;
    background-color: #fff;
    border: 2px solid #1c1c1c;
}
@media (min-width: 768px) {

}

/** #######################
        Header Content
####################### **/

.header-image{
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/bg.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
}
.logo{
    padding: 20px;
    position: absolute;
}
.header-text h1{
    font-weight: 300;
    text-align: center;
    font-size: 3rem;
    padding: 7rem 0 .5rem 0;
}
.header-text p{
    padding: 10px 0;
    font-size: 1.5rem;
    font-weight: 300;
    text-align: center;
}
.header-text p span{
    font-size: 2rem;
}

@media (min-width:768px) {
    .header-image{
        background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../images/bg.jpg);
    }
    .header-text h1{
        font-size: 4.5rem;
        text-align: left;
        padding: 15rem 0 1rem 0;
    }
    .header-text p{
        font-size: 2rem;
        font-weight: 300;
        text-align: left;
    }
    .header-text p span{
        font-size: 3rem;
    }
}

/** #######################
        Form Content
####################### **/

.header-form{
    background-color: rgba(0, 0, 0, .5);
    height: 48rem;
    width: 100%;
    padding: 2rem;
    margin: 2rem 0;
}
.header-form h2{
    font-size: 2rem;
    text-align: center;
}
.content-form {
    margin: 2.5rem 0;
}
.content-form input{
    font-size: 1.3rem;
}
.content-form label{
    flex: 0 0 100%;
}
.content-form input:not([type="submit"]),
select{
    border: 1px solid #e1e1e1;
    padding: 1rem;
    margin: 1rem 0;
    width: 100%;
}

.btn-form{
    margin-top: 1rem;
    width: 100%;
}

@media (min-width:768px) {
    .header-form{
        background-color: rgba(0, 0, 0, .3);
        height: 50rem;
    }
    .btn-form{
        width: auto;
    }
    .content-form input {
        font-size: 1.6rem;
    }
}
/** #######################
        Main Content
####################### **/

.main-content {
    text-align: center;
}
.main-title{
    padding-top: 40px;
    color: #1c1c1c;
}
.main-title h2{
    font-weight: 400;
    font-size: 3rem;
}
.ws-text{
    text-align: center;
    position: absolute;
    top: 20%;
    padding: 0 40px;
    color: white;
    z-index: 99;
}
.ws-text h3{
    padding-bottom: 1rem;
}
.ws-text p{
    font-weight: 300;
}
.ws-box-fix{
    width: 100%;
    height: 400px;
    border-radius: 80px 0 80px 0;
    margin: 40px auto;
    overflow: hidden;
}
.ws-box{
    height: 400px;
    width: 300px;
    margin: 0px auto;
    border-radius: 80px 0 80px 0;
}
.ws1{
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/ws1.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
}
.ws2{
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/ws2.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
}
.ws3{
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/ws3.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
}
.ws4{
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/ws4.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
}
.ws5{
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/ws5.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
}
.ws6{
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/ws6.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
}
@media (min-width:768px) {
    .main-title h2{
        font-size: 4rem;
    }
    .ws-box-fix{
        width: 300px;
    }
}
/** #######################
        Call2Action
####################### **/

.line-action{
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(../images/line-bg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    padding: 20px 0;
}
.line-action h2{
    font-weight: 300;
    text-align: center;
    margin-bottom: 15px;
    font-size: 2.5rem;
}
.btn-call-action{
    width: 100%;
}
@media (min-width:768px) {
    .line-action h2{
        font-weight: 300;
        text-align: left;
        margin-bottom: 0px;
        font-size: 3rem;
    }
    .btn-call-action{
        width: auto;
    }
}
/** #######################
        Footer Content
####################### **/

.footer-content{
    background-color: #000;
    color: #777;
}
.footer-content img{
    height: 20px;
}
.copy,
.rrss{
    text-align: center;
    padding: .7rem;
}
@media (min-width:768px) {
    .copy,
    .rrss{
        padding: 0;
    }
    .copy{
        text-align: left;
    }
    .rrss{
        text-align: right;
    }
}
/** #######################
        WhatsApp
####################### **/

.wsp {
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 1em;
    display: none;
}
.wsp img{
    height: 5rem;
}
@media (min-width: 768px) {
    .wsp img {
        height: 7rem;
    } 
}


/** #######################
        Transition
####################### **/

.zoom{
transition: transform .2s;
}
.zoom:hover{
transform: scale(1.1);
}
.rotate{
    transition-duration: 0.3s
}
.rotate:hover{
    transform: rotate(180deg);
}

.errorForm{
    border: 2px solid #F55173!important;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
#success, #error, .hide-form {
    display: none;
}
.show-msg{
    display: visible;
    text-align: center;
    line-height: 48rem;
}
.msg{
    background-color: #F55173;
    padding: 3rem 1rem;
    border-radius: 2rem;
    text-align: center;
    margin: 5rem 0;
}
.msg p{
    font-size: 3rem;
    font-style: normal;
}