/* Created by Jouri Jalving */

@font-face {
    font-family: 'Univers 45';
    src: url('../fonts/univers_45_light.eot');
    src: url('../fonts/univers_45_light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/univers_45_light.woff') format('woff'),
         url('../fonts/univers_45_light.ttf') format('truetype'),
         url('../fonts/univers_45_light.svg#univers_45_lightregular') format('svg');
    font-weight: 300;
    font-style: normal;

}

.preload *,
.preload *:after,
.preload *:before {
  -webkit-transition: none !important;
     -moz-transition: none !important;
      -ms-transition: none !important;
       -o-transition: none !important;
          transition: none !important;
}

html, body {
	height: 100%;
	width: 100%;
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
	background-color: #fff;
}
body {
	background-attachment:fixed;
	font: 300 11px 'Univers 45', Helvetica, sans-serif;
	color: #656565;
}
a {
	color: #656565;
	outline: none;
}
/*
.test {
	background-color: #f00;
	width: 20px;
	height: 100%;
}
.test img {
	height: 100%;
}
*/
/* CONTENT */
section.content {
	height: 100%;

	position: relative;
}
body.images section.content {
	width: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

/* HEADER */
header.main {
	position: fixed;
	width: 200px;
	top: 0; left: 0; bottom: 0;
	/*background: rgba(255,255,255,0.9);*/
	background-color: #fff;
	background: rgba(255,255,255,0.95);
	z-index: 1;
}
header.main .header {
	position: relative;
	z-index: 1;
}
header.main .logo {
	display: block;

	width: 100px;
	height: 48px;
	
	margin: 40px auto 15px auto;
	padding-bottom: 15px;
	
	border-bottom: solid 1px #e8e8e8;

	background: url('../images/logo.png') no-repeat 0px 0px;
	background: rgba(0,0,0,0) url('../images/logo.svg') no-repeat 0px 0px;
}

/* MENU */
nav.main {
	position: absolute;
	top: 60px;
	
	left: 0; right: 0; bottom: 0;
	
	padding: 50px 0 50px 50px;

	line-height: 25px;
	
	
	overflow-x: hidden;
	overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
nav.main a,
nav.main span {
	position: relative;
	display: block;
	color: #656565;
	white-space: nowrap;
	text-decoration: none;
	text-overflow: ellipsis;
}

nav.main > ul > li > a,
nav.main > ul > li > span {
	font-size: 13px;
	text-transform: uppercase;
	margin-top: 10px;
}


nav.main li.leaf > a,
nav.main li.branch > span {
	left: 20px;
}
nav.main li.leaf > a:before,
nav.main li.branch > span:before {
	content: " ";
	
	position: absolute;
	left: -12px;
	top: 50%;
	margin-top: -3px;
		
	width: 0; 
	height: 0; 
	
    border-width: 3px;
    border-color: transparent transparent transparent #7a7979;
    border-style: solid;
	
	-webkit-transition: -webkit-transform 200ms ease-in-out, margin 200ms ease-in-out, left 200ms ease-in-out; 
	   -moz-transition:    -moz-transform 200ms ease-in-out, margin 200ms ease-in-out, left 200ms ease-in-out;  
	    -ms-transition:     -ms-transform 200ms ease-in-out, margin 200ms ease-in-out, left 200ms ease-in-out;  
	     -o-transition:      -o-transform 200ms ease-in-out, margin 200ms ease-in-out, left 200ms ease-in-out;  
	        transition:         transform 200ms ease-in-out, margin 200ms ease-in-out, left 200ms ease-in-out;  
}
nav.main li.branch.expanded > span:before {
	margin-top: -1px;
	left: -14px;

	-webkit-transform: rotate(90deg);  
	   -moz-transform: rotate(90deg);  
	    -ms-transform: rotate(90deg);  
	     -o-transform: rotate(90deg);  
	        transform: rotate(90deg);  
}

nav.main li.active a,
nav.main li.active span {
	color: #c73657;
}
nav.main li.active > a:before,
nav.main li.active > span:before {
	border-left-color: #c73657;
}

/* FIX TO SLIDETOGGLE :BEFORE PSEUDE ELEMENT */
nav.main ul ul {
	margin-left: 15px;
}
nav.main > ul > li > ul {
	position: relative;
	left: -20px;
}



/* DASH LEAFS
nav.main li.leaf > a:before {
	content: "-";
	
	position: absolute;
	left: -12px;
	top: auto;
	margin-top: 0;
	
	border: none;
}
 */


/* PAGE */
#page {
	height: 100%;
	margin-left: 200px;
	background-color: #f8f8f8;	
}
#page .generalContent {
	padding: 40px 50px;
}
#page .generalContent h1 {
	margin-bottom: 15px;
	text-transform: uppercase;
}
#page .generalContent p {
	margin-bottom: 20px;
}

/* GALERY */

ul.gallery {
	display: block;
	position: relative;
	height: 100%;
	/*max-height: 600px;*/
	
	white-space: nowrap;
	font-size: 0;
	line-height: 0;	
}
ul.gallery li {
	position: relative;
	display: inline-block;
	height:100%;
    padding-right: 2px;
    
   	background: url('../images/loading-photo.gif') no-repeat center center;	
    background-size: 20px 20px;
}
ul.gallery li:last-child {
	padding-right: 0;
}
ul.gallery img {
	display: inline-block;

    height: 100%;
    vertical-align: middle;
    
    opacity: 0;
        
    -webkit-transition: opacity 500ms ease-out;
       -moz-transition: opacity 500ms ease-out;
        -ms-transition: opacity 500ms ease-out;
         -o-transition: opacity 500ms ease-out;
            transition: opacity 500ms ease-out;
}

