body{
	font-family: Arial , "Times New Roman", serif;
	padding: 1% 5% 5% 5%;
	background-color: #ffffff;
	overflow-x: hidden;


}

nav{
	width: 100%;
	display: block;
	text-align: center;
	font-size: 3em;
	background-color: transparent;
	font-variant: small-caps;
	padding: 1%;
    margin: 2% 0px 10% 0px;
    border: 1px solid transparent;
}

nav>h1{
	display: none;
}

nav a{
	display: inline-block;
	text-align: center;
	padding: 5% ;
	margin: auto;
	color: #000000;
	text-decoration:none;
	opacity: .6;

}

nav a {
	border: 1px solid transparent;
	background: transparent;
	padding: 3% 6%;
	border-radius: 12px;
	-webkit-transition: all .7s linear;
	-moz-transition: all .7s linear;
	-o-transition: all .7s linear;
	transition: all .7s linear;

}

nav a:hover {
	/*box-shadow: 0 2px 0 rgb(219, 219, 219);*/
	
	 -webkit-transform: translateY(5px); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
      -ms-transform: translateY(5px); /* IE 9 */
          transform: translateY(5px); /* IE 10, Fx 16+, Op 12.1+ */
}
	/*transform: translateX(-2px);*/
	text-decoration: none;
}


nav a img{
	width: 50%;	
	display: block;
	margin: auto;
}



nav a:hover{
	/*background-color: rgba(66, 134, 244,.3); */
	/*color: #fc8711;*/
	 
	-webkit-transition: .1s ease;
	-moz-transition: .1s ease;
	-o-transition: .1s ease;
	transition: .1s ease;

	opacity: 1;
}




.gallery {
	width: 100%;
	display:block;
	margin: auto ;
	
}

.gallery>h1{ 
	display: none;
 }

.images img {
	display: inline-block;
	float: left;
	width: 5.24%;
	opacity: .5;
	padding: 1% .5% .3% .5%;
	margin: 1% 0 .5% 0;



    -webkit-transition: all 1s linear;
	-moz-transition: all 1s linear;
	-o-transition: all 1s linear;
	transition: all 1s linear;


}



.images img:hover {
	
    -webkit-transition: .5s ease;
	-moz-transition: .5s ease;
	-o-transition: .5s ease;
	transition:: .5s ease;

	opacity: 1;
	box-shadow: box-shadow: 0 10px 0 rgb(219, 219, 219);

 -webkit-transform: translateY(-15px); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
      -ms-transform: translateY(-15px); /* IE 9 */
          transform: translateY(-15px); /* IE 10, Fx 16+, Op 12.1+ */

}


.modalDialog {
        position: fixed;
        font-family: Arial, Helvetica, sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
        z-index: 9;
        opacity:0;
        visibility: hidden;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
        overflow: auto;
    }

    .modal-content {
    	 z-index: 10;
    }

    .modalDialog:target {
        opacity:1;
        visibility: visible;
        pointer-events: auto;
    }

    .modalDialog > div {
        width: 80%;
        position: relative;
        margin: 10% auto;
        padding: 5px 20px 13px 20px;
        /* border-radius: 10px; */
        background: #fff;
       /*  background: -moz-linear-gradient(#fff, #999);
        background: -webkit-linear-gradient(#fff, #999);
        background: -o-linear-gradient(#fff, #999); */
    }

   

 #modal-content-image{ 
 		display: block;
		float: center;
 		position: relative ;
 		margin: 10% auto;
 		padding: 5px 20px 13px 20px;
    	max-width: 40% ; 	
    }
 #modal-content-image-wide {
 		display: block;
		float: center;
 		position: relative ;
 		margin: 10% auto;
 		padding: 5px 20px 13px 20px;
    	max-width: 80% ; 
 }


.bodyclose {
			  top: 0;
			  right: 0;
			  bottom: 0;
			  left: 0;
			  opacity: 0;
			  display:none;
			  z-index:2;
			  position:fixed;
			}
.modalDialog:target {
			  opacity: 1;
			  pointer-events: auto;
			}
.modalDialog:target > .bodyclose {
			  display:block;
			}
.modalDialog > div {
			  background: #ffffff;
			  width: 80%;
			  z-index:;
			  position:relative;
			}	

.close {

	        color: #000000;
	        line-height: 25px;
	        position: absolute;
	        right: 0px;
	        text-align: center;
	        top: 0px;
	        width: 24px;
	        text-decoration: none;
	        font-weight: bold;
	 /*  -webkit-border-radius: 12px;
	        -moz-border-radius: 12px;
	        border-radius: 12px;
	        -moz-box-shadow: 1px 1px 3px #000;
	        -webkit-box-shadow: 1px 1px 3px #000;
	        box-shadow: 1px 1px 3px #000; */
	    }

