@CHARSET "ISO-8859-1";

/*
 * Web Fonts from colophon-foundry.org
 *
 * The fonts included in this stylesheet are subject to the End User License you purchased
 * from Colophon Foundry. The fonts are protected under domestic and international trademark and 
 * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
 * distributing this font software.
 *
 * (c) 2018 Colophon Foundry
 *
 * Licenced to Matthew McKenzie Seesaw Studio
 */

@font-face {
    font-family: 'basis-grotesque-bold-pro';
    src: url('../webfonts/basis-grotesque-bold-pro.eot');
    src: url('../webfonts/basis-grotesque-bold-pro.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/basis-grotesque-bold-pro.woff') format('woff'),
         url('../webfonts/basis-grotesque-bold-pro.woff2') format('woff2'),
         url('../webfonts/basis-grotesque-bold-pro.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}


/* 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;
}
table {
    border-spacing: 0;
}


caption,th {
    text-align: left;

}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
    margin:0;
    padding:0;
    color:#444;
}
h1 {
	line-height: 90px;
}


/* Sections
* --------------------------------------- */

.full-height{
	background-size:cover;
	background-position:center center;
}

.landing-home-1{background-image:url(../images/home-1.jpg);}
.landing-home-2{background-image:url(../images/home-2.jpg);}
.landing-home-3{background-image:url(../images/home-3.jpg);}

.capeschanck-1{background-image:url(../images/cape-schanck-01.jpg);}
.capeschanck-2{background-image:url(../images/cape-schanck-02.jpg);}
.capeschanck-3{background-image:url(../images/cape-schanck-03.jpg);}

.kloke-1{background-image:url(../images/kloke-1.jpg);}
.kloke-2{background-image:url(../images/kloke-2.jpg);}
.kloke-3{background-image:url(../images/kloke-3.jpg);}
.kloke-4{background-image:url(../images/kloke-4.jpg);}
.kloke-5{background-image:url(../images/kloke-5.jpg);}

.articolo-1{background-image:url(../images/articolo-1.jpg);}
.articolo-2{background-image:url(../images/articolo-2.jpg);}
.articolo-3{background-image:url(../images/articolo-3.jpg);}
.articolo-4{background-image:url(../images/articolo-4.jpg);}

.napoleon-1{background-image:url(../images/napoleon-1.jpg);}
.napoleon-2{background-image:url(../images/napoleon-2.jpg);}
.napoleon-3{background-image:url(../images/napoleon-3.jpg);}

.gordon-1{background-image:url(../images/gordon-1.jpg);}

.roseneath-1{background-image:url(../images/roseneath-01.jpg);}
.roseneath-2{background-image:url(../images/roseneath-02.jpg);}
.roseneath-3{background-image:url(../images/roseneath-03.jpg);}
.roseneath-4{background-image:url(../images/roseneath-04.jpg);}
.roseneath-5{background-image:url(../images/roseneath-05.jpg);}
.roseneath-6{background-image:url(../images/roseneath-06.jpg);}
.roseneath-7{background-image:url(../images/roseneath-07.jpg);}

.robe-1{background-image:url(../images/robe-1.jpg);}
.robe-2{background-image:url(../images/robe-2.jpg);}

.rowe-1{background-image:url(../images/rowe-01.jpg);}

.aesop-1{background-image:url(../images/Aesop-Myer-01.jpg);}
.aesop-2{background-image:url(../images/Aesop-Myer-02.jpg);}
.aesop-3{background-image:url(../images/Aesop-Myer-03.jpg);}
.aesop-4{background-image:url(../images/Aesop-Myer-04.jpg);}

.armadillo-1{
	background-image:url(../images/Armadillo-01.jpg);
	background-position: bottom center;
}
.huntingtower-1{
	background-image:url(../images/Huntingtower.jpg);
	
}


.bowens-1{background-image:url(../images/Bowens-01.jpg);}
.bowens-2{background-image:url(../images/Bowens-02.jpg);}
.bowens-3{background-image:url(../images/Bowens-03.jpg);}
.bowens-4{background-image:url(../images/Bowens-04.jpg);}
.bowens-5{background-image:url(../images/Bowens-05.jpg);}

.milan-articolo-1{background-image:url(../images/Articolo-Milan-01.jpg);}
.milan-articolo-2{background-image:url(../images/Articolo-Milan-02.jpg); background-position: center center;}
.milan-articolo-3{background-image:url(../images/Articolo-Milan-03.jpg);}
.milan-articolo-4{background-image:url(../images/Articolo-Milan-04.jpg);}
.milan-articolo-5{background-image:url(../images/Articolo-Milan-05.jpg);}




/* Custom CSS
 * --------------------------------------- */

body{
	font-family: 'basis-grotesque-bold-pro', arial, sans-serif;
	color: #000000;
}

.section{
	text-align:center;
}

.wrap{
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	position: relative;
}


h1{
	font-size: 90px;
	margin: 0.1em 0 0.4em 0;
	color:#ffffff;
}


h2{
	font-size: 38px;
	color:#ffffff;
	line-height:54px;
}

h2 a{
	color:#ffffff;
	text-decoration:none;
}

a{
	color:#ffffff;
}

a:visited{
	color:#ffffff !important;
}

a:hover{
	opacity:0.8;
}
	

p{
	font-size: 1.25em;
	padding:0.5em 0 ;
}

/* GENERAL */

/* border */

#btop, #bbottom, #bleft, #bright {
	background: #ffffff;
	position: fixed;
	z-index:999;
}
#bleft, #bright {
	top: 0; bottom: 0;
	width: 15px;
}
#bleft { left: 0; }
#bright { right: 0; }

