/* Artfully masterminded by ZURB  */

/* -------------------------------------------------- 
   Table of Contents
-----------------------------------------------------
 * CH01 - Animations
 * CH02 - Gestion row

 */

/* CH01 - ANIMATIONS
/* ---------------------------------------------------------------------------------- */
#anchor,
.animation,
.btn-subscribe {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}


/* CH02 - GESTION ROW
/* ---------------------------------------------------------------------------------- */
body {
    height:100%;
    background:#ccc;
    font-size:16px;
    color:#000;
}

/*ROW 1920
/* -------------------------- */
.row-1920 .row {max-width:120rem;}

.lt-ie8 .row-1920 .row {
    max-width:1920px;
    width:auto;
}

/* ROW 1560
/* -------------------------- */
.row-1560 .row {max-width:97.5rem;}

.lt-ie8 .row-1560 .row {
    max-width:1560px;
    width:auto;
}

/* ROW 1440
/* -------------------------- */
.row-1440 .row {max-width:90rem;}

.lt-ie8 .row-1440 .row {
    max-width:1440px;
    width:auto;
}

/* ROW 1200
/* -------------------------- */
.row-1200 .row {max-width:75rem;}

.lt-ie8 .row-1200 .row {
    max-width:1200px;
    width:auto;
}

/* ROW 1120
/* -------------------------- */
.row-1120 .row {max-width:70rem;}

.lt-ie8 .row-1120 .row {
    max-width:1120px;
    width:auto;
}

/* FLEXBOX
/* -------------------------- */
.flex-box {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction:row; 
}

/* CENTRER VERTICALEMENT
/* -------------------------- */	
.vertical-center {
    position:absolute;
    top:50%;
    left:0;
    right:0;
    margin:0 auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.lt-ie8 .vertical-center {
    position: absolute;
    height:50%;
    width:100%;
    margin: auto;
    top: 0;
    bottom: 0;
}	

/* SLIDEOUT MENU
/* -------------------------- */	
.slideout-menu {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
    width: 256px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: none;
}

.slideout-panel {
    position:relative;
    z-index: 1;
}

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {overflow: hidden;}

.slideout-open .slideout-menu {display: block;}

.menu {background: #081f3c;}

.menu-btn {
    margin-left:0;
    list-style:none;
    border-top:1px solid rgba(255,255,255,0.1);
    border-bottom:1px solid rgba(255,255,255,0.1);
}

.menu-section { margin: 20px 0;}

.menu-section-title,
.menu-btn a {
    font: 400 1em/1.5em "Roboto Condensed",Helvetica,Arial,sans-serif;
    text-transform:uppercase;
    color:#FFF;
    margin: 0;
    padding: 0 15px;
}

.menu-btn a {
    display: block;
    padding: 10px 15px;
}

.menu-btn li:not(:last-child) a {border-bottom:1px solid rgba(255,255,255,0.1);}

.menu-section-list {
    list-style: outside none none;
    margin: 5px 0;
    padding: 0;
}

.menu-section-list a,
.menu-section-list strong {
    display: block;
    padding: 5px 15px;
    font:400 0.750em/1.5em "Roboto",Helvetica,Arial,sans-serif;
    color:#777;
}

.menu-section-list strong {color:#f0e38d !important;}

.menu-btn a.on,
.menu-section-list a.on,
.menu-section-list a:hover,
.menu-btn a:hover {
    background-color: rgba(37, 170, 225, 0.1);
    /*color:#00376a;*/
    color:#fff;
}

.langues-smartphone li {text-transform:uppercase;}

.langues-smartphone .menu-section-title {color:#527782;}


/**
 * hamburger
 */
.btn-hamburger {
    z-index:10;
    border: none;
    position: absolute;
    top: 20px;
    left: 30px;
    outline:none;
    width: 120px;
    height: 40px;
}

.btn-hamburger div {
    padding-left:50px;
    margin-top:-3px;
    font: 300 1.5em/1.5em "Roboto",Helvetica,Arial,sans-serif;
    text-transform:lowercase;
    color:#FFF;
}

.page_article .btn-hamburger div {color:#081f3c;}
.page_article .btn-hamburger span,
.page_article .btn-hamburger span::before,
.page_article .btn-hamburger span::after {background-color: #081f3c;}

.btn-hamburger span {
    /* hamburger icon created in CSS */
    position: absolute;
    height: 1px;
    width: 30%;
    top: 50%;
    left: 0;
    -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: #FFF;
}

.btn-hamburger span::before,
.btn-hamburger span::after {
    /* upper and lower lines of the menu icon */
    content: '';
    position: absolute;
    left:0;
    width: 100%;
    height: 100%;
    background-color: #FFF;
    /* 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;
}

.btn-hamburger span::before {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    transform: translateY(-10px);
}

.btn-hamburger span::after {
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -ms-transform: translateY(10px);
    -o-transform: translateY(10px);
    transform: translateY(10px);
}

.btn-hamburger.active span {background-color: rgba(255, 255, 255, 0);}

.btn-hamburger.active 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);
}

.btn-hamburger.active 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);
}


/* CH?? - HEADER
/* ---------------------------------------------------------------------------------- */

#header .large-12 {
    position:relative;
    height: 100vh;
    /*background:#eee url("/IMG/bg-etoiles.jpg") no-repeat right top;*/
    background:#eee url("/IMG/bg-vague-2.jpg") no-repeat right top;
    background-size:cover;
}

#header .participants {
    height: 40vh;
    background:#eee url("/IMG/andorra500-participants.jpg") no-repeat center center;
    background-size:cover;
}

#header .logotype {
    position:relative;
    height: 47vh;
    background:#eee url("/IMG/logo-andorra500-2016.png") no-repeat center center;
    background-size:contain;
}

#header .back {
    position:absolute;
    top:20px;
    left:40px;
    display:block;
    width:50px;
    height:50px;
}


/* LANGUES
/* -------------------------- */	
.langues {
    z-index:50;
    position:absolute;
    top:29px;
    left:0;
    right:0;
    margin:0 auto;
    width:250px;
    font: 400 0.875em/1.5em "Roboto Condensed",Helvetica,Arial,sans-serif;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#FFF;
    color:rgba(255,255,255,0.7);
}

.langues a {
    padding:10px;
    color:#FFF;
    color:rgba(255,255,255,0.7);
}

.langues strong {
    font-weight:400;
    padding:10px;
    color:#FFF;
}

/* ACCROCHE H1
/* -------------------------- */
#header .title {
    padding-left:270px;
    /*background:transparent url("/IMG/picto_u-x.png") no-repeat left center;*/
    background:transparent url("/IMG/logo-x-small.png") no-repeat left center;
    background-size:contain;
    margin-left:5%;
    width:55%;
}

#header h1 {
    font:100 5em/1em "Roboto",Helvetica,Arial,sans-serif;
    letter-spacing:2px;
    /*color:#00376a;*/
    color:#2199e8;
}

#header h1 strong {
    display:block;
    padding-left:10px;
    margin-top:40px;
    font: 700 0.225em/1.5em "Roboto",Helvetica,Arial,sans-serif;
    text-transform:uppercase;
    letter-spacing:3px;
    color:#FFF;
}

