@charset "UTF-8";
/* Jesus Uriarte Portfolio Website (style.css) */
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
	*{
		outline:none;
		border:none;
	}

.clearfix:after{
		content:".";
		display:block;
		height:0;
		clear:both;
		visibility:hidden;
	}

.clearfix{
		display:inline-table;
	}

* html .clearfix {
	height:1%;
	}

.clearfix {
	display:block;
	}

* 	{
    margin: 0px;
    outline: 0px none;
    padding: 0px;
	}

body{
	background: #edede9;
	border:none;
	margin:0;
	position:relative;
	}

#oasGolfBg{
	background: #000000;
}

.wrapper{
	height:100%;
	position:relative;
	}

	.holeContainer{
		position: relative;
		float:left;
		width: 360px;
		height: 510px;
		border: solid 1px #fff;
		padding: 10px;
		background: #08192d;
		margin: 40px;
		box-shadow: 2px 5px 10px rgba(255, 255, 255, 0.6);
	}

	.holeContainer > img {
		font-family: 'Roboto:100', sans-serif;
		color: #d2f38b;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.holeContainer > .holeDetails{
		background: rgba(15, 10, 90, .3);
		margin: 0 0 0 5px;
		width: 350px;
		height: 70px;
		position: absolute;
		top: 25px;
		z-index: 1;
	}

.holeContainer > .holeDetails > h1 {
	text-transform: none;
	width: 300px;
	text-align: left;
	padding: 5px 15px;
	font-family: 'Roboto:100', sans-serif;
	font-size: 32px;
	color: #f4b947;
	opacity: .7;
	position: absolute;
	top: 0px;
	z-index: 1;
}

.holeContainer > .holeDetails > h2 {
	width: 300px;
	text-align: left;
	padding: 5px 15px;
	margin: 0px;
	font-family: 'Roboto:100', sans-serif;
	color: #d2f38b;
	opacity: .7;
	position: absolute;
	top: 32px;
	z-index: 1;
}


/* **************** */
/* Game Screenshots	 */
.OAS_screenshots{
	padding: 0 20px;
	background: #edede9;
}

.OASvideoBg{
	text-align: center;
	height:450px;
	background-image: url("../images/imgHeaderBg.png");
	background-size: cover;
	background-repeat: repeat-x;
	background-position: center;
}

.imgLogo, .imgLogo h2{
	margin: 25px 0 0 0;
	color: #ffffff;
	text-align: center;
}

.imgLogo img{
	height: 300px;
	margin: 25px 0 0 0;
}

.alsoLogo, .alsoLogo h2{
	margin: 25px 0 0 0;
	color: #ffffff;
	text-align: center;
}

.alsoLogo img{
	height: 300px;
	margin: 25px 0 0 0;
}


.youTubeVideo{
	padding:50px 0 0 0;
}

.downloadButtons{
	text-align: center;
}

.islandMystScreenshots{
	text-align: center;
}

.islandMystScreenshots > img{
	margin:15px;
	border: solid 1px #fff;
	padding: 10px;
	background: #08192d;
	margin: 40px;
	box-shadow: 2px 5px 10px rgba(3, 38, 65, 0.6);
}

/* **************** */
.container-top{
	background:url(../images/headerTopBg3.jpg) 50% 0 repeat fixed;
	background-color:#000;
	text-decoration:none;
	width:100%;
	height:100%;
	margin:0;
	position:relative;
	}

.sliderBox{
	width:980px;
	margin:auto;
	color:#fff;
	vertical-align:middle;
	position:relative;
	}

#label{
	margin-top:35px;
	}


h1{
	font-family: 'Roboto:100', sans-serif;
	text-transform:uppercase;
	padding:25px;
	position:relative;
	color:#d2f38b;
	font-size: 3em;
	text-align:center;
	}

h2{
	font-family: 'Roboto:100', sans-serif;
	font-weight:300;
	color:#042b72;
	font-size: 24px;
	margin: 0 0 15px 0;
	}

h3{
	font-family: 'Roboto:100', sans-serif;
	font-weight:200;
	color: #fff;
	font-size: 16px;
	text-align:left;
	padding: 10px 0 10px 0;

}

