/* BASE */

	body {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		font-family: 'Helvetica', sans-serif;
		font-weight: lighter;
		font-size: 22px;
		line-height: 28px;
		margin: 0;
		padding: 0;
		background-color: white;
		-webkit-font-smoothing: antialiased;
	}

/* TYPOGRAPHY */

	::-moz-selection {
		background-color: #7d7045;
		color: white;
	}
	::selection {
		background-color: #7d7045;
		color: white;
	}
	::-webkit-scrollbar { 
		display: none; 
	}
	a {
	    text-decoration: none;
	    color: black;
		cursor: default;
		transition: .25s ease-in-out;
	}
	a#name:hover  {
		cursor: pointer;
		color: grey;
	}
	
	#infos a:hover {
		cursor: pointer;
		color: grey;
	}

/* NAV */

	header, footer {
		position: absolute;
		margin-left: 1em;
		margin-right: 1em;
		width: calc(100% - 2em);
		height: auto;
		z-index: 5;
		clear: both;
	}
	
	header {
		top: 1em;
		border-bottom: 1px solid black;
		padding-bottom: .5em;
	}
	
	footer {
		bottom: 1em;
		border-top: 1px solid black;
		padding-top: .5em;
	}
	
	#name, #pagination {
		float: left;
	}
	#title, #caption {
		float: right;
	}
	#caption {
		height: 1em;
	}
	
/* ERROR */

	#error_wrapper {
		position: absolute;
		z-index: 100;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: white;
	}
	
	#error {
		position: absolute;
		z-index: 6;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: black;
	}
	
/* 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;
    }
    .inner-slide {
	    position: absolute;
	    top: 3.7em;
	    left: 1em;
	    width: calc(100% - 2em);
	    height: calc(100% - 7.4em);
	    overflow: hidden;
	    background-size: contain;
	    background-position: left top;
	    background-color: none;
	    background-repeat: no-repeat;
	    transition: .3s ease-out;
    }
    
    .nav {
    	position: absolute;
    	top: 0;
    	height: 100%;
    	width: 100%;
	    background-color: none;
	    cursor: pointer;
		z-index: 6;
    }
    .next {
		left: 50%;
		cursor: url(../img/icons/next.png), e-resize;
    }   
    .prev {
		right: 50%;
		cursor: url(../img/icons/prev.png), w-resize;
    }	
	.swiper-lazy-preloader {
		width: 20px;
		height: 20px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -10px;
		margin-left: -10px;
		border-radius: 50%;
		z-index: 100;
	}	
	.swiper-lazy-preloader .swiper-lazy-preloader:after {
		width: 20px;
		height: 20px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -10px;
		margin-left: -10px;
		border-radius: 50%;
		z-index: 100;
	}
	.swiper-slide-active .swiper-lazy-preloader {
		background-color: transparent;
		border-top: 2px solid rgba(0, 0, 0, 0.2);
		border-right: 2px solid rgba(0, 0, 0, 0.2);
		border-bottom: 2px solid rgba(0, 0, 0, 0.2);
		border-left: 2px 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: spinner-loading;
		      animation-name: spinner-loading;
	}
	@keyframes spinner-loading {
		0% {
	  		transform: rotate(0deg);
	  	}
	  	100% {
	    	transform: rotate(360deg);
		}
	}

/* SWIPER PAGINATION */

    .swiper-pagination-bullet {
        width: 1.225em;
        height: 1.225em;
        text-align: center;
        color: black;
        opacity: 1;
        background: white;
    }
    .swiper-pagination-bullet:hover {
    	color: white;
        background: grey;
    }
    .swiper-pagination-bullet-active {
        color: white;
        background: black;
    }
    
/* CAPTIONS */
	
	.caption {
		display: none;
	}
	
/* ABOUT */
	
	#infos {
		margin-top: 3.5em;
		height: calc(100% - 7em) !important;
		z-index: 6;
		color: black;
	}
	
	#infos h1 {
		font-size: 22px;
		line-height: 28px;
		text-align: left;
		font-weight: lighter;
		margin: 0;
	}
	
	#infos h2 {
		font-size: 22px;
		line-height: 28px;
		text-align: center;
		font-weight: normal;
		margin: 0;
	}
	
	.last p:nth-child(2) {
		text-indent: 0;
	}
	.last p:nth-child(3) {
		text-indent: 0;
	}
	
	.last p {
		text-indent: 3em;
	}
	
	.row {
		position: relative;
		display: inline-block;
		float: left;
		white-space: normal;
		vertical-align: top;
		padding-left: 1em;
		padding-right: 1em;
		width: 33%;
		height: 100%;
		text-align: left;
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
	}
	
	.row ul {
		list-style-type: disc;
		list-style-image: none;
		list-style-position: outside;
		margin-left: 1em;
	}
	
	.row.last {
		padding-bottom: 0;
	}

/* SMARTPHONES */

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

	body, #infos h1, #infos h2 {
		font-size: 1em;
		line-height: 1.2em;
	}
	#intro div {
		width: 100%;
		height: 50%;
	}
	#infos {
		height: calc( 100% - 6em);
		overflow: scroll !important;
		-webkit-overflow-scrolling: touch;
	}
	.row {
		float: none;
		width: 100%;
		height: auto;
		padding-bottom: 1em;
		overflow: hidden;
	}
	.nav {
		display: none !important;
    }
    
	.swiper-pagination-bullet {
        width: 1.04em;
        height: 1.04em;
    }

}