#header h1 span {
    display:block;
    font-style:normal;
    color:#FFF;
}

#header h1 i {
    font-style:normal;
    color:#bbb;
}

#header .signature {
    position:absolute;
    display:block;
    margin:0 auto;
    left:0;
    right:0;
    bottom:40px;
    margin-left:5%;
    font: 300 1.5em/1.5em "Roboto Condensed",Helvetica,Arial,sans-serif;
    color:#FFF;
}

/*#header .signature:after,
#header .signature:before {
        position:absolute;
        content:"";
        top:50%;
        width:40px;
        height:1px;
    background:#FFF;
        }*/

/*#header .signature:after {left:0;}
#header .signature:before {right:0;}*/

#header .arrow {
    position:absolute;
    display:block;
    margin:0 auto;
    left:0;
    right:0;
    bottom:10px;
    width:40px;
    text-align:center;
}


/* RÉSEAUX SOCIAUX
/* -------------------------- */	
.partager {
    width:120px;
    margin-bottom:20px;
    margin-top:5px;
}

.a2a_button_facebook,
.a2a_button_twitter,
.a2a_button_google_plus {
    width:30px;
    height:30px;
    margin:0 5px;
}

.a2a_button_facebook span,
.a2a_button_twitter span,
.a2a_button_google_plus span {display:none;}

.a2a_button_facebook,
.a2a_button_twitter,
.a2a_button_google_plus {
    opacity:0.5;
    background:transparent url("/IMG/sprite-reseaux_circle%402x.png") no-repeat 0 center;
    background-size:180px 30px;
}

.a2a_button_twitter {background-position:-30px center;}
.a2a_button_google_plus {background-position:-60px center;}

.fb-icon{
    width:30px;
    height:30px;
    margin:10px 5px;
    opacity:0.5;
}

/* BOUTON
/* -------------------------- */	
.btn-subscribe {
    position:relative;
    display:block;
    height: 13vh;
    background:#00376a;
    font: 400 1.250em/1.5em "Roboto Condensed",Helvetica,Arial,sans-serif;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#FFF;
}

a:hover.btn-subscribe {
    background:#081f3c;
    color:#FFF;
}


.btn-subscribe img {
    position:absolute;
    display:block;
    width:19px;
    height: 10px;
    left:0;
    right:0;
    bottom:15px;
    margin:0 auto;
}	


/* CH?? - MAIN
/* ---------------------------------------------------------------------------------- */
#container {background:#FFF;}

#container .large-6 {
    position:relative;
    min-height:1315px;
}

.page_sommaire h2 {
    position:relative;
    margin-top:-153px;
    font: 400 5.313em/1.15em "Roboto Condensed",Helvetica,Arial,sans-serif;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#FFF;
}

