*{
    border: 0;
    margin:0;
    padding:0;
}


body{
    font: .875em/1em "Tw Cen MT", "Gill Sans MT", "Gill Sans", helvetica, arial, sans-serif;
    position: relative;
-webkit-perspective: 25px;
-webkit-perspective-origin: 50% 50%;
perspective: 25px;
perspective-origin: 50% 50%;
}

header, #boring, #contact{
    padding: 20% 3.125%;
    height: 90%;
    position: relative;
    width: 93.75%;
    z-index: -3;
    background: rgb(142,199, 176); 
}

header{
 height: 105%;
}

#contact{
    padding-left: 10%;
    padding-right: 0;
    width: 90%;
}

#projects{
    background: rgb(0,67,65);
    padding-top: 20%;
}


hgroup{
    text-align: center;
    text-transform: uppercase;
}

hgroup h1{
    font: normal 10em/.75em "century gothic", "Tw Cen MT", "Gill Sans MT", "Gill Sans", helvetica, arial, sans-serif;
    color: rgb(159,215,201);   
}

section h1{
    font: normal 7em/.75em "century gothic", "Tw Cen MT", "Gill Sans MT", "Gill Sans", helvetica, arial, sans-serif;
    color: rgba(255,255,255,.5);
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 1em;
}


hgroup h2, section h1 em, .notice{
    background: rgb(0,167,125);
    font-weight: normal;
    color: white;
    letter-spacing: .2em;
    padding: .75em 0 .65em 0;
    font-size: 1em;
    margin: 0 auto;
    width: 370px;
    position: relative;
    top: -1em;
}

section h1 em{
    font-size: .12em;
	line-height: .5em;
    width: 300px;
    display: block;

}
nav{
    text-align: center;
    margin-top: 1em
}

header nav ul li{
    display: inline-block;
    list-style: none;
    font-family: "century gothic", "Tw Cen MT", "Gill Sans MT", "Gill Sans", helvetica, arial, sans-serif;
    text-transform: uppercase;
    text-align: left;
    padding-left: 2em;
	padding-right: 1em;
	margin-left: 5%;
	background: url(img/phone.svg) no-repeat .35em 40%;
	background-size: 1.1em;
	border: 2px solid transparent !important;
	border-radius: 1em;
	transition: all .25s ease-in-out;
}


header nav ul li.boring{
    background: url(img/sad-icon.svg) no-repeat .35em 50%;
	background-size: 1.1em;
}

header nav ul li.projects{
    background: url(img/table.svg) no-repeat .35em 50%;
	background-size: 1.1em;
}


header nav ul li:hover{
	border: 2px solid rgba(255,255,255, .3) !important;
	transition: all .5s ease-in-out;
	background-color: rgba(0,167,125, .15);
}





nav a, nav a:visited{
    color: rgb(0,167,125);
    text-decoration: none;
	display: block;
	padding-top: .65em;
	padding-bottom: .75em

}


header, #projects, #contact{
//display: none;
}

#boring{
    z-index: 5;
    background-color: rgb(0,118,87);
    width: 90%;
    padding-left:5%;
    padding-right: 5%;
    color: rgb(211,236,228);
   // transform: perspective(185px) translate3d(0px, 0px, 0px) scale3d(1.4, 1, 1) rotate3d(0, 4, 0, 2deg);
    //transform-origin: 50% 50% 50%;
    //transform-style: preserve-3d;
}








#boring article{
 width: 30%;
 display: inline-block;
 vertical-align: top;
 margin-left: 3%
}

#boring li{
    margin-bottom: 1em;
    line-height: 1.25em;
    width: 92%;
    margin-left: 5%;
}


#boring #details{
    width: 22%;
}

#boring #details li{
   margin-bottom: 2em;
    list-style: none;
    margin-left: 0;
}

#boring #details li:first-child{
	margin-top: 2em;
}

#boring #details li strong{
  font-size: 3em;
  color: rgba(255,255,255,.15);
  letter-spacing: -.1em;
  text-transform: uppercase;
display: block;
line-height: .25em;
}

#boring h2, #boring h3{
    font: normal .9em "century gothic", "Tw Cen MT", "Gill Sans MT", "Gill Sans", helvetica, arial, sans-serif;
    text-transform: uppercase;
    text-align: left;
    margin-bottom: 1em;
	color: rgb(0,167,125);
	border-bottom: 1px solid rgb(0,167,125);
}

#boring ul, #boring ol{
   
}

#boring ul{
	list-style: none;
}

#boring .dark-text li{
	background: url(img/sad-icon.svg) no-repeat;
	background-size: .95em .9em;
	padding-left: 1.5em;
	margin-left: 0;
}

#boring-bg-icon{
	position: absolute;
	width: 30%;
	top:0%;
	left: 35%;
	z-index: -1;
	opacity: .25;
}

