/* font-family: 'Raleway', sans-serif; */


/* @group SHARED STRUCTURES AND STYLES
------------------------------------ */
body { overflow-x: hidden;}
#wrapper { width: 100%; }
#wrapper { width: 100%; }


a, button, [type="submit"] { cursor: pointer;
    -webkit-transition: color 0.27s linear, background 0.27s linear, border-width .3s, border-color 0.27s linear, opacity 0.3s linear, visibility 0.3s linear, box-shadow 0.3s linear, -webkit-transform 0.3s linear;
    -moz-transition: color 0.27s linear, background 0.27s linear, border-width .3s, border-color 0.27s linear, opacity 0.3s linear, visibility 0.3s linear, box-shadow 0.3s linear, -moz-transform 0.3s linear;
    -ms-transition: color 0.27s linear, background 0.27s linear, border-width .3s, border-color 0.27s linear, opacity 0.3s linear, visibility 0.3s linear, box-shadow 0.3s linear, transform 0.3s linear;
    -o-transition: color 0.27s linear, background 0.27s linear, border-width .3s, border-color 0.27s linear, opacity 0.3s linear, visibility 0.3s linear, box-shadow 0.3s linear, transform 0.3s linear;
    transition: color 0.27s linear, background 0.27s linear, border-width .3s, border-color 0.27s linear, opacity 0.3s linear, visibility 0.3s linear, box-shadow 0.3s linear, transform 0.3s linear;
}
.video-box,
.img-box { overflow: hidden; position: relative; }
.img-box > img { object-fit: cover; object-position: center center; height: 100%; width: 100%!important; }
.img-box video { object-fit: cover; object-position: center center; height: 100%; width: 100%!important; }
@supports(object-fit: cover) {
  .img-box > img { height: 100%!important; }
}

/* Fonts */
h1 { font-size: 2.7em; line-height: 1.14em; color: var(--main-white); font-weight: 900; }
h2 { font-size: 2.4em; line-height: 1.16em; color: var(--main-gray); font-weight: 900; }
h3 { font-size: 1.9em; line-height: 1.36em; color: var(--main-gray); font-weight: 700; }
p { font-size: 1.3em; line-height: 1.3em; color: var(--main-white); font-weight: 400; }
li { font-size: 1.3em; line-height: 1.3em; color: var(--main-gray); font-weight: 400; }

@media only screen
and (min-width : 960px ) {
    h1 { font-size: 4.6em; line-height: 1.17em; }
    h2 { font-size: 4.6em; line-height: 1.17em; }
    h3 { font-size: 2.4em; line-height: 1.25em; }
    li { font-size: 1.6em; line-height: 1.33em; letter-spacing: 0.03em; }
    p { font-size: 1.8em; line-height: 1.33em; letter-spacing: 0.03em; }
}   

/* Bttns */
.bttn {
    position: relative;
    display: inline-block;
    border-radius: 2rem;
    text-align: center;
    color: var(--main-white);
    font-weight: 700;
    font-size: 1.4em;
    line-height: 1.14em;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    padding: .8rem 2rem;
}
.bttn::before {
    content: "";
    display: inline-block;
    border: .1rem solid var(--main-white);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 2rem;
    transition: border .3s;
}
.bttn--green {
    background: var(--bttn-green);
    border: 0;
}
.bttn--blue {
    background: var(--bttn-blue);
    border: 0;
}
.bttn--gray {
    background: linear-gradient(355.58deg, #231F20 -41.75%, #C6C4C4 170.9%);
}
@media only screen
and (min-width : 961px ) {
    .bttn {
        padding: .8rem 2.8rem;
        font-size: 1.6em;
        line-height: 1.33em;
        letter-spacing: 0.02em;
    }
    @media (hover: hover) {
        .bttn:hover::before {
            border-width: .2rem;
        }
    }
}  
@media only screen
and (max-width : 960px ) {
    .bttn-transparent-mobile {
        background: transparent;
        color: var(--main-white);
    }
} 


/* Whatsapp */

.logo-whatsapp {
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 3rem;
    z-index: 5;
}
.logo-whatsapp__ico {
    width: 6rem;
    height: auto;
} 


::-webkit-input-placeholder { color:#fff!important; opacity: 1; -webkit-transition: opacity 0.3s linear; transition: opacity 0.3s linear; }
::-moz-placeholder { color: #fff!important; opacity: 1; -moz-transition: opacity 0.3s linear; transition: opacity 0.3s linear; }
:-ms-input-placeholder { color:  #fff!important; opacity: 1; transition: opacity 0.3s linear; -ms-transition: opacity 0.3s linear; }
:-moz-placeholder { color:  #fff!important; opacity: 1; -moz-transition: opacity 0.3s linear; transition: opacity 0.3s linear; }
:focus::-webkit-input-placeholder { opacity: 0; }
:focus::-moz-placeholder { opacity: 0; }
:focus:-ms-input-placeholder { opacity: 0; }
:focus:-moz-placeholder { opacity: 0; }


@media only screen and (min-width : 961px) {
    .mobile {
        display: none;
    }
}
@media only screen and (max-width : 960px) {
    .mobile {
        width: 100%;
    }
}