body {
    font-family: 'Roboto';
    border-radius: 11px;
    background: rgb(216, 208, 208);
  }
  ::-webkit-input-placeholder { 
    color: blue;
  }
  ::-moz-placeholder { 
    color: blue;
  }
  :-ms-input-placeholder { 
    color: blue;
  }
  :-moz-placeholder { 
    color: blue;
  }
  .container{
     display:true;
     position:absolute;
      width: auto;
      height:auto;
      top: calc(50% - 240px);
      left: calc(40% - 160px);
     border-radius:15px 15px 15px 15px;
  }
  .c1{
     background-color:white;
     width:300px;
     height:500px;
     display:inline-block;
     border-radius:15px 15px 15px 15px;
  }
  
  .c11{
     background-size:300px 400px;
     background-repeat: no-repeat;
     background-color:blue;
     width:300px;
     height:400px;
     display:inline-block;
     position:absolute;
     z-index:4;
     border-radius:15px 15px 200px 200px;
  }
  #left, #right {
     color:white;
     display: inline-block;
     width:146px;
     height: 500px;
     background-color:white;
     cursor:pointer;
  }
  #left{
     border-radius:15px 0px 0px 15px;
  }
  #right{
     border-radius:15px 15px 15px 0px;
  }
  .left_hover{
     color:#EE9BA3;
     box-shadow: 5px 0 18px -10px #333;
     z-index:1;
     position:absolute;
  }
  .right_hover{
     box-shadow: -5px 0 15px -10px #333;
     z-index:1;
     position:absolute;
  }
  .s1class{
     color:blue;
     position:absolute;
     bottom:0;
     left:63%;
     margin-left: -50%;
  }
  .s1class span,  .s2class span{
     display:block;
  }
  .su{
     font-size:20px;
  }
  .s2class{
     color:blue;
     position:absolute;
     bottom:0;
     right:63%;
     margin-right: -50%;
  }
  .mainhead{
     color:white;
     font-size:24px;
     text-align:center;
     margin-top:50px;
  }
  .mainp{
     color:white;
     font-size:13px;
     text-align:center;
     margin-top:10px;
  }
  .c2{
     background-color:white;
     width:300px;
     height:500px;
     border-radius:15px;
     position:absolute;
     left:370px;
     display:inline-block;
  }
  .username{
     font-weight: bold;
     width: 200px;
     margin: 0 35px 20px ;
     height: 35px;
     padding: 6px 15px;
     border-radius: 5px;
     outline: none;
     border: none;
     background: #F6F7F9;
     color: #748194;
     font-size: 14px;
  }
  .btn a{
   color: white;
  }
  
  .btn{
     font-weight: bold;
     width: 230px;
     margin: 0 35px 20px ;
     height: 45px;
     padding: 6px 15px;
     border-radius: 5px;
     outline: none;
     border: none;
     background: blue;
     color: white;
     font-size: 14px;
  }
  .signup1{
     color:blue;
     font-size:30px;
     text-align:center;
  }
  a{
     text-decoration: none;
  }
  .signup2{
     color:blue;
     font-size:20px;
     text-align:center;
  }
  .signup{
     display:initial;
  }
  .signin{
     display:initial;
  }