/***
 ***		CSS rules for One-page website
 ***		Inspired by Alberto Hartzet and its great CSS One-page sample (http://codepen.io/hrtzt/pen/NPZKRN)
 ***/
 
  html, body, .page {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  transition: all 0.6s cubic-bezier(.5, .2, .2, 1.1);
  -webkit-transition: all .6s cubic-bezier(.5, .2, .2, 1.1);
  -moz-transition: all .6s cubic-bezier(.5, .2, .2, 1.1);
  -o-transition: all .6s cubic-bezier(.5, .2, .2, 1.1);  
  color: #fff;
  overflow: hidden; 
}

* {
  font-family: 'Roboto', 'arial', sans-serif;
  /* font-family: 'open sans', 'arial', 'helvetica', sans-serif;*/
}

.page {
  position: absolute;
}

#p1 {
  left: 0;
}

#p2, #p3, #p4, #p5 {
  left: 200%;
}

#p1 { background: #444; }
#p2 { background: tomato; }
#p3 { background: darkorange; }
#p4 { background: darkgreen; }
#p5 { background: #245396; }

#t2:target #p2,
#t3:target #p3,
#t4:target #p4,
#t5:target #p5 {
  transform: translateX(-185%);
  -webkit-transform: translateX(-185%);
  -moz-transform: translateX(-185%);
  -o-transform: translateX(-185%);
  transition-delay: .1s !important;
}

#t2:target #p1, 
#t3:target #p1,
#t4:target #p1,
#t5:target #p1 {
  background: black;
}


#t2:target #p1 .hint, 
#t3:target #p1 .hint,
#t4:target #p1 .hint,
#t5:target #p1 .hint {
	display:none;
}


#t2:target #p1 .icon, 
#t3:target #p1 .icon,
#t4:target #p1 .icon,
#t5:target #p1 .icon {
  -webkit-filter: blur(3px);
  opacity:0.3;
}

.icon {
  color: #fff;
  font-size: 40px;
  display: block;
}

ul .icon:hover {
  opacity: 0.5;
}

.page .icon .title{
  line-height: 2;
}

#t2:target ul .icon,
#t3:target ul .icon,
#t4:target ul .icon,
#t5:target ul .icon {
  transform: scale(.6);
  -webkit-transform: scale(.6);
  -moz-transform: scale(.6);
  -o-transform: scale(.6);
  transition-delay: .25s;
}


#t2:target #t2icon,
#t3:target #t3icon,
#t4:target #t4icon,
#t5:target #t5icon
 {
  transform: scale(1.5) !important;
  -webkit-transform: scale(1.5) !important;
  -moz-transform: scale(1.5) !important;
  -o-transform: scale(1.5) !important;
  
  animation: highlight 1s ease;  
  transform: translateX(20px);
}

ul {
  position: fixed;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: 380px;
  width: 15%;
  padding: 0;
  text-align: center;
 }

#menu .icon {
  margin: 30px 0;
  transition: all .5s ease-out !important;
  -webkit-transition: all .5s ease-out;
  -moz-transition: all .5s ease-out;
  -o-transition: all .5s ease-out;
}

a {
  text-decoration: none;
}

.title, .subtitle, .hint {
  display: block;
}

.title {
  font-size: 38px;
}


.hint {
  font-size: 16px;
}

#p4 .hint {
  display: inherit !important;
}

.hint a {
  color: yellow;
  transition: all 250ms ease-out;
  -webkit-transition: all 250ms ease-out;
  -moz-transition: all 250ms ease-out;
  -o-transition: all 250ms ease-out;
}

.hint a:hover {
  color: #FFF;
}

.line-trough {
  text-decoration: line-through;
}

.page .icon {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 10%;
  left: 0;
  width: 470px;
  height: 550px;
  margin: auto;
  text-align: center;
  font-size: 80px;
  line-height: 1.1;
  transform: translateX(360%);
  -webkit-transform: translateX(360%);
  -moz-transform: translateX(360%);
  -o-transform: translateX(360%);
  transition: all .5s cubic-bezier(.25, 1, .5, 1.25);
  -webkit-transition: all .5s cubic-bezier(.25, 1, .5, 1.25);
  -moz-transition: all .5s cubic-bezier(.25, 1, .5, 1.25);
  -o-transition: all .5s cubic-bezier(.25, 1, .5, 1.25);
}


.page#p1 .icon {
  height: 640px;
}

.page#p1 .icon {
  transform: translateX(10%) !important;
}

#t2:target .page#p2 .icon,
#t3:target .page#p3 .icon,
#t4:target .page#p4 .icon,
#t5:target .page#p5 .icon {
  transform: translateX(0) !important;
  -webkit-transform: translateX(0) !important;
  -moz-transform: translateX(0) !important;
  -o-transform: translateX(0) !important;
  transition-delay: 1s;
}

/*** 	Customs
 ***/
#p1 .title {
	text-transform:uppercase;
}
.subtitle {
	color:#ccc;
/*	border-top:1px solid #FFFFFF;*/
	font-size: 24px;
	line-height: 1;
	padding-bottom:20px;
	text-transform:lowercase;
}
.hint .contact, .hint .objective {
	font-size:120%;
	padding-left:40px;
	margin-left:20px;
	text-align:justify;
	padding-bottom:5px;
}
.hint .objective {
	font-size:100%;
}
.hint p {
	display:block;
	text-align:justify;
	font-size:100%;
}

.hint div {
	display:block;
}
.hint .contact span, .hint .pad {
		padding-right:15px;
}
.hint span.pad {
		width:25px;
}
.subicon {
	padding-right:0px;
	margin-left:-40px;
	width:50px;
	
    -ms-transform: scale(2,2); /* IE 9 */
    -webkit-transform: scale(2,2); /* Safari */
    transform: scale(2,2);
}
img.subicon {
    transform: scale(0.7,0.7);
	margin-left:-74px;
	padding-right:30px;
	float:left;
}
.hint .fa-male {
	margin-left:-35px;
}

/*
.hint .objective h3{
	text-align:center;
}
*/
.q {
	font-style:italic;
	text-align:left;
}
#p3 h3 {
	display:none;
}
.qr {
/*	float:left;
	*/
	position:relative;
	right:-200px;
	top:-50px;
	z-index:101;
	margin-bottom:-200px;
	
	float:right;
}

.photo {
/*	width:180px;
	height:180px;*/
	margin-bottom:-25px;
}