*{
    margin: 0;
    padding: 0;
    border:0;
  }
  
  .posts-hero-carousel .slick-track {
	transform: translate3d(0px, 0px, 0px) !important;
}

html{
    background-color: #f5f5f5;
    width: 100vw;
    overflow-x: hidden;
    font-family: Helvetica, arial, sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0;
}

body{
    
    overflow-x: hidden;
}

h1{
    font-size: 2.5rem;
    color: #FC4414;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 2rem;
}
h2{
    font-size: 2rem;
    color: #000;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

p{
    font-size: 1rem;
    color: #F4F4F4;
    line-height: 1.5;
    color: #000;
    margin-bottom: 2rem;
    text-align: justify;
}

.topo{
    background-color: #FC4414;
    border-radius: 100%;
    padding: 5px 6px;
    position: fixed;
    bottom: 50px;
    right: 50px;
    visibility:hidden;
    opacity: 0;
    transform: translateY(0);
    border: 2px solid #f4f4f4;
}

.topo img{
    width: 17px;
    height: 10px;
    box-shadow: 5px 5px 10px rgb(0 0 0 / 10%);
}

.ativo{
    visibility: visible;
    opacity: 1;
    transform: translateY(-50px);
    transition: visibility .2s, opacity .2s ease-in, transform .2s ease-in;}

.footer p{
    text-align: center;
}

.descricao{
    min-height: 100px;
    max-height: 105px;
    overflow: hidden;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.descubra{
    background-color: transparent !important;
    color: #f4f4f4 !important;
    font-weight: 600 !important;
    display: none !important;
    padding: 0;
}

@media only screen and (max-width:768px) {
     .descubra{
        display: block !important;
    }
}

.descubra::after{
    content: "⟶" !important;
}

.descricao::-webkit-scrollbar {
    display: none;
}

a{
    text-decoration: none;
}

.white{
    color: #F4F4F4 !important;
}

button{
    padding: 10px 15px;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.dir{
    margin: 0 0 10px 10px;
}

.esq{
    margin: 0 10px 10px 0;
}

button.azul{
    background-color: #0032A1;
    border: 2px solid #0032A1;
    color: #f4f4f4;
}

button.borda{
    background-color: transparent;
    border: 2px solid #0032A1;
    color: #0032A1;
}

.dimensoes{
    position: relative;
    width: 90vw;
    max-width: 1080px;
    height: 100%;
    margin: auto;
}

button.hamb{
    background-color: transparent !important;
}

.cookies{
    background-color: #FC4414;
    box-shadow: 0px 10px 10px rgba( 0,0,0,.1);
    color: #f4f4f4;
    font-size: 1rem;
    line-height: 1;
    text-align: left;
    width: 100vw;
    max-width: 1500px;
    position: fixed;
    margin: auto;
    bottom: 10px;
    max-width: 600px;
    padding: 20px;
    border-radius: 5px;
}

.bcookies{
    background-color: #f4f4f4;
    color: #FC4414;
    font-size: 1rem;
    line-height: 1;
}

.navbar{
    height: fit-content;
    width: 100vw;
    background-color: #FC4414;
    margin: auto;
    top: 0;
    padding: 0px;
    position: fixed;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 10;
}

.navbaractive{
    background-color: #f4f4f4;
    box-shadow: 0px 5px 10px rgba(0,0,0,.0512);
}

.navitens{
    width: 90%;
    max-width: 1080px;
    margin: auto;
    padding: 1rem;
    display: grid;
}

.navactive{
    padding: .5rem 0px !important;
    opacity: 1;
    transition: padding .2s ease-in;
}

.logo > svg{
    width: 86px;
    height:46px;
    transition: transform .2s ease-in;
    filter: brightness(0) invert(1);
}

.logoctive > svg{
    transform: scale(.8);
    transition: transform .2s ease-in;
    filter: none;
    float: left;
    left: -5px;
    position: relative;
}

#logo{
    left: 0;
    float: left;
    align-self: center;
}

.logo{
    grid-column: 1 / 2;
    align-self: center;
}

.links{
    grid-column: 2 / 2;
    align-self: center;
    visibility: hidden;
    opacity: 0;
    transform: scale(1);
    transition: visibility .2s, opacity .2s ease-in;
}

.active{
    visibility: visible;
    opacity: 1;
    align-self: center;
    float: right;
    transition: visibility .2s, opacity .2s ease-in;
}

.menumobile{
    display: none;
    float: right;
}
.voa{
    float: right;
    margin-left: 1rem;
    padding: 8px 12px;
    font-size: .8rem;
}

.instagram{
    background-color: #FC4414;
    padding: 4px;
    border-radius: 100%;
    display: grid;
    place-items: center;
}

.instagram svg{
    display: block;
    fill: #f4f4f4;
    height: 24px;
    width: 24px;
}

.raio{
    height: 85%;
    width: 455px;
    position: absolute;
    top: 79px;
    left: 9vw;
}

.raio img{
    height: 100%;
}

.hero{
    background-image: url("../imagens/homempeb.webp");
    background-position: left center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    width: 100vw;
    height: 97vh;
}

.mask{
    background-image: linear-gradient(to bottom, transparent, transparent, rgba(0,0,0,.2));
    width: 100%;
    height: 100%;
}

.conteudoheader{
    text-align: right;
    height: fit-content;
    position: absolute;
    right: 0;
    width: 50vw;
    max-width: 350px;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.conteudoheader{
    direction: rtl;
}

.somos{
    background-image: url("../imagens/somos.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100vw;
    height: 90vh;
    min-height: 500px;
    padding: 100px 0;

}

.dimensoes2{
    position: relative;
    width: 90vw;
    max-width: 1080px;
    height: fit-content;
    margin: auto;
    display: grid;
    grid-gap: 3rem 2rem;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.bloco{
    height: fit-content;
    align-self: center;
}

.conteudosomos{
    text-align: left;
    height: fit-content;
    position: relative;
    left: 0;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.somos img{
    position: relative;
    width: 60vw;
    max-width: 450px;
    top: 15%;
    height: auto;
    align-self: right;
}

.somosimgg{
    display: block;
    top: -50px;
    position: relative;
}

.somosimgm{
    display: none;
}

.mvv{
    background-color: #FC4414;
    height: fit-content;
    padding: 30px 0;
    background-image: url("../imagens/Raio-azul-01.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: overlay;
    background-size: 75%;
    z-index: 7;
    box-shadow: 0px 0px 50px rgba(0,0,0,.2);
}

.colunas{
    display: grid;
    grid-gap:3rem;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    height: fit-content;
    width: 95%;
    max-width: 1080px;
    margin: auto;
}

.mc h1,.mc p, .mc li{
    color: #f4f4f4 !important;
}

.mc p{
    margin-bottom: 0;
}

.mc{
    margin: 30px auto;
    text-align: left;
    width: 100%;
}

ol li::marker {
    content: "⚡ ";
  }

  html.pushbar_locked {
    overflow: hidden;
    -ms-touch-action: none;
    touch-action: none;
}

.pushbar_locked .pushbar_main_content.pushbar_blur {
    filter: blur(15px);
}

.pushbar_overlay {
    z-index: -999;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    will-change: opacity;
    transition: opacity 0.5s ease;
    opacity: 0;
    background: #3c3442;
}

html.pushbar_locked .pushbar_overlay {
    opacity: 0.8;
    z-index: 999;
}

[data-pushbar-id] {
    z-index: 1000;
    position: fixed;
    overflow-y:hidden;
    overflow-x: visible;
    will-change: transform;
    transition: transform 0.5s ease;
    background: #FC4414;
}

[data-pushbar-direction="left"][data-pushbar-id], [data-pushbar-direction="right"][data-pushbar-id] {
    top: 0;
    width: 20vw;
    max-width: 100%;
    height: 100%;
}

[data-pushbar-direction="top"][data-pushbar-id], [data-pushbar-direction="bottom"][data-pushbar-id] {
    left: 0;
    width: 100%;
    min-height: 150px;
}

[data-pushbar-direction="left"][data-pushbar-id] {
    left: 0;
    transform: translateZ(0) translateX(-100%);
}

[data-pushbar-direction="right"][data-pushbar-id] {
    right: 0;
    transform: translateZ(0) translateX(120%);
}

[data-pushbar-direction="top"][data-pushbar-id] {
    top: 0;
    transform: translateZ(0) translateY(-100%);
}

[data-pushbar-direction="bottom"][data-pushbar-id] {
    bottom: 0;
    transform: translateZ(0) translateY(100%);
}

[data-pushbar-id].opened, [data-pushbar-id] {
    display: block;
    display: table;
    transform: translateX(0px) translateY(0px);
}

ul.menu{
    position: relative;
    width: 70%;
    margin:auto;
    text-align: left;
    font-size: 1.5rem;
    font-weight: 600;
    color: #f4f4f4;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.lateral{
    background-image: url(../imagens/raiocase.svg);
    filter: brightness(0) invert(1) opacity(.1);
    background-size: cover;
    background-blend-mode: color;
    height: 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: -100px;
    width: 100%;
}

@media only screen and (max-width:768px){
ul.menu{
    font-size: 1.2rem;
}
}
.menu li{
    line-height: 2rem;
    margin-bottom: 2rem;
    list-style-type: none;
}

li a{
    color: #f4f4f4;
	display: block;
	position: relative;
    overflow:hidden;
}
a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 30%;
	height: 0.1rem;
	background-color: #f4f4f4;
	opacity: 0;
	transition: opacity 300ms, transform 300ms;
}

li a::after {
	opacity: 1;
	transform: translate3d(-100%, 0, 0);
}

li a:hover::after,
li a:focus::after {
	transform: translate3d(0, 0, 0);
}

.fechar {
    position: absolute;
    display: grid;
    cursor: pointer;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: -20px;
    background-color: #000;
    border-radius: 100%;
    padding: 20px;
}

.fechar:before, .fechar:after {
    position: absolute;
    left: 18px;
    content: ' ';
    height: 22px;
    width: 3px;
    background-color: #fff;
    top: 9px;
}

.fechar:before {
    transform: rotate(45deg);
}

.fechar:after {
    transform: rotate(-45deg);
}



.marcas{
    background-image: url("../imagens/marcas.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100vw;
    height: 90vh;
    min-height: 700px;
    padding: 100px 0;

}

.tabela{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
}

.tabela.marca{
    border-top: 1px solid #f4f4f4;
    height: 50px;
    overflow: hidden;

}
.marca>.tab:first-child{
    border-right: 1px solid #f4f4f4;
}

.marca>.tab:last-child{
    border-left: 1px solid #f4f4f4;
}

.tab p{
    margin: 10px 0 5px 10px !important;
    font-size: .8rem !important;
    word-break: break-all;
}

.tab h3{
    margin: 10px 0 10px 10px !important;
    font-size: .8rem !important;
    word-break: break-all;
}


.dimensoes3{
    position: relative;
    width: 90vw;
    max-width: 1080px;
    height: fit-content;
    margin: auto;
    display: grid;
    column-gap: 3rem;
    row-gap: 3rem;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.slider-for{
    border-radius: 20px;
    box-shadow: 10px 10px 25px rgba(0,0,0,.2);
    height: fit-content;
    border: none;
    background-color: transparent;
    border-radius: 20px;
    display: grid;
    

}

.slider-for img{
    max-width: 60%;
    height: auto;
    margin-bottom: 2rem;
    align-self: center;
}

.marcasslider{
    width: 3rem;
}

#dermo, #foocy, #after{
    position: absolute;
    z-index: 99;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: top .5s ease, visbility .5s ease, opacity .5s ease;
}
.slider-for .dermo{
    padding: 3rem;
    background-image: linear-gradient(45deg, rgb(46, 171, 255),#008aff);
    border: 2px solid #f4f4f4;
    min-height: fit-content;
    border-radius: 20px;
}

.slider-for .after{
    padding: 3rem;
    background-image: linear-gradient(45deg, #45239B,#6332F9);
    border: 2px solid #f4f4f4;
    min-height: fit-content;
    border-radius: 20px;
    position: absolute;
}

.slider-for .foocy{
    padding: 3rem;
    background-image: linear-gradient(45deg, #E42528,#FF5059);
    border: 2px solid #f4f4f4;
    min-height: fit-content;
    border-radius: 20px;
    position: absolute;
}

.slider-for h3{
        font-size: .8rem;
        line-height: 1;
        font-weight: 900;
        text-transform: uppercase;
        margin-bottom: 2rem;
        color: #f4f4f4;
}

.slider-for p{
    color: #f4f4f4;
    margin-top: 2rem;
}

.slider-nav img{
    padding: 1rem 1rem 1rem 0;
    border-radius: 20px;
    width: 7vw;
    min-width: 75px;
    max-width: 100px;
}

.slick-next, .marcas .slick-prev{
    display: none !important;
}

.botoes button{
    background-color: transparent;
}

.case{
    background-image: url("../imagens/case.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100vw;
    height: 90vh;
    min-height: 700px;
    padding: 100px 0;

}

.conteudocase{
    text-align: left;
    height: fit-content;
    position: relative;
    left: 0;
    max-width: 430px;
    align-self: center;
}

.slick-center{
    text-align: center;
    min-width: 50vw;
    min-width: 250px;
    position: relative;
    margin: auto;
}

.slick-active>.produto{
    max-height: 300px;
}
.slick-active>.produto img{
    height: 300px;
    width: auto;
}


.caseprodutos .produto{
    transition: background-image .6s ease, background-size .6s ease;
    background-image: url(../imagens/raiocaseborda.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10%;
}
.caseprodutos .produto img{
    transform: rotate(-60deg);
    transition: transform .5s ease;
    margin: auto;
}

.slick-center .produto{
    transition: background-image 1.5s ease, background-size .6s ease;
    background-image: url(../imagens/raiocase.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30%;
}

.slick-center .produto img{
    transform: rotate(-15deg);
    transition: transform .5s ease;
    position: initial;
    margin: auto;
}

.slick-arrow{
    display: block !important;
    float: right;
    padding-top: .5rem;
    background-color: transparent !important;
}

.slick-next.slick-arrow{
    display: none !important;
}

.caseprodutos h2{
    text-align: center;
}

.caseproduto .slick-list{
    width: 50vw;
    max-width: 400px;
    min-width: 250px;
    height: fit-content;
    overflow: visible;
    margin: auto !important;
    text-align: center;
}

.caseproduto .draggable{
    padding:0 !important;
    height: fit-content;
    width: 100%;
}

.slick-list{
    width: 100%;
}

.slick-slide{
    height: fit-content;
}

.slick-slide img{
    max-height: 200px;
}


.contato{
    background-image: linear-gradient(45deg, #0032A1, #ECC7C3, #FC8814);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100vw;
    height: calc(100vh - 200px);
    min-height: 700px;
    padding: 100px 0;
    position: absolute;
    padding-bottom: 150px;

}

.formbox{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../imagens/raiocase.svg);
    background-size: 25%;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(0) invert(1) opacity(.2);
    max-height: 90vh;
    align-self: center;
}

.formulario{
    display: grid;
    grid-gap: 1rem;
}


input[type = text],input[type = email],input[type = tel], select, textarea, .select-selected{
    font-family: Helvetica, arial, sans-serif;
    font-size: 1rem;
    width: calc(100% - 2rem);
    padding: 1rem;
    user-select: text;
    max-width: 1080px;
    background-color: #ffffff50 ;
    color: #000;
    -webkit-text-fill-color:#000;
    border-radius: 5px;
    cursor: text;
    -webkit-appearance: none;
    outline: none;
    position: relative;
}

.select-selected:hover,
.same-as-selected:hover,
.select-selected.select-arrow-active,
.same-as-selected,
input:focus,
textarea:focus,
select:focus,
input:-webkit-autofill:hover{
    font-weight: 600 !important;
    border: none;
    -webkit-appearance: none;
    -webkit-text-fill-color: #000;
    -webkit-box-shadow: 0 0 0px 1000px #ffffff01 inset;
    box-shadow: 0 0 0px 1000px #ffffff01 inset;
    transition: background-color 5000s ease-in-out 0s;
}


input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
    border: none;
    -webkit-appearance: none;
    -webkit-text-fill-color: #000;
    -webkit-box-shadow: 0 0 0px 1000px #ffffff01 inset;
    box-shadow: 0 0 0px 1000px #ffffff01 inset;
    transition: background-color 5000s ease-in-out 0s;

}

input:valid,
input:-webkit-autofill:valid,
textarea:focus{
    font-weight: normal;
    border-top: 2px solid #0032A1 !important;
    background-color: #ffffff50 ;
}

input:valid::after,
input:-webkit-autofill:valid::after{
    content: "aaa";
    position: absolute;
    top: 0;
    right: 0;
    color: #000;
    font-weight: 900;
}

input:placeholder-shown {
    overflow:auto;
    resize:vertical;
  }

input:invalid:not(:placeholder-shown) {
    border-top: 2px solid #FC4414 !important;
    }

  textarea{
      min-height: 70px;
  }

  textarea:not(::placeholder){
      border-top: 2px solid #0032A1 !important;
  }

  .select-selected:not(.same-as-selected){
      border-top: 2px solide red;
  }

  textarea:focus{
      height: 200px;
  }


input[type=submit]{
      position: relative;
      color: #f4f4f4 !important;
      width: fit-content !important;
      padding: .8rem 2rem;
      background-color: #0032A1;
      border-radius: 5px;
      color: #f4f4f4 !important;
      font-weight: 600;
      text-transform: uppercase;
      font-size: .7rem;
  }

/*
input:focus,
textarea:focus,
select:focus,
input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus {
    border: 2px solid #FC4414 !important;
    color: #FC4414;
    -webkit-text-fill-color:#FC4414;
    -webkit-appearance: none;
    outline: none;
    font-weight: 600;
    background-color: rgba(255, 255 , 255, .25);
    max-width: 1080px;

}

select:-webkit-autofill:hover,
textarea:-webkit-autofill:hover,
input:-webkit-autofill:hover {
    border: 2px solid #FC4414 !important;
    color: #FC4414;
    -webkit-text-fill-color:#FC4414;
    -webkit-appearance: none;
    outline: none;
    font-weight: 600 !important;
    background-color: rgba(255, 255 , 255, .25);
    max-width: 1080px;

}

input:valid,
select:valid,
select:valid,
input:-webkit-autofill,
select:-webkit-autofill,
select:-webkit-autofill{
  border: 2px solid #0032A1;
  -webkit-text-fill-color:#0032A1;
  -webkit-box-shadow:  transparent !important;
  box-shadow: transparent !important;
  background-color: transparent !important;
  font-weight: 900;
  max-width: 1080px;
}

input::placeholder{
    color: #f4f4f4;
    font-weight: 600;
    font-size: 1rem;
    margin: 1rem;
}

select, option{
    position: relative;
    margin: auto;
    width: 100%;
    padding: 1rem;
}*/

.custom-select select {
    display: none; /*hide original SELECT element:*/
  }

/*style the arrow inside the select element:*/
.select-selected:after {
  position: relative;
  content: "";
  top: 9px;
  right: 10px;
  float: right;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #FC4414 transparent transparent transparent;
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #0032A1 transparent;
  top: 4px;
}

/*style the items (options), including the selected item:*/
.select-items div{
    color: #000;
  padding: 1rem;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
}

/*style items (options):*/
.select-items {
    position: absolute;
    background-color: #f4f4f4;
    border-radius: 0 0 5px 5px;
    color: #000;
    z-index: 99;
    width: 49%;
    float: left;
}

/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
    color: #FC4414;
    font-weight: 600;
}

.bracos{
    position: absolute;
    mix-blend-mode: luminosity;
    width: 100vw;
    height:90%;
    overflow-x: hidden;
    overflow-y: visible;
}

.braco1 img, .braco2 img{
    max-width: 600px;
}


.braco1, .braco2{
    width: fit-content;
    height: fit-content;
    position: relative;
    margin: 0;
    position: absolute;
}

.braco1 img, .braco2 img{
    transform: rotate(16deg);
    margin: 0;
}

.braco1{
    top: 5%;
    left: -3%;
    margin: 0;
}

.braco2{
    top: 70%;
    right: -3%;
    margin: 0;
}

.footer{
    background-color: rgba(0,0,0,.02);
    height: fit-content;
    text-align: center;
    bottom: 0;
    position: absolute;
    width: 100vw;
}


.bmar{
    background-color: transparent !important;
    display: grid;
    text-align: center;
}

.bmar img{
    align-self: center;
    position: relative;
    margin: auto;
}

.footerelements{
    padding: 2rem;;
    width: calc(100vw - 4rem);
    margin: auto;
}

.footerelements p{
    color: #f4f4f4;
    font-weight: 600;
}

.footerinsta{
    position: relative;
    margin: auto;
    top: -50px;
    transform: scale(1.5);
}


.modal-content{
    height: 100%;
    display: grid;
    background-color: #F5F5F5;
    background-image: url(../imagens/raiocase.svg);
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: -45% 10%;
}

.close-animatedModal{
    position: relative;
    top: 30px;
    background-color: #000;
    border-radius: 5px;
    display: grid;
    padding: 10px;
    width: fit-content;
    height: fit-content;
    margin: auto;
    display: inline-block;
    color: #f4f4f4;
}

.close-animatedModal::before{
    content: url(../imagens/times-solid.svg);
    width: 15px;
    height: 15px;
    position: relative;
    top: 2px;
    display: inline-block;
    margin-right: 5px;
}

.close-animatedModal img{
    width: 20px;
    height: auto;
    align-self: center;
}

.modal{
    position: relative;
    margin: auto;
    width: 90vw;
    max-width: 500px;
    text-align: center;
    display: grid;
    align-self: center;
}

.modal hr{
    border: 1px solid #FC4414;
    margin-bottom: 25px;
}

.alinha{
    align-self: center;
}

.modal img{
    position: relative;
    margin: auto;
    border: 5px solid #FC4414;
    margin-bottom: 30px;
    border-radius: 100%;
    width: 150px;
    height: 150px;
}

.modal p{
    text-align: justify;
}

.modal h2, .modal h4{
    text-align: center !important;
    position: relative;
    margin: auto;
}

.modal h2{
    margin-bottom: 10px;
    font-size: 1.5rem;
}

.modal h4{
    margin-bottom: 25px;
}




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

    .somosimgg{
        display: none;
    }
    
    .somosimgm{
        display: block;
        text-align: center;
    }
}

@media only screen and (max-width:360px){
    
    .somosimgm{
        display: none;
    }
}


@media only screen and (min-width: 3840px){ 

    h1{
        font-size: 4rem;
        color: #FC4414;
        line-height: 1;
    }
    
    p{
        font-size: 1.5rem;
        color: #F4F4F4;
        line-height: 1.5;
        color: #000;
    }

    button{
        padding: 10px 15px;
        border-radius: 5px;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 1.5rem;
        line-height: 1;
    }
    .navbar{
        padding: 1vh 0 !important;
    }

    .voa{
        font-size: 1rem !important;
    }

    
    .somos, .marcas, .case, .contato{
        max-height: 1500px !important;
    }

    .formbox{
        height: 70% !important;
    }

    .dimensoes, .dimensoes2, .dimensoes1, .dimensoes3, .colunas, .navitens{
        max-width: 1500px !important;
    }
    .braco1 img, .braco2 img{
        max-width: 1000px !important;
    }
    .slick-slide img {
        display: block !important;
        height: 500px !important;
        width: auto !important;
    }

    .slider-nav{
        height: 300px !important;
    }


}


@media only screen and (max-height: 769px) { 

    h1{
        font-size: 2.2rem;
        color: #FC4414;
        line-height: 1;
    }
    
    p{
        font-size: .9rem;
        color: #F4F4F4;
        line-height: 1.5;
        color: #000;
    }

    button{
        padding: 10px 15px;
        border-radius: 5px;
        text-transform: uppercase;
        font-weight: 600;
        font-size: .7rem;
        line-height: 1;
    }

    .azul .voa, .borda voa{
        padding: 10px 15px;
        border-radius: 5px;
        text-transform: uppercase;
        font-weight: 600;
        font-size: .7rem !important;
        line-height: 1;
    }
    
    .logo>svg{
        
    transform: scale(.8);
    }

    .raio{
        top: 60px !important;
    }
    
    
}

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

    h1{
        font-size: 1.7rem;
        line-height: 1;
    }
    
    p{
        font-size: .9rem;
        color: #F4F4F4;
        line-height: 1.5;
        color: #000;
    }

    button{
        padding: 10px 15px;
        border-radius: 5px;
        text-transform: uppercase;
        font-weight: 600;
        font-size: .8rem;
        line-height: 1;
    }
    
}

@media only screen and (min-width: 391px) and (max-width: 767px) { 

    h1{
        font-size: 2rem;
        color: #FC4414;
        line-height: 1;
    }
    
    p{
        font-size: 1rem;
        color: #F4F4F4;
        line-height: 1.5;
        color: #000;
    }

    button{
        padding: 10px 15px;
        border-radius: 5px;
        text-transform: uppercase;
        font-weight: 600;
        font-size: .8rem;
        line-height: 1;
    }
    
}


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

    h1{
        font-size: 2.2rem;
        color: #FC4414;
        line-height: 1;
    }
    
    p{
        font-size: .9rem;
        color: #F4F4F4;
        line-height: 1.5;
        color: #000;
    }

    button{
        padding: 10px 15px;
        border-radius: 5px;
        text-transform: uppercase;
        font-weight: 600;
        font-size: .7rem;
        line-height: 1;
    }
}



@media only screen and (max-height: 600px) { 

    h1{
        font-size: 1.5rem;
        color: #FC4414;
        line-height: 1;
    }
    
    p{
        font-size: .8em;
        color: #F4F4F4;
        line-height: 1.5;
        color: #000;
    }

    button{
        padding: 10px 15px;
        border-radius: 5px;
        text-transform: uppercase;
        font-weight: 600;
        font-size: .6rem;
        line-height: 1;
    }
    
}

@media only screen and (max-height: 769px) { 
    .navitens{
        padding: .7rem !important;
    }    
}


@media only screen and (min-width: 1170px) { 
    .navitens{
        width: 100%;
        max-width: 1080px;
    }

}

@media only screen and (max-width: 800px) { 
.menudesk{
    display: none;
}

.menumobile{
    display: block;
}
}


@media only screen and (max-width: 991px) { 
    .raio{
        display: none;
    }
}


@media only screen and (min-width: 992px) and (max-width: 1500px) { 

    .hero{
        background-image: url("../imagens/homempeb-ipadpro.webp");
        background-position: right center;
    }
    
    .raio{
        left: -10vw;
    }
}

@media only screen and (min-width: 1280px) and (max-height: 720px) { 

    .hero{
        background-position: left top;
    }
    
    .raio{
        left: 0vw;
    }
}

@media only screen and (max-width: 1024px) { 
    
    .raio{
        display: none;
    }
}

@media only screen and (min-width: 576px) and (max-width: 991px) { 

    .hero{
        background-image: url("../imagens/homempeb991.webp");
        background-position: left center;
    }

}

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

    .hero{
        background-position: center;
    }

}

@media only screen and (max-height: 769px) { 
    .conteudosomos{
        top: 30% !important;
        -ms-transform: translateY(-30%) !important;
        transform: translateY(-30%) !important;
    }
    
    .somos img{
        max-width: 350px;
        top: 50px !important;
        float: right;
        right: 0;
        position: relative;
        text-align: right;
        max-height: 300px;
        width: auto;
    }
}


@media only screen and (max-width: 1014px) { 
    .colunas{
        display: grid;
        grid-template-columns: repeat(1, minmax(200px, 1fr)) !important;
        text-align: left;
        width: 90vw;
        margin-bottom: 3rem;
    }
    .mvv{
        height: fit-content;
        background-image: url(../imagens/Raio-laranja-mvv-01.svg);
        background-repeat: no-repeat;
        background-position: left;
        background-blend-mode: overlay;
        background-size: cover;
    }

ol{
    color: #000 ;
}

.mc p{
    margin-bottom: 0;
}

.mc{
    margin: 30px 0px 0px 0px !important;
    text-align: left;
    width: 100%;
}
}


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

    [data-pushbar-direction="left"][data-pushbar-id], [data-pushbar-direction="right"][data-pushbar-id] {
        top: 0;
        width: 80vw;
        max-width: 100%;
        height: 100%;
    }

}


@media only screen and (min-width: 769px) and (max-width:1080px) { 

    [data-pushbar-direction="left"][data-pushbar-id], [data-pushbar-direction="right"][data-pushbar-id] {
        top: 0;
        width: 60vw;
        max-width: 100%;
        height: 100%;
    }

}



@media only screen and (max-width: 800px) { 
    .marcasslider{
        width: 2rem;
    }
}

.mostra{
    animation: mostra 3s ease;
}

@media only screen and (min-width: 769px) { 
#dermo, #foocy, #after{
    top: 300px;
    right: -60px;
    transition: top .5s ease, visbility .5s ease, opacity .5s ease;
}

@keyframes mostra {
    0% {top: 300px; visibility: hidden; opacity: 0;}
    10% {top: -112px; visibility: visible; opacity: 1;}
    90% {top: -112px; visibility: visible; opacity: 1;}
    100% {top: 300px; visibility: hidden; opacity: 0;}
}

#dermo img{
    width: 175px;
    transform: rotate(-25deg);
}

#after img{
    width: 200px;
    transform: rotate(-25deg);
}

#foocy img{
    width: 175px;
    transform: rotate(-25deg);
}
}

@media only screen and (max-width: 768px) { 
    #dermo img{
        width: 100px !important;
        transform: rotate(-25deg);
    }
    
    #after img{
        width: 150px !important;
        transform: rotate(-25deg);
    }
    
    #foocy img{
        width: 100px !important;
        transform: rotate(-25deg);
    }

    #dermo, #after, #foocy{
        top: 300px;
        right: 0px;
        transition: top .5s ease, visbility .5s ease, opacity .5s ease;
    }

    @keyframes mostra {
        0% {top: 300px; right: 0px; visibility: hidden; opacity: 0;}
        10% {top: 200px; right: 0px; visibility: visible; opacity: 1;}
        90% {top: 200px; right: 0px; visibility: visible; opacity: 1;}
        100% {top: 300px; right: 0px; visibility: hidden; opacity: 0;}
    }
}

