/* iPhone Mockup **************************************
	Homepage: http://nooshu.com
	Author: Matt Hobbs
******************************************************/

/* Page Reset ****************************************/
html, body, div, 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,
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;
	vertical-align: baseline;
	}
body {
	line-height: 1;
	width:100%;
	height:100%;
	font-family: Helvetica, Verdana, Geneva, Arial, Helvetica, sans-serif;
	background: #bfbfbf;
	}
ol, ul {list-style: none;}
table {
	border-collapse: separate;
	border-spacing: 0;
	}
caption, th, td {
	text-align: left;
	font-weight: 400;
	}
blockquote:before, blockquote:after,
q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
/* Basic Page Styling ********************************/
#wrapper {
	overflow: hidden;
	position:absolute;
	width: 100%;
	height:100%;
	background: #a9a9a9;
	min-width : 900px;
	min-height:600px;
	}
#logocontainer {
    position:absolute;
width:184px;
height:184px;
right:0px;
margin-right:4%;
margin-left:0;
margin-top:4%;
z-index:99;
cursor:pointer;
}
#logocontainer{
    -webkit-perspective: 1000;
    perspective: 1000;
}
.logo {
position:relative;
left:0px;
top:0px;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 400ms linear;
    -moz-transform-style: preserve-3d;
    -moz-transition: all 400ms linear;
	-ms-transform-style: preserve-3d;
    -ms-transition: all 400ms linear;
    transform-style: preserve-3d;
    transition: all 400ms linear;
}
#logocontainer.animation>.logo {
    -webkit-transform: rotateY(180deg);
    -moz-transform:    rotateY(180deg);
    -ms-transform:     rotateY(180deg);
	transform:     rotateY(180deg);
}
.hover .logo  .face {
	background-image: url(../images/logohover.png); 
    background-size:100% 100%;
}
#logocontainer.active>.logo {
    -webkit-transform: rotateY(180deg);
    -moz-transform:    rotateY(180deg);
    -ms-transform:     rotateY(180deg);
	transform:     rotateY(180deg);
}
.face {
    position: relative;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
	background-image: url(../images/logo.png); 
    background-size:100% 100%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
	z-index:8;
}
.face.back {
    display: block;
    -webkit-transform: rotateY(180deg);
    -moz-transform:    rotateY(180deg);
    -ms-transform:     rotateY(180deg);
	transform:     rotateY(180deg);
	z-index:7;
}
.back {
    position: absolute;
	width: 100%;
    height: 100%;
	background-image: url(../images/logohover.png); 
    background-size:100% 100%;
	top:0px;
	left:0px;
	z-index:6;
}
#ins {
	font-size: 0.75em;
	margin: 10px 0 6px;
	line-height: 1.25;
	text-align: center;
	}
#fake {
overflow: hidden;
z-index:2;
}
.content-box {
	position:absolute;
	width: 20%;
	height: 100%;
	
	}
#c1 {
background-image: url(../images/home.jpg); 
background-size:contain;
background-repeat:no-repeat;
background-position:bottom;
z-index:1;
left:0;
}


#homecontent{
position:absolute;
left:6.5%;
bottom:18%;
width:553px;
height:189px;
background-image: url(../images/homecontent.png); 
background-size:contain;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
padding-top:50px;
padding-bottom:50px;
padding-left:60px;
padding-right:45px;
}
#homecontent h1{
font-family:TempestaFive;
font-size: 19px;
font-weight:100;
color:#d91f26;
margin-bottom:2%;
}
#homecontent p{
font-family:MuseoSans;
font-size: 14px;
color:rgba(0,0,0,1);
color:#000;
line-height:23px;
}
#homecontent p img{
width:15px;
height:auto;
display:inline-block;
margin-bottom:1px;
}





#aboutcontent{
position:absolute;
right:6.5%;
top:28%;
width:828px;
height:382px;
background-image: url(../images/aboutcontent.png); 
background-size:contain;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
padding-top:68px;
padding-bottom:60px;
padding-left:83px;
padding-right:73px;
}
#aboutcontent h1{
font-family:TempestaFive;
font-size: 19px;
font-weight:100;
color:#d91f26;
margin-bottom:25px;
}
#aboutcontent p{
font-family:MuseoSans;
font-size: 14px;
color:rgba(0,0,0,1);
color:#000;
line-height:18px;
}
#aboutcontent p:not(:last-child){
margin-bottom:15px;
}