.page_sommaire h2 i {
    position:relative;
    display:block;
    margin:40px auto 0;
    width:155px;
    font: 400 0.235em/1.5em "Roboto Condensed",Helvetica,Arial,sans-serif;
    font-style:normal;
    letter-spacing:2px;
}

.page_sommaire h2 i:after,
.page_sommaire h2 i:before {
    position:absolute;
    content:"";
    left:0;
    top:50%;
    width:25px;
    height:1px;
    background:#FFF;
}

.page_sommaire h2 i:before {
    left:inherit;
    right:0;
}

.page_sommaire h2 strong {font-weight: 400;}

.page_sommaire h3 {
    position:relative;
    padding-top:30px;
    margin-top:40px;
    font:400 01.375em/2em "Merriweather", Georgia, "Times New Roman", Times, serif;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#103042;
}

.page_sommaire h3:after {
    position:absolute;
    content:"";
    top:0;
    left:0;
    right:0;
    margin:0 auto;
    width:50px;
    height:1px;
    background:#cccccc;
}

.page_sommaire h4 {
    margin-top:30px;
    font: 700 1em/1.5em "Roboto Condensed",Helvetica,Arial,sans-serif;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#103042;
}

.page_sommaire .chapo p {
    padding:70px 10% 0;
    font:400 1em/2em "Merriweather", Georgia, "Times New Roman", Times, serif;
    text-align:center;
    color:#777;
}

.page_sommaire p {
    padding:0 10%;
    font:400 0.875em/2em "Merriweather", Georgia, "Times New Roman", Times, serif;
    text-align:center;
    color:#777;
}	

#container .btn-subscribe {
    display:block;
    height: 85px;
    width:270px;
    margin:70px auto 100px;
    background:none;
    border:1px solid #ddd;
    font: 400 1.429em/85px "Roboto Condensed",Helvetica,Arial,sans-serif;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#862137;
}

#container a:hover.btn-subscribe {
    border-color:#bbb;
    color:#103042;
}


/* RÉSEAUX SOCIAUX
/* -------------------------- */		
.pictures {
    background:#c3d2eb url("/IMG/nuage.jpg") no-repeat center top;
    background-size:contain;
}

.pictures .video {
    position:absolute;
    z-index:10;
    left:0;
    top:0;
    width:100%;
}

.pictures img {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
}

.pictures .flex-video {
    margin:0;
    padding-bottom:60%;
}	


/* CH?? - SPONSORS
/* ---------------------------------------------------------------------------------- */
#sponsors {
    padding:0 0 40px;
    background:#e5e5e5;
    text-align:center;
}

#sponsors .row .row {
    margin-left: 0;
    margin-right: 0;
}

#sponsors a {display:block;}

#sponsors .titre {
    border-bottom:1px solid #c3c3c3;
    margin-top:70px;
    padding-bottom:15px;
    font: 700 0.875em/1.5em "Roboto Condensed",Helvetica,Arial,sans-serif;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#000;
}

@media screen and (min-width: 64em) {
    .large-up-8 .column, .large-up-8 .columns {
        width: 12.5%;
        float: left;
    }

    .large-up-8 .column:nth-of-type(1n),
    .large-up-8 .columns:nth-of-type(1n) {clear: none; }

    .large-up-8 .column:nth-of-type(8n+1),
    .large-up-8 .columns:nth-of-type(8n+1) {clear: both; }

    .large-up-8 .column:last-child,
    .large-up-8 .columns:last-child {float: left;} 
}


/* CH?? - FOOTER
/* ---------------------------------------------------------------------------------- */
#footer {
    padding-bottom:40px;
    /*background:#0f3f8e url("/IMG/bg-footer.jpg") no-repeat center top;*/
    background:#0f3f8e url("/IMG/bg-vague.jpg") no-repeat center top;
    background-size:cover;
}

#footer .titre {
    margin-top:90px;
    padding-bottom:15px;
    font:300 1.875em/1.5em "Roboto Condensed",Helvetica,Arial,sans-serif;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#FFF;
}

#footer ul {
    list-style:none;
    margin:0;
}

#footer li {
    font:300 1em/2em "Roboto",Helvetica,Arial,sans-serif;
    color:#FFF;
}

#footer li a {color:#FFF;}

.newsletter {
    float:left;
    width:360px;
}

#session_email {
    float: left;
    height: 45px;
    width: 240px;
    padding: 0 10px;
    background: #fff;
    border:none;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    font:300 0.750em/45px "Roboto",Helvetica,Arial,sans-serif;
    color: #000;
}

.newsletter-submit {
    display: block;
    float: right;
    height:45px;
    width:120px;
    background: #00376a;
    border:none;
    font:700 0.750em/45px "Roboto Condensed",Helvetica,Arial,sans-serif;
    text-transform:uppercase;
    letter-spacing:1px;
    color: #FFF;
}

#footer .logotype {
    float:right;
    display:block;
    margin-top:90px;
}

