@CHARSET "ISO-8859-1";
/* Reset CSS
 * --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
}
a{
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}
table {
    border-spacing: 0;
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
strong{
	font-weight: bold;
}
ol,ul {
    list-style: none;
    margin:0;
    padding:0;
}
caption,th {
    text-align: left;

}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    margin:0;
    padding:0;
    color:#190d13;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border: 0;
}


/* Custom CSS
 * --------------------------------------- */
body{
	font-family: arial,helvetica;
	font-size: 10px;
	line-height: 17px;
	height: 200px;
}
img {
    max-width: 100%;
    width: auto\9; /* ie8 */
}

/* headers CSS
 * --------------------------------------- */
h1{
	position: absolute;
	text-align: center;
	width: 80%;
	left: 10%;
	top: 40%;
	font-weight: 600;
	font-size: 50px;
	line-height: 20px;
	height: 200px;
	color: #131112;
	z-index: 2;
	-webkit-animation: fadeIn 1.5s linear 0.5s both;
    -moz-animation: fadeIn 1.5s linear 0.5s both;
	-o-animation: fadeIn 1.5s linear 0.5s both;
	-ms-animation: fadeIn 1.5s linear 0.5s both;
	animation: fadeIn 1.5s linear 0.5s both;
}
 @-webkit-keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@-moz-keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@-o-keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@-ms-keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}

h1{
		-webkit-animation-delay: 0.5s;
	    -moz-animation-delay: 0.5s;
	    -o-animation-delay: 0.5s;
	    -ms-animation-delay: 0.5s;
	    animation-delay: 0.5s;
	} 
				@media all and (min-height:800px){
			h1 {
			font-size: 90px;
			top: 30%;
			}
		}

h5{
	width: 30%;
	padding-left: 35%;
	top: 10%;
}



/* Colin / Mike / Phil 1 CSS
 * --------------------------------------- */

	.slide-CMP1-left {
		position: absolute;
		left: 7%;
		top: 20%;
		z-index: 99;
	}


	.slide-CMP1-centre {
		position: absolute;
 		margin-left: auto;
 		margin-right: auto;
 		width: 100%;
		top: 20%;
	}


	.slide-CMP1-right {
		position: absolute;
		text-align: right;
		right: 7%;
		top:20%;
		z-index: 99;
	}
			.slide-CMP1-right cite {
			font-size: 10px;
			color: #777875;
		}


/* Colin / Mike / Phil 2 CSS
 * --------------------------------------- */

 	.slide-CMP2-top-right {
		position: absolute;
		text-align: left;
		right: 5%;
		top: 10%;
	}

	.slide-CMP2-text {
		position: absolute;
		text-align: left;
		left: 7%;
		top: 23%;
		width: 60%;
		color: #777875;
	}

	.title {
		font-size: 13px;
		color: #1a1a1a;
	}

	.slide-CMP2-Colintext {
	  font-family: times;
	  font-size: 17px;
	  line-height: 19px;
	  position: absolute;
	  left: 10%;
	  text-align: left;
	  color: #8e9095;
	}

	.slide-CMP2-Colinname {
		font-family: arial;
		font-size: 10px;
		position: absolute;
	  	left: 25%;
		text-align: left;
		color: #545454;
	}

	.slide-CMP2-Miketext {
	  font-family: times;
	  font-size: 25px;
	  line-height: 19px;
	  position: absolute;
	  left: 5%;
	  text-align: left;
	  color: #696a6b;
	}

	.slide-CMP2-Mikename {
		font-family: arial;
		font-size: 10px;
		position: absolute;
	  	left: 38%;
		text-align: left;
		color: #545454;
	}

	.slide-CMP2-Philtext {
	  font-family: times;
	  font-size: 15px;
	  line-height: 25px;
	  position: absolute;
	  left: 35%;
	  text-align: left;
	  color: #8e9095;
	}

	.slide-CMP2-Philname {
		font-family: arial;
		font-size: 10px;
		position: absolute;
	  	left: 50%;
		text-align: left;
		color: #545454;
	}

	.gap {
		font-size: 10px;
		line-height: 30px;
		color: #ffffff;
	}

	.hover {
		font-size: 8px;
		color: #d4d4d7;
	}


/* slide Buy / Burn 1 CSS
 * --------------------------------------- */

	.slide-BB-top-left {
	position: absolute;
	text-align: left;
	left: 5%;
	top: 5%;
	z-index: 2;
	}

	.slide-BB-top-left cite {
	font-size: 10px;
	color: #777875;
	}


