@charset "utf-8";

*{
	box-sizing: border-box;
	padding: 0;
	margin: 0; 
	text-decoration: none;
	font-family: "din-2014", sans-serif;
	text-align: center;
	color: #4d5150;
	list-style: none;
}

.wrapper {
	display: grid;
	grid-template-columns: repeat(12, [col-start] 1fr);
	grid-gap: 5px;
	max-width: 1350px;
	margin: 1%;
}

h1 {
	font-size: 1.1rem;
	font-weight: 700;
}

h2, h3 {
	font-size: 1rem;
	font-weight: 700;
}

h4 {
	font-size: 1rem;
	font-weight: 400;
}

p {
	font-size: 1rem;
	font-weight: 300;
}

a:link {
    text-decoration: none;
	font-weight: 700;
}

a:hover {
    color: #eb600a;
}

a:active {
    color: #eb600a;
}	

  .header {
    grid-column: col-start 1 / span 12;
    grid-row: 1;
	display: inline-flex;
	justify-content: space-between;
	align-items: flex-end;
	padding-top: 2px;
}

.nav {
	text-align: center;
	text-decoration: none;
	z-index: 9;
  }

.nav ul {
	display: inline-flex;
}

.nav ul li {
	position: relative;
	width: 120px; 
	margin: 10px 0px 3px 0px;
	padding: 0px 0px 0px 0px;
}

.nav ul li a {
	display: block;
}

.sub-menu {
	display: none;
}

.active, .nav ul li:hover {
}

.nav ul li:hover .sub-menu {
	display: block;
	position: absolute;
	background-color: rgba(255,255,255,0.85);
	width: 120px;
	margin: 0px;
	padding: 0px;
}

.nav ul li:hover .sub-menu ul {
	display: block;
	margin: 0px;
}

.nav ul li:hover .sub-menu ul a {
	font-size: 1rem;
}

.nav ul li a {
    text-decoration: none;
	font-size: 1.2rem;
	color: #4d5150;
	padding-left: 5px;
	padding-right: 5px;
}

.nav a:hover {
  color: #eb600a;
}

.nav a.active {
  color: #eb600a;
}

/* ================================  H O M E  =============================== */

	.welcome {
    grid-column: col-start 2 / span 6;
    grid-row: 2;
	padding-top: 60px;
	padding-bottom: 40px;
}

	.welcome h1 {
	font-size: 1.3rem;
}

	.circles {
    display: grid;
	grid-column: col-start 1 / span 8;
    grid-row: 3;
}

	.view {
    display: grid;
	grid-column: col-start 9 / span 4;
    grid-row: 3;
	align-items: center;
}

	.view-button {
	margin: 0% 5% 0% 25%;
	padding: 0.4em 0.1em 0.2em 0.1em;
	border: 0.15em solid #fff;
	border-radius: 2px;
	box-shadow: 3px 3px 7px lightgray;
}

	.view-button:hover {
	color: #fff;
	box-shadow: 3px 3px 9px lightgray;
}

	.view-button h3:hover {
	color: #eb600a;
}

	.please {
    grid-column: col-start 2 / span 6;
    grid-row: 6;
	padding: 8% 0% 8% 0%;
}

  	.figure1, .figure2, .figure3, .figure4 {
	position: relative;
	object-fit: cover;
    border-radius: 50%;
	border: 0.2em solid white;
	box-shadow: 0px 0px 12px lightgray;
	overflow: hidden;
}

  	.figure1 {
	grid-column: col-start 1 / span 3;
	grid-row: 3;
	z-index: 2;
}

  	.figure2 {
    grid-column: col-start 3 / span 3;
    grid-row: 3;
	z-index: 3;
	}

  	.figure3 {
	grid-column: col-start 5 / span 3;
    grid-row: 3;
	z-index: 4;
	}
  
	.figure4 {
    grid-column: col-start 7 / span 3;
    grid-row: 3;
	z-index: 5;
	}

	.figure-img {
  	display: block;
 	width: 100%;
  	height: auto;
  	object-fit: cover;
	}

	.figure1:hover, .figure2:hover, .figure3:hover, .figure4:hover {
	box-shadow: 0px 0px 15px #4d5150;
	z-index: 8;
	transition: 0.6s ease;
	}

	.figure-title {
	font-size: 0.85rem;
	position: absolute;
	top: 45%;
	left: 2%;
	padding: 0.3em 0.5em 0.3em 0.5em;
	background-color: #fff;
	border-radius: 9px;
	box-shadow: 0px 0px 10px #4d5150;
	color: #4d5150;
	letter-spacing: 0.05rem;
	}

	.footer {
	grid-column: col-start 1 / span 12;
	grid-row: 7;
	margin-top: 75px;
	justify-self: end;
	border-top: solid 1.5px gray;
  	}

	.footer li {
	display: inline-block;
	color: #4d5150;
	padding: 12px 8px 0px 8px;
	}

/* vvvvvvvvvvvvvvvvvvvvvvv P O R T F O L I O vvvvvvvvvvvvvvvvvvvvvvvvvvv */

