/*
Theme Name: Simple Portfolio by MANYFOLD
Theme URI: http://www.wearemanyfold.com
Version: 1.1
Author: MANYFOLD
Author URI: http://www.wearemanyfold.com
*/

/*---------------------------------------------------------

	CSS for papillonexplorer.com

------------------------------------------------------------

+ by MANYFOLD
	- wearemanyfold.com
	- Questions? support@wearemanyfold.com

	1.  Reset
	2.  Body & Layout
	3.  Header
	4.  Pages and page templates
	5.  Footer
	6.  Image/Media styles
	7.  Responsive
*/

/*---------------------------------------------------------
	1. Reset
------------------------------------------------------------ */

	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
	body { line-height: 1; }
	ol, ul { list-style: none; }
	blockquote, q { quotes: none; }
	table { border-collapse: collapse; border-spacing: 0; }
	img { -ms-interpolation-mode: bicubic; }
	
/*---------------------------------------------------------
	2. Body & Layout
------------------------------------------------------------ */

	html,
	body {
		height: 100vh;
	}

	body {
		color: #000;
		font-weight: 400;
	    font-style: normal;
		font-family: 'Space Mono', monospace;
		background-color: #fff;
	}

	.cf:before,
	.cf:after {
		content: " ";
		display: table;
	}

	.cf:after { clear: both; }
	.cf { *zoom: 1; }

	a:link,
	a:visited {
		color: #000;
		-webkit-transition: .3s ease-in-out;
		-moz-transition: .3s ease-in-out;
		-o-transition: .3s ease-in-out;
		transition: .3s ease-in-out;
		text-decoration: none;
	}

	a:hover {
		color: #777;
	}

	strong { font-weight: 700; }

	#wrapper {
		height: 100vh;
		position: relative;
	}

	#content {
		height: 90vh;
		padding-top: 2vh;
		box-sizing: border-box;
	}

	.wrap {
		padding-left: 30px;
		padding-right: 30px;
		margin: 0 auto;
		width: 100%;
		position: relative;
		box-sizing: border-box;
		overflow-y: hidden;
	}


/*---------------------------------------------------------
	3. Header
------------------------------------------------------------ */

	#header {
		padding-top: 2vh;
    	box-sizing: border-box;
    	padding-bottom: 2vh;
	}

	#header .wrap {
		overflow: inherit;
	}

	/* Logo */
	#title {
		float: left;
		max-width: 145px;
		margin-top:10px;
		width: 100%;
		-webkit-transition: .3s ease-in-out;
		-moz-transition: .3s ease-in-out;
		-o-transition: .3s ease-in-out;
		transition: .3s ease-in-out;
	}

	#title a { display: block; }

	/* Navigation */
	#navigation li {
		display: inline-block;
		margin-right: 26px;
		line-height: 48px;
	}

	#navigation li a {
		color: #9e9e9e;
		font-size: 16px;
	}

	#navigation li a:hover,
	#navigation li.current_page_item a,
	.single-album #navigation .page-item-6 a {
		color: #000;
	}

	/* Subnav */
	#subnav {
		margin-left: 40px;
		clear: both;
	}

	#subnav li {
		display: inline-block;
		margin-right: 26px;
		line-height: 48px;
	}

	#subnav li a {
		color: #9e9e9e;
	    font-size: 12px;
	    text-transform: uppercase;
	    letter-spacing: 1px;
	}

	#subnav li a:hover { color: #000; }

	#dpsp-content-top {
	    float: right;
	    width: 180px;
	}

	#dpsp-content-top li {
		opacity: .4;
	}

	#dpsp-content-top li:hover {
		opacity: 1;
	}

