*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}


body{
    background-color: #f0f0f0;
    overflow-x: hidden;
}
header{
    width: 100vw;
    height: auto;
    background:linear-gradient(to left,red -80%,black);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 0px 0px 40px 40px;

}


header > .logo{
    width: 40px;
    height: 40px;
    background-image: url(../img/logo.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 20px;
}

.aviso{
  width:73%;
  height: auto;
  background-color: #ffff;
  border-radius: 100px;
  position: relative;
  margin-top: 30px;
  font-size: 17px;
  padding: 20px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 100;
  color: #8a8a8a;
  left: 50%;
  transform: translate(-50%);
  word-break: break-all;
}
form{
    width: 80%;
    height: auto;
    min-height: 300px;
    background-color: transparent;
    position: relative;
    left: 50%;
    transform: translate(-50%);
    top: 30px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


form > .cother_one{
    width: 90%;
    height: auto;
    min-height: 200px;
    /* border: 2px solid red; */
    border-radius: 30px;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #ffff;
}

#nome_de_marca{
    margin-bottom: 10px;
}


form > .cother_one > p{
    color: #8a8a8a;
    font-size: 20px;
    font-family: Anta;
    /* font-weight: bolder; */
    margin-top: 5px;
    position: relative;
    left: -26%;
    transform: translate(-50%);
}
form > .cother_thow > p{
    color: #8a8a8a;
    font-size: 20px;
    font-family:Anta;
    margin-top: 5px;
     position: relative;
     left: -26%;
    transform: translate(-50%);
}

input{
 width: 80%;
 height: 35px;
 border-radius: 4px;
 padding-left: 10px;
 border: 1px solid #343434;
 outline: none;
}


#label_cother_one{
    position: relative;
    left: 50%;
    transform: translate(-50%);
    margin-top: 10px;
    /* border: 2px solid red; */
    margin-bottom: 10px;
    color:#343434;
    width: 100%;
    padding-left: 110px;
}



form > .cother_thow{
    width: 90%;
    height: auto;
    min-height: 200px;
      /* border: 2px solid red; */
    border-radius: 30px;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 20px;
    background-color: #ffff;
}

label{
    font-family: Titillium Web;
}


label[for="referencia_site"]{
      position: relative;
    left: -28.40%;
    transform: translate(-50%);
    color:#343434;
    margin-top: 10px;
    margin-bottom: 10px;
    
  }
  
  label[for="logo_img"]{
    position: relative;
    left: -27.40%;
    transform: translate(-50%);
    color:#343434;
    margin-top: 10px;
      margin-bottom: 10px;
  }
  
  
  label[for="horario_preenchimento"]{
    position: relative;
    left: -35%;
    transform: translate(-50%);
    color:#343434;
    margin-top: 10px;
      margin-bottom: 10px;
}

#label_cother_thow{
      position: relative;
    left: 50%;
    transform: translate(-50%);
    margin-top: 10px;
    /* border: 2px solid red; */
    margin-bottom: 10px;
    color:#343434;
    width: 100%;
    padding-left: 110px;
}


select{
    width: 80%;
    height: 35px;
    border-radius: 4px;
    padding-left: 10px;
    border: 1px solid #343434;
    outline: none;
}


input[type="file"]{
    margin-bottom: 20px;
}



/* From Uiverse.io by vinodjangid07 */ 
.button {
  width: 30%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  border: none;
  cursor: pointer;
  /* border: 3px solid #ff0000; */
  background-color: rgb(255, 0, 0);
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.137);
  margin-bottom: 40px;
  border-radius: 110px;
  overflow: hidden;
}

.text {
  width: 70%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(27, 27, 27);
  color: white;
}

.arrow path {
  fill: rgb(33, 33, 33);
}