h4{
	font-family: 'Raleway', sans-serif;
	font-weight:100;
	color: #91a0a7;
	font-size: 14px;
	text-align:left;
	}

#divider{
	margin-bottom:35px;
	width:960px;
	margin-left:auto;
	margin-right:auto;
	}

.oasTitles h2
{
	padding: 25px 0 0 25px;
	color: #000000;
}


.oasTitlesCourse > h2
{
	padding: 25px 0 0 25px;
	color: #fff;
}

.oasTitlesCourseFR{

}

.fingerrushfootball{
	margin: 0 auto;
	text-align: center;
	float: left;
	position: static;
}

.fingerrushfootball > .oasTitlesCourseFR > h2
{
	font-size: 22px;
	padding: 25px 0 0 25px;
	color: #fff;
}
/*-------------------
Header with Navbar
---------------------*/
.container-header{
	text-align: center;;
	z-index:99;
	position:relative;
	width:100%;
	margin:0px auto 0px auto;
height: 147px;
	}

#header{
	font-size: 28px;
	margin:auto;
	height:50px;
	width:90%;
	position:relative;
	}

#name{
	position:relative;
	font-family: 'Amaranth', sans-serif;
	color: #fdffd1;
	height:0px; float: left;
	padding: 5px 0 0 0;
	}


#title{
	font-size:14px;
	color:#ff932a;
	padding:32px 0 0 20px;
	}

/*-----------------
Navigation bar
-------------------*/

ul{
	margin:0;
	padding:0;
	text-decoration:none;
	}

.sticky{
		position:fixed;
		width:100%;
		left:0;
		top:0;
		z-index:100;
		border-top:0;
	}

nav{
	z-index:99;
	font-size: 14px;
	float:right;
	margin:5px 0px 0px 0px;
	color:#f5ad4f;
	text-decoration:none;
	}

nav li{
	display:inline-block;
	color:#ef0000;
	list-style-type:none;
	text-decoration:none;
	padding:10px 0 0 0px;
	margin:0px 0px 0px -5px;
	}

nav li a{
	font-family: 'Raleway', sans-serif;
	padding:16px 14px 15px 14px;
	text-align:center;
	color: #fba234;
	text-decoration:none;
	margin:0px;
	}

nav li a:hover,
nav li a.selected {
	opacity:.95;
	color: #fff;
	background: #1b2632;
	text-decoration:none;
	border-bottom: solid 1px #f5ad4f;
	}


/*----------------------
Container with content
-----------------------*/
.container-content-flash{
		margin:auto;
		position:relative;
		width:90%;
		padding:25px 0 0 0;
		height:100%;
		display: flex;
		align-content: flex-start;
		flex-flow: row wrap;

	}
.flashTitles{
	margin: 25px 0 0 35px;
}

.thumbBlank{
	width:225px;
	float:left;
	padding: 10px;
	margin: 2px 60px 40px 30px;
}

.container-content{
		z-index:-45;
		margin:0px auto;
		width:90%;
		height:100%;
		display: flex;
		align-content: flex-start;
		flex-flow: row wrap;
	}

.resumeContainer{
	font-family: 'Roboto:100', sans-serif;
	margin-top:13px;
	margin-left:auto;
	margin-right:auto;
	width:820px;
	height:100%;
	position:relative;
	}

/*-------------------------
Gallery thumbnail and link
--------------------------*/
@keyframes moveInAnimation {
  0% {
    bottom: -1em;
    opacity: 0;
  }

  100% {
    bottom: 0em;
    opacity: 1;
  }
}

#thumb{
		width:225px;
    float:left;
		border: solid 1px #fff;
		padding: 10px;
		background: #08192d;
    margin: 40px;
		box-shadow: 2px 5px 10px rgba(3, 38, 65, 0.6);
		transition: box-shadow .35s ease-out, transform .3s ease-out, opacity .2s ease-out;
		animation: moveInAnimation .5s ease-out;
	}

#thumb:hover{
		box-shadow: 2px 5px 30px rgba(5, 93, 168, 0.6);
	  transform: translate(0, -4px);
	  transition: box-shadow .35s ease-out, transform .3s ease-out, opacity .2s ease-out;
}


#thumb > .picture > img {
	width: 225px;
}

