/*TYPEFACE */

@font-face {
    font-family: 'cmrddregular';
    src: url('../fonts/cmrdd-regular-webfont.woff2') format('woff2'),
         url('../fonts/cmrdd-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* RESET */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
ol, ul {
	list-style: none;
}

*,
*:after,
*:before {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* GLOBAL STYLES */

html {
font-family: 'Arial Bold', sans-serif;
font-weight: 700;
font-size: 0.75em;
letter-spacing: 0.08em;
line-height: 1.3em;
background-color: rgb(245,245,245);
}
body {
margin-left: 2vw;
margin-right: 2vw;
}
img {
width: 100%;
}
#mobileMenuContainer {
display: none;
}

/* TYPOGRAPHY */

em {
font-style: italic;
}
strong {
font-family: 'Arial Black', 'Arial-BoldMT', sans-serif;
font-weight: bold;
letter-spacing: 0em;
}
a {
color: inherit;
}
.centred {
text-align: center;
}
.upper {
text-transform: uppercase;
}
.underline {
text-decoration: underline;
}

h1.siteTitle,
h1.itemTitle,
h2.homeHeader,
h2.mobileHeader,
h2.cvHeading,
h3.itemTitle {
font-family: 'cmrddregular', sans-serif;
font-weight: lighter;
font-size: 2rem;
letter-spacing: 0rem;
font-weight: 500;
line-height: 2.2rem;
}
h4.cvSubheading {
text-transform: uppercase;
text-decoration: underline;
}

h1.itemTitle a,
li a,
h3.itemTitle a,
h3 a, 
h2 a, 
h1 a {
text-decoration: none;
}

h3.itemTitle, h1.itemTitle {
margin-bottom: 1rem;
}
.itemText p, .itemPlus p, .itemExtra p, .cvExtra p  {
margin-bottom: 1.5rem;
}
figcaption {
margin-top: 0.2rem;
text-align: center;
}

/* IMAGES */

figure.homeImage {
clip-path: ellipse(50% 48% at 50% 50%);
margin-bottom: 0.5rem;
width: 100%;
}
li.itemGallery {
margin-bottom: 4rem;
}

figure.video {

}

iframe {
width: 100%;
border: 0;
}
.itemText img, figure.video {
margin-top: 2.5rem;
margin-bottom: 4rem;
}
figure {
width: 70%;
margin-left: auto;
margin-right: auto;
}



/* NAVIGATION */

#title {
    top: 1.75vw;
    position: fixed;
    z-index: 1;
    width: 40vw;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto; 
}
nav.desktopTitle {
    border-radius: 1rem;
    background: rgb(245,245,245);
    padding: 1.5rem;
}
#title a, #footer a {
text-decoration: none;
}
.desktopTitle:hover, #footer:hover {
-webkit-box-shadow: 0px 0px 30px -12px rgba(90,90,90,0.61);
-moz-box-shadow: 0px 0px 30px -12px rgba(90,90,90,0.61);
box-shadow: 0px 0px 30px -12px rgba(90,90,90,0.61);
}
#footer {
background: rgb(245,245,245);
bottom: 1.75rem;
padding: 1.5rem;
position: fixed;
z-index: 1;
left: 50%;
transform: translateX(-50%);
border-radius: 1rem;
text-align: center;
}

/* HOME */

#homeContainer {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;
height: 100vh;
}
.containerScroll {
overflow: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}
.containerScroll::-webkit-scrollbar {
display: none;
}
.pedagogyHeader, .projectHeader, .textHeader {
display: block;
}
article {
margin-top: 0;
padding-top: 0;
margin-bottom: 5rem;
}
.homeHeader {
margin-top: 15vh;
margin-bottom: 1rem;
}

/* INDIVIDUAL ITEM PAGES */

#itemContainer {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 2rem;
height: 100vh;
}
section#itemContent  {
padding-top: 1.75rem;
padding-bottom: 10rem;
}
section#itemGallery {
padding-top: 1.75rem;
padding-bottom: 10rem;
}
div.itemInfo {
margin-left: 1rem;
margin-right: 1rem;
margin-bottom: 5rem;
}
.itemExtra {
margin-left: 50%;
margin-bottom: 5rem;
}
.itemDocuments {
background: rgb(250,250,250);
bottom: 1.75rem;
padding: 1.5rem;
border-radius: 5px;
margin-bottom: 1.5rem;
}
.itemDocuments:hover {
-webkit-box-shadow: 0px 0px 30px -12px rgba(90,90,90,0.61);
-moz-box-shadow: 0px 0px 30px -12px rgba(90,90,90,0.61);
box-shadow: 0px 0px 30px -12px rgba(90,90,90,0.61);
}