#vacancycontent{
position:absolute;
right:6.5%;
top:22%;
width:907px;
height:437px;
background-image: url(../images/vacancycontent.png); 
background-size:contain;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
padding-top:80px;
padding-bottom:55px;
padding-left:75px;
padding-right:65px;
}
#vacancycontent h1{
font-family:TempestaFive;
font-size: 19px;
font-weight:100;
color:#d91f26;
margin-bottom:12px;
}
#vacancycontent p{
font-family:MuseoSans;
font-size: 14px;
color:rgba(0,0,0,1);
color:#000;
line-height:23px;
}
#vacancymail{
font-family:MuseoSans;
font-size: 15px;
color:#d91f26;
text-decoration:none;
}
#vacancycontent p:not(:last-child){
margin-bottom:8px;
}




#contactcontent{
position:absolute;
right:6.5%;
bottom:20%;
width:488px;
height:223px;
background-image: url(../images/contactcontent.png); 
background-size:contain;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
padding-top:45px;
padding-bottom:40px;
padding-left:100px;
padding-right:80px;
}
#contactcontent p{
font-family:MuseoSans;
font-size: 15px;
text-align:right;
color:rgba(0,0,0,1);
color:#000;
line-height:20px;
}
#contactcontent p:nth-child(2){
font-family:MuseoSans;
font-size: 15px;
text-align:right;
color:rgba(0,0,0,1);
color:#000;
margin-top:10px;
line-height:20px;
}
#contactcontent p a{
font-family:MuseoSans;
font-size: 15px;
color:#d91f26;
text-decoration:none;
}
#contactcontent p span{
font-family:MuseoSans;
font-size: 15px;
color:#d91f26;
text-decoration:none;
}



















#c2 {
background-image: url(../images/about.jpg); 
background-size:contain;
background-repeat:no-repeat;
background-position:bottom;
left:25%;
z-index:1;
}
#c3 {
background-image: url(../images/projects.jpg); 
background-size:contain;
background-repeat:no-repeat;
background-position:bottom;
left:25%;
z-index:1;
}
#c4 {
background-image: url(../images/vacancy.jpg); 
background-size:contain;
background-repeat:no-repeat;
background-position:bottom;
left:25%;
z-index:1;
}
#c5 {
background-image: url(../images/contact.jpg); 
background-size:contain;
background-repeat:no-repeat;
background-position:bottom;
left:25%;
z-index:1;
}
footer{
background:rgba(0,0,0,0.8);
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:5.25%;
z-index:10;
}
#menu{
position:relative;
width:100%;
height:100%;
}
#panelIndicator{
position:relative;
height:100%;
width:87%;
display:table;
vertical-align:middle;
}
#panelIndicator img{
float:left;
height:100%;
width:auto;
}
#panelIndicator li {
	color: #fff;
	font-family:TempestaFive;
	font-size: 16px;
	width:16%;
	height:80%;
	cursor:pointer;
	text-align:center;
	display:table-cell;
	vertical-align:middle;
}

#panelIndicator li span{
display:block;
padding-top:3%;
padding-bottom:3%;
position:relative;
width:100%;
}
#panelIndicator li:last-child {
    color: #fff;
    font-family:TempestaFive;
    font-size: 16px;
    width:25%;
    height:80%;
    cursor:pointer;
    text-align:right;
    display:table-cell;
    vertical-align:middle;
}
#panelIndicator li:last-child a {
    color: #fff;
    font-family:TempestaFive;
    font-size: 16px;
    padding-right:25px;
    border:none;
    outline:none;
    text-decoration:none;
}

#panelIndicator li:hover {
	color:#d91f26;
}
#panelIndicator li:hover a {
    color:#d91f26;
}
#panelIndicator .active {
	color:#d91f26;
}
#menuarrows{
position:absolute;
top:0px;
right:0px;
width:12%;
height:100%;
background:transparent;
}
#menuarrows div{
float:left;
width:50%;
height:100%;
background-color:black;
cursor:pointer;
}
#menuarrows div:first-child{
background-image: url(../images/larrow.png); 
  -webkit-background-size: 9px 15px;
  -moz-background-size: 9px 15px;
  -o-background-size: 9px 15px;
  background-size: 9px 15px;
  background-position:center;
  background-repeat:no-repeat;
}
#menuarrows div:nth-child(2){
background-image: url(../images/rarrow.png); 
  -webkit-background-size: 9px 15px;
  -moz-background-size: 9px 15px;
  -o-background-size: 9px 15px;
  background-size: 9px 15px;
  background-position:center;
  background-repeat:no-repeat;
}
#menuarrows div:hover{
background-color:#d81f27;
}





	/*
.hasJS #wrapper {
	height: 400px;
	position: relative;
	}
	*/
