/* ---------- STYLESHEET ---------- */

* {
	margin: 0;
	padding: 0;
}

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

@font-face {
	font-family: 'FFDIN';
	src: url(fonts/Regular.woff2) format('woff2');
}

@font-face {
	font-family: 'FFDIN';
	src: url(fonts/Bold.woff2) format('woff2');
	font-weight: bold;
}

body {
	font-family: 'FFDIN';
	overflow-x: hidden; /* Disable horizontal scroll */
	width: 100%;
}


/* width */
::-webkit-scrollbar {
    width: 0.75vw;
}

/* Track */
::-webkit-scrollbar-track {
    background: none;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: black;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: black;
    cursor: pointer;
}

#myBtn {
	width: 3vw;
	height: 3vw;
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 2.1vw; /* Place the button at the bottom of the page */
    right: 2.1vw; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    background-image: url(images/scrollup_sw.png);
    background-size: contain;
    cursor: pointer; /* Add a mouse pointer on hover */
}

#myBtn:hover {
	background-image: url(images/scrollup.png);
	background-size: contain;
	cursor: pointer;

}


/* ---------- wrapper ---------- */

#wrapper {
	width: 100%;
	height: auto;
	background-color: lightpink;
}


/* ---------- Navigation ---------- */
/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1000000; /* Stay on top */
    top: -1vw;
    right: -2vw;
    background-color: white; /* White*/
    border: 0.5vw solid black;
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 6vw; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 1.75vw;
    color: black;
    display: block;
    z-index: 10000;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus {
    font-style: italic;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
	width: 2.25vw;
	height: 2.25vw;
    position: absolute;
    top: 2.6vw;
    right: 2.2vw;
    margin-left: 5vw;
    background-image: url(images/cross_sw.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.closebtn:hover {
	background-image: url(images/cross.png);
	background-size: contain;
}


#hamburger {
	width: 3vw;
	height: 3vw;
	position: fixed;
	background-image: url(images/hamburger_sw.png);
	background-size: contain;
	z-index: 1000;
	top: 2.1vw;
	right: 2.1vw;
}

#hamburger:hover {
	background-image: url(images/hamburger.png);
	background-size: contain;
	cursor: pointer;
}


/* ---------- header ---------- */
header {
	width: 100%;
	height: auto;
	background-color: white;
	margin: 0 auto;
}

#akzentBalken {
	width: 28vw;
	height: 2vw;
	background-color: black;
	margin-left: 10%;
}

#textblock_header1 { /* Portfolio */
	width: 50%;
	height: auto;
	background-color: white;
	color: black;
	margin-left: 9.5%;
	font-size: 7.2vw;
}

#textblock_header2 { /* Matteo Wiesheu */
	width: 50%;
	height: auto;
	background-color: white;
	margin-left: 10%;
	font-size: 1.75vw;
	margin-top: -1%;
}

#text_thumbnail {
	width: 100%;
	height: auto;
	background-color: white;
	margin-top: 2%;
	font-size: 1.5vw;
	float: left;
}


/* ---------- main1 ---------- */
#main1 {
	width: 100%;
	height: auto;
	background-color: white;
	margin-top: 1%;
	float: left;
}

#mainSubheadline1 { /* Latest/Current Projects */
	width: 12vw;
	height: auto;
	background-color: black;
	color: white;
	margin-left: 10%;
	margin-top: 3%;
	font-size: 1.75vw;
}


/* ---------- main 1 Rahmen 019 Archiv ---------- */
#main1ProjectRahmen019 {
	width: 35%;
	height: 31.5vw;
	background-color: white;
	margin-left: 10%;
	margin-top: 30px;
	float: left;
}

#thumbnail_m1_PR019 {
	width: 100%;
	height: 75%;
	background-color: white;
	background-image: url(images/thumbnails/Archiv_sw.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	float: left;
}

#thumbnail_m1_PR019:hover {
	background-image: url(images/thumbnails/Archiv.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
}


/* ---------- main 1 Rahmen 018 InterfaceDesign ---------- */
#main1ProjectRahmen018 {
	width: 35%;
	height: 31.5vw;
	background-color: white;
	margin-left: 10%;
	margin-top: 30px;
	float: left;
}

#thumbnail_m1_PR018 {
	width: 100%;
	height: 75%;
	background-color: white;
	background-image: url(images/thumbnails/Interface_sw.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	float: left;
}

#thumbnail_m1_PR018:hover {
	background-image: url(images/thumbnails/Interface.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
}


/* ---------- main 1 Rahmen 017 Meta Type ---------- */
#main1ProjectRahmen017 {
	width: 35%;
	height: 31.5vw;
	background-color: white;
	margin-left: 10%;
	margin-top: 30px;
	float: left;
}

#thumbnail_m1_PR017 {
	width: 100%;
	height: 75%;
	background-color: white;
	background-image: url(images/thumbnails/MetaType_sw.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	float: left;
}

#thumbnail_m1_PR017:hover {
	background-image: url(images/thumbnails/MetaType.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
}


