body{
     max-height:100% ! important;
  }

  main{
    margin: auto;
	padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right); 
   
  }


  .container-fluid{
	margin-top: 0px !important;
  }

  .d1{
   background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url("images/logo.png");
     background-size: 55% auto ! important;
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: left;
   
  }

  a{
      text-decoration:none ! important;
  }

  
/* The hero image */
.d2{
 
  background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url("images/logo.png");
  background-size: 60% auto ! important;
  height: 100vh ! important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover ! important;
  padding-top: 680px;
  animation: myslide 10s infinite;
}

@keyframes myslide{
	
 0%{
	background-image: url("images/sosahq.jpg");
	background-size: 100% auto ! important;
	height: 100% ! important;
  }
	
33%{
	background-image: url("images/sosaadmin.jpg");
	background-size: 100% auto ! important;
	height: 100% ! important;
  }
	
67%{
	background-image: url("images/codingschool.webp");
	background-size: 100% auto ! important;
	
  }
		
}

.iDiv{
	margin-left: auto !important;
	justify-content: center !important;
	align-items: center !important;
	align-content: center !important;
}

#logo{
  margin-bottom: 15px;
  width: 100% !important;
}

h1{
  font-weight: bold !important;
}
  
.dropdown-toggle{
  background: white !important;
  color: black !important;
  border-color: navajowhite !important;
}

button{
  background: navy !important;
  color: white !important;
  margin-top: 30px !important;
}

button:hover{
	background-color: navy ! important; 
	color: white ! important; 
}


.add-to {
	width: 40%;
	margin-top:0px ! important;
	margin-bottom:0px;
} 
		
.add-to-btn {
	background-color: #f40 !important; 
	color: white; 
    border-style: solid !important;
    border-color: blue !important;
    border-width: 1px !important;
	border-radius:28px ! important;
	margin-top:0px ! important;
	margin-left:10px;
	font-weight: bold; 
	width: 100%; 
	height: 50px; 
}


.add-to-btn:hover {
	background-color: green ! important; 
	color: white; 
}


#sosaP{
  margin-top: 50px !important;
  font-size: 2.5vw !important;
  color:black ! important;
}

#sosa{
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  margin-top: 50px !important;
}


/*For Desktop View*/

@media screen and (min-device-width: 1025px){
 

.iDiv{
	margin-left: 100px !important;
	margin-top: 160px !important;

}

#logo{
  width: 10% !important;
  margin-top: 0px !important;
  margin-left: 20px !important;
  display:none ! important;
}

h1{
  font-size: 2.2vw !important;
  margin-top:-80px ! important;
  margin-bottom:130px ! important;
  margin-left: 280px !important;
}

.d-flex{
  margin-top:70px ! important;
  margin-left: 280px ! important;
}

.d-flex > a{
 
}

p{
 margin-left:0px ! important;
}

form{
  width: 50% !important;
  margin-left: 150px !important;
}

.form-group{
  margin-top:50px !important
}

button{
  margin-top: 10px !important;
  margin-bottom:10px ! important;
}


.add-to {
	width: 30% ! important;
	margin-top:0px ! important;
	margin-bottom:0px;
} 



.autorDiv{
    display:none ! important;
}

#sosaP{
  margin-top: 0px !important;
  font-size: 1vw !important;
}

#sosa{
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  margin-top: 0px !important;
}


}



/* For Tablet Landscape View */
@media only screen and (min-device-width: 641px)
and (max-device-width: 1024px) {
    
.d1{
     background-size: 65% auto ! important;
     background-position: left;
  }

#eng{
  margin-top: 0px ! important;
  margin-left: 10px;
  width: 22% !important;
}
  
#logo{
  margin-top: 150px !important;
  width: 37% !important;
  margin-left: -50px !important;
  display:none ! important;
}


.iDiv{
	margin-left: 100px !important;
	margin-top: 100px !important;
}

form{
  width: 60% !important;
  margin-left: 60px !important;
}

.d2{
  display: block !important;
}

h1{
  margin-left: 60px !important;
  font-size: 2.5vw !important;
}

p{
  font-size: 1.3vw !important;
   margin-left: 0px !important;
}

.form-group{
  margin-top:32px !important
}

.chek [type=checkbox]{
   margin-top: 30px !important;
}

button{
  margin-top: 30px !important;
}

}



/* For Tablet Portrait View */
@media only screen and (min-device-width: 421px)
and (max-device-width: 640px) {


#eng{
  margin-top: -120px;
  margin-left: 10px;
  width: 25% !important;
}
  
#logo{
  margin-top: 160px !important;
  width: 37% !important;
  margin-left: -50px !important;
}

form{
  width: 485px !important;
  margin-left: 50px !important;
}

.d2{
  display: none !important;
}

h1, p{
  margin-left: 50px !important;
}

h1{
  font-size: 3.5vw !important;
}

.form-group{
  margin-top:32px !important
}

.chek [type=checkbox]{
   margin-top: 30px !important;
}

button{
  margin-top: 30px !important;
}	

}



@media screen and (max-width:420px){
    
  
 .container-fluid{
	margin-top: 0px !important;
	max-height:100% ! important;
  }


 .d1{
     background-image: url('images/logo.png');
     background-size: 55% auto ! important;
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: center;
  }
  
.d2{
  display:none ! important;
}

.col-sm-4{
    background-color:transparent ! important;
    opacity:0.1 ! important;
}

#logo{
  margin-top: 50px !important;
  width: 15% !important;
  margin-left: 0px !important;
}

form{
  width: 100% !important;
  margin-left: 0px !important;
}

::placeholder{
    font-size:3vw ! important;
}



h1{
  margin-left:3px !important;
  margin-bottom:45px ! important;
  font-size: 7vw !important;
}


p{
  margin-left:3px !important;
}

.form-group{
  margin-top:32px !important
}


button{
  margin-top: 5px !important;
  margin-bottom:20px ! important;
}

		
.add-to-btn {
	font-size: 3.5vw !important;
}

.autorDiv{
  margin-top:150px ! important;
  margin-bottom:0px !important;
  max-height:100px ! important;
}

.d-flex > a{
    font-size:3vw ! important;
}

#sosaP{
  margin-top: 0px !important;
  font-size: 2.5vw !important;
}

#sosa{
  width: 70px !important;
  height: 70px !important;
  border-radius: 50% !important;
  max-height:45px ! important;
  aspect-ratio:4/4 ! important;
  margin-top: 0px !important;
  
}


}