/*********/
/* INTRO */
/*********/

#intro { overflow: hidden; position: absolute; background-color: black; width: 100%; height: 100%; z-index: 10; color: white;  overflow:hidden; }
#intro-title { -webkit-font-smoothing: antialiased; position: absolute; top: 40%; width: 70%; left: 15%; text-transform: uppercase; font-size: 2.2em; }
#skip-wrapper { font-size: 0.7em; padding: 0.5em; margin: 0.3em; position: absolute; top: 4%; left: 4%; text-align: center;  width: 100%; border: solid 0.1em rgba(19, 65, 99, 0.7); background: rgba(19, 65, 99, 0.2); -webkit-box-shadow: 0px -1px 4px 1px rgba(0,0,0,0.6); -moz-box-shadow: 0px -1px 4px 1px rgba(0,0,0,0.6); box-shadow: 0px -1px 4px 1px rgba(0,0,0,0.6); border-radius: 9px 9px 9px 9px; -moz-border-radius: 9px 9px 9px 9px; -webkit-border-radius: 9px 9px 9px 9px; }
#skip { }
#intro-bottom-row { font-size: 0.7em; position: absolute; bottom:4%; width: 100%; }
#dboom-github { position: absolute; bottom:0; left:4%; text-align: center; padding: 0.5em; border: solid 0.1em rgba(19, 65, 99, 0.7); background: rgba(19, 65, 99, 0.2); -webkit-box-shadow: 0px -1px 4px 1px rgba(0,0,0,0.6); -moz-box-shadow: 0px -1px 4px 1px rgba(0,0,0,0.6); box-shadow: 0px -1px 4px 1px rgba(0,0,0,0.6); border-radius: 9px 9px 9px 9px; -moz-border-radius: 9px 9px 9px 9px; -webkit-border-radius: 9px 9px 9px 9px; }
#dboom-share { position: absolute; bottom:0; right:4%; text-align: center; padding: 0.5em; border: solid 0.1em rgba(19, 65, 99, 0.7); background: rgba(19, 65, 99, 0.2); -webkit-box-shadow: 0px -1px 4px 1px rgba(0,0,0,0.6); -moz-box-shadow: 0px -1px 4px 1px rgba(0,0,0,0.6); box-shadow: 0px -1px 4px 1px rgba(0,0,0,0.6); border-radius: 9px 9px 9px 9px; -moz-border-radius: 9px 9px 9px 9px; -webkit-border-radius: 9px 9px 9px 9px; }
#go-button-wrapper { position: absolute; width: 17%; height: 30%; left: 41.5%; top: 40%; border-radius: 100%; }
.blurred { width: 100%; height: 100%; background-color: rgba(1, 1, 1, 0.6); -webkit-filter: blur(15px); filter: blur(15px); border-radius: 100%; }

/* RESPONSIVENESS */
/* Extra small devices (desktops, 200px and up) */
@media (min-width: 200px) { #intro-title { top: 40%; width: 100%; left: 0; font-size: 1.6em; }
							#skip-wrapper { width: 50%; }
							#dboom-share { width: 50%; }
							#dboom-github { width: 50%; }
							#go-button-wrapper {  } } 

/* Small devices (desktops, 320px and up) */
@media (min-width: 320px) { #intro-title { font-size: 1.8em; }		
							#skip-wrapper { width: 40%; }
							#dboom-share { width: 40%; }
							#dboom-github { width: 40%; }
							#go-button-wrapper {  } }

/* Small devices (desktops, 500px and up) */
@media (min-width: 500px) { #intro-title { font-size: 2em; }
							#skip-wrapper { width: 25%; }
							#dboom-share { width: 25%; }
							#dboom-github { width: 25%; } }

/* Small devices (desktops, 640px and up) */
@media (min-width: 640px) {  }  
                            
/* Small devices (desktops, 768px and up) */
@media (min-width: 768px) { #intro-title { font-size: 2em; }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { #dboom-share { width: 20%; }
							#skip-wrapper { width: 20%; }
							#dboom-github { width: 20%; }
							#intro-title { top: 40%; width: 70%; left: 15%; font-size: 2.2em; } }