/* ---------- main 1 Rahmen 016 Korea ---------- */
#main1ProjectRahmen016 {
	width: 35%;
	height: 31.5vw;
	background-color: white;
	margin-left: 10%;
	margin-top: 30px;
	float: left;
}

#thumbnail_m1_PR016 {
	width: 100%;
	height: 75%;
	background-color: white;
	background-image: url(images/thumbnails/Korea_sw.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	float: left;
}

#thumbnail_m1_PR016:hover {
	background-image: url(images/thumbnails/Korea.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
}


/* ---------- main 1 Rahmen 015 elta ---------- */
#main1ProjectRahmen015 {
	width: 35%;
	height: 31.5vw;
	background-color: white;
	margin-left: 10%;
	margin-top: 30px;
	float: left;
}

#thumbnail_m1_PR015 {
	width: 100%;
	height: 75%;
	background-color: white;
	background-image: url(images/thumbnails/elta_sw.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	float: left;
}

#thumbnail_m1_PR015:hover {
	background-image: url(images/thumbnails/elta.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
}


/* ---------- main 2 ---------- */
#main2 {
	width: 100%;
	height: auto;
	background-color: white;
	margin-top: 3%;
	float: left;
}


/* ---------- main 2 Rahmen 014 DB ---------- */
#main2ProjectRahmen014 {
	width: 35%;
	height: 31.5vw;
	background-color: white;
	margin-left: 10%;
	margin-top: 30px;
	float: left;
}

#thumbnail_m2_PR014 {
	width: 100%;
	height: 75%;
	background-color: white;
	background-image: url(images/thumbnails/DB_sw.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	float: left;
}

#thumbnail_m2_PR014:hover {
	background-image: url(images/thumbnails/DB.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
}


/* ---------- main 2 Rahmen 013 ETW ---------- */
#main2ProjectRahmen013 {
	width: 35%;
	height: 31.5vw;
	background-color: white;
	margin-left: 10%;
	margin-top: 30px;
	float: left;
}

#thumbnail_m2_PR013 {
	width: 100%;
	height: 75%;
	background-color: white;
	background-image: url(images/thumbnails/ETW_sw.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	float: left;
}

#thumbnail_m2_PR013:hover {
	background-image: url(images/thumbnails/ETW.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
}


/* ---------- main 2 Rahmen 012 sprungbrett ---------- */
#main2ProjectRahmen012 {
	width: 35%;
	height: 31.5vw;
	background-color: white;
	margin-left: 10%;
	margin-top: 30px;
	float: left;
}

#thumbnail_m2_PR012 {
	width: 100%;
	height: 75%;
	background-color: white;
	background-image: url(images/thumbnails/sprungbrett_sw.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	float: left;
}

#thumbnail_m2_PR012:hover {
	background-image: url(images/thumbnails/sprungbrett.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
}


/* ---------- main 2 Rahmen 011 Baerlin --------- */
#main2ProjectRahmen011 {
	width: 35%;
	height: 31.5vw;
	background-color: none;
	margin-right: 10%;
	margin-top: 30px;
	float: right;
}

#thumbnail_m2_PR011 {
	width: 100%;
	height: 75%;
	background-color: none;
	background-image: url(images/thumbnails/baerlin_sw.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	float: left;
}

#thumbnail_m2_PR011:hover {
	background-image: url(images/thumbnails/baerlin.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
}


/* ---------- main 2 Rahmen 010 FPHRESH --------- */
#main2ProjectRahmen010 {
	width: 35%;
	height: 31.5vw;
	background-color: none;
	margin-left: 10%;
	margin-top: 30px;
	float: left;
}

#thumbnail_m2_PR010 {
	width: 100%;
	height: 75%;
	background-color: none;
	background-image: url(images/thumbnails/FPHRESH_sw.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	float: left;
}

#thumbnail_m2_PR010:hover {
	background-image: url(images/thumbnails/FPHRESH.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
}


/* ---------- main 2 Rahmen 009 Apfelbaum ---------- */
#main2ProjectRahmen009 {
	width: 35%;
	height: 31.5vw;
	background-color: none;
	margin-left: 10%;
	margin-top: 30px;
	float: left;
}

#thumbnail_m2_PR009 {
	width: 100%;
	height: 75%;
	background-color: none;
	background-image: url(images/thumbnails/apfelbaum_sw.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	float: left;
}

#thumbnail_m2_PR009:hover {
	background-image: url(images/thumbnails/apfelbaum.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
}


/* ---------- main 2 Rahmen 008 LENA ---------- */
#main2ProjectRahmen008 {
	width: 35%;
	height: 31.5vw;
	background-color: none;
	margin-left: 10%;
	margin-top: 30px;
	float: left;
}

#thumbnail_m2_PR008 {
	width: 100%;
	height: 75%;
	background-color: none;
	background-image: url(images/thumbnails/LENA_sw.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	float: left;
}

#thumbnail_m2_PR008:hover {
	background-image: url(images/thumbnails/LENA.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
}


/* ---------- main2 Rahmen 008_ WOTER --------- */
#main2ProjectRahmen008_ {
	width: 35%;
	height: 31.5vw;
	background-color: none;
	margin-left: 10%;
	margin-top: 30px;
	float: left;
}

