/* --------------------------------
Normal: #4a8586 rgba(74,133,134,1)
Clair: #81aaab
Fonce: #2c4f4f rgba(44,79,79,1)
Fonce+: #1c3232
Exergue/highlight: #29c9e6
Filets clairs: #d2e0e1
Blanc cassé: #d5dcdc (sur fond fonce - inverse)
Fonce3: #114c4f
-------------------------------- */
/* --------------------------------
RESET
-------------------------------- */
@charset "iso-8859-1";html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
audio:not([controls]){display:none;height:0}
.c-review--case .c-review__content p:before,.c-writer li:before,[hidden],template{display:none}
a,sub,sup{vertical-align:baseline}
a{background-color:transparent;background:0 0;color:inherit;font-weight:inherit;text-decoration:none}
a,a:active,a:hover{outline:0}
abbr[title]{border-bottom:1px dotted}
dfn{font-style:italic}
mark{background:ivory;color:#000}
small{font-size:80%}
sub,sup{position:relative;font-size:75%;line-height:0}
sup{top:-.5em}
sub{bottom:-.25em}
img{border:0}
svg:not(:root){overflow:hidden}
hr{height:0;-webkit-box-sizing:content-box;box-sizing:content-box;margin-top:1.6363636364rem;margin-bottom:-.125em;border:0;border-top:.125em solid #000}
pre{overflow:auto}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit}
button{overflow:visible;cursor:pointer}
button,select{text-transform:none}
html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}
button[disabled],html input[disabled]{cursor:default}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
input{line-height:normal}
input[type=checkbox],input[type=radio]{padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}
input[type=search]{-webkit-box-sizing:content-box;box-sizing:content-box}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
fieldset{border:1px solid #504d47}
legend{border:0}
textarea{overflow:auto}
optgroup{font-weight:700}
table{border-collapse:collapse;border-spacing:0}
abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0}
h1,h2,h3,h4,h5,h6{font-size:inherit;line-height:inherit}
li{display:block;margin:0;padding:0;list-style:none;list-style-image:none}
b,cite,em,h1,h2,h3,h4,h5,h6,i,small,strong,td,th{font-weight:inherit}
abbr[title],dfn[title]{cursor:help}
ins,u{text-decoration:none}
address{font-style:normal}
html{-webkit-box-sizing:border-box;box-sizing:border-box}
*,:after,:before{-webkit-box-sizing:inherit;box-sizing:inherit}
body,html{overflow-x:hidden}
/* --------------------------------
COMMONS
-------------------------------- */
html {
font-family:"Abel",sans-serif;
font-size:137%;
color: #909090;
line-height: 1.64;
background-color: #FFF;
-webkit-font-smoothing: antialiased;
min-height: 100%;
}
img{max-width:100%;height:auto}
.parallax {
height: 600px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.parallax_violino {background-image:url(../../pics/bandeaux/bandeau_violino.jpg)}
@media only screen and (max-width: 1200px) { .parallax_violino {background-image:url(../../pics/bandeaux/bandeau_violino_1200.jpg)} }
@media only screen and (max-width: 800px) { .parallax_violino {background-image:url(../../pics/bandeaux/bandeau_violino_800.jpg)} }
.parallax_gaita {background-image:url(../../pics/bandeaux/bandeau_gaita.jpg)}
@media only screen and (max-width: 1200px) { .parallax_gaita {background-image:url(../../pics/bandeaux/bandeau_gaita_1200.jpg)} }
@media only screen and (max-width: 800px) { .parallax_gaita {background-image:url(../../pics/bandeaux/bandeau_gaita_800.jpg)} }
.parallax_afro {background-image:url(../../pics/bandeaux/bandeau_afro.jpg)}
@media only screen and (max-width: 1200px) { .parallax_afro {background-image:url(../../pics/bandeaux/bandeau_afro_1200.jpg)} }
@media only screen and (max-width: 800px) { .parallax_afro {background-image:url(../../pics/bandeaux/bandeau_afro_800.jpg)} }
.parallax_dashboard {background-image:url(../../pics/bandeaux/bandeau_dashboard.jpg)}
@media only screen and (max-width: 1200px) { .parallax_dashboard {background-image:url(../../pics/bandeaux/bandeau_dashboard_1200.jpg)} }
@media only screen and (max-width: 800px) { .parallax_dashboard {background-image:url(../../pics/bandeaux/bandeau_dashboard_800.jpg)} }
.parallax_funana {background-image:url(../../pics/bandeaux/bandeau_funana.jpg)}
@media only screen and (max-width: 1200px) { .parallax_funana {background-image:url(../../pics/bandeaux/bandeau_funana_1200.jpg)} }
@media only screen and (max-width: 800px) { .parallax_funana {background-image:url(../../pics/bandeaux/bandeau_funana_800.jpg)} }
.parallax_daycase {background-image:url(../../pics/bandeaux/bandeau_daycase.jpg)}
@media only screen and (max-width: 1200px) { .parallax_daycase {background-image:url(../../pics/bandeaux/bandeau_daycase_1200.jpg)} }
@media only screen and (max-width: 800px) { .parallax_daycase {background-image:url(../../pics/bandeaux/bandeau_daycase_800.jpg)} }
.parallax_index_outro {background-image:url(../../pics/bandeaux/bandeau_home_outro.jpg);}
@media only screen and (max-width: 1200px) { .parallax_index_outro {background-image:url(../../pics/bandeaux/bandeau_home_outro_1200.jpg)} }
@media only screen and (max-width: 800px) { .parallax_index_outro {background-image:url(../../pics/bandeaux/bandeau_home_outro_800.jpg)} }
.parallax_signon {background-image:url(../../pics/bandeaux/bandeau_signon.jpg);}
@media only screen and (max-width: 1200px) { .parallax_signon {background-image:url(../../pics/bandeaux/bandeau_signon_1200.jpg);} }
@media only screen and (max-width: 800px) { .parallax_signon {background-image:url(../../pics/bandeaux/bandeau_signon_800.jpg);} }
.parallax_conference {background-image:url(../../pics/bandeaux/bandeau_conference.jpg);}
@media only screen and (max-width: 1200px) { .parallax_conference {background-image:url(../../pics/bandeaux/bandeau_conference_1200.jpg);} }
@media only screen and (max-width: 800px) { .parallax_conference {background-image:url(../../pics/bandeaux/bandeau_conference_800.jpg);} }
.parallax_dj {background-image:url(../../pics/bandeaux/bandeau_dj.jpg);}
@media only screen and (max-width: 1200px) { .parallax_dj {background-image:url(../../pics/bandeaux/bandeau_dj_1200.jpg);} }
@media only screen and (max-width: 800px) { .parallax_dj {background-image:url(../../pics/bandeaux/bandeau_dj_800.jpg);} }
.parallax_upload {background-image:url(../../pics/bandeaux/bandeau_upload.jpg);}
@media only screen and (max-width: 1200px) { .parallax_upload {background-image:url(../../pics/bandeaux/bandeau_upload_1200.jpg);} }
@media only screen and (max-width: 800px) { .parallax_upload {background-image:url(../../pics/bandeaux/bandeau_upload_800.jpg);} }
.parallax_globe {background-image:url(../../pics/bandeaux/bandeau_globe.jpg);}
@media only screen and (max-width: 1200px) { .parallax_globe {background-image:url(../../pics/bandeaux/bandeau_globe_1200.jpg);} }
@media only screen and (max-width: 800px) { .parallax_globe {background-image:url(../../pics/bandeaux/bandeau_globe_800.jpg);} }
.parallax_globe_geometric {background-image:url(../../pics/bandeaux/bandeau_globe_geometric.jpg);}
@media only screen and (max-width: 1200px) { .parallax_globe_geometric {background-image:url(../../pics/bandeaux/bandeau_globe_geometric_1200.jpg);} }
@media only screen and (max-width: 800px) { .parallax_globe_geometric {background-image:url(../../pics/bandeaux/bandeau_globe_geometric_800.jpg);} }
.parallax_globe_explode {background-image:url(../../pics/bandeaux/bandeau_globe_explode.jpg);}
@media only screen and (max-width: 1200px) { .parallax_globeexplode {background-image:url(../../pics/bandeaux/bandeau_globe_explode_1200.jpg);} }
@media only screen and (max-width: 800px) { .parallax_globe_explode {background-image:url(../../pics/bandeaux/bandeau_globe_explode_800.jpg);} }
.bgimg {
background-position: center left;
background-repeat: no-repeat;
background-size: cover;
}
.bigone { margin-bottom: 300px;
background-color: #ffffff;
position: relative;
z-index: 1;
}
.prefooter {
background-color: #000;
background-image: url(../../pics/maquette/bottom.png);
background-size: contain;
background-position:top left;
background-repeat: no-repeat;
width:100%;
height:90px;
}
footer {
background-color: #000;
color:white;
overflow: hidden;
position: fixed;
z-index: 0;
bottom: 0;
left: 0;
width: 100%;
min-height: 300px;
padding:20px 50px;
}
footer .grid {width:90%;margin:0px auto;;max-width:1400px;}
@media only screen and (max-width: 840px)
{
.bigone { margin-bottom: 460px;}
footer { min-height: 460px;}
footer [class*='col-'] {margin-bottom:10px}
}
@media only screen and (max-width: 40em)
{
.bigone { margin-bottom: 720px;}
footer { min-height: 720px;}
footer [class*='col-'] {margin-bottom:10px}
}
.margin_top_10 {margin-top:10px}
.margin_top_15 {margin-top:15px}
.margin_top_20 {margin-top:20px}
.margin_top_30 {margin-top:30px}
.h150 {min-height:150px}
.h180 {min-height:180px}
.h200 {min-height:200px}
.h250 {min-height:250px}
.h300 {min-height:300px}
.h0 {height:0px}
.hugepadding{padding-top:3.5rem;padding-bottom:3.5rem}
@media only screen and (max-width: 840px) {.hugepadding{padding-top:2rem;padding-bottom:1.6rem}}
.imgfull {padding:0px}
.girouette {
-webkit-transition: -webkit-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
.girouette:hover{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
.em_white em {font-style:normal;color:white}
.em_blue em {font-style:normal;color:#29c9e6}
.inverse .em_blue em {font-style:normal;color:white}
/* --------------------------------
GRID
-------------------------------- */
.grid2 {width:100%}
.grid2:after {clear:left;float:none;content:'';display:block;height:0px;}
.grid2 .col {width:calc((100% - 20px) / 2);float:left;margin-right:20px}
.grid2 .col:last-child{margin-right:0;}
@media (max-width:800px){
.grid2_800 .col {width:100%;margin-right:0;float:none;margin-bottom:100px}
}
@media (max-width:600px){
.grid2 .col {width:100%;margin-right:0;float:none;margin-bottom:15px}
}
.grid {
margin: 0 0 0 0
}
.grid:after {
content: "";
display: table;
clear: both
}
[class*='col-'] {
float: left;
margin-right:15px;
text-align:left;
font-size:.8rem;
line-height:1.6;
}
.grid_center .col-1-4 {text-align:center}
[class*='col-'] img {
width:100%;
}
.grid_margin_0 [class*='col-'] { margin-right:0px; }
.grid_margin_10 [class*='col-'] { margin-right:10px; }
.grid_margin_5 [class*='col-'] { margin-right:5px; }
.grid_margin_7 [class*='col-'] { margin-right:7px; }
.grid_margin_30 [class*='col-'] { margin-right:30px; }
.grid_margin_20 [class*='col-'] { margin-right:20px; }
.grid [class*='col-']:last-of-type {
margin-right: 0
}
.col-1-1 { width: 100%;margin-right:0; }
.col-2-3 { width: 63%; }
.col-1-3 { width: 30%; }
.grid_margin_30 .col-1-3 { width: 30%;width:calc( (100% - 60px) / 3 ) }
.col-1-6 { width: 15%; }
.grid_margin_0 .col-1-2 { width: 50% }
.grid_margin_0 .col-1-4 { width: 25% }
.grid_margin_10 .col-1-6 { width: 15% }
.grid_margin_10 .col-1-6 { width: calc( ( 100% - 50px ) / 6 ) }
.col-1-2,.col-2-4 { width: 47%; }
.grid_margin_30 .col-1-2 { width: 47%;width:calc( (100% - 30px) / 2 ) }
.grid_serial .col-1-2:nth-child(odd) { clear:left; }
.grid_serial .col-1-2:nth-child(even) { margin-right:0px; }
.grid_serial .col-1-2:nth-child(1) { clear:none; }
.col-1-4,.col-2-8 { width: 22%; }
.col-3-4 { width:72%; }
.col-1-8 { width: 9%;}
.col-3-8 { width: 34%; }
.col-5-8 { width: 59%;}
.col-6-8 { width: 72%; }
.col-7-8 { width: 84%; }
.gridair .col-2-3 { width:65%}
.gridair .col-1-3 { width:30%}
.gridair .col-1-2,.gridair .col-2-4 { width:45%}
.gridair .col-1-4,.gridair .col-2-8 { width: 20%; }
.gridair .col-3-4 { width:70%; }
.gridair .col-1-8 { width: 7%;}
.gridair .col-3-8 { width: 31%; }
.gridair .col-5-8 { width: 57%;}
.gridair .col-6-8 { width: 70%; }
.gridair .col-7-8 { width: 82%; }
@media only screen and (max-width: 840px) {
[class*="col-"] {
display: block;
width: auto;
float: none
}
[class*="col-"].small {
max-width: 300px;
}
.grid.grid_bottom [class*="col-"] {margin-bottom:10px;}
.grid_32 .col-1-3 {width:48%;display:inline;float:left}
.grid_31 .col-1-3 {width:100%;margin-right:0px}
.grid_31 .col-2-3 {width:100%;margin-right:0px}
.grid_63 .col-1-6 {width:30%;display:inline;float:left}
.grid_63 .col-1-6:nth-child(4) {clear:left;float:left}
.grid_63 .col-1-6:nth-child(3),.grid_63 .col-1-6:nth-child(6),.grid_63 .col-1-6:nth-child(9),.grid_63 .col-1-6:nth-child(12) {margin-right:0px;}
.grid_margin_10 .grid_63 .col-1-6 { width: calc( ( 100% - 20px ) / 3 ) }
.grid_margin_0 .grid_42 .col-1-4 { width: 50%;display:inline;float:left; }
.grid_42_42 .col-1-4 { width: 50%;width:calc( ( 100% - 15px ) / 2 );display:inline;float:left; }
.grid_margin_30 .grid_42_42 .col-1-4 { width: 47%;width:calc( ( 100% - 30px ) / 2 ); }
.grid_42_41 .col-1-4 { width: 50%;width:calc( ( 100% - 15px ) / 2 );display:inline;float:left; }
.grid_42_41 .col-1-4:nth-child(even) { margin-right:0px; }
.grid_42_41.grid_margin_30 .col-1-4 { width: 47%;width:calc( ( 100% - 30px ) / 2 ); }
.grid_42_41 .col-1-4:nth-child(3) {clear:left;float:left}
.page_album .grid_42_41 .col-1-4:nth-child(3) {clear:none;float:left}
.grid_44_42 .col-1-4 { width: 25%;display:inline;float:left; }
.grid_margin_10 .grid_44_42 .col-1-4 { width: 25%;width:calc( ( 100% - 40px ) / 2 );display:inline;float:left; }
.grid_margin_0 .grid_42 .col-1-4:nth-child(3) {clear:left;float:left}
.grid_42_42 .col-1-4:nth-child(3) {clear:left;float:left}
.page_album .grid_42_42 .col-1-4:nth-child(3) {clear:none;float:left}
.grid_21 .col-1-2,.grid_21 .col-2-4 {width:100%;display:inline;float:left}
.chess .grid_21 .col-1-2 {width:50%;}
.gridair_31 .col-1-3 {width:100%;}
.gridair_31 .col-2-3 {width:100%;}
.grid_42 .col-3-4 {width:48%;display:inline;float:left}
.grid_42 .col-1-4 {width:48%;display:inline;float:left}
.footer .grid_42 .col-1-4 {width:47%;display:inline;float:left}
.gridair_42 .col-1-4 {width:45%;display:inline;float:left}
.gridair_41 .col-1-4,.gridair_41 .col-2-4,.gridair_41 .col-1-2,.gridair_41 .col-3-4,.gridair_41 .col-1-3 {width:100%;display:inline;float:left}
.gridair_21 .col-1-4,.gridair_21 .col-1-2,.gridair_21 .col-3-4,.gridair_21 .col-1-3 {width:100%;display:inline;float:left}
}
@media only screen and (max-width: 450px) {
.grid_32 .col-1-3,.grid_63 .col-1-6,.grid_42 .col-3-4,.grid_42 .col-1-4 {width:97%;display:block;float:none}
.grid_margin_0 .grid_42 .col-1-4 { width: 100% }
.grid_margin_0 .grid_42_42 .col-1-4 { width: 50%;display:inline;float:left }
.grid_margin_0 .grid_42_41 .col-1-4 { width: 50%;display:inline;float:left }
.grid_margin_0 .grid_42_42 .col-1-4:nth-child(3) {clear:left;float:left}
.grid_margin_0 .grid_42_41 .col-1-4:nth-child(3) {clear:left;float:left}
}
@media only screen and (max-width: 40em)
{
.grid_mobile_dense [class*='col-'] {margin-right:3px}
.grid_63_62 .col-1-6 {width:47%;display:inline;float:left;clear:none;}
.grid_margin_10 .grid_63_62 .col-1-6 { width: calc( ( 100% - 3px ) / 2 ) }
.grid_63 .col-1-6:nth-child(4) {clear:none;}
.grid_63_62 .col-1-6:nth-child(2),.grid_63_62 .col-1-6:nth-child(4),.grid_63_62 .col-1-6:nth-child(6),
.grid_63_62 .col-1-6:nth-child(8),.grid_63_62 .col-1-6:nth-child(10),.grid_63_62 .col-1-6:nth-child(12) {margin-right:0px;}
.grid_63_62 .col-1-6:nth-child(3),.grid_63_62 .col-1-6:nth-child(5),.grid_63_62 .col-1-6:nth-child(7),
.grid_63_62 .col-1-6:nth-child(9),.grid_63_62 .col-1-6:nth-child(11),.grid_63_62 .col-1-6:nth-child(13) {margin-right:3px;clear:left;float:left;}
.chess .grid_21 .col-1-2 {width:100%;}
.grid_margin_0 .grid_42_42 .col-1-4 { width: 50%;display:inline;float:left }
.grid_margin_0 .grid_42_42 .col-1-4:nth-child(3) {clear:left;float:left}
.grid_42_41 .col-1-4 { width: 100%;clear:left;float:none;display:inline-block; }
.grid_44_42 .col-1-4 { width: 50%;display:inline;float:left; }
.grid_44_42 .col-1-4:nth-child(3) {clear:left;float:left}
.grid_42_41.grid_margin_30 .col-1-4 { width: 100%; }
}
.col_bg { background-position: top left;
background-repeat: no-repeat;
background-size: cover;
}
.col_text h2,.col_text h3,.col_text h4 {font-family:'Oswald',sans-serif;font-weight:700;}
.col_text h2 {font-size:2.6rem;line-height:1.25;}
.col_text h3 {font-size:2rem;line-height:.95;margin-bottom:1.23rem;letter-spacing:-1px}
.col_text h4 {font-size:1.5rem;line-height:.95;margin-bottom:1.23rem;letter-spacing:-1px;color:#204060}
.col_text .title {font-family:'Oswald',sans-serif;font-weight:400;font-size:2rem;line-height:1;margin-bottom:.5rem;letter-spacing:0px}
.col_text .title b {font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:-1px}
/* --------------------------------
HEADER THEATER
-------------------------------- */
.theater {background-color:#4a8586;padding:4.5rem 2rem 3rem 4.5rem;min-height:500px;}
.usr {color:white}
.ame {color:#29c9e6}
.actor {
font-family:'Oswald',sans-serif;font-weight:700;font-size:4rem;line-height:.95;letter-spacing:-3px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-bottom: 1.2rem;
}
@media (max-width:40em){
.theater {background-color:#4a8586;padding:4.5rem 2rem 3rem 2.7rem;min-height:600px;}
.actor {font-size:3.6rem;}
}
.actor__content {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
@-webkit-keyframes blink {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes blink {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.actor__content--typing::after {
content: '|';
-webkit-animation: blink 500ms infinite;
animation: blink 500ms infinite;
}
/* --------------------------------
BANNER
-------------------------------- */
.banner {color:white;text-align:center;position:relative;margin-bottom:5rem}
.banner .parallax {height:700px;}
.banner.banner_600 .parallax {height:600px;overflow:hidden}
.banner.nobottom {margin-bottom:0px}
.banner .gradient:before {
bottom: 500px;
left: 0px;
width: 100%;
height: 200px;
position: absolute;
background-image: -webkit-gradient(linear,left top,left bottom,from(#4a8586),to(rgba(74,133,134,0)));
background-image: -webkit-linear-gradient(top,#4a8586 0%,rgba(74,133,134,0) 100%);
background-image: -o-linear-gradient(top,#4a8586 0%,rgba(74,133,134,0) 100%);
background-image: linear-gradient(-180deg,#4a8586 0%,rgba(74,133,134,0) 100%);
z-index: 100;
content: '';
}
.banner.banner_600 .gradient:before {
bottom: 500px;
height: 100px;
}
.banner .pave {width:100%;background-color:#4a8586;height:420px;}
.banner .pave_inside {padding-top:3rem;}
.banner .pave .title {margin:0 auto;font-size:2.6rem;line-height:.95;max-width:960px;margin-bottom:1rem;font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:-1px}
.banner .pave .title.air {line-height:3rem;}
.banner .banner_inside {padding-top:7rem;padding-bottom:3rem;}
.banner .banner_inside.banner_up {padding-top:5rem;padding-bottom:3rem;}
.banner .banner_inside.banner_down {padding-top:12rem;padding-bottom:1rem;}
.banner.banner_600 .banner_inside {padding-top:4rem;padding-bottom:3rem;}
.banner .banner_huge {padding-top:6rem;padding-bottom:3rem;}
.banner .banner_huge_more {padding-top:13rem;padding-bottom:3rem;}
#intro .banner .banner_inside {padding-top:3rem;padding-bottom:3rem;}
.banner .title {margin:0 auto;font-size:2.18rem;line-height:1;max-width:960px;margin-bottom:3.20rem;font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:-1px}
.banner .title.mobilebigger {font-size:6rem;line-height:.95;margin-bottom:2rem}
.banner .title.nobottom {margin-bottom:0rem;}
.banner .shadow .title {text-shadow: 1px 1px 40px rgba(0, 0, 0, 0.20);}
.banner .title_2 {margin:0 auto;font-size:2.0rem;line-height:.95;max-width:960px;margin-top:1.50rem;margin-bottom:1.50rem;font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:-1px}
.banner .with_intro .title {margin-bottom:1.23rem;}
.banner .title b,.banner .title_2 b {color:#29c9e6}
.banner .intro {margin:0 auto;padding:0 35px;max-width:960px;font-size:1.70rem;line-height:1.2;margin-bottom:1.0rem;font-family:'Oswald',sans-serif;font-weight:400;letter-spacing:0px}
.banner .intro b {color:#29c9e6}
.banner .intro strong{font-family:'Oswald',sans-serif;font-weight:700;}
.banner .subtitle {font-size:.72rem;line-height:1.25;font-family:'Oswald',sans-serif;font-weight:400;}
.banner .subtitle.huge {margin-top:4rem;}
.banner .subtitle strong{font-family:'Oswald',sans-serif;font-weight:700;}
.banner .shadow .subtitle {text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.20);}
.banner .shadow .intro {text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.35);}
.banner .avatar{z-index:1000;width:140px;height:140px;border-radius:70px;border:1px solid #fff;background-color:#fff;-webkit-box-shadow:0 32px 34px 0 rgba(0,0,0,.07);box-shadow:0 32px 34px 0 rgba(0,0,0,.07);overflow:hidden}
.banner .avatar{bottom:-70px;left:50%;position:absolute;margin-left:-70px;background-image:url(/assets/images/assets.svg);background-position:-446px 36px}
.banner img{border-radius:50%}
@media (min-width:64em){
.banner .title {font-size:4.54rem;line-height:1;margin-top:0;margin-bottom:2.45rem}
.banner .title.smaller {font-size:4.0rem;line-height:.82;margin-bottom:2.20rem}
.banner .title.nobottom {margin-bottom:0rem;}
.banner .title_2 {font-size:3.6rem;line-height:.75;margin-top:2rem;margin-bottom:1.45rem}
}
@media (min-width:80em){
.banner#intro .title {font-size:6rem;line-height:1;margin-top:0;margin-bottom:1.5rem}
.banner#intro .banner_inside {padding-top:4rem;padding-bottom:3rem;}
}
@media (max-width:40em){
.banner .banner_huge { padding-top: 5.1rem;}
.banner .title.mobilebigger {font-size:3.5rem;line-height:.95;margin-bottom:1.3rem}
.banner .pave_inside {padding-left:20px;padding-right:20px}
.banner .pave .title {font-size:1.8rem;line-height:.95;}
.banner.banner_600 .parallax {height:500px;}
.banner.banner_600 .gradient:before {
bottom: 400px;
height: 100px;
}
.banner .intro {font-size:1.55rem;line-height:1.15;}
}
/* --------------------------------
TEXTS INSIDE (POSTER / VOLETS / ...)
-------------------------------- */
.text_inside {font-size: .8rem;margin-top:2rem;line-height:1.6;background-color:white;padding:2rem 2rem;}
.text_inside.nopadding {padding:0rem}
.text_inside.text_bg {background-position: center top;
background-repeat: no-repeat;
background-size: cover;}
.text_inside .bigger {font-size: 1.1rem;}
.text_inside .bigger .bigger {font-size: 1.4rem;line-height:1.3}
.inverse .text_inside {background-color:#2c4f4f;color:#d5dcdc}
.inverse .text_inside strong {color:#29c9e6}
.text_inside p {margin-bottom:7px}
.text_inside h2,.text_inside h3,.text_inside h4 {font-family:'Oswald',sans-serif;font-weight:700;}
.inverse .text_inside h2,.inverse .text_inside h3,.inverse .text_inside h4 {color:white;}
.text_inside h2 {font-size:2.6rem;line-height:1.25;}
.text_inside h3 {font-size:2rem;line-height:1.2;margin-bottom:1.23rem;letter-spacing:-1px}
.text_inside h4 {font-size:1.5rem;line-height:.95;margin-bottom:1.23rem;letter-spacing:-1px;color:#204060}
.inverse .text_inside h4 {color:#29c9e6}
.inverse .text_inside b {color:#29c9e6}
.text_inside b {color:#29c9e6;font-weight:bold}
@media only screen and (max-width: 40em)
{
.text_inside {margin-top:4rem;}
.text_inside h2 {font-size:1.5rem;line-height:.8;letter-spacing:0px;}
.text_inside h3 {font-size:1.5rem;line-height:1.2;letter-spacing:0px;}
.text_inside h4 {font-size:1.2rem;line-height:.85;margin-bottom:1.23rem;letter-spacing:0px;}
}
@media only screen and (max-width: 660px)
{
.applying .text_inside {padding:1.5em 1.1em 1.5em 0.9em}
.applying [class*='col-'] {line-height:1.4}
}
.text_previous .grid [class*='col-'] {margin-bottom:25px}
.text_previous .grid [class*='col-'] h5 {margin:0px 0px 8px 0px;line-height:1;font-size:1rem;font-family:'Oswald',sans-serif;font-weight:700;}
/* --------------------------------
GALLERY PHOTO
-------------------------------- */
.gallery {
width:80%;
max-width:1000px;
margin:0 auto;
text-align:center;
}
.gallery_full, .gallery_wide {width:100%;max-width:2000px}
.gallery_hover [class*="col-"] {overflow:hidden}
@media only screen and (max-width: 40em) {
.gallery
{
width:80%;
margin:0 auto;
}
.gallery_full, .gallery_wide {width:100%;}
}
.gallery_hover img {
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.gallery_hover img:hover {
-ms-transform: scale(1.05,1.1);
-webkit-transform: scale(1.05,1.1);
transform: scale(1.1,1.1);
}
/* --------------------------------
LISTE (PLANNING)
-------------------------------- */
.list {margin:15px auto;width:80%;max-width:960px;line-height:1.15rem}
.list li {list-style-type:none;float:left}
.list.list_huge ul {padding:35px 20px}
.list ul {margin:0px;margin-bottom:10px}
.list ul {-webkit-transition:background-color .70s;-o-transition:background-color .70s;transition:background-color .70s}
.list_grey ul,.list_green ul {margin-bottom:0px;padding:15px 20px;background-color:#F0F0F0;border-top:1px solid #CCC;}
.list_green ul {background-color:#4a8586;border-top-color:#FFF;color:white}
.list_green ul.special {background-color:#29c9e6;}
.list_grey ul:hover {background-color:#E0E0E0;}
.list_green ul:hover {background-color:#2c4f4f;}
.list_green ul.special:hover {background-color:#19b9d6;}
.list_grey ul:last-child {border-bottom:1px solid #BBB}
.list ul:after {clear:left;display:block;content:"";height:0px}
.list_2col li:nth-child(1) {font-weight:bold;width:31%;margin-right:15px;text-align:right}
.list_2col li:nth-child(2) {width:64%}
.list_2col.list_green li:nth-child(2) {color:#d5dcdc}
.list_3col li:nth-child(1) {font-weight:bold;width:31%;margin-right:15px;text-align:right}
.list_3col li:nth-child(2) {width:31%;margin-right:15px;}
.list_3col li:nth-child(3) {width:31%}
.list_3col.list_green li:nth-child(2),.list_3col.list_green li:nth-child(3) {color:#d5dcdc}
@media only screen and (max-width: 40em)
{
.list {margin-left:2rem;width:100%;margin-right:2rem}
.list ul {margin-bottom:15px;width:80%}
.list_2col li:nth-child(1) {width:100%;margin-right:0;text-align:left;margin-bottom:5px}
.list_2col li:nth-child(2) {float:none;width:100%}
.list_3col li:nth-child(1) {width:100%;margin-right:0;text-align:left;margin-bottom:5px}
.list_3col li:nth-child(2),.list_3col li:nth-child(3) {float:none;width:100%}
.list_grey ul {padding:0px;padding-bottom:15px;background-color:transparent;margin-bottom:15px;border:0px;border-bottom:1px solid #CCC}
.list_grey ul:hover {background:transparent;}
}
/* --------------------------------
VOLETS
BIG TITLE AT LEFT
TEXT AT RIGHT
BIG BACKGROUND IMAGE
-------------------------------- */
.volets {
height: auto;
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
}
.volets .content {padding:2rem 0;margin:0 auto;max-width:960px}
.volets .text_inside {font-size: .95rem;}
.volets h2 {color:white;font-size:4.36rem;line-height:.9;margin:10rem 1rem 0rem 1rem;font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:-1px}
.volets .text_inside {margin-top:16rem}
.volet_rougenoir {background-image:url(../../pics/volets/volet_bg.png);height:auto;}
.volet_danse {background-image:url(../../pics/volets/volets_av_2500.jpg);height:auto;}
.volets .bio_left img {width:80%;margin-left:5%;margin-right:5%;display:inline-block}
.volets_800 .bio_right img {border-radius:50%;width:36%;float:right;margin-left:20px;margin-bottom:15px;display:none}
.volets_800 strong {color:#4a8586;font-weight:bold}
@media only screen and (max-width: 64em) and (min-width: 40.063em)
.voleeeeets {
height: auto;
min-height: 1837px;
}
@media only screen and (max-width: 800px)
{
.volets.volets_800 {
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center 50px;
margin-top: 71px;
height: auto;
padding-bottom: 38px;
}
.volets.volets_800 .text_inside {margin-top:2rem};
.volet_rougenoir {background-image:url(../../pics/volets/volet_bg_mobile.png)}
.volet_danse {background-image:url(../../pics/volets/volets_av_800.jpg);height:auto;}
.volets.volets_800 h2 {font-size:4.2rem;line-height:1.1;margin:2rem 1rem 0rem 1rem;}
.volets_800 .text_inside {margin-top:4rem;}
.volets_800 .text_inside h2 {font-size:1.5rem;line-height:.8;letter-spacing:0px;}
.volets_800 .text_inside h3 {font-size:1.5rem;line-height:1.2;letter-spacing:0px;}
.volets_800 .text_inside h4 {font-size:1.2rem;line-height:.85;margin-bottom:1.23rem;letter-spacing:0px;}
.volets_800 .bio_left img {display:none}
.volets_800 .bio_right img {display:inline-block}
}
@media only screen and (max-width: 40em)
{
.volets {
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center 50px;
margin-top: 71px;
height: auto;
padding-bottom: 38px;
}
.volets .text_inside {margin-top:2rem};
.volet_rougenoir {background-image:url(../../pics/volets/volet_bg_mobile.png)}
.volets h2 {font-size:2.5rem;line-height:.9;margin:2rem 1rem 0rem 1rem;}
.volets.volets_800 h2 {font-size:2.5rem;line-height:1.1;margin:2rem 1rem 0rem 1rem;}
}
/* --------------------------------
CHESS
img | text
-----------
text | img
-------------------------------- */
.chess .col_img {
background-position: top left;
background-repeat: no-repeat;
background-size: cover;
}
.text_white {color:white}
.chess .col_text {width:90%;margin:0px auto 0 auto;padding-top:30px}
.chess .col_text_huge {width:80%;margin:0px auto 0 auto;padding-top:50px}
.chess .col_text p {margin-bottom:12px}
.chess .col_text_huge p {margin-bottom:12px}
.chess .col_text p:last-child {margin-bottom:0}
.chess .col-1-2 {height:450px}
.chess .col-1-2.huge {height:550px}
.chess .col_text .title {margin-bottom:.9rem}
@media only screen and (min-width: 40em)and (max-width: 880px) {
.chess .col_text {width:94%;padding-top:15px}
.chess .col_text_huge {width:90%;margin:0px auto 0 auto;padding-top:20px}
.chess .col-1-2 {height:520px}
.chess .col-1-2.huge {height:600px}
}
@media only screen and (max-width: 40em)
{
.chess .col-1-2 {height:auto}
.chess .col_img {height:200px}
.chess .col_text {width:85%;margin:0px auto 0px auto;padding:20px 0px 20px 0px}
.chess .col_text_huge {width:85%;margin:0px auto 0px auto;padding:20px 0px 30px 0px}
}
/* --------------------------------
POSTER (IMG BACKGROUND + TEXTE DANS BLOC BLANC
-------------------------------- */
.poster {
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
}
.poster_repeat {
background-position: top top;
background-repeat: repeat;
background-size:auto;
}
.poster_header {
height:30px;
background-position: top top;
background-repeat: repeat;
background-size:auto;
}
.poster .content {padding:2rem 0;padding-bottom:4rem;margin:0 auto;margin-top:0rem;max-width:960px}
.poster .content.fin .text_inside {padding-top:0.7rem;padding-bottom:0.7rem}
.poster.large .content {max-width:1440px}
.poster .content.nobottom {padding-bottom:0rem;}
.poster .content.nobottom .text_inside{padding-bottom:0rem;}
.poster .content.nobottom.fin .text_inside {padding-top:0.7rem;padding-bottom:0.7rem}
.poster .content.notopmargin {margin-top:0rem;padding-top:0rem}
.poster .content.notopmargin .text_inside {margin-top:0rem;}
.poster .text_inside.nomargin {margin-top:0px}
.poster.nomargin .content {margin-top:0px;}
.poster_home {background-image:url(../../pics/poster/poster_home.jpg);}
.poster_partners {background-image:url(../../pics/poster/poster_partners.jpg);}
.poster_bar {background-image:url(../../pics/poster/poster_bar.jpg);}
.poster_casa {background-image:url(../../pics/poster/poster_casa.jpg);}
.poster .rotate {-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);transform: rotate(-1deg);}
.poster .text_inside strong {font-family:'Oswald',sans-serif;font-weight:700}
@media only screen and (max-width: 960px)
{
.poster.narrow .content {max-width:700px}
}
@media only screen and (max-width: 40em)
{
.poster {
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center 0px;
margin-top: 71px;
height: auto;
padding-bottom: 38px;
}
.page_album .poster {
margin-top: 0px;
padding-bottom: 38px;
}
.poster.nomobilemargin {margin-top: 0px;}
.mobilenopaddingbottom {padding-bottom: 0px;}
.poster_repeat {
background-position: top top;
background-repeat: repeat;
background-size:auto;
}
.poster.nomargin {margin-top:0px}
.poster .content {padding-top:1rem;margin-top:0rem;padding-bottom:1rem;}
.mobilenopaddingbottom .content {padding-bottom:0rem}
.poster .text_inside {margin-top:8rem;}
.poster_bar {background-image:url(../../pics/poster/poster_bar_mobile.jpg);}
.poster_rouge {background-image:url(../../pics/volets/volet_bg_mobile.png)}
.poster_home {background-image:url(../../pics/poster/poster_home_mobile.jpg);}
.poster_partners {background-image:url(../../pics/poster/poster_partners_mobile.jpg);}
.poster_casa {background-image:url(../../pics/poster/poster_casa_mobile.jpg);}
.poster [class*="col-"] {margin-bottom:30px}
.poster_partners [class*="col-"] {margin-bottom:5px}
.cd-main-content .poster_partners {margin-top: 0px}
}
/* --------------------------------
LISTS
-------------------------------- */
@media (min-width: 64em)
.list .listgrid h2 {
width: 55%;
}
@media (min-width: 64em)
.list .listgrid h2, .list .lisgrid span {
display: inline-block;
float: left;
}
/* --------------------------------
GONDOLE
-------------------------------- */
.gondole {overflow:hidden}
.gondole h2 {margin:0 auto;font-size:2.18rem;line-height:.95;max-width:960px;margin-bottom:1.23rem;font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:-1px}
.gondole .gondole_huge {padding-top:13rem;padding-bottom:3rem;}
.gondole .avatar{width:140px;height:140px;border-radius:70px;border:1px solid #fff;background-color:#fff;-webkit-box-shadow:0 32px 34px 0 rgba(0,0,0,.07);box-shadow:0 32px 34px 0 rgba(0,0,0,.07);overflow:hidden}
.gondole .avatar{bottom:400px;left:50%;position:absolute;margin-left:-70px;background-image:url(/assets/images/assets.svg);background-position:-446px 36px}
.gondole .content{margin-right:20px;position:relative;padding:5.32rem 30px 2.45rem;color:#fff}
.gondole h2 {position:absolute;top:100px;}
.gondole .subtitle{left:55%;position:absolute;max-width:42%;top:250px;font-size:.72rem;line-height:1.25;font-family:'Oswald',sans-serif;font-weight:400;}
.gondole .subtitle .box {padding:1.2rem .9rem;}
.gondole .subtitle .box.color {background-color:#204060}
.gondole .subtitle a,.gondole .subtitle strong{font-family:'Oswald',sans-serif;font-weight:700;}
.gondole .subtitle a{color:#5bd9b3}
.gondole .content .subtitle .box{-webkit-transition:background-color .44s,padding .44s;-o-transition:background-color .44s,padding .44s;transition:background-color .44s,padding .44s}
.gondole h2,.gondole .content .subtitle{-webkit-transition:top .24s;-o-transition:top .24s;transition:top .24s}
.gondole .content:after{left:30%;top:290px;position:absolute;width:26px;height:18px;background:url(../../pics/maquette/gondole_arrow.png);opacity:0;content:'';-webkit-transition:left .24s,left .24s,opacity .24s;-o-transition:left .24s,left .24s,opacity .24s;transition:left .24s,left .24s,opacity .24s}
.gondole:hover h2{top:85px}
.gondole:hover .content .subtitle{top:210px}
.gondole:hover .subtitle .box {padding-bottom:2.5rem;}
.gondole:hover .content:after{opacity:1;left:calc(55% + 1rem)}
.padding_standard {padding-right:15px;padding-left:15px}
@media (min-width:40em) and (max-width:60em){
.gondole h2 {font-size:1.8rem;line-height:.90;}
.gondole .subtitle{top:270px;left:35%;max-width:62%}
.gondole .subtitle .box {padding:1rem 0.7rem;}
.gondole .content:after{top:310px;}
.gondole:hover .content .subtitle{top:240px}
.gondole:hover .subtitle .box {padding-bottom:2rem;}
.gondole:hover .content:after{left:calc(35% + 0.7rem)}
}
@media (max-width:40em){
.gondole h2 {top:60px;}
.gondole .subtitle{top:280px;left:25%;max-width:72%}
.gondole .subtitle .box {padding:.7rem;}
.gondole .content:after{top:300px;left:5%;}
.gondole:hover h2 {top:25px;}
.gondole:hover .content .subtitle{top:250px}
.gondole:hover .content:after{left:calc(25% + 0.7rem)}
.gondole:hover .subtitle .box {padding-bottom:2rem;}
}
/* --------------------------------
BUTTONS
button_slide_horizontal
xxxx
btn
xxxxx
button
button_rollin
button_devoile
-------------------------------- */
.button_slide_horizontal {margin-top:1rem;width:200px;cursor:pointer}
.button_slide_horizontal {-webkit-transition:width .24s,background-color .24s;-o-transition:width .24s,background-color .24s;transition:width .24s,background-color .24s}
.button_slide_horizontal span {display:block;-webkit-transition:left .24s;-o-transition:left .24s;transition:left .24s}
.button_slide_horizontal span {position:relative;top:0;left:0;padding:15px 0px;text-align:center;color:white;font-size:1.1rem;line-height:.70;font-family:'Oswald',sans-serif;font-weight:400;letter-spacing:0px}
.button_slide_horizontal span:after{left:-20px;top:14px;position:absolute;width:26px;height:18px;background:url(../../pics/maquette/gondole_arrow.png);opacity:0;content:'';-webkit-transition:left .24s,left .24s,opacity .24s;-o-transition:left .24s,left .24s,opacity .24s;transition:left .24s,left .24s,opacity .24s}
.button_slide_horizontal:hover span:after{opacity:1;left:0px}
.button_slide_horizontal:hover {width:240px}
.button_slide_horizontal:hover span {left:25px}
.btn:not(.btnu) {background:#204060;border:0 none;color:#fff;display:inline-block;font-size:14px;font-size:.7rem;letter-spacing:2px;line-height:14px;line-height:.7rem;overflow:hidden;padding:18px 20px 18px 24px;position:relative;text-transform:uppercase;-webkit-transition:color .3s ease;-moz-transition:color .3s ease;-o-transition:color .3s ease;transition:color .3s ease}
.btn:not(.btnu) span{position:relative;z-index:2}
.btn:not(.btnu):before{background:#6080A0;content:"";height:100%;left:0;position:absolute;top:100%;width:100%;z-index:1;-webkit-animation:hover-out .4s 1;-moz-animation:hover-out .4s 1;-o-animation:hover-out .4s 1;animation:hover-out .4s 1;-webkit-transition:all .25s ease;-moz-transition:all .25s ease;-o-transition:all .25s ease;transition:all .25s ease}
.btn:not(.btnu):hover{color:#fff;-webkit-transition:color .25s ease .25s;-moz-transition:color .25s ease .25s;-o-transition:color .25s ease .25s;transition:color .25s ease .25s}
.btn:not(.btnu):hover:before{-webkit-animation:hover-in .25s 1;-moz-animation:hover-in .25s 1;-o-animation:hover-in .25s 1;animation:hover-in .25s 1;-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);-o-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}
.btn:not(.btnu):focus{color:#fff}
.button {
min-width: 150px;
max-width: 350px;
display: block;
border: none;
background: none;
color: #204060;
vertical-align: middle;
position: relative;
z-index: 1;
font-size:.75rem;
-webkit-backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
border: 3px solid #204060;
text-transform: uppercase;
}
.button.button_inline {display:inline-block;}
.button.highlight {color:#29c9e6;border-color:#29c9e6;}
.button.button_inverse {color:white;border-color:white}
.ink_blue .button.button_inverse {color:#114c4f;border-color:#114c4f}
.button.button_rollin {
padding: 1em 2em;
}
.button:focus {
outline: none;
}
.button > span {
vertical-align: middle;
}
.button_devoile {
overflow: hidden;
padding: 0;
}
.button_devoile::before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color:white;
background: #2c4f4f;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.button_devoile.highlight::before {background:#29c9e6;}
.button_devoile > span {
display: block;
}
.button_devoile::before,
.button_devoile > span {
padding: .6em .9em;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button_devoile:hover::before {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.button_devoile:hover > span {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
.button.button_rollin {
overflow: hidden;
color: #fff;
background: #204060;
-webkit-transition: background-color 0.3s ease-in, color 0.3s ease-in;
transition: background-color 0.3s ease-in, color 0.3s ease-in;
}
.button_rollin::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 1em 2em;
color: #FFF;
-webkit-transform-origin: -25% 50%;
transform-origin: -25% 50%;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
-webkit-transition: -webkit-transform 0.3s ease-in;
transition: transform 0.3s ease-in;
}
.button_rollin.button--inverted::after {
color: #fff;
}
.button_rollin:hover::after,
.button_rollin:hover {
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.button_rollin:hover {
background-color: #6080A0;
color: #7986cb;
}
.button_rollin.button--inverted:hover {
background-color: #3f51b5;
color: #3f51b5;
}
.button_rollin:hover::after {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
/* --------------------------------
COLORS
-------------------------------- */
.bgred {background-color:#bc2626}
.btn.bgred:before,.gondole:hover .bgred,
.button_slide_horizontal.bgred:hover {background-color:#dc4646}
.bgblue {background-color:#2578a3}
.btn.bgblue:before,.gondole:hover .bgblue,
.button_slide_horizontal.bgblue:hover {background-color:#055883}
.bggreen {background-color:#46a325}
.btn.bggreen:before,.gondole:hover .bggreen,
.button_slide_horizontal.bggreen:hover {background-color:#268305}
.bgbrown {background-color:#a35425}
.btn.bgbrown:before,.gondole:hover .bgbrown
.button_slide_horizontal.bgbrown:hover {background-color:#c37445}
.bglight {background-color:#4a8586}
.bgdark {background-color:#2c4f4f}
.bgdarker {background-color:#1c3232}
.bgnormal {background-color:#4a8586}
.bghighlight {background-color:#29c9e6}
/* --------------------------------
ARTICLES - TEXTS
-------------------------------- */
.article {margin-right: auto;margin-left: auto; }
.article.nomargin {max-width: 5000px;margin-right: 0px;margin-left: 0px; }
.section {margin: 0 auto 0rem;}
.section.nobottom {
margin-bottom: 2rem;
}
.section_small{max-width:50%}
.section p {font-size: .95rem; line-height:1.6;}
.section p:not(:only-child) {
margin-bottom: .5rem;
}
.section h2 {
margin-top: 2.45rem;
margin-bottom: .8rem;
font-size: 1.1rem;
line-height: 1.4;
color: #3e3c36;
font-family: 'Oswald',sans-serif;font-weight:700;
letter-spacing:0px;
}
.section.bigger h2 {
margin-bottom: .8rem;
font-size: 1.9rem;
line-height: 1;
letter-spacing:-1px;
}
.section.bigger h2 {
margin-bottom: .8rem;
font-size: 1.9rem;
line-height: 1;
letter-spacing:-1px;
}
.article_bloc {margin:0 5%;display:block;}
.article_bloc .section {position:relative;padding:5px 12px;margin-right:15px}
.imgfull .section {position:relative;padding:0px;margin-right:0px}
.article_bloc .section h2 {padding:0px;margin-top:.8rem}
.article_bloc .section.grey {background:#F0F0F0}
.article_bloc .section p {margin-bottom:10px}
.article_bloc .section b {color:#29c9e6;font-family:'Oswald',sans-serif;font-weight:700;}
.article_bloc .section strong {color:#29c9e6;}
.article_bloc.filet .col-1-4 .section:after {
content: '';
position: absolute;
left: 12px;
bottom: -50px;
width: 95px;
border-bottom: 2px solid #29c9e6;
margin-bottom:30px;
}
@media (max-width:840px){
.article_bloc.filet .col-1-4 .section {
margin-bottom:35px;
}
.article_bloc.filet .col-1-4 .section:after {
bottom: -30px;
margin-bottom:20px;
}
}
@media (max-width:40em){
.article_bloc .section {margin-right:0px}
.article_bloc .col-1-4 {margin-bottom:15px}
}
.article_bloc .notanymore h2 {color:#ebebeb}
.article_bloc .notanymore p {color:#e1e4ed}
.article_bloc .notanymore strong {color:#eef9fd}
.article_bloc .notanymore .button.highlight {border-color:#eef9fd;color:#eef9fd}
.article_bloc .notanymore .button_devoile::before {background:#eef9fd}
.article_bloc .stillnot h2 {color:#7e7c76}
.article_bloc .stillnot p {color:#D0D0D0}
.article_bloc .stillnot strong {color:#69f9f6}
.article_bloc .stillnot .button.highlight {border-color:#69f9f6;color:#69f9f6}
.article_bloc .stillnot .button_devoile::before {background:#69f9f6}
.article_col {padding-top:2.45rem;padding-bottom:2.45rem;margin:0 5%;border-bottom:1px solid #d2e0e1;}
.article_col.nomargin {margin:0;}
.article_col.margin30 {margin:0 30px;}
.dense .article_col {padding-top:1rem;padding-bottom:1rem;}
.article_col.noborder{border-bottom:0px}
.article_col.nopadding{padding:0px}
.article_col.inverse {background-color:#4a8586;color:#d5dcdc;}
.article_col.bordertop {border-top:1px solid #d2e0e1;}
.adresses .article_col:nth-child(1) {border-top:1px solid #d2e0e1;}
.adresses a {color:#29c9e6}
.adresses a:hover {color:#09a9c6}
.article_col .section h2 {
margin:0px;
padding-left:15px;
}
.article_col.inverse .section h2 {
color:white;
}
.article_col .col-1-3 .section {
margin:0 15px 0 0px;
}
.section .intro {
padding-right: 60px;
padding-left: 60px;
}
.section .intro {
padding-top: 4.8rem;
padding-bottom: 2.45rem;
border-bottom: 1px solid #f2f2f2;
font-family: "Oswald";font-weight:300;
text-align: center;
}
.section.noborder .intro {
padding-bottom: 1rem;
border-bottom: 0px;
}
.section .intro {
margin: 0 auto;
padding: 2.4545454546rem 15px 1.6363636364rem;
text-align: center;
}
.section .intro p {
font-size: 1.30rem;
line-height: 1.1666666667;
}
.section .intro b {color:#29c9e6;font-weight:bold}
@media (max-width:840px){
.article_col .col-1-3 .section,.article_col .col-2-3 .section {padding:0px 30px}
.article_col .col-1-3 .section {
margin:0 15px 15px 0px;
}
.article_col .section {margin: 0 auto 0rem;}
.article_col {padding-top:1.5rem;padding-bottom:1.5rem;}
.article_col .section h2 {padding-left:0px; }
}
@media (max-width:40em){
.article_col {padding-bottom:.1rem}
.article_col .section {margin: 0 auto 1.7rem;}
.section_small{max-width:75%}
}
/* --------------------------------
PANNELS
-------------------------------- */
.pannels .section {padding:0px 30px;}
.pannels h2 {margin-top:0px}
.pannels.text_white h2 {color:white}
.pannels .section p {margin-bottom:10px}
.pannels strong{font-family:'Oswald',sans-serif;font-weight:700;color:#29c9e6;}
.pannels .bigger {font-size: 1.1rem;}
.pannels .bigger .bigger {font-size: 1.4rem;line-height:1.3;}
.pannels b {color:#29c9e6;font-family:'Oswald',sans-serif;font-weight:700;}
.pannels a {color:#29c9e6;font-family:'Oswald',sans-serif;font-weight:700;padding-bottom:3px;border-bottom:1px dashed #29c9e6; -webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;}
.pannels a:hover {border-bottom:1px dotted #29c9e6;font-size:97%}
.pannels .bghighlight a {color:#146473;border-bottom-color:#146473;}
.pannels .bghighlight a:hover {border-bottom:1px dotted #146473;}
/* --------------------------------
NAVIGATION + GOTO TOP SCREEN (CODYH)
-------------------------------- */
header {
position: fixed;
z-index: 1003;
height: 50px;
width: 100%;
top: 0;
left: 0;
background-color: #33414a;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Force Hardware Acceleration */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
}
.nav-nobg header {background-color:transparent;}
header.nav-is-visible {
-webkit-transform: translateX(-260px);
-moz-transform: translateX(-260px);
-ms-transform: translateX(-260px);
-o-transform: translateX(-260px);
transform: translateX(-260px);
}
header::before {
/* never visible - this is used in jQuery to check the current MQ */
display: none;
content: 'mobile';
}
@media only screen and (min-width: 1024px) {
header {
height: 80px;
}
header.nav-is-visible {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
header::before {
content: 'desktop';
}
}
.cd-logo {
display: inline-block;
height: 100%;
margin-left: 15px;
/* remove jump on iOS devices - when we fire the navigation */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
width:200px;
}
.cd-logo img {
max-width: 100%;
margin-top: 14px;
}
.cd-logo span {display:inline-block;color:white;position:absolute;font-size:13px;top:20px;margin-left:15px}
.nav-up {
top: -80px;
transition: top 0.3s ease-in-out;
}
.nav-nobg .nav-scroll-bg {background:url(../../pics/maquette/nav_scroll_bg.png) top left repeat;}
.nav-nobg .nav-top-bg {background:transparent}
.cd-logo img {
-webkit-transition: -webkit-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
.cd-logo img:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
@media only screen and (min-width: 1024px) {
.cd-logo {
position: absolute;
z-index: 1002;
margin-left: 5%;
width:260px;
}
.cd-logo img {
margin-top: 24px;
}
.cd-logo span {top:30px;}
}
.cd-nav-trigger {
display: block;
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 50px;
/* hide text */
overflow: hidden;
white-space: nowrap;
color: transparent;
}
.cd-nav-trigger span {
/* hamburger icon created in CSS */
position: absolute;
height: 2px;
width: 20px;
top: 50%;
margin-top: -1px;
left: 50%;
margin-left: -10px;
-webkit-transition: background-color 0.3s 0.3s;
-moz-transition: background-color 0.3s 0.3s;
transition: background-color 0.3s 0.3s;
background-color: #ffffff;
}
.cd-nav-trigger span::before, .cd-nav-trigger span::after {
/* upper and lower lines of the menu icon */
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: #ffffff;
/* Force Hardware Acceleration */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.3s 0.3s;
-moz-transition: -moz-transform 0.3s 0.3s;
transition: transform 0.3s 0.3s;
}
.cd-nav-trigger span::before {
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
-o-transform: translateY(-6px);
transform: translateY(-6px);
}
.cd-nav-trigger span::after {
-webkit-transform: translateY(6px);
-moz-transform: translateY(6px);
-ms-transform: translateY(6px);
-o-transform: translateY(6px);
transform: translateY(6px);
}
.nav-is-visible .cd-nav-trigger span {
background-color: rgba(255, 255, 255, 0);
}
.nav-is-visible .cd-nav-trigger span::before {
-webkit-transform: translateY(0) rotate(-45deg);
-moz-transform: translateY(0) rotate(-45deg);
-ms-transform: translateY(0) rotate(-45deg);
-o-transform: translateY(0) rotate(-45deg);
transform: translateY(0) rotate(-45deg);
}
.nav-is-visible .cd-nav-trigger span::after {
-webkit-transform: translateY(0) rotate(45deg);
-moz-transform: translateY(0) rotate(45deg);
-ms-transform: translateY(0) rotate(45deg);
-o-transform: translateY(0) rotate(45deg);
transform: translateY(0) rotate(45deg);
}
@media only screen and (min-width: 1024px) {
.cd-nav-trigger {
display: none;
}
}
.cd-nav-trigger {
-webkit-transition: -webkit-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
.cd-nav-trigger:hover {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
cursor:pointer;
}
.cd-main-nav {
position: fixed;
z-index: 1001;
top: 0;
right: 0;
width: 260px;
height: 100vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
visibility: hidden;
background: #1e262c;
-webkit-transition: visibility 0s 0.3s;
-moz-transition: visibility 0s 0.3s;
transition: visibility 0s 0.3s;
}
.cd-main-nav a {
display: block;
font-size: 1.1rem;
padding: .9em 2em .9em 1em;
border-bottom: 1px solid #33414a;
color: #ffffff;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
}
.cd-main-nav a.current {
font-weight:bold;
color: #29c9e6;
}
.cd-main-nav li ul {
position: absolute;
top: 0;
left: 0;
width: 100%;
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
-webkit-transform: translateX(260px);
-moz-transform: translateX(260px);
-ms-transform: translateX(260px);
-o-transform: translateX(260px);
transform: translateX(260px);
}
.cd-main-nav.nav-is-visible {
visibility: visible;
-webkit-transition: visibility 0s 0s;
-moz-transition: visibility 0s 0s;
transition: visibility 0s 0s;
}
.cd-main-nav.moves-out > li > a {
/* push the navigation items to the left - and lower down opacity - when secondary nav slides in */
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0;
}
.cd-main-nav.moves-out > li > ul {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.cd-main-nav .cd-subnav-trigger, .cd-main-nav .go-back a {
position: relative;
}
.cd-main-nav .cd-subnav-trigger::before, .cd-main-nav .cd-subnav-trigger::after, .cd-main-nav .go-back a::before, .cd-main-nav .go-back a::after {
/* arrow icon in CSS */
content: '';
position: absolute;
top: 50%;
margin-top: -1px;
display: inline-block;
height: 2px;
width: 10px;
background: #485c68;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-main-nav .cd-subnav-trigger::before, .cd-main-nav .go-back a::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-main-nav .cd-subnav-trigger::after, .cd-main-nav .go-back a::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.cd-main-nav .cd-subnav-trigger::before, .cd-main-nav .cd-subnav-trigger::after {
/* arrow goes on the right side - children navigation */
right: 20px;
-webkit-transform-origin: 9px 50%;
-moz-transform-origin: 9px 50%;
-ms-transform-origin: 9px 50%;
-o-transform-origin: 9px 50%;
transform-origin: 9px 50%;
}
.cd-main-nav .go-back a {
padding-left: 2em;
}
.cd-main-nav .go-back a::before, .cd-main-nav .go-back a::after {
/* arrow goes on the left side - go back button */
left: 20px;
-webkit-transform-origin: 1px 50%;
-moz-transform-origin: 1px 50%;
-ms-transform-origin: 1px 50%;
-o-transform-origin: 1px 50%;
transform-origin: 1px 50%;
}
.cd-main-nav .placeholder {
/* never visible or clickable- it is used to take up the same space as the .cd-subnav-trigger */
display: none;
}
@media only screen and (min-width: 1024px) {
.cd-main-nav {
position: static;
visibility: visible;
width: 100%;
height: 80px;
line-height: 80px;
/* padding left = logo size + logo left position*/
padding: 0 5% 0 calc(5% + 124px);
background: transparent;
text-align: right;
}
.cd-main-nav li {
display: inline-block;
height: 100%;
padding: 0 .4em;
}
.cd-main-nav li a {
display: inline-block;
padding: .5em;
line-height: 1;
font-size: 0.8rem;
border-bottom: none;
/* Prevent .cd-subnav-trigger flicker is Safari */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.cd-main-nav li a:not(.cd-subnav-trigger):hover {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
opacity: .6;
}
.cd-main-nav .go-back {
display: none;
}
.cd-main-nav .cd-subnav-trigger {
z-index: 1001;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 5em;
-webkit-transition: border 0.3s;
-moz-transition: border 0.3s;
transition: border 0.3s;
}
.cd-main-nav .cd-subnav-trigger:hover {
border-color: rgba(255, 255, 255, 0.4);
}
.cd-main-nav .cd-subnav-trigger::before, .cd-main-nav .cd-subnav-trigger::after {
top: 18px;
right: 17px;
background-color: #ffffff;
/* change transform-origin to rotate the arrow */
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: -webkit-transform 0.3s, width 0.3s, right 0.3s;
-moz-transition: -moz-transform 0.3s, width 0.3s, right 0.3s;
transition: transform 0.3s, width 0.3s, right 0.3s;
}
.cd-main-nav .cd-subnav-trigger::before {
right: 23px;
}
.cd-main-nav .cd-subnav-trigger, .cd-main-nav .placeholder {
padding-right: 2.4em;
padding-left: 1.1em;
}
.cd-main-nav li ul {
height: 80px;
background-color: #6fa8a9;
/* padding left = logo size + logo left position*/
padding: 0 5% 0 calc(5% + 124px);
-webkit-transform: translateY(-80px);
-moz-transform: translateY(-80px);
-ms-transform: translateY(-80px);
-o-transform: translateY(-80px);
transform: translateY(-80px);
-webkit-transition: -webkit-transform 0.3s 0.2s;
-moz-transition: -moz-transform 0.3s 0.2s;
transition: transform 0.3s 0.2s;
}
.cd-main-nav li ul li {
opacity: 0;
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
-o-transform: translateY(-20px);
transform: translateY(-20px);
-webkit-transition: -webkit-transform 0.3s 0s, opacity 0.3s 0s;
-moz-transition: -moz-transform 0.3s 0s, opacity 0.3s 0s;
transition: transform 0.3s 0s, opacity 0.3s 0s;
}
.cd-main-nav .placeholder {
/* never visible or clickable- it is used to take up the same space as the .cd-subnav-trigger */
display: block;
visibility: hidden;
opacity: 0;
pointer-event: none;
}
.cd-main-nav.moves-out > li > a {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
.cd-main-nav.moves-out > li > ul {
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.cd-main-nav.moves-out > li ul li {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition: -webkit-transform 0.3s 0.2s, opacity 0.3s 0.2s;
-moz-transition: -moz-transform 0.3s 0.2s, opacity 0.3s 0.2s;
transition: transform 0.3s 0.2s, opacity 0.3s 0.2s;
}
.cd-main-nav.moves-out .cd-subnav-trigger::before, .cd-main-nav.moves-out .cd-subnav-trigger::after {
width: 14px;
right: 17px;
}
.cd-main-nav.moves-out .cd-subnav-trigger::before {
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
transform: rotate(225deg);
}
.cd-main-nav.moves-out .cd-subnav-trigger::after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
}
.cd-main-content::before {
/* never visible - this is used in jQuery to check the current MQ */
display: none;
content: 'mobile';
}
@media only screen and (min-width: 1024px) {
.cd-main-content::before {
content: 'desktop';
}
}
.cd-main-content {
position: relative;
z-index: 1002;
padding-top: 50px;
padding-bottom:50px;
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
}
.nav-nobg .cd-main-content {
padding-top: 0px;
}
.main-nopadding .cd-main-content {
padding-top: 0px;
padding-bottom: 0px;
}
.cd-main-content.nav-is-visible {
-webkit-transform: translateX(-260px);
-moz-transform: translateX(-260px);
-ms-transform: translateX(-260px);
-o-transform: translateX(-260px);
transform: translateX(-260px);
}
@media only screen and (min-width: 1024px) {
.cd-main-content {
padding-top: 80px;
}
.nav-nobg .cd-main-content {
padding-top: 0px;
}
.main-nopadding .cd-main-content {
padding-top: 0px;
padding-bottom: 0px;
}
.cd-main-content.nav-is-visible {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
}
.no-js .cd-nav-trigger, .no-js .cd-subnav-trigger {
display: none;
}
.no-js header {
position: relative;
height: auto;
}
.no-js .cd-logo img {
margin-bottom: 14px;
}
.no-js .cd-main-nav {
position: static;
width: 100%;
height: auto;
visibility: visible;
overflow: visible;
}
.no-js .cd-main-nav li {
display: inline-block;
}
.no-js .cd-main-nav li:last-child {
display: block;
}
.no-js .cd-main-nav .go-back {
display: none;
}
.no-js .cd-main-nav li ul {
position: static;
width: 100%;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
@media only screen and (min-width: 1024px) {
.no-js .cd-main-nav {
height: 80px;
}
.no-js .cd-main-nav li ul {
position: absolute;
top: 80px;
}
.no-js .cd-main-nav li ul li {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
.no-js .cd-main-nav li ul li:last-child {
display: none;
}
}
.no-js .cd-main-content {
padding-top: 0;
}
@media only screen and (min-width: 1024px) {
.no-js .cd-main-content {
padding-top: 80px;
}
}
.cd-top {
z-index:2000;
display: inline-block;
height: 40px;
width: 40px;
position: fixed;
bottom: 40px;
right: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
/* image replacement properties */
overflow: hidden;
border-radius:50%;
text-indent: 100%;
white-space: nowrap;
background: rgba(40,200,230, 0.8) url(../../pics/maquette/top_arrow.svg) no-repeat center 50%;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
/* the button becomes visible */
visibility: visible;
opacity: 1;
}
.cd-top.cd-fade-out {
/* if the user keeps scrolling down, the button is out of focus and becomes less visible */
opacity: .5;
}
.no-touch .cd-top:hover {
background-color: #e86256;
opacity: 1;
}
@media only screen and (min-width: 768px) {
.cd-top {
right: 20px;
bottom: 20px;
}
}
@media only screen and (min-width: 1024px) {
.cd-top {
height: 60px;
width: 60px;
right: 30px;
bottom: 30px;
}
}
/* --------------------------------
INTRO - ANIMATED ARROW FOR SCROLL
-------------------------------- */
@-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
transform: translateY(-15px);
}
}
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
.arrow_down {
background-image: url("../../pics/maquette/arrow_down.png");
}
.goto {
display: inline-block;
width: 48px;
height: 48px;
z-index: 200;
}
#intro .goto {
position: absolute;
bottom: 40px;
cursor:pointer;
left: calc(50% - 24px);
-webkit-transition: opacity 1s;
-moz-animation: bounce 2s infinite;
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
@media (min-width: 992px)
#intro .goto {
bottom: 24px;
left: calc(50% - 18px);
width: 36px;
height: 36px;
opacity: 0;
}
@media (min-width: 1200px)
#intro .goto {
bottom: 24px;
left: calc(50% - 24px);
width: 48px;
height: 48px;
}
@media (min-width:80em){
#intro .goto {
bottom: 20px;
}
}
.text_previous .grid {margin-bottom:30px;}
.text_previous h2 {font-size:5rem;color:#29c9e6;}
.text_previous h3 {font-size:1.8rem;color:#81aaab;}
.text_previous h4 {font-size:1.3rem;color:#2c4f4f;}
.text_previous h5 {font-size:1.1rem;color:#2c4f4f;}
.text_payment h2 {font-size:3rem;color:#29c9e6;}
.nomobile {display:block;}
.onlymobile,.mobileonly {display:none;}
@media only screen and (max-width: 660px) { .nomobile {display:none;}
.onlymobile,.mobileonly {display:block;}}
.visible_mobile {display:none;}
.visible_desktop {display:inline;}
@media only screen and (max-width: 660px) {
.visible_mobile {display:inline;}
.visible_desktop {display:none;}
}
.rotators .rotator { display: none; }
.rotators { min-height:220px;}
.rotators.small { min-height:70px;}
@media only screen and (max-width: 840px) {.rotators { min-height:300px}}
@media only screen and (max-width: 30em) {.rotators { min-height:460px}}
footer p {font-size: 0.8rem;line-height: 1.0rem;margin-bottom:7px;}
footer a:hover {color:#29c9e6;font-weight:bold}
footer .notice {font-size: 0.75rem;color:#CCC}
footer a.notice:hover {color:#CCC;font-weight:normal;cursor:text}
footer {font-size: 1.2rem;}
footer h3 {font-family: "Oswald";font-weight: 300;color:#81aaab;padding-bottom:10px;margin-bottom:20px;border-bottom:2px solid #81aaab}
footer .copyright {margin-top:20px;padding-top:15px;font-size:0.6rem;border-top:1px solid #333;color:#555;text-align:right;padding-bottom:20px;}
footer .copyright a {color:#666;-webkit-transition:color .24s;-o-transition:color .24s;transition:color .24s}
footer .copyright a:hover {color:#29c9e6;}
footer h3 a {color:white}
footer h3 a:hover {font-weight:400}
#page_planning .heure {font-weight:bold;font-size:0.9rem;color:#3e7071;}
#page_planning .genre {font-size:0.8rem;color:#81aaab;}
#page_planning .planning_daybyday .genre {color:white;padding:1px 4px;background:#29c9e6}
#page_planning .date {background-color:#29c9e6;padding:2px 10px;font-size:1.3rem;color:white;margin-bottom:10px}
#page_planning .planning_daybyday .date {background-color:#555;}
#page_planning .planning_network .date,#page_planning .planning_net .date,#page_planning .planning_daybyday .planning_net .genre {background-color:#29e6dc;}
#page_planning .planning_dj .date,#page_planning .planning_daybyday .planning_dj .genre {background-color:#29e66e;}
#page_planning .planning_event .date,#page_planning .planning_daybyday .planning_event .genre {background-color:#c629e6;}
#page_planning .planning_workshop .date,#page_planning .planning_work .date,#page_planning .planning_daybyday .planning_work .genre {background-color:#e6a129;}
#page_planning .planning_conference .date,#page_planning .planning_conf .date,#page_planning .planning_daybyday .planning_conf .genre {background-color:#299ce6;}
#page_planning .titre {font-size:1.1rem;line-height:1.4rem}
#page_planning .planning_network .titre,#page_planning .planning_net .titre {color:#29e6dc}
#page_planning .planning_workshop .titre,#page_planning .planning_work .titre {color:#e6a129}
#page_planning .planning_event .titre {color:#c629e6}
#page_planning .planning_conference .titre,#page_planning .planning_conf .titre {color:#299ce6}
#page_planning .planning_dj .titre {color:#29e66e}
#page_planning .desc {font-size:0.9rem;color:#333;}
#page_planning .news_bloc {margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #AAA;}
#page_planning .planning_daybyday .news_bloc {border:0px;box-shadow: 1px 5px 5px #DDD;padding-right:15px}
#page_planning .showme {font-weight:bold;padding:3px 5px;background-color:#29c9e6;color:white;}
#page_planning .planning_conference .showme,#page_planning .planning_conf .showme {background-color:#299ce6;}
#page_planning .planning_network .showme,#page_planning .planning_net .showme {background-color:#29e6dc;}
#page_planning .planning_workshop .showme,#page_planning .planning_work .showme {background-color:#e6a129;}
#page_planning .planning_event .showme {background-color:#c629e6;}
#page_planning .planning_dj .showme {background-color:#29e66e;}
#page_planning .hideme {display:none;font-weight:bold;padding:3px 7px;background-color:#81aaab;color:white}
#page_planning .showme:hover,#page_planning .hideme:hover {cursor:pointer}
#page_planning .planning_genre_lusafro .news_bloc {background:url(../../pics/maquette/logo_lusafro.jpg) top right no-repeat}
#page_planning .news_bloc img {width:25%;margin:5px 0px 10px 10px}
#page_planning .planning_intro .news_bloc {margin-bottom:15px}
#page_planning .content.planning_intro {margin-bottom:5px;padding-bottom:0px;}
#page_planning .planning_options {font-size:0.85rem;line-height:1.5rem}
#page_planning .planning_options span {padding:2px 6px;border:1px solid #AAA}
#page_planning .planning_options span:hover {cursor:pointer;background:#ccedf3}
#page_planning .day {float: left; width: 30%; margin-right: 2%;}
#page_planning .planning_colonne .day:nth-child(5),#page_planning .planning_colonne .day:nth-child(8),#page_planning .planning_colonne .day:nth-child(11),#page_planning .planning_colonne .day:nth-child(14),#page_planning .planning_colonne .day:nth-child(17) {clear:left;}
#page_planning .planning_colonne {clear:left;}
.who .hideme {font-size:0.9rem;display:none;font-weight:bold;padding:3px 7px;background-color:#81aaab;color:white}
.who .showme:hover,.who .hideme:hover {cursor:pointer}
.who .planning_genre_lusafro .news_bloc {background:url(../../pics/maquette/logo_lusafro.jpg) top right no-repeat}
.who .news_bloc img {width:25%;margin:5px 0px 10px 10px}
.who .news_bloc {font-size:1.6em;line-height:1.6em;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #AAA;}
.who .planning_daybyday .news_bloc {border:0px;box-shadow: 1px 5px 5px #DDD;padding-right:15px}
.who .showme {font-size:0.9rem;font-weight:bold;padding:3px 5px;background-color:#29c9e6;color:white;}
.who .letexte {font-size:0.8rem;line-height:1.2rem}
.who .pays {color:#09a9c6}
.who .news_bloc .photo {width:120px}
@media only screen and (max-width: 840px) {
#page_planning .day {float: none; width: 97%; margin-right: 0%;margin-left:0%}
#page_planning .planning_daybyday .news_bloc {box-shadow: 3px 5px 5px #DDD;padding-right:25px}
}
#page_planning .content {padding-bottom:1rem}
@media only screen and (max-width: 840px) { #page_planning .news_bloc img {width:15%;}}
.palette {
color:black;
z-index:2000;
display: inline;
height: 50px;
width: 60px;
position: fixed;
bottom: 20px;
left: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
/* image replacement properties */
text-indent: 100%;
background: black;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
font-size:0.7rem;
}
.palette.palette_options {width:300px;}
.palette.cd-is-visible, .palette.cd-fade-out, .no-touch .palette:hover {
-webkit-transition: opacity .3s 0s, visibility 0s 0s, width .6s 0s, height .6s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s, width .6s 0s, height .6s 0s;
transition: opacity .3s 0s, visibility 0s 0s, width .6s 0s, height .6s 0s;
}
.palette.cd-is-visible {
/* the button becomes visible */
visibility: visible;
opacity: 1;
}
.palette.cd-fade-out {
/* if the user keeps scrolling down, the button is out of focus and becomes less visible */
opacity: .60;
}
.palette:hover {
background-color: black;
opacity: 1;
height:80px;
}
.no-touch .palette:hover {
background-color: #e86256;
opacity: 1;
height:80px;
}
@media only screen and (min-width: 768px) {
.palette {
right: 20px;
bottom: 20px;
}
}
@media only screen and (min-width: 1024px) {
.palette {
height: 50px;
width: 65px;
left: 50px;
bottom: 30px;
}
.palette.palette_options {width:600px;}
}
.palette .sommaire {position:absolute;top:0px;left:10px;line-height:0.8rem;}
.palette .sommaire a {margin-right:4px;color:black;padding:1px 5px;background:#7eb124}
.palette .sommaire a.byday {color:black;background:#DDD;}
.palette .sommaire a:hover {background:#555}
.palette .sommaire a.byday:hover {background:#FFF;}
.palette .sommaire .planning_conf,.palette .sommaire .planning_conference {background-color:#299ce6;}
.palette .sommaire .planning_network,.palette .sommaire .planning_net {background-color:#29e6dc;}
.palette span {margin-right:4px;font-weight:bold;padding:1px 15px;cursor:pointer}
.palette .toshow {background-color:#bbbd2b;}
.palette .toshow:hover {background-color:#9b9d0b;}
.palette .tohide {background-color:#de9523;}
.palette .tohide:hover {background-color:#be7503;}
.palette .sommaire .planning_sc {background-color:#29c9e6;}
.palette .sommaire .planning_workshop {background-color:#e6a129;}
.palette .sommaire .planning_event,.palette .sommaire .planning_offi {background-color:#c629e6;}
.palette .sommaire .planning_dj {background-color:#29e66e;}
.palette .icone {color:black;background:yellow;}
.palette .options{margin-right:0px;padding:0px;font-weight:normal;line-height:1.2rem}
.highlights b {font-size:1.8em;font-weight:bold}
.highlights span {padding:0 15px}
.page_album .album .legend {top: -42px;
position: relative;display:inline;
left: 10px;font-size:0.9em;color:white;padding:0px 3px; -webkit-transition: background-color 0.3s ease-in; transition: background-color 0.3s ease-in;}
.album:hover .legend {background-color:#29c9e6;}
.page_album .album_album_year .legend {top: -155px;left: 20px;color:blue;font-size:4em;font-family:'Oswald',sans-serif;font-weight:700;color:#29c9e6;}
.page_album .album_album_year .planning {top: -160px; position: relative;display:inline; left: 20px;font-size:0.9em;color:white;line-height:0.5em;font-size:1.3em;color:white;}
.page_album .album_album_year .planning span {color:#29c9e6;}
.page_album .album_album_year:hover .legend {background-color:transparent}
.ink_blue .banner {color:#114c4f}
#imagelightbox-caption { background:url(../../pics/maquette/pattern_5.png) top left repeat;}
.imagelightbox-arrow:active,.imagelightbox-arrow { background-color: transparent; }
.imagelightbox-arrow-right:before {border-left-color: #4a8586;}
.imagelightbox-arrow-left:before {border-right-color: #4a8586;}
button.imagelightbox-arrow {border:0}
.imagelightbox-arrow:hover,.imagelightbox-arrow:focus { background:url(../../pics/maquette/pattern_6.png) top left repeat; }
.imagelightbox-arrow:hover.imagelightbox-arrow-left:before,.imagelightbox-arrow:focus.imagelightbox-arrow-left:before {border-right-color: #FFF;}
.imagelightbox-arrow:hover.imagelightbox-arrow-right:before,.imagelightbox-arrow:focus.imagelightbox-arrow-right:before {border-left-color: #FFF;}
@media only screen and (max-width: 600px) {
.page_album .col-1-4.album{width:100%}
}
.page_album .album_annees {color:white}
.page_album .album_annees a {padding:1px 4px; -webkit-transition: background-color 0.3s ease-in; transition: background-color 0.3s ease-in;}
.page_album .album_annees .album_annees_current {padding:0px}
.page_album .album_annees a:hover {background-color:#29c9e6;font-weight:bold}
.page_album .album_annees .col-1-4 {padding:15px 0px}
@media only screen and (max-width: 800px) {
.page_album .album_annees .grid{padding-top:90px}
.page_album .album_annees_bottom .grid{padding-top:15px}
.page_album .album_annees .col-1-4 {padding:5px 0px;margin-bottom:0px}
.page_album .poster.album_annees {padding-bottom:15px}
}
.fond_fonce {background-color:#1c3232}
pre {font-family:inherit;font-size:inherit;white-space: pre-line}
.footer_chasse {margin-left:90px}
@media only screen and (max-width: 1170px) {
.footer_chasse {margin-left:20px}
}