/*
	Theme Name: AM photo
	Theme URI: http://photo.antoinemauron.fr
	Description: AM photo WordPress Theme
	Version: 1.0
	Author: Antoine Mauron
	Author URI: http://antoinemauron.fr
*/

/*------------------------------------*\
    MAIN
\*------------------------------------*/


@charset "UTF-8";

* {
	margin:0;
	padding:0;

}

@font-face {
  font-family: 'millimetre-bold';
  src: url('fonts/Millimetre-Bold_web.woff');
  src: url('fonts/Millimetre-Bold_web.woff2') format('woff2'),
  url('fonts/Millimetre-Bold_web.woff') format('woff');
}

@font-face {
  font-family: 'millimetre-cond';
  src: url('fonts/Millimetre-Condensed_Regular_web.woff');
  src: url('fonts/Millimetre-Condensed_Regular_web.woff2') format('woff2'),
  url('fonts/Millimetre-Condensed_Regular_web.woff') format('woff');
}

*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}


header, footer, nav, section, article, aside {
	display: block;
}

body {
	background: #dee6ed;
	color:black;
	cursor:crosshair;
	font-family: 'millimetre-bold';
	text-transform:uppercase
}


#wrapper {
	width:100%;
	margin:50px auto .4em auto;
	padding:.2em;
	cursor: crosshair;
}

header {
	width:100%;
	height:auto;
	position:fixed;
	top:0;
	background:white;
	z-index:9999;
}

h1 {
	line-height: 1.4em;
	font-size:1em;
}

header h1 {
	text-align:center;
}

/* ------------------- TICKER ------------------- */

@keyframes customticker {

  100% {
    -webkit-transform: translate3d(-250%, 0, 0);
    transform: translate3d(-250%, 0, 0);
  }
}


.tickerwrap {
  overflow: hidden;
  padding-left: 100%;
}

.ticker {
  display: inline-block;
  white-space: nowrap;
  padding-right: 100%;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: customticker;
  animation-name: customticker;
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
}

.ticker li {
  display:inline-block;
  margin-right:10px;
}

.ticker:hover {
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

.ticker li:hover {
  text-decoration:underline;
}


.tickerwrap2 {
  overflow: hidden;
  padding-left: 100%;
}

.ticker2 {
  display: inline-block;
  white-space: nowrap;
  padding-right: 100%;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: customticker;
  animation-name: customticker;
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
}

.ticker2 li {
  display:inline-block;
  margin-right:10px;
  padding-top:2px;
}

.ticker2:hover {
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

.ticker2 li:hover {
  text-decoration:underline;
}

#buttons li.active {
  text-decoration:underline;
}


/* ------------------- NAV ------------------- */


nav {
	text-align: center;
    border-bottom:solid black 1px;
    display:flex;
    max-width:100%;
    justify-content: center;

}


nav ul li {
	display:inline-block;
	padding:1%;
	cursor:pointer;
    line-height: 2em;
}

#name {
	width:15%;
	padding-top:3px;
}

#about {
	width:10%;
	padding-top:12px;
	cursor:pointer;
	border-left:solid 1px black; 

}

#imgsize {
	width:15%;
	padding-top:9px;
	border-left:solid 1px black; 

}

#imgsize li {
	margin:0 10px;
}

#tags {
	width:25%;
	border-left:solid 1px black; 
}

#location {
	width:50%;
	border-left:solid 1px black; 
	padding-top: 6px;
}

#captions {
	width:10%;
	padding-top:2px;
	border-left:solid 1px black; 
	writing-mode: horizontal-tb;

}

.captionsbutton {
	text-decoration:none;
	cursor:pointer;
}

.strikethrough {
	text-decoration:line-through;
}

/* ------------------- GRID ------------------- */



/* marko grid
.grid {
    height: auto;
    width: calc(100vw - 15px);
    padding: 0 15px 15px 15px;
}


.grid > figure {
    position: relative;
    vertical-align: top;
    display: inline-block;
    height: 105px;
    width: auto;
    margin: 15px 15px 0 15px;
    z-index: 1;
    white-space: nowrap;
}

.grid figure img {
    height: 80%;
    height: calc(100% - 18px);
    display: block;
}
*/

/* en drapeau 
.grid {
  writing-mode: vertical-lr;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}


.grid > figure {
  height: 25vh;
  padding:0.4em;
}

.grid figure img {
	max-height:100%;
}
*/

/* OG
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  justify-items: start;
}


.grid > figure {
  padding: .4em;
}

.grid figure img {
	height:100%;
}
*/


