@import url(https://fonts.googleapis.com/css?family=Rock+Salt);
html, body

{ 
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#45484d+0,000000+100;Black+3D+%231 */
background: #1C1C1C;

}

h1
{
	color: red;
	font-family: 'Rock Salt', cursive;
	font-size: 30px;
	
	
}
#header
{
	position: relative;
	height: 150px;
	width: 100%;
	border: 0px solid yellow;
	background-image: url('../img/logo.png');
	background-size: 30%;
	background-repeat: no-repeat;
	background-position: center center;
	
}
.hiddendivclass{
	position: absolute;
    height:auto;
    width:50%;
    background-color:rgba(0,0,0,0.9);
	left: 50%;
	top: 50%;
	margin-left: -28%;
	display: inline-block;
	color: white;
	padding: 55px;
	display: none;
	 z-index: 99;
	   -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
	text-align: left;
}
.xmark
{
	position: absolute;
	height: 50px;
	width: 50px;
	border: 0px solid yellow;
	right: 5px;
	top: 5px;
	background: url('../img/x.png');
	background-size: cover;
	background-position: center center;
	
	
}
td
{
	display: inline-block;
	
	
}
#wrapper

{
	position: absolute;
	height: auto;
	width: 98%;
	border: 0px solid yellow;
	left: 50%;
	margin-left: -49%;
	text-align: center;
	display: inline;
}

.tiles

{
	position: relative;
	height: 400px;
	width: 400px;
	margin: 20px;
	display: inline-block;
	background: #fff;
     /* Firefox */
    -moz-transition: all 0.5s ease-out;
    /* WebKit */
    -webkit-transition: all 0.5s ease-out;
    /* Opera */
    -o-transition: all 0.5s ease-out;
    /* Standard */
    transition: all 0.5s ease-out;

}
	
.tiles:hover

{
	position: relative;
	height: 400px;
	width: 400px;
	margin: 20px;
	display: inline-block;
	background: ;
     /* Firefox */
    -moz-transition: all 0.5s ease-out;
    /* WebKit */
    -webkit-transition: all 0.5s ease-out;
    /* Opera */
    -o-transition: all 0.5s ease-out;
    /* Standard */
    transition: all 0.5s ease-out;

}

.tiles:focus

{
	position: relative;
	height: 400px;
	width: 400px;
	margin: 20px;
	display: inline-block;
     /* Firefox */
    -moz-transition: all 0.5s ease-out;
    /* WebKit */
    -webkit-transition: all 0.5s ease-out;
    /* Opera */
    -o-transition: all 0.5s ease-out;
    /* Standard */
    transition: all 0.5s ease-out;

}

.tile1
{
	position: relative;
	background: #610f00;
	background-image:  url('../img/png/businessman65.png'),url('../img/skulls.png');
	height: 100%;
	width: 100%;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center center;
	     /* Firefox */
    -moz-transition: all 0.5s ease-out;
    /* WebKit */
    -webkit-transition: all 0.5s ease-out;
    /* Opera */
    -o-transition: all 0.5s ease-out;
    /* Standard */
    transition: all 0.5s ease-out;
	
}
.tile1:hover
{
	position: relative;
	background: #bd0600;
	background-image:url('../img/png/businessman65.png'),url('../img/skulls.png');
	height: 100%;
	width: 100%;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center center;
	     /* Firefox */
    -moz-transition: all 0.5s ease-out;
    /* WebKit */
    -webkit-transition: all 0.5s ease-out;
    /* Opera */
    -o-transition: all 0.5s ease-out;
    /* Standard */
    transition: all 0.5s ease-out;
}
.tile2
{
	position: relative;
	background: #783400;
	background-image: url('../img/png/shirt8.png'),url('../img/skulls.png');
	height: 100%;
	width: 100%;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center center;
		     /* Firefox */
    -moz-transition: all 0.5s ease-out;
    /* WebKit */
    -webkit-transition: all 0.5s ease-out;
    /* Opera */
    -o-transition: all 0.5s ease-out;
    /* Standard */
    transition: all 0.5s ease-out;
	
}
.tile2:hover
{
	position: relative;
	background: #bd5800;
	background-image: url('../img/png/shirt8.png'),url('../img/skulls.png');
	height: 100%;
	width: 100%;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center center;
		     /* Firefox */
    -moz-transition: all 0.5s ease-out;
    /* WebKit */
    -webkit-transition: all 0.5s ease-out;
    /* Opera */
    -o-transition: all 0.5s ease-out;
    /* Standard */
    transition: all 0.5s ease-out;
	
}
.tile3
{
	position: relative;
	background: #665800;
	background-image: url('../img/png/technological.png'),url('../img/skulls.png');
	height: 100%;
	width: 100%;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center center;
		     /* Firefox */
    -moz-transition: all 0.5s ease-out;
    /* WebKit */
    -webkit-transition: all 0.5s ease-out;
    /* Opera */
    -o-transition: all 0.5s ease-out;
    /* Standard */
    transition: all 0.5s ease-out;
	
}
.tile3:hover
{
	position: relative;
	background: #8a8a00;
	background-image: url('../img/png/technological.png'),url('../img/skulls.png');
	height: 100%;
	width: 100%;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center center;
		     /* Firefox */
    -moz-transition: all 0.5s ease-out;
    /* WebKit */
    -webkit-transition: all 0.5s ease-out;
    /* Opera */
    -o-transition: all 0.5s ease-out;
    /* Standard */
    transition: all 0.5s ease-out;
	
}
.tile4
{
	position: relative;
	background: #146300;
	background-image: url('../img/png/scissors70.png'),url('../img/skulls.png');
	height: 100%;
	width: 100%;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center center;
		     /* Firefox */
    -moz-transition: all 0.5s ease-out;
    /* WebKit */
    -webkit-transition: all 0.5s ease-out;
    /* Opera */
    -o-transition: all 0.5s ease-out;
    /* Standard */
    transition: all 0.5s ease-out;
	
}
.tile4:hover
{
	position: relative;
	background: #199600;
	background-image: url('../img/png/scissors70.png'),url('../img/skulls.png');
	height: 100%;
	width: 100%;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center center;
		     /* Firefox */
    -moz-transition: all 0.5s ease-out;
    /* WebKit */
    -webkit-transition: all 0.5s ease-out;
    /* Opera */
    -o-transition: all 0.5s ease-out;
    /* Standard */
    transition: all 0.5s ease-out;
	
}
.tile5
{
	position: relative;
	background: #006132;
	background-image: url('../img/png/web-programming.png'),url('../img/skulls.png');
	height: 100%;
	width: 100%;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center center;
		     /* Firefox */
    -moz-transition: all 0.5s ease-out;
    /* WebKit */
    -webkit-transition: all 0.5s ease-out;
    /* Opera */
    -o-transition: all 0.5s ease-out;
    /* Standard */
    transition: all 0.5s ease-out;
	
}
.tile5:hover
{
	position: relative;
	background: #008a63;
	background-image: url('../img/png/web-programming.png'),url('../img/skulls.png');
	height: 100%;
	width: 100%;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center center;
		     /* Firefox */
    -moz-transition: all 0.5s ease-out;
    /* WebKit */
    -webkit-transition: all 0.5s ease-out;
    /* Opera */
    -o-transition: all 0.5s ease-out;
    /* Standard */
    transition: all 0.5s ease-out;
	
}
.tile6
{
	position: relative;
	background: #003a59;
	background-image: url('../img/png/sedan3.png'),url('../img/skulls.png');
	height: 100%;
	width: 100%;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center center;
		     /* Firefox */
    -moz-transition: all 0.5s ease-out;
    /* WebKit */
    -webkit-transition: all 0.5s ease-out;
    /* Opera */
    -o-transition: all 0.5s ease-out;
    /* Standard */
    transition: all 0.5s ease-out;
	
}
.tile6:hover
{
	position: relative;
	background: #004e8a;
	background-image: url('../img/png/sedan3.png'),url('../img/skulls.png');
	height: 100%;
	width: 100%;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center center;
		     /* Firefox */
    -moz-transition: all 0.5s ease-out;
    /* WebKit */
    -webkit-transition: all 0.5s ease-out;
    /* Opera */
    -o-transition: all 0.5s ease-out;
    /* Standard */
    transition: all 0.5s ease-out;
	
}
.tile7
{
	position: relative;
	background: #000566;
	background-image: url('../img/png/price tag1.png'),url('../img/skulls.png');
	height: 100%;
	width: 100%;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center center;
		     /* Firefox */
    -moz-transition: all 0.5s ease-out;
    /* WebKit */
    -webkit-transition: all 0.5s ease-out;
    /* Opera */
    -o-transition: all 0.5s ease-out;
    /* Standard */
    transition: all 0.5s ease-out;
	
}
.tile7:hover
{
	position: relative;
	background: #00089c;
	background-image: url('../img/png/price tag1.png'),url('../img/skulls.png');
	height: 100%;
	width: 100%;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center center;
		     /* Firefox */
    -moz-transition: all 0.5s ease-out;
    /* WebKit */
    -webkit-transition: all 0.5s ease-out;
    /* Opera */
    -o-transition: all 0.5s ease-out;
    /* Standard */
    transition: all 0.5s ease-out;
	
}
.tile8
{
	position: relative;
	background: #43005e;
	background-image: url('../img/png/photo137.png'),url('../img/skulls.png');
	height: 100%;
	width: 100%;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center center;
		     /* Firefox */
    -moz-transition: all 0.5s ease-out;
    /* WebKit */
    -webkit-transition: all 0.5s ease-out;
    /* Opera */
    -o-transition: all 0.5s ease-out;
    /* Standard */
    transition: all 0.5s ease-out;
	
}
.tile8:hover
{
	position: relative;
	background: #77008f;
	background-image: url('../img/png/photo137.png'),url('../img/skulls.png');
	height: 100%;
	width: 100%;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center center;
		     /* Firefox */
    -moz-transition: all 0.5s ease-out;
    /* WebKit */
    -webkit-transition: all 0.5s ease-out;
    /* Opera */
    -o-transition: all 0.5s ease-out;
    /* Standard */
    transition: all 0.5s ease-out;
	
}
.tile9
{
	position: relative;
	background: #5e0032;
	background-image: url('../img/png/letter110.png'),url('../img/skulls.png');
	height: 100%;
	width: 100%;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center center;
		     /* Firefox */
    -moz-transition: all 0.5s ease-out;
    /* WebKit */
    -webkit-transition: all 0.5s ease-out;
    /* Opera */
    -o-transition: all 0.5s ease-out;
    /* Standard */
    transition: all 0.5s ease-out;
	
}
.tile9:hover
{
	position: relative;
	background: #87003d;
	background-image: url('../img/png/letter110.png'),url('../img/skulls.png');
	height: 100%;
	width: 100%;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center center;
		     /* Firefox */
    -moz-transition: all 0.5s ease-out;
    /* WebKit */
    -webkit-transition: all 0.5s ease-out;
    /* Opera */
    -o-transition: all 0.5s ease-out;
    /* Standard */
    transition: all 0.5s ease-out;
	
}


.tile10
{
	position: relative;
	background: #5c0017;
	background-image: url('../img/png/diamond-icon.png'),url('../img/skulls.png');
	height: 100%;
	width: 100%;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center center;
		     /* Firefox */
    -moz-transition: all 0.5s ease-out;
    /* WebKit */
    -webkit-transition: all 0.5s ease-out;
    /* Opera */
    -o-transition: all 0.5s ease-out;
    /* Standard */
    transition: all 0.5s ease-out;
	
}
.tile10:hover
{
	position: relative;
	background: #99001f;
	background-image: url('../img/png/diamond-icon.png'),url('../img/skulls.png');
	height: 100%;
	width: 100%;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center center;
		     /* Firefox */
    -moz-transition: all 0.5s ease-out;
    /* WebKit */
    -webkit-transition: all 0.5s ease-out;
    /* Opera */
    -o-transition: all 0.5s ease-out;
    /* Standard */
    transition: all 0.5s ease-out;
	
}
.text
{
	position: absolute;
	color: rgba(255,255,255,0);
	font-size: 70px;
	text-decoration: none;
	text-align: center;
	line-height: 400px;
	vertical-align: middle;
	border: 0px solid yellow;
	height: 100%;
	width: 100%;
	left: 0px;
	font-family: 'Rock Salt', cursive;
		     /* Firefox */
    -moz-transition: all 0.5s ease-out;
    /* WebKit */
    -webkit-transition: all 0.5s ease-out;
    /* Opera */
    -o-transition: all 0.5s ease-out;
    /* Standard */
    transition: all 0.5s ease-out;
	
	
}
.text:hover
{
	position: absolute;
	color: rgba(255,255,255,1);
	font-size: 70px;
	text-decoration: none;
	text-align: center;
	line-height: 400px;
	vertical-align: middle;
	border: 0px solid yellow;
	height: 100%;
	width: 100%;
	left: 0px;
	font-family: 'Rock Salt', cursive;
			     /* Firefox */
    -moz-transition: all 0.5s ease-out;
    /* WebKit */
    -webkit-transition: all 0.5s ease-out;
    /* Opera */
    -o-transition: all 0.5s ease-out;
    /* Standard */
    transition: all 0.5s ease-out;
}
.text:focus
{
	position: absolute;
	color: rgba(255,255,255,1);
	font-size: 70px;
	text-decoration: none;
	text-align: center;
	line-height: 400px;
	vertical-align: middle;
	border: 0px solid yellow;
	height: 100%;
	width: 100%;
	left: 0px;
	font-family: 'Rock Salt', cursive;
			     /* Firefox */
    -moz-transition: all 0.5s ease-out;
    /* WebKit */
    -webkit-transition: all 0.5s ease-out;
    /* Opera */
    -o-transition: all 0.5s ease-out;
    /* Standard */
    transition: all 0.5s ease-out;
}
.text:hover
{
	position: absolute;
	color: rgba(255,255,255,1);
	font-size: 50px;
	text-decoration: none;
	text-align: center;
	line-height: 400px;
	vertical-align: middle;
	border: 0px solid yellow;
	height: 100%;
	width: 100%;
	left: 0px;
	font-family: 'Rock Salt', cursive;
			     /* Firefox */
    -moz-transition: all 0.5s ease-out;
    /* WebKit */
    -webkit-transition: all 0.5s ease-out;
    /* Opera */
    -o-transition: all 0.5s ease-out;
    /* Standard */
    transition: all 0.5s ease-out;
	
}.text:active
{
	position: absolute;
	color: rgba(255,255,255,1);
	font-size: 50px;
	text-decoration: none;
	text-align: center;
	line-height: 400px;
	vertical-align: middle;
	border: 0px solid yellow;
	height: 100%;
	width: 100%;
	left: 0px;
	font-family: 'Rock Salt', cursive;
			     /* Firefox */
    -moz-transition: all 0.5s ease-out;
    /* WebKit */
    -webkit-transition: all 0.5s ease-out;
    /* Opera */
    -o-transition: all 0.5s ease-out;
    /* Standard */
    transition: all 0.5s ease-out;
}
#footer
{
	position: relative;
	right: 0px;
	color: white;
	
}