/* #Font-Face
================================================== */
@font-face {
    font-family: 'jurademibold';
    src: url('../fonts/jura-demibold-webfont.eot');
    src: url('../fonts/jura-demibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/jura-demibold-webfont.woff') format('woff'),
         url('../fonts/jura-demibold-webfont.ttf') format('truetype'),
         url('../fonts/jura-demibold-webfont.svg#jurademibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'playbold';
    src: url('../fonts/play-bold-webfont.eot');
    src: url('../fonts/play-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/play-bold-webfont.woff') format('woff'),
         url('../fonts/play-bold-webfont.ttf') format('truetype'),
         url('../fonts/play-bold-webfont.svg#playbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

body div h3{
	font-family: 'playbold';
	font-size:1.45em;
	text-align:center;
	margin-bottom:10px;
	padding-top:60px;
	color:#fff;
}


body div p{
	font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align:center;
	margin: 4px auto;
	color:#fff;
}

body div .caption {
	margin-bottom:60px;
	color:yellow;
}

body div a{
	font-family:georgia;
	font-style: italic;
	color:yellow;
}

body div a:hover{
	color:orange;
}
body div a:visited{
	color:red;
}

body div {
	width:300px;
	height:300px;
	background-color:#990033;
	margin:150px auto;
	border-radius:150px;
	-webkit-box-shadow: 20px 20px 5px 0px rgba(0,0,0,0.50);
	-moz-box-shadow: 20px 20px 5px 0px rgba(0,0,0,0.50);
	box-shadow: 20px 20px 5px 0px rgba(0,0,0,0.50); 
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:0.85; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:0.85; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:0.85; } }

.fade-in {
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;
 
	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
 
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}
 
.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}

video {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  background: url(../images/code.jpg) no-repeat;
  background-size: cover;
  -webkit-transition: 1s opacity;
  transition: 1s opacity;
}
user agent stylesheetvideo {
  object-fit: contain;
}

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {}