@charset "utf-8";
/* CSS Document */

@font-face {
    src: url(fonts/MonumentGroteskMono-Regular.otf);
    font-family: copy;}
@font-face {
    src: url(fonts/MonumentGroteskMono-Medium.otf);
    font-family: copy-bold;}
@font-face {
    src: url(fonts/freedom-destiny.otf);
    font-family: headline;}
@font-face {
    src: url(fonts/MonumentGroteskMono-Regular.otf);
    font-family: title;}
@font-face {
    src: url(fonts/MonumentGroteskSemi-Mono-Bold.otf);
    font-family: highlight;}

body {margin: 0; padding: 0; max-width: 100%;}
.about {max-width: 100%; height: auto;}

/****************** Logo ******************/
.logo {position: fixed; background-image: url(img/logo.gif); background-position: top; background-repeat: no-repeat; background-size: contain; top: 0; left: 50%; transform: translateX(-50%); z-index: 100;}
.logo:hover {transition: all ease-in-out 0.5s;}

/**************** Navigation ****************/
.contact {position: fixed;  display: block; z-index: 100;}

.mail {position: relative; display: inline-block; z-index: 100; background-image: url(img/contact/mail.svg); background-color: transparent; background-size: 100%; background-position: center; background-repeat: no-repeat; cursor: pointer;}
.mail:hover {background-image: url(img/contact/mail_hover.svg); transition: all 1s ease;}

.linkedin {position: relative; display: inline-block; z-index: 100; background-image: url(img/contact/linkedin.svg); background-color: transparent; background-size: 90%; background-position: center; background-repeat: no-repeat; cursor: pointer;}
.linkedin:hover {background-image: url(img/contact/linkedin_hover.svg); transition: all 1s ease;}
.linkedin-w {position: relative; display: inline-block; z-index: 100; background-image: url(img/contact/linkedin-w.svg); background-color: transparent; background-size: 90%; background-position: center; background-repeat: no-repeat; cursor: pointer;}
.linkedin-w:hover {background-image: url(img/contact/linkedin_hover.svg); transition: all 1s ease;}

.behance {position: relative; display: inline-block; z-index: 100; background-image: url(img/contact/behance.svg); background-color: transparent; background-size: 90%; background-position: center; background-repeat: no-repeat; cursor: pointer}
.behance:hover {background-image: url(img/contact/behance_hover.svg); transition: all 1s ease;}
.behance-w {position: relative; display: inline-block; z-index: 100; background-image: url(img/contact/behance-w.svg); background-color: transparent; background-size: 90%; background-position: center; background-repeat: no-repeat; cursor: pointer}
.behance-w:hover {background-image: url(img/contact/behance_hover.svg); transition: all 1s ease;}

#about {position: fixed; z-index: 100;}
#about a {font-family: 'copy', sans-serif; color: black; text-decoration: none;}
#about a:hover {font-family: 'copy-bold', sans-serif; transition: all 0.7s ease;}

/****************** Start ******************/
/*------------ Chapter ------------*/
.chapters {width: 100%; margin: 0; display: grid;}

/*------------ Chapter Title ------------*/
h1 {height: auto; font-family: 'headline', serif; font-weight: 200; color: white; text-align: left; cursor: pointer; text-decoration: none; text-transform: uppercase; border-bottom-style: none;}
h1:after {background: none repeat scroll 0 0 transparent; bottom: 0.5em; text-decoration: none; content: ""; display: block; height: 0.04em; background: white; transition: width 0.5s ease 0s, left 0.3s ease 0s; width: 0%; left: 0%; position: absolute;}
h1:hover:after {width: 30%; left: 0%;}

.chapter_item {position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 95%; height: 95%;}

/****************** Projects ******************/
img {width: 100%; margin: 0; height:auto;}    
video {width: 100%; margin: 0; height:auto;}    

/*------------ Projects: Navigation  ------------*/
.next {position: fixed; border: none; text-decoration: none; background-image:url(img/navigation/next.svg); background-color: transparent; background-size: 95%; background-repeat: no-repeat; background-position: center; cursor: pointer; z-index: 100;}

.prev {position: fixed; border: none; text-decoration: none;  background-image: url(img/navigation/prev.svg); background-color: transparent; background-size: 95%; background-repeat: no-repeat; background-position: center; cursor: pointer; z-index: 100;}

h2 {position: fixed; margin-left: auto; margin-right: auto; width: 100%; font-family: 'title', sans-serif; letter-spacing: 0.05em; font-weight: 700; color: white; text-transform: uppercase; text-align: center; text-transform: uppercase; z-index: 0;}

/*------------ Projects: Information ------------*/
.project_information {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-auto-flow: column;}

h4 {font-family: 'headline', serif; text-transform: uppercase; text-align: left; display: inline-grid; margin: 0;}

.project_information p {display: inline-grid;}

/****************** About ******************/

.about_portrait {height: 100vh; width: 100vw; position: fixed; background-image: url(img/about/about_landscape.png); background-repeat: no-repeat; background-position: center; background-size: cover; z-index: -100;}
.about_cutout {height: 100vh; width: 100vw; position: fixed; background-image: url(img/about/transparent_landscape.png); background-repeat: no-repeat; background-position: center; background-size: cover; z-index: 80;}

.about_title {width: 100vw;}

/*------------ Content: Charts  ------------*/
h7 {display: inline-block; position: relative;  text-transform: uppercase; font-family: 'headline', serif; color: lightgoldenrodyellow; text-align: center; left: 50%; transform: translateX(-50%);}

