/* BASE */

	body {
		width: 100%;
		height: 100%;
		overflow: hidden;		
		font-family: 'TOBritishLight', Helvetica, Arial, sans-serif;
		font-size: 2em;
		line-height: 1.15em;
		margin: 0;
		padding: 0;
		background-color: black;
		-webkit-font-smoothing: antialiased;
	}

/* TYPOGRAPHY */

	@font-face {
	    font-family: 'TOBritishLight';
	    src:    url('../fonts/TOBritish-Light.eot'),
	            url('../fonts/TOBritish-Light-Web.woff') format('woff'),
	            url('../fonts/TOBritish-Light-Web.woff2') format('woff2');
	    font-weight: normal;
	    font-style: normal;
		font-stretch: normal;
		text-rendering: optimizeLegibility;
	}

	::-moz-selection {
		background-color: black;
	}
	::selection {
		background-color: black;
	}
	::-webkit-scrollbar { 
		display: none; 
	}
	a {
	    text-decoration: none;
	    color: white;
		cursor: pointer;
	}
	a:hover {
		color: black;
	}

/* MENU */

	header a {
		position: absolute;
		z-index: 5;
		padding-bottom: 2px;
	}
	#vo {
		top: 1em;
		left: 25%;
		transform: translate(-50%, 0);
	}	
	#contact {
		top: 1em;
		right: 25%;
		transform: translate(50%, 0);
	}
	
/* ERROR */

	#error {
		position: absolute;
		z-index: 6;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: white;
	}
	
/* INTRO */
	
	#intro {
		position: absolute;
		height: 100%;
		width: 100%;
		overflow: hidden;
	}	
	#intro div {
		position: relative;
		display: inline-block;
		float: left;
		white-space: normal;
		vertical-align: top;
		width: 50%;
		height: 100%;
		overflow: hidden;
	}	
	#intro a {
		position: absolute;
		width: 100%;
		height: 100%;		
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		transition: all .15s ease-in-out;
	}
	
	.introlink {
		position: absolute;
		z-index: 5;
		height: min-intrinsic;
	}
	
	#peintures {
		bottom: 2em;
		left: 25%;
		transform: translate(-50%, 0);
	}
	
	#gravures {
		bottom: 2em;
		right: 25%;
		transform: translate(50%, 0);
	}

/* ABOUT */
	
	#infos {
		position: absolute;
		margin-top: 3em;
		height: calc(100% - 4em);
		overflow: scroll !important;
		z-index: 6;
		color: white;
	}
	
	#infos_container{
		position: absolute;
		width: 100%;
		height: 100%;		
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	
	.row {
		position: relative;
		display: inline-block;
		float: left;
		white-space: normal;
		vertical-align: top;
		padding-left: 1em;
		padding-right: 1em;
		width: 50%;
		height: 100%;
	}
	
	.row ul {
		list-style-type: none;
		list-style-image: none;
	}
	
/* SWIPER */
    
    .swiper-container {
    	position: absolute;
        width: 100%;
        height: 100%;
        z-index: 100;
        overflow: hidden;
        z-index: 1;       
		transition: all .2s ease-in-out;
    }
    .swiper-slide {
        text-align: center;
        width: 100%;
        height: 100%;
        overflow: hidden !important;
    }
    .swiper-slide img {
		-ms-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		position: absolute;
		left: 50%;
		top: 50%;
		min-width: 100%;
		min-height: 100%;
		cursor: -webkit-zoom-out; cursor: -moz-zoom-out;
    }
    .nav {
    	position: absolute;
    	top: 1em;
	    background-color: none;
	    cursor: pointer;
		z-index: 6;
    }
    .next {
		left: calc(50% + 0.5em);
    }   
    .prev {
		right: calc(50% + 0.5em);
    }	
	.swiper-lazy-preloader {
		width: 32px;
		height: 32px;
		position: absolute;
		top: 50%;
		left: 150%;
		margin-top: -16px;
		margin-left: -16px;
		border-radius: 50%;
		z-index: 100;
	}	
	.swiper-lazy-preloader .swiper-lazy-preloader:after {
		width: 32px;
		height: 32px;
		position: absolute;
		top: 50%;
		left: 150%;
		margin-top: -16px;
		margin-left: -16px;
		border-radius: 50%;
		z-index: 100;
	}
	.swiper-slide-active .swiper-lazy-preloader {
		background-color: transparent;
		border-top: 3px solid rgba(0, 0, 0, 0.2);
		border-right: 3px solid rgba(0, 0, 0, 0.2);
		border-bottom: 3px solid rgba(0, 0, 0, 0.2);
		border-left: 3px solid #eee;
		-webkit-transform: translateZ(0);
		      transform: translateZ(0);
		-webkit-animation-iteration-count:infinite;
		      animation-iteration-count:infinite;
		-webkit-animation-timing-function: linear;
		      animation-timing-function: linear;
		-webkit-animation-duration: .8s;
		      animation-duration: .8s;
		-webkit-animation-name: animsition-loading;
		      animation-name: animsition-loading;
	}
    
/* PREVIEW */

	#works_preview {
		position: absolute;
		z-index: 4;
		left: 1em;
		top: 3em;
		width: calc(100% - 2em);
		height: calc(100% - 6em);
		background-position: center center;
		background-size: contain;
		background-repeat: no-repeat;
		display: none;
		cursor: -webkit-zoom-in; cursor: -moz-zoom-in;
	}
	
/* BLUR EFFECT */
	
	.blurry {
		-webkit-filter: blur(15px);
		-moz-filter : blur(15px);
		-o-filter: blur(15px);
		-ms-filter: blur(15px);
		filter: blur(15px);
		-moz-transform: scale(1.05);
		-webkit-transform: scale(1.05);
		-o-transform: scale(1.05);
		transform: scale(1.05);
	}
	
	/* ANIMSITION */
		
	.animsition, .animsition-overlay{
		position: static;
	}

	.animsition-overlay-slide {
		background-color: black;
	}

	.animsition-loading,
	.animsition-loading:after {
		width: 32px;
		height: 32px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -16px;
		margin-left: -16px;
		border-radius: 50%;
		z-index: 100;
	}
	
	.animsition-loading {
	  	background-color: transparent;
	  	border-top: 3px solid rgba(0, 0, 0, 0.2);
	  	border-right: 3px solid rgba(0, 0, 0, 0.2);
	  	border-bottom: 3px solid rgba(0, 0, 0, 0.2);
	  	border-left: 3px solid #eee;
	}

/* FIREFOX */
	
@-moz-document url-prefix() {
	.blurry {
		filter: url(../img/filters/blur.svg#blur);
		-webkit-filter: blur(3px);
		filter: blur(3px);
		filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
	}
}

/* SMARTPHONES */

@media handheld, only screen and (max-width: 748px), only screen and (max-device-width: 748px) {

	body {
		font-size: 1.25em;
		line-height: 1.1em;
	}
	#intro div {
		width: 100%;
		height: 50%;
	}
	#infos {
		height: calc( 100% - 6em);
	}
	#vo {
		top: 1em;
		left: 50%;
		transform: translate(-50%, 0);
	}	
	#contact {
		top: calc( 100% - 2em);
		right: 50%;
		transform: translate(50%, 0);
	}
	#peintures {
		top: calc( 50% - 2em);
		left: 50%;
		transform: translate(-50%, 0);
	}
	
	#gravures {
		top: calc( 50% + 1em);
		right: 50%;
		transform: translate(50%, 0);
	}
	.row {
		float: none;
		width: 100%;
		height: auto;
		padding-bottom: 1em;
	}
	.nav {
		display: none !important;
    }

}