@media only screen and (min-height: 500px) and (max-height: 800px){
.modal{
	padding-top: 14%;
}
}
@media only screen and (min-height: 100px) and (max-height: 500px){
.modal{
	padding-top: 18%;
	overflow-y: auto;
	padding-bottom: 5%;
}
#modal-title{
font-size: 250%;
}
#modal-description{
 font-size: 80%;
 margin-bottom: 6%;
}
.modcont{
	max-width: 80%;
}
.imgm{
		padding-left: 0%;
	}
}


@media only screen and (min-width: 2500px) and (max-width: 4000px){
	space{ 
		width: 45%; 
	}
	 .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(700px, 1fr));
    grid-gap: 10px;
  }
    @keyframes imge{
   		0%{ transform: scale(1.0); }
   		100%{ transform: scale(1.05); }
   }
   .textbox > h1{
	font-size: 50px;
	margin: 0;
}
.textbox > p{
	font-size: 20px;	
}
.imgm{
		padding-left: 0%;
	}
	.modcont{
	max-width: 60%;
}
}


@media only screen and (min-width: 1760px) and (max-width: 2500px){
	space{ 
		width: 45%; 
	}
	 .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(700px, 1fr));
    grid-gap: 10px;
  }
    @keyframes imge{
   		0%{ transform: scale(1.0); }
   		100%{ transform: scale(1.05); }
   }
   .textbox > h1{
	font-size: 50px;
	margin: 0;
}
.textbox > p{
	font-size: 20px;	
}
.imgm{
		padding-left: 0%;
	}
}


@media only screen and (min-width: 1600px) and (max-width: 1760px){
	 space{ 
		width: 34%; 
	}
	 .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
    grid-gap: 10px;
  }
.imgm{
		padding-left: 0%;
	}
}
@media only screen and (min-width: 1500px) and (max-width: 1600px){
	 space{ 
		width: 28%; 
	}
	 .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
    grid-gap: 10px;
  }
.imgm{
		padding-left: 0%;
	}
}

@media only screen and (min-width: 1026px) and (max-width: 1200px){
	space{ 
		width: width: 47%;; 
	}
	 .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    grid-gap: 10px;
  }
   .modal-header h2{
	font-size: 253%;
  margin: 0;
 text-align: right;
 max-width: 31%;
}
#modal-title{
	font-size: 351%;
}
.imgm{
		padding-left: 0%;
	}
}
@media only screen and (min-width: 1000px) and (max-width: 1026px){
	space{ 
		width: 20%; 
	}
	 .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 10px;
  }
  .modal-header h2{
	font-size: 253%;
  margin: 0;
 text-align: right;
 max-width: 31%;
}
#modal-title{
	font-size: 327%;
}
}
@media only screen and (min-width: 900px) and (max-width: 1000px){
	nav{
		flex-direction: column;
		height: 90px;
	}
 .h1size > p{
 	font-size: 32px;
 }
	nav > p{
		margin: 0;
	}
	.window{	
	}
	
 .modal-header h2{
	font-size: 253%;
  margin: 0;
 text-align: right;
 max-width: 31%;
 
}
#modal-title{
	font-size: 351%;
}
#modal-description{
	font-size: 72%;
}
		.ulok{
		padding-left: 13%;
	}
	 .containernav {
  max-width: 94%;
}
}

@media only screen and (min-width: 700px) and (max-width: 900px){
	nav{
		flex-direction: row;
		height: 90px;
	}
.h1size > p{
 	font-size: 30px;
 }

nav ul{
	font-size: 18px;
}
 .containernav {
  max-width: 90%;
}

	nav > p{
		margin: 0;
	}
	.window{
	
	}
	.ulok{
		padding-left: 13%;
	}
	space{
		width:38%;
	}
	
	.imgm{
		margin-top: 2%;
	}
	

	.textgroup{
		flex-wrap: wrap;
		padding-left: 2% ;
	}
	.textbox{
		
		width: 86%;
	}
	.textbox:first-child{
		margin-bottom: 2%;
	}
	.textbox > h1{
		font-size: 35px;
		margin: 0;
	}
	.textbox > p{
	font-size: 17px;	
	}
	.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 10px;
    padding: 5%;
  }
  .modal-header{
  	max-width: 36%;
  	max-width: 230%;
  }
  .modal-header h2{
	font-size: 253%;
  margin: 0;
 text-align: right;
 max-width: 100%;
 
 
}
.modcont{
	flex-direction: column;
    align-items: center;
    width: 72%;
  
}