.typo-logo {
    float:right;
    margin-top:30px;
    width:190px;
    font:300 2.250em/1em "Roboto",Helvetica,Arial,sans-serif;
    text-align:center;
    color: #FFF;
}

.typo-logo span {
    display:block;
    color: #00376a;
    letter-spacing:1.5px;
}

.typo-logo strong {
    color: #bbb;
    font-weight: 300;
}

.follow {
    float:right;
    width:218px;
}

#footer .follow .titre {
    margin-top:55px;
    padding-bottom:15px;
    font:700 0.750em/1.5em "Roboto Condensed",Helvetica,Arial,sans-serif;
    text-transform:uppercase;
    text-align:center;
    letter-spacing:4px;
    color:#f0e38d;
}

#footer .follow li {
    display:inline-block;
    margin:0 5px;
}

.follow a {
    display:block;
    width:30px;
    height:30px;
    background:transparent url("/IMG/sprite-reseaux-jaune_circle%402x.png") no-repeat 0 center;
    background-size:180px 30px;
}

.follow .twitter {background-position:-30px center;}
.follow .vimeo {background-position:-90px center;}
.follow .youtube {background-position:-120px center;}
.follow .instagram {background-position:-150px center;}

.designby {
    margin-top:40px;
    font:400 0.750em/1.5em "Roboto",Helvetica,Arial,sans-serif;
    color: #FFF;
}

.designby a {
    color: #FFF;
    font-style:italic;
}


/* CH?? - PAGE ARTICLE
/* ---------------------------------------------------------------------------------- */
.page_article #header .large-9 {
    position:relative;
    height: 350px;
    /*background:#eee url("/IMG/article_default.jpg") no-repeat center center;*/
    background:#eee url("/IMG/bg-poisson.jpg") no-repeat center center;
    background-size:cover;
    text-align:center;
}

.page_article #header .large-3 {
    position:relative;
    height: 350px;
}

.page_article #header .logotype {
    position:absolute;
    top:0;
    left:0;
    right:0;
    height: 80%;
    background:#eee url("/IMG/logo-connexion-digitale-ux_header.jpg") no-repeat center center;
    background-size:cover;
}

.page_article #header .btn-subscribe {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height: 20%;
}

.page_article .large-5 img {
    position:relative;
    margin-top:35px;
}

.page_article .large-7 .row {
    margin:35px 0 0;
    padding-bottom:60px;
    background:#FFF;
}

.page_article .partager-main {
    padding:65px 0 60px;
    border-bottom:1px solid #e5e5e5;

}

.page_article .a2a_button_facebook,
.page_article .a2a_button_twitter,
.page_article .a2a_button_google_plus {
    background:transparent url("/IMG/sprite-reseaux-gris_circle%402x.png") no-repeat 0 center;
    background-size:180px 30px;
}

.page_article .a2a_button_twitter {background-position:-30px center;}
.page_article .a2a_button_google_plus {background-position:-60px center;}

.page_article #container {background:#e7e7e7 url("/IMG/bg-main.jpg") repeat left top;}

.page_article h1 {
    margin:60px 0 30px;
    font:700 2.50em/1.25em "Roboto Condensed",Helvetica,Arial,sans-serif;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#000;
}

.page_article h2 {
    position:relative;
    margin:45px 0 25px;
    padding-top:45px;
    font:700 1.250em/1.25em "Roboto Condensed",Helvetica,Arial,sans-serif;
    text-transform:uppercase;
    text-align:left;
    letter-spacing:0.5px;
    color:#000;
}

/*.page_article h2:after {
        position:absolute;
        content:"";
        top:0;
        left:0;
        right:0;
        margin:0 auto;
        width:50px;
        height:1px;
    background:#cccccc;
        }*/

.page_article h3 {
    margin:40px 0 15px;
    font:400 1.125em/1.25em "Roboto Condensed",Helvetica,Arial,sans-serif;
    text-align:left;
    color:#000;
}

.page_article #container .chapo p {
    padding:0;
    margin-bottom:30px;
    font:300 1.250em/1.75em "Roboto",Helvetica,Arial,sans-serif;
    text-align:left;
    color:#000;
}

.page_article #container p,
.page_article #container ul {
    font:300 1em/2em "Roboto",Helvetica,Arial,sans-serif;
    color:#222;
}

.page_article #container ul {list-style:circle;}

.page_article #container p strong,
.page_article #container ul strong {
    color:#000;
    font-weight:400;
}

.page_article #container p a,
.page_article #container ul a,
.page_article #container .texteencadre-spip a {
    color: #00376a;
    font-style: italic;
    font-weight:400;
    text-decoration: none;
    border-bottom:1px solid #bbb;
}

.page_article #container .texteencadre-spip {
    font:300 1em/2em "Roboto",Helvetica,Arial,sans-serif;
    color:#222;
    border:none;
    display: block;
    margin: 1.5em 0;
    padding: 10px 0 10px 20px ;
    background:none;
    border-left: 3px solid #00376a;
}

.page_article #container .texteencadre-spip strong {
    color:#000;
    font-weight:400;
}	

