html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
.overlaycaption,figure,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%; }
	
ol, ul  { list-style: none; }

:focus  { outline: 0; }

/* deleting the default appearence for form elements */
input[type=text], input[type=password], input[type=submit], textarea, select { -moz-appearance: none; -webkit-appearance: none; }

.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0;  height: 0; }
.clearfix { *display: inline-block; height: 1%; }
.clear { clear: both; display: block; font-size: 0;	height: 0; line-height: 0; width:100%; }

/* HTML5 display definitions */
article, aside, details, .overlaycaption, figure, footer, header, hgroup, menu, nav, section, dialog { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; visibility: hidden; }




/*---------------------------------------------- 
1. BASICS
------------------------------------------------*/
html {
	height: 100%;
	font-size: 100%;
	-webkit-text-size-adjust: 100%; /* Prevent iOS text size adjust on orientation change without disabling user zoom */
	-ms-text-size-adjust: 100%;
	position: relative;
	}

body {
font-family: 'Lato', sans-serif;
	text-align: left; 
	position: relative;
	background-color: #030E17;
	height: 100%;
	perspective: 1000;
	}
p{line-height: 40px;
    font-weight: 300;
	letter-spacing: 0.02em;
	font-size:16px; 
	line-height: 26px;}
::selection { background:#fff; color:#030E17; }
::-moz-selection { background:#fff; color:#030E17; }
::-webkit-selection { background:#fff; color:#030E17; }


/* Headings
---------------------------------------- */
h1, h2, h3, h4, h5, h6 {
font-family: 'Gasoek One', sans-serif;

	font-weight: 100;

	}
	.text-light h1, .text-light h2, .text-light h3, .text-light h4, .text-light h5, .text-light h6 { color: #ffffff; }

h1 { font-size: 90px; line-height: 104px; }
h2 { font-size: 70px; line-height: 82px; }
h3 { font-size: 44px; line-height: 54px; }
h4 { font-size: 28px; line-height: 38px; }
h5 { font-size: 21px; line-height: 29px; }
h6 { font-size: 16px; line-height: 24px; }

h1 b, h2 b, h3 b, h4 b, h5 b, h6 b, h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong { font-weight: 700; }
* { box-sizing: border-box; }



  a, a:active, a:focus{
      text-decoration: none;
      color: aqua;
        outline: none; /* Works in Firefox, Chrome, IE8 and above */ 
    }
a:hover{
    color: aquamarine;
	cursor: pointer;
}
/* ---- grid ---- */

.grid {
	position: absolute;
	width:100%;
	padding-left:40px;
	cursor: pointer;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;

}

@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
}

/* ---- .grid-item ---- */

.grid-item {
  float: left;
  width: 20%;
  height: 360px;
  border-color: hsla(0, 0%, 0%, 0.7);
	background-size:cover;
	background-position: center center;
	 opacity: 0.2;
	filter: grayscale(100%);
  
}
.grid-item:hover {
 opacity: 1;
		filter: grayscale(0%);
	 -webkit-transition: opacity 200ms ease-in-out , border 200ms ease-in-out;
  -moz-transition: opacity 200ms ease-in-out, border 200ms ease-in-out;
  -o-transition: opacity 200ms ease-in-out, border 200ms ease-in-out;
  transition:  opacity 200ms ease-in-out, border 200ms ease-in-out;

}
.grid-item-small {
  float: left;
  width: 40%;
  height: 360px;
  border-color: hsla(0, 0%, 0%, 0.7);
	background-size:cover;
	background-position: center center;
	 opacity: 0.2;
	filter: grayscale(100%);
  
}

.grid-item-small:hover {
 opacity: 1;
		filter: grayscale(0%);
	 -webkit-transition: opacity 200ms ease-in-out , border 200ms ease-in-out;
  -moz-transition: opacity 200ms ease-in-out, border 200ms ease-in-out;
  -o-transition: opacity 200ms ease-in-out, border 200ms ease-in-out;
  transition:  opacity 200ms ease-in-out, border 200ms ease-in-out;

}
   

.grid-item--height2 { height: 400px; }
.grid-item--width2 { width: 40%; }
.grid-item--height3 { height: 200px; }
.grid-item--width3 { width: 10%; }

.grid-item--gigante {
  width: 40%;
  height: 800px;
  background: #F80;
}

.tilt {
transform-style: preserve-3d;
position: relative;     
	
}
.tilt:hover{

	cursor: pointer;
-webkit-box-shadow: 0px 0px 33px 5px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 33px 5px rgba(0,0,0,0.75);
box-shadow: 0px 0px 33px 5px rgba(0,0,0,0.75);
transform: translateZ(500px) ;
	z-index: 9;
	transform: perspective(2000px);
    -webkit-transition: opacity 200ms ease-in-out , border 200ms ease-in-out;
  -moz-transition: opacity 200ms ease-in-out, border 200ms ease-in-out;
  -o-transition: opacity 200ms ease-in-out, border 200ms ease-in-out;
  transition:  opacity 200ms ease-in-out, border 200ms ease-in-out;
  
}
.sidebar{
	width:2px;
	height:100%;
	position: fixed;
	background-color: #030E17;
	z-index: 99;
}

.sbtx{
    transform: rotate(-90deg);
font-family: 'Montserrat', sans-serif;
    font-weight: 400;
	color:#959595;
bottom: 130px;
	letter-spacing: 3px;
	padding-top: 10px;
		left:-74px;
    position: absolute;
	height:40px;
	width:190px;
	text-transform: uppercase;
}
.logo{

	height:42px;
	width:42px;
}
.drb{
	position: absolute;
	width:42px;
	height:42px;
	bottom:0px;
padding:8px;
-webkit-animation: color-change2 40s infinite;
    -moz-animation: color-change2 40s infinite;
    -o-animation: color-change2 40s infinite;
    -ms-animation: color-change2 40s infinite;
    animation: color-change2 40s infinite;
}

@-webkit-keyframes color-change2 {
    0% { fill: #ef3737; }
    25% { fill: #1bc3eb; }
	  50% { fill: #f7306d; }
	 75% { fill: #1bebe3; }
    100% { fill: #ef3737;}
}
@-moz-keyframes color-change2 {
  0% { fill: #ef3737; }
    25% { fill: #1bc3eb; }
	  50% { fill: #f7306d; }
	 75% { fill: #1bebe3; }
    100% { fill: #ef3737;}
}
@-ms-keyframes color-change2 {
   0% { fill: #ef3737; }
    25% { fill: #1bc3eb; }
	  50% { fill: #f7306d; }
	 75% { fill: #1bebe3; }
    100% { fill: #ef3737;}
}
@-o-keyframes color-change2 {
    0% { fill: #ef3737; }
    25% { fill: #1bc3eb; }
	  50% { fill: #f7306d; }
	 75% { fill: #1bebe3; }
    100% { fill: #ef3737;}
}
@keyframes color-change2 {
    0% { fill: #ef3737; }
    25% { fill: #1bc3eb; }
	  50% { fill: #f7306d; }
	 75% { fill: #1bebe3; }
    100% { fill: #ef3737;}
}
@-webkit-keyframes color-change3 {
    0% { background: #ef3737; }
    25% { background: #1bc3eb; }
	  50% { background: #f7306d; }
	 75% { background: #1bebe3; }
    100% { background: #ef3737;}
}
@-moz-keyframes color-change3 {
  0% { background: #ef3737; }
    25% { background: #1bc3eb; }
	  50% { background: #f7306d; }
	 75% { background: #1bebe3; }
    100% { background: #ef3737;}
}
@-ms-keyframes color-change3 {
   0% { background: #ef3737; }
    25% { background: #1bc3eb; }
	  50% { background: #f7306d; }
	 75% { background: #1bebe3; }
    100% { background: #ef3737;}
}
@-o-keyframes color-change3 {
    0% { background: #ef3737; }
    25% { background: #1bc3eb; }
	  50% { background: #f7306d; }
	 75% { background: #1bebe3; }
    100% { background: #ef3737;}
}
@keyframes color-change3 {
    0% { background: #ef3737; }
    25% { background: #1bc3eb; }
	  50% { background: #f7306d; }
	 75% { background: #1bebe3; }
    100% { background: #ef3737;}
}

.p1{
	background-color: #d7d8fa;
    background-image: url(/assets/img/BGTEST.png);

}

.p2{
	background-color: #d7d8fa;
    background-image: url(/assets/img/thmb/hog_fr.png);

}
.p3{
	    background-image: url(/assets/img/thmb/fr_rob.png);

}
.p4{
	    background-image: url(/assets/img/thmb/fr_frills.png);

}
.p5{
	    background-image: url(/assets/img/thmb/rocksmall.gif);

}
.p6{
	    background-image: url(/assets/img/thmb/fr_dfi.png);

}
.p7{
	    background-image: url(/assets/img/thmb/fr_btf.png);

}
.p8{
	    background-image: url(/assets/img/thmb/fr_dfds.png);

}
.p9{
	    background-image: url(/assets/img/thmb/fr_float.png);

}
.p10{
	    background-image: url(/assets/img/thmb/fr_wonderment.png);

}
.p11{
	    background-image: url(/assets/img/thmb/fr_ccc.png);

}
.p12{
	    background-image: url(/assets/img/thmb/fr_openfarm.png);

}
.p13{
	    background-image: url(/assets/img/lb/random3.gif);

}
.p14{
	    background-image: url(/assets/img/thmb/fr_render.png);

}
.p15{
	    background-image: url(/assets/img/thmb/fr_sayings.png);

}
.p16{
	    background-image: url(/assets/img/thmb/fr_lightspeed.png);

}
.p17{
	    background-image: url(/assets/img/thmb/fr_icon.png);

}
.p18{
	    background-image: url(/assets/img/thmb/ff_mid.jpg);

}
.p19{
	    background-image: url(/assets/img/thmb/fr_pure.png);

}
.p20{
	    background-image: url(/assets/img/thmb/logomall.gif);

}
.p21{
	    background-image: url(/assets/img/thmb/ff_med.jpg);

}
.p22{
	    background-image: url(/assets/img/thmb/fr_showreel.png);

}

.svglogo{
	width:42px;
	padding:8px;
	-webkit-animation: color-change2 40s infinite;
    -moz-animation: color-change2 40s infinite;
    -o-animation: color-change2 40s infinite;
    -ms-animation: color-change2 40s infinite;
    animation: color-change2 40s infinite;
}
.svglogo:hover{
-webkit-animation: color-change3 1s infinite;
    -moz-animation: color-change3 1s infinite;
    -o-animation: color-change3 1s infinite;
    -ms-animation: color-change3 1s infinite;
    animation: color-change3 1s infinite;
}
.drb:hover{
-webkit-animation: color-change3 1s infinite;
    -moz-animation: color-change3 1s infinite;
    -o-animation: color-change3 1s infinite;
    -ms-animation: color-change3 1s infinite;
    animation: color-change3 1s infinite;
}
.bout{
	width:42px;
	height:42px;
		width:42px;
	padding:8px;
	-webkit-animation: color-change2 40s infinite;
    -moz-animation: color-change2 40s infinite;
    -o-animation: color-change2 40s infinite;
    -ms-animation: color-change2 40s infinite;
    animation: color-change2 40s infinite;
}
.bout:hover{
-webkit-animation: color-change3 1s infinite;
    -moz-animation: color-change3 1s infinite;
    -o-animation: color-change3 1s infinite;
    -ms-animation: color-change3 1s infinite;
    animation: color-change3 1s infinite;
}

.about{align-content: center;
text-align: center;}

.portbutton{
    position: relative;
   align-content: center;
    margin:auto;
    width:216px;

}
/* CSS */
.button-87 {
  margin-top: 20px;
  padding: 12px 24px;
  text-align: center;
width:100%;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  border-radius: 4px;
  display: block;
  border: 0px;
  font-weight: 700;
  box-shadow: 0px 0px 14px -7px #ef3737;
  background-image: linear-gradient(45deg, #FF512F 0%, #16cefa  51%, #FF512F  100%);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-87:hover {
  background-position: right center;
  /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}

.button-87:active {
  transform: scale(0.95);
}

.hidetilt{
    transform: inherit !important;
}