#modal-description{
	font-size: 72%;
	max-width: 80%;
}

.prev, .next{
	font-size: 41px;
}
.modal-content{
	width: 81%;
}


}



@media only screen and (min-width: 500px) and (max-width: 700px){
	nav{
		flex-direction: row;
		height: 150px;
		width: 100%;
		top: 0;
	}
.h1size > p{
 	font-size: 28px;
 }
	nav > p{
		margin: 0;
	}
	.window{
		
	}
	
	.textgroup{
		flex-wrap: wrap;
		padding-left: 2% ;
	}
	.textbox{
		width: 100%;
	}
	.textbox:first-child{
		margin-bottom: 2%;
	}
	.textbox > h1{
		font-size: 35px;
		margin: 0;
	}
	.textbox > p{
	font-size: 15px;	
	}
	.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 10px;
    padding: 5%;
  }
  .modal-header{
  	max-width: 36%;
  	max-width: 230%;
  }
  .modal-header h2{
	font-size: 253%;
  margin: 0;
 text-align: right;
 max-width: 100%;
 
 
}
.modcont{
	flex-direction: column;
	align-items: center;
	width: 65%;
}

#modal-description{
	font-size: 72%;
	max-width: 72%;
}

.prev, .next{
	font-size: 41px;
}
.modal-content{
	width: 81%;
}
.modal{
	
}
.shows{
	display: none;
}
.hides{
	display: flex;
}
.hides > ul{
	margin-top: 149px;
}

.imgm {
  margin-top: 3%;
}
.nav-links li a {  	
	display: flex;
}
.hamburger{
		display: flex;
		width: 60px;
		margin: 3%;
		text-align: right;
		flex-direction: column;
		padding-left: 8%;

	}
.nav-links {
  display: flex;
}
.line {
	display: block;
}
.nav-links li{
display: flex;
}




}



@media only screen and (min-width: 300px) and (max-width: 500px){
	nav{
		width: 100%;
		top: 0;
		flex-direction: row;
		height: 150px;
		  background-color: #F8F8F8;
		  justify-content: center;
		  align-items: center;
	}
	nav > ul{
		display: none;
	}


  nav li a{
 
}

  
.nav-links li a {  	
	display: flex;
}

.nav-links {
  display: flex;
}

.line {
	display: block;
}
	.hamburger{
		display: flex;
		width: 60px;
		margin: 3%;
		text-align: right;
		flex-direction: column;
		padding-left: 15%;

	}

	.nav-links li{
display: flex;
}




	h1{

	}
	.textbox{
		width: 100%;
		margin-bottom: 5%;
	}
	

	 @keyframes imge{
   		0%{ transform: scale(1.0); }
   		100%{ transform: scale(1.07); }
   }
   
	#wrap{
		
	}
	.textgroup{
		flex-wrap: wrap;
		margin-bottom: 30%;
	}
	.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 10px;
  }
  .modal-header{
  	max-width: 36%;
  	max-width: 230%;
  }
  .modal-header h2{
	font-size: 253%;
  margin: 0;
 text-align: right;
 max-width: 98%;
 
}
.modcont{
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin-left: 1%;
}

#modal-description{
	font-size: 73%;
	max-width: 84%;
}

.hide{
	display: none;
}

.modal-content{
	width: 81%;
	min-width: 297px;
}
.modal{
	
}
.hidden{
	display: flex;
	flex-direction: row;
	width: 54%;
	justify-content: center;
	align-items: center;
	align-items: center;
   margin-top: 6%;
   margin-bottom: 4%;
}
.hidden .prev{
	padding-right: 86%;
}
.closeside{
	bottom: 40%;
    left: 67%;
}
.close{
	font-size: 290%;

}
.shows{
	display: none;
}
.hides{
	display: flex;
	justify-content: center;

	

}
.textcon{
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.imgm {
  margin-top: 3%;
}

.newr{
	min-height: calc(100vh - 111px);
}

.container3{
	margin-top: 35%;
}

}