/* slide Buy / Burn 2 CSS
 * --------------------------------------- */

	.slide-BB2-top-left {
	position: absolute;
	left: 11%;
	top: 20%;
	z-index: 2;
	}

	.slide-BB2-bottom-right {
	position: absolute;
	right: 20%;
	top: 53%;
	z-index: 99;
	}

	.slide-BB2-maintext {
		position: absolute;
	  	left: 2%;
	  	font-family: times;
	  	font-size: 12px;
	  	text-align: left;
	  	color: #3a3239;
	}

	.slide-BB2-text {
		position: absolute;
		text-align: left;
		left: 50%;
		top: 10%;
		width: 40%;
		color: #777875;
	}

	.slide-BB2-text-2 {
		position: absolute;
		text-align: left;
		left: 51%;
		top: 32%;
		width: 40%;
		color: #777875;
	}

	.slide-BB2-text-3 {
		position: absolute;
		text-align: left;
		left: 50%;
		top: 63%;
		width: 40%;
		color: #777875;
	}


/* Airball 1 CSS
 * --------------------------------------- */

	.slide-AB-right {
	position: absolute;
	text-align: right;
	right: 17%;
	top: 15%;
	z-index: 2;
	}

	.slide-AB-right cite {
	font-size: 10px;
	color: #777875;
	}

	.slide-AB-left {
	position: absolute;
	left: 5%;
	top: 15%;
	z-index: 2;
	}


/* Be Like Mike Rack CSS
 * --------------------------------------- */

	.slide-BLMR-centre {
		position: absolute;
		text-align: left;
 		margin-left: 30%;
		top: 17%;
	}
			.slide-BLMR-centre cite {
			font-size: 10px;
			color: #777875;
		}

/* I Have Seen the Face of God CSS
 * --------------------------------------- */

	.slide-FOG-left {
	position: absolute;
	left: 10%;
	top: 15%;
	z-index: 2;
	}

	.slide-FOG-text {
	position: absolute;
	text-align: left;
	right: 10%;
	top: 30%;
	width: 30%;
	color: #777875;
	}

	.slide-FOG-maintext {
		position: absolute;
	  	left: 4%;
	  	font-family: times;
	  	font-size: 12px;
	  	text-align: left;
	  	color: #3a3239;
	}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
  background-color: none;
}

@keyframes fade {
  from {opacity: 0.5} 
  to {opacity: 1}
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 14px;
  margin-top: -22px;
  color: #777875;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  user-select: none;
}

/* Position the "prev + next button" to the right */
.prev {
  left: 0;
  border-radius: 0 3px 3px 0;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.2);
  text-decoration: none;
}











/* images CSS
 * --------------------------------------- */

	.top-right-video {
	position: absolute;
	text-align: left;
	right: 30%;
	top: 5%;
	font-weight: 400;
	font-size: 12px;
	line-height: 20px;
	height: 200px;
	color: #777875;
	z-index: 2;
	}

	.top-right-video cite {
		font-size: 10px;
	}



/* info hover CSS
 * --------------------------------------- */
.tooltip {
	border-bottom: none; 
	color: #000000; 
	outline: none;
	cursor: help; 
	text-decoration: none;
	position: relative;
}

.tooltip span {
	margin-left: -999em;
	position: absolute;
}
.tooltip:hover span {
	border-radius: 0px 0px; -moz-border-radius: 0px; 
				-webkit-border-radius: 0px; 
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); 
				-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); 
				-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
	font-family: sans-serif;
	position: absolute; left: 0.5em; top: 1.5em; z-index: 99;
	letter-spacing: 0px;
	font-weight: 50;
	text-align: left;
	margin-left: 0; 
	width: 250px;
}
	@media all and (min-height:800px){
	.tooltip:hover span {
		display: none;
	}
}
.tooltip:hover img {
	border: 0; margin: -15px 0 0 -45px;
	float: left; position: absolute;
	width: 50px;
	height: 50px;
}
	@media all and (min-height:800px){
	.tooltip:hover img {
		display: none;
	}
}
.tooltip:hover em {
	font-family: sans-serif; font-size: 0.8em;
	text-align: left;
	display: block; 
	padding: 0.2em 0 0.2em 0.2em;
}
.classic { padding: 0.6em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }
.classic {background: rgba(255,255,255,0.9); border: none; }
.critical { background: #FFCCAA; border: 1px solid #FF3334;	}
.help { background: #9FDAEE; border: 1px solid #2BB0D7;	}
.info { background: #9FDAEE; border: 1px solid #2BB0D7;	}
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }


/* link CSS
 * --------------------------------------- */

.overlaid {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
}

.container:hover .overlaid {
  opacity: 1;
}

.underlaid {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 0%;
  left: 0%;
}

#mail {
  position:relative;
  margin: auto;
  width: 400px;
}

#mail img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}
#mail img.top:hover {
  opacity:0;
}
#mail mark {
	    opacity: .5;
	}

#instagram {
  position:relative;
  height: 15px;
  width:15px;
  margin: auto;
}

