@import url(http://fonts.googleapis.com/css?family=Julius+Sans+One|Libre+Baskerville:400,400italic);
@import url(https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900);

/* base CSS */
* {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}
 
html, body {
  padding: 0;
  margin: 0;
}
body {
  color: #325050;
  background: #fff;
  /* font-family: 'Libre Baskerville', sans-serif; */
  /* font-family: 'Montserrat', sans-serif; */
  font-family: 'Segoe UI', sans-serif;
  font-size: 90%;
}

a {
  color: #0d8ba1;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
  text-decoration: none;
}
  a:visited {
    color: #1a5952;
  }
  a:hover, a:focus {
    color: #0599c2;
    text-decoration: underline;
  }
abbr {
  border: none;
  text-transform: uppercase;
  font-size: 0.9em;
  letter-spacing: 0.01em;
}
header {
	height: 230px;
	padding: 15px 0 70px 0;
	/* background: #2d6360; */
	background: #2d6360 50% 0 url(flauta.jpg) no-repeat; /* old IE fallback */

	background-attachment: fixed, fixed, fixed, scroll;
	background-image: url(contours.png), url(noise.png), url(gridlines.png), url(flauta.jpg);
	background-position: 0 0, 0 0, -5px -25px, 0 50%;
	background-repeat: repeat, repeat, repeat, no-repeat;
	background-size: auto, auto, auto, cover;
	text-align: center;
}

.HeaderLogin {
	height: 230px;
	padding: 15px 0 70px 0;
	background: #2d6360 50% 0 url(flauta.jpg) no-repeat; /* old IE fallback */

	background-attachment: fixed, fixed, fixed, scroll;
	/* background-image: url(contours.png), url(noise.png), url(gridlines.png), url(flauta.jpg); */
	background-position: 0 0, 0 0, -5px -25px, 0 50%;
	background-repeat: repeat, repeat, repeat, no-repeat;
	background-size: auto, auto, auto, cover;

	background: rgba(138,188,159,0.5);
}

h1.login, h2.login {
  /* padding: 0 10%; */
  margin: 0;
  color: #325050;
  font-weight: normal;
}

/* 
header {
  height: 230px;
  padding: 20px 0 70px 0;

  background: #2d6360 50% 0 url(flauta.jpg) no-repeat; /* old IE fallback */
/*
  background-attachment: fixed, fixed, fixed, scroll;
  background-image: url(contours.png), url(noise.png), url(gridlines.png), url(flauta.jpg);
  background-position: 0 0, 0 0, -5px -25px, 0 50%;
  background-repeat: repeat, repeat, repeat, no-repeat;
  background-size: auto, auto, auto, cover;
  text-align: center;
}

 */
 h1, h2, h4 {
  padding: 0 10%;
  margin: 0;
  color: #fff;
  font-weight: normal;
}

h1 {
  padding-top: 0;
  padding-bottom: 5px;
  border-bottom: none;
  font-family: 'Julius Sans One', sans-serif;
  font-size: 3.2em;
  text-transform: uppercase;
}
h1::before {
  display: inline-block;
  position: relative;
  top: 20px;
  content: "";
  width: 80px;
  height: 80px;
  margin: -20px 20px 0 0;
  /* background: url(enso.svg); */
  background-repeat: no-repeat;
  background-size: 100%;
  opacity: 0.6;
}
h2 {
  display: block;
  padding-top: 5px;
  padding-bottom: 20px;
  border-top: none;
  color: rgba(255,255,255,0.6);
  font-size: 1.4em;
  font-style: normal;
}
h2::before {
  content: " ";
  padding: 30px;
}
h3 {
  margin: 2em 0 0 0;
  color: #2e484c;
  font-family: 'Julius Sans One', sans-serif;
  font-size: 1.8em;
  font-weight: normal;
  text-transform: uppercase;
}
h4 {
	/* color: #000000; */
	/* font-style: italic; */
	/* opacity: 0.6; */
	border-top: none;
	color: #2e484c;
	display: block;
	font-family: 'Julius Sans One';
	font-size: 1.6em;
	font-weight: bold;
	padding: 0px 5% 5px 5px;
	float: left;
}
p {
  margin: 0.75em 0;
  line-height: 2;
}


.page-wrapper {
  position: relative;
}
.summary, .preamble {
  width: 80%;
  margin: 0 auto;
}
.supporting h3, .supporting p {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.summary {
  padding-top: 2em;
}


/* savio */

hr.titulo {
  /* border: 0; */
  border-bottom: solid 1px rgba(210, 215, 217, 0);
  margin-bottom: 5%; 
  color: #2e484c;
  margin-left: 0px;
}

  /* hr.major { */
    /* margin: 3em 0; } */

blockquote {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0px;
    margin-right: 0px;
}
.logado {
	color: #fff;
	font-size: 1em;
	font-style: italic;
	font-weight: normal;
	opacity: 0.6;
	width: 100%;
	text-align: right;
}

.horarios {
	font-family: 'Julius Sans One', sans-serif;
	font-size: 1em;
	font-weight: normal;
	padding: 8px;
	border-width:1px;
	border-style:dotted;
	border-color:#999;
}

.horarios td, .horarios th, .horarios tr {
	background-color: #edf4f0;
	text-align: center;
	padding: 8px;
}

.horarios th, .relatorios th {
	color: #325050;
	font-weight: bold;
	border-width: 0px 0px 1px 0px; 
	border-style: solid; 
	border-color: #cccccc;
}
		
	
.programa, .pconteudo, .pnome {
	font-size: 1em;
	font-weight: normal;
	padding: 0.8%;
	width: 100%
}
	
	
table {
	font-size: 1em;
	text-align: left;
	border-collapse: collapse;
	width: 100%;
}
/* 
td, th {
	border: 1px solid #000000;
	padding: 6px;
}
 */
td.loginFrmLabel {
	text-align:right;
	border:0px;
	padding: 6px;
}
td.loginFrmData {
	text-align:left;
	border:0px;
	padding: 6px;
}

td.cadastroLabel {
	text-align: right;
}
td.cadastroData {
	text-align:left;
}
td.cadastroLabel, td.cadastroData  {
	/* font-size: 1.1em; */
	border:0px;
	padding: 4px;
	vertical-align: middle;
}

/* tr:nth-child(even){background-color: #f2f2f2;}

tr:hover {background-color: #ddd;}
 */
th {
	padding-top: 12px;
	padding-bottom: 12px;
	text-align: left;
	background-color: #04AA6D;
	color: white;
}

td.pnome {
	width: 30%;
}
td.pconteudo {
	width: 70%
}	

td.registro_rotulo {
	background-color: #edf4f0;
	text-align: center;
}
	
td.atividade, td.registro_dados {
	/* font-family: 'Montserrat', sans-serif; */
	font-weight: bold;
	/* font-size: 1.2em; */
	background-color: #fff;
	text-align: center;
	border-width:0px 1px 1px 0px;
	border-style:dotted;
	border-color:#999;
}

td.atividade {
	width: 70%;
}
	
.relatorios, .cadastro {
	font-family: 'verdana', sans-serif;
	font-size: 1em;
	font-weight: normal;
	/* padding: 0.8%; */
	border-width:1px;
	border-style:dotted;
	border-color:#999;
}
.relatorios td {
	border-width:0px;
	padding: 4px;
	/* border-collapse: collapse; */
}
.relatorios, .cadastro td {
	padding: 6px;
	vertical-align: top;
	font-size: 0.9em;
}

td.relatorios-header {
	background: #d9dac2;
	vertical-align: middle;
}

.matricula table{
	font-size: 1em;
	border-collapse: collapse;
	width: 100%;
}
/* table.cadastro { */
	/* font-size: 0.9em; */
	/* border-collapse: collapse; */
	/* width: 100%; */
/* } */
/* .cadastro table {
	font-size: 0.9em;
	border-collapse: collapse;
	width: 100%;
}
 *//* 
table.matricula {
	font-size: 1em;
} */

tr.TrHeader {
	border-width: 0px 0px 1px 0px; 
	border-style: dotted; 
	border-color: #ddd;
}

.cadastro tr:nth-child(even){background-color: #edf4f0;}

.cadastro tr:hover {background-color: #ddd;}
 
 /* atualizando aqui */
.relatorios th {
	padding-top: 12px;
	padding-bottom: 12px;
	text-align: left;
    padding: 6px;
}

.cadastro th, td.relatorios-header {
	padding-top: 12px;
	padding-bottom: 12px;
	text-align: left;
    padding: 6px;
}
 /* atualizando aqui */

.cadastro th {
	color: #325050;
	background-color: #d9dac2;
	
}

.cadastro td {
  border: 1px solid #ddd;
}

.indisponivel {
	color: #ff0000;
	font-weight: normal;
}
	
.disponivel {
	color: #009933;
	/* font-weight: bold; */
}
	
.sistema {
  color: #0000ff;
	}
	
.erro {
	color: red;
	font-weight:normal;
	}
	
div.formulario {
  text-align: center;
}

.formBotao, .formdados {
	font-family: 'verdana', sans-serif;
	/* font-family: 'Montserrat', sans-serif; */
	color: #333;
	font-size: 1em;
	font-weight: normal;
	/* border-width: 1px 1px 1px 1px;  
	border-style: solid; */
	}

.formBotao {
	background-color: silver;
	border: #000000;
	}

.formdados, .formdados option {
	text-align:left;
	background-color: #eee;
	/* border: silver; */
	}
	
/* savio */



/* intro block links -- download HTML/CSS */
.intro a, .intro a:visited {
  position: relative;
  display: inline-block;
  padding: 1px 10px 1px 32px;
  margin: -1px -10px -1px -6px;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;

  color: #809b7e;
  font-family: 'Julius Sans One', sans-serif;
  text-transform: uppercase;
}
.intro a:hover, .intro a:focus {
  z-index: 2;
  color: #fff;
  background: #3d8a9f;
  text-decoration: none;
}

.intro a::before {
  display: inline-block;
  position: absolute;
  top: 6px;
  left: 8px;
  padding: 2px;
  color: #a9b995;
  background: #d9e1cd;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -o-border-radius: 2px;

  content: "D";
  font-size: 16px;
  text-indent: 0;


  /* icomoon.io defaults */
  font-family: 'verdana', sans serif;
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;

  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}
  .intro a:hover::before {
    color: #fff;
    background: #357d93;
  }


/* coloured cutoff */
div.participation, div.benefits {
  background-attachment: scroll, scroll, fixed;
  background-color: rgba(138,188,159,0.5);
  /* background-image: url(contours-opaque.png), url(gridlines-opaque.png), url(bamboo.png); */
  background-repeat: repeat, repeat, no-repeat;
  background-size: auto, auto, cover;
}
/* extra padding at the cutoffs */
div.participation {
  /* padding: 3em 0; */
  /* margin-top: 3em; */
  padding: 1em 0;
  margin-top: 1em;
}
div.benefits {
  padding-bottom: 3em;
  margin-bottom: 3em;
}
div.participation h3, div.benefits h3 {
  margin-top: 0;
}
div.participation p, div.benefits p {
  margin-bottom: 0;
}


/* sidebar base styles */
.sidebar {
  background: #edf4f0;
}
.sidebar h3 {
  display: none;
}
.sidebar a {
  /* color: #607476; */
  color: #325050;
  text-decoration: none;
}
  .sidebar a:hover, .sidebar a:focus {
    color: #49968e;
  }
.sidebar ul {
  padding: 0;
  margin: 0;
  list-style: none;
  overflow: hidden;
}


/* shared sidebar styling */
.design-selection ul, .zen-resources ul {
  margin: 0;
}
.design-selection li, .zen-resources li {
  float: left;
  width: 50%;
  padding: 0.3em 10%;
  border-top: solid 1px #d9e3dc;
  /* color: #c0cac3; */
  font-style: italic;
}
  .design-selection li:hover, .design-selection li:focus {
    background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%); /* W3C */
  }
.design-selection li:nth-child(2n+1), .zen-resources li:nth-child(2n+1) {
  clear: left;
}
.design-selection .design-name, .design-name li, .zen-resources a, li.viewall a {
  /* display: block; 
  margin-bottom: 0.25em; */
  font-family: 'Julius Sans One', sans-serif;
  font-size: 1.2em;
  font-style: normal;
  text-transform: uppercase;
}

/* .design-name li, .design-name a {
	font-size: 1em;
}
 */
/* select a design */
.design-selection h3 {
  display: none;
}
.design-selection .designer-name {
  color: #616857;
  /* font-size: 0.9em; */
  font-style: normal;
}



/* archives navigation */
.design-archives {
  position: absolute;
  top: 160px;
  right: 0;
  width: 100%;
  height: 70px;
  background: rgba(255,255,255,0.2);
}
.design-archives h3 {
  display: none;
}
.design-archives ul {
  margin: 0;
}
.design-archives li {
  position: absolute;
  top: 0;
  padding: 0;
  margin: 0;
  border: none;
  list-style: none;
}
.design-archives li.viewall {
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 71px;
  line-height: 50px;
}
.previous, .next {
  left: 0;
  z-index: 3;
}
.next {
  left: auto;
  right: 0;
}
.design-archives a, .design-archives a:visited {
  color: rgba(255, 255, 255, 0.65);
}
.design-archives a:hover, .design-archives a:focus {
  color: #fff;
}
.design-archives .previous a, .design-archives .next a {
  display: block;
  overflow: hidden;
  width: 70px;
  height: 70px;
  text-indent: 100%;
  text-decoration: none;
  white-space: nowrap;
}
.design-archives .viewall a {
  z-index: 2;
  width: 100%;
  min-height: 70px;
  padding: 12px 0 0 0;
  text-align: center;
}
.design-archives a::before {
  position: absolute;
  left: 0;
  width: 70px;
  height: 70px;
  text-align: center;
  text-indent: 0;
  font-size: 44px;

  /* icomoon.io defaults */
  font-family: 'verdana', sans serif;
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 70px;
  -webkit-font-smoothing: antialiased;
}
.design-archives .viewall a:hover, .design-archives .viewall a:focus, .design-archives .viewall a:active,
.design-archives a:hover::before, .design-archives a:focus::before, .design-archives a:active::before {
  background-color: rgba(255,255,255,0.25);
  box-shadow: inset 0 0 10px rgba(255,255,255,0.1);
}
.design-archives .previous a::before {
  content: "<";
}
.design-archives .next a::before {
  content: ">";
}



/* resources */
.zen-resources {
  overflow: hidden;
  background-color: rgba(138,188,159,0.5);
  background-image: url(bamboo.png);
}
.zen-resources li {
  border-top: solid 1px #a0b9ad;
  font-style: normal;
}
.zen-resources li:last-child {
  float: none;
  width: auto;
  border-bottom: solid 1px #a0b9ad;
}


/* busting out the credits block */
.requirements p:nth-child(5) {
  padding-bottom: 2em;
}
.supporting .requirements {
  float: none;
  clear: both;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.supporting .requirements a {
  text-decoration: none;
}
  .supporting .requirements a:hover, .supporting .requirements a:focus {
    text-decoration: underline;
  }
.supporting .requirements h3 {
  padding-top: 0;
}
.requirements p:last-child {
  width: auto;
  padding: 1em 12%;
  margin: 0;
  color: rgba(255, 255, 255, 0.4);
  background: #3e5d67;

  background-attachment: fixed, fixed, fixed, scroll;
  background-image: url(contours.png), url(gridlines.png), url(noise.png), url(koi.jpg);
  background-position: 0 0, -5px -25px, 0 0, 0 50%;
  background-repeat: repeat, repeat, repeat, no-repeat;
  background-size: auto, auto, auto, cover;

  font-size: 2em;
  font-style: italic;
  text-align: center;
}
.requirements p:last-child a {
  color: rgba(255, 255, 255, 0.7);
  font-style: normal;
}



/* main footer */
footer {
  clear: both;
  padding: 3em 10%;
  color: #ccc;
  background: #134347;
  text-align: center;
  font-family: 'verdana';
}
footer a {
  display: inline-block;
  overflow: hidden;
  width: 40px;
  height: 40px;
  padding: 40px 0 0 0;
  margin: 0 0.5em;
  position: relative;
  color: rgba(255, 255, 255, 0.5);
  -webkit-transition: color 0.25s ease-out, box-shadow 0.25s ease-out;
  -moz-transition: color 0.25s ease-out, box-shadow 0.25s ease-out;
  transition: color 0.25s ease-out, box-shadow 0.25s ease-out;
}
footer a:hover, footer a:focus {
  color: rgba(255, 255, 255, 0.3);
  text-decoration: none;
}
footer a:visited {
  color: rgba(255, 255, 255, 0.2);
}
footer a::before {
  display: block;
  position: absolute;
  top: 3px;
  left: 0;
  overflow: visible;
  font-size: 36px;
  text-indent: 0;

  /* icomoon.io defaults */
  font-family: 'verdana', sans serif;
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
  footer a.zen-validate-html::before {content: "5";}
  footer a.zen-validate-html:hover::before, footer a.zen-validate-html:focus::before {content: "%";}
  footer a.zen-validate-css::before {content: "3";}
  footer a.zen-validate-css:hover::before, footer a.zen-validate-css:focus::before {content: "#";}
  footer a.zen-license::before {content: "c";}
  footer a.zen-license:hover::before, footer a.zen-license:focus::before {content: "C";}
  footer a.zen-accessibility::before {content: "a";}
  footer a.zen-accessibility:hover::before, footer a.zen-accessibility:focus::before {content: "A";}
  footer a.zen-github::before {content: "g";}
  footer a.zen-github:hover::before, footer a.zen-github:focus::before {content: "G";}



/* low-res CSS */
@media only screen and (max-width: 600px) {
  div {
  padding-top: 10px;
  }

  /* these download links make approximately zero sense
     on a phone without a user-accessible file system. */
  .summary p:last-child {
    display: none;
  }

  /* type adjustments */
  h1 {
    margin-top: 30px;
    font-size: 2.5em;
  }
  h1::before {
    width: 50px;
    height: 50px;
  }
  h2::before {
    padding: 25px;
  }

  .requirements p:last-child {
    padding: 1em 6%;
  }

}


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

  div {
  padding-top: 10px;
  }
  header {
    height: 250px;
    padding-top: 0px;
  }
  h1 {
    margin: 0;
	padding-bottom: 0px;
	text-transform: lowercase;
  }
  h1::before {
    display: block;
    left: 50%;
    width: 50px;
    height: 50px;
/*     margin: 0px 0px 0px -25px;
    padding: 0px 0px 25px 0px;
 */  }
  h2 {
	font-size: 1.2em;
  }
  h2::before {
    padding: 0;
  }

  .design-archives {
    top: 180px;
  }
  .design-selection li, .zen-resources li {
    padding: 1em 5%;
  }

  footer a {
    margin: 0 0.5em;
  }

}

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

    /* adjusting the site header type size */
    h1 {
        font-size: 2em;
    }
    h2 {
        font-size: 1.3em;
    }

    /* linearizing the design list on small screens */
    .design-selection li, .zen-resources li {
        float: none;
        width: 100%;
    }

    /* adjusting footer type, icons */
    .requirements p:last-child {
        font-size: 1.4em;
    }
    footer {
        padding: 2em 5%;
    }
    footer a {
        width: 35px;
        height: 35px;
        padding: 35px 0 0 0;
        margin: 0 0.5em;
    }
    footer a::before {
        font-size: 32px;
    }

}


/* mid-res CSS */
@media only screen and (max-width: 1132px) {
 /*  div {
  padding-top: 0px;
  } */

  header {
    border-top: 10px solid rgba(19, 67, 71, 0.9);
  }
  p, li {
    font-size: 1.2em;
  }
	.horarios {
	  font-size: 1.1em;
	}
}

@media only screen and (min-width: 500px) and (max-width: 1150px) {

  .requirements p:last-child {
    padding-bottom: 2em;
    padding-top: 2em;
  }

  /* page footer */
  footer {
    padding: 3em 0;
  }
  footer a {
    width: 52px;
    height: 52px;
    padding: 52px 0 0 0;
    margin: 0 2em;
  }
  footer a::before {
    font-size: 48px;
  }
}


/* high-res CSS */
@media only screen and (min-width: 1132px) {
  body {
    background: #ffffff;
    background: -moz-linear-gradient(left,  #ffffff 0%, #ffffff 66%, #e5ede8 66%, #e5ede8 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(66%,#ffffff), color-stop(66%,#e5ede8), color-stop(100%,#e5ede8));
    background: -webkit-linear-gradient(left,  #ffffff 0%,#ffffff 66%,#e5ede8 66%,#e5ede8 100%);
    background: -o-linear-gradient(left,  #ffffff 0%,#ffffff 66%,#e5ede8 66%,#e5ede8 100%);
    background: -ms-linear-gradient(left,  #ffffff 0%,#ffffff 66%,#e5ede8 66%,#e5ede8 100%);
    background: linear-gradient(to right,  #ffffff 0%,#ffffff 66%,#e5ede8 66%,#e5ede8 100%);
    font-size: 90%;
  }
  header {
    width: 100%;
    height: 230px;
	padding: 0px;
    /* border-top: solid 12px rgba(19, 67, 71, 0.8); */
    box-shadow: inset 0 0px 100px rgba(255, 255, 255, 0.3);
    vertical-align: middle;
    text-align: left;
  }

  header::before, header::after {
    display: block;
    content: " ";
    position: absolute;
    z-index: 3;
    top: 0px;
    left: 0;
    width: 100%;
    height: 7px;
    background: rgba(0, 39, 43, 0.2);
  }
  header::after {
    top: 230px;
    height: 4px;
    background: rgba(0, 39, 43, 0.075);
  }
  h1 {
    display: inline-block;
    position: relative;
    margin: 15px 0 0 0;
    padding: 35px 0 5px 0;
  }
  h1::before {
    display: inline-block;
    position: relative;
    top: 65px;
    content: "";
    width: 125px;
    height: 125px;
    margin: -85px 0px 0 0;
    background: url(enso.svg);
    background-size: 100%;
    opacity: 0.6;

    -webkit-animation: koan 36000s infinite alternate;
    -moz-animation: koan 36000s infinite alternate;
    animation: koan 36000s infinite alternate;
  }
  h2 {
    display: block;
    margin: 0;
    padding: 5px 0 5px 70px;
  }
/* 	h4::before {
  content: " ";
  padding: 0px;
	}
 */
  p {
    font-size: 1em;
  }

  /* main layout blocks */
  nav, .supporting {
    display: inline; 
  }
  .summary, .preamble, .supporting div, .requirements h3, .requirements p {
    float: left;
    clear: left;
    width: 66%;
    padding: 2em 5% 1em 10%;
  }
  .explanation h3, .explanation p,
  .participation h3, .participation p,
  .benefits h3, .benefits p {
    width: 100%;
  }
  .summary {
    padding-top: 3.25em;
  }
  .requirements h3, .requirements p {
    margin: 0;
    padding-bottom: 0;
  }


  /* coloured cutoff */
  div.participation, div.benefits {
    width: 100%;
    padding-left: 10%;
    padding-right: 38%;
    margin: 0;
  }
  /* extra padding at the cutoffs */
  div.participation, div.requirements {
    /* padding-top: 4em; */
    padding-top: 3em;
  }
  div.explanation, div.benefits {
    padding-bottom: 4em;
  }
  .requirements p:nth-child(5) {
    padding-bottom: 4em;
  }
	div.explanation {
	  min-height: 945px;
	  }

  .intro h3, .supporting h3 {
    margin-top: 0;
  }
  .intro p:last-child, .supporting p:last-child {
    margin-bottom: 0;
  }


  .requirements p:last-child {
    padding-bottom: 3em;
    padding-top: 3em;
    box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.3);
  }


  /* sidebar styling */
  .design-selection, .zen-resources {
    position: absolute;
    /* top: 360px; */
    right: 0;
    width: 33.3%;
    padding: 2em 0 20px 0;
    margin: 0;
    overflow: visible;
    background: transparent;
  }
  .sidebar li {
    float: none;
    width: auto;
    padding-left: 0;
    padding-right: 0;
    /* margin: 0 29.4% 0 14.7%; /* 0 10% 0 5% of total width */
    margin: 0 20% 0 10%;
  }


  /* select a design */
  .design-selection li:first-child {
    border-top: 0;
  }
  .design-selection li:hover, .design-selection li:focus {
    background: none;
  }

  /* archives navigation */
  .design-archives {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 310px;

    background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 66%, rgba(0,0,0,0.2) 66%, rgba(33,84,95,0.3) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(66%,rgba(255,255,255,0)), color-stop(66%,rgba(33,84,95,0.3)), color-stop(100%,rgba(33,84,95,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 66%,rgba(33,84,95,0.3) 66%,rgba(33,84,95,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 66%,rgba(33,84,95,0.3) 66%,rgba(33,84,95,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 66%,rgba(33,84,95,0.3) 66%,rgba(33,84,95,0) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 66%,rgba(33,84,95,0.3) 66%,rgba(33,84,95,0) 100%); /* W3C */
  }
  .design-archives nav {
    display: block;
    position: absolute;
    right: 1%;
    top: 120px;
    width: 32%;
  }
  .design-archives li {
    margin: 0;
  }
  .design-archives .viewall a, .design-archives a::before {
    background: rgba(255,255,255,0.1);
    text-decoration: none;
  }

  .design-archives .viewall a:hover, .design-archives a:hover::before {
    background-color: rgba(255,255,255,0.2);
  }


  /* resources navigation */
  .zen-resources {
    position: absolute;
    top: 1310px;
    right: 0;
    width: 34%;
    background: transparent;
  }
  .zen-resources h3 {
    display: none;
  }
  .zen-resources ul {
    width: 55.9%;
    margin: 0 29.4% 0 14.7%;
  }
  .zen-resources li {
    padding: 1.5em 0 1.25em 0;
    margin: 0;
  }

}


@media only screen and (min-width: 1150px) {
  /* page footer */
  footer a {
    width: 76px;
    height: 76px;
    padding: 76px 0 0 0;
    margin: 0 3em;
  }
  footer a::before {
    font-size: 72px;
  }
}

/*
  Okay, look, I feel rather awful about this. But due to source order it
  seems like the only way to pull off the separated sidebar. Perhaps
  flexbox is the way forward here, once the syntax settles down a bit.
*/
@media only screen and (min-width: 1120px) {.zen-resources {top: 1490px;}}
@media only screen and (min-width: 1240px) {.zen-resources {top: 1460px;}}
@media only screen and (min-width: 1260px) {.zen-resources {top: 1420px;}}
@media only screen and (min-width: 1320px) {.zen-resources {top: 1390px;}}
@media only screen and (min-width: 1370px) {.zen-resources {top: 1360px;}}
@media only screen and (min-width: 1520px) {.zen-resources {top: 1330px;}}
@media only screen and (min-width: 1812px) {.zen-resources {top: 1300px;}}
@media only screen and (min-width: 1848px) {.zen-resources {top: 1270px;}}
@media only screen and (min-width: 2015px) {.zen-resources {top: 1240px;}}
@media only screen and (min-width: 2115px) {.zen-resources {top: 1210px;}}
@media only screen and (min-width: 2400px) {/* you're kidding, right? */}


@-webkit-keyframes koan {
    from {
      -webkit-transform: scale(1);
    opacity: 1;
    }
    to {
      -webkit-transform: scale(3);
    opacity: 0;
    }
}
@-moz-keyframes koan {
    from {
      -moz-transform: scale(1);
    opacity: 1;
    }
    to {
      -moz-transform: scale(3);
    opacity: 0;
    }
}
@keyframes koan {
    from {
      transform: scale(1);
    opacity: 1;
    }
    to {
      transform: scale(3);
    opacity: 0;
    }
}

/* high-DPI adjustments */
@media
    (min--moz-device-pixel-ratio: 1.5),
    (-o-min-device-pixel-ratio: 3 / 2),
    (-webkit-min-device-pixel-ratio: 1.5),
    (min-device-pixel-ratio: 1.5),
    (min-resolution: 1.5dppx) {

    header {
        background-image: url(contours@2x.png), url(noise.png), url(gridlines.png), url(flauta.jpg);
        background-size: 50% auto, auto, auto, cover;
    }

    .requirements p:last-child {
        background-image: url(contours@2x.png), url(gridlines.png), url(noise.png), url(koi.jpg);
        background-size: 50% auto, auto, auto, cover;
    }

    /*
        This shouldn't be necessary, but it is. Due to differences in how
        Chrome calculates gradients and % widths / padding, the archives
        spill out of the visual container at some screen sizes.
    */
    .design-archives nav {
        right: 3%;
        width: 29%;
    }
}

/* icon fonts */
/* @font-face {
	font-family: 'verdemoderna';
	src:url('verdemoderna.eot');
	src:url('verdemoderna.eot?#iefix') format('embedded-opentype'),
		url('verdemoderna.woff') format('woff'),
		url('verdemoderna.ttf') format('truetype'),
		url('verdemoderna.svg#verdemoderna') format('svg');
	font-weight: normal;
	font-style: normal;
} */
/* 1000 lines?! */