body, html {
	margin: 0;
	padding:0;
	font-family: 'Century Gothic', sans-serif;
	font-size: .9vw;
	background-color: #f1f1f1;
}
#wrapper{
	width: 77%;
	margin-left: 15%;
	margin-right: 15%;
	overflow: hidden;
}

/*--------------TITLES---------------*/
h3 {margin:0;padding:0;
	font-weight: normal;
	font-size: 1.1vw;}

/*--------------MAINBOXES---------------*/
.box{
	background-color: #d9dae9;
	overflow: hidden;
	float: left;
	position: relative;
	background-position: center center;
	background-repeat: no-repeat;
	width: 22%;
	margin: 1%;
	border-radius: 3px;
	background-size: 100%;
}
.tinyBox{
	width: 10%;
	margin: 1%; border-radius: 3px;}
.bigBox{
	width: 46%;
}


/*--------------IMAGEBOX---------------*/
.imageBox{
	position: relative;
	width: 0px;
	height: 0px;
	z-index: 15;
	float: left;
}
#ti{
	position: absolute;
	background:url('images/morgan.jpg') center center no-repeat #d9dae9; background-size: 100% 100%;
	transition: all .3s ease;
	display: none;
	opacity: 0;
}
.closeTi{
	text-align:center;
	padding-top:4.5%;
	color:#9194a6;
	font-size:135%;}
.a{
	background-image:url('images/morgan.jpg') !important;
}
.b{
	background-image:url('images/al.jpg') !important
}
.active{
	display: block !important;
}
.display{
	opacity: 1 !important;
}


/*-------TEXT-BOXES-AND-HOVERS---------*/
.textSlide{
	top:0;left:0;
	position: absolute;
	margin-left:-105%;
	transition: all .6s ease;
	margin-top: 47%;
	width: 90%;
	height: 48%;
	padding: 5%;
	background: rgba(9,13,37,0.85);
}
.textLine{
	top:0;left:0;
	position: absolute;
	margin-left:105%;
	transition: all .6s ease;
	width: 100%;
	margin-top: 43%;
	height: 4%;
	background: #f1f1f1;
}
.slideCenter{margin-top:52.5%;}
.lineCenter{margin-top:48.5%;}
.slideRight{
	margin-left: 105%;
}
.lineRight{
	margin-left:-105%;
}
.slideTiny{height: 90%;margin: 0;opacity:0;}
.slideBot{margin-top:105%;}.slideTop{margin-top:-105%;}
.textSlideBig{
	top:0;left:0;
	position: absolute;
	background: rgba(9,13,37,0.85);
	height: 35%;
	width: 39%;
	padding: 5%;
	margin-top: -105%;
	transition: all .6s ease;
}
.textLineBig{
	top:0;left:0;position: absolute;
	background: #f1f1f1;
	height: 56%;
	width: 2%;
	margin-left: 49%;
	margin-top: 105%;
	transition: all .6s ease;
}
.textLineBigHR{
	top:0;left:0;position: absolute;
	background: #f1f1f1;
	height: 4%;
	width: 51%;
	margin-left: 105%;
	margin-top: 26.5%;
	transition: all .6s ease;
}
.boxHover{top:0;left:0;position:absolute;padding:0;width: 100%;height: 100%;opacity:0;background: rgb(38,40,43);transition: all 0.5s ease;}
.box:hover .boxHover, .bigBox:hover .boxHover, .tinyBox:hover .boxHover{margin:0;opacity:.3;}
.box:hover .textSlide, .bigBox:hover .textSlide, .box:hover .textLine, .bigBox:hover .textLine{margin-left: 0;}
.bigBox:hover .textSlideBig, .bigBox:hover .textLineBig{margin-top: 0;}
.bigBox:hover .textLineBigHR{margin-left: 0;}
.tinyBox:hover .slideTiny{margin: 0;opacity:1;}


/*----------------CLEAR-AND-MISC--------------------*/
.clear{	clear: both;margin: 0;padding: 0;}
a{color: #dee0ff;}
#hiddenMobileTest{float:right;}


/*-----------MOBILE AND SMALLER SCREEN--------------*/
@media screen and (max-width: 900px) {
	#wrapper{width:98%;margin-left:1%;margin-right:1%;}
	.box{width:49%; margin:.5%;}
	.tinyBox{width:24%; margin:.5%;}
	.bigBox{width:99%; margin:.5%;}
	.textSlideBig{width:39.5%;}
	.textLine{height:2%; margin-top: 45%}
	.textLineBig{width:1%;margin-left:49.5%;}
	.textLineBigHR{height:2%;width:50.5%;margin-top: 27.8%;}
	body{font-size: 2.2vw;}
	h2{font-size: 5.5vw;}
	.title{font-size: 5.8vw;}
	h3{font-size: 2.8vw;}
	.ti{margin-left:.5%; width: 99%; margin-right:.5%; float: left;}
	.clearBig{clear:both;}
	.slideCenter{margin-top:52%;}
	.lineCenter{margin-top:50%;}
}
@media screen
and (max-width: 500px) {
	#hiddenMobileTest{float:left;}
}