#thumbnail_m2_PR008_ {
	width: 100%;
	height: 75%;
	background-color: none;
	background-image: url(images/thumbnails/WOTER_sw.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	float: left;
}

#thumbnail_m2_PR008_:hover {
	background-image: url(images/thumbnails/WOTER.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
}


/* ---------- main2 Rahmen 007 BB --------- */
#main2ProjectRahmen007 {
	width: 35%;
	height: 31.5vw;
	background-color: none;
	margin-left: 10%;
	margin-top: 30px;
	float: left;
}

#thumbnail_m2_PR007 {
	width: 100%;
	height: 75%;
	background-color: none;
	background-image: url(images/thumbnails/BB_sw.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	float: left;
}

#thumbnail_m2_PR007:hover {
	background-image: url(images/thumbnails/BB.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
}


/* ---------- main 2 Rahmen 007_ das_m --------- */
#main2ProjectRahmen007_ {
	width: 35%;
	height: 31.5vw;
	background-color: none;
	margin-left: 10%;
	margin-top: 30px;
	float: left;
}

#thumbnail_m2_PR007_ {
	width: 100%;
	height: 75%;
	background-color: none;
	background-image: url(images/thumbnails/das_m_sw.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	float: left;
}

#thumbnail_m2_PR007_:hover {
	background-image: url(images/thumbnails/das_m.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
}


/* ---------- main 2 Rahmen 006 BARCELONA --------- */
#main2ProjectRahmen006 {
	width: 35%;
	height: 31.5vw;
	background-color: none;
	margin-left: 10%;
	margin-top: 30px;
	float: left;
}

#thumbnail_m2_PR006 {
	width: 100%;
	height: 75%;
	background-color: none;
	background-image: url(images/thumbnails/BARCELONA_sw.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	float: left;
}

#thumbnail_m2_PR006:hover {
	background-image: url(images/thumbnails/BARCELONA.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
}


/* ---------- main 2 Rahmen 005 newvision ---------- */
#main2ProjectRahmen005 {
	width: 35%;
	height: 31.5vw;
	background-color: none;
	margin-left: 10%;
	margin-top: 30px;
	float: left;
}

#thumbnail_m2_PR005 {
	width: 100%;
	height: 75%;
	background-color: none;
	background-image: url(images/thumbnails/newvision_sw.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	float: left;
}

#thumbnail_m2_PR005:hover {
	background-image: url(images/thumbnails/newvision.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
}


/* ---------- main 2 Rahmen 004 BARCELONAshots ---------- */
#main2ProjectRahmen004 {
	width: 35%;
	height: 31.5vw;
	background-color: none;
	margin-left: 10%;
	margin-top: 30px;
	float: left;
}

#thumbnail_m2_PR004 {
	width: 100%;
	height: 75%;
	background-color: none;
	background-image: url(images/thumbnails/BARCELONAshots_sw.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	float: left;
}

#thumbnail_m2_PR004:hover {
	background-image: url(images/thumbnails/BARCELONAshots.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
}


/* ---------- main 2 Rahmen 003 MEXICOshots --------- */
#main2ProjectRahmen003 {
	width: 35%;
	height: 31.5vw;
	background-color: none;
	margin-left: 10%;
	margin-top: 30px;
	float: left;
}

#thumbnail_m2_PR003 {
	width: 100%;
	height: 75%;
	background-color: none;
	background-image: url(images/thumbnails/MEXICOshots_sw.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	float: left;
}

#thumbnail_m2_PR003:hover {
	background-image: url(images/thumbnails/MEXICOshots.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
}


/* ---------- main 2 Rahmen 002 LUNARASHES ---------- */
#main2ProjectRahmen002 {
	width: 35%;
	height: 31.5vw;
	background-color: none;
	margin-left: 10%;
	margin-top: 30px;
	float: left;
}

#thumbnail_m2_PR002 {
	width: 100%;
	height: 75%;
	background-color: none;
	background-image: url(images/thumbnails/lunar_ashes_sw.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	float: left;
}

#thumbnail_m2_PR002:hover {
	background-image: url(images/thumbnails/lunar_ashes.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
}


/* ---------- main 2 Rahmen 001 LONDONshots ---------- */
#main2ProjectRahmen001 {
	width: 35%;
	height: 31.5vw;
	background-color: none;
	margin-left: 10%;
	margin-top: 30px;
	float: left;
}

#thumbnail_m2_PR001 {
	width: 100%;
	height: 75%;
	background-color: none;
	background-image: url(images/thumbnails/LONDONshots_sw.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	float: left;
}

#thumbnail_m2_PR001:hover {
	background-image: url(images/thumbnails/LONDONshots.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
}


/* ---------- main 2 Ende Platzhalter ---------- */
#main2EndePlatzhalter {
	width: 100%;
	height: 2vw;
	background-color: none;
	float: right;
}


/* ---------- main 2 footer ---------- */
#main2footer {
	width: 100%;
	height: 10vw;
	margin-left: 9.8%;
	background-color: none;
	float: left;
}

#main2footer a:hover {
	font-style: italic;
}