h3 {font-family: 'headline', serif;  text-transform: uppercase; color: black;}
p {font-family: 'copy', monospace; color: black; text-align: left;}

.about_skills {position: relative; width: 100%; margin-left: auto; margin-right: auto;}
.about_skills_item {width: 80%; margin-left: auto; margin-right: auto; margin-bottom: 10vh;}

/*------------ Skills: Infographic  ------------*/
.skills {width: 100%; display: grid;}

.skill-item {width: 100%; margin-left: auto; margin-right: auto;}
.chart-container {position: relative; width: 100%; height: 0; padding-top: 100%;}
.skill-item .chart, .skill-item .chart canvas {
    position: absolute; display: block; top: 0;left: 0; width: 100% !important; height: 100% !important;}

/*------------ Skills: Icons  ------------*/
.indesign {
    background-image: url(img/skills/indesign.svg); 
    background-repeat: no-repeat; 
    background-size: 30%; 
    background-position: center;}
.photoshop {
    background-image: url(img/skills/photoshop.svg); 
    background-repeat: no-repeat; 
    background-size: 30%; 
    background-position: center; }
.illustrator {
    background-image: url(img/skills/illustrator.svg); 
    background-repeat: no-repeat; 
    background-size: 30%; 
    background-position: center;}
.afx {
    background-image: url(img/skills/after-effects.svg); 
    background-repeat: no-repeat; 
    background-size: 30%; 
    background-position: center;}
.premiere {
    background-image: url(img/skills/premiere.svg); 
    background-repeat: no-repeat; 
    background-size: 30%; 
    background-position: center;}
.figma {
    background-image: url(img/skills/figma.svg); 
    background-repeat: no-repeat; 
    background-size: 30%; 
    background-position: center;}
.cinema {
    background-image: url(img/skills/cinema.svg); 
    background-repeat: no-repeat; 
    background-size: 35%; 
    background-position: center;}
.htmlcss {
    background-image: url(img/skills/html-css.svg); 
    background-repeat: no-repeat; 
    background-size: 40%; 
    background-position: center;}

.about_cv {position: relative; display: block; width: 100%;}
/*------------ CV: Table  ------------*/
.cv {width: 100vw; margin-bottom: 100vh;}

tr {display: table-row; border-bottom: 0.1em solid black; display: block; position: relative; width: 100vw; float: left; vertical-align: baseline; margin: 0;}
td {display: table-cell; vertical-align: bottom;}

.column_1 {color: black; font-family: 'headline', serif; font-weight: 200; text-align: right; position: relative; float: left; grid-column: }
.column_2 {color: black; font-family: 'highlight', serif; text-transform: uppercase; position: relative; float: left;}
.column_3 {color: black; font-family: 'copy', serif; font-weight: 200; position: relative; float: left;}

.about_grid {margin-left: auto; margin-right: auto; display: inline-grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-auto-flow: column;}

/***************** Clients: Projects *****************/
.grid {margin-left: auto; margin-right: auto; display: inline-grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-auto-flow: column;}

/***************** Media Queries *****************/

