@font-face
{
font-family: "franklingothic" ;
src: url("fonts/franklin Gothic Medium Regular.ttf");

}
@font-face{
font-family: "Gilsans" ;
src: url("fonts/GillSansStd.otf");
}




body, html{
   	background-color:#ededed;
   	height: 100%; 
   	width: 100%; 
   	margin:5px;
   	padding: 0;
	}


.bigbox{
  	min-height: 100%; 
	max-width:100%;
  	position: relative;
	}


h5{
	width: 20%;
	padding:15px;
	margin-left: 23px;
	float: left;
	margin-top: 24px;
	text-align: left;
	font-family: Gilsans;
	letter-spacing: 0.5px;
	font-size: 17px;
	color: #2b2b2b;
	font-weight: 300;
	}
.drawintro{
	max-width: 60%;
	text-align: left;
	font-family: Gilsans;
	padding-top:3vh;
	letter-spacing: 0.5px;
	font-size: 17px;
	color: #2b2b2b;
	font-weight:lighter;}

/*------------------------------*/
@media screen and (max-width: 665px ){
h5{
    	width: 100%;
  	}
}


.draw{
  	padding-bottom: 45px;
  	margin-top: 10px;
	}

.archive{
	margin-top:230px;
	}


.variousimages{
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	box-shadow: 5px 5px 5px #c6c6c6;
  	width: 235%;
	}

.variousimages_archive{
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	box-shadow: 5px 5px 5px #c6c6c6;
  	width: 235%;
  	margin-top: 130px;
	}


/*---------------------hover function----------------------------*/

}

img{
  	transition:transform 0.2s ease-in-out;  
  	}


img:hover {
	cursor:pointer;
	transform: scale(3.3);	
	}


img.no-hover {
	opacity:1;
	filter:none;
	transform:none;	
	}



/*---------------------------------------------------------------*/

.wrapper{
  position: absolute;
  height: 100%;
  width: 86%;
  margin-left: 14%;
  -ms-overflow-style: scrollbar;
}


.row{
  	display: grid;
  	grid-template-columns: 10.75% 10.75% 10.75% 10.75% 10.75% 10.75% 10.75% 10.75% ;
  		/*  -ms-grid-columns: 10.75% 10.75% 10.75% 10.75% 10.75% 10.75% 10.75% 10.75% ; */
  	grid-template-rows: auto;
  		/* -ms-grid-rows: 100px 100px 100px 100px; */
  	grid-column-gap: 0%;
  	padding: 10px;
  	margin-left: 3%;
  	height: 100%;
  	margin-bottom: 40px;
  	}


/*----------------------------------------------------------------*/




@media screen and (max-width: 665px ){
  	.row{ 	
  	grid-row-gap: 2.2rem;
  	grid-column-gap: 0.5rem;
  	margin: auto;
  	margin-top: 1rem;
		/* margin-bottom: 10px; */
  		/* margin-top: 100px; */
  	}

.wrapper{
	max-width:100%;
	
    	position: relative;
	margin: auto;
	padding-bottom: 80px;
		/* padding: 10px; */
  	}

.draw{
    	padding-bottom: 0;
  	}

h5{
    	margin: auto;
      	margin-left: 24px;
  	}


.variousimages{
    	width: 380%;
  	}


.archive{
    	margin: auto;
    	margin-top:20px;
  	}


.variousimages_archive{
    	width: 380%;
  	}

}

/*-----------------------------------------------------------*/

.row > .column{
  	padding: 0 10px;
	}


.row:after {
  	content: "";
  	display: table;
 	clear: both;
	}

/* Create four equal columns that float next to each other */
.column {
  	display: flex;
  	float: left;
    	justify-content: stretch;
    	align-items: center;
    		/* padding: 19%; (ORIGINAL) */
        padding: 19%;
	width: 14%;
	height: 100%;
	-ms-overflow-style: scrollbar;		
	}


/* The Modal (background)----------------------------------- */
.modal {
  	display: none;
  	position: fixed;
  	z-index: 1;
  	left: 0;
  	top: 0;
	width:100vw;	
	height:100vh;
  	overflow: hidden;
  	background-color: #ededed;
	}

/* Modal Content */
.modal-content {
	display:block;
  	justify-content: center;
  	align-items: centre;
  	position: relative;
  	height: 100vh;
  	margin-left: auto;
	margin-right:auto;
  	width: 30%;
  	margin-top: auto;
	margin-bottom:auto;
	/*border: 2px solid green;*/
	object-fit:contain;
	}

