@media (min-width: 450px) and (max-width: 900px) {

/*--------------------------------------------------------------*/
/*----------------------------EXPORT-IN-------------------------*/
/*--------------------------------------------------------------*/


.container{
  display:flex;
  width: 100%;
  height: 100vh;
}


.formcontainer{
  width: 65%;
  background-color: #fefefe;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}



.sidebar{
  width: 35%;
  height: 100%;
  background-color: black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}






.form{
  width: 73%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 6%;
border-radius: 17px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}




.boxy{
  display: flex;
  flex-direction: column;
  width: 60%;
}

.infocontainer1 > span{
  display:flex;
  align-items: center;
  color:white;
}
.infocontainer1 > h1 {
  margin-left:-5%;
  margin-bottom:10%;
  color:white;
}
.infocontainer1 > p {
  font-weight:300;
  margin-bottom:7%;
  font-style: italic;
  color:#cfcfcf;
}

.infocontainer2{
  margin-bottom: 5%;
}
.infocontainer2 > span{
 display:flex;
 align-items: center;
 color:white;
 padding: 4% 0;
}
.infocontainer2 > span > p{
  font-weight:300;
  color:white;
} 

.infocontainer2 > span > img{
  box-sizing: initial;
  padding-top:2.5%;
  padding-bottom:2.5%;
  width: 1.6rem;
  object-fit: contain;
  float: left;
  margin-right: 11%;
}

.infocontainer2 > span > a{
  font-weight:300;
  color:white;
  text-decoration:underline solid rgba(255, 255, 255, 0.397);
  font-size: max(15px + 0.2vw , 14px);
} 

}