/* INFORMATION */

#infoContainer {
margin-top: 1.75rem;
margin-left: 20%;
margin-right: 20%;
height: 100vh;
}
#cvContainer {
padding-top: 1.75rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 2rem;
}
#cvEducationContainer,
#cvExperienceContainer,
#cvProjectsContainer,
#cvPedagogyContainer,
#cvTextsContainer {
padding-bottom: 5rem;
margin-bottom: 10rem;
}
#creditContainer {
margin-left: 1rem;
margin-right: 1rem;
margin-bottom: 2.25rem;
}
h2.cvHeading {
margin-bottom: 3rem;
}
h4.cvSubheading {
margin-bottom: 1rem;
margin-top: 2.5rem;
}
div.cvDescription {
margin-bottom: 0.75rem;
}
div.cvDescription p {
margin-left: 1.5rem;
}
div.cvExtra {
margin-left: 5rem;
}
span.cvLink a { 
float: left;
text-decoration: none;
}
.cvDownload {
margin-left: 50%;
margin-top: 5rem;
}

/* ––––– MEDIA QUEERIES –––– */

@media only screen and (max-width: 1000px) {
/* NAVIGATION */
    #title {
    width: 40vw;
    }
}

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

/* GLOBAL STYLES */
    body {
    font-size: 1rem;
    letter-spacing: 0.08rem;
    line-height: 1.4rem;
    margin-left: 5vw;
    margin-right: 5vw;
    }
    #homeContainer {
display: none;
}

/* TYPOGRAPHY */  
    h1, h2 {
    font-size: 2rem;
    line-height: 2.5rem;
    }
    h1.whiteText, h2.whiteText {
    color: rgb(245,245,245);
    }
  
/* IMAGES */  
/* NAVIGATION */
    #title {
    top: 3vw;
    width: 90vw;
    }
    #footer {
    -webkit-box-shadow: 0px 0px 30px -12px rgba(90,90,90,0.61);
    -moz-box-shadow: 0px 0px 30px -12px rgba(90,90,90,0.61);
    box-shadow: 0px 0px 30px -12px rgba(90,90,90,0.61);
    }

/* HOME */
    #mobileMenuContainer{
    padding-top: 15vh;
    padding-bottom: 5vh;
    display: grid;
    grid-template-rows: repeat(3,1fr);
    height: 100vh;
    }
    .mobileTitle {
    background-color: white;
    }
    .mobileMenu {
    display: flex;          
    align-items: center;     
    justify-content: center;
    color: white;
    }
    .mobileMenuPPT {
    clip-path: ellipse(50% 50% at 50% 50%);
    width: 100%;
    height: 100%;
    background-color: black;
    }
    .marginFix-1 {
    margin-top: -5px;
    }
    .marginFix-2 {
    margin-top: -10px;
    }
    
/* PROJECTS, PEDAGOGY, TEXTS */
    h2.homeHeader {
    margin-top: 20vh;
    margin-bottom: 1rem;
    }
    #projectsContainer, #textsContainer, #pedagogyContainer {
    margin-bottom: 10rem;
    }
    
/* INDIVIDUAL ITEM PAGES */
    #itemContainer {
    display: flex;
    flex-wrap: wrap;
    height: auto;
    }  
    .containerScroll {
    overflow: visible;
    }
    section#itemContent {
    order: -1;
    padding-bottom: 5rem;
    }
    section#itemGallery {
    order: 1;
    }
    div.itemExtra {
    margin-left: 20%;
    }
    
    /* INFORMATION */
    #infoContainer {
    display: block;
    }
    #cvContainer {
    grid-gap: 1rem;
}
    .cvDownload {
    margin-left: 20%;
}
    #cvContainer {
    display: block;
}
    #cvEducationContainer,
    #cvExperienceContainer,
    #cvProjectsContainer,
    #cvPedagogyContainer,
    #cvTextsContainer,
    #creditContainer {
    padding-bottom: 5rem;
    margin-bottom: 5rem;
    }
    h2.cvHeading {
    margin-bottom: 1rem;
    }
    h4.cvSubheading {
    margin-top: 2rem;
    }
}

@media only screen and (max-width: 650px) {
    #title {
         top: 3vw;
        }
    #infoContainer {
    margin-left: 0rem;
    margin-right: 0rem;
    }
}