/*
Theme Name: RomainRicard-3.1.0 ©2016
Theme URI: 
Author: Michel Dumont & Paul Boussarie
Author URI: 
Description: Strictement réservé à Romain RIcard
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags:
	
	
*/


/*
	black = #222
	grey = #edecec

*/





/* @Initialize
--------------------------------------------------------------------------------------- */
html, body {width: 100%; min-width: 320px; max-width: 100vw; min-height: 100vh; font: 12px "Times New Roman", Times, serif; color: #222;}

* {margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; line-height: 1.2em; /*-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;*/}

a, button {color: inherit; text-decoration: none; -webkit-transition: all .2s; transition: all .2s;}
a i, a svg *, button svg * {-webkit-transition: all .2s; transition: all .2s;}
a:hover {text-decoration: none;}

a, input, button {outline: none;}

b, strong {font-weight: bold;}

h1, h2, h3 {line-height: 1.2em;}
h1:first-child,
h2:first-child,
h3:first-child {margin-top: 0;}

p {margin: 0 0 1em;}
p:last-child {margin-bottom: 0;}

img {max-width: 100%;}



/* @Usefull
--------------------------------------------------------------------------------------- */
.tl {text-align: left;}
.tr {text-align: right;}
.tc {text-align: center;}
.tj {text-align: justify;}

.fl {float: left;}
.fr {float: right;}
.fn {float: none;}

.clearfix:before, .clearfix:after {content: "."; display: block; height: 0; overflow: hidden}
.clearfix:after {clear: both}
.clearfix {*zoom:1;}

.overlay {display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999;}

.hidden {display: none;}


/* @General
--------------------------------------------------------------------------------------- */

main {width: 94%; max-width: 1200px; margin: 33px auto;}

a#header-contact,
a.post-link {padding-bottom: 5px; border-bottom: 1px solid;}

a:hover {color: #6c3605;}

.back2top {cursor: pointer;}
.back2top:hover {color: #6c3605;}

@media (max-width: 1200px) {
	main {width: calc(100% - 60px)}
}


/* @header
--------------------------------------------------------------------------------------- */
.logo {font-size: 25px; margin-bottom: 30px; text-transform: uppercase;}

main > header {position: relative; z-index: 1000; margin-bottom: 30px;}
main > header h2 {font-size: 14px; line-height: 16px; font-weight: normal; margin-bottom: 20px; letter-spacing: -0.02em;}
main > header h3 {font: 12px 'Raleway', sans-serif; line-height: 16px; font-weight: 600; margin-bottom: 20px;}
main > header p {max-width: 503px; font-size: 14px; font-style: italic; letter-spacing: -0.02em; line-height: 22px;}

main > header .section-right {position: relative;}
main > header .section-right #header-instagram {display: block; position: absolute; top: 0; right: 0; width: 20px; height: 20px; background: url(./img/ico-instagram.png) no-repeat; background-size: 100%}


header aside {float: left; width: 8.33%; font: 12px 'Raleway', sans-serif; line-height: 16px; font-weight: 600;}
header .section-left {float: left; width: 57.7%;}
header .section-right {float: right; width: 31.66%;}
header .section-middle {float: left; width: 91.66%; height: 11px; border-bottom: 1px solid #000;}

	#header-top {margin-bottom: 20px;}

#header-scroll {display: none; position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; padding: 15px; background-color: rgba(255, 255, 255, 0.8);}
#header-scroll .logo {margin-bottom: 0;}


@media (max-width: 670px) {
	header aside {width: 12%;}
	header .section-left {width: 50%;}
	header .section-right {width: 34%;}
	header .section-middle {width: 88%;}
} @media (max-width: 425px) {
	header aside {width: 18%;}
	header .section-left,
	header .section-right,
	header .section-middle {width: 82%;}

	main > header .section-right {margin-top: 30px;}
	main > header .section-right h3 {position: absolute; top: 0; left: -22%;}
}





/* @footer
--------------------------------------------------------------------------------------- */
main > footer {width: 100%; margin-top: 30px; padding: 30px 0; border-top: 1px solid #000; letter-spacing: 0.06em; font: 12px 'Raleway', sans-serif; font-weight: 600;}
main > footer ul,
main > footer li {margin: 0; padding: 0; list-style: none;}
	.footer-left {float: left;}
	.footer-right {float: right;}


	footer .section-left,
	footer .section-right {float: left; width: 50%; min-height: 1px; font-style: italic; font-size: 14px;}
	footer .section-left {text-align: left;}
	footer .section-right {text-align: right;}
	footer .section-left a:before {display: inline-block; content: ''; width: 30px; height: 12px; vertical-align: middle; margin-right: 10px; background: url(./img/arr-left.png) no-repeat;}
	footer .section-right a:after {display: inline-block; content: ''; width: 30px; height: 12px; vertical-align: middle; margin-left: 10px; background: url(./img/arr-right.png) no-repeat;}



/* @main
--------------------------------------------------------------------------------------- */
	.rte h1,
	.rte h2,
	.rte h3,
	.rte h4,
	.rte h5,
	.rte h6 {margin: 40px 0 20px;}
	.rte h1:first-child,
	.rte h2:first-child,
	.rte h3:first-child,
	.rte h4:first-child,
	.rte h5:first-child,
	.rte h6:first-child {margin-top: 0;}

	.rte p {margin-bottom: 15px;}
	.rte p:last-child {margin-bottom: 0;}

	.rte b,
	.rte strong {}





/* @page
--------------------------------------------------------------------------------------- */
#single-home {display: block; width: 20px; height: 20px; margin-top: -3px; background: url(./img/btn-home.svg); }
#single-header {margin-bottom: 30px;}
#single-header .rte {font-size: 14px; font-weight: normal;}

#single-diaporama .single-image + .single-image {margin-top: 30px;}
#single-diaporama .single-image img {max-width: 100%; height: auto;}

#single-footer {margin-top: 20px;}

section#page-body {padding-left: 8.33%;}
@media (max-width: 670px) {
	section#page-body {padding-left: 12%;}
} @media (max-width: 425px) {
	section#page-body {padding-left: 18%;}
}



/* @Category | Archive
--------------------------------------------------------------------------------------- */
section#home-body {margin: -15px;}
	article.portfolio {position: relative; float: left; width: 380px; margin: 15px;}
	article.portfolio .post-edit-link {position: absolute; top: 20px; left: 50%; z-index: 10; width: 100px; margin-left: -50px; background: #fff; font: 12px 'Raleway', sans-serif; font-weight: 600; border: 1px solid #000; text-align: center;}

	article.portfolio a.post-img {display: block; max-width: 100%; height: 475px; background-position: center; background-size: cover;}

	article.portfolio .post-content {display: block; position: absolute; top: 0; left: 0; z-index: 5; opacity: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, .7); color: #000; -webkit-transition: all .2s; transition: all .2s;}
	article.portfolio .post-content .post-content-inner {position: absolute; top: 50%; left: 50%; width: 230px; transform: translate(-50%, -50%); text-align: center;}
	article.portfolio .post-content .post-content-inner .post-title {display: none; margin-bottom: 50px; font-size: 34px; line-height: 37px; font-weight: normal;}
	article.portfolio .post-content .post-content-inner .post-link {font-size: 17px; font-weight: normal; border: none;}

	article.portfolio:hover .post-content {opacity: 1;}

@media (max-width: 1200px) {
	article.portfolio {width: calc(33.33% - 30px);}
} @media (max-width: 768px) {
	article.portfolio {width: calc(50% - 30px);}
} @media (max-width: 425px) {
	section#home-body {margin: -15px 0;}
		article.portfolio {width: 100%; margin: 15px 0;}
		article.portfolio .post-content {display: none;}
}



/* @Form
--------------------------------------------------------------------------------------- */




/* @Images (natifs de wordpress)
--------------------------------------------------------------------------------------- */
img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img {max-width: 100%; height: auto;}
.alignleft,
img.alignleft {display: inline; float: left; margin-right: 15px; margin-top: 4px;}
.alignright,
img.alignright {display: inline; float: right; margin-left: 15px; margin-top: 4px;}
.aligncenter,
img.aligncenter {clear: both; display: block; margin-left: auto; margin-right: auto;}
img.alignleft,
img.alignright,
img.aligncenter {margin-bottom: 12px;}

.wp-smiley {margin: 0;}
#content .attachment img {display: block; margin: 0 auto;}

.rte img {max-width:100%!important; height:auto!important; vertical-align: sub;}