@media only screen and (max-width: 450px) and (orientation:portrait) {
.logo {width: 9vw; height: 16vh;}
.logo:hover {width: 6.5vw; height: 11vh;}

/**************** Navigation ****************/
.contact {margin-top: 4%; right: 4%; width: 22vw; height: 5.5vw;}
.mail {margin-right: 1vw; width: 5.5vw; height: 5.5vw;}

.linkedin {width: 5.5vw; height: 5.5vw; margin-right: 0.5vw;}
.linkedin-w {width: 6vw; height: 5.5vw; margin-right: 0.5vw;}

.behance {width: 7vw; height: 5.5vw;}
.behance-w {width: 7vw; height: 5.5vw;}

#about {bottom: 3%; right: 4%;}
#about a {font-size: 1em;}

.chapters {padding-top: 6vh;}

/****************** Start ******************/
.chapter {max-width: 50vw; height: 20vh; width: 100%; padding-bottom: 20%;background-size: 90%; background-repeat: no-repeat; background-position: center;}
.chapter:hover {background-size: 95%; transition: all ease-in-out 0.2s;}
    
#wagner {background-image:url(img/chapter/chapter_wagner.gif?v=2); grid-row: 1; grid-column: 1;}
#podcast {background-image:url(img/chapter/chapter_podcast.jpg?v=2); grid-row: 1; grid-column: 2;}
#moehrenstrasse {background-image:url(img/chapter/chapter_gitti.jpg?v=2); grid-row: 2; grid-column: 1;}
#young-monks {background-image:url(img/chapter/chapter_young-monks.jpg?v=2); grid-row: 2; grid-column: 2;}
#earth {background-image:url(img/chapter/chapter_diversity-earth.jpg?v=2); grid-row: 3; grid-column: 1;}
#css {background-image:url(img/chapter/chapter_css.jpg?v=2); grid-row: 3; grid-column: 2;}
#gitti {background-image:url(img/chapter/chapter_client.jpg?v=2); grid-row: 4; grid-column: 1;}
#mini {background-image:url(img/chapter/chapter_mini.jpg?v=2); grid-row: 4; grid-column: 2;}
#tsukka {background-image:url(img/chapter/chapter_tsukka.gif?v=2); grid-row: 5; grid-column: 1;}
#editorial {background-image:url(img/chapter/chapter_editorial-01.jpg?v=2); grid-row: 5; grid-column: 2;}
#bao {background-image:url(img/chapter/chapter_bao.jpg?v=2); grid-row: 6; grid-column: 1;}
#love {background-image:url(img/chapter/chapter_diversity-love.jpg?v=2); grid-row: 6; grid-column: 2;}
#travelling {background-image:url(img/chapter/chapter_travelers-eye.jpg?v=2); grid-row: 7; grid-column: 1;}
#flying-teapot {background-image:url(img/chapter/chapter_flying-teapot.gif?v=2); grid-row: 7; grid-column: 2;}
#editorial-02 {background-image:url(img/chapter/chapter_editorial-02.jpg?v=2); grid-row: 8; grid-column: 1;}
#flying-teapot-02 {background-image:url(img/chapter/chapter_flying-teapot-02.gif?v=2); grid-row: 8; grid-column: 2;}
#bao-02 {background-image:url(img/chapter/chapter_bao-02.jpg?v=2); grid-row: 9; grid-column: 1;}
#editorial-03 {background-image:url(img/chapter/chapter_editorial-03.jpg?v=2); grid-row: 9; grid-column: 2;}
#german-centre {background-image:url(img/chapter/chapter_german-centre.gif?v=2); grid-row: 10; grid-column: 1;}
#truckcharge {background-image:url(img/chapter/chapter_truckcharge.jpg?v=2); grid-row: 10; grid-column: 2;}

/*------------ Chapter Title ------------*/
h1 {font-size: 9.5em; line-height: 1; margin-top: 50vh; margin-left: 5vw;}
h1:after {bottom: 0.5em; height: 0.04em; width: 0%; left: 0%;}
h1:hover:after {width: 30%; left: 0%;}

/*------------ Projects: Navigation  ------------*/
.next {bottom: 4%; right: 3%; width: 1.5vw; height: 1.5vw;}
.prev {bottom: 4%; left: 3%; width: 1.5vw; height: 1.5vw;}

h2 {bottom: 0.5%; width: 100%; letter-spacing: 0.05em; font-size: 0.8em;}

/*------------ Projects: Information ------------*/

.project_information {margin-top: 5vh; margin-bottom: 8vh; grid-gap: 5vw; grid-template-rows: auto;}

h4 {font-size: 1.4em; grid-column: 2 / 9; grid-row: auto; margin: 0;}

.project_information p {grid-column: 2 / 9; grid-row: auto;}

/****************** About ******************/
.about_portrait {background-image: url(img/about/about_portrait.png);}
.about_cutout {background-image: url(img/about/transparent_portrait.png);}

.about_title {height: 100vh; width: 100vw;}

.about_intro {padding-top: 20vh; padding-bottom: 15vh; padding-left: 15vw; padding-right: 15vw;}

/*------------ Content: Charts  ------------*/
h7 {font-size: 14em; line-height: 0.9em; padding-top: 38vh;}

h3 {font-size: 1.8em;}
p {font-size: 0.75em; line-height: 1.4em;}

.about_skills {width: 100%; margin-left: auto; margin-right: auto;}
.about_skills_item {width: 80%; margin-left: auto; margin-right: auto; margin-bottom: 30vh;}

/*------------ Skills: Infographic  ------------*/
.skill-item {max-width: 120px; width: 100%; padding-bottom: 20%;}

.skill-item                {grid-row: 1; grid-column: 1;}
.skill-item:nth-of-type(2) {grid-row: 1; grid-column: 2;}
.skill-item:nth-of-type(3) {grid-row: 2; grid-column: 1;}
.skill-item:nth-of-type(4) {grid-row: 2; grid-column: 2;}
.skill-item:nth-of-type(5) {grid-row: 3; grid-column: 1;}
.skill-item:nth-of-type(6) {grid-row: 3; grid-column: 2;}
.skill-item:nth-of-type(7) {grid-row: 4; grid-column: 1;}
.skill-item:nth-of-type(8) {grid-row: 4; grid-column: 2;}

/*------------ CV: Table  ------------*/

.column_1 {padding-right: 10%; padding-bottom: 5%; font-size: 1em; line-height: 1.1; grid-column: 2/9; text-align: left;}
.column_2 {padding-left: 0%; padding-bottom: 5%; font-size: 1.4em; line-height: 1; grid-column: 2/7;}
.column_3 {padding-left: 2%; padding-right: 6%; padding-bottom: 5%; font-size: 0.75em; grid-column: 7/10;}

.about_grid {margin-top: 3vw; margin-bottom: 3vw; grid-gap: 2vw;}

/***************** Clients: Projects *****************/

.grid {margin-top: 5vw; margin-bottom: 5vw; grid-gap: 2vw;}
} 