.page_article #container .texteencadre-spip ul.spip {
    font:300 1em/2em "Roboto",Helvetica,Arial,sans-serif;
    color:#222;
    margin-left: 0;
    padding-left:15px;
}	

.cs_blocs {
    display: block;
    border-bottom: 1px solid #ddd;
}

.cs_blocs h3 {
    padding-left:0;
    margin:0;
    letter-spacing:normal;
    font-size:1em;
}

.cs_blocs h3 a {
    display:block;
    padding: 15px 0 15px 30px;
    font:400 1em/2em "Roboto Condensed",Helvetica,Arial,sans-serif;
    text-decoration: none !important;
    text-transform:uppercase;
    color: #000;
}

.cs_blocs h3 a strong {
    font-weight:400;
    color: #00376a;
}

.cs_blocs p + h3 {padding-top:1.5em;}
.cs_blocs h3 + p {padding-top:0.5em;}

.blocs_destination {padding:30px;}		
.cs_blocs .blocs_replie {
    background: transparent url("/IMG/croix%402x.gif") no-repeat scroll 7px center !important;
    background-size:11px 11px !important;
}
.cs_blocs .blocs_titre {
    background: rgba(0,0,0,0.08) url("/IMG/croix-open%402x.gif") no-repeat scroll 7px center;
    background-size:11px 11px;
}


.page_article blockquote {
    padding:0;
    margin-bottom:30px;
    border:none;
    font:300 2em/1.65em "Roboto",Helvetica,Arial,sans-serif;
    text-align:left;
    color:#222;
}

.page_article cite {
    position:relative;
    padding-left:17px;
    font:400 0.750em/1.5em "Roboto Condensed",Helvetica,Arial,sans-serif;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#00376a;
}

.page_article cite::before {
    position:absolute;
    left:0;
    top:0;
    content: "—";
    letter-spacing:normal;
}	

.page_article #container p .submit {
    display:block;
    width:100%;
    padding:0;
    margin-top:70px;
    background:#f0e38d;
    border: none;
    font: 400 1.25em/85px "Roboto Condensed",Helvetica,Arial,sans-serif;
    text-transform:uppercase;
    text-align:center;
    text-decoration:none;
    letter-spacing:2px;
    color: #000;
}

.page_article #container p .submit + .submit {
    margin-top:20px;
    background:#dfdfdf;
}

#photos {
    background:#e7e7e7 url("/IMG/bg-main.jpg") repeat left top;
    padding-top:150px;
}

.art-suite {
    /*margin-top:80px;*/
    border-top: 1px solid #e5e5e5;
}

.prev,
.next {
    float:left;
    width:49%;
    padding:20px 0;
    font:700 0.750em/1.5em "Roboto Condensed",Helvetica,Arial,sans-serif;
    text-transform:uppercase;
    text-align:left;
    letter-spacing:0.5px;
    color:#000;
}

.next {
    float:right;
    text-align:right;
}

.hashtag {
    background:#FFF;
    padding-left:8.333%;
}

.hashtag a {
    display:inline-block;
    padding:20px 0 20px 70px;
    margin-bottom:15px;
    margin-left:-19px;
    background: transparent url("/IMG/picto-twitter.jpg") no-repeat left 8px;
    background-size:58px 59px;
    font:400 1.5em/1.5em "Roboto",Helvetica,Arial,sans-serif;
    color:#86bdf0;
}

.twitter-area {
    position:relative;
    padding:55px 0;
    background:#94b9db url("/IMG/bg-twitter.jpg") repeat left top;
    background-size:180px 180px;
}

.twitter-area::after {
    position:absolute;
    top:0;
    left:8.333%;
    content:"";
    width:19px;
    height:9px;
    background:transparent url("/IMG/encoche.png") no-repeat left top;
    background-size:19px 9px;
}

.twitter-area iframe {
    display:block !important;
    margin-left: auto;
    margin-right: auto;
    width: 65% !important;
}


/* CH?? - PAGE RUBRIQUE
/* ---------------------------------------------------------------------------------- */
.page_rubrique #container ul {
    margin-left:0;
    list-style:none;
    font-size:0.875em;
}

.page_rubrique #container h2 {
    font-size:1.714em;
}

.page_rubrique #container h2 a {
    font-style:normal;
    text-decoration:none;
    border:none;
}

.page_rubrique .date {
    color: #444;
    font: 700 0.875em/1.5em "Roboto Condensed",Helvetica,Arial,sans-serif;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.page_rubrique #container ul p {
    margin-bottom:0.25rem;
    font-size:1em;
}


/* -----------------------------------------
   PAGE FORMULAIRE
----------------------------------------- */
.formulaire_formidable  {margin-top:20px;}

.formulaire_formidable br {display:none;}

.page_formulaire #container h2,
.page_formulaire #container h3 {
    margin:45px 0 25px;
    font:700 1em/1.5em "Roboto Condensed",Helvetica,Arial,sans-serif;
    text-transform:uppercase;
    text-align:left;
    letter-spacing:1px;
    color:#000;
}

