
@font-face {
    font-family: 'futurabold';
    src: url('../font/futura_bold_font-webfont.woff2') format('woff2'),
         url('../font/futura_bold_font-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'futurabook';
    src: url('../font/futura_book_font-webfont.woff2') format('woff2'),
         url('../font/futura_book_font-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'futuraextra_black';
    src: url('../font/futura_extra_black_font-webfont.woff2') format('woff2'),
         url('../font/futura_extra_black_font-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'futuraheavy';
    src: url('../font/futura_heavy_font-webfont.woff2') format('woff2'),
         url('../font/futura_heavy_font-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'futuralight';
    src: url('../font/futura_light_bt-webfont.woff2') format('woff2'),
         url('../font/futura_light_bt-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'futuralight';
    src: url('../font/futura_light_font-webfont.woff2') format('woff2'),
         url('../font/futura_light_font-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'futuramedium';
    src: url('../font/futura_medium_bt-webfont.woff2') format('woff2'),
         url('../font/futura_medium_bt-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'futuramedium2';
    src: url('../font/futura_medium_condensed_bt-webfont.woff2') format('woff2'),
         url('../font/futura_medium_condensed_bt-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'futura_xblk_btextra_black';
    src: url('../font/futura_xblk_bt-webfont.woff2') format('woff2'),
         url('../font/futura_xblk_bt-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'futuralight_condensed';
    src: url('../font/futura-condensedlight-webfont.woff2') format('woff2'),
         url('../font/futura-condensedlight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'futuraextra_black_italic';
    src: url('../font/tt0205m_-webfont.woff2') format('woff2'),
         url('../font/tt0205m_-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'futurabold2';
    src: url('../font/unicode.futurab-webfont.woff2') format('woff2'),
         url('../font/unicode.futurab-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body{
    font-family: 'futuralight_condensed';
}

strong{
    font-family: 'futurabold2';
}

footer{
    font-weight: 200;
}

footer>div>div>div>p{
    margin-bottom: 0px;
}

.animatedtitle {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
  }

  .animatedtitle2 {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
  }



.flex {
    display: flex;
}

.line-bottom {
    height: 45px;
    width: 100%;
    background-color: #ff171b;
    color: #ffffff;
}

.redes{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.redes>a{
    text-decoration: none;
    color: #ffffff;
    margin-left: 10px;
    margin-right: 10px;
}

.flex > div {
    width: 50vw;
    height: calc( 100vh - 45px );
}

.flex > div:nth-child(1) {
    background-image: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url(../img-placa/shell.png);
    background-size: cover;
}

.flex > div:nth-child(2) {
    background-image: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url(../img-placa/estacionamiento.png);
    background-size: cover;
}

.circulo {
    display: block;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 40%;
    left: 50%;
    margin-left: -90px;
    z-index: 999999;
}

.flex > div > div {
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: flex-start;
    height: 100%;
    padding: 30px;
}

.circulo img {
    width: 100%;
}

h1 {
    color: white;
    font-weight: 400;
    font-family: 'futurabold2';
}

.titulo{
    margin-top: 130px;
}

button:focus {
    outline: 0;
}

button {
    margin:20px;
    text-align: center;
    background: transparent;
    border: solid white 2px;
    color: #ffffff;
    font-weight: 200;
    margin-top: 9px;
    height: 50px;
    width: 20%;
    font-size: 25px;

}

button:hover {
    background: #ff171b;

}

@media ( max-width: 1120px ){
    .circulo{
        display: none;
    }

    h1{
        font-size: 30px;
    }

    button{
        width: 50%;
    }
}

@media ( max-width: 767px ) {

    .flex {
        flex-direction: column;
    }

    .flex > div {
        width: 100%;
        height: 50vh;
    }

    .circulo {
        height: 50vw;
        width: 50vw;
    }

    .titulo{
        margin-top: 65px;
    }

    h1 {
        margin-top: 20px;
        font-size: 2rem;
    }

    button {
        font-size: 25px;
        width: auto;
    }

    footer{
        display:none;
    }
}

@media ( max-width: 450px ){
    h1{
        font-size: 25px;
    }

    .titulo{
        margin-top: 30px;
    }
}