@font-face {
    font-family: 'SuisseIntlRegular';
    src: url('../fonts/SuisseIntl_Regular/SuisseIntl-Regular-WebXL.eot?') format('eot'), 
         url('../fonts/SuisseIntl_Regular/SuisseIntl-Regular-WebXL.woff') format('woff'), 
         url('../fonts/SuisseIntl_Regular/SuisseIntl-Regular-WebXL.svg') format('svg'),
         url('../fonts/SuisseIntl_Regular/SuisseIntl-Regular-WebXL.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'SuisseIntlRegularItalic';
    src: url('../fonts/SuisseIntl_RegularItalic/SuisseIntl-RegularItalic-WebM.eot?') format('eot'), 
         url('../fonts/SuisseIntl_RegularItalic/SuisseIntl-RegularItalic-WebM.woff') format('woff'), 
         url('../fonts/SuisseIntl_RegularItalic/SuisseIntl-RegularItalic-WebM.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'SuisseIntlMedium';
    src: url('../fonts/SuisseIntl_Medium/SuisseIntl-Medium-WebM.eot?') format('eot'), 
         url('../fonts/SuisseIntl_Medium/SuisseIntl-Medium-WebM.woff') format('woff'), 
         url('../fonts/SuisseIntl_Medium/SuisseIntl-Medium-WebM.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'SuisseIntlMediumItalic';
    src: url('../fonts/SuisseIntl_MediumItalic/SuisseIntl-MediumItalic-WebM.eot?') format('eot'), 
         url('../fonts/SuisseIntl_MediumItalic/SuisseIntl-MediumItalic-WebM.woff') format('woff'), 
         url('../fonts/SuisseIntl_MediumItalic/SuisseIntl-MediumrItalic-WebM.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
@font-face {
    font-family: 'SuisseIntlSemibold';
    src: url('../fonts/SuisseIntl_SemiBold/SuisseIntl-SemiBold-WebM.eot?') format('eot'), 
         url('../fonts/SuisseIntl_SemiBold/SuisseIntl-SemiBold-WebM.woff') format('woff'), 
         url('../fonts/SuisseIntl_SemiBold/SuisseIntl-SemiBold-WebM.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'SuisseIntlMono';
    src: url('../fonts/SuisseIntlMono_Regular/SuisseIntlMono-Regular-WebS.eot?') format('eot'), 
         url('../fonts/SuisseIntlMono_Regular/SuisseIntlMono-Regular-WebS.woff') format('woff'), 
         url('../fonts/SuisseIntlMono_Regular/SuisseIntlMono-Regular-WebS.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

html, body, button {
    font-family: 'SuisseIntlRegular';
}

html, body {
    font-size: 20px;
    font-weight: 400;
    line-height: 32px; 
    letter-spacing: 0.03em; 
    color: rgb(45,45,45);
}

a { text-decoration: inherit; color: inherit;}

mark { background-color: var(--accent); color: white; }


@media only screen and (max-width : 768px){
    html, body { font-size: 18px; line-height: 28px; letter-spacing: 0.01em; }
}

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

}

@media only screen and (min-width : 1024px) and (max-width : 1280px){

}

@media only screen and (min-width : 1280px) and (max-width : 1440px){

}

@media only screen and (min-width : 1440px) and (max-width : 1680px){

}

@media only screen and (min-width : 1680px) and (max-width : 1920px){
    html, body { font-size: 23px; line-height: 40px; }
}
@media only screen and (min-width : 1920px) {
    html, body { font-size: 23px; line-height: 40px; }
}



.accent { 
    font-family: 'SuisseIntlMedium'; 
    color: var(--accent); 
}
.reg-italic { font-family: 'SuisseIntlRegularItalic'; }
.med-italic { font-family: 'SuisseIntlMediumItalic'; }

.semibold { font-family: 'SuisseIntlSemibold', sans-serif; }
.serif { font-family: 'Suisse Works', serif; font-weight: 400;}



/* --------------- h1 Startscreen ------------- */
h1 { 
    font-size: 1.6rem; 
    font-weight: 300; 
    letter-spacing: 0.017em; 
    line-height: 1.4em;
    text-align: left;
    margin-bottom: 2rem;
}


h1 a { 
    position: relative; 
    color: inherit; 
    text-decoration: none; 
    font-style: inherit;
    opacity: 0.9;
}

h1 a:visited { }

h1 a:hover { 
    opacity: 0.9;
 }

 /*----------Media Querys h1--------------*/
@media (max-width: 600px){
    h1 {
        font-size: 1.4rem; 
        text-align: left;
    }
}


/* ---------- h2 Project Headline ---------- */
h2 {
    font-size: 1.4rem;
    letter-spacing: 0.03rem; 
    line-height: 1.55em;
    text-align: left;
}

@media (max-width: 400px){
    h2 {
        font-size: 1.4rem; 
    }
}





/*----------h3--------------*/
h3 {
    font-family: 'SuisseIntlSemibold';
    letter-spacing: -0.004em;
    margin: 1rem 0 1rem 0;
}

h3 a {
    text-decoration: underline;
}




/*----------h4 Project Thumbnail--------------*/
h4 { 
    font-size: 1.1rem; 
    margin-top: 3rem; 
    margin-left: 0.1rem; 
}

h4 a { position: relative; color: inherit; text-decoration: underline;}

h4 a:visited { color: inherit;}

h4 a:hover { opacity: 0.6; }


.h4_name { color: var(--accent); }

.h4_year { float: right; color: darkgray; margin-right: 0.3rem;}




/* -------------- h5 minor headline--------------- */

h5 {
    font-size: 0.7rem;
    font-family: 'SuisseIntlMedium';
    text-transform: uppercase;
    line-height: 140%;
    letter-spacing: 0.1rem;
    color: var(--dark);
    margin-bottom: 5px;
}



/* -------------- h6 grau marginal--------------- */
h6 {
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0.02rem;
    color: #262c30;
}