@charset "utf-8";

@font-face {
    font-family: 'geosanslightregular';
    src: url('fonts/geosanslight-webfont.woff2') format('woff2'),
         url('fonts/geosanslight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {margin:0; padding:0;}
body {background:#FFF; font-family:geosanslightregular, sans-serif; font-size:17px;}

header {display:block; position:relative; width:100%; overflow:hidden;}
header logo a {display:block; width:143px; height:138px; max-width:80px; max-height:78px; background:url('../img/logo.png') no-repeat center center; background-size:100% 100%; margin:40px; text-indent:-9999px;}

main {display:table; position:relative; width:100%; height:calc(100vh - 300px);}
main section {display:table-cell; width:100%; vertical-align:middle;}
main section:not(#slides) article {display:block; width:100%; max-width:480px; margin:0 auto; padding:0 30px; opacity:.7;}
main section article p {font-family:geosanslightregular, sans-serif; font-weight:300; font-size:20px; letter-spacing:1px; margin:0 0 30px 0;}
main section article a {color:#000; text-decoration:none;}
body.about main section article {margin-top:-30px!important;}
body.about main section article p {line-height:30px; letter-spacing:1px; text-align:center;}
body.contact main section article {line-height:30px; letter-spacing:1px; text-align:center;} 

body.collection header {position:fixed; top:0; left:0; width:120px; z-index:999;}
body.collection main {display:block; position:relative; min-width:100%; overflow:hidden; height:calc(100vh); font-size:14px;}
body.collection main section#slides {display:table; width:100%;}
body.collection main section#slides article {display:table-cell; vertical-align:middle; text-align:center; position:relative; overflow:hidden; width:100%; min-width:calc(100vw); height:calc(100vh); padding-top:80px; padding-top:0;}
body.collection main section#slides article item {display:table; width:90%; margin:0 auto;}
body.collection main section#slides article item > * {display:table-cell; vertical-align:middle;}
body.collection main section#slides article item > pic {text-align:center; padding-right:20px;}
body.collection main section#slides article item > pic img {max-height:480px; max-width:90%;}
body.collection main section#slides article item desc {width:40%; text-align:left;}
body.collection main section#slides article item desc text {display:block; max-width:320px; padding-bottom:20px; font-family:'Roboto', sans-serif; font-style:normal; font-weight:300;}
body.collection main section#slides article item desc text > * {display:block; opacity:.8;}
body.collection main section#slides article item desc text > :not(materials) {margin-bottom:20px;}
body.collection main section#slides article item desc text name {font-size:1.2em;}
body.collection main section#slides article item desc text name span {display:block; font-size:.8em;}
body.collection main section#slides article item desc text > info {font-size:.8em;}

body.collection main section#slides article item desc thumbs {display:table; width:100%; max-width:320px; margin-left:-5%;}
body.collection main section#slides article#slide-6 item desc thumbs {margin-left:-10%;}
body.collection main section#slides article item desc thumbs thumb {position:relative; display:table-cell; vertical-align:top; max-height:90px;}
body.collection main section#slides article item desc thumbs thumb img {width:100%; max-width:110%; cursor:pointer; overflow:hidden; position:absolute; clip:rect(0, 100px, 80px, 0);}
body.collection main section#slides article#slide-4 item desc thumbs thumb img {clip:rect(0, 110px, 100px, 0)}
body.collection main section#slides article#slide-3 item desc thumbs thumb:nth-child(3) img {width:75px;}
body.collection main section#slides article#slide-6 item desc thumbs thumb:nth-child(3) img {margin-top:-10px;}

arrow_left, arrow_right {content:''; display:inline-block; position:absolute; top:140px; width:200px; 
height:60vh; background:none; color:#4F81BD; opacity:.7; cursor:pointer; z-index:9999;}
arrow_left {left:0px;}
arrow_right {right:0px;}
arrow_left:before {content:''; display:none; width:24px; height:24px; border:2px solid #000; border-width:0 0 2px 2px; transform:rotate(45deg); position:relative; top:30%; left:40px;}
arrow_right:before {content:''; display:none; width:24px; height:24px; border:2px solid #000; border-width:2px 2px 0 0; transform:rotate(45deg); vertical-align:middle; position:relative; top:30%; left:120px;}
arrow_left:hover:before, arrow_right:hover:before {display:inline-block;}

article .info {display:inline-block; position:absolute; top:60px; right:60px; width:20px; height:20px; background:#000; border:2px solid #000; border-radius:50%; color:#FFF; text-align:center; text-decoration:none; font-family:Times New Roman, serif; font-weight:bold; font-size:20px; line-height:20px; opacity:.9;}
article .info:hover {color:#000; background:#FFF;}

footer {display:table; position:fixed; width:100%; overflow:hidden; bottom:0; font-size:14px; letter-spacing:2px; border-top:1px solid #CCC;}
nav {display:table-cell; width:50%; padding:20px 40px 40px; background:#FFF;}
footer nav:nth-of-type(2) ul {float:right; padding-top:10px;}
footer nav:nth-of-type(2) ul li a, header nav ul li a {display:block; text-indent:-9999px; width:18px; height:18px; margin:0 5px;}
nav ul {display:table;}
nav ul li {display:table-cell;}
nav ul li a {text-decoration:none; color:#000; opacity:.8;}
footer nav:nth-of-type(1) ul li:not(:first-child) a {margin-left:30px;}
footer nav ul li.active a {border-bottom:1px solid #CCC;}

nav ul li a.tw {background:url('../img/icon_tw.svg') no-repeat center center; background-size:100% 100%;}
nav ul li a.fb {background:url('../img/icon_fb.svg') no-repeat center center; background-size:100% 100%;}
nav ul li a.ig {background:url('../img/icon_ig.svg') no-repeat center center; background-size:100% 100%;}

@media screen and (max-width:960px) {
	arrow_right {height:40vh;}
	arrow_right:before {top:45%;}
}

@media screen and (max-width:480px) {
	/*header:before {content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100px; background:linear-gradient(to top, transparent, white);}*/
	header {display:block; position:relative; width:100%!important; overflow:hidden; background:transparent; background:linear-gradient(to top, transparent, white);}
	header nav {display:block; position:absolute; top:40px; right:40px; width:auto; padding:0; z-index:9999; background-color:transparent;}
	header nav ul li a {width:28px; height:28px;}
	
	body.about main section article {width:auto!important;}
	body.contact main section article {width:auto!important; padding:0 30px !important;}
	
	article .info {display:none;} 
	body.collection main {height:auto; overflow:hidden; margin-top:120px;}
	body.collection main section {margin-bottom:100px!important;}
	body.collection main section#slides {display:block; padding-bottom:30px;}
	body.collection main section#slides article {display:block; vertical-align:top; padding-top:10px; height:auto;}
	body.collection main section#slides article item > * {display:block; width:100%!important;}
	body.collection main section#slides article item > pic {padding:0;}
	body.collection main section#slides article item > pic img {max-width:100%;}
	body.collection main section#slides article item desc {position:relative; padding-top:80px;}
	body.collection main section#slides article item desc text > * {margin-bottom:5px!important;}
	body.collection main section#slides article item desc text > :not(name) {font-size:.8em;}
	
	body.collection main section#slides article item desc thumbs {margin:0 auto; width:100%!important; max-width:100%; overflow:auto; position:absolute; top:0; left:0;}
	body.collection main section#slides article#slide-4 item desc thumbs {top:-30px;}
	body.collection main section#slides article item desc thumbs thumb {padding:0 5px;}
	body.collection main section#slides article item desc thumbs thumb img {max-width:100%;}

	footer nav:nth-of-type(1) {position:fixed; bottom:0px; width:calc(100% - 40px); padding:0; background:#FFF; background:linear-gradient(to bottom, transparent, white);}
	footer nav:nth-of-type(1) ul {width:100%; padding:20px;}
	footer nav:nth-of-type(1) ul li {text-align:center;}
	footer nav:nth-of-type(1) ul li a {background:#FFF; border-radius:10px;}
}