/*---------------------------------------------------------
	4. Pages and page templates
------------------------------------------------------------ */

	/* Global
	---------------------------------------*/

	/* Album List */
	ul.album-list { margin: -1% -2%; }

	ul.album-list li.album {
		float: left;
		padding: 1% 2%;
		width: 50%;
		box-sizing: border-box;
		position: relative;
		margin-bottom: 40px;
	}

	ul.album-list li.album .album-wrap {}

	ul.album-list li.album .album-image {
		display: block;
		-webkit-transition: .3s ease-in-out;
		-moz-transition: .3s ease-in-out;
		-o-transition: .3s ease-in-out;
		transition: .3s ease-in-out;
	}

	ul.album-list li.album .album-image:hover { opacity: .7; }

	ul.album-list li.album .album-image img {
		width: 100%;
		height: auto;
	}

	ul.album-list li.album h2.album-title {
		display: block;
	    font-size: 18px;
	    margin-top: 2vh;
	}

	/* Page Content */
	#content .content-section:first-of-type { margin-bottom: 20px; }

	#content .content-section img {
		width: 100%;
		height: auto;
	}

	#content .content-section p,
	#content .content-section ul {
		font-size: 16px;
		line-height: 24px;
	}

	#content .content-section p:not(:last-of-type) { margin-bottom: 15px; }

	#content .content-section ul { margin-bottom: 15px; }

	#content .content-section ul li {
		list-style: disc inside;
		padding-left: 15px;
		margin-bottom: 12px;
	}

	#content .content-section ul li:last-of-type { margin-bottom: 0; }

	#page-text a {
		text-decoration: underline;
	    text-decoration-skip: ink;
	}

	/* Photos
	---------------------------------------*/


	/* Single Album
	---------------------------------------*/

	.single-album #subnav li.current a { color: #000; }

	.single-album #album-header h2 {
		display: block;
		font-size: 18px;
		margin-bottom: 2vh;
	}

	.single-album #album-header p {
		font-style: italic;
		color: #aaa;
		margin-bottom: 3vh;
		font-size: 16px;
		line-height: 22px;
		padding-right:33%;
	}

	.single-album #album-navigation-arrows {
		float: right;
		height: 110px;
		display: block;
		width: 133px;
		padding:0px;
		padding-top: 2vh;
	}

	.single-album #album-navigation span {
		box-shadow: none;
	    border: 0;
	    overflow: visible;
	    cursor: pointer;
	    -webkit-appearance: none;
	    display: block;
	    outline: none;
	    z-index: 1046;
	    border-radius: 100px;
	    background-color: #d8d8d8;
	    color: #484848;
	    -webkit-transition: .3s ease-in-out;
	    -moz-transition: .3s ease-in-out;
	    -o-transition: .3s ease-in-out;
	    transition: .3s ease-in-out;
	    position: absolute;
	    margin: 0;
	    top: 50%;
	    margin-top: -55px;
	    padding: 0;
	    width: 60px;
	    height: 60px;
	    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}

	.single-album #album-navigation span:hover {
		cursor: pointer;
		opacity: .4;
	}

	.single-album #album-navigation .prev {  }
	.single-album #album-navigation .next { margin-left:65px; }

	.single-album #album-navigation .prev:before {
		border-top-width: 11px;
    	border-bottom-width: 11px;
		border-right: 13px solid #484848;
	}

	.single-album #album-navigation span.next:before {
		border-left: 13px solid #484848;
		border-top-width: 11px;
		border-bottom-width: 11px;
	}

	#album-navigation-arrows span.prev:before,
	#album-navigation-arrows span.prev:after,
	#album-navigation-arrows span.next:before,
	#album-navigation-arrows span.next:after {
		content: '';
	    display: block;
	    width: 0;
	    height: 0;
	    position: absolute;
	    left: 0;
	    top: 0;
	    margin-top: 19px;
	    margin-left: 26px;
	    border: medium inset transparent;
	}

	.single-album #album-navigation span.prev:before {
	    margin-left: 18px;
	}


	.single-album #album-back-top {
	    height: 60px;
	    display: block;
	    padding: 0px;
	}

	.single-album #album-back-top span {
	    box-shadow: none;
	    border: 0;
	    overflow: visible;
	    cursor: pointer;
	    -webkit-appearance: none;
	    display: block;
	    outline: none;
	    z-index: 1046;
	    border-radius: 100px;
	    background-color: #d8d8d8;
	    color: #484848;
	    -webkit-transition: .3s ease-in-out;
	    -moz-transition: .3s ease-in-out;
	    -o-transition: .3s ease-in-out;
	    transition: .3s ease-in-out;
	    margin: 0 auto;
	    width: 60px;
	    height: 60px;
		position:relative;
	    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}

	.single-album #album-back-top span:hover {
		cursor: pointer;
		opacity: .4;
	}

	.single-album #album-back-top span.top:before {
	    border-bottom: 13px solid #484848;
	    border-left-width: 11px;
	    border-right-width: 11px;
	}

	#album-back-top span.top:before, #album-back-top span.top:after {
	    content: '';
	    display: block;
	    width: 0;
	    height: 10px;
	    position: absolute;
	    left: 0;
	    top: 8px;
	    margin-left: 18px;
	    border: medium inset transparent;
	}

	.single-album #album-gallery .slick-list { overflow-x: scroll; }

	.single-album #album-gallery {
		overflow-x: scroll;
		overflow-y: hidden;
		width: auto;
		white-space: nowrap;
	}

	.single-album #album-gallery a.chocolat-image {
		display: inline-block;
		margin-right: 10px;
		cursor: zoom-in;
	}

	.single-album #album-gallery a:hover { opacity: .7; }

	.single-album #album-gallery img {
		display: inline-block;
	    width: auto;
		height: auto;
		max-height: 500px;
	    max-width: inherit;
	}

	.single-album #album-back-top {
		text-align: center;
		display: none;
		padding-bottom: 8%;
		padding-top: 8%;
	}

	/* À Propos
	---------------------------------------*/

	/* Contact
	---------------------------------------*/

	.wpcf7 input,
	.wpcf7 textarea {
		padding: 10px;
		width: 60%;
		box-sizing: border-box;
		border: 1px solid #ccc;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		max-width: 100%;
		margin-top: 5px;
		margin-bottom: 10px;
	}

	.wpcf7 textarea {
		max-height: 500px;
	}

	.wpcf7 form {
		margin: 20px 0px;
	}

	.wpcf7 form input.wpcf7-form-control.wpcf7-submit {
		width: 190px;
	    border: none;
	    margin: 0px;
	    padding: 15px 10px;
	    background: #efefef;
	    font-weight: bold;
	    font-size: 14px;
		cursor: pointer;
	}

	.wpcf7 form input.wpcf7-form-control.wpcf7-submit:hover {
		background: #000;
		color: #fff;
	}

	div.wpcf7 img.ajax-loader {
		vertical-align: middle;
		width: 20px !important;
		margin: 10px 100px 0px 190px;
	}

	div.wpcf7-validation-errors {
		background: rgba(247, 231, 0, 0.48);
		padding: 10px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}


