/*COLORs
main1: #DEC39F
main2: #E0BC89
main3: #362B1C
grey: #505050
*/

@keyframes load {
  from {opacity: 0.0;}
  to {opacity: 1;}
}
/*small device design*/
@media screen and (max-width: 1000px) {

	div.col-1 h1, div.col-1 h3 {
		font-size: 200%;
	}
	div.col-13 h3, div.col-14 h3 {
		font-size: 180%;
	}
	div.col-1 img {
		height: 900px;
	}
	div.col-2 img {
		height: 500px;
	}
	div.col-02 {
		font-size: 180%;
		width: 60%;
	}
	div.col-01 img, div.col-03 img {
		max-height: 70px;
		max-width: 70px;
	}
	div.col-11 img, div.col-12 img {
		height: 650px;
	}
	div.col-11 {
		width: 99.4%;
		max-width: 1000px;
	}
	div.col-12 {
		width: 49.2%;
		max-width: 500px;
	}
	div.col-13 img {
	width: 100%;
	height: 900px;
	}
	div.col-14 img {
	width: 100%;
	height: 1200px;
	}
}

/*Main options*/
/* Hide scrollbar for Chrome, Safari and Opera */
.iframe::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.iframe {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
html, body {
	font-family: arial;
	margin: 0px;
	padding: 0px;
}
body{
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-color: white;
	background-blend-mode: darken;
	font-family: Garamond, serif;
}
footer {
	background-color: black;
	padding-top: 10px;
	padding-bottom: 10px;
	color: white;
	text-align: center;
}
a {
	text-decoration: none;
	color: black;
}
p {
	display: inline;
}
h1, h5 {
	font-variant: small-caps;
}
h1 {
	margin-bottom: 0px;
	font-size: 220%;
}
h3 {
	font-variant: small-caps;
	margin-top: 10px;
}
h5 {
	margin-top: 0px;
}
/*Header menu*/
.col-0 {
	margin-top: 14px;
	margin-bottom: 10px;
	padding: 0px;
	padding-bottom: 10px;
	text-align: center;
	border-bottom: 1px solid grey;
}
.col-01, .col-03 {
	width: 10%;
	display: inline;
}
.col-01 {
	text-align: left;
}
.col-01 img, .col-03 img{
	max-width: 23px;
	max-height: 23px;
	padding-left: 5px;
	padding-right: 5px;
	opacity: 0.8;
}
.col-01 img:hover, .col-03 img:hover {
	opacity: 1;
}
.col-02 {
	width: 90%;
	display: inline-block;
	text-align: center;
}
.col-02 h1{
	margin-top: 0px;
	padding-top: 0px;
}
.col-03 {
	text-align: right;
}
/* Menu Dropdown Button */
.dropbtn {
	background: white;
	border: none;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: fixed;
  right: 10px;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  text-align: center;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
/* Homepage main box */
.col-1 {
	display: inline-block;
	margin: 0px;
	padding: 0px;
	text-align: center;
	width: 100%;
	animation-name: load;
	animation-duration: 1s;
}
.col-1 img {
	width: 100%;
	height: 800px;
	object-fit: cover;
}
/* Main boxes 30% */
.col-2 {
	margin: 1.5%;
	position: center;
	text-align: center;
	display: inline-block;
	width: 27%;
}
.col-2 img {
	padding: 1%;
	text-align: center;
	object-fit: cover;
	object-position: 50% 50%;
	width: 100%;
	height: 400px;
	border-bottom: 1px solid grey;
}
.col-2 :hover {
	opacity: 95%;
}
/* Picture page */
.col-3 {
	margin: 0px;
	padding: 0px;
	text-align: center;
	width: 100%;
	animation-name: load;
	animation-duration: 2s;
}
/* small pics */
.col-11, .col-12 {
	margin: 0.1%;
	display: inline-block;
}
.col-11 {
	width: 39.9%;
	max-width: 900px;
}
.col-12 {
	width: 19.7%;
	max-width: 400px;
}
.col-11 img, .col-12 img {
	width: 100%;
	height: 500px;
	object-fit: cover;
	object-position: 50% 50%;
}
/* big pics */
.col-13 img {
	margin: 0px;
	padding: 0px;
	margin-top: 50px;
	width: 80%;
	max-width: 1200px;
	height: 750px;
	object-fit: cover;
	object-position: 50% 50%;
}
.col-14 img {
	margin: 0px;
	padding: 0px;
	margin-top: 50px;
	width: 40%;
	max-width: 1200px;
	height: 850px;
	object-fit: cover;
	object-position: 50% 50%;
}
.col-13 h3, .col-14 h3 {
	margin: 0px;
	padding: 0px;
	text-align: right;
	padding-right: 20%;
	padding-bottom: 50px;
	border-bottom: 1px solid grey;
}