@media only screen and (max-width: 801px){
    
    .slider-for .foocy, .slider-for .after, .slider-for .dermo{
        min-height: fit-content;
        padding: 2rem .8rem !important;
    }
    #dermo img{
        width: 100px !important;
        transform: rotate(-25deg);
    }
    
    #after img{
        width: 150px !important;
        transform: rotate(-25deg);
    }
    
    #foocy img{
        width: 100px !important;
        transform: rotate(-25deg);
    }

}



@media only screen and (max-width: 593px) { 
    .slick-active>.produto img{
        height: 250px;
        width: auto;
        max-width: 50%;
        max-height: 50vw;
    }

}
@media only screen and (max-width: 1280px){ 
    .bracos{
        display: none;
    }
    
}

@media only screen and (max-width: 1600px){ 
    .braco1, .braco2{
        transform: scale(.6);
    }

    .braco1{
        left: -15% !important;
        top: 0 !important;
    }

    .braco2{
        right: -10% !important;
        bottom: 0 !important;
    }

    .bracos{
        height: 80%;
    }

    .formbox{
        height: 80%;
    }

}
@media only screen and (min-height: 450px) and (max-height: 823px){
    .somos, .marcas, .case, .contato{
        height: calc(100vh - 200px) !important;
        
    }

    .contato{
        padding-bottom: 200px;
    }

    .mc{
        width: 300px;
    }

    .somosimgm{
        display: none;
    }

}

