/* Theme Name: Template GillesNicolle Theme URI: http://www.gillesnicolle.com Description: Theme GillesNicolle Version: 1.0 Author: Elodie B. Author URI: http://www.elodieberger.com/ Text Domain: GillesNicolle */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;} header, nav, aside, section, video, article, footer {display:block;} :focus {outline: 0;} * {padding:0; margin:0;} abbr {font-style:italic;} sub {vertical-align: sub; font-size: smaller;} sup {vertical-align: super; font-size: smaller;} a:focus, a:active {outline: none;} img {border: 0; vertical-align: bottom;} legend {padding-bottom: .5em;} em {font-style:italic;} strong {font-weight:600;} /* ******************************* GENERAL */ body {background: #fff; font-size: 14px; line-height:135%; font-family: 'Open Sans', Arial,sans-serif;font-weight: 300; color:#3c3c3c;} li {list-style: none;} a {text-decoration:none;color:#000;-webkit-transition: all .4s 0s; -moz-transition: all .4s 0s; -ms-transition: all .4s 0s; -o-transition: all .4s 0s; transition: all .4s 0s;} a:hover, a:active {text-decoration:none; color: #04b3ff;-webkit-transition: all .4s 0s; -moz-transition: all .4s 0s; -ms-transition: all .4s 0s; -o-transition: all .4s 0s; transition: all .4s 0s;} input, button {-webkit-transition: all .4s 0s; -moz-transition: all .4s 0s; -ms-transition: all .4s 0s; -o-transition: all .4s 0s; transition: all .4s 0s;} input:hover, input:active, button:hover, button:active {-webkit-transition: all .4s 0s; -moz-transition: all .4s 0s; -ms-transition: all .4s 0s; -o-transition: all .4s 0s; transition: all .4s 0s;} .title {font-family: 'Raleway', sans-serif; font-weight: 200; color: #555558; font-size: 40px;line-height: 45px; margin-bottom: 40px;-webkit-transition: all .4s 0s; -moz-transition: all .4s 0s; -ms-transition: all .4s 0s; -o-transition: all .4s 0s; transition: all .4s 0s;} .single h1 {font-family: 'Open Sans', Arial,sans-serif;font-weight: 600; color:#000; font-size: 18px;margin-bottom: 30px;} .subtitle {font-family: 'Raleway', sans-serif; font-weight: 200; color: #555558; font-size: 40px;line-height: 45px; margin: 40px 0 30px;-webkit-transition: all .4s 0s; -moz-transition: all .4s 0s; -ms-transition: all .4s 0s; -o-transition: all .4s 0s; transition: all .4s 0s;} .full-content:after {content:""; display:table; clear:both;} p, ul {margin-bottom:0.8em; font-size:14px;} .full-content li {background: url("images/bullet.png") no-repeat 0 7px; padding-left: 14px;font-size:14px;} /* ******************************* STRUCTURE */ #page {position: relative;} #main {clear: both; position:relative;} #content {background: #fff;margin: 0 auto; max-width:1000px; padding-bottom: 45px;} #content:after {content:""; display:table; clear:both;} .wrap:after {content:""; display:table; clear:both;} .wrap { margin: 0 auto; max-width:1000px;} @media screen and (max-width:1100px) { .wrap { margin: 0 auto; width: 94%; padding: 0 3%;} #content { margin: 0 auto; width: 94%; padding: 0 3% 15px;} } @media screen and (max-width:760px) { .title {font-size: 20px;line-height: 25px; margin-bottom: 25px;} } /* ******************************* HEADER */ #header {margin-bottom: 60px;} #header .wrap {border-bottom: 1px solid #e7e7e7; padding-top: 30px;} #header #logo {display:inline-block; float:left; font-size: 24px; text-transform: uppercase;color: #5d5d5d;} #header #logo:hover {color: #5d5d5d;} /* ******************************* FOOTER */ #footer .wrap { border-top: 1px solid #e7e7e7; padding: 25px 0; text-align: center;} @media screen and (max-width:760px) { #header {text-align: center; margin-bottom: 15px;} #header .wrap {padding-top: 15px;} #header #logo {float:none; margin-bottom: 15px;} } /* ******************************* NAV */ #nav {float: right;} #nav .menu-menu-principal-container, #nav .menu-menu-principal-anglais0-container {display: inline-block;} #nav .languages {display: inline-block; margin-left: 20px;} #nav .menu {margin-bottom: 0;} #nav ul li { display:inline-block; margin-right: 40px; position: relative;} #nav ul li:last-child {margin-right: 0;} #nav ul li a { display:block; text-transform: uppercase;font-family: 'Raleway', sans-serif; font-weight: 300; color: #5d5d5d; font-size: 17px; padding-bottom: 20px;} #nav ul li a:hover {color: #04b3ff;} #nav ul li.current-menu-item a, #nav ul li.current-menu-item a:hover {color: #000;} #nav ul li.menu-item-has-children a:after {margin-left: 10px; font-family: FontAwesome; font-style: normal; font-weight: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f0d7";} #nav ul li.menu-item-has-children li a:after {content: none;} #nav ul li a:hover, #nav ul li:hover a { color: #04b3ff;} #nav ul ul.sub-menu { position: absolute; height: auto; top: 39px;left: -999em;z-index: 999; width: 200px; background: #e7e7e7;} #nav ul li:hover ul.sub-menu { left: 0;} #nav ul li:last-child:hover ul.sub-menu { left: auto; right: 0;} #nav ul ul.sub-menu li { display: block;margin-right: 0;} #nav ul ul.sub-menu li a {padding: 0 10px; line-height: 35px; display: block; border-bottom: 1px solid #fff; color: #5d5d5d; text-transform: none;} #nav ul ul.sub-menu li a:hover {background: #d1d0d0;} .languages a { display:block; width:22px; height:22px; float:left; margin-left: 15px;} .languages a span {position:absolute; left:-999em;} .languages a.fr {background: url("images/flags.png") no-repeat 0 0;} .languages a.en {background: url("images/flags.png") no-repeat 0 -22px;} @media screen and (max-width:760px) { #nav {float:none;} #nav ul li { margin-right: 20px;} #nav ul li a { font-size: 15px;} #nav ul li:hover ul.sub-menu { left: 50%; margin-left: -100px;} } @media screen and (max-width:380px) { #nav ul li { margin-right: 15px;} #nav ul li a { font-size: 14px;} } /* ******************************* HOME */ .sommaire.cols {margin-bottom: 60px;} .sommaire .col {position: relative; background: #000;} .sommaire .col a {display: block; text-align: center;} .sommaire .col span {position: absolute; bottom: 60px; left: 0; right: 0; color: #fff; font-size: 30px; line-height: 32px; text-shadow:0 0 10px #000, 1px 1px 1px #000; font-weight: 600;} .sommaire .col a img {opacity: 1;-webkit-transition: all .4s 0s; -moz-transition: all .4s 0s; -ms-transition: all .4s 0s; -o-transition: all .4s 0s; transition: all .4s 0s;} .sommaire .col a:hover img {opacity: 0.4;-webkit-transition: all .4s 0s; -moz-transition: all .4s 0s; -ms-transition: all .4s 0s; -o-transition: all .4s 0s; transition: all .4s 0s;} .sommaire.small .col span {font-size: 25px; line-height: 27px;} @media screen and (max-width:760px) { .sommaire .col span, .sommaire.small .col span {font-size: 20px; line-height: 22px;} } /* ******************************* 404 */ .page404 a {color: #04b3ff;} .page404 a:hover {text-decoration: underline;} /* ******************************* CLASSES */ .alignleft { float:left; margin:0 10px 5px 0;} .alignright { float:right; margin:0 0 5px 10px;} .hidden {position: absolute;left: -999em;} .displaynone {display: none;} .cols {margin: 0 auto 20px;} .cols:after {content:""; display:table; clear:both;} .cols .col {float: left; -webkit-transition: all .4s 0s; -moz-transition: all .4s 0s; -ms-transition: all .4s 0s; -o-transition: all .4s 0s; transition: all .4s 0s;} .col:after {content:""; display:table; clear:both;} .cols .col:last-child {margin-right: 0 !important;} .cols50 .col {width: 48%; margin-right: 4%;} .cols33 .col {width: 32%; margin-right: 2%;} .cols25 .col {width: 22%; margin-right: 4%;} .txt {margin-bottom: 20px;} .txt:after {content:""; display:table; clear:both;} .txt img, .col img { max-width: 100%; height: auto;} .mosaic {max-width: 1200px; margin: 0 auto 20px; font-size: 0;} .mosaic:after {content:""; display:table; clear:both; } .mosaic a {display:inline-block; background: #fff; padding: 0.5%; margin: 1.5%; box-shadow: 0 0 6px #444; position: relative;} .mosaic a:hover:after {opacity: 1; content: "\f00e"; position: absolute; left:50%; top: 50%; margin-top: -15px; margin-left: -15px; font-size: 30px; color: #fff; text-shadow:0 0 5px #000; content: "\f00e"; font-family: FontAwesome; font-style: normal; font-weight: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} .mosaic img {width: 100%; height: auto;} .mosaic a:hover img {opacity: 0.9;} .mosaic5 {margin: 0 -2% 20px;} .mosaic5 a {width: 16%;} @media screen and (max-width:760px) { .cols25 .col {width: 48%; margin-right: 4%;} .cols25 .col:nth-child(odd) {} .cols25 .col:nth-child(even) {margin-right: 0;} .mosaic5 a {width: 28%;} } @media screen and (max-width:600px) { .mosaic5 a {width: 45%;} } @media screen and (max-width:480px) { .cols50 .col {width: 100%; margin: 0 0 20px;} .cols33 .col {width: 100%; margin: 0 0 20px !important;} .cols25 .col {width: 100%; margin: 0 0 20px !important;} .mosaic {margin: 0 auto 40px !important;} .mosaic a {margin: 0 auto 15px; width: 94% !important;} } /* ************ CONTACT */ .wpcf7 p {clear: both; overflow: hidden;} .wpcf7 label {float: left; width: 20%; } .wpcf7 .send { padding-left: 20%; } .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea {border:none; background: #e7e7e7; width:78%; padding:1%; float: left;} .wpcf7 input[type="text"]:focus, .wpcf7 input[type="email"]:focus, .wpcf7 textarea:focus {background: #f0f0f0;} .wpcf7 textarea {height: 120px;} .wpcf7 input[type="submit"] { border-radius: 3px;} .wpcf7 input[type="submit"] { text-decoration: none;} input[type="submit"] { display: inline-block; cursor: pointer; border: 1px solid #000; background: #fff; color: #000; text-transform: uppercase; font-size: 16px; font-weight: 200; line-height: 130%; padding:8px 18px;} input[type="submit"]:hover {text-decoration: none; background: #000; color: #fff;} .wpcf7-validation-errors { background: #f26144;} .wpcf7-mail-sent-ok { background: #7ecb50} .wpcf7-response-output:before {display: block; float: left; margin-right: 20px; margin-top: -4px; width: 40px; text-align: center; font-size: 40px; line-height: 30px; color: #fff;font-family: FontAwesome; font-style: normal; font-weight: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .wpcf7-validation-errors:before {content: "\f06a";} .wpcf7-mail-sent-ok:before {content: "\f058";} /* ******************************* FANCYBOX */ .lightbox {height: 100%;} .lightbox img {max-height: 100%; height:auto; width: auto; float: left;margin-right: 4%; max-width: 70%;} .lightbox h3 {overflow: hidden; text-transform: uppercase; font-size: 20px; margin-bottom: 15px;padding-top: 20px;} .lightbox p {overflow: hidden;margin-bottom: 40px;} .lightbox a.more {padding: 2px 10px;display: inline-block;background: #e7e7e7;} @media screen and (max-width:600px) { .lightbox img {width: 100%; max-width: 100%; height:auto; float: none;margin-right: 0;} .lightbox p {margin-bottom: 20px;} } /* FANCYBOX */ .fancybox-enabled {overflow: hidden; } .fancybox-enabled body {overflow: visible; touch-action: none; } .fancybox-container {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99993; backface-visibility: hidden; } .fancybox-container ~ .fancybox-container {z-index: 99992; } .fancybox-bg {position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #0f0f11; opacity: 0; transition-timing-function: cubic-bezier(.55,.06,.68,.19); backface-visibility: hidden; } .fancybox-container--ready .fancybox-bg {opacity: 0.87; transition-timing-function: cubic-bezier(.22,.61,.36,1); } .fancybox-controls {position: absolute; top: 0; left: 0; right: 0; text-align: center; opacity: 0; z-index: 99994; transition: opacity .2s; pointer-events: none; backface-visibility: hidden; direction: ltr; } .fancybox-show-controls .fancybox-controls {opacity: 1; } .fancybox-infobar {display: none; } .fancybox-show-infobar .fancybox-infobar {display: inline-block; pointer-events: all; } .fancybox-infobar__body {display: inline-block; width: 70px; line-height: 44px; font-size: 13px; text-align: center; color: #ddd; background-color: rgba(30,30,30,0.7); pointer-events: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-font-smoothing: subpixel-antialiased; } .fancybox-buttons {position: absolute; top: 0; right: 0; display: none; pointer-events: all; } .fancybox-show-buttons .fancybox-buttons {display: block; } .fancybox-slider-wrap {overflow: hidden; direction: ltr; } .fancybox-slider-wrap, .fancybox-slider {position: absolute; top: 0; left: 0; bottom: 0; right: 0; padding: 0; margin: 0; z-index: 99993; backface-visibility: hidden; } .fancybox-slide {position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; overflow: auto; outline: none; white-space: normal; box-sizing: border-box; text-align: center; z-index: 99994; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(0,0,0,0); } .fancybox-slide::before {content: ''; display: inline-block; vertical-align: middle; height: 100%; width: 0; } .fancybox-slide > * {display: inline-block; position: relative; padding: 24px; margin: 44px 0 44px; border-width: 0; vertical-align: middle; text-align: left; background-color: #fff; overflow: auto; box-sizing: border-box; } .fancybox-slide--image {overflow: hidden; } .fancybox-slide--image::before {display: none; } .fancybox-content {display: inline-block; position: relative; margin: 44px auto; padding: 0; border: 0; width: 80%; height: calc(100% - 88px); vertical-align: middle; line-height: normal; text-align: left; white-space: normal; outline: none; font-size: 16px; font-family: Arial, sans-serif; box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-overflow-scrolling: touch; } .fancybox-iframe {display: block; margin: 0; padding: 0; border: 0; width: 100%; height: 100%; background: #fff; } .fancybox-slide--video .fancybox-content, .fancybox-slide--video .fancybox-iframe {background: transparent; } .fancybox-placeholder {position: absolute; top: 0; left: 0; margin: 0; padding: 0; border: 0; z-index: 99995; background: transparent; cursor: default; overflow: visible; transform-origin: top left; background-size: 100% 100%; background-repeat: no-repeat; backface-visibility: hidden; } .fancybox-image, .fancybox-spaceball {position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; max-width: none; max-height: none; background: transparent; background-size: 100% 100%; } .fancybox-controls--canzoomOut .fancybox-placeholder {cursor: zoom-out; } .fancybox-controls--canzoomIn .fancybox-placeholder {cursor: zoom-in; } .fancybox-controls--canGrab .fancybox-placeholder {cursor: grab; } .fancybox-controls--isGrabbing .fancybox-placeholder {cursor: grabbing; } .fancybox-spaceball {z-index: 1; } .fancybox-tmp {position: absolute; top: -9999px; left: -9999px; visibility: hidden; } .fancybox-error {position: absolute; margin: 0; padding: 40px; top: 50%; left: 50%; width: 380px; max-width: 100%; transform: translate(-50%, -50%); background: #fff; cursor: default; } .fancybox-error p {margin: 0; padding: 0;} .fancybox-close-small {position: absolute; top: 4px; right: 4px; padding: 0; margin: 0; width: 30px; height: 30px; font-size: 21px; line-height: 1; color: #888; font-weight: 300; text-align: center; border-radius: 50%; border-width: 0; cursor: pointer; background: #fff; transition: background .2s; box-sizing: border-box; z-index: 2; } .fancybox-close-small:focus {outline: 1px dotted #888; } .fancybox-slide--video .fancybox-close-small {top : -36px; right : -36px; background: transparent; } .fancybox-close-small:hover {color: #555; background: #eee; } .fancybox-caption-wrap {position: absolute; bottom: 0; left: 0; right: 0; padding: 60px 30px 0 30px; z-index: 99998; backface-visibility: hidden; box-sizing: border-box; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 20%, rgba(0,0,0,0.2) 40%,rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.8) 100%); opacity: 0; transition: opacity .2s; pointer-events: none; } .fancybox-show-caption .fancybox-caption-wrap {opacity: 1; } .fancybox-caption {padding: 30px 0; text-align: center; font-size: 14px; color: #fff; line-height: 20px; -webkit-text-size-adjust: none; } .fancybox-caption a, .fancybox-caption button {pointer-events: all; } .fancybox-caption a {color: #fff; text-decoration: underline; } .fancybox-button {display: inline-block; position : relative; width: 44px; height: 44px; line-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; cursor: pointer; background: transparent; color: #fff; box-sizing: border-box; vertical-align: top; outline: none; } .fancybox-button--disabled {cursor: default; pointer-events: none; } .fancybox-button.fancybox-button--fullscreen:before {left: 50%; top: 50%; margin-left: -10px; margin-top: -10px;display: block;height:20px;width:20px;content: ""; display: inline-block;background: url("data:image/svg+xml;charset=utf8,") no-repeat 0 0;} .fancybox-button.fancybox-button--play, .fancybox-button.fancybox-button--thumbs {display: none !important;} .fancybox-infobar__body, .fancybox-button {background: rgba(30,30,30,0.6); } .fancybox-button:hover {background: rgba(0,0,0,0.8); } .fancybox-button::before, .fancybox-button::after {content: ''; pointer-events: none; position: absolute; border-color: #fff; background-color: currentColor; color: currentColor; opacity: 0.9; box-sizing: border-box; display: inline-block; } .fancybox-button--disabled::before, .fancybox-button--disabled::after {opacity: 0.5; } .fancybox-button--left::after {left: 20px; top: 18px; width: 6px; height: 6px; background: transparent; border-top: solid 2px currentColor; border-right: solid 2px currentColor; transform: rotate(-135deg); } .fancybox-button--right::after {right: 20px; top: 18px; width: 6px; height: 6px; background: transparent; border-top: solid 2px currentColor; border-right: solid 2px currentColor; transform: rotate(45deg); } .fancybox-button--left {border-bottom-left-radius: 5px; } .fancybox-button--right {border-bottom-right-radius: 5px; } .fancybox-button--close {float: right; } .fancybox-button--close::before, .fancybox-button--close::after {content: ''; display: inline-block; position: absolute; height: 2px; width: 16px; top: calc(50% - 1px); left: calc(50% - 8px); } .fancybox-button--close::before {transform: rotate(45deg); } .fancybox-button--close::after {transform: rotate(-45deg); } .fancybox-loading {border: 6px solid rgba(100, 100, 100, .4); border-top: 6px solid rgba(255, 255, 255, .6); border-radius: 100%; height: 50px; width: 50px; animation: fancybox-rotate .8s infinite linear; background: transparent; position: absolute; top: 50%; left: 50%; margin-top: -25px; margin-left: -25px; z-index: 99999; } @keyframes fancybox-rotate {from {transform: rotate(0deg);} to {transform: rotate(359deg);} } @media all and (max-width: 800px) {.fancybox-controls {text-align: left; } .fancybox-button--left, .fancybox-button--right, .fancybox-buttons button:not(.fancybox-button--close) {display: none !important; } .fancybox-caption {padding: 20px 0; margin: 0; } }