/*
          /\  /\ 
        =(  ^.^ )= 
         __m__m__
			Everything is going to be okay!
			ok-studio.com
*/	

/* =(CSS RESET)= */

* {
	margin: 0;
	padding: 0;
}

/* =(CSS COLOR CLASSES)= */

.gold {background-color: gold;
}

.beige {background-color: beige;
}

.white {background-color: white;
}

/* =(HTML5 SEMANTIC TAGS)= */

html, body {
	scroll-behavior: smooth;
}

main {
	width: 100vw;
	height: 15vh;
	position: fixed;
}

header {
	width: 100vw;
	height: 11vh;
	margin-top: 4vh;
	position: fixed;
}

nav {
	width: 100vw;
	height: 10vh;
	position: fixed;
	margin-top: 1vh;
}

nav#drawer {
			position: fixed;
			font-size: 12vh;
			padding: 0px 20px 0px 100px;
			box-shadow: 2px 2px 20px 0px black;
			background-color: rgba(128, 128, 128,0.8);
		}

		.after-click {
			transform: translateX(100px);
		}
		
			nav#drawer ul {
				list-style-type: none;
			}
				nav#drawer ul li a {
					text-decoration: none;
					color: black;
				}
					nav#drawer ul li a: hover {
						color: white;
					}

#logo {
	width: 10vw;
	height: 10vh;
	margin: 0 5vw 2vh 2vw;
	float: left;
}

ul {
	list-style-type: none;
	width: 70vw;
	height: 10vh;
	margin-left: 10vw;
	float: left;
}

li {
	display: inline;
	margin: 2vw;
	float: left;
}

#menu {
	width: 10vw;
	height: 10vh;
	display: inline;
	margin: 2vw;
	float: right;
}

/* =(HAMBURGER ICON)= */
		
		button#hamburger-icon {
			position: fixed;
			font-size: 2.5em;
			line-height: 0;
			border: 5px solid #000;
			border-radius: 20%;
			padding: 22px 8px 28px 8px;
			top: 20px;
			left: 20px;
			z-index: 100;
			cursor: pointer;
			background-color: transparent;
		}

		button#hamburger-icon:hover {
			border-color: #fff;
			color: #fff;
			background-color: rgba(255,255,255,0.5);
		}

section {
	width: 100vw;
	height: 85vh;
	padding-top: 15vh;
}

footer {
	width: 100vw;
	height: 15vh;
}

article {
	width: 100vw;
	height: 30vh;
} 

article.third {

}

figure {
	width: 100vw;
	height: 70vh;
}

#top {
	position: fixed;
	width: 10vw;
	height: 10vh;
	display: inline;
	margin-left: 90vw;
	opacity: .1;
	transition: opacity 1s;
}

#top:hover {
	transform: translateY(-2vw);
		-ms-transform: translateY(-2vw);
		-webkit-transform: translateY(-2vw);
	color: black;
	opacity: 1;	
}

span {

}

span:hover {

}

figure.half {
	width: 100vw;
	height: 70vh;
}

/* =(IMAGES)= */

img.resize {
	width: 100vw;
	height: 69vh;
	object-fit: cover;
	object-position: 50% 120%;
}

img#resize_logo {
	height: 10vh;
	object-fit: cover;
	object-position: 0 0;
}

img.resize_half {
	width: 100vw;
	height: 70vh;
	object-fit: cover;
	object-position: 0 0;
}

/* =(TEXT)= */
@font-face {
	font-family: roboto;
	src: url('../fonts/roboto-2014/Roboto-Bold.ttf'),
		 url('../fonts/roboto-2014/Roboto-Medium.ttf'),
		 url('../fonts/roboto-2014/Roboto-Regular.ttf');
}

h1, h2, p, a {
	font-family: 'roboto', sans-serif;
}

h1, h2, a {
	font-weight: bold;
	text-align: center;
	margin-top: 2vh;
}

h1 {
	font-size: 24px;
}

h1.heading {
	display: none;
}

a, h2 {
	font-size: 21px;
}

h3 {
	font-family: 'Gothic A1', sans-serif;
}

p {
	text-indent: 25px;
	text-align: left;
	font-weight: normal;
	padding: 2vw;
}

a {
	color: black;
	text-decoration: none;
}

a:hover {
	color: red;
}

a:active {
	color: red;
	font-weight: bold;
}

span {

}

/* =(MOBILE DISPLAY 1px - 479px WIDE)= */

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

		section#mobile {
			width: 479px;
			height: 627px;
	}

		ul {
			display: none;
		}
		
		img.resize {
		object-position: 50% 50%;
		}

		#top {
			display: none;
		}

		h1, h2, p {
			font-weight: normal;
		}

		h1 {
			font-size: 18px;
		}

		h2 {
			font-size: 16px;
		}

		p {
			font-size: 10px;
		}
}

/* =(TABLET DISPLAY 768px - 1365px WIDE)= */

@media screen and (min-width: 768px) and (max-width: 1365px) {

		section#tablet {
			width: 768px;
			height: 1024px;
	}
		#menu {
			display: none;
		}
		
		button {
			display: none;
		}
		
		figure.half {
		width: 50vw;
		height: 70vh;
		display: inline;
		float: left;
		}

		img.resize_half {
		width: 50vw;
		height: 85vh;
		}

		article {
		width: 50vw;
		height: 70vh;
		display: inline;
		float: left;
		}
}

/* =(LAPTOP & DESKTOP DISPLAY 1365px or WIDER BREAKPOINT)= */

@media screen and (min-width: 1365px) {

		section#desktop {
			width: 1920px;
			height: 1080px;
	}

		#menu {
			display: none;
		}

		button {
			display: none;
		}

		figure.half {
			width: 50vw;
			height: 70vh;
			display: inline;
			float: left;
		}

		img.resize_half {
		width: 50vw;
		height: 85vh;
		}

		article {
		width: 50vw;
		height: 70vh;
		display: inline;
		float: left;
		}
}