/*---------------------------------------------------------
	5. Footer
------------------------------------------------------------ */

	#footer {
		position: absolute;
	    width: 100%;
	    right: 0;
	    text-align: right;
	}

	#footer .wrap {
		padding-top: 0%;
		padding-bottom: 0%;
		font-size: 11px;
	    opacity: .6;
	    letter-spacing: .04em;
	}

	#footer a { color: #9e9e9e; }
	#footer a:hover { color: #000; }

	#footer .mdash { display: none; }


/*---------------------------------------------------------
	6. Image/Media styling
------------------------------------------------------------ */

	img,
	embed,
	object,
	video,
	iframe,
	.wp-caption {
		max-width: 100%;
		display: block;
	}

	img[class*="align"],
	img[class*="wp-image-"],
	img[class*="wp-post-image"],
	img[class*="avatar"] {
		height: auto;
	}

	.noborder { border: none; }
	.entry .alignright { margin: 0 0 15px 32px; }
	.entry .alignleft { margin: 0 32px 15px 0; }

	/* Required WordPress Classes, don't remove these.
	-----------------------------------------------------------*/

	.aligncenter {
	  display: block;
	  margin-left: auto;
	  margin-right: auto;
	}

	.alignleft { float: left; }
	.alignright { float: right; }

/*---------------------------------------------------------
	7. Responsive
------------------------------------------------------------ */

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width : 320px) and (max-width : 767px) {

	/* Body & Layout */
	html,
	body,
	#wrapper,
	#content {
		height: inherit;
	}

	#wrapper {
		padding-top: 2vh;
		padding-bottom: 2vh;
	}

	.wrap {
		padding-left: 20px;
		padding-right: 20px;
	}

    /* Logo */
    #title {
		float: none;
		margin: 0 auto 20px;
	}

	/* Navigation */
	#navigation-wrapper { text-align: center;  }

	#navigation-wrapper li {
		margin: 0 12px;
		line-height: 38px;
	}

	#subnav { margin: 20px 0 0 0; }

	#subnav li {     line-height: 16px;
    margin-bottom: 20px; }
	
	#subnav:before {
		content: "";
		background-color: #d4d4d4;
		height: 1px;
		width: 60px;
		margin: 0 auto 15px;
	}

	#subnav:after {
		content: "";
		background-color: #d4d4d4;
		height: 1px;
		width: 60px;
		margin: 15px auto;
	}

    /* Album List */

    #content ul.album-list li.album { width: 100%; }

	.single-album #album-gallery {
		overflow: inherit;
		width: 100%;
		white-space: inherit;
	}

	.single-album #album-gallery a.chocolat-image {
		margin: 0 0 30px;
		display: block;
	}

	.single-album #album-gallery img {
		max-width: 100%;
		max-height: inherit;
	}

	#album-navigation {
		display: none;
	}

	.single-album #album-back-top {
		display: block;
	}

	/*#dpsp-content-top {
		width: 100%;
		float: none;
		display: block !important;
	}

	#dpsp-content-top li {
		opacity: 1;
	}*/

	/* Contact */
	.wpcf7 input,
	.wpcf7 textarea,
	.wpcf7 form input.wpcf7-form-control.wpcf7-submit {
		width: 100%;
	}

    /* Footer */
	#footer {
		padding-bottom: 8%;
		padding-top: 8%;
	    position: relative;
	    text-align: center;
	}

	#footer p {
		text-align: center;
		line-height: 24px;
	}
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) and (orientation : landscape) {}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 767px) and (orientation : portrait) {

	.single-album #album-header p { padding-right:0px; }

}