/* FORM */
::-webkit-input-placeholder { /* WebKit browsers */
	color: #c6c5c5;
    color: rgba(0,0,0,0.35);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color: #c6c5c5;
    color: rgba(0,0,0,0.35);
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: #c6c5c5;
    color: rgba(0,0,0,0.35);
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
	color: #c6c5c5;
    color: rgba(0,0,0,0.35);
}

#page.contact {
	height: auto;
	min-height: 100%;
	background-image: url('../images/map.jpg');
    -webkit-background-size: cover;
   	   -moz-background-size: cover;	
   	   		background-size: cover;
	background-attachment: scroll;
}
#page.contact .form {
	float: left;
	width: 60%;
	max-width: 400px;
	margin-right: 8%;
	line-height: 18px;
}

#page.contact .info {
	float: left;
	width: 32%;
	line-height: 18px;
}
#page.contact .form input[type='text'],
#page.contact .form input[type='submit'],
#page.contact .form textarea {
	position: relative;

	height: 36px;
	margin-bottom: 10px;
	
	font: 300 12px 'Univers 45', Helvetica, sans-serif;
	
	border: none; border-radius: 0;
	background-color: #eeeded;

	box-sizing: border-box;
	-moz-box-sizing: border-box;
	
	-webkit-appearance: none;
	
    -webkit-transition: background 500ms ease-out;
       -moz-transition: background 500ms ease-out;
        -ms-transition: background 500ms ease-out;
         -o-transition: background 500ms ease-out;
            transition: background 500ms ease-out;
}
#page.contact .form input:disabled,
#page.contact .form textarea:disabled {
	color: #c6c5c5;
    color: rgba(0,0,0,0.35);
}
#page.contact .invalid input[type='text'],
#page.contact .invalid input[type='submit'],
#page.contact .invalid textarea {
	/*background-color: #ede0e3;*/
}
#page.contact form > div {
	position: relative;
}
#page.contact form > div.invalid:after {
	content: " ";

	display: block;
	position: absolute;
	right: 13px;
	top: 13px;
	width: 10px; height: 10px;
	
	background: url('../images/invalid.png') no-repeat center center;
	background: rgba(0,0,0,0) url('../images/invalid.svg') no-repeat center center;
}
#page.contact .form input[type='text'],
#page.contact .form textarea {
	width: 100%;
	padding-left: 10px;
}
#page.contact .form textarea {
	height: 120px;
	padding: 10px;
	max-width: 100%;
	min-width: 100%;
}
#page.contact .form input[type='submit'],
#page.contact .form .sent {
	display: inline-block;

	height: 32px;
	line-height: 32px;
	padding: 0 20px;
	margin-top: 10px;
	font-size: 12px;
	font-weight: bold;
	color: #fff;
	background-color: #c73657;
	
}
#page.contact .form .sent {
	padding: 0 15px 0 40px;
	background: url('../images/sent.png') no-repeat 6px 6px;
	background: rgba(0,0,0,0) url('../images/sent.svg') no-repeat 15px 8px;
	background-color: #3cc680;
}
#page.contact .form input[type='submit']:hover {
	cursor: pointer;
	background-color: #db4466;
}

#page.contact .errorMsg {
	margin-bottom: 20px;
	color: #c73657;
	font-weight: bold;
}

/* RETINA */
@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
	ul.gallery li {
		background-image: url('../images/loading-photo@2x.gif');	
	}
}

@media all and (max-width: 800px) {
	#page .generalContent {
		padding: 20px;
	}
	#page.contact .form,
	#page.contact .info {
		display: block;
		float: none;
		width: auto;
		max-width: none;
		margin: 0;
	}
	#page.contact .form {
		padding-bottom: 15px;
		margin-bottom: 20px;
		border-bottom: solid 1px #E6E5E5;
	}
}

/* MOBILE PHONES */
@media all and (max-width : 568px) { 
	header.main {
		top: 0; right: 0; left: 0;
		height: 70px;
		width: 100%;
		
		
		background-color: rgba(0,0,0,0.75);
		color: #fff;
	}
	header.main .logo {
		margin: 0; padding: 0;
		border: 0;
	}
	.menuButton {
		display: block;
		position: absolute;
		top: 19px; right: 19px;
	
		width: 32px;
		height: 32px;
	
		background: url('../images/mobile-menu.png') no-repeat 0px 0px;
		background: rgba(0,0,0,0) url('../images/mobile-menu.svg') no-repeat 0px 0px;
		
		cursor: pointer;
	}
	header.main .header {
		background-color: #fff;
		height: 50px;
		padding: 10px;
		overflow: visible;
	}
	nav.main {
		padding: 10px 10px 10px 10px; 
		line-height: 32px;
	}
	nav.main a, nav.main span {
		font-size: 14px;
	}
	nav.main > ul > li > a,
	nav.main > ul > li > span {
		color: #fff;
		font-size: 18px;
	}
	nav.main a,
	nav.main a:hover, 
	nav.main span {
		color: #fff;	
	}
	#page {
		height: -webkit-calc(100% - 70px);
		height:    -moz-calc(100% - 70px);
		height: 		calc(100% - 70px);
		margin-left: 0;
		padding-top: 70px;
	}
	#page .generalContent {
		padding: 10px;
	}
}
@media all and (min-width: 569px) {
	nav.main a:hover,
	nav.main .branch > span:hover {
		color: #c73657;
		cursor: pointer;
	}
	nav.main li.leaf > a:hover:before,
	nav.main li.branch > span:hover:before {
		border-left-color: #c73657;
	}
}