label,
select {
    display:block;
    font:400 1em/1.5em "Roboto",Helvetica,Arial,sans-serif;
    color:#000;
}

fieldset {
    padding:0;
    margin-top:35px;
    margin-bottom:15px;
    border:none;
}

select {
    height: 50px;
    margin-bottom: 0.25em;
    margin-top: 0.35em;
    padding: 10px;
    border:1px solid #ccc;
}

.formulaire_formidable fieldset .editer {
    float:left;
    width:48%;
    margin-right:2%;
    margin-top:25px;
    list-style:none;
}

.formulaire_formidable fieldset .editer:nth-child(2n+0) {
    float:left;
    width:48%;
    margin-left:2%;
    margin-right:0;
}

/* Arrangement Fieldset 2 */
.formulaire_formidable .fieldset_fieldset_2 .editer {
    width:100%;
    margin-right:0;
}

.formulaire_formidable .fieldset_fieldset_2 .editer:nth-child(2n+0) {
    width:50%;
    margin-left:0;
}
/*Fin */

.formulaire_formidable .saisie_textarea {
    margin:1.125em 0 0;
    width:100% !important;
}

textarea {min-height:200px;}

.formulaire_formidable textarea,
.formulaire_formidable input[type="text"] {
    float:none;
    width:100%;
    height:50px;
    padding:1em;
    margin-top:0.35em;
    border:1px solid #ccc;
    font: 400 0.875em/1.5em "Roboto",Helvetica,Arial,sans-serif;
    color:#000;
}

.formulaire_spip input.date {width:100% !important;}
img.ui-datepicker-trigger {
    display:inline-block !important;
    margin-left: -25px !important;
}

.page_article #container .formulaire_formidable input[type="submit"] {
    width:100%;
    padding:0;
    margin-top:70px;
    background:#00376a;
    border: none;
    font: 400 1.25em/85px "Roboto Condensed",Helvetica,Arial,sans-serif;
    text-transform:uppercase;
    letter-spacing:2px;
    color: #FFF;
}

#container p.boutons {
    font-size:1em;
    padding:0;
}

.reponse_formulaire_erreur p {
    background:#ddd;
    padding:15px !important;
    color:#ff2c14 !important;
    font-size:1.125em !important;
}

.erreur_message {
    position:absolute;
    left:0;
    bottom:-23px;
    font:400 0.688em/1.5em "Roboto",Helvetica,Arial,sans-serif;
    color:#ff2c14;
}

p.reponse_formulaire_ok {
    font:400 0.813em/1.5em "Roboto",Helvetica,Arial,sans-serif;
    color: #f0e38d;
}

p.reponse_formulaire_ok b {
    font-weight:400;
    color: #FFF;
}


/* CH?? - DIVERS
/* ---------------------------------------------------------------------------------- */

/* LAZY LOAD
/* -------------------------- */
img.lazy {
    opacity: 0;
    transition: opacity .65s ease-in;
}


/* ANCHOR
/* -------------------------- */
.cd-top {
    display: inline-block;
    z-index:100;
    height: 60px;
    width: 60px;
    position: fixed;
    bottom: 10px;
    right: 10px;
    /* image replacement properties */
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background: #000 url("/IMG/arrow-up%402x.png") no-repeat center center;
    background-size:16px 9px;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.cd-top.cd-is-visible,
.cd-top.cd-fade-out,
.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 {
    visibility: visible;
    opacity: 1;
}

.cd-top.cd-fade-out {opacity: .5;}

.cd-top:hover {
    background-color: #000;
    opacity: 1;
}


/* CH?? - RESET SPIP
/* ---------------------------------------------------------------------------------- */
figure {margin:0;}

.adapt-img-wrapper,
.adapt-img-wrapper::after {width:100%;}

#container p > span {line-height:0; display:block; margin:1.5em 0 !important;}

.markItUpContainer textarea {background:#FFF !important; color:#000 !important;}

#colorbox, #cboxOverlay, #cboxWrapper {
    -moz-box-sizing:content-box !important;
    -webkit-box-sizing:content-box !important;
    box-sizing: content-box !important;
}

.spip-admin-float {
    z-index:2000 !important;
    right:5% !important;
}	
.spip_documents_left,
.spip_documents_right {float:inherit !important}


/* CH?? - VISIBILITY
/* ---------------------------------------------------------------------------------- */
.show-for-medium,
.show-for-small {display:none !important;}


/* CH?? - CLASS NETTOYEUR
/* ---------------------------------------------------------------------------------- */
.nettoyeur {
    height:1px;
    line-height:0;
    clear:both;
}	


/* CH?? - MEDIA QUERIE
/* ---------------------------------------------------------------------------------- */
@media only screen and (min-width: 1920px) and (orientation: landscape) {
    body {
        max-width:1920px;
        margin:0 auto;
    }
}

/* XXX-large landscape > BREAKPOINT 1680PX */
@media only screen and (max-width: 1919px) and (min-width: 1680px) and (orientation: landscape) {
    .pictures .flex-video {padding-bottom:65%;}	
}


/* X-large landscape > BREAKPOINT 1440PX */
@media only screen and (max-width: 1679px) and (min-width: 1440px) and (orientation: landscape) {
    #container .large-6 {min-height:1345px;}
    .pictures .flex-video {padding-bottom:75%;}	

    #header .back {
        left: 20px;
        top: 15px;
    }
    #photos {padding-top: 125px;}

}


