/* Basic Stuff
-------------------------------------------------- */
html {
	font-family: 'Advent Pro', sans-serif;
    font-family: 'Anek Telugu', sans-serif;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-family: 'Montserrat', sans-serif;
    font-family: 'Nunito Sans', sans-serif;
    font-family: 'Titillium Web', sans-serif; 
	color: #666; 
	font-size: 15px;
}
@media only screen and (min-width: 1481px) {
	html {font-size: 18px;}
}
@media only screen and (min-width: 1681px) {
	html {font-size: 26px;}
}
@media only screen and (min-width: 2881px) {
	html {font-size: 30px;}
}
	/* Sections
	-------------------------------------------------- */
	header, nav, section, footer {width: 100%; padding: 0 2em; }
	header {padding: 0;}
	section {min-height: 500px;}
	.margo {font-size: .8em; font-weight: normal; display: inline;}
	.majewska {font-size: 1em; font-weight: bold; display: inline;}

	/* Navigation
	-------------------------------------------------- */
	@media only screen and (min-width: 768px) {
	  nav ul {display: flex; flex-grow: 1; float: right;   flex-flow: row wrap; padding: 1rem 1rem 0 1rem;}
	}
	nav {font-family: 'Anek Telugu', sans-serif; font-size: 1rem; text-transform: uppercase;}
	nav h2 {font-size: 0px;}
	nav ul {margin: 0; list-style: none;}
	nav ul li {padding: 0rem 1rem 0rem 1rem ;}
	nav a li {}
	nav a:visited li {}
	nav a:hover li {text-decoration: underline; text-decoration-color: red; text-decoration-thickness: 3px;}
	nav a:active li {text-decoration: underline; text-decoration-color: red; text-decoration-thickness: 3px;}
	nav .current li, nav .current:visited li {text-decoration: underline; text-decoration-color: red; text-decoration-thickness: 3px;}
	nav .current:hover li {text-decoration: underline; text-decoration-color: red; text-decoration-thickness: 3px;}
	nav .current:active li {text-decoration: underline; text-decoration-color: red; text-decoration-thickness: 3px;}



* {text-decoration: none; box-sizing: border-box; margin:0; padding:0; font-weight: normal;}
body {}
h1, h2 , h3, h4, h5, h6 {clear: both; margin-left:;}

h1 {font-family: 'Anek Telugu', sans-serif; font-size:2rem; padding: 1rem; text-transform: uppercase; letter-spacing: .3rem;}
header h1 {font-size: 1.7rem; font-weight: 400;  font-family: 'Anek Telugu', sans-serif; letter-spacing: .1em; text-transform: uppercase; padding: 1rem;}
h1 a {padding-left: 0; padding-right: .8rem; }
h2 {font-size: 0;}
h3 {font-size: .9rem; text-transform: uppercase; letter-spacing: .3rem; margin: .8em 0 .1em 0;}
h4 {font-size:.8rem; }



/* Basic Typography
-------------------------------------------------- */

p, ul, ol {margin: 0; text-align: justify;}
p {margin-bottom: .5em;}
ul {list-style: none; margin-top: 0;}
	@media (min-width: 550px) {ul {list-style: none; margin-top: 2em;}}
ul ul {list-style: none; margin: 0 0 1em 0; } /* ----- list group including title ----- */
ul ul li {margin: .1em 0 0 1em;} /* ----- list items individually not including heading ----- */
	