/*
.grid {	
  writing-mode: vertical-lr;

    display: flex;	
    flex-wrap: wrap;
}

.grid > figure {	
	flex-basis: 25%;
    height: 31vw;
}

.grid figure img {
	height:100%;
}

*/

/* grille horizontale
.grid {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    grid-gap: .4em;
    grid-auto-flow: column;
}

.grid > figure {
  padding: .4em;
}

.grid figure img {
	height:25vh;
}
*/

/* single column
.grid {
	display:flex;
	flex-wrap: no-wrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: -ms-autohiding-scrollbar;
}

.grid::-webkit-scrollbar {
  display: none;
}

.grid > figure {
  padding: .4em;
  flex: 0 0 25%;
}

.grid figure img {
	width:100%;
}

*/
/*
.grid {
	display:flex;
	flex-wrap: wrap;
	flex-direction: row;
	height:100vh;
}

.grid > figure {
	height:25vh;
}

.grid figure img {
	height:100%;
}
*/

/*
.grid {
	display:flex;
	flex-wrap: wrap;
	flex-direction: column;
	height:200px;
}

.grid > figure {
	flex-basis:25%;
}
*/


/* 4col drapeau vers le bas + vertical   */

.grid {
	writing-mode: vertical-lr;
	-webkit-column-count: 4;
	-moz-column-count: 4;
	column-count: 4;
	-webkit-column-gap: 0px;
	-moz-column-gap: 0px;
	column-gap: 0px;  
}

.grid > figure {
	padding: .4em;
	position:relative;
}

.grid figure img {
	height:100%;
	display:inline-block;
}

.grid figure figcaption {
    position: absolute;
    bottom: .4em;
    left: .4em;
    background: white;
    writing-mode: horizontal-tb;
}

/* figcaption inline-block in JS + height of img to 90% */


/* ------------------- TAGS + IMGS ------------------- */

figure {
	display:block;
}

.voir {
	visibility:visible;
}

.cache {
	visibility:hidden;
}

figcaption {
	display:none;
}

figcaption h4 {
	font-size:.7em;
}

.yaybig {
    position: fixed!important;
    z-index: 99999999;
    max-width: 1000px;
    max-height: 800px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background:black;
}

.yaybig img {
    border:solid 10px black;
    height:80vh!important;
    width:100%!important;
}


.pula {
	display:none!important;
}


/* ------------------- ABOUT ------------------- */

#abouttext {
	width:100%;
	border-bottom:solid 1px black;
	background:white;
	height:auto;
	display:none;
}

#abouttext p {
	font-family: 'millimetre-cond';
	font-size:2em;
	text-transform:none;
	padding:50px
}

#abouttext h3 {
	font-family: 'millimetre-cond';
    font-size: 1em;
    text-transform: none;
    padding-left: 50px;
    padding-bottom:20px;
    display:inline-block;
}

#abouttext a {
    text-decoration: underline;
    color:black;
}

#abouttext a:hover {
    text-decoration: none;
}

/* ------------------- FOOTER ------------------- */

footer {
	text-transform:none;
  font-family: 'millimetre-cond';

}



/* ---------------- RESPONSIVE ---------------- */


@media only screen
and (min-width : 360px)
and (orientation : portrait) { 

	body {
		font-size: 3em;
	}
	
	h4 {
		font-size:2em;
	}

	#wrapper {
		margin: 240px auto 50px auto;
	}

	nav {
	    flex-wrap: wrap;
	}

	#name {
	    width: 45%;
	}
	
	#about {
	    width: 10%;
	    padding-top:30px;
	}		

	#about img {
	    height: 64px;
	}	
	
	#imgsize {
	    width: 45%;
	}	

	#S {
	    height: 34px;
	    width:auto;
	}	

	#M {
	    height: 54px;
	    width:auto;
	}	

	#L {
	    height: 74px;
	    width:auto;

	}

	#location {
	    width: 80%;
	    border-left: none;
	    border-top: solid black 1px;
	    padding-top:12px
	}

	#captions {
	width: 20%;
    padding-top: 2px;
    border-top: solid 1px black;
    border-left: solid 1px black;
    }

	.wide {
		height:60vh;
		position:absolute;
		top:50%;
		transform: translateY(-50%);

	}
	
} 

/* Large screens */
@media only screen
and (min-width : 1824px) { 

	#wrapper {
		width: 70%;
	}

	
	nav {
		width: 70%;
		border-bottom: none;
		margin: 0 auto;
	}
	
	header {
		border-bottom: solid black 1px;
	}

	#abouttext {
	    width: 70%;
	    border: none;
	    margin: 0 auto;
	}
	
	.wide {
		height:60vh;
		position:absolute;
		top:50%;
		transform: translateY(-50%);

	}
}