#thumb > .labels{

	}

#thumb img{
  margin-top:5px;
	transform: scale(1);
	-webkit-transition: 0.10s linear all;
	transition: 0.10s linear all;
	}
/*
#thumb img:hover{
		opacity:.65;
	transform: scale(1.05);
	-webkit-transition: 0.10s linear all;
	transition: 0.10s linear all;
	}
*/
#thumb a{
		text-decoration:none;
		color:#333;
	}

//////////////////////////////////////////////////
.game{
		width:225px;
    float:left;
		border: solid 1px #fff;
		padding: 10px;
		background: #08192d;
    margin: 2px 60px 40px 0;
		box-shadow: 2px 5px 10px rgba(3, 38, 65, 0.6);
		transition: box-shadow .35s ease-out, transform .3s ease-out, opacity .2s ease-out;
		animation: moveInAnimation .5s ease-out;
	}

.game:hover{
		box-shadow: 2px 5px 30px rgba(5, 93, 168, 0.6);
	  transform: translate(0, -4px);
	  transition: box-shadow .35s ease-out, transform .3s ease-out, opacity .2s ease-out;
}



.game > .picture > img {
	width: 225px;
}

.game > .labels{

	}

.game img{
    margin-top:5px;
	transform: scale(1);
	-webkit-transition: 0.10s linear all;
	transition: 0.10s linear all;
	}

.game a{
		text-decoration:none;
		color:#333;
	}
//////////////////////////////////////////////////

/*Desktop 1440px or more */
@media only screen
and (max-width : 1440px){

}

/* Laptop 1280px */
@media only screen
and (max-width : 1280px){
	#header{
	font-size: 28px;
	margin:auto;
	height:50px;
	}
	.container-top{height:240px;}
}

/* iPad Landscape 1024 */
@media only screen
and (max-width : 1024px)
 {
	.container-content{width:90%;}
	.container-top{height:180px;}
	.container-top-resume{height:180px;width:1024px;}
	.container-top-print{height:180px;width:1024px;}
	h1{padding-top:50px;font-size:36;}
	.sliderBox{margin-left:auto;margin-right:auto;}
}

/* iPad Portrait 768 */
@media only screen
and (max-width : 768px) {
	.container-content{width:90%;height:2100px}
    .container-top{height:180px;width:720px;}
	.container-top-resume{height:180px;width:720px;}
	.container-top-print{height:180px;width:720px;}
	#header{width:90%}
	h1{font-size:28px;padding-top:82px;width:720px;}
	.sliderbox{width:720px;padding-top:35px;margin:0px;}
}

/* Smartphone Landscape 640*/
@media only screen
and (max-width: 640px){
	.container-content{width:640px;height:3070px}
    .container-top{height:180px;width:640px;}
	.container-top-resume{height:180px;width:640px;}
	.container-top-print{height:180px;width:640px;}
	.resumeContainer{width:100%;}
	.sliderbox{width:640px;padding-top:35px;margin:0px;}
	#thumb{margin-left:50px;}
	h1{font-size:28px;padding-top:82px;width:580px;}
	#header{width:640px;}
	nav{width:640px;float:left;}
	#name{visibility:hidden;}
}

/* Smartphone Portrait */
@media only screen
and (max-width : 360px){
	h2{visibility:hidden;}
	.container-header{opacity:.97;}
	#divider > img{width:180px;}
	.container-content{width:360px;margin-top:220px;height:100%;}
	.container-content-flash{width:360px;margin-top:180px;height:6200px}
	.container-top{display:none;height:0px;margin-top:240px;}
	.container-top-print{visibility:hidden;height:0px;}
	.container-top-resume{visibility:hidden;height:0px;}
	.resumeContainer{margin-top:280px; width:100%;}
    #header{width:360px;margin:0;}
	nav{float:none;width:360px;background:#0e1439;}
	nav li{display:block;padding:13px;width:360px;text-align:center;}
	nav li a{border-right:none;border-bottom:none;padding: 0px 0px;}
	#name{visibility:visible;text-align:center;margin-bottom:50px;width:360px;}
	nav li a:hover, nav li a:visited,
	nav li a.selected {
	opacity:.85;
	color: #fff;
	text-decoration:none;
	}
}