@media only screen and (min-width: 720px) and (orientation:landscape) {
.logo {width: 6vw; height: 11vh;}
.logo:hover {width: 6.5vw; height: 11vh;}

/**************** Navigation ****************/
.contact {margin-top: 2%; right: 2%; width: 10.5vw; height: 3.4vw;}
.mail {margin-right: 0.5vw; width: 2.6vw; height: 2.6vw;}

.linkedin {width: 2.6vw; height: 2.6vw; margin-right: 0.1vw;}
.linkedin-w {width: 2.6vw; height: 2.6vw; margin-right: 0.1vw;}

.behance {width: 3.2vw; height: 2.6vw;}
.behance-w {width: 3.7vw; height: 3vw;}

#about {bottom: 4%; right: 3%;}
#about a {font-size: 1em;}

.chapters {padding-top: 6vh;}

/****************** Start ******************/
.chapter {max-width: 20vw; height: 40vh; width: 100%; padding-bottom: 20%;background-size: 90%; background-repeat: no-repeat; background-position: center;}
.chapter:hover {background-size: 95%; transition: all ease-in-out 0.2s;}
    
#wagner {background-image:url(img/chapter/chapter_wagner.gif?v=2); grid-row: 1; grid-column: 1;}
#podcast {background-image:url(img/chapter/chapter_podcast.jpg?v=2); grid-row: 1; grid-column: 2;}
#moehrenstrasse {background-image:url(img/chapter/chapter_gitti.jpg?v=2); grid-row: 1; grid-column: 3;}
#young-monks {background-image:url(img/chapter/chapter_young-monks.jpg?v=2); grid-row: 1; grid-column: 4;}
#earth {background-image:url(img/chapter/chapter_diversity-earth.jpg?v=2); grid-row: 1; grid-column: 5;}
#css {background-image:url(img/chapter/chapter_css.jpg?v=2); grid-row: 2; grid-column: 1;}
#gitti {background-image:url(img/chapter/chapter_client.jpg?v=2); grid-row: 2; grid-column: 2;}
#mini {background-image:url(img/chapter/chapter_mini.jpg?v=2); grid-row: 2; grid-column: 3;}
#tsukka {background-image:url(img/chapter/chapter_tsukka.gif?v=2); grid-row: 2; grid-column: 4;}
#editorial {background-image:url(img/chapter/chapter_editorial-01.jpg?v=2); grid-row: 2; grid-column: 5;}
#bao {background-image:url(img/chapter/chapter_bao.jpg?v=2); grid-row: 3; grid-column: 1;}
#love {background-image:url(img/chapter/chapter_diversity-love.jpg?v=2); grid-row: 3; grid-column: 2;}
#travelling {background-image:url(img/chapter/chapter_travelers-eye.jpg?v=2); grid-row: 3; grid-column: 3;}
#flying-teapot {background-image:url(img/chapter/chapter_flying-teapot.gif?v=2); grid-row: 3; grid-column: 4;}
#editorial-02 {background-image:url(img/chapter/chapter_editorial-02.jpg?v=2); grid-row: 3; grid-column: 5;}
#flying-teapot-02 {background-image:url(img/chapter/chapter_flying-teapot-02.gif?v=2); grid-row: 4; grid-column: 1;}
#bao-02 {background-image:url(img/chapter/chapter_bao-02.jpg?v=2); grid-row: 4; grid-column: 2;}
#editorial-03 {background-image:url(img/chapter/chapter_editorial-03.jpg?v=2); grid-row: 4; grid-column: 3;}
#german-centre {background-image:url(img/chapter/chapter_german-centre.gif?v=2); grid-row: 4; grid-column: 4;}
#truckcharge {background-image:url(img/chapter/chapter_truckcharge.jpg?v=2); grid-row: 4; grid-column: 5;}

/*------------ Chapter Title ------------*/
h1 {font-size: 9.5em; line-height: 1; margin-top: 50vh; margin-left: 5vw;}
h1:after {bottom: 0.5em; height: 0.04em; width: 0%; left: 0%;}
h1:hover:after {width: 30%; left: 0%;}

/*------------ Projects: Navigation  ------------*/
.next {bottom: 4%; right: 3%; width: 1.5vw; height: 1.5vw;}
.prev {bottom: 4%; left: 3%; width: 1.5vw; height: 1.5vw;}

h2 {bottom: 0.5%; width: 100%; letter-spacing: 0.05em; font-size: 0.8em;}

/*------------ Projects: Information ------------*/

.project_information {margin-top: 10vh; margin-bottom: 20vh; grid-gap: 5vw; grid-template-rows: auto;}

h4 {font-size: 1.8em; grid-column: 2 / 5; grid-row: auto; margin: 0;}

.project_information p {grid-column: 5 / 9; grid-row: auto;}

/****************** About ******************/
.about_portrait {background-image: url(img/about/about_landscape.png);}
.about_cutout {background-image: url(img/about/transparent_landscape.png);}

.about_title {height: 100vh; width: 100vw;}

.about_intro {padding-top: 35vh; padding-bottom: 15vh; padding-left: 20vw; padding-right: 20vw;}

/*------------ Content: Charts  ------------*/
h7 {font-size: 14em; line-height: 0.9em; padding-top: 38vh;}

h3 {font-size: 1.8em;}
p {font-size: 0.8em; line-height: 1.4em;}

.about_skills {width: 100%; margin-left: auto; margin-right: auto;}
.about_skills_item {width: 80%; margin-left: auto; margin-right: auto; margin-bottom: 30vh;}

/*------------ Skills: Infographic  ------------*/
.skill-item {max-width: 120px; width: 100%; padding-bottom: 20%;}

.skill-item                {grid-row: 1; grid-column: 1;}
.skill-item:nth-of-type(2) {grid-row: 1; grid-column: 2;}
.skill-item:nth-of-type(3) {grid-row: 1; grid-column: 3;}
.skill-item:nth-of-type(4) {grid-row: 1; grid-column: 4;}
.skill-item:nth-of-type(5) {grid-row: 2; grid-column: 1;}
.skill-item:nth-of-type(6) {grid-row: 2; grid-column: 2;}
.skill-item:nth-of-type(7) {grid-row: 2; grid-column: 3;}
.skill-item:nth-of-type(8) {grid-row: 2; grid-column: 4;}

/*------------ CV: Table  ------------*/

.column_1 {padding-right: 10%; padding-bottom: 5%; font-size: 1.2em; line-height: 1.1; grid-column: 1/3;}
.column_2 {padding-left: 2%; padding-bottom: 5%; font-size: 2.2em; line-height: 1; grid-column: 3/7;}
.column_3 {padding-left: 2%; padding-right: 10%; padding-bottom: 5%; font-size: 0.8em; grid-column: 7/10;}

.about_grid {margin-top: 1vw; margin-bottom: 3vw; grid-gap: 2vw;}

/***************** Clients: Projects *****************/

.grid {margin-top: 10vw; margin-bottom: 10vw; grid-gap: 2vw;}
} 


