body{
  margin: 0;
}

a {
  outline: none;
}

label, input, button {
  font-size: 17px;
}

.buyWrapper{
  margin: 0;
  color: white;
  font-family: 'Open Sans';
  display: flex;
  height: 100vh;
}

.buyWrapper a{
  text-decoration: none;
  color: white;
  font-weight: bold;
}

.right-side{
  width: 60%;
  background: rgba(0, 43, 64, .81);
/*background-image: url("https://images.unsplash.com/photo-1521579498714-ff08ba4836ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=047f2ecdc8c5729225f695eacf17a0e8&auto=format&fit=crop&w=1868&q=80");*/
background-image:  url(bg.png);
/*background-image: linear-gradient( rgba(0, 43, 64, .81),  rgba(0, 43, 64, .81)), url("https://images.unsplash.com/photo-1521579498714-ff08ba4836ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=047f2ecdc8c5729225f695eacf17a0e8&auto=format&fit=crop&w=1868&q=80");*/
background-image: linear-gradient( rgba(0, 43, 64, .81),  rgba(0, 43, 64, .81)), url("bg.png");
background-position: center center;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}

.r-content{
max-width: 70%;
display: flex;
flex-wrap: wrap;
justify-content: center;
animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
-o-animation: fadein 2s; /* Opera */
}
@keyframes fadein {
from {
    opacity:0;
}
to {
    opacity:1;
}
}
@-moz-keyframes fadein { /* Firefox */
from {
    opacity:0;
}
to {
    opacity:1;
}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
from {
    opacity:0;
}
to {
    opacity:1;
}
}
@-o-keyframes fadein { /* Opera */
from {
    opacity:0;
}
to {
    opacity: 1;
}
}

.r-content img{
  width: 150px;
  height: 150px;
}

.r-content h4{
  font-size: 22px;
  font-weight: normal;
  line-height: 31px;

}

.left-side{
  width: 40%;
  background: linear-gradient(to bottom right, #00A4CC, #00488D);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.l-content{
  max-width: 90%;
  display: flex;
flex-wrap: wrap;
justify-content: center;
text-align: center;
}

.signIn h1{
  text-align: center;
  font-weight: normal;
}

.signIn form{

}

.l-content label{
  display: block;
  text-align: left;
  padding-bottom: 6px;
  padding-top: 34px;
}

.l-content input{
  outline: none;
  border: none;
  border-bottom: 1px solid white;
  width: 100%;
  padding: 0px 1px 4px;
  text-align: left;
  color: white;
  background: none;
}

.l-content input::placeholder{
  color: white;
  opacity: 0.5;
}

 .l-content form p{
   font-size: 12px;
   margin-top: 3px;
   text-align: right;
   font-weight: lighter;
 }

 .submit{
   outline: none;
   border: none;
   background: #37a1ff;
   width: 100%;
   border-radius: 100px;
   padding: 15px;
   color: white;
    transition: background 0.2s ease;
  margin-top: 40px;
 }

 .submit:hover{
   cursor: pointer;
   background: #00488D;
 }

 .bottomMsg{
   background: #00488D;
   width: 100%;
   padding: 20px;
   text-align: center;
   font-size: smaller;
 }

 @media only screen and (max-width: 600px){
   .buyWrapper{
     flex-wrap: wrap;
   }
   .right-side, .left-side{
     width: 100%;
     padding-top: 40px;
   }

   .submit{
     margin-bottom: 50px;
   }

 }