img{
    	box-shadow: 5px 5px 5px #aaaaaa;
    	}

#portraitimage{
	display:block;
	position:absolute;
	bottom:10vh;
	left:auto;
	margin-left:9%;
	margin-right:15%;
	margin-top:15%;
	max-height:90%;
	width:auto;
	top:auto
	right:auto;
	object-fit:cover;
	
  	}

#landscaperule{
	display:block;
	position:absolute;
	bottom:15vh;
	left:-8vw;
	margin:auto;
	max-width:170%;
	max-height:80%;
	object-fit:contain;

	}

#landscaperulesquare{
	display:block;
	position:absolute;
	bottom:15vh;
	left:-4vw;
	margin:auto;
	max-width:170%;
	max-height:80%;
	object-fit:contain;

	}


#landscaperulepano{
	display:block;
	position:absolute;
	bottom:30vh;
	left:-10vw;
	margin:auto;
	max-width:170%;
	max-height:80%;
	object-fit:contain;

	}

#landscaperulesmall{
	position:absolute;
	bottom:29%;
	display:block;
	margin:auto;
	max-width:100%;
	object-fit:contain;
	align-content:center;

	}

#landscaperulespecial{
	position:absolute;
	/*bottom:15vh;*/
	bottom:20%;
	/*left:-8vw;*/
	left:auto;
	display:block;
	margin:auto;
	width:auto;
	max-height:70%;;
	object-fit:contain;

	top:auto;
	right:auto;
	align-content:center;
	}

.modal-content_1{
 	position: relative;
 	margin: auto;
 	padding-top: 5%;
 	width: auto;
 	height: auto;
 	}


/* The Close Button */
.close {
  	color: #888b91;
  	position: absolute;
  	top: 10px;
  	right: 25px;
  	font-size: 30px;
  	font-weight: bold;
	}

.close:hover,
.close:focus {
  	color: #999;
  	text-decoration: none;
  	cursor: pointer;
  	}

/* Hide the slides by default */
.mySlides {
  	display: none;
  	}

/* Next & previous buttons */
.prev,
.next {
  	cursor: pointer;
  	position: fixed;
  	top: 50%;
  	width: auto;
  	padding: 2%;
  	
  	color: #6d6d6d;
  	font-weight: bolder;
  	font-size: 25px;
  	transition: 0.6s ease;
  	border-radius: 0 3px 3px 0;
  	user-select: none;
  	-webkit-user-select: none;
	}

/* Position the "next button" to the right */
.next {
  	right:8%;
  	}

.prev{
  	left: 8%;
  	}

/* On hover, add a black background color with a little bit see-through */


/* Number text (1/3 etc) */


/* Modal Caption text---------------------------------------------------- */

.caption{
	position:absolute;
	display:inline-block;
  	background: none;
  	bottom: 10vh;
  	margin-left:-17vw;
  	padding: 0;
  	font-size: 15px;
  	font-family: Gilsans;
  	align-items: flex-end;
  	width: 100%;
	}

.captionlandscape, .captionlandscapesquare{
	position:absolute;
	display:inline-block;
  	background: none;
  	bottom: 15vh;
  	margin-left: -26vw;
  	background: none;
  	align-items: flex-end;
  	padding: 0;
  	font-size: 15px;
  	font-family: Gilsans;
	}

.captionlandscapepano{
	position:absolute;
	display:inline-block;
  	background: none;
  	bottom: 30vh;
  	margin-left: -30vw;
  	background: none;
  	align-items: flex-end;
  	padding: 0;
  	font-size: 15px;
  	font-family: Gilsans;
	}

.captionlandscapespecial{
	position:absolute;
	display:inline-block;
  	background: none;
  	bottom: 20%;
  	margin-left: -20vw;
  	background: none;
  	align-items: flex-end;
  	padding: 0;
  	font-size: 15px;
  	font-family: Gilsans;
	}

.captionlandscapesmall{
	position:absolute;
	display:inline-block;
  	background: none;
  	bottom: 29%;
  	margin-left: -20vw;
  	background: none;
  	align-items: flex-end;
  	padding: 0;
  	font-size: 15px;
  	font-family: Gilsans;
	}


/*----------------------------------------------------*/



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

.modal {
  	display: none;
  	position: fixed;
  	z-index: 1;
  	left: 0;
  	top: 0;
	width:99vw;	
	height:99vh;
  	overflow: hidden;
  	background-color: #ededed;
	/*border: 2px solid blue;*/
	}