.button:hover .arrow {
  animation: slide-in-left 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-left {
  0% {
    transform: translateX(-8px);
    opacity: 0;
  }

  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

.button:active {
  transform: scale(0.97);
}


.button:hover{
    background-color: cyan;
}



@media (min-width:320px)  and (max-width:740px){
  *{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}


body{
    /* background-color: #f0f0f0; */
    overflow-x: hidden;
}
header{
    width: 100vw;
    height: auto;
    /* background:linear-gradient(to left,red -80%,black); */
    display: flex;
    justify-content: flex-start;
    align-items: center;


}


header > .logo{
    width: 40px;
    height: 40px;
    /* background-image: url(../img/logo.png); */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 20px;
}

.aviso{
  width:99%;
  height: auto;
  background-color: #ffff;
  border-radius: 20px;
  position: relative;
  margin-top: 30px;
  font-size: 17px;
  padding: 20px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 100;
  color: #8a8a8a;
  left: 50%;
  transform: translate(-50%);
  word-break: break-all;
}

form{
    width: 100%;
    height: auto;
    min-height: 300px;
    background-color: transparent;
    position: relative;
    left: 50%;
    transform: translate(-50%);
    top: 30px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


form > .cother_one{
    width:99%;
    height: auto;
    min-height: 200px;
    /* border: 2px solid red; */
    border-radius: 30px;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* background-color: #ffff; */
}

#nome_de_marca{
    margin-bottom: 10px;
}

form > .cother_one > p{
    /* color: #8a8a8a; */
    font-size: 20px;
    /* font-family: Anta; */
    /* font-weight: bolder; */
    margin-top: 5px;
    position: relative;
    left: 10%;
    transform: translate(-50%);
}
form > .cother_thow > p{
    /* color: #8a8a8a; */
    font-size: 17px;
    /* font-family:Anta; */
    margin-top: 5px;
     position: relative;
     left: 13%;
    transform: translate(-50%);
}

input{
 width: 90%;
 height: 35px;
 border-radius: 4px;
 padding-left: 10px;
 /* border: 1px solid #343434; */
 outline: none;
}


#label_cother_one{
     position: relative;
    left: 50%;
    transform: translate(-50%);
    margin-top: 10px;
    /* border: 2px solid red; */
    margin-bottom: 10px;
    color:#343434;
    width: 100%;
    padding-left: 20px;
}


form > .cother_thow{
    width: 99%;
    height: auto;
    min-height: 200px;
      /* border: 2px solid red; */
    border-radius: 30px;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 20px;
    /* background-color: #ffff; */
}

label{
    /* font-family: Titillium Web; */
}


label[for="referencia_site"]{
      position: relative;
    left: -28.40%;
    transform: translate(-50%);
    /* color:#343434; */
    margin-top: 10px;
    margin-bottom: 10px;
    
  }
  
  label[for="logo_img"]{
    position: relative;
    left: -27.40%;
    transform: translate(-50%);
    color:#343434;
    margin-top: 10px;
      margin-bottom: 10px;
  }
  
  
  label[for="horario_preenchimento"]{
    position: relative;
    left: -35%;
    transform: translate(-50%);
    color:#343434;
    margin-top: 10px;
      margin-bottom: 10px;
}

#label_cother_thow{
     position: relative;
    left: 50%;
    transform: translate(-50%);
    margin-top: 10px;
    /* border: 2px solid red; */
    margin-bottom: 10px;
    /* color:#343434; */
    width: 100%;
    padding-left: 20px;
}


select{
    width: 90%;
    height: 35px;
    border-radius: 4px;
    padding-left: 10px;
    /* border: 1px solid #343434; */
    outline: none;
}


input[type="file"]{
    margin-bottom: 20px;
}



/* From Uiverse.io by vinodjangid07 */ 
.button {
  width: 60%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  border: none;
  cursor: pointer;
  /* border: 3px solid #ff0000; */
  /* background-color: rgb(255, 0, 0); */
  /* box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.137); */
  margin-bottom: 40px;
  border-radius: 110px;
  overflow: hidden;
}

.text {
  width: 70%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: rgb(27, 27, 27); */
  /* color: white; */
}

.arrow path {
  fill: rgb(33, 33, 33);
}

.button:hover .arrow {
  animation: slide-in-left 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-left {
  0% {
    transform: translateX(-8px);
    opacity: 0;
  }

  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

.button:active {
  transform: scale(0.97);
}


.button:hover{
    /* background-color: cyan; */
}
}