/*ESTILOS GENERALES*/

.slide h2{
	font-family: 'Josefin Slab';
	line-height: 1.2em;
	letter-spacing: -.05em;
}

.slide.light{
	background-color: rgb( 248, 250, 237);
	color: #444;
}

.light .delayed.displayed{
	opacity: 0.6;
}

.light code, .light pre, .light style{
	background-color: rgba( 0, 0, 0, .75);
	color: white;
}

.section h2{
	-webkit-transform: rotate(-90deg) translate(-40%, -2.5em);
	   -moz-transform: rotate(-90deg) translate(-40%, -2.5em);
	   	 -o-transform: rotate(-90deg) translate(-40%, -2.5em);	
			transform: rotate(-90deg) translate(-40%, -2.5em);			
	position: absolute;
}

.section h3{
	font-family: 'Corben';
	font-size: 4em;
	text-align: right;
	position: absolute;
	bottom: 0.2em;
	right: 0.3em;
	line-height: 1.2em;
	width: 70%;
}

.tagline {
	font-family:'Architects Daughter';
	text-align:center;
	font-size: 50px;
	color: #659446;
	margin-top: -1.1em;
	-webkit-transform: rotate(-2deg);
	   -moz-transform: rotate(-2deg);
	     -o-transform: rotate(-2deg);
	   		transform: rotate(-2deg);   
}

.credits{
	position: absolute;
	bottom: 0.5em;
	right: 0.5em;
	font-size: 75%;
	font-weight: normal;
}

em{
	font-style: italic;
}

blockquote{
	font-family: 'Josefin Slab';
	font-style: italic;
	letter-spacing: 0;
	color: #444;
	text-shadow: rgba(255, 255, 255, 0.4) 0.05em 0.05em 0.1em;
	background: rgba( 248, 250, 237, .9);
	padding: 20px 40px;
	width: 60%;
	margin: 0 auto;
	position: relative;
	-moz-border-radius: 10px;
		 border-radius: 10px;
}

blockquote:before{
	content: '\201C';
	color: #659446;
	font-size: 3em;
	font-family: georgia;
	position: absolute;
	top: -0.3em;
	left: .1em;
}

blockquote p{
	text-align: center;
}

blockquote li{
	list-style: none;
}

blockquote li:before{
	content: '\279C';
	color: #28bcbc;
	padding-right: .2em;	
}

blockquote footer{
	font-style: normal;
	margin-top: 20px;
}

.light blockquote{
	background-color: rgb( 58, 51, 34);
	color: white;
	text-shadow: 0.05em 0.05em 0.1em rgba(0, 0, 0, 0.4);
}

.wtf{
	font-family: 'Corben';
	font-size: 5em;
	color: #659446;
	text-align: center;
	line-height: 1.1em;
	margin-top: .3em;
}

input{
	color: #444;
}

img{
	position: relative;
	border: .4em solid rgb( 255, 255, 255);
	-webkit-box-shadow: 0 0 .3em rgba( 0, 0, 0, .5), 0 0 1em rgba(0, 0, 0, 0.06) inset;
	   -moz-box-shadow: 0 0 .3em rgba( 0, 0, 0, .5), 0 0 1em rgba(0, 0, 0, 0.06) inset;
		    box-shadow: 0 0 .3em rgba( 0, 0, 0, .5), 0 0 1em rgba(0, 0, 0, 0.06) inset;
}

.corben:first-letter{
	-webkit-transform:rotate(180deg);
	   -moz-transform:rotate(180deg);
	     -o-transform:rotate(180deg);
			transform:rotate(180deg);
}

/*FIN ESTILOS GENERALES*/

#intro {
	padding: 0;
	border: 0;
}

#intro.slide{
	background: none;
}

#intro h1 {
	font: bold 6em 'Corben';
	text-align: center;
	min-height: 20px;
	margin: 15% auto 0;
}

#intro h2{
	text-align: center;
}

.navigation{
	background: #659446;
	text-align: center;
	width:70%;
	margin: 0 auto;
	-webkit-animation: navigation .8s ease-in 1.5s;
	border-radius: 10px;
}

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

.speaker h2{
	text-align: center;
}

.speaker > div {
	float: left;
	width: 50%;
	height: 80%;
	text-align: center;
}

.speaker > div:nth-of-type(2) {
	float: right;
}

.speaker > div:first-of-type img{
	width: 85%;
	margin-top: 15%;
}

.speaker >div:nth-of-type(2) img{
	border: none;
	width: 50%;
	margin: 1em auto;
	-webkit-box-shadow: none;
	   -moz-box-shadow: none;
			box-shadow: none;
}

.speaker > div > div{
	background: rgba( 248, 250, 237, .9);
	text-align: left;
	padding: .5em 1em;
	width: 80%;
	color: #444;
	margin: 0 auto;
	font-size: 1.5em;
	-moz-border-radius: 10px;
		 border-radius: 10px;
}

.speaker > div > div li{
	list-style: none;
}