@media only screen and (min-width: 720px) and (orientation:portrait) {
.logo {width: 5.5vw; height: 22vh;}
.logo:hover {width: 6vw; height: 23vh;}

/**************** Navigation ****************/
.contact {margin-top: 3%; right: 2%; width: 15vw; height: 3.5vw;}
.mail {margin-right: 1vw; width: 3.5vw; height: 3.4vw;}

.linkedin {width: 3.5vw; height: 3.5vw; margin-right: 0.5vw;}
.linkedin-w {width: 3.5vw; height: 3.5vw; margin-right: 0.5vw;}

.behance {width: 4.5vw; height: 3.4vw;}
.behance-w {width: 4.5vw; height: 3.4vw;}

#about {bottom: 3%; right: 4%;}
#about a {font-size: 1.4em;}
    
.chapters {padding-top: 4vh;}

/****************** Start ******************/
.chapter {max-width: 30vw; height: 20vh; width: 100%; padding-bottom: 20%;background-size: 90%; background-repeat: no-repeat; background-position: center;}
.chapter:hover {background-size: 95%; transition: all ease-in-out 0.2s;}
    
#wagner {background-image:url(img/chapter/chapter_wagner.gif?v=2); grid-row: 1; grid-column: 1;}
#podcast {background-image:url(img/chapter/chapter_podcast.jpg?v=2); grid-row: 1; grid-column: 2;}
#moehrenstrasse {background-image:url(img/chapter/chapter_gitti.jpg?v=2); grid-row: 1; grid-column: 3;}
#young-monks {background-image:url(img/chapter/chapter_young-monks.jpg?v=2); grid-row: 2; grid-column: 1;}
#earth {background-image:url(img/chapter/chapter_diversity-earth.jpg?v=2); grid-row: 2; grid-column: 2;}
#css {background-image:url(img/chapter/chapter_css.jpg?v=2); grid-row: 2; grid-column: 3;}
#gitti {background-image:url(img/chapter/chapter_client.jpg?v=2); grid-row: 3; grid-column: 1;}
#mini {background-image:url(img/chapter/chapter_mini.jpg?v=2); grid-row: 3; grid-column: 2;}
#tsukka {background-image:url(img/chapter/chapter_tsukka.gif?v=2); grid-row: 3; grid-column: 3;}
#editorial {background-image:url(img/chapter/chapter_editorial-01.jpg?v=2); grid-row: 4; grid-column: 1;}
#bao {background-image:url(img/chapter/chapter_bao.jpg?v=2); grid-row: 4; grid-column: 2;}
#love {background-image:url(img/chapter/chapter_diversity-love.jpg?v=2); grid-row: 4; grid-column: 3;}
#travelling {background-image:url(img/chapter/chapter_travelers-eye.jpg?v=2); grid-row: 5; grid-column: 1;}
#flying-teapot {background-image:url(img/chapter/chapter_flying-teapot.gif?v=2); grid-row: 5; grid-column: 2;}
#editorial-02 {background-image:url(img/chapter/chapter_editorial-02.jpg?v=2); grid-row: 5; grid-column: 3;}
#flying-teapot-02 {background-image:url(img/chapter/chapter_flying-teapot-02.gif?v=2); grid-row: 6; grid-column: 1;}
#bao-02 {background-image:url(img/chapter/chapter_bao-02.jpg?v=2); grid-row: 6; grid-column: 2;}
#editorial-03 {background-image:url(img/chapter/chapter_editorial-03.jpg?v=2); grid-row: 6; grid-column: 3;}
#german-centre {background-image:url(img/chapter/chapter_german-centre.gif?v=2); grid-row: 7; grid-column: 1;}
#truckcharge {background-image:url(img/chapter/chapter_truckcharge.jpg?v=2); grid-row: 7; grid-column: 2;}

/*------------ Chapter Title ------------*/
h1 {font-size: 9.5em; line-height: 1; margin-top: 50vh; margin-left: 5vw;}
h1:after {bottom: 0.5em; height: 0.04em; width: 0%; left: 0%;}
h1:hover:after {width: 30%; left: 0%;}

/*------------ Projects: Navigation  ------------*/
.next {bottom: 2.5%; right: 4%; width: 2vw; height: 2vw;}
.prev {bottom: 2.5%; left: 4%; width: 2vw; height: 2vw;}

h2 {bottom: 1%; width: 100%; letter-spacing: 0.05em; font-size: 1.2em;}

/*------------ Projects: Information ------------*/

.project_information {margin-top: 5vh; margin-bottom: 8vh; grid-gap: 5vw; grid-template-rows: auto;}

h4 {font-size: 2.6em; grid-column: 2 / 9; grid-row: auto; margin: 0;}

.project_information p {grid-column: 2 / 9; grid-row: auto;}

/****************** About ******************/
.about_portrait {background-image: url(img/about/about_tablet_portrait.png);}
.about_cutout {background-image: url(img/about/transparent_tablet_portrait.png);}

.about_title {height: 100vh; width: 100vw;}

.about_intro {padding-top: 25vh; padding-bottom: 15vh; padding-left: 20vw; padding-right: 20vw;}

/*------------ Content: Charts  ------------*/
h7 {font-size: 14em; line-height: 0.9em; padding-top: 38vh;}

h3 {font-size: 2.4em;}
p {font-size: 1em; line-height: 1.4em;}

.about_skills {width: 100%; margin-left: auto; margin-right: auto;}
.about_skills_item {width: 80%; margin-left: skillauto; margin-right: auto; margin-bottom: 30vh;}

/*------------ Skills: Infographic  ------------*/
.skill-item {max-width: 180px; width: 100%; padding-bottom: 20%;}

.skill-item                {grid-row: 1; grid-column: 1;}
.skill-item:nth-of-type(2) {grid-row: 1; grid-column: 2;}
.skill-item:nth-of-type(3) {grid-row: 1; grid-column: 3;}
.skill-item:nth-of-type(4) {grid-row: 2; grid-column: 1;}
.skill-item:nth-of-type(5) {grid-row: 2; grid-column: 2;}
.skill-item:nth-of-type(6) {grid-row: 2; grid-column: 3;}
.skill-item:nth-of-type(7) {grid-row: 3; grid-column: 1;}
.skill-item:nth-of-type(8) {grid-row: 3; grid-column: 2;}

/*------------ CV: Table  ------------*/
.column_1 {padding-left: 10%; padding-right: 10%; padding-bottom: 5%; font-size: 1.5em; line-height: 1.1; grid-column: 1/3;}
.column_2 {padding-left: 2%; padding-bottom: 5%; font-size: 2.4em; line-height: 1; grid-column: 3/7;}
.column_3 {padding-left: 2%; padding-right: 5%; padding-bottom: 5%; font-size: 1em; grid-column: 7/10;}

.about_grid {margin-top: 3vw; margin-bottom: 2vw; grid-gap: 4vw;}

/***************** Clients: Projects *****************/

.grid {margin-top: 5vw; margin-bottom: 5vw; grid-gap: 2vw;}
} 