#btop, #bbottom {
	left: 0; right: 0;
	height: 15px;
}
#btop { top: 0; }
#bbottom { bottom: 0; }

/*slide nav */

.fp-slidesNav.bottom{
	bottom:auto;
}

.project-label{
	float:left;
	color:#ffffff;
	padding:4px;
	text-transform:capitalize;
}

.fp-slidesNav{
	border-bottom:2px solid #ffffff;
	position: absolute;
    z-index: 300;
    opacity: 1;
    left: 40px !important;
	right:auto;
	top:55%;
	-webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
	transform-origin: center left;
}

.fp-slidesNav.static{
	top:50%;
}

.fp-slidesNav ul li{
	color:#ffffff;
	margin: 4px 2px;
}

.fp-slidesNav ul {
  list-style-type: none;
  margin-left: 0;
	float:left;
}

.fp-slidesNav ul > li {
  counter-increment: customlistcounter;
}

.fp-slidesNav ul > li:before {
  content: counter(customlistcounter) " ";
  font-weight: bold;
  float: left;
  width: 1em;
}

.fp-slidesNav ol:first-child {
  counter-reset: customlistcounter;
}

#fp-nav ul li a span, .fp-slidesNav ul li a span, #fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span{
	height: 100%;
    width: 100%;
    margin: 0;
    border-radius: 0;
    top: 4px;
    left: 0px;
	opacity:0;
}

#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span{
    margin: 0;
    border-radius: 0;
}




/* buttons */

.button{
	clear:both;
	display:block;
}

.top-fixed-button{
	font-size:20px;
	position:absolute;
	z-index:880;
	top:25px;
	width:auto;
	left:0;
	right:0;
	display:block;
	text-align:center;
}
.top-fixed-button a{
	border-bottom:1px solid #ffffff;
}

/*studio */

.about-wrap{
	column-count: 2;
	text-align:left;
	column-gap: 100px;
}

.about-wrap p{
	display:inline-block;
}

.about{
	width: 70%;
	margin: 0 auto;
}

.intro p{
	width: 50%;
	margin: 0 auto;
	font-size: 1.5em;
}


/* landing */



.menu-actions.show .top-fixed-button, 
.project-actions.show .top-fixed-button, 
.menu-actions .top-fixed-button, 
.project-actions .top-fixed-button,
.menu-actions.show .bottom-fixed-logo, 
.project-actions.show .bottom-fixed-logo, 
.menu-actions .bottom-fixed-logo, 
.project-actions .bottom-fixed-logo{
  transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -webkit-transition: all 0.25s ease-in-out;
}


.menu-actions .top-fixed-button{ opacity: 0; visibility: hidden; }
.menu-actions.show .top-fixed-button{ opacity: 1; visibility: visible; }
.project-actions .top-fixed-button{ opacity: 0; visibility: hidden; }
.project-actions.show .top-fixed-button{ opacity: 1; visibility: visible; }

.menu-actions .bottom-fixed-logo{ opacity: 0; }
.menu-actions.show .bottom-fixed-logo{ opacity: 1; }
.project-actions .bottom-fixed-logo{ opacity: 0; }
.project-actions.show .bottom-fixed-logo{ opacity: 1; }

#fixed-logo{
	position: absolute;
    z-index: 800;
    top: 50%;
	transform:translateY(-50%);
    left: 0;
	right:0;
	margin:0 auto;
	width:200px;
}

#fixed-logo img{
	display:block;
	width:200px;
}

/* projects */

.fixed-title{
	position: absolute;
    z-index: 100;
    top: 50%;
	transform:translateY(-50%);
    left: 0;
	right:0;
	text-align:center;
}

.bottom-fixed-logo{
	position: absolute;
    z-index: 800;
	bottom:25px;
    left: 0;
	right:0;
	margin:0 auto;
	width:144px;
}


.bottom-fixed-logo img{
	display:block;
	width:144px;
}

.fp-controlArrow.fp-prev{
	display:none;
}

.fp-controlArrow.fp-next{
	border:none;
	background-image:url(../images/logo.svg);
	background-size:contain;
	background-repeat:no-repeat;
	width:50px;
	height:80px;
	z-index:860;
	right:8px;
}

.fp-controlArrow.fp-next.static{ pointer-events: none;}

#section1 .fp-controlArrow.fp-next, #section2 .fp-controlArrow.fp-next, #section1 .fp-slidesNav, #section2 .fp-slidesNav{
	display:none;
}


/* TABLET & MOBILE */

	
@media only screen and (max-width: 1024px)  {
	.about-wrap{
		column-count: 1;
		text-align:center;
	}
	 .fp-slidesNav.bottom{
		display:none !important;
	}
	
}

@media only screen and (max-width: 480px)  {
	h1{
		font-size:42px;
		margin:0 0 0.1em 0;
		line-height: 50px;arm
	}
	h2{
		font-size:30px;
		line-height:44px;
	}
	p{
		font-size:13px;
	}
	.fp-controlArrow.fp-next{
		right:0;
	}
	#fixed-logo{
		width:160px;
	}
	#fixed-logo img{
		width:160px;
	}
	.bottom-fixed-logo{
		width:84px;
	}
	.bottom-fixed-logo img{
		width:84px;
	}
	.about{
		width:80%;
	}
}

@media only screen and (max-width: 320px)  {
	h1{
		font-size:36px;
		margin: 0;
	}
	h2{
		font-size:24px;
		line-height:40px;
	}
	p{
		font-size:12px;
	}
	#fixed-logo{
		width:140px;
	}
	#fixed-logo img{
		width:140px;
	}
	
}