@font-face {

    font-family: 'Seat';

    src: /*url('../fonts/seat-meta-black-58f88ee3aeeab.otf') format("opentype"), /* IE9 Compat Modes */

            url('../fonts/woff/SeatBcn-Regular.woff');

    font-weight: normal;

    font-style: normal;

}



@font-face {

    font-family: 'SeatBold';

    src: url('../fonts/woff/SeatBcn-Bold.woff') format("opentype"); /* IE9 Compat Modes */

    font-weight: normal;

    font-style: normal;

}



body {

    font-family: "Seat", Fallback, sans-serif;

}



.background_image {

    height: 100vh;

    min-height: 460px;

    min-width: 1360px;

    background-image: url("../imagens/background_index.jpg");

    background-position: right;

    background-size: cover;

    background-repeat: no-repeat;

    background-attachment: fixed;

}



.left_skew {

    transform-origin: bottom left;

    -ms-transform: skew(-28deg, 40deg);

    -webkit-transform: skew(-28deg, 0deg);

    transform: skew(-28deg, 0deg);

}



.first_skew {

    transform-origin: bottom left;

    -ms-transform: skew(-28deg, 40deg);

    -webkit-transform: skew(-28deg, 0deg);

    transform: skew(-28deg, 0deg);

}



.background_skew {

    position: fixed;

    margin-left: 26px;

    padding: 200px 0 0 110px;

    width: 230px;

    height: 100%;

    word-wrap: break-word;

}



.menu_select_models {

    position: relative;

    margin-left: 26px;

    padding: 200px 0 0 110px;

    width: 350px;

    height: 100%;

}



.menu_select_models h1 {

    font-family: "SeatBold", Fallback, sans-serif;

    width: 400px;

    text-transform: uppercase;

    font-size: 40px;

    font-weight: 700;

    color: #000000;

}



.menu_select_models .conteudo h2 {

    font-family: "Seat", Fallback, sans-serif;

    width: 400px;

}



.left_skew {

    position: absolute;

    background-color: #f5f5f5;

    width: 1260px;

    height: 100vh;

    left: -740px;

    transform-origin: inherit;

}



.first_skew {

    position: absolute;

    background-color: #f5f5f5;

    width: 1260px;

    height: 100vh;

    left: -740px;

    transform-origin: inherit;

}



.menu_select_models .conteudo {

    padding: 200px 0 0 110px;

}



.menu_select_models .conteudo h1 {

    width: 400px;

    text-transform: uppercase;

    font-size: 40px;

    font-weight: 700;

}



.select_models {

    background-color: #fff;

    margin-top: 150px;

    width: 520px;

    height: 400px;

    left: 630px;

}



.select_models .left_skew {

    position: absolute;

    background-color: #fff;

    width: 240px;

    height: 400px;

    left: -250px;

}



.exemplo {

    color: #fff;

    position: relative;

    display: inline-block;

    background-color: #ea5d1a;

    line-height: 60px;

    height: 60px;

    width: 360px;

    padding: 0 0;

    margin: 50px 0;

    margin-left: 0px;

    text-align: center;

    transform-origin: bottom left;

    z-index: 2;

    

}

.exemplo:before, .exemplo:after {

  content: "";

  width: 1px;

  top: 0px;

  position: absolute;

}

.exemplo:before {

  border-top: 60px solid transparent;

  border-right: 41px solid #ea5d1a;

  left: -40px;

}



.exemplo:after {

  border-bottom: 60px solid transparent;

  border-left: 41px solid #ea5d1a;

  right: -40px;

}

.exemplo.left{

    transform-origin: bottom left;

    -ms-transform: skew(-28deg, 40deg);

    -webkit-transform: skew(-28deg, 0deg);

    transform: skew(-28deg, 0deg);

    

    position: relative;

    background-color: #ea5d1a;

    width: 380px;

    height: 100%;

}





/*.botao{

  width: 10px;

  height: 100px;

  background: red;

  -webkit-transform: skew(0deg); /* Chrome, Opera */

/*      -ms-transform: skew(0deg);  IE */

/*          transform: skew(0deg);  Padrão */

/*}*/



/*}*/



/*.negativo {*/

 /* -webkit-transform: skew(-10deg); /* Chrome, Opera 

   /*   -ms-transform: skew(-10deg);  IE 

  /*        transform: skew(-10deg); /* Padrão */

 /* }*/





.menu_select_models h2 {

    font-family: "Seat", Fallback, sans-serif;

    width: 400px;

}



.form-section {

    min-height: 900px;

}



.mobile-section {

    display: none;

    min-height: 660px;

    position: relative;

}



.mobile-section .mobile-content {

    background: #ffffff;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    overflow: hidden;

    width: 300px;

}



.footer_row {

    position: absolute;

    width: 100%;

    /*height: 45px;*/

}



.first_skew {

    min-height: 900px;

}





.mobile-select-return {

    display: none;

    position: absolute;

    padding: 10px;

    color: #ea5d1a !important;

    z-index: 10;

}



.left-arrow {

    -webkit-transform: rotate(180deg);

    transform: rotate(180deg);

    margin-bottom: 3px;

    padding: 0 8px;

}



.right-arrow {

    margin-bottom: 3px;

    padding: 0 8px;

}



.active_item .right-arrow{

    content: url('../imagens/seta_vermelha.svg');

}



input[type=checkbox]{

    display: none;

}



.terms label {

    border: 1px solid;

    width: 15px;

    height: 15px;

    line-height: 1;

    padding: 0;

    margin-bottom: -3px;

    margin-right: 6px;

    cursor: pointer;

}



.terms label:before {

    content: "";

}



.terms label.terms_active:before {

    content: "\2713";

}



.model_red {

    color: #ea5d1a;

}



.mensagem_formulario {

    display: none;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: #252525;

    z-index: 3;

    text-align: center;

    padding: 170px 0;

}



.imagem_mensagem {

    padding: 30px 0;

}



.titulo_mensagem {

    font-family: "SeatBold", Fallback, sans-serif;

    text-transform: uppercase;

    color: #ffffff;

    font-size: 18px;

}



.texto_mensagem {

    font-family: "Seat", Fallback, sans-serif;

    font-size: 18px;

    color: #ffffff;

}