/* in between Smartphones and Desktop... (portrait) ----------- */
@media only screen and (min-width : 720px) and (max-width : 767px) and (orientation : portrait) {

	.single-album #album-header p { padding-right:33%; }
	.single-album #album-gallery img { min-width:720px; }

}


/* Tablets (portrait and landscape) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) {

    /*---------------------------------------------------------
    	3. Header
    ------------------------------------------------------------ */

		/* Navigation */
		#navigation-wrapper {
			float: left;
			margin-left: 40px;
			position: relative;
			width: 70%;
			text-align: left;
		}

		#navigation-wrapper:before {
			content: "";
			width: 1px;
			height: 15px;
			background-color: #aaa;
			float: left;
			margin-right: 40px;
			transform: translate(0,16px);
		}

		#subnav {
			margin-left: 42px;
			clear: both;
			top: 40px;
			max-width: 540px;
		}

		#subnav li { line-height:28px; }

		#navigation { float: left; }

		.single-album #album-navigation span {
			width:45px;
			height:45px;
		}

		.single-album #album-navigation span.next:before,
		.single-album #album-navigation span.prev:before {
		    border-top-width: 7px;
		    border-bottom-width: 7px;
		}

		.single-album #album-navigation .next {
			margin-left:55px;
		}

		.single-album #album-navigation span.prev:before {
		    margin-left: 13px;
		}

		.single-album #album-navigation-arrows { margin-top:-5px; width:110px; }

		#album-navigation-arrows span.prev:before, #album-navigation-arrows span.prev:after, #album-navigation-arrows span.next:before, #album-navigation-arrows span.next:after
		{ margin-top:16px; margin-left:19px; }


		/*---------------------------------------------------------
			5. Pages and page templates
		------------------------------------------------------------ */

		/* Global
		---------------------------------------*/

			/* Album List */
			ul.album-list li.album {
				margin-bottom: 20px;
			}

}

/* Tablets (landscape) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) {

	/*---------------------------------------------------------
    	2. Body & Layout
    ------------------------------------------------------------ */

		body:not(.single-album) #wrapper {
			max-width: 1600px;
			width: 100%;
			margin: 0 auto;
		}

	    .wrap {
	        padding-left: 40px;
	        padding-right: 40px;
	    }

	/*---------------------------------------------------------
		5. Pages and page templates
	------------------------------------------------------------ */

	/* Global
	---------------------------------------*/

		/* Album List */
		ul.album-list li.album {
			width: 33.33%;
			margin-bottom: 20px;
		}

		/* Page Content */
		#content .content-section { width: 48%; }
		#content .content-section.left { float: left; }
		#content .content-section.right { float: right; }

		#content .content-section:first-of-type { margin-bottom: 0; }

	/* Photos
	---------------------------------------*/

		.single-album #header,
		.single-album #album-header,
		.single-album #album-navigation,
		.single-album #footer {
			max-width: 1600px;
			width: 100%;
			margin: 0 auto;
		}

		.single-album #album-header p { max-width: 60%; }

		.single-album #album-gallery #album-gallery-wrap { padding: 0; }

	/* Single Album
	---------------------------------------*/

	.single-album #album-gallery img {
		display: inline-block;
		width: auto;
		height: auto;
		max-height: 53vh;
		min-height: 53vh;
		max-width: inherit;
	}

	/* Contact
	---------------------------------------*/

	.wpcf7 input,
	.wpcf7 textarea,
	.wpcf7 form input.wpcf7-form-control.wpcf7-submit {
		width: 100%;
	}

	/*---------------------------------------------------------
		6. Footer
	------------------------------------------------------------ */

		#footer p { display: inline-block; }
		#footer .mdash { display: inline-block; }


}

