/**********************************************************************
 ** COMMON STYLE
 **/

@import url(fonts/OpenSans.css);
@import url(fonts/Sawasdee.css);

/* HTML Elements */
.styles-perso body {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: #235b59;
    margin: 0;
    padding: 0;
}

.styles-perso h1,
.styles-perso h2,
.styles-perso h3 {
    font-family: 'Sawasdee', sans-serif;
    font-weight: normal;
}

.styles-perso h2 {
    font-size: 3.85em;
    margin: 0px 0 20px;
}

.styles-perso h3 {
    font-size: 1.7em;
    font-weight: normal;
    margin: 10px;
}

.styles-perso p {
    margin: 0;
}

.styles-perso a {
    color: #2867ee;
    text-decoration: none;
}

.styles-perso a:hover {
    color: #500;
    text-decoration: underline;
}

.styles-perso header,
.styles-perso section,
.styles-perso footer {
    position: relative;
}

.styles-perso img {
    border: 0;
}

/* Classes communes */
.styles-perso body.home,
.styles-perso body.bg {
    background: url("image/home-bg1.png") right -50px no-repeat scroll #fff;
}

.styles-perso body.page {
    padding-top: 80px;
}

.styles-perso .stopf:after {
    clear: both;
    content: ".";
    display: block;
    line-height: 0;
    visibility: hidden;
}

.styles-perso .orange {
    color: #ff6b20;
}

.styles-perso .quote:before {
    content: "« "
}

.styles-perso .quote:after {
    content: " »"
}

/* Element layout communs */
.styles-perso header.geonef {
    position: fixed;
    top: 0;
    height: 80px;
    width: 100%;
    background: #fff;
    box-shadow: 0px 0px 10px 10px rgba(181, 213, 216, 0.22);
    padding: 0;
    border-bottom: 2px solid #FF9E6C;
    text-align: left;
    z-index: 1;
}

.styles-perso header.geonef>h1 {
    position: absolute;
    left: 200px;
    bottom: 0;
    right: 0;
    top: auto;
    font-size: 3em;
    margin: 0;
    line-height: .9em;
}

.styles-perso header.geonef .sep:before {
    content: "»";
    padding: 0 10px;
}

.styles-perso footer.geonef {
    color: #fff;
    background: #000;
    box-shadow: 0 0 10px 10px rgba(181, 213, 216, 0.66);
    text-shadow: none;
    margin-top: 40px;
    text-align: center;
}

.styles-perso footer.geonef h2 {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.2em;
    border-bottom: 1px solid;
    margin: 0 0 10px;
    padding: 0 0 5px;
    color: #aaa;
}

.styles-perso footer.geonef>section {
    text-align: left;
}

.styles-perso footer.geonef>section>ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.styles-perso footer.geonef a {
    color: #fff;
}

.styles-perso .band {
    text-align: center;
}

.styles-perso .band.link:hover {
    box-shadow: 0 0 10px 5px #D7E2E4;
    background: #D7E2E4;
}

.styles-perso .opacity {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.5;
    background: #fff;
    z-index: -1;
}

.styles-perso .b200,
.styles-perso .b300,
.styles-perso .b400 {
    display: inline-block;
    margin: 10px;
    vertical-align: top;
}

.styles-perso .b200 {
    width: 15.4em;
}

.styles-perso .b300 {
    width: 23em;
}

@media (max-width: 450px) {
    .styles-perso .b300 {
        width: 95%;
    }

    .styles-perso .b300 img {
        width: 100%;
    }
}

.styles-perso .b400 {
    width: 31em;
}

@media (max-width: 550px) {
    .styles-perso .b400 {
        width: 95%;
    }

    .styles-perso .b300 img {
        width: 100%;
    }
}

.styles-perso a.through {
    color: inherit;
    display: block;
}

.styles-perso h2>.hint {
    display: block;
    font-variant: small-caps;
    font-family: "Open Sans", sans-serif;
    font-size: 0.3em;
    color: #666;
}

.styles-perso .center {
    text-align: center;
}

.styles-perso section {
    margin: 40px 0 0;
    padding: 15px 0;
}

/* section#apps { background: url("image/triangle.svg") center 0 no-repeat; background-size: 120% auto; } */

.styles-perso section.iti-apps .b400 {
    text-align: right;
    font-size: 1.1em;
    padding-top: 3em;
}

.styles-perso .end-float {
    clear: both;
}

.styles-perso .caption {
    text-align: center;
    font-weight: 600;
    color: rgba(44, 109, 114, 0.80);
    width: 100%;
}

.styles-perso section.publication {
    max-width: 1000px;
    margin: 10px auto;
    padding: 2em;
}

.styles-perso .varfloat img {
    width: 100%;
}

.styles-perso .varfloat.left {
    float: left;
    clear: left;
    margin: 0.5em 1em 0.5em 0;
}

.styles-perso .varfloat.right {
    float: right;
    clear: right;
    margin: 0.5em 0 0.5em 1em;
}

.styles-perso section.publication .orange-frame {
    border: 1px solid rgba(255, 107, 32, 0.68);
}

.styles-perso section.publication h2,
.styles-perso section.publication h3,
.styles-perso section.publication h4,
.styles-perso section.publication h5 {
    text-align: left;
}

.styles-perso section.publication h1 {
    font-size: 2.0em;
    margin-left: 0;
    text-align: center;
}

.styles-perso section.publication h2 {
    font-size: 2.6em;
    margin-left: 0;
    color: #FF6B20;
}

.styles-perso section.publication h3 {
    font-family: inherit;
    font-size: 1.6em;
    margin: 30px 0 10px;
    font-weight: normal;
    color: #1B5E6C;
}

.styles-perso section.publication h4 {
    font-size: 1.4em;
    margin-left: 0;
    font-weight: normal;
    color: #041921;
}

.styles-perso section.publication h5 {
    font-size: 1.2em;
    margin-left: 0;
    font-weight: normal;
}

.styles-perso section.publication p,
.styles-perso section.publication .spaced>li {
    margin: 13px 0;
    text-align: justify;
}

.styles-perso section.publication li {
    margin: 5px 0;
}

.styles-perso section.publication ul li {
    list-style-type: none;
    background-image: url(image/lili.svg);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 1.5em;
    background-size: 0.5em auto;
    margin: 10px 0;
}

.styles-perso .publication-date {
    font-style: italic;
    margin-bottom: 10px;
    color: #555;
}

/********************************************************************************/
/** RÈGLES DE TEST / ESSSAIS
 **/

.styles-perso body.alt1 section.band {
    background: #fff;
    box-shadow: 0px 0px 10px 10px rgba(181, 213, 216, 0.53);
    padding: 15px 0;
    border-bottom: 1px solid rgba(181, 213, 216, 0.66);
}

.styles-perso body.alt2 section.band {
    background: #fff;
    box-shadow: 0 0 10px 10px #fff;
}

.styles-perso body.alt3 section.band {
    box-shadow: 0px 0px 10px 10px rgba(181, 213, 216, 0.53);
}

.styles-perso body.alt4 section.band {
    box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.5);
}

.styles-perso body.alt5 section.band {
    box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.8);
}

.styles-perso body.alt5 section.band>.bg {
    opacity: 0.8
}

/******************************************************************************
 ** Width-specific and density-specific rules
 **/

@media (min-resolution: 1.2dppx),
(min--moz-device-pixel-ratio: 1.2),
(-webkit-min-device-pixel-ratio: 1.2) {
    .styles-perso html body {
        position: relative;
        font-size: 70%;
    }
}