@media only screen and (min-width: 1024px) and (orientation:landscape) {
.logo {width: 4vw; height: 10vh;}
.logo:hover {width: 4.4vw; height: 10vh;}

/**************** Navigation ****************/
.contact {margin-top: 2%; right: 3%; width: 10vw; height: 1.6vw;}
.mail {margin-right: 1vw; width: 2.2vw; height: 2.2vw;}

.linkedin {width: 2.2vw; height: 2.2vw; margin-right: 0.5vw;}
.linkedin-w {width: 2.2vw; height: 2.2vw; margin-right: 0.5vw;}

.behance {width: 2.8vw; height: 2.2vw;}
.behance-w {width: 2.8vw; height: 2.2vw;}

#about {bottom: 4%; right: 3%;}
#about a {font-size: 1.3em;}

/****************** Start ******************/
.chapter {max-width: 20vw; height: 30vh; width: 100%; padding-bottom: 20%;background-size: 100%; background-repeat: no-repeat; background-position: center;}
.chapter:hover {background-size: 105%; transition: all ease-in-out 0.2s;}
    
#wagner {background-image:url(img/chapter/chapter_wagner.gif?v=2); grid-row: 1; grid-column: 1;}
#podcast {background-image:url(img/chapter/chapter_podcast.jpg?v=2); grid-row: 1; grid-column: 2;}
#moehrenstrasse {background-image:url(img/chapter/chapter_gitti.jpg?v=2); grid-row: 1; grid-column: 3;}
#young-monks {background-image:url(img/chapter/chapter_young-monks.jpg?v=2); grid-row: 1; grid-column: 4;}
#earth {background-image:url(img/chapter/chapter_diversity-earth.jpg?v=2); grid-row: 1; grid-column: 5;}
#css {background-image:url(img/chapter/chapter_css.jpg?v=2); grid-row: 2; grid-column: 1;}
#gitti {background-image:url(img/chapter/chapter_client.jpg?v=2); grid-row: 2; grid-column: 2;}
#mini {background-image:url(img/chapter/chapter_mini.jpg?v=2); grid-row: 2; grid-column: 3;}
#tsukka {background-image:url(img/chapter/chapter_tsukka.gif?v=2); grid-row: 2; grid-column: 4;}
#editorial {background-image:url(img/chapter/chapter_editorial-01.jpg?v=2); grid-row: 2; grid-column: 5;}
#bao {background-image:url(img/chapter/chapter_bao.jpg?v=2); grid-row: 3; grid-column: 1;}
#love {background-image:url(img/chapter/chapter_diversity-love.jpg?v=2); grid-row: 3; grid-column: 2;}
#travelling {background-image:url(img/chapter/chapter_travelers-eye.jpg?v=2); grid-row: 3; grid-column: 3;}
#flying-teapot {background-image:url(img/chapter/chapter_flying-teapot.gif?v=2); grid-row: 3; grid-column: 4;}
#editorial-02 {background-image:url(img/chapter/chapter_editorial-02.jpg?v=2); grid-row: 3; grid-column: 5;}
#flying-teapot-02 {background-image:url(img/chapter/chapter_flying-teapot-02.gif?v=2); grid-row: 4; grid-column: 1;}
#bao-02 {background-image:url(img/chapter/chapter_bao-02.jpg?v=2); grid-row: 4; grid-column: 2;}
#editorial-03 {background-image:url(img/chapter/chapter_editorial-03.jpg?v=2); grid-row: 4; grid-column: 3;}
#german-centre {background-image:url(img/chapter/chapter_german-centre.gif?v=2); grid-row: 4; grid-column: 4;}
#truckcharge {background-image:url(img/chapter/chapter_truckcharge.jpg?v=2); grid-row: 4; grid-column: 5;}
    
/*------------ Chapter Title ------------*/
h1 {font-size: 9.5em; line-height: 1; margin-top: 50vh; margin-left: 5vw;}
h1:after {bottom: 0.5em; height: 0.04em; width: 0%; left: 0%;}
h1:hover:after {width: 30%; left: 0%;}

/*------------ Projects: Navigation  ------------*/
.next {bottom: 2.5%; right: 3%; width: 1vw; height: 1vw;}
.prev {bottom: 2.5%; left: 3%; width: 1vw; height: 1vw;}

h2 {bottom: 0.5%; width: 100%; letter-spacing: 0.05em; font-size: 1.3em;}

/*------------ Projects: Information ------------*/

.project_information {margin-top: 10vh; margin-bottom: 20vh; grid-gap: 5vw; grid-template-rows: auto;}

h4 {font-size: 2.8em; grid-column: 2 / 5; grid-row: auto; margin: 0;}

.project_information p {grid-column: 5 / 9; grid-row: auto;}

/****************** About ******************/
.about_portrait {background-image: url(img/about/about_tablet_landscape.png);}
.about_cutout {background-image: url(img/about/transparent_tablet_landscape.png);}

.about_title {height: 100vh; width: 100vw;}

.about_intro {padding-top: 40vh; padding-bottom: 25vh; padding-left: 20vw; padding-right: 20vw;}

/*------------ Content: Charts  ------------*/
h7 {font-size: 14em; line-height: 0.9em; padding-top: 38vh;}

h3 {font-size: 2.4em;}
p {font-size: 1.1em; line-height: 1.4em;}

.about_skills {width: 100%; margin-left: auto; margin-right: auto;}
.about_skills_item {width: 80%; margin-left: skillauto; margin-right: auto; margin-bottom: 30vh;}

/*------------ Skills: Infographic  ------------*/
.skill-item {max-width: 200px; width: 100%; padding-bottom: 20%;}

.skill-item                {grid-row: 1; grid-column: 1;}
.skill-item:nth-of-type(2) {grid-row: 1; grid-column: 2;}
.skill-item:nth-of-type(3) {grid-row: 1; grid-column: 3;}
.skill-item:nth-of-type(4) {grid-row: 1; grid-column: 4;}
.skill-item:nth-of-type(5) {grid-row: 2; grid-column: 1;}
.skill-item:nth-of-type(6) {grid-row: 2; grid-column: 2;}
.skill-item:nth-of-type(7) {grid-row: 2; grid-column: 3;}
.skill-item:nth-of-type(8) {grid-row: 2; grid-column: 4;}

/*------------ CV: Table  ------------*/

.column_1 {padding-left: 15%; padding-right: 5%; padding-bottom: 5%; font-size: 1.8em; line-height: 1.1; grid-column: 1/3; text-align: right;}
.column_2 {padding-left: 2%; padding-bottom: 5%; font-size: 3em; line-height: 1; grid-column: 3/7;}
.column_3 {padding-left: 2%; padding-right: 5%; padding-bottom: 5%; font-size: 1em; grid-column: 7/10;}

.about_grid {margin-top: 1vw; margin-bottom: 2vw; grid-gap: 4vw;}

/***************** Clients: Projects *****************/

.grid {margin-top: 5vw; margin-bottom: 5vw; grid-gap: 2vw;}
} 