/* Widescreen landscape > BREAKPOINT 1280PX */
@media only screen and (max-width: 1439px) and (min-width: 1280px) and (orientation: landscape) {
    #container .large-6 {min-height:1375px;}
    .pictures {background-position:center 460px;}
    .pictures .flex-video {padding-bottom:75%;}	

    #header .back {
        left: 20px;
        top: 15px;
    }
    #photos {padding-top: 115px;}

}



/* Widescreen landscape > BREAKPOINT 1025PX */
@media only screen and (max-width: 1279px) and (min-width: 1024px) and (orientation: landscape) {
    .btn-hamburger div {display:none;}
    .btn-hamburger span {height: 2px;}

    #header .large-12 {height: 670px;}
    #header .participants {height: 280px;}
    #header .logotype {height: 280px;}

    .page_sommaire .chapo p {
        padding:40px 9% 0;
        font-size:0.938em;
        line-height:1.75em;
    }
    .page_sommaire p {
        line-height: 1.75em;
        padding: 0 9%;
    }
    #container .btn-subscribe {margin: 40px auto 70px;}

    #container .large-6 {min-height:1230px;}
    .pictures {background-position:center 380px;}
    .pictures .flex-video {padding-bottom:70%;}

    .page_article #header .large-9,
    .page_article #header .large-3 {height:350px;}
    #header .back {
        left: 20px;
        top: 15px;
    }
    .page_article blockquote {font-size:1.750em;}
    #photos {padding-top: 110px;}

    .formulaire_formidable br {display:block;}

}

/* ========== PASSAGE FORMAT MEDIUM ========== */	
/* Ipad Portrait  > BREAKPOINT 768PX + 800PX */
@media only screen and (max-width: 1023px) and (min-width: 640px) {
    .btn-hamburger div {display:none;}
    .btn-hamburger span {height: 2px;}

    #header .large-12 {
        height: 660px;
        background-position:right 50% top;
    }
    #header .participants {height: 290px;}
    #header .logotype {height: 290px;}

    #container .large-6 {min-height:inherit;}
    .pictures {background-position:center top;}
    .pictures .video,
    .pictures img {
        position:relative;
        top:inherit;
        bottom:inherit;
    }
    .pictures .video {
        width:70%;
        margin: 70px 15% 40px;
        padding:20px;
        background:rgba(255,255,255,0.2);
        border:1px solid #FFF;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;			
    }

    #header .back {
        left: 20px;
        top: 15px;
    }
    .page_article #container .large-5 {display:none;}
    .page_article #container .large-7 {float:inherit;}

    .page_article blockquote {font-size:1.750em;}
    #photos {padding-top: 110px;}

    .newsletter {width:320px;}
    #session_email {width:200px;}

    .formulaire_formidable br {display:block;}

    #footer .logotype {
        float:none;
        text-align:center;
    }
    .typo-logo {
        font-size:1.750em;
        width: 100%;
    }

    /* FLEX-BOX */
    .flex-box {
        display: inherit;
        position:inherit;
        -webkit-transform: none;
        -moz-transform:none;
        transform:none;
    }

    /* VISIBILITY */
    .show-for-medium {display:block !important;}
    .hide-for-medium {display:none !important;}

}