@media only screen and (max-height: 800px), (max-width:411px){

    .footerelements{
        padding: .5rem;
    }

    .footerinsta{
        position: relative;
        margin: auto;
        top: -25px !important;
        transform: scale(1) !important;
    }

}

@media only screen and (max-width:411px) and (max-height: 731px){
    .somos{
        padding: 150px 0;
        height: calc(100vh + 200) !important;
    }
}

@media only screen and (min-height) and (max-height:450px){
    .somos, .case, .marcas, .case{
        max-height: calc(150vh - 200px) !important;
        max-height: calc(100vh - 200px) !important;
    }

    .hero{
        background-position: top center;
    }
}

@media only screen and (max-width: 800px) and (max-height:600px){
    .somos, .case, .marcas, .case{
        max-height: calc(70vh - 200px) !important;
        min-height: 500px;
    }

    .marcas{
        max-height: calc(70vh - 200px) !important;
        min-height: 750px;

    }

    .contato{
        min-height: 500px;
        padding-bottom: 200px;
    }
}

@media only screen and (max-width: 320px) and (max-height: 568px){
    .somos{
        min-height: 400px !important;
    }
    
    .marcas {
        max-height: calc(70vh - 200px) !important;
        min-height: 650px;
    }

    .case, .contato{
        min-height: 110vh;
    }
    
.slider-for {
    max-width: calc(100vw - 3rem);
}
#dermo img{
    width: 100px !important;
    transform: rotate(-25deg);
}

#after img{
    width: 100px !important;
    transform: rotate(-25deg);
}

#foocy img{
    width: 80px !important;
    transform: rotate(-25deg);
}
}

@media only screen and (max-width:768px) {
    .modal-content{
        background-size: 100%;
        background-position: -45vw -40% !important;
    }
    .formbox{
        background-size: 100% !important;
    }
    
}
@media only screen and (max-width:640px){
    .slick-center .produto{
        background-size: 50% !important;
    }

}

@media only screen and (min-width: 1080px){

    .item1{
        grid-column-start: 1;
        grid-column-end: 3;
    }
    
    .item6{
        grid-column-start: 1;
        grid-column-end: 3;
    }

}

@media only screen and (min-width: 3840px){
   
input[type = text],input[type = submit],input[type = email],input[type = tel], select, .select-selected{
        font-size: 1.7rem !important;
        padding: 2rem !important;
        max-width: 650px !important;
    }
    textarea{
        font-size: 1.7rem !important;
        padding: 2rem !important;
        max-width: 1410px !important;

    }
}