.modal-content {
	display:block;
	width:65%;
	max-height:90%;
	margin:auto;
	object-fit:contain;
	overflow:contain;
	/*border: 2px solid green;*/
   	}
	
#portraitimage{
	position:absolute;
	top:auto;
	bottom: 32vh;
	margin-left:4vw;
	margin-right:auto;
	display:block;
	max-height:70%;
	max-width:80%;
	object-fit:contain;
  	}

#landscaperule{
	position:absolute;
	display:block;
	bottom:37vh;
	left:6px;
	margin:auto;
	max-width:96%;
	object-fit:contain;
	}

#landscaperulesquare{
	display:block;
	position:absolute;
	bottom:36vh;
	left:0;
	margin:auto;
	max-width:98%;
	max-height:80%;
	object-fit:contain;

	}

#landscaperulepano{
	display:block;
	position:absolute;
	bottom:37vh;
	left:1vw;
	margin:auto;
	max-width:98%;
	max-height:50%;
	object-fit:contain;

	}

#landscaperulesmall{
	position:absolute;
	bottom:45%;
	display:block;
	margin:auto;
	max-width:100%;
	object-fit:contain;
	align-content:center;

	}
#landscaperulespecial{
	position:absolute;
	bottom:37vh;
	left:6px;
	display:block;
	margin:auto;
	max-width:96%;
	max-height:90%;
	object-fit:contain;
	}


.caption{
	position:absolute;
	display:inline-block;
  	background: none;
  	top:59vh;
  	margin-left:4vw;
	margin-right:auto;
	margin-top:2vh;
  	padding: 0;
  	font-size: 15px;
  	font-family: Gilsans;
  	align-items: flex-end;
	justify-content: space-around;
  	width: 100%;
	}

.captionlandscape{
	position:absolute;
	display:inline-block;
  	background: none;
  	top:58vh;
  	margin-left: 7px;
  	background: none;
  	align-items: flex-end;
  	padding: 0;
  	font-size: 15px;
  	font-family: Gilsans;
	}

.captionlandscapesquare{
	position:absolute;
	display:inline-block;
  	background: none;
  	top:57vh;
  	margin-left: 7px;
  	background: none;
  	align-items: flex-end;
  	padding: 0;
  	font-size: 15px;
  	font-family: Gilsans;
	}


.captionlandscapepano{
	position:absolute;
	display:inline-block;
  	background: none;
  	top:58vh;
  	margin-left: 2vw;
  	background: none;
  	align-items: flex-end;
  	padding: 0;
  	font-size: 15px;
  	font-family: Gilsans;
	}

.captionlandscapesmall{
	position:absolute;
	display:inline-block;
  	background: none;
  	top:55vh;
  	margin-left: 0vw;
  	background: none;
  	align-items: flex-end;
  	padding: 0;
  	font-size: 15px;
  	font-family: Gilsans;
	}

.captionlandscapespecial{
	position:absolute;
	display:inline-block;
  	background: none;
  	top:54vh;
  	margin-left: 6px;
  	background: none;
  	align-items: flex-end;
  	padding: 0;
  	font-size: 15px;
  	font-family: Gilsans;
	}


img:hover {
	cursor:pointer;
	transform: scale(8);	
}
img.no-hover {
	opacity:1;
	filter:none;
	transform:none;	
	}

.close {
  	color: #888b91;
  	position: absolute;
  	top: 10px;
  	right: 10%;
  	font-size: 30px;
  	font-weight: bold;
	}

.next {
  	right:9%;
  	}

.prev{
  	left: 8%;
  	}

}
/*--------------------------------------*/



footer {
  	position: absolute;
  	position: -ms-device-fixed;
	bottom:2vh;
     	width:100%;
  		/* height: 30px; (ORIGINAL) */
  	height: 20px;
      	text-align: center;
	text-decoration: none;
      	overflow:  hidden;
      	font-size: 20px;
        letter-spacing: 1px;
        font-family: Gilsans;
   	flex-shrink: 0;
   	
   	
  	}
  
@media screen and (max-width: 665px ){
footer{
      	min-height: 60px;
 	position: absolute;
      	width: 95%;
	font-size: 16px;
    	}
  }

.foot_paintings{
	
  	color: black;
  	font-family: GilSans;
  	text-decoration: none;
  	font-size: 16px;
	position: -ms-device-fixed;
	
	}

.foot_this{
  	color: #848484;
  	font-family: GilSans;
  	text-decoration: none;
  	font-size: 16px;
	}

img.demo {
  	opacity: 0.6;
	}

.active,
.demo:hover {
  	opacity: 1;
	}