@media only screen and (min-width: 1260px) {
.logo {width: 3vw; height: 10vh;}
.logo:hover {width: 3.3vw; height: 10vh;}

/**************** Navigation ****************/
.contact {margin-top: 2%; right: 2%; width: 7vw; height: 1.6vw;}
.mail {margin-right: 0.5vw; width: 1.8vw; height: 1.8vw;}

.linkedin {width: 1.4vw; height: 1.4vw; margin-right: 0.5vw;}
.linkedin-w {width: 1.4vw; height: 1.4vw; margin-right: 0.5vw;}

.behance {width: 1.8vw; height: 1.4vw;}
.behance-w {width: 1.8vw; height: 1.4vw;}

#about {bottom: 4%; right: 3%;}
#about a {font-size: 1.3em;}

/****************** Start ******************/
.chapter {max-width: 20vw; height: 40vh; width: 100%; padding-bottom: 20%;background-size: 100%; background-repeat: no-repeat; background-position: center;}
.chapter:hover {background-size: 105%; transition: all ease-in-out 0.2s;}
    
#wagner {background-image:url(img/chapter/chapter_wagner.gif?v=2); grid-row: 1; grid-column: 1;}
#podcast {background-image:url(img/chapter/chapter_podcast.jpg?v=2); grid-row: 1; grid-column: 2;}
#moehrenstrasse {background-image:url(img/chapter/chapter_gitti.jpg?v=2); grid-row: 1; grid-column: 3;}
#young-monks {background-image:url(img/chapter/chapter_young-monks.jpg?v=2); grid-row: 1; grid-column: 4;}
#earth {background-image:url(img/chapter/chapter_diversity-earth.jpg?v=2); grid-row: 1; grid-column: 5;}
#css {background-image:url(img/chapter/chapter_css.jpg?v=2); grid-row: 2; grid-column: 1;}
#gitti {background-image:url(img/chapter/chapter_client.jpg?v=2); grid-row: 2; grid-column: 2;}
#mini {background-image:url(img/chapter/chapter_mini.jpg?v=2); grid-row: 2; grid-column: 3;}
#tsukka {background-image:url(img/chapter/chapter_tsukka.gif?v=2); grid-row: 2; grid-column: 4;}
#editorial {background-image:url(img/chapter/chapter_editorial-01.jpg?v=2); grid-row: 2; grid-column: 5;}
#bao {background-image:url(img/chapter/chapter_bao.jpg?v=2); grid-row: 3; grid-column: 1;}
#love {background-image:url(img/chapter/chapter_diversity-love.jpg?v=2); grid-row: 3; grid-column: 2;}
#travelling {background-image:url(img/chapter/chapter_travelers-eye.jpg?v=2); grid-row: 3; grid-column: 3;}
#flying-teapot {background-image:url(img/chapter/chapter_flying-teapot.gif?v=2); grid-row: 3; grid-column: 4;}
#editorial-02 {background-image:url(img/chapter/chapter_editorial-02.jpg?v=2); grid-row: 3; grid-column: 5;}
#flying-teapot-02 {background-image:url(img/chapter/chapter_flying-teapot-02.gif?v=2); grid-row: 4; grid-column: 1;}
#bao-02 {background-image:url(img/chapter/chapter_bao-02.jpg?v=2); grid-row: 4; grid-column: 2;}
#editorial-03 {background-image:url(img/chapter/chapter_editorial-03.jpg?v=2); grid-row: 4; grid-column: 3;}
#german-centre {background-image:url(img/chapter/chapter_german-centre.gif?v=2); grid-row: 4; grid-column: 4;}
#truckcharge {background-image:url(img/chapter/chapter_truckcharge.jpg?v=2); grid-row: 4; grid-column: 5;}
    
/*------------ Chapter Title ------------*/
h1 {font-size: 9.5em; line-height: 1; margin-top: 50vh; margin-left: 5vw;}
h1:after {bottom: 0.5em; height: 0.04em; width: 0%; left: 0%;}
h1:hover:after {width: 30%; left: 0%;}

/*------------ Projects: Navigation  ------------*/
.next {bottom: 2.5%; right: 3%; width: 1vw; height: 1vw;}
.prev {bottom: 2.5%; left: 3%; width: 1vw; height: 1vw;}

h2 {bottom: 0.5%; width: 100%; letter-spacing: 0.05em; font-size: 1.3em;}

/*------------ Projects: Information ------------*/

.project_information {margin-top: 10vh; margin-bottom: 20vh; grid-gap: 5vw; grid-template-rows: auto;}

h4 {font-size: 4em; grid-column: 2 / 5; grid-row: auto; margin: 0;}

.project_information p {grid-column: 5 / 9; grid-row: auto;}

/****************** About ******************/
.about_portrait {background-image: url(img/about/about_landscape.png);}
.about_cutout {background-image: url(img/about/transparent_landscape.png);}

.about_title {height: 100vh; width: 100vw;}

.about_intro {padding-top: 40vh; padding-bottom: 25vh; padding-left: 30vw; padding-right: 30vw;}

/*------------ Content: Charts  ------------*/
h7 {font-size: 14em; line-height: 0.9em; padding-top: 38vh;}

h3 {font-size: 2.6em;}
p {font-size: 1.1em; line-height: 1.2em;}

.about_skills {width: 100%; margin-left: auto; margin-right: auto;}
.about_skills_item {width: 80%; margin-left: skillauto; margin-right: auto; margin-bottom: 30vh;}

/*------------ Skills: Infographic  ------------*/
.skill-item {max-width: 220px; width: 100%; padding-bottom: 20%;}

.skill-item                {grid-row: 1; grid-column: 1;}
.skill-item:nth-of-type(2) {grid-row: 1; grid-column: 2;}
.skill-item:nth-of-type(3) {grid-row: 1; grid-column: 3;}
.skill-item:nth-of-type(4) {grid-row: 1; grid-column: 4;}
.skill-item:nth-of-type(5) {grid-row: 2; grid-column: 1;}
.skill-item:nth-of-type(6) {grid-row: 2; grid-column: 2;}
.skill-item:nth-of-type(7) {grid-row: 2; grid-column: 3;}
.skill-item:nth-of-type(8) {grid-row: 2; grid-column: 4;}

/*------------ CV: Table  ------------*/

.column_1 {padding-left: 15%; padding-right: 10%; padding-bottom: 5%; font-size: 2.4em; line-height: 1.1; grid-column: 1/3;}
.column_2 {padding-left: 2%; padding-bottom: 5%; font-size: 4em; line-height: 1; grid-column: 3/7;}
.column_3 {padding-left: 2%; padding-right: 15%; padding-bottom: 5%; font-size: 1.1em; grid-column: 7/10;}

.about_grid {margin-top: 1vw; margin-bottom: 1vw; grid-gap: 2vw;}

/***************** Clients: Projects *****************/

.grid {margin-top: 5vw; margin-bottom: 5vw; grid-gap: 2vw;}
}