.hasJS #fake {
position:relative;
	width: 500%;
	height: 100%;
	}
.hasJS .content-box {cursor: default;}
/* Panel Style ***************************************/
.content-box {

	}
.content-box .inner {
width:100%;
height:100%;
position:relative;
background:white;
}
.content-box .inner h1 {
	font-weight: 700;
	font-size: 0.83em;
	margin: 0 0 6px;
	line-height: 1.5;
	}
.content-box .inner p {
	font-size: 0.69em;
	line-height: 1.25;
	margin: 0 0 6px;
	}
.content-box .inner ul {
	list-style: disc;
	margin: 0 0 0 14px;
	}
.content-box .inner ol {
	list-style: decimal;
	margin: 0 0 0 18px;
	}
.content-box .inner ul li,
.content-box .inner ol li {
	font-size: 0.69em;
	line-height: 1.25;
	margin: 0 0 3px;
	}
/* No IE sorry */
::-moz-selection {


	}
::selection {


	}
/* Panel Indicators **********************************/
/* Positioned down the right but can be anywhere */
@font-face {
    font-family: 'TempestaFive';
    src: url('../fonts/PFTempestaFive.eot');
    src: url('../fonts/PFTempestaFive.eot?#iefix') format('embedded-opentype'),
         url('../fonts/PFTempestaFive.woff') format('woff'),
         url('../fonts/PFTempestaFive.ttf') format('truetype'),
         url('../fonts/PFTempestaFive.svg') format('svg');
}
@font-face {
    font-family: 'MuseoSans';
    src: url('../fonts/museosans100-webfont.eot');
    src: url('../fonts/museosans100-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/museosans100-webfont.woff') format('woff'),
         url('../fonts/museosans100-webfont.ttf') format('truetype'),
         url('../fonts/museosans100-webfont.svg#museo_sans100') format('svg');
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
#aboutcontent{
position:absolute;
right:6.5%;
top:18%;
width:60%;
background-image: url(../images/aboutcontent.png); 
background-size:100% 100%;
height:auto;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
padding-top:4%;
padding-bottom:4%;
padding-left:4%;
padding-right:4%;
}
#vacancycontent{
position:absolute;
right:6.5%;
top:2%;
width:60%;
background-image: url(../images/vacancycontent.png); 
background-size:100% 100%;
height:auto;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
padding-top:8%;
padding-bottom:4%;
padding-left:5%;
padding-right:5%;
}
}
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
#wrapper {
	overflow: hidden;
	position:absolute;
	width: 100%;
	height:100%;
	background: #bfbfbf;
	min-width : 768px;
	min-height:600px;
	}
.content_5{
width:90%;
margin-left:5%; 
position:absolute;
left:0px;
top:35%;
height:25%; 
overflow:auto;
padding-top:5px; 
clear:both; 
z-index:5;
}
#homecontent{
position:absolute;
left:6.5%;
bottom:25%;
width:60%;
background-image: url(../images/homecontent.png); 
background-size:100% 100%;
height:auto;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
padding-top:4%;
padding-bottom:4%;
padding-left:4%;
padding-right:4%;
}
#aboutcontent{
position:absolute;
right:6.5%;
top:22%;
width:60%;
background-image: url(../images/aboutcontent.png); 
background-size:100% 100%;
height:auto;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
padding-top:6%;
padding-bottom:6%;
padding-left:4%;
padding-right:4%;
}
#vacancycontent{
position:absolute;
right:6.5%;
top:9%;
width:60%;
background-image: url(../images/vacancycontent.png); 
background-size:100% 100%;
height:auto;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
padding-top:14%;
padding-bottom:4%;
padding-left:5%;
padding-right:5%;
}
#contactcontent{
position:absolute;
right:6.5%;
bottom:20%;
width:50%;
background-image: url(../images/contactcontent.png); 
background-size:100% 100%;
height:auto;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
padding-top:3%;
padding-bottom:3%;
padding-left:5%;
padding-right:4%;
}
}