html, body { margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; font-size: 16px; box-sizing: border-box; }
* { -webkit-font-smoothing: antialiased; box-sizing: inherit; }
.clearfix::after { content: ' '; display: block; clear: both; }
.site-wrapper { overflow: hidden; padding-top: 48px; background-color: #f1f1f1; }
::selection { background-color: #c31626; color: white; }
.msg { display: block; padding: 15px; margin-bottom: 15px; line-height: 1.25em; background-color: #111; color: white; position: relative; text-align: left; }
.msg::before { font-family: FontAwesome; position: absolute; left: 15px; top: 15px; font-size: 25px; }
.msg.error { background-color: #ce1111; padding-left: 50px; }
.msg.error::before { content: '\f057'; }

.is_button {display: inline-block;padding: 8px 16px;background-color: #c31626;color: white;font-size: 1em;font-weight: 400;text-decoration: none;border: 2px solid #c31626;outline:none;font-family: 'Open Sans', sans-serif;cursor: pointer;-webkit-appearance: none;border-radius: 0;transition: all .35s ease;}
.is_button.large {font-size: 1.25em;padding: 11px 18px;border-width: 3px;}
.is_button:hover {background-color: white;color: black;border-color: white;border-left-color:#c31626;}
.icon_button {
    display: inline-block;
    padding: 8px 1em;
    padding-left: 3.25em;
    background-color: #c31626;
	border: 1px solid #c31626;
    color: white;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    transition: all .35s ease;
    position: relative;
	outline:none;
	cursor: pointer;
	font-family: 'Open Sans', sans-serif;
	-webkit-appearance: none;
	border-radius: 0;
}
.icon_button i {position: absolute;top: -1px;left: -1px;width: 2.25em;height: 100%;line-height: 40px;padding: 1px;background-color: #b11423;color: white; transition: all .35s ease;box-sizing: content-box; text-align: center; }
.icon_button.large { font-size: 20px;padding: 13px 1em;padding-left: 3.25em; }
.icon_button.large i {font-size: 20px;line-height: 56px; }
.icon_button:hover { background-color: white;border-color: #E0E0E0;color: black; }
.icon_button:hover i { background-color: #c31626; }

.button-container.left { text-align: left; }
.button-container.center { text-align: center; }
.button-container.right { text-align: right; }

.input { display: block; padding: 8px 10px; font-family: 'Open Sans', sans-serif; font-size: 18px; font-weight: 400; color: #333; border: 1px solid #e8e8e8; outline: none; border-radius: 0; -webkit-appearance: none; transition: all .25s ease; }
.input:focus { border-color: #11a5da; }
textarea { min-height: 8em; resize: vertical; }

.grayscale {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: gray; /* IE 6-9 */
}

.section.error {	
    background-color: #880c18;
    background-image: url('../media/ocean_waves.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
	color: white;
}
.section.error h1 .error-code { display: block; font-size: 2em; }
.section.error .button-container { margin-bottom: 30px; }

.section-header h2 {margin: auto;text-align: center;font-size: 3em;text-transform: uppercase;}
.section-header h2 span {display: block;font-size: .6em;font-weight: 400;line-height: 1em;text-transform: none;color: #8a8a8a;}
.section-header { margin-bottom: 30px; }

.listing::after { content: ' '; display: block; clear: both; }

.section.dark { color: white; }
.section.padded { padding: 60px 0; }

.popup {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
	max-height: 0;
    background-color: white;
    z-index: 1000;
    transition: all .5s ease;
}
.popup.active { max-height: 100%; }
.popup .popup-content { width: 768px; max-width: 100%; max-height: 100vh; padding: 60px; overflow: auto; margin: auto; position: relative; }
.popup .close {position: absolute; top: 15px; right: 15px; font-size: 36px; line-height: 36px; color: #c31626; z-index: 1; transition: all .15s ease; }
.popup .close:hover { color: #333; }

#scroll-up {
    display: none;
    padding: 5px 15px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    font-size: 32px;
    line-height: 32px;
    color: black;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid;
    transition: all .3s ease;
}
#scroll-up:hover {background-color: #c31626;color: white;border-color: #c31626;}

.page-title {
    background-color: #c31626;
    background-image: url('../media/ocean_waves.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
	background-attachment: fixed;
    color: white;
    position: relative;
}
.page-title .row { padding: 60px 0; }
.page-title .row h1 { margin: auto; font-size: 3em; line-height: 1em; margin-bottom: 5px; }
.page-title .row h2 { margin: auto; font-size: 1.5em; font-weight: 400; line-height: 1em; }
.page-title::before {content: ' ';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,.35);}

header { position: fixed; top: 0; left: 0; width: 100%; background-color: #c31626; z-index: 100; }
header .nav-burger { display: none; }
header a { color: white; text-decoration: none; transition:all .2s ease;}
header a.home { display: block; float: left; margin-left: -15px; padding: 15px;font-size: 34px; font-weight: 600; line-height: 18px; }
header nav {float: right;margin-right: -15px;}
header nav .nav-link {display: inline-block;padding: 15px;color: white;text-decoration: none;font-size: 18px;font-weight: 400;line-height: 18px;}
header a:hover { background-color: white; color: black; }
.mobile-nav nav { display: none; }

#hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100vh;
    background-color: #c31626;
	background-size: cover;
	background-repeat: no-repeat;
    background-blend-mode: multiply;
    background-attachment: fixed;
    text-align: center;
    color: white;
    z-index: 1000;
}
#hero.has-image { background-image: url('../media/ocean_waves.jpg'); }
#hero .hero-wrapper { background-color: #c31626; transition: all 2s ease; }
#hero .row { min-height: 100vh; }
#hero .home {margin-left: -30px;padding: 30px;font-size: 48px;font-weight: 600;line-height: 48px;}
#hero header { position: static; background-color: transparent; }
#hero nav {margin-right: -30px;}
#hero nav .nav-link {padding: 30px 25px;font-size: 28px;font-weight: 300;line-height: 48px;}
#hero .content {position: absolute;left: 0;top: 25vh;width: 100%;}
#hero .content .logo {font-size: 216px;font-weight: 600;line-height: 1em;}
#hero .content h1 {margin: auto;font-size: 64px;font-weight: 400;line-height: 1em;letter-spacing: -2px;}
#hero .content h1 span {display: block;font-size: .65em;font-weight: 300;line-height: 1.25em;}
#hero .icon-container {position: absolute; bottom: 60px; left: 0; width: 100%; }
#hero .icon-container .scroll-icon {display: inline-block;width: 28px;height: 62px;background-color: rgba(255,255,255,.2);border: 2px solid white;border-radius: 14px;position: relative;}
#hero .icon-container .scroll-icon .circle {display: inline-block;width: 20px;height: 20px;border-radius: 50%;background-color: white;position: absolute;top: 2px;left: 2px;transition: all .35s ease;}
#hero .icon-container .scroll-icon .circle { animation: 7s scrollicon ease; animation-iteration-count: infinite; }
.hero-spacer { margin-top: 100vh; }

@keyframes scrollicon {
    0%   	{top:2px;opacity:1;transition: none;}
    15%  	{top:36px;}
    19%   	{opacity:0;}
	20%		{transition: none;}
    21%  	{top:2px;}
    23%   	{opacity:1;}
    100% 	{}
}


#articles .button-container { margin-top: 30px; }
.articles .listing .article {float: left;width: 31.3333%;margin: 1%;background-color: white;color: black;text-decoration: none;transition: all .35s ease;}
.articles .listing .article:nth-of-type(3n) {margin-right: 0;}
.articles .listing .article:nth-of-type(3n+1) {margin-left: 0; clear: left; }
.articles .listing .article .content { padding: 30px;padding-bottom: 10px; }
.articles .listing .article .thumbnail {width: 100%;height: 0;padding-bottom: 56.25%;background-size: cover;background-position: center;background-repeat: no-repeat;background-color:transparent;background-blend-mode:multiply;position: relative;overflow: hidden;transition: all .35s ease;}
.articles .listing .article .title {margin: auto; margin-bottom: 15px;font-size: 1.5em;text-align: left;line-height: 1.15em;}
.articles .listing .article .preview {text-align: justify;font-size: 1em;min-height: 5.5em;}
.articles .listing .article .metas {font-size: .85em;color: #8a8a8a;padding: 15px 30px;border-top: 1px solid #f1f1f1;}
.articles .listing .article .date {float: right;}
.articles .listing .article:hover .thumbnail { background-color: #c31626; }

.section.video-library { position: relative; overflow: hidden; color: white; }
.section.video-library::before {content: ' ';position: absolute;top: -5%;left: -5%;width: 110%;height: 110%;background-color: #111;background-image: url('https://www.transparenttextures.com/patterns/inspiration-geometry.png');background-attachment: fixed;}
.section.video-library.full::before { display: none; }
.video-library .listing .video {float: left;width: 31.3333%;margin: 1.5%;background-color: white;color: black;text-decoration: none;}
.video-library .listing .video:nth-of-type(3n) { margin-right: 0; }
.video-library .listing .video:nth-of-type(3n+1) { margin-left: 0; clear: left; }
.video-library .listing .video .thumbnail {
    width: 100%;
    height: 0;
	padding-bottom: 56.25%;
    background-size: cover;
    background-position: center;
	background-color: transparent;
	background-blend-mode: multiply;
	transition: all .35s ease;
}
.video-library .listing .video .content {padding: 25px 30px;}
.video-library .listing .video .content .title {font-size: 1.35em;line-height: 1.25em;}
.video-library .listing .video .metas {font-size: .85em;color: #8a8a8a;padding: 15px 30px;border-top: 1px solid #f1f1f1;text-align: right;}
.video-library .listing .video:hover .thumbnail { background-color: #c31626; }
.video-library .button-container { margin-top: 30px; }

.section.web { overflow: hidden; }
.projects .listing .project { position: relative; } 
.projects .listing .project::before {content: ' ';position: absolute;top: 0;right: 0;width: 35%;height: 100%;background-color: white;}
.projects .listing .project .image { position: absolute; top: 0; left: 0; width: 65%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: rgb(195, 22, 38); background-blend-mode: multiply; }
.projects .listing .project .content { min-height: 600px; float: right; width: 33.333333%; padding: 30px; background-color: white; }
.projects .listing .project .content .title { font-size: 2em; font-weight: 600; line-height: 1em; }
.projects .listing .project .content .subtitle { font-size: 1.25em; color: #c31626; }
.projects .listing .project .content .description { margin-top: 15px; line-height: 1.5em; }
.projects .listing .project .content .button-container { margin-top: 18px; }

.section.about .row { background-color: white; padding: 30px; }
.section.about .row img { float: left; width: 25%; }
.section.about .row .message { float: left; width: 75%; padding-left: 45px; }
.section.about .row .message h2 {margin: auto;font-size: 3em;text-transform: uppercase;}
.section.about .row .message p { margin-top: 5px; }

.newsletter.section {
	background-color: #c31626;
	background-image: url('../media/apple-desk.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    background-attachment: fixed;
	color: white;
	position: relative;
}
.newsletter.section::before {content: ' ';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,.25);}
.newsletter.section .infos { width: 865px; max-width: 100%; margin: auto; }
.newsletter.section .infos h2 { font-size: 2.5em; margin: auto; }
.newsletter.section .infos .incentive { font-size: 1.25em; margin-bottom: 30px; }
.newsletter form .field-wrapper { float: left; width: 325px; max-width: 100%; padding-right: 30px; text-align: left; }
.newsletter form .field-wrapper.email { width: 540px; padding-right: 0; }
.newsletter form .field-wrapper .input { width: 100%; }
.newsletter form .field-wrapper label { font-size: 18px; }
.newsletter form .field-wrapper label .asterisk { color: #c31626; }
.newsletter form .field-wrapper.submit { margin-top: 23px; padding-right: 0; float: none; text-align: right; width: 100%; }
.newsletter form .field-wrapper.submit .is_button { padding: 9px 25px; font-size: 18px; }
.newsletter form .field-wrapper.submit .is_button:hover { background-color: white; border-color: white; cursor: pointer; }
.newsletter form .fields-wrapper { display: inline-block; }
.newsletter form #mc_embed_signup_scroll { text-align: center; }
.newsletter #mc_embed_signup form input.mce_inline_error { border-color: #c31626; }
.newsletter #mc_embed_signup form div.mce_inline_error { padding: 10px; margin: auto; margin-top: 10px; font-weight: 600; background-color: #c31626; border: 2px solid #c31626; color: white; }
.newsletter #mc_embed_signup form div.mce_inline_error::before {content: '\f057';font-family: FontAwesome;font-size: 22px;margin-right: 10px;position: relative;top: 2px;}
.newsletter #mce-responses { width: 865px; margin: auto; margin-top: 15px; text-align: justify; }
.newsletter #mce-success-response { position: relative; padding-left: 45px; }
.newsletter #mce-success-response::before {content: '\f058';font-family: FontAwesome;font-size: 44px;position: absolute;top: 0;left: 0;}

footer { padding: 60px 0; background-color: #111; color: white; }
footer a { color: white; text-decoration: none; }
footer .infos .title { font-size: 64px; font-weight: 600; line-height: 1em; color: white; }
footer .infos h1 { margin: auto; font-size: 1.25em; font-weight: 400; }
footer .articles { padding: 0 45px; }
footer .articles .article { display: block; margin: 10px auto; }
footer .articles .article:last-child { margin-bottom: 0; }
footer .articles .article .date { color: #565656; font-size: .9em; }
footer .articles .article:hover .title {color: #c31626;}
footer .social { text-align: right; }
footer .social a {
    display: inline-block;
    width: 36px;
    padding: 12px;
    font-size: 36px;
    line-height: 36px;
    text-align: center;
    color: white;
    border-radius: 50%;
    box-sizing: content-box;
    position: relative;
} 
footer .social a::before {content: ' ';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(255,255,255,.1);border-radius: 50%;transform: scale(0);transition: all .15s ease;}
footer .social a:hover::before { transform: none; }
                   
.popup.message_form h3 { font-size: 1.5em; font-weight: 600; margin: auto; }
.popup.message_form .explanation { margin: auto; margin-bottom: 30px; }
.popup #message .field { margin-bottom: 15px; }
.popup #message .field:nth-of-type(-n+2) { float: left; width: 49%; margin-right: 2%; }
.popup #message .field:nth-of-type(2) { margin-right: 0; }
.popup #message .field:nth-last-of-type(-n+2) { width: 100%; }
.popup #message .field .input { width: 100%; }
.popup #message .is_button::before {content: '\f1d8';font-family: FontAwesome;margin-right: 15px;}
.popup #message .is_button:hover { background-color: white; border-color: white; color: #c31626; }
.popup #message > div:last-of-type { text-align: right; }

/* Page d'article */
.article.full .row {background-color: white;}
.article.full .cover {display: table;width: 100%;background-color: #c31626;background-size: cover;background-position: center;background-repeat: no-repeat;background-blend-mode: multiply;position: relative;}
.article.full .cover .infos { display: table-cell; padding: 0 60px; height: 350px; vertical-align: middle; text-align: center; color: white; position: relative; }
.article.full .cover::before {content: ' ';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,.2);}
.article.full .cover .infos h1 { font-size: 2.5em; font-weight: 600; margin: auto; padding-bottom: 30px; position: relative; }
.article.full .cover .infos h1::after {content: ' ';position: absolute;left: 0;right: 0;bottom: 10px;width: 40%;height: 1px;margin: auto;background-color: rgba(255, 255, 255, 0.2);}
.article.full .cover .infos .category { font-size: 1.75em; font-weight: 600; }
.article.full .cover .infos .date { font-size: 1.15em; }
.article.full .content { padding: 60px; font-size: 1.05em; border-bottom: 1px solid #f1f1f1; text-align: justify; }
.article.full .content h2, .article.full .content h3, .article.full .content h4, .article.full .content h5, .article.full .content h6 { text-align: left; }
.article.full .content p:first-child { margin-top: 0; }
.article.full .content p:last-child { margin-bottom: 0; }
.article.full .content a { color: #c31626; font-weight: 600; text-decoration: none; transition: all .2s ease; }
.article.full .content a:hover { color: black; }
.article.full .content .sharing { margin-top: 45px; text-align: center; }
.article.full .content .sharing .addthis_inline_share_toolbox { float: right; }
.article.full .comments { padding: 60px; }
/* Styles préfédinis TinyMCE */
.article.full .content img { cursor: pointer; transition: all .2s ease; }
.article.full .content img:hover { opacity: .75; }
.article.full .content .thumbnail { width: 225px; max-width: 100%; height: auto; margin: 10px; vertical-align: middle; }
.article.full .content .float-left { float: left; }
.article.full .content .float-right { float: right; }
.article.full .content h3 { margin: auto; margin-top: 30px; font-size: 1.25em; font-weight: 600; }
.article.full .content h3 + p { margin-top: 5px; }
.article.full .content hr { height: 1px; margin: 30px 0; border: none; outline: none; background-color: rgba(0,0,0,.075); }
.article.full .content .video-wrapper { display: block; width: 60%; height: 0; padding-bottom: 31.95%; margin-left: auto; margin-right: auto; position: relative; overflow: hidden; }
.article.full .content .video-wrapper > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.article.full .content .quote {
    font-size: 1.25em;
    font-style: italic;
    text-align: left;
    width: 600px;
    max-width: 90%;
    text-align: center;
    margin: 30px auto;
    color: #5f5f5f;
}
.article.full .content .quote::before {content: '« ';}
.article.full .content .quote::after {content: ' »';}
.article.full .ad-container { text-align: center; padding-bottom: 60px; }

.more-articles {margin-top: 20px;margin-bottom: 20px;}
.more-articles.articles .listing .article { width: 32%; }
.more-articles.articles .listing .article .content { min-height: 13em; }

/* Lightbox d'images */
#lightbox { position: fixed; top: 0; left: 0; display: table; width: 100%; height: 100%; background-color: rgba(0,0,0,.85); z-index: 100; cursor: pointer; }
#lightbox .cell { display: table-cell; width: 100%; height: 100vh; vertical-align: middle; text-align: center; }
#lightbox .cell img { width: auto; max-width: 60%; height: auto; max-height: 80%; }
#lightbox .cell .description {
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    width: 60%;
    margin: auto;
    padding: 15px 0;
    text-align: center;
    color: white;
    font-size: 1.25em;
    text-shadow: 0 0 10px rgba(0,0,0,.75);
}
#lightbox .cell .prev, #lightbox .cell .next {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 100%;
    width: 1em;
    text-align: center;
    line-height: 100vh;
    color: white;
    font-size: 3em;
    background-color: rgba(0,0,0,.2);
    opacity: 0.2;
	transition: all .25s ease;
}
#lightbox .cell .next { left: auto; right: 0; }
#lightbox .cell .prev:hover,
#lightbox .cell .next:hover { opacity: 1; }


/* Blog */
.articles.blog .listing .article .content { padding: 30px; }
.articles.blog .listing .article .title { font-size: 1.35em; margin-bottom: 10px; }
.articles.blog .listing .article .preview { font-size: .9em; }
.articles.blog .articles-title { display: none; }
.articles.blog .listing .article:nth-of-type(-n+3) { margin-top: 0; }
/* Blog: categories */
.articles.blog .categories-wrapper .indicator { display: none; }
.articles.blog .categories-wrapper .categories a {
    display: block;
    padding: 15px;
    margin-bottom: 15px;
    background-color: white;
    color: black;
    font-size: 1.15em;
    text-decoration: none;
    transition: all .3s ease;
}
.articles.blog .categories-wrapper .categories a.active { border-left: 3px solid #c31626; }
.articles.blog .categories-wrapper .categories a:hover { color: #c31626; }
.articles.blog .categories-wrapper .categories a.active:hover { color: black; }
.section.blog .listing .pagination { margin-top: 30px; clear: left; text-align: center; }
.section.blog .listing .pagination a { margin: auto 4px; }
.section.blog .listing .pagination a.active { background-color: white; color: black; border-color: white; pointer-events: none; }
.section.blog .paged-container .page::after {content: ' ';display: block;clear: both;}
/* Blog: categories toggler */
.articles.blog .categories-open {position: fixed;bottom: 15vh;right: 0;display: none;padding: 15px 20px;color: white;background-color: #111;font-size: 1.25em;z-index: 1000;transition: all .2s ease;}
.articles.blog .categories-open:hover { background-color: #c31626; }

/* À propos */
.section.about.full .row img { float: right; width: 25%; border-radius: 50%; margin-top: -30px; margin-right: -20px; }
.section.instagram-feed { background-color: white; }
.section.instagram-feed h3 { margin-top: 0; font-size: 1.75em; font-weight: 600; }
.section.instagram-feed .photo { display: block; float: left; width: 25%; width: calc(25% - 30px); height: 0; padding-bottom: 25%; padding-bottom: calc(25% - 30px); margin: auto; margin-right: 40px; margin-bottom: 40px; position: relative; }
.section.instagram-feed .photo:nth-of-type(4n) { margin-right: 0; }
.section.instagram-feed .photo img { position: absolute; top: 0; left: 0; width: 100%; height: auto; }
.section.instagram-feed .photo .content {
    padding: 30px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: white;
    background-color: rgba(0,0,0,.65);
    overflow: auto;
    opacity: 0;
    transition: all .25s ease;
}
.section.instagram-feed .photo:hover .content { opacity: 1; }

/* Page vidéos */
.section.video-library.full { background-color: #f1f1f1; background-image: none; color: black; }
.popup.youtube_viewer { background-color: rgba(0,0,0,.9); display: table; }
.popup.youtube_viewer .cell { display: table-cell; height: 100vh; text-align: center; vertical-align: middle; }
.popup.youtube_viewer .popup-content { width: 1080px; max-width: 100vw; padding: 0; }
.popup.youtube_viewer .video_wrapper { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; }
.popup.youtube_viewer .video_wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }	

/* Page web */
.section.web.full .intro { margin: auto 30px; }
.section.web.full .large-text { margin: auto 30px; margin-bottom: 0; font-size: 1.5em; font-weight: 600; }
.section.web.full .features .feature { padding: 30px; text-align: center; }
.section.web.full .features .feature .content { padding: 45px; background-color: white; }
.section.web.full .features .feature .content .icon { height: 128px; width: auto; vertical-align: bottom; }
.section.web.full .features .feature .content .description { min-height: 6em; text-align: justify; }
.section.web.full .features .feature .content .title { margin-top: 30px; margin-bottom: 15px; font-size: 1.25em; }
.section.web.full .cta { margin-top: 30px; text-align: center; }
.section.web.full .cta .is_button { font-size: 1.25em; } 


@media (max-width: 1280px) {
    
	.page-title .row { padding: 60px 30px; }
	
	#hero .home { margin-left: 0; }
	#hero .row { padding: 0; }
	#hero nav { margin-right: 0; }
	
	/* Page d'article */
	.article.full .row { padding: 0; }
	
	/* Blog */
	.articles.blog .listing .article { width: 48%; }
	.articles.blog .listing .article:nth-of-type(3n+1) { margin-left: 1%; clear: none;}
	.articles.blog .listing .article:nth-of-type(-n+3) { margin-top: 1%; }
	.articles.blog .listing .article:nth-of-type(2n+1) { margin-left: 0; margin-right: 1%; clear: left; }
	.articles.blog .listing .article:nth-of-type(2n) { margin-right: 0; }
	.articles.blog .listing .article:nth-of-type(-n+2) { margin-top: 0; }
    
    .articles.blog .listing .article .preview { min-height: 0; }
    .articles.blog .listing .article .content { min-height: 12em; }
	
	/* À propos */
	.section.about { padding: 15px 0; }
}
@media (max-width: 991px) {
    #hero { background-attachment: scroll; }
	#hero .content .logo { font-size: 196px; }
	#hero .content h1 { font-size: 58px; }
	
	.articles .listing .article { width: 49%; margin: 1%; }
	.articles .listing .article:nth-of-type(3n) { margin-right: 1%; }
	.articles .listing .article:nth-of-type(3n+1) { margin-left: 1%; clear: none; }
	.articles .listing .article:nth-of-type(2n) { margin-right: 0; }
	.articles .listing .article:nth-of-type(2n+1) { clear: left; margin-left: 0; }
        
    .more-articles.articles .listing .article { width: 49%; }
    .more-articles.articles .listing .article:nth-child(3) { display: none; }
    .more-articles.articles .listing .article .content { min-height: 15em; }
	
	.video-library .listing .video { width: 49%; margin: 1%; }
	.video-library .listing .video:nth-of-type(3n) { margin-right: 1%; }
	.video-library .listing .video:nth-of-type(3n+1) { margin-left: 1%; }
	.video-library .listing .video:nth-of-type(2n) { margin-right: 0; }
	.video-library .listing .video:nth-of-type(2n+1) { clear: left; margin-left: 0; }
	
	.projects .listing .project .content { width: 450px; }
	
	.section.about .row img { float: right; border-radius: 50%; }
	.section.about .row .message { padding-left: 0; padding-right: 30px; }
	
	.newsletter.section .infos { width: 75%; }
	.newsletter form .fields-wrapper { display: block; width: 75%; margin: auto; }
	.newsletter form .field-wrapper,
	.newsletter form .field-wrapper.email { width: 100%; padding-right: 0; margin-bottom: 15px; }
	.newsletter #mce-responses { width: 75%; }
	
	/* À propos */
	.section.about.full .row img { width: 300px; margin-bottom: 10px; }
    .section.instagram-feed .photo .content { font-size: 12px; line-height: 1.25em; }
    
    /* Pager web */
    .section.web.full .features .feature { width: 50%; }
}
@media (max-width: 767px) {
	.page-title { background-attachment: scroll; }
	
	.mobile-nav nav {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 0;
		height: 100vh;
		background-color: white;
		box-shadow: 0 0 5px rgba(0,0,0,.25);
		z-index: 5000;
		overflow: hidden;
		transition: all .5s ease;
	}
	.mobile-nav nav.active { width: 65vw; }
	.mobile-nav nav .nav-link { display: block; padding: 25px 30px; color: #111; text-decoration: none; border-bottom: 1px solid rgba(0,0,0,.075); white-space: nowrap; }
	header nav { display: none; }
	header .nav-burger {display: block;float: right;padding: 9px;font-size: 30px;font-weight: 600;line-height: 30px;position: relative;top: 1px;}
	header .nav-burger:hover { background-color: transparent; color: white; }
	#hero nav { display: none; }
	#hero header .nav-burger { margin-left: -30px; padding: 30px; font-size: 48px; font-weight: 600; line-height: 48px; }
	
	footer { text-align: center; } 
	footer .articles { display: none; }
	footer .social { margin-top: 30px; text-align: center; }
	
	.projects .listing .project::before { display: none; }
	.projects .listing .project .row { padding: 0; }
	.projects .listing .project .image { position: static; width: 100%; height: 0; padding-bottom: 56.25%; }
	.projects .listing .project .content { position: static; float: none; width: 100%; min-height: 0; }
	
	.articles.blog { padding: 30px 0; }
	.articles.blog .listing .article { width: 100%; margin: auto; margin-bottom: 15px; }
	.articles.blog .listing .article .thumbnail { display: none; }
    .articles.blog .listing .article .content { min-height: 0; }
	.articles.blog .listing .article .preview { min-height: 0; }
	
    .section.web { padding-bottom: 15px; }
    
	/* Page articles */
	.articles.blog .categories-open { display: block; }
	.section.articles.blog .categories-wrapper {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		max-height: 0;
		padding: 0;
		background-color: #f1f1f1;
		z-index: 100;
		overflow: hidden;
		transition: all .5s ease;
	} 
	.section.articles.blog .categories-wrapper.active { max-height: 100vh; }
	.section.articles.blog .categories-wrapper .categories { padding: 30px; padding-top: 75px; } 
	.section.articles.blog .categories-wrapper .indicator { display: block; color: black; font-size: 1.15em; margin-bottom: 15px;  }
        
    #lightbox .cell img { width: 80%; }
	#lightbox .cell .description { width: 80%; }
	
	.article.full .content .video-wrapper { width: 100%; max-width: 100%; padding-bottom: 56.25%; }
	
	/* À propos */
	.section.about.full .row img { display: block; width: 50%; margin: auto; margin-bottom: 15px; float: none; }
	.section.about.full .row .about-content { text-align: justify; }
    .section.instagram-feed .photo { width: calc(25% - 10px); padding-bottom: calc(25% - 10px); margin-right: 13px; margin-bottom: 13px; }
    .section.instagram-feed .photo .content { padding: 10px; font-size: 10px; }
	
	/* Page vidéos */
	.section.video-library.full { padding: 30px 0; }
    
    /* Page web */
    .section.web.full { padding: 15px 0; }
    .section.web.full .intro { margin: auto; }
    .section.web.full .large-text { margin: auto; margin-bottom: 15px; }
    .section.web.full .features .feature { width: 100%; padding: 0; margin: 15px auto; }
}
@media (max-width: 600px) {
	#hero .content .logo { font-size: 158px; }
	#hero .content h1 { font-size: 48px; }
	
	.section-header h2 { font-size: 2.25em; }
	
	.articles .listing .article { display: none; width: 100%; margin: auto; margin-bottom: 15px; }
	.articles .listing .article:nth-of-type(-n+3) { display: block; }
    
    .more-articles.articles .listing .article { width: 100%; }
    .more-articles.articles .listing .article .content { min-height: 0; }

	.video-library .listing .video { width: 100%; margin: auto; margin-bottom: 15px; }
	.video-library .listing .video .thumbnail { display: none; }
	
	.projects .listing .project .content .subtitle { line-height: 1.25em; }
	.projects .listing .project .content .description { text-align: justify; }
	
	.section.about .row img { float: none; width: 50%; display: block; margin: auto; }
	.section.about .row .message { width: 100%; padding-right: 0; margin-top: 15px; text-align: justify; }
	.section.about .row .message h2 { font-size: 2em; text-align: center; }
	
	.newsletter.section { background-image: url('../media/apple-desk-mobile.jpg'); background-attachment: scroll; }
	.newsletter.section .infos { width: 100%; }
	.newsletter.section .infos h2 { font-size: 2em; line-height: 1.25em; }
	.newsletter.section .infos .incentive { font-size: 1.15em; line-height: 1.25em; text-align: justify; }
	.newsletter form .fields-wrapper { width: 100%; }
	.newsletter #mce-responses { width: 100%; }
	
	.popup #message .field:nth-of-type(-n+2) { width: 100%; margin-right: auto; }
	
	/* Page d'article */
	.article.full .cover .infos h1 { font-size: 2.25em; line-height: 1.25em; }
	.article.full .cover .infos h1::after { width: 75%; background-color: rgba(255, 255, 255, 0.3); }
	.article.full .cover .infos .category { font-size: 1.5em; }
	.article.full .cover .infos { padding: 0 30px; }
	.article.full .content { padding: 30px; font-size: 1em; }
	.article.full .comments { padding: 30px; }
}
@media (max-width: 480px) {
    
    #lightbox .cell img { width: 95%; }
	#lightbox .cell .description { width: 95%; }
    
    .page-title .row h1 { font-size: 2.35em; }
    
    .articles .listing .article .title { text-align: left; font-size: 1.25em; }
    
    /* Page À Propos */
    .section.instagram-feed .photo {  }
    .section.instagram-feed .photo .content { display: none; }
}
@media (max-width: 320px) {

}


/* Responsive for restricted heights */
@media (max-height:450px) {
	#hero .content { top: 15vh; }
	#hero .content .logo { font-size: 136px; }
	#hero .content h1 { font-size: 42px; } 
	#hero .icon-container { bottom: 30px; }
	
	.mobile-nav nav .nav-link { padding: 20px 30px; }
}