#instagram img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}
#instagram img.top:hover {
  opacity:0;
}
#instagram mark {
	    opacity: .5;
	}

#insta {
  position:relative;
  height: 15px;
  width:15px;
  margin-bottom: -15px;
}

#insta img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}
#insta img.top:hover {
  opacity:0;
}
#insta mark {
	    opacity: .5;
	}

#email {
  position:relative;
  height: 15px;
  width: 22px;
  margin-left: 20px;
}

#email img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}
#email img.top:hover {
  opacity:0;
}
#email mark {
	    opacity: .5;
	}

#cf {
  position:relative;
  width:650px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
  opacity:0;
}

a.pagelink:link {
	color: #000000;
	text-decoration:none;
}
a.pagelink:visited {
	color: #000000;
	text-decoration:none;
}
a.pagelink:hover {
	color: #777875;
	text-decoration:underline;
}
a.pagelink:img {
  border:none;
}


/* CV CSS
 * --------------------------------------- */

.space{
	height: 200px;
}


/* section CSS
 * --------------------------------------- */
.section{
	text-align:center;
}

.section-2{
	position: fixed;
	text-align: center;
}
.section-3{
			text-align:center;
			position: relative;
			padding-top: 100px; 
			padding-left: 200px;
}
@media all and (min-height:800px){
			.section-3 {
			padding-top: 150px; 
			}
		}


/*iframe 
* --------------------------------------- */

iframe { 
  outline:none;
  position:absolute;
}

#front {
  position:absolute;
  width:800px;
  height:500px;
  left:80px;
  background:none;  
}

/*information text
 * --------------------------------------- */

.overlay {
  cursor: help;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  opacity: 0;
  transition: .9s ease;
  background-color: none;
}

.container {
  position: relative;
  width: 100%;
}

.container:hover .overlay {
  opacity: 1;
}

h2 {
	font-family: arial;
	font-size: 10px;
	text-align: left;
}

h3 {
	font-family: times;
	font-size: 14px;
	text-align: left;
}

h4 {
	font-family: arial;
	font-size: 10px;
	text-align: right;
}



.normaltextright60 {
  color: #000000;
  font-family: arial;
  font-size: 12px;
  line-height: 17px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: right;
}

.normaltextright80 {
  color: #000000;
  font-family: arial;
  font-size: 12px;
  line-height: 17px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: right;
}

.normaltextleft60 {
  color: #000000;
  font-family: arial;
  font-size: 12px;
  line-height: 17px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: left;
}

.normaltextleft80 {
  color: #000000;
  font-family: arial;
  font-size: 12px;
  line-height: 17px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: left;
}

sup {
	font-size: 8px;
}

/* model
 * --------------------------------------- */

.w3-button{
	border:none;
	padding-top: 90px;
	padding-left: 20%;
	vertical-align:middle;
	overflow:hidden;
	text-decoration:none;
	color:inherit;
	background-color:inherit;
	font-size: 20px;
	text-align:center;
	cursor:pointer;
}
.w3-button{
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none
}   
.w3-button:disabled{
	cursor:not-allowed;
	opacity:0.3
}
	.w3-disabled *,:disabled *{
		pointer-events:none
	}

.w3-modal{
	z-index:3;
	display:none;
	padding-top:none;
	position:relative;
	left:0;
	top:0;
	width:100%;
	height:100%;
	overflow:none;
}

.w3-modal-content{
	overflow: none;
	margin:auto;
	background-color:#fff;
	position:absolute;
	outline:0;
    width: 100%;
	text-align: left;
	font-family: arial;
  	font-size: 12px;
  	line-height: 17px;
}

.modaltext {
  color: #000000;
  padding-left:20%;
  width: 60%;
  font-family: arial;
  font-size: 12px;
  line-height: 17px;
  position: relative;
  text-align: left;
  	-webkit-animation: fadeIn 1.5s linear 0.5s both;
    -moz-animation: fadeIn 1.5s linear 0.5s both;
	-o-animation: fadeIn 1.5s linear 0.5s both;
	-ms-animation: fadeIn 1.5s linear 0.5s both;
	animation: fadeIn 1.5s linear 0.5s both;
}
 @-webkit-keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@-moz-keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@-o-keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@-ms-keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
}

.w3-display-topright{
	position:absolute;
	right:0;
	top:0;
}

button:focus {
	outline:0;
}

/* footer */

.footer {
		position: absolute;
		bottom: 0%;
		height: auto;
		width: 100%;
		background-color: rgba(255,255,255,0.4);
		z-index: 999;
		padding-top: 10px;
		padding-left: 75px;
		padding-right: 75px;
		padding-bottom: 20px;
		border-top: 1px solid #e6e6e6;
		color: #000000;
	}