/*surcharge du theme*/
#header.alt {
    /*raccourcissement des espaces autour du logo*/
    padding: 3em 5em 0em 5em;
}

/*La barre de navigation était cachée sur les petits devices*/
@media screen and (max-width: 736px) {
    #nav {
        display: inherit;
    }

    #nav + #main {
        padding-top: 7.25em;
    }
}

@media screen and (max-width: 480px) {
    #nav {
        display: inherit;
        max-width: calc(100% - 2em)
    }

    #nav + #main {
        padding-top: 8em;
    }
}

@media screen and (max-width: 440px) {
    #nav + #main {
        padding-top: 9em;
    }
}

@media screen and (max-width: 380px) {
    #nav + #main {
        padding-top: 11em;
    }
}

@media screen and (max-width: 360px) {
    #nav{
        max-width: 100%;
    }
}

* {outline: none;}

/* Fond d'écran */
body {
    background-color: #1e5393;
    background-image: url("../cnif-images/background_wave.jpg");
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    font-size: 14pt;
    font-weight: 300;
    color: #111;
}

section {
    overflow: hidden;
}

.column-text {
    flex: 60%
}

#nav.alt {
    z-index: 1000;
}

#main > .main:first-child {
    border-top: 0;
    padding-top: 1.5em;
}

#main h2 {
    color: #1e5393;
}

a.pilcrow {
    color: #1e5393;
    opacity: 0;
    border-bottom: none;
    display: inline-block;
    margin-left: 0.5em;
    transition: opacity 0.3s;
}

#main h2:hover > a.pilcrow, .popup_history > h3:hover > a.pilcrow {
    opacity: 0.7;
}

.history > h3:hover > a.pilcrow {
    opacity: 0.7;
}

h3 {
    font-size: 1.60em;
}

h4 {
    font-size: 1.40em;
}

p {
    margin: 0 0 1em 0;
}

#main {
    background-color: rgba(255,255,255,.95);
}

/* barre soulingnée sous les titres */
#main header.major h2:after {
    background-color: #1e5393;
    background-image: none;
    height: 1px;
}

/*header.major h2::after{
    height: 1px;
}*/

.title {
    text-align: center;
    margin-top: 100px;
    margin-bottom: 80px;
}

ul.actions li {
    margin-top: 5px;
  }

/*.logo {
    float:left;
}

.logo img{
    width: 90px;
    padding: 5px;
}*/

/*.header-title {
    background: rgba(255, 255, 255, 0.8);
    max-width: 430px;
    margin: 0 auto 1em auto;
    border-radius: .25em;
    text-align: center;
    color: #111;
}

.header-title h1{
    color: #636363;
    margin-bottom: 5px;
    max-width: 430px;
}*/

/*@media screen and (max-width: 376px) {
    #nav {
        display: inherit;
        max-width: calc(100% - 0em)
    }

    #nav + #main {
        padding-top: 10em;
    }
}*/

/* couleur de fond des boutons */
#main .button {
    background-color: #fff;
}

#main .button:hover {
    background-color: #E5E5E5;
}

/* couleur des boutons special*/
/*#main input.special[type="submit"], #main input.special[type="reset"], #main input.special[type="button"], #main button.special, #main .button.special {
    background-color: #39a9ef;
}*/

/* couleur de fond des champs de formulaire */
#main input[type="text"], #main input[type="password"], #main input[type="email"], #main select, #main textarea {
    background: #fff;
}

/* Spécifications des bateaux */
dl.boat-specif {
    text-align: left;
}

dl.boat-specif dt {
    margin: 0;
}

dl.boat-specif dt:after {
    content: ": ";
}

.boat-specif dt{
    display: inline-block;
    width: 48%;
    font-weight: bold;
    text-align: right;
}

.boat-specif dd{
    display: inline-block;
    width: 48%;
    text-align: left;
    margin: 0;
    vertical-align: middle;
}