/* Tablets (portrait) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {}

/* Desktops and Laptops */
@media only screen and (min-width: 1025px) and (max-width: 1919px) {

    /*---------------------------------------------------------
    	2. Body & Layout
    ------------------------------------------------------------ */

		body:not(.single-album) #wrapper {
			max-width: 1600px;
			width: 100%;
			margin: 0 auto;
		}

	    .wrap {
	        padding-left: 40px;
	        padding-right: 40px;
	    }

    /*---------------------------------------------------------
    	3. Header
    ------------------------------------------------------------ */

		/* Navigation */
		#navigation-wrapper {
			padding:50px 0px; 
			float: left;
			margin-left: 40px;
			position: relative;
			width: 70%;
			text-align: left;
		}

		#navigation-wrapper:before {
			content: "";
			width: 1px;
			height: 15px;
			background-color: none;
			float: left;
			margin-right: 40px;
			transform: translate(0,16px);
		}

		#subnav {
			margin-left: 42px;
			clear: both;
			top: 90px;
		}

		#subnav li { line-height:28px; }

		#navigation { float: left; }

    /*---------------------------------------------------------
    	5. Pages and page templates
    ------------------------------------------------------------ */

    /* Global
	---------------------------------------*/

        /* Album List */
        ul.album-list li.album {
			width: 25%;
			margin-bottom: 0;
		}

		/* Page Content */
		#content .content-section { width: 48%; }
		#content .content-section.left { float: left; }
		#content .content-section.right { float: right; }

		#content .content-section:first-of-type { margin-bottom: 0; }


    /* Photos
	---------------------------------------*/

		.single-album #header,
		.single-album #album-header,
		.single-album #album-navigation,
		.single-album #footer {
			max-width: 1600px;
			width: 100%;
			margin: 0 auto;
		}

		.single-album #album-header p { max-width: 40%; }

		.single-album #album-gallery #album-gallery-wrap { padding: 0; }


	/* Single Album
	---------------------------------------*/

	.single-album #album-gallery img {
		display: inline-block;
	    width: auto;
		height: auto;
		max-height: 53vh;
		min-height: 53vh;
	    max-width: inherit;
	}

	/* À Propos
	---------------------------------------*/

    /*---------------------------------------------------------
    	6. Footer
    ------------------------------------------------------------ */

		#footer p { display: inline-block; }
		#footer .mdash { display: inline-block; }

}

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

	/*---------------------------------------------------------
    	2. Body & Layout
    ------------------------------------------------------------ */

		body:not(.single-album) #wrapper {
			max-width: 1600px;
			width: 100%;
			margin: 0 auto;
		}

	    .wrap {
	        padding-left: 40px;
	        padding-right: 40px;
	    }

    /*---------------------------------------------------------
    	3. Header
    ------------------------------------------------------------ */

		/* Navigation */
		#navigation-wrapper {
			float: left;
			margin-left: 40px;
			position: relative;
			width: 70%;
			text-align: left;
			padding:50px 0px;
		}

		#navigation-wrapper:before {
			content: "";
			width: 1px;
			height: 15px;
			background-color: transparent;
			float: left;
			margin-right: 40px;
			transform: translate(0,16px);
		}

		#subnav {
			margin-left: 42px;
			clear: both;
			top: 80px;
		}

		#navigation { float: left; }

    /*---------------------------------------------------------
    	5. Pages and page templates
    ------------------------------------------------------------ */

    /* Global
	---------------------------------------*/

        /* Album List */
        ul.album-list li.album {
			width: 25%;
			margin-bottom: 0;
		}

		/* Page Content */
		.home #content .content-section { width: 100%; margin-bottom:20px; }

		#content .content-section { width: 48%; }
		#content .content-section.left { float: left; }
		#content .content-section.right { float: right; }

		#content .content-section:first-of-type { margin-bottom: 0; }
		.home #content .content-section:first-of-type { margin-bottom: 20px; }


    /* Photos
	---------------------------------------*/

		.single-album #header,
		.single-album #album-header,
		.single-album #album-navigation,
		.single-album #footer {
			max-width: 1600px;
			width: 100%;
			margin: 0 auto;
		}

		.single-album #album-header p { max-width: 40%; }

		.single-album #album-gallery #album-gallery-wrap { padding: 0; }


	/* Single Album
	---------------------------------------*/

	.single-album #album-gallery img {
		display: inline-block;
	    width: auto;
		height: auto;
		max-height: 681px;
		min-height: 681px;
	    max-width: inherit;
	}

	/* À Propos
	---------------------------------------*/




    /*---------------------------------------------------------
    	6. Footer
    ------------------------------------------------------------ */

		#footer p { display: inline-block; }
		#footer .mdash { display: inline-block; }

}