@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Roboto:300,400);

@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }

  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
font-family: 'Roboto', sans-serif;
-webkit-font-smoothing: antialiased;
}

.reveal a, .reveal a:not(.image) {
	color: #333;
}

.reveal h2 { font-size: 2em;}

.reveal .grid-demo h2 {
	width: 5em;
	margin: auto;
}

.reveal ul#summaryMenu li {
	display: block;
	float: left;
	height: 400px;
	width: 160px;
	margin: 20px;
	padding: 15px;
	font-size: 0.8em;
	position: relative;
	top: 0px;	    
    border-radius: 20px;	
    color: #fff;
    font-weight: normal;
}



.reveal ul#summaryMenu li:nth-of-type(1) { background-color: #7986cb; }
.reveal ul#summaryMenu li:nth-of-type(2) { background-color: #5c6bc0; }
.reveal ul#summaryMenu li:nth-of-type(3) { background-color: #3f51b5; }
.reveal ul#summaryMenu li:nth-of-type(4) { background-color: #303f9f; }


.reveal ul#summaryMenu li:nth-of-type(1) { background-color: #7e57c2; }
.reveal ul#summaryMenu li:nth-of-type(2) { background-color: #5c6bc0; }
.reveal ul#summaryMenu li:nth-of-type(3) { background-color: #738ffe; }
.reveal ul#summaryMenu li:nth-of-type(4) { background-color: #29b6f6; }

.reveal section div.c5-contact {
	width: 960px;
	position: relative;
	z-index: 20;
	top: 2em;
}
.reveal .c5-contact small {
	float: right;
	position: relative;
	top: 4em;
	text-align: right;	
}
.reveal .c5-contact small a { display: block; }

.reveal section img#c5-logo {
	border: 0;
	background: none;	
	box-shadow: none;
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
	transition: none; 
	height: 2em;	
	position: relative;
	top: 2em;
	float: left;	
}

.reveal section div.attribution {
    position:absolute;
    bottom:-20px;
    right:0;    
    font-size: 0.3em;    
    line-height: 1em;
    text-align: right;
}
.reveal h1 {
	line-height: 1.2em;
}

.reveal section.intro h1,.reveal section.intro h3 {
	position: relative;
	z-index: 3;
	color: #212121;
	font-weight:100;
	text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.55); 
}
.reveal section.intro h3 { font-weight: normal; }

.reveal h2 .big {
	font-size: 320px;
	padding: 0 20px;
	position: relative;
	display: inline-block;
	top: 50px;	
}

#bigV {
	color: #9c27b0;
    background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue 12s infinite linear;
	-webkit-animation: hue 12s infinite linear;	
	height: 210px;
	text-indent: 0.3em;
}

.reveal pre {
	margin: 10px auto;
	padding: 15px;
}

.reveal pre {
	box-shadow: 0 0 0 rgba(0, 0, 0, 0.55); 
}
.reveal pre em {
	background-color: rgba(16,63,236,0.75);
	color: #fff;	
}

.reveal ul li {
	list-style-type: none;
	line-height: 2em;
}

#sidenav-demo {
	height: 100%;
	width: 100px;
	position: absolute;
	right: -100px;
	background-color: #e0e0e0;
	text-align: center;
	padding-top: 10px;	
}

#sidenav-demo .bar {
	background-color: black;
	width: 80%;
	height: 8px;
	margin: 4px auto;
}	

.reveal .buttons { padding-top: 30px;}
#color-btn-demo, #motion-btn-demo {
  border: 2px solid #f35626;
  font-size: 0.75em;
  line-height: 1.375;
  padding: 0.5rem 1.5rem;  
  margin-right: 2rem;

  font-weight: 700;

  color: #0a8f08;  
  border: 2px solid #0a8f08;

  cursor: pointer;
  display: inline;
  border-radius: 4px;
  /*-webkit-animation: hue 60s infinite linear;*/
}
.reveal #color-btn-demo.wrong, .reveal #motion-btn-demo.shake {
  border: 2px solid #dd2c00; 
  color: #dd2c00;
}

/*.reveal .progress { display: none !important; }*/
.reveal blockquote { box-shadow: none;}

.reveal section img.fjs {
	border: 0;
	background: none;	
	box-shadow: none;
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
	transition: none; 
}
.reveal pre { border-bottom: none;}
.reveal pre.small-code { font-size: 0.4em;}
.reveal #basic-one, .reveal #basic-two, .reveal #basic-three, .reveal #ease-anim, .reveal #ease-out-anim, .reveal #ease-in-anim, .reveal #elastic-anim, .reveal #bounce-anim {
	background-color: #83C1E5; width: 120px; height: 30px; border-radius: 30px; position: relative; top: 0px; color: white; font-size: 0.5em; line-height: 1.5em;
}
.reveal #basic-one, .reveal #basic-two, .reveal #basic-three, .reveal #ease-anim, .reveal #ease-out-anim, .reveal #ease-in-anim, .reveal #elastic-anim, .reveal #bounce-anim  {height: 7em; width: 7em; border-radius: 7em; top: 0.5em; left: 0.5em; background: rgba(16,63,236,0.75);}
.reveal .basic-one-slide-background {border-top: 0.2em solid #333; border-bottom: 0.2em solid #333; border-radius: 1em; width: 960px; height: 4em; }

.d-v-d {width: 100%; height: 100%; }
#d-v-d-container {width: 100%; height: 100%; display: none;}
#d-v-d-slider {
	/* set initial width */
		   width: 60%;
		   height: 100%;
		   /* hide the content that overflows (to allow second box to show through) */
		   overflow: hidden;
		   display: inline-block;
		   
		   /* skew container so that it has angled edge, and set up transition */
		  -webkit-transform: skewX(-20deg);
		  -moz-transform: skewX(-20deg);
		  -ms-transform: skewX(-20deg);
		  -o-transform: skewX(-20deg);
		  transform: skewX(-20deg);
		  
		  -webkit-transition: width 1.2s ease-in-out;
		  -moz-transition: width 1.2s ease-in-out;
		  -ms-transition: width 1.2s ease-in-out;
		  -o-transition: width 1.2s ease-in-out;
		  transition: width 1.2s ease-in-out;
		  
		   /* give negative margin to remove gap caused by left hand skew */
		   margin-left: -8%;
		   border-right: 10px solid ghostwhite;
		   
		   /* hide pointer events for unseen content */
		   pointer-events: none;
}

#dev-versus {
/* skew back by negative of parent’s skew so contents is upright */
		  -webkit-transform: skewX(20deg);
		  -moz-transform: skewX(20deg);
		  -ms-transform: skewX(20deg);
		  -o-transform: skewX(20deg);
		  transform: skewX(20deg);
		  
		  background: url(../img/code3.jpg) no-repeat 0 68px;
		  margin-left: 76px; /* give margin to push content away from left slanted edge */
		  pointer-events: auto;	/* allow pointer events for the box */
}

#design-versus {
	background: url('../img/design2.jpg') no-repeat 100% 10%; position:absolute;
}
#show-grid-demo {
	width: 100%;
	margin: 0 auto;
	position: relative;
	display: none;	
}