.what-is div{
	width: 90%;
	height: 80%;
	margin: 0 auto 1em;
	text-align: center;
}

.what-is div img{
	height: 100%;
}

#starting > hgroup.slide{
	background: #450233;
	border-top: none;
}

#starting > hgroup.slide h2{
	color: white;
}

#starting > .slide{
	border-top: 30px solid #450233;
}

#starting > .slide > h2{
	color: #450233;
}

.doctype dl{
	margin-top: 50px;
}

.doctype dt{
	font-size: 275%;
	margin-bottom: 30px;
}

.doctype dd{
	margin-bottom: 50px;
}

.tagsoup pre{
	width:  50%;
	float: left;
}

.tagsoup .wtf{
	float: right;
	width: 40%;
}

.validation blockquote{
	width: 70%;
}

.validation h3{
	font-family: 'Josefin Slab';
	color: #450233;
	font-size: 2em;
}

#new-tags > hgroup.slide{
	background: #DB3C6E;
	border-top: none;
}

#new-tags > hgroup.slide h2{
	color: white;
}

#new-tags{
	background: #DB3C6E;
}

#new-tags > .slide{
	border-top: 30px solid #DB3C6E;
}

#new-tags > .slide > h2{
	color: #DB3C6E;
}

.doctor{
	height: 80%;
	text-align: center;
}

.doctor img{
	height: 100%;
}

.definition{
	float: left;
	width: 50% ;
}

.definition blockquote{
	width: 90%;
	margin: 20px 0;
}

.definition blockquote footer{
	margin-top: 10px;
}

#new-tags > .slide > div li, .definition li, .example li, .rcortes li{
	list-style: none;
}

#new-tags > .slide > div li:before, .definition li:before, .example li:before, .rcortes li:before{
	content:'\2714';
	color: #a0c12c;
	padding-right: .2em;
}

.example{
	float: right;
	width: 90% ;	
	text-align: center;
	height: 80%;
}

.example img{
	height: 100%;	
}

.example pre{
	text-align: left;
}

.example pre ~ img{
	width: 90%;
	height: auto;
	margin-top: 1em;
}

.example figure{
	width: 40%;
	text-align: center;
	margin: 1em auto 0;
	display: block;
	padding: .5em .5em;
	background: rgba( 255, 255, 255, .9);
	-webkit-box-shadow: 0 0 .3em rgba( 0, 0, 0, .5), 0 0 1em rgba(0, 0, 0, 0.06) inset;
	   -moz-box-shadow: 0 0 .3em rgba( 0, 0, 0, .5), 0 0 1em rgba(0, 0, 0, 0.06) inset;
		    box-shadow: 0 0 .3em rgba( 0, 0, 0, .5), 0 0 1em rgba(0, 0, 0, 0.06) inset;
	-moz-border-radius: 10px;
		 border-radius: 10px;
}

.example figcaption{
	font-family: 'Architects Daughter';
	color: #15709F;
	line-height: 1em;
	display: block;
	font-size: 2em;
	-webkit-transform: rotate(-10deg) translate(0, -.2em);
	   -moz-transform: rotate(-10deg) translate(0, -.2em);
	        transform: rotate(-10deg) translate(0, -.2em);
}

.example pre ~ figure img {
	width: 100%;
	height: auto;
	border: none;
	-webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, 0.3) inset;
	   -moz-box-shadow: 0 0 .3em rgba(0, 0, 0, 0.3) inset;
		    box-shadow: 0 0 .3em rgba(0, 0, 0, 0.3) inset;
}

.example > p{
	text-align: left;
}

.example li{
	text-align: left;
}

.obsolete .delayed.displayed{
	opacity: 1;
}

.blink{
	-webkit-animation-name: 		   blink;
	-webkit-animation-duration:        .5s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
}

@-webkit-keyframes blink {
	0% {
		color: red;
	}
	50% {
		color: green;
	}
	100% {
		color: blue;
	}
}

.degradation{
	border-top: none ;
}

.degradation h2{
	color: white;
}

.degradation div{
	width: 90%;
	margin: 0 auto;
	text-align: center;
}

.degradation img{
	width: 50%;
	border-width: .3em;
}

.bulletproof pre{
	width: 45%;
	margin-bottom: 10px;
}

.bulletproof pre:nth-of-type(odd){
	float: left;
}

.bulletproof pre:nth-of-type(even){
	float: right;
}

#audio-video > hgroup.slide{
	background: #659446;
	border-top: none;
}

#audio-video > hgroup.slide h2{
	color: white;
}

#audio-video > .slide{
	border-top: 30px solid #659446;
}

#audio-video > .slide > h2{
	color: #659446;
}

#audio-video .tagline{
	color: #DB3C6E;
}

.video-code{
	margin: 2em auto;
	text-align: center;
}

.video-code code{
	display: inline-block;
	margin: 1em 0;
}

#video-formats{
	border-collapse: collapse;
}

#video-formats img{
	border: none;
	box-shadow: none;
	display: block;
	margin:0 auto;
}