/* ========== PASSAGE FORMAT SMALL ========== */	
/* All Mobile Sizes (devices and browser) > BREAKPOINT 568PX 480PX 320PX */
@media only screen and (max-width: 639px) {
    .btn-hamburger div,
    .btn-subscribe,
    #container img {display:none;}

    .btn-hamburger span {
        height: 2px;
        width: 27%;
    }

    #header .participants,
    #header .logotype {
        display:none;
        background:none;
    }

    #container .large-6 {min-height:inherit;}
    .pictures {background-position:center top;}
    .pictures .video,
    .pictures img {
        position:relative;
        top:inherit;
        bottom:inherit;
    }
    .pictures img {display:none;}
    .pictures .video {
        background:none;
        border:none;
        border-radius: 3px;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    .page_sommaire h2 {
        margin:0;
        height:200px;
        background:transparent url("/IMG/logo-andorra500-2016.png") no-repeat center 30px;
        background-size:240px auto;
    }
    .page_sommaire h2 i,
    .page_sommaire h2 strong {display:none;}
    .page_sommaire .chapo p {
        font: 400 0.938em/1.65em "Merriweather",Georgia,"Times New Roman",Times,serif;
        padding: 30px 20px 0;
    }
    .page_sommaire p {
        line-height:1.65em;
        padding:0 15px;
    }
    #container .btn-subscribe { margin: 30px auto 50px;}

    #sponsors .titre { margin-top: 30px;}	

    #footer {
        text-align:center;
        padding-bottom:35px;
        /*background-image: url("/IMG/bg-footer-small.jpg");*/
        background-image: url("/IMG/bg-vague.jpg");
        background-position:center bottom;
    }
    #footer .titre {margin-top:50px;}
    #footer li {line-height:1.5em;}
    .newsletter {
        float:none;
        margin:0 auto;
        width:90%;
    }	
    #session_email {width:70%;}
    .newsletter-submit {
        letter-spacing:normal;
        width: 30%;
    }
    #footer .logotype,
    .typo-logo {
        float:none;
        margin:20px auto 0;
        text-align:center;
    }

    #footer .logotype {margin-top:60px;}

    #header .back {
        top:inherit;
        bottom: 20px;
        left: 0;
        margin: 0 auto;
        right: 0;
    }
    .page_article #header .large-9 {height:175px;}
    .page_article #header .large-3 {
        background:#e7e7e7 url("/IMG/bg-main.jpg") repeat left top;
        height:auto;
    }
    .page_article #header .logotype {
        position:inherit;
        display:block;
        height:220px;
        width: calc(100% - 30px);
        margin:0 auto;
        background: transparent url("/IMG/logo-cd-ux_header-small.jpg") no-repeat scroll center center;
        background-size:cover;
    }
    .page_article #header .btn-subscribe {
        position:inherit;
        height: 55px;
        width:calc(100% - 30px);
        padding-top: 10px;
        margin:0 auto;
        font-size: 1.5em;
    }
    .page_article .large-7 .row {
        margin-top:20px;
        padding-bottom:40px;
    }	
    .page_article #container .large-5 {display:none;}
    .page_article #container .large-7 img,
    .page_article #header .btn-subscribe {display:block;}
    .page_article .partager-main { padding: 35px 0 30px;}
    .page_article h1 {
        margin-top:35px;
        font-size:1.875em;
    }
    .page_article .chapo p {font-size:1em;}		
    #photos {padding-top: 50px;}
    .twitter-area iframe {width: 85% !important;}


    /* FORMULAIRE */
    .formulaire_formidable .editer,
    .formulaire_formidable .editer p {font-size:16px;}
    .formulaire_formidable fieldset .editer,
    .formulaire_formidable fieldset .editer:nth-child(2n+0) {
        width:100%;
        margin-left:0;
        margin-right:0
    }
    .reponse_formulaire_erreur p {font-size:1em !important;}
    .formulaire_formidable input[type="submit"] {
        width:100%;
        margin-top:20px;
    }


    /* VERTICAL CENTER */
    .vertical-center {
        position:inherit;
        top:inherit;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform:none;
        -o-transform:none;
        transform:none;
    }

    /* FLEX-BOX */
    .flex-box {
        display: inherit;
        position:inherit;
        -webkit-transform: none;
        -moz-transform:none;
        transform:none;
    }

    /* VISIBILITY */
    .show-for-small {display:block !important;}
    .hide-for-small {display:none !important;}
}



/* CH?? - MEDIA QUERIE 
/* ---------------------------------------------------------------------------------- */

/** 
 * 800 x 600 with portrait orientation.
 */
@media all and (device-width: 800px) and (device-height: 600px) and (orientation:landscape){

}

/** 
 * iPad with landscape orientation.
 */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape){

}


/* -----------------------------------------
   RETINA Display
----------------------------------------- */

/* ---------------------------------------------------------- */
/* */
/* A media query that captures: */
/* */
/* - Retina iOS devices */
/* - Retina Macs running Safari */
/* - High DPI Windows PCs running IE 8 and above */
/* - Low DPI Windows PCs running IE, zoomed in */
/* - Low DPI Windows PCs and Macs running Firefox, zoomed in */
/* - Android hdpi devices and above */
/* - Android tvdpi devices, including Google Nexus 7 */
/* - Chrome running on high DPI Macs and PCs */
/* - Opera running on high DPI Macs, PCs and mobile devices */
/* */
/* Please note that that this code assumes you'll swap a */
/* 2× version of your images. If you'd like to supply */
/* finer increments, other thresholds might be appropriate. */
/* */
/* A test for CSS pixel densites can be found here: */
/* http://bjango.com/articles/min-device-pixel-ratio/ */
/* */
/* @marcedwards from @bjango */
/* */
/* ---------------------------------------------------------- */

@media	only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 13/10),
only screen and (min-resolution: 120dpi)
{

    .cd-top {background-image:url("/IMG/arrow-up%402x.png");}

}

@media	only screen and (-webkit-min-device-pixel-ratio: 1.3) and (max-width: 1151px),
only screen and (-o-min-device-pixel-ratio: 13/10) and (max-width: 1151px),
only screen and (min-resolution: 120dpi) and (max-width: 1151px)
{

}