footer#footer {
    padding: 1em;
}

.copyright {
    color: #FFF;
}

/*TROMBI*/
.popup.persons h4 {
    text-align: center;
}

.popup.persons .group-name{
    font-weight: bold;
}

.popup.persons .persons-group{
    margin-top: 25px;
}

.popup.persons .persons{
    display: flex;
    flex-wrap: wrap;
}

.popup.persons .persons>.person{
    float: left;
    margin: 5px;
    width: 180px;
}

.popup.persons .persons>.person .image {
    display: block;
    width: 180px;
    height: 180px;
}

.popup.persons .persons>.person .image {
    display: block;
}

.popup.persons .persons>.person .fig {
    text-align: center;
}

.popup.persons .persons>.person .name,.popup.persons .persons>.person .occupation {
    display: inline;
}

.popup {
    font-family: 'Source Sans Pro';
    font-size: 14pt;
}

.popup table thead {
    border-bottom: solid 2px;
}

.popup table th{
    font-weight: bold;
}

.popup table td{
    padding: 0;
}

.popup strong{
    font-weight: bold;
}

.popup a:hover{
    color: rgb(51, 51, 51);
}

/*Couleurs des popup*/
@media screen and (max-width: 640px) {
    .popup {
        color: #aaa;
    }
    .popup strong{
        color: #aaa;
    }

    .popup input[type="checkbox"] + label,
    .popup input[type="radio"] + label {
        color: #aaa;
    }

    .popup input[type="checkbox"] + label:before,
    .popup input[type="radio"] + label:before {
        background: rgba(222, 222, 222, 0.25);
        border-color: #dddddd;
    }

    .popup input[type="checkbox"]:checked + label:before,
    .popup input[type="radio"]:checked + label:before {
        background-color: #636363;
        border-color: #636363;
        color: #ffffff;
    }

    .popup input[type="checkbox"]:focus + label:before,
    .popup input[type="radio"]:focus + label:before {
        border-color: #8cc9f0;
        box-shadow: 0 0 0 1px #8cc9f0;
    }
}

@media screen and (min-width: 641px) {
    .popup {
        color: #333;
    }
    .popup strong{
        color: #333;
    }
    .popup table th{
        color: #333;
        font-weight: bold;
    }

    .popup input[type="checkbox"] + label,
    .popup input[type="radio"] + label {
        color: #333;
    }

    .popup input[type="checkbox"] + label:before,
    .popup input[type="radio"] + label:before {
        background: rgba(222, 222, 222, 0.25);
        border-color: #dddddd;
    }

    .popup input[type="checkbox"]:checked + label:before,
    .popup input[type="radio"]:checked + label:before {
        background-color: #636363;
        border-color: #636363;
        color: #ffffff;
    }

    .popup input[type="checkbox"]:focus + label:before,
    .popup input[type="radio"]:focus + label:before {
        border-color: #8cc9f0;
        box-shadow: 0 0 0 1px #8cc9f0;
    }

    .popup table thead {
        border-bottom-color: #dddddd;
    }
    .popup table tbody tr:nth-child(2n+1) {
        background-color: rgba(222, 222, 222, 0.25);
    }
    .popup table tbody tr {
        border-color: #dddddd;
    }
}


#lightcase-nav a.lightcase-icon-close[class*="lightcase-icon-"] {
    border: none;
}
#lightcase-nav a.lightcase-icon-next[class*="lightcase-icon-"] {
    border: none;
}
#lightcase-nav a.lightcase-icon-prev[class*="lightcase-icon-"] {
    border: none;
}


/*zoom on image*/
.image.fit {
    overflow: hidden;
    position: relative; /* @bugfix @affected Chrome */
    z-index: 0; /* @note Idem */
}

.image.fit img {
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    max-width: 100%;
}

.image.fit img:hover {
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}


.small {
    font-size: 11pt;
}

.clear {
    clear: both;
}