.close:hover { background: #00d9ff; }

.main_1 {
	clear: both;
	width: 100%;
	display:block;
	padding: 0% 2% 1% 0px;
	margin: 0% 1%  100px 1%;
	/*border:1px none #000;
	box-sizing: border-box;*/
	
}
 .main_1 h1{
 	display: none;
 	text-transform:  uppercase;
 	font-size: 110%;
 	margin: 2% 0% .2% 0%;
 	padding:  2% 0% 0% 0%;


 }

.main_1 p{
	width: 100%;
	display:block;
	padding: 2% 5% 1% 0px;
	margin: 1% 1%;
	border:1px none #000;
	box-sizing: border-box;
	font-size: 140%;
}



.main {
	clear: both;
	width: 100%;
	display:block;
	padding: 2% 5% 1% 0px;
	margin: 20% 1%  10px 1%;
	/*border:1px none #000;
	box-sizing: border-box;*/


	
}
 .main h1{
 	text-transform:  uppercase;
 	font-size: 110%;
 	margin: 5% 0% 1% 0%;
 	padding:  2% 0% 0% 0%;


 }

.main p{
	width: 100%;
	display:block;
	padding: 2% 30% 1% 0px;
	margin: 1% 1%;
	border:1px none #000;
	box-sizing: border-box;
	font-size: 140%;
}

    		
/*@media only screen and (max-width: 4000px)    */
/*					{ */

/*							nav{*/
/*								float: left;*/
/*								font-size: 9em;*/
/*							}*/
/*								nav a img{*/
/*									width: 80%;		*/
/*								}*/

/*						.images img {*/
/*						width: 6.65%;*/
/*						}*/

/*						.misc img {*/

/*							max-width: 40%;*/
/*						}*/

/*						.main p {*/
/*							font-size: 350%;*/
/*						}*/
/*						.main h1 {*/
/*							font-size: 300%;*/
/*						}*/

/*					 }*/

@media only screen and (max-width: 2000px)
					{ 

							nav{
								float: left;
								font-size: 3em;
							}
								nav a img{
									width: 50%;		
								}

							.images img {
							width: 6.65%;
							}
							.main p {
							font-size: 150%;
							}
							.main h1 {
								font-size: 190%;
							}

					 }

@media only screen and (max-width: 1100px)
					{ 

							nav{
								font-size: 3.5em;
							}
								nav a img{
									width: 45%;		
								}


							.images img {
							width: 6.65%;
							}
							.main p {
							font-size: 100%;
							}
							.main h1 {
								font-size: 140%;
							}
 					}

@media only screen and (max-width: 711px)
					{ 

							nav{
								font-size: 3.3em;
							}

								nav a img{
									width: 30%;		
								}

							.misc img {
							max-width: 40%;
							}


							.images img {
							width: 6.56`%;
							}
 					}
@media only screen and (max-width: 400px)
					{

							nav{
								font-size: 300%;
							}
								nav a img{
									width: 55%;		
								}
							

							.gallery {
								float: center;
								margin: 8px;
								padding: 2% 1% 5% 1%;
							}

								.images img {
									float: center;
									width: 12%;
									padding: 2% 5% 5% 1%;

								}


 					}



.misc img{
	display: inline-block;
	float: left;
	width: 100%;
	opacity: .5;
	margin: 2%;
	padding: 2% 1% 10% 4.5%;

	-webkit-transition: all 1s linear;
	-moz-transition: all 1s linear;
	-o-transition: all 1s linear;
	transition: all 1s linear;
}

.misc img:hover {
	-webkit-transition: all .5s linear;
	-moz-transition: all .5s linear;
	-o-transition: all .5s linear;
	transition: all .5s linear;


	-webkit-transform: translateX(10px) ; /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
      -ms-transform: translateX(10px) ; /* IE 9 */
          transform: translateX(10px) ; /* IE 10, Fx 16+, Op 12.1+ */


	opacity: 1;
}

@media only screen and (max-width: 2000px)
					{ 

					.misc img{
						width: 40%;
					}

					 }

@media only screen and (max-width: 1100px)
					{ 

					.misc img{
						width: 40%;
					}
						
 					}

@media only screen and (max-width: 711px)
					{ 

					.misc img{
						width: 70%;
					}
						
 					}
@media only screen and (max-width: 400px)
					{
					.misc img{
						width: 80%;
					}
 					}





/*.main:hover{
	
	color:#143966;
	background-color: rgba(211, 201, 194, .2);


}*/

.contact{
	display: block;
	clear: both;
	font-size: 170%;
	background-color: transparent;
	padding: 2% 40% 2% 40%;
	margin: 300px 1% 100px 1%;
	width: 100%

}
 
h4 {
	font-size: 105%;
	background-color: transparent;
	font-variant: small-caps;

}



.bottom{
	clear:both;
	display: inline-block;
	margin: 0 auto;
	width: 100%;
	text-align: center;
	padding: 5% 1% .01% 1%;
	font-size: 300%;
	
	background-color: transparent;
	font-variant: small-caps;
}

.bottom img{
	width: 30% ;
}



footer {
	clear:both;
	display: block;
	font-size: 80%;
	background-color: transparent;
	font-variant: small-caps;
	padding-top: 0%;
}