/* Basic Links
-------------------------------------------------- */
a {color: #000000;}
a:visited {text-decoration: underline; text-decoration-color: #e5ccc9; text-decoration-thickness: 3px;}
a:hover {text-decoration: underline; text-decoration-color: #e5ccc9; text-decoration-thickness: 3px;}
a:active {text-decoration: underline; text-decoration-color: #e5ccc9; text-decoration-thickness: 3px;}


/* Images and Videos
-------------------------------------------------- */
img {max-width: 100%;}
figure {padding: 0;}
@media only screen and (min-width: 768px) {
	figure.video {padding: 0 25%;}
}
figcaption {font-size: .9em; margin-bottom: 2em;}
@media only screen and (min-width: 768px) {
    figcaption {font-size: .9em; margin-bottom: 3em;}
}

.homeimage {width: 100%;}


/* Class
-------------------------------------------------- */
.cut {margin: 0 0 2rem 0;}
.social {margin: .5rem 1rem;}
.about {margin: 0rem 1rem 1rem 1rem;}
	@media only screen and (min-width: 550px) {
	    .about {margin: 0rem 3rem 1rem 3rem;}
	}
.leftfooter {font-family: 'Anek Telugu'; font-size: .8rem; text-align: left; text-transform: uppercase; }
.rightfooter {font-family: 'Anek Telugu'; font-size: .8rem; text-align: right; text-align: right; margin-right: 1rem;}
.quote {text-align: center; font-size: .9em; font-style: italic; margin: 0 1em 0em 1em;}
	@media only screen and (min-width: 550px) {
	    .quote {margin: 0 3em 1em 3em}
	}
.cv {margin: 0;}
.cv li {margin-left: 0;}
.cv ul li {margin: 0;}

.installations {margin: 0;}
	@media only screen and (min-width: 550px) {
    .installations {margin: 0 2em 0 1em;}
	}

.title {margin: 0 2em 1em 0;}
	
	
	
/* Page exceptions
-------------------------------------------------- */
#home figure {max-width: 100%; padding: 0;}
@media only screen and (min-width: 768px) {
    #home figure {max-width: 100%; padding: 2em 3em 0 0;}
}

#video section {margin: 2em 10em;}
    #video section {margin: 2em 10em;}
}

#about figure {max-width: 100%; padding: 0;}
@media only screen and (min-width: 768px) {
    #about figure {max-width: 100%; padding: 2em 4em 2em 4em;}
}

#cutmeopen figure {max-width: 100%; padding: 0;}
@media only screen and (min-width: 768px) {
    #cutmeopen figure {max-width: 100%; padding: 0 2em;}
}

#skymeadowroad figure {max-width: 100%; padding: 0;}
@media only screen and (min-width: 768px) {
    #skymeadowroad figure {max-width: 100%; padding: 0 2em;}
}

#pantadeusz figure {max-width: 100%; padding: 0;}
@media only screen and (min-width: 768px) {
    #pantadeusz figure {max-width: 100%; padding: 0 2em;}
}

#turbulence figure {max-width: 100%; padding: 0;}
@media only screen and (min-width: 768px) {
    #turbulence figure {max-width: 100%; padding: 0 2em;}
}

#platotectonics figure {max-width: 100%; padding: 0;}
@media only screen and (min-width: 768px) {
    #platotectonics figure {max-width: 100%; padding: 0 2em;}
}



/* Hidden Elements
-------------------------------------------------- */
#home h2, #about h2, #contact h2, footer h2 {font-size: 0;}
.ghost {font-size: 0;}

/* Fancy Stuff (for Youtube videos)
-------------------------------------------------- */

.iframe-container{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
}
.iframe-container iframe{
  position: absolute;
  top: 0%;
  left: 0%;
  padding: 2%;
  width: 100%;
  height: 100%;
}
	@media only screen and (min-width: 768px) {
	.iframe-container{
	  position: relative;
	  width: 100%;
	  padding-bottom: 56.25%;
	  height: 0;}
	.iframe-container iframe{
	  position: absolute;
	  top:0%;
	  left: 0%;
	  padding: 1%;
	  width: 100%;
	  height: 100%;}
	}  
	


/* Grid System (question can % not add up to 100% - col-8 was 66.66%)
-------------------------------------------------- */
	
	/* ----- Gallery ----- */
	.gallery { width: 100%; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; margin-top: 2em;}
	.gallery-center {display: flex; justify-content: center; flex-wrap: wrap;  margin: 0 0 2em 0;} /* this is for putting col-s in a row that don't add up to 12. Instead of using empty col-s this can be used to center the col-s used */
	.gallery-space-between {display: flex; justify-content: space-between; align-items:center; flex-wrap: wrap; margin: 1em 2em 2em 1em;}
	
.container {}
.row {} /* as of 20211229 .container and .row function identically */
	
	

    [class*="col-"],
    .container,
    .row {
        width: 100%;
        float: left;
      }

	  hr {
	    color: #cccccc;
	    margin-top: 0.5em;
	    margin-bottom: 1em;
	    border-width: 1px;
	  }

  @media only screen and (min-width: 768px) {
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 61%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
  }




/* Testing Stuff (comment out to turn off)
html {background: #000000;}
body {background: #606060;}
p, ul, ol {background: #e0f0e0;}
figure {background: #d0d0f0; }
header {background: #d0d0d0;}
nav {background: #c0c0c0;}
nav a li {background: #ffddee  ;}
nav ul li {border: 1px solid;}
section {background: #ffffff;}
footer {background: #d0d0d0;}
[class*="col-"],
.container,
.row {border: 1px dashed #00f0f0; background: #f0f0f0;}
.light {background: #ffdddd;}
.space {background: #ddffdd;}
.sound {background: #ffffdd;}
.touch {background: #ffddff;}
.experience {background: #ddddff;}

 
QUESTIONS FROM MARLENE:
  On the video page, what makes the video centered? 
  I used the same figure class: video on other pages because I could not
  figure out how to make it unified.
-------------------------------------------------- */