#video-formats td{
	width: 3em;
	height: 3em;
	text-align: center;
	border: 1px solid #ececec;
}

#video-formats td.format{
	width: auto;
}


#video-formats td.support{
	background-color: rgba(101, 148, 70, .7);
}

#video-formats td.half-support{
	background-color: rgba(184, 93, 7, .7);
}

video{
	width: 352px;
	height: 288px;
	border: 10px solid #fff;
	border-bottom-width: 40px;
	margin: 3em 30%;	
	-moz-border-radius: 10px;
         border-radius: 10px;
	-webkit-box-shadow: 0 0 .3em rgba( 0, 0, 0, .5), 0 0 1em rgba(0, 0, 0, 0.06) inset;
	   -moz-box-shadow: 0 0 .3em rgba( 0, 0, 0, .5), 0 0 1em rgba(0, 0, 0, 0.06) inset;
		    box-shadow: 0 0 .3em rgba( 0, 0, 0, .5), 0 0 1em rgba(0, 0, 0, 0.06) inset; 
	-webkit-transform:rotate(10deg);
	   -moz-transform:rotate(10deg);
	     -o-transform:rotate(10deg);
	   		transform:rotate(10deg);	     
	-webkit-transition: all .5s ease-in-out;
	   -moz-transition: all .5s ease-in-out;
	        transition: all .5s ease-in-out;
}

video:hover{
	-webkit-transform:scale(1.2);
	   -moz-transform:scale(1.2);
	     -o-transform:scale(1.2);
	   		transform:scale(1.2);
}

#forms > hgroup.slide{
	background: #2A6FB0;
	border-top: none;
}

#forms > hgroup.slide h2{
	color: white;
}

#forms > .slide{
	border-top: 30px solid #2A6FB0;
}

#forms > .slide > h2{
	color: #2A6FB0;
}

.new-forms code{
	width: 45%;
	display: inline-block;
}

.new-forms input{
	margin-left: 2em;
	display: inline-block;
}

.iphone{
	height: 45%;
	margin-top: 1em;
	text-align: center;
}

.iphone img{
	height: 100%;
	margin-right: 1em;
}

.iphone img:last-child{
	margin-right: 0;
}

input[type="search"]{
	width: 10em;
}

input[type="range"]{
	width: 10em;
}

input[type="submit"]{
	width: 5em;
	-webkit-appearance: none;
	border-radius: .2em;
	background: rgb(42, 111, 176);
	color: #fff;
	margin-left: 0;
}

li.iphone{
	height: 30%;
	width: 80%;
	margin: 2em auto 0;
}

.slide > ul > li.iphone:before{
	content: "";
}

.forms-attr code{
	width: auto;
	display: inline;
}

.datalist li:first-child pre{
	width: 50%;
	float: left;
	margin-top: 2em;
}

.datalist li:first-child input[type="text"]{
	margin-top: 2em;
}

.placeholder li:nth-child(2){
	margin-top: 2em;
	margin-bottom: 2em;
}

.placeholder pre{
	width: 95%;
	margin: 0 auto;
}

.placeholder fieldset{
	margin-top: 1em;
	border: none;
	padding-left: 1.5em;
}

.required code{
	display: inline;
	width: auto;
}

.required div{
	height: 25%;
	text-align: center;
}

.required div img{
	height: 100%;
	margin-right: 2em;
}

#canvas > hgroup.slide{
	background: #129B8A;
	border-top: none;
}

#canvas > hgroup.slide h2{
	color: white;
}

#canvas > .slide{
	border-top: 30px solid #129B8A;
}

#canvas > .slide > h2{
	color: #129B8A;
}

#canvas canvas{
	margin: 0 auto;
	display: block;
	border: .4em solid rgb( 255, 255, 255);
	-webkit-box-shadow: 0 0 .3em rgba( 0, 0, 0, .5), 0 0 1em rgba(0, 0, 0, 0.06) inset;
	   -moz-box-shadow: 0 0 .3em rgba( 0, 0, 0, .5), 0 0 1em rgba(0, 0, 0, 0.06) inset;
		    box-shadow: 0 0 .3em rgba( 0, 0, 0, .5), 0 0 1em rgba(0, 0, 0, 0.06) inset;
}

#apis > hgroup.slide{
	background: #B85D07;
	border-top: none;
}

#apis > hgroup.slide h2{
	color: white;
}

#apis > .slide{
	border-top: 30px solid #B85D07;
}

#apis > .slide > h2{
	color: #B85D07;
}

#geo{
	margin: 1em 40%;
	-webkit-appearance: none;
	padding: 0 1em;
	background: rgb(184, 93, 7);
	border: none;
	color: #fff;
}

.workers pre{
	width:46%;
	float:left;
	margin-top: 1em;
}

.workers pre:last-child{
	float: right;
}

h2.more-info{
	font-family: 'Corben';
	margin-top: 25%;
	text-align: center;
}

.thanks{
	text-align: center;
}

.thanks h2{
	margin-top: 25%;
}