.p-intro {
	grid-column: col-start 3 / span 8;
	grid-row: 2;
	margin: 50px 40px 40px 40px;
	line-height: 150%;
	}

.p-main {
	display: grid;
	grid-column: col-start 1 / span 12;
	grid-template-columns: 20% 20% 20% 20%;
	grid-row: 4;
	grid-gap: 2%;
	justify-content: center;
	text-align: center;
	}

.p-main img {
	position: relative;
	object-fit: cover;
	width: 90%;
	height: auto;
    border-radius: 50%;
	border: 0.1em solid white;
	box-shadow: 0px 0px 10px lightgray;
	overflow: hidden;
	}

.p-main img:hover {
	box-shadow: 0px 0px 9px #4d5150;
	transition: 0.6s ease;
	}

.p-main h3 {
	min-height: 45px;
	margin-top: 11px;
	text-align: center;
	}

.p-main p {
	margin: 0px;
	padding: 0px 6px;
	text-align: center;
	}

/* ======= PORTFOLIO SUB ============== */

:root {
  --fade-time: 0.5s;
	}

.p-buttons {
	grid-column: col-start 1 / span 12;
	grid-row: 2;
	display: flex;
	margin: 12px 0px;
	}

.p-buttons img {
	position: relative;
	object-fit: cover;
	width: 55px;
	height: auto;
    border-radius: 50%;
	box-shadow: 0px 0px 3px lightgray;
	overflow: hidden;
	margin: 0px 5px;
	}

.main-img h1 {
	text-align: center;
	font-size: 1.1em;
	padding: 3px 0px 1px 0px;
	align-self: flex-start;
	}

.main-img {
	grid-column: col-start 1 / span 7;
	grid-row: 4;
	justify-self: center;
	align-self: center;
	}

.main-img img {
	width: 100%;
	padding-top: 1em;
	}

.imgs {
	display: grid;
	grid-column: 8 / span 5;
	grid-row: 4;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 5px;
	align-self: end;
	z-index: 3;
	}

.imgs img {
	width: 100%;
	cursor: pointer;
	object-fit: cover;
    border-radius: 4px;
	border: 0.1em solid white;
	overflow: hidden;
	}

.imgs img:hover {
	opacity: 0.8;
	box-shadow: 0px 0px 7px lightgray;
	transition: 0.2s ease;
	}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.fade-in {
  opacity: 0;
  animation: fadeIn var(--fade-time) ease-in 1 forwards;
}

