@import url('https://fonts.googleapis.com/css?family=Open+Sans|ZCOOL+QingKe+HuangYou&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open Sans';
}

html {
    height: auto;
    background-repeat: no-repeat !important;
    scroll-behavior: smooth;
}
body {
    height: auto;
    background: linear-gradient(rgba(193, 200, 228, 1), rgba(132, 206, 235, 1) , rgba(136, 96, 208, 1));
    background-size:cover !important;

}
/*buttons*/
button {
  display:block;
  margin-top:40px;
  border: none;
  color: black;
  padding: 1vmax 15vmax;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  border-radius: 25px;
  margin-bottom:30px;
            margin-left: auto;
        margin-right: auto;
    background: linear-gradient(to right, #5680e9, #8860d0);
    font-weight: bolder;
}
/*---------------*/
/*HEADER*/
header {
  height: 140px;
  background: radial-gradient(#7f51d3, #c1C8e4);
	
}
header h1 {
	font-size: 2.8em;
	font-weight: bold;
	text-transform: uppercase;
	line-height: 90px;
	margin-right: .5em;
	margin-top:.5em;
	float: left;
	padding-left: 130px;
	background: url(photos/sonce.png) no-repeat left center;
	color:#fff
}
header h2 {
	clear:both;
	font-style: italic;
	font-weight:normal;
	font-size: 1.4em;
  color:#fff;
	float: left;
	text-transform: lowercase;
	letter-spacing:.1em;
	line-height: 20px;
	margin-left:250px;
}
header img {
  float:right;
}
/*----------------------------------------------*/
/*HOMEPAGE-NAVBAR*/
section {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    border: 2px solid #000;
}
section .slide {
    position: relative;
    background: rgb(63, 65, 63);
    height: 100%;
    flex:1;
    border-right: 2px solid #000;
    overflow: hidden;
    transition: 0.5s ease-in-out;
}
section .slide:last-child
{
    border-right: none;

}
section .content a {
color: white;   
}
section .content a:hover {
color: lightblue;   
}
section .slide:hover 
{
    flex-grow:5;
}

section .slide .content  { 
  position: absolute;
  top: 0;
  margin: 40px;
  padding: 30px;
  background: #000;
  color:#fff;
  visibility: hidden;
  opacity: 0;
  transition:0s;
  transform: translateY(100px);
}
section .slide:hover .content {
    visibility: visible;
    opacity: 1;
    transition:0.5s;
    transition-delay: 0.5s;
    transform: translateY(0);   
}
section .slide:nth-child(1) 
{
   background:url(photos/img1.jpg);
   background-position: center center;
   background-size:cover;
    
}
section .slide:nth-child(2) 
{
    background:url(photos/img2.jpg);
    background-position: center center;
    background-size:cover;

    
}
section .slide:nth-child(3) 
{
    background:url(photos/img3.jpg);
    background-position: center center;
    background-size:cover;

    
}
section .slide:nth-child(4) 
{
    background:url(photos/img4.jpg);
    background-position: center center;
    background-size:cover;
/*-----------------------------------------*/  
/*MAIN-INFO*/  
}   
 #main {
  width: 80%;
  margin: auto;
       color: black;
       font-size:30px;
       top:15%;
       display:block;
       margin-top:100px;
       padding-left:20px;  
       margin-bottom: 25px;
}
#main button {
  width:70%;
}
#main hr {
padding: 0;
margin:0;
width: 40%;    
}
#main p {
 color:black;
 font-size:20px;
 text-align: justify;
 margin-top: 20px; 
 overflow:hidden;
 display: block;
}   
.something {
  display:none;
}

/*-----------------------------------------*/
/*NAVBAR*/
 .sidebarClass {
     height: 0;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 1;
     position: fixed;
	 overflow-y: hidden;
     overflow-x: visible;
     background-color: #5680E9;
     transition: 0.5s;
     opacity: 90%;
     margin-left:130px;
 }
 .sidebarClass a {
  float:left;
	   padding: 8px 8px 8px 32px;
   text-decoration: none;
   font-size: 25px;
   color:black;
   display: block;
   transition: 0.1s;
   cursor: pointer;
   font-family: sans-serif;
 }
 .sidebarClass p {
   padding: 8px 8px 8px 32px;
   text-decoration: none;
   font-size: 25px;
   color:black;
   display: block;
   transition: 0.1s;
   cursor: pointer;
   font-family: sans-serif;
 }
     
 .sidebarClass a:hover {
  color:#C1C8E4;
 }
 
 .openNav {
     margin-top: 10px;
     color: white;
     background-color: #5AB9EA;
     cursor: pointer;
     padding: 10px 15px;
     border: none;
     font-size: 40px;
     margin-left: 2px;
 }
 
 .openNav:hover {
     background-color: #84CEEB;
 }
  
 .sidebarClass .closeNav {
   position: absolute;
   top: 0;
   right: 155px;
   font-size: 36px;
   margin-left: 50px;
   padding-bottom: 10px;
 }
 .page-img {
  opacity: 0.8;
    overflow: hidden;
    float: right;
    width: 32vmax;
    margin: 20px;
     

}  
.page-img:before {
    content: ’’;
    position: absolute;
    bottom: 0;
    width: 80%;
    left: 10%; /*this centers it based on the above width*/
    border-bottom: 1px solid lightcoral;
  }
 /*------------------------*/
 .scrollbutton {
   position: fixed;
     display: none;
   bottom: 50px;
   right: 25px;
   height: 50px;
   width: 50px;
  background: linear-gradient(to right, #5680e9, #8860d0);
   font-size:22px;
   text-align: center;
   text-decoration: none;
   line-height: 50px;
       border-radius: 25px;
     color: white;
 }
/*FOOTER*/
.footer {
  font-size: 10px;
  position: fixed;
  left: 0;
  bottom:0;
  width: 100%;
  background-color:#84CEEB;
  text-align: center;
   margin-top: 50px;
  
}
.footer h3 {
  font-size:15px;
}
/*----------------------------------------*/

@media screen and (min-width:100px) and (max-width:640px) {
  /* for screens that are at least 320 pixels wide but less than or equal to 640 pixels wide */

    header {
        overflow: hidden;

    }
    header h1{
        font-size: 30px;
                line-height: normal;
        height: 65%;
    }
    header h2{
        margin: auto;
        font-size: 15px;
    }
    
    .sidebarClass{
        margin: 0;
    }
    
    button {
        padding: 9px;
        font-size: 20px;
        font-weight:600;

    }
    
    .sidebarClass .closeNav {
        right: 0;
    }

    .sidebarClass a {
        font-size: 35px;
        line-height: 30px;
    }
    section .slide:hover 
{
    flex-grow:10;
}
    .content {
        position: relative;
        margin-left: auto;
        margin-right: auto;
    }
    
    .homepage {
        overflow-y: hidden;
    }
    .footer h3{
        font-size: 9px;
    }
    .page-img {
  opacity: 0.8;
    overflow: hidden;
    float: right;
    width: 100%;
    margin: 20px;
   margin: auto;
    margin-bottom: 10px;

}