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

 body,html{
   width:100%;
   height: 100%;
 }

 body{
  background: #0f0c29;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #24243e, #302b63, #0f0c29); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background-size: cover;
 }

 .container{
   margin: 0 100px;
   height: 100%;
 }
 .title{
   text-align: center;
   padding:30px 0;
   color:white;
   font-weight: bolder;
   font-size: 20px;
   font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   text-shadow: 1px 1px 2px black;
 }

 main{
   display:flex;
   align-items: center;
   padding: 20px 0;
   flex-wrap: wrap;
   height: calc(100% - 150px);
 }

 .container-left{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-basis: 50%;
 }

 .container-right{
   flex-basis: 50%;
 }

 .box-img > img{
   width: 100%;
 }

 .container-left form{
  width: 70%;
  margin: 30px 0;
 }

 .container-left form input[type="text"]{
   width: 100%;
   padding:5px 12px;
   height: 40px;
   border-radius: 15px;
   border: none;
   box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.664);
   outline: none;
   display: flex;
   justify-content: center;
   text-align: center;
  
 }

 .container-left form input[type="submit"]{
   padding: 12px 10px;
   width: 40%;
   display:block;
   margin: 20px auto;
   background-color: rgb(243, 146, 0);
   outline: none;
   border: none;
   color:white;
   font-size: 15px;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.685);
   font-weight: bolder;
   box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.664);
   border-radius: 20px;
   cursor: pointer;
 }


 @media(max-width:887px){
  .container-left form{
    width: 80%;
  }

  .container-left{
    flex-basis: 100%;
  }
  
   .container-right{
     flex-basis: 100%;
   }

   main{
     padding: 0;
   }

   .box-img{
     display:flex;
     justify-content: center;
   }


   .box-img > img {
    max-height: calc(100vh - 300px);
    min-height: 26vh;
    
  }


  .container{
    margin: 0 50px;
  }
  
 }


 .mask{
   width:100vw;
   height: 100vh;
   position: fixed;
   background-color: rgba(0, 0, 0, 0.521);
   z-index: 10;
   top: 0;
   left:0;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: all;
 }

 .hide{
  opacity: 0;
  display: none;
 }

 .spinner {
  margin: 50vh auto;
  width: 70px;
  text-align: center;

}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #ddd;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

 @media(max-width:375px){
  .container{
    margin: 0 20px;
  }

  h1{
    font-size: 25px;
  }

  .title{
    margin-bottom: 0;
  }
 }

@media(max-width:320px){
  .container-left form {
    width: 100%;
}
}