#boring .also{
	position: absolute;
	left: 7%;
	width: 50%;
}

.notice{
	font-family: "century gothic", "Tw Cen MT", "Gill Sans MT", "Gill Sans", helvetica, arial, sans-serif;
	font-style:italic;
	font-size: .6em;
	line-height: .5em;
   	display: block;
   	text-transform: uppercase;
	width: 500px;
	text-align: center;
	position: relative;
	top: -100px;
	
}




/*

#boring h2, #boring h3{
    font: bold .9em "century gothic", "Tw Cen MT", "Gill Sans MT", "Gill Sans", helvetica, arial, sans-serif;
    text-transform: uppercase;
    background-color: rgba(0,67,65, .68);
    padding: .25em 0 .35em 2em;
    margin-bottom: .75em
}

#boring article{
    width: 30%
    margin-left: 5%;
    margin-bottom: 1em;
    line-height: 1.3em
}



#boring article ul, #boring article ol{
    list-style: none;
    width: 100%;
    margin-left: 10%;
}

#boring article ol{
margin-left:0;
}
#boring article ul li{
    margin-bottom: .5em;
}
#boring article ol li{
   margin-bottom: 1em;
   padding-left: 10%;
   background: url(img/sad-icon.svg) no-repeat 5% 0;
   background-size: 1.1em;
   
   

}

#boring article.float-right{
   width: 50%;
   //position: absolute;
   right: 8%;
}



#boring .dark-text{
 margin-top:4em;
 position: relative;

}

.dark-text ul{
 color: rgb(0,67,65);
}

.script{
    font: italic 1em/.75em 'Yesteryear', cursive;
}

#boring h3.script{
 background-color: transparent;
 font: normal 1.25em/1em 'Yesteryear', cursive;
 text-transform: none;
width: 105px;
text-align:center;
padding: 1.75em 0;
display: inline-block;
background: url(img/green-circle.svg) no-repeat;
background-size: 100%;

}

#boring h3.script em{
font-style: normal;
font-size: 1.75em;
display: inline-block;
padding-top: .25em;

}

#boring .also ul{
margin: 2em 0;
display: inline-block;
width: 70%;
vertical-align: top;
}

#boring .also ul li{
 margin-bottom: 1.5em;
}


#boring .also ul li strong{
    font: bold .9em "century gothic", "Tw Cen MT", "Gill Sans MT", "Gill Sans", helvetica, arial, sans-serif;
}




*/

#projects{
 position: relative;
}


#projects ul li strong{
margin-right: .3em;
 font-size: 5.142857em;
font-weight: normal;
min-height: .9em;
line-height: 1em;
letter-spacing: -.15em;
color: rgba(255,255,255, .1);
vertical-align: top;
display: inline-block;

}

#projects ul#calendar{
    margin-left: 5%;
    width: 90%;
    color: rgba(255,255,255, .75);
	overflow: hidden;
}

#projects ul li{
list-style: none;
 width: 99%;
padding-left: 1%;
padding-top: 1em;
min-height: 20em;
}

#projects ul ul{
 margin: 0;
width: 75%;
vertical-align: top;
padding:0;
display: inline-block;

}

#projects ul ul li{
 width: 100%;
min-height: 1em;

} 

#projects ul ul li a{
text-decoration: none;
color: rgb(0,168,154);
font-weight: bold;

}


#projects ul li:nth-child(odd){
background: rgba(255,255,255,.1);
}

#projects ul ul li:nth-child(odd){
background: transparent;
}

#projects ul li.holiday{
    background: rgba(60,151,0,1);
}

#projects ul li.holiday span{
  background: transparent;
width: 100%;
font-size: 3em;
color: rgba(255,255,255, .2);  
}


#projects ul li span{
display: block;
font: bold .87514286em "century gothic", "Tw Cen MT", "Gill Sans MT", "Gill Sans", helvetica, arial, sans-serif;
text-transform: uppercase;
background-color: rgb(0,167,125);
width: 90px;
padding-left: 2em;
vertical-align: top;
margin-bottom: .5em;
}

#projects ul li span.hw{
    background: rgb(0,168,154);
}


#projects ul li span.lab{
    background: rgba(0,168,154,.25);
}

#projects h2{
	display: none;
}

#next, #prev{
  //display: block;
  display: none;
   width: 15%;
    position: absolute;
    top: 20em;
    z-index: 500;
}


#next{
 right: 0;
}

#prev{
 left:0;
}

#contact h1 a{
	text-decoration: none;
	color: rgba(255,255,255,.5);
	
}


#contact ul{
    background: rgba(255,255,255,.75);
	width: 92.5%;

   
}


#close-modal{
	position: absolute;
	top: 10%;
	left: 10%;
	display: none;
	z-index: 300;
}