@media(max-width: 600px) {
  .imgs {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* vvvvvvvvvvvvvvvvvvvvvvvvvv C O N T A C T vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv */
.mug {
	display: grid;
	grid-column: col-start 1 / span 1;
    grid-row: 2;
	margin: 14px 0px 0px 0px;
	padding-right: 15%;
	align-self: flex-start;
}

.mug img {
	width: 150px;
}

.mug h2 {
	background-color: #4d5150;
	color: #ffffff;
	line-height: 1.2em;
	width: auto;
	height: auto;
	padding: 2px 1px 5px 1px;
}

.bio {
	grid-column: col-start 2 / span 6;
    grid-row: 2 / 3;
	margin: 14px 0px;
	min-width: 400px;
}

.bio h1, p {
	text-align: justify;
	line-height: 160%;
}

.links {
	display: grid;
	grid-column: col-start 10 / span 3;
    grid-row: 4 / 6;
	align-self: end;
}

.links img {
	max-width: 130px;
	max-height: 70px;
	padding: 15px;
}
	
.callback {
	grid-column: col-start 10 / span 3;
    grid-row: 2;
	padding: 20px;
}

.callback img {
	width: 150px;
}

.callback h3 {
	font-style: italic;
}


/* ----------- form ----------- */
form {
	grid-column: col-start 2 / span 5;
    grid-row: 4 / 6;
	width: 400px;
	margin-top: 14px;
	padding: 1em;
	background-color: #E5E5E5;
}

form div + div {
  	margin-top: 1em;
	width: 95%;
}

label {
	/* display: inline-block; */
	font-color: #4d5150;
	float: left;
}

input, textarea {
	font: 1em sans-serif;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #999;
	text-align: left;
}

input:focus, textarea:focus {
  border-color: #000;
}
/*
input:invalid {
  border: 1px solid red;
}

input:valid {
  border: 1px solid black; 
} */

textarea {
  vertical-align: top;
  height: 10em;
}

.button {
  /* padding-left: 0px; */
}

button {
	padding: 8px 15px;
	border-radius: 8px;
	background-color: #ffffff;
	border: 2px solid #c7c7c7;
	cursor: pointer;
}


/* ===================================================== */
/* ===================================================== */


@media(max-width: 768px) {
	
	.wrapper {
	grid-gap: 4px;
	margin: 8px;
	border: #FFFFFF 4px solid;
	}
	
	.header {
	display: grid;
	justify-content: center;
	}
	
	#logo {
	margin: auto;
	}
	
	#logo img {
	width: 230px;
	}
	
	.nav {
	padding: 5px 0 0 4px;
	}
	
	.nav ul li:hover .sub-menu {
	display: none;
	}
	
	h1, h2, h3, h4 {
	font-size: 1rem;
	}
	a:link {
    font-size: 1.1rem;
	}
	
	.welcome {
    grid-column: col-start 2 / span 10;
    grid-row: 2;
	}
	.circles {
    grid-column: col-start 1 / span 12;
    grid-row: 3;
	}
	.view {
    grid-column: col-start 2 / span 10;
    grid-row: 5;
	padding-top: 30px;
	}
	.view-button {
	margin: 10%;
	}
	.please {
    grid-column: col-start 1 / span 12;
    grid-row: 6;
	padding: 40px 9% 0px 9%;
	}
	.figure1 {
	grid-column: col-start 1 / span 2;
	}
	.figure2 {
	grid-column: col-start 2 / span 2;
	}
	.figure3 {
    grid-column: col-start 3 / span 2;
	}
	.figure4 {
    grid-column: col-start 4 / span 2;
	}
	.footer {
	grid-column: col-start 1 / span 12;
/*	border-radius: 5px; */
	width: 100%;
	text-align: center;
	}
	
	
	/* PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP */
	
	.p-intro {
	grid-column: col-start 1 / span 12;
	margin: 20px 5px;
	}
	
	.p-main {
	grid-template-columns: 46% 46%;
	grid-gap: 5%;
	margin: 15px 15px 50px 15px;
	}
	
	.p-buttons {
	grid-column: col-start 2 / span 10;
	justify-content: center;
	}
	
	.main-img h2 {
	text-align: center;
	font-size: 1em;
	}
	
	.main-img {
	grid-column: col-start 3 / span 8;
	grid-row: 4;
	}
	
	.imgs {
	display: grid;
	grid-column: 1 / span 12;
	grid-row: 5;
	grid-template-columns: repeat(8, 1fr);
	grid-gap: 5px;
	}
	
	
/* vvvvvvvv contact vvvvvvvv */
	.mug {
	display: grid;
	grid-column: col-start 10 / span 3;
    grid-row: 2 / 3;
	justify-content: center;
	padding: 4px 3px 0px 12px;
	}
	
	.mug img {
	width: 120px;
	}
	
	.bio {
	grid-column: col-start 1 / span 7;
    grid-row: 2 / 3;
	margin: 14px 2px 0px 5px;
	min-width: 325px;
	}
	
	.links {
	grid-column: col-start 1 / span 12;
    grid-row: 6;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	justify-items: center;
	align-items: center;
	margin: 14px 0px 0px 0px;
	}
	
	.links img {
	max-width: 100px;
	max-height: 65px;
	padding: 10px;
}
	
	.callback {
	grid-column: col-start 10 / span 3;
    grid-row: 4 / 5;
	padding: 0px;
	justify-content: center;
	}
	
	.callback img {
	width: 130px;
	}
	
form {
	grid-column: col-start 1 / span 7;
    grid-row: 4 / 6;
	width: 100%;
	min-width: 325px;
	margin: 14px 2px 0px 5px;
	}
	
}
/* ================================= */
/* ================================= */
@media(max-width: 470px) {
	
	.wrapper {
	grid-gap: 3px;
	margin: 8px;
	border: none;
	}
	
	#logo {
	float: none;
	}
	
	.nav {
	float: none;
	padding: 5px 0px 8px 4px;
	}
	.welcome {
    grid-column: col-start 1 / span 12;
    grid-row: 2;
	padding: 22px 35px;
	}
	
	.circles {
    grid-column: col-start 1 / span 12;
    grid-row: 3 / 4;
	}
	.figure1 {
	grid-column: col-start 1 / span 7;
	grid-row: 3;
	}
	.figure2 {
	grid-column: col-start 6 / span 7;
	grid-row: 3;
	}
	.figure3 {
    grid-column: col-start 1 / span 7;
    grid-row: 4;
	}
	.figure4 {
    grid-column: col-start 6 / span 7;
    grid-row: 4;
	}
	
	.view {
    grid-column: col-start 1 / span 12;
    grid-row: 5;
	padding: 10px 40px;
	}
	.please {
    grid-column: col-start 1 / span 12;
    grid-row: 6;
	padding: 10px 40px;
	}
	.footer {
	grid-column: col-start 1 / span 12;
	grid-row: 7;
	}
	
/* vvvvvvvvvvvvvvvvvvvvvvvvvvvvvv contact vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv */
	.mug {
	grid-column: col-start 2 / span 10;
    grid-row: 2;
	margin: auto;
	padding-top: 14px;
	}

	.bio {
	grid-column: col-start 1 / span 12;
    grid-row: 3;
	width: 96%;
	margin: 20px 5px 0px 5px;
	}
	
	form {
	grid-column: col-start 1 / span 12;
    grid-row: 4;
	width: 98%;
	margin: 20px 3px 5px 3px;
	}
	
	.callback {
	grid-column: col-start 3 / span 8;
    grid-row: 5;
	}
	
	.links {
	grid-column: col-start 1 / span 12;
    grid-row: 6;
	margin-top: 20px;
	}
	
}