/**
 * GENERAL
 */
body {
    font-family: "Open Sans", sans-serif;
    padding-top: 60px;
    font-weight: 300;
}

a:focus {outline: none;}
.none {color: inherit;}
div#baseline {font-size: 1.28em;}
.droite {text-align: right;}
.centrage {text-align: center;}
.justifier {text-align: justify;}
.row {margin-left: 1px;margin-right: 1px;}

/* Augmenter la distance entre les lignes sur téléphone */
@media(max-width:500px) {
    li {padding: 5px;font-size: 1.2em}
}

.navigation {
    text-align: center;
    padding-top: 15px;
    padding-right: 70px;
    padding-left: 70px;
    font-size: 20px;
}

.navigation a {color: #046197;}
.lang-bleu {position: absolute;right: 20px;top: 80px;z-index: 1;}
.lang-bleu .bold {font-weight: bold;text-decoration: none;cursor: default;}
.lang-bleu .bold:hover {font-weight: bold;text-decoration: none;}

.lang-bleu a {
    cursor: pointer;
    font-size: 14px;
    color: #046197;
    text-decoration: none;
    padding: 0 5px;
}

.lang-bleu a:hover {text-decoration: underline;}

/**
 * NAVBAR
 */

.navbar {
    min-height: 60px;
    box-shadow: 0 10px 25px rgbA(0, 0, 0, 0.4);
    background-color: #046197;
    border-bottom: none;
    padding: 0 20px;
}

@media(max-width:820px) {
    .nav-item a {padding: 10px 2vh;}
}

@media (max-width: 768px) {
    /*.navbar-nav {margin: 5px 0;}*/
    .nav-item a {padding: 5px !important;}
}

.navbar-brand {height: 60px;padding-top: 12px;margin-right: 10px;}
.navbar-brand img {cursor: pointer;max-height: 35px;max-width: 250px;}
.navbar-brand img:hover {opacity: 0.8;}
.nav-item {margin: 13px 0 0 0;}
.nav-item a {color: white !important;font-size: 16px;padding: 6px 20px !important;font-weight: 300 !important;}
.nav-item a:hover {opacity:0.7;text-decoration: none;}
.navbar-default .navbar-toggle {border-color: white;}
.navbar-default .navbar-toggle .icon-bar {background-color: white;}
.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus {background-color: white;}
.navbar-default .navbar-toggle:hover .icon-bar,.navbar-default .navbar-toggle:focus .icon-bar {background-color: #046197;}
.navbar form div {display: inline-block;height: 20px;}
.navbar form a {color: white;cursor: pointer;padding-left: 5px;}
.navbar form .btn {color: #046197;margin: 0;padding: 9px 12px;outline: none;}
.nav-item .form-inline{margin:0;}

/**
 * BANNIERE
 */

#banniere .lang {position: absolute;right: 20px;top: 70px;z-index: 1;}
#banniere .lang .bold {font-weight: bold;text-decoration: none;cursor: default;}
#banniere .lang .bold:hover {font-weight: bold;text-decoration: none;}
#banniere .lang a {cursor: pointer;font-size: 14px;color: white;text-decoration: none;padding: 0 5px;}
#banniere .lang a:hover {text-decoration: underline;}
#banniere .filtre {color: #fff;min-height: 600px;background: rgba(0, 61, 96, 0.75);background-size: cover;}

#banniere .haut {
    background: url('../../static/images/fond_barrage.png') no-repeat center center;
    background-attachment: fixed;
    background-size: cover;
    min-height: 600px;
}

#banniere #texte_intro h1 {line-height: 1.5;margin: 10vh 0;font-weight: bold;letter-spacing: -2px;}
#banniere #texte_intro h2 {line-height: 1.5;margin: 4vh 0;letter-spacing: -2px;}

@media only screen and (max-width:460px) {
    #banniere #texte_intro img {width: 100%;}
    #banniere #texte_intro h1 {font-size: 25px;}
    #banniere #texte_intro h2 {font-size: 15px;}
    #down-arrow a {font-size: 15px;}
}

@media only screen and (min-width:460px) {
    #banniere #texte_intro img {width: 90%;}
    #banniere #texte_intro h1 {font-size: 30px;}
    #banniere #texte_intro h2 {font-size: 20px;}
    #down-arrow a {font-size: 20px;}
}

@media only screen and (min-width:576px) {
    #banniere #texte_intro img {width: 80%;}
    #banniere #texte_intro h1 {font-size: 40px;}
    #banniere #texte_intro h2 {font-size: 30px;}
    #down-arrow a {font-size: 25px;}
}

@media only screen and (min-width:768px) {
    #banniere #texte_intro img {width: 60%;}
    #banniere #texte_intro h1 {font-size: 40px;}
    #banniere #texte_intro h2 {font-size: 30px;}
    #down-arrow a {font-size: 25px;}
}

@media only screen and (min-width:992px) {
    #banniere #texte_intro img {width: 60%;}
    #banniere #texte_intro h1 {font-size: 45px;}
    #banniere #texte_intro h2 {font-size: 35px;}
    #down-arrow a {font-size: 30px;}
}

/**
 * FLECHE
 */

#down-arrow {position: relative;margin-top: 8vh;margin-bottom: 20px;-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}
#down-arrow a {color: #FFFFFF;}
#down-arrow a:hover,#down-arrow a:focus {cursor: pointer;text-decoration: none;color: rgb(150, 190, 223);}

.go_top {
    background: url('../images_sifoee/top.png') no-repeat;
    background-color: rgba(0, 0, 0, 0.3);
    background-position: 50% 50%;
    display: none;
    position: fixed;
    width: 70px;
    height: 60px;
    bottom: 0;
    right: 1.5%;
    text-indent: -9999px;
    z-index: 200;
}

#floating-arrow {
    -webkit-animation-name: floating-arrow;
    animation-name: floating-arrow;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

@-webkit-keyframes floating-arrow {
    from {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    } 65% {
        -webkit-transform: translate(0, 15px);
        transform: translate(0, 15px);
    } to {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@keyframes floating-arrow {
    from {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    } 65% {
        -webkit-transform: translate(0, 15px);
        transform: translate(0, 15px);
    } to {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

/**
 * ADMINISTRATION
 */

.btn,
.btn:visited,
.btn:link,
.btn:active,
.btn:focus {
    color: white;
    margin-top: 1vh;
    border: 1px solid white;
    padding: 15px 20px;
    margin-bottom: 1vh;
    outline: none;
}

.btn:hover {background-color: white;color: rgba(71, 103, 186, 0.72);}
.btn2 {cursor: pointer;}

#btn2,
#btn2:visited,
#btn2:link,
#btn2:active,
#btn2:focus {
    color: black;
    margin-top: 1vh;
    border: 1px solid black;
    padding: 15px 20px;
    margin-bottom: 1vh;
    outline: none;
}

.administration #btn2 {background-color: white;}
.administration_acces {background-color: #666;bottom: 0px;}
.administration_acces a {color: white;}
#admin .btn {color: white;background-color: #666666;padding: 5px 10px;}

#admin .btn:hover,
#admin.btn:visited,
#admin.btn:link,
#admin.btn:active,
#admin.btn:focus {
    color: #046197;
    border: 1px solid #046197;
    background-color: white;
}

/**
 * FORMATIONS
 */

#formations {padding-bottom: 50px;font-size: 20px;}
#formations .about a {color: #046197;}
#formations a:hover {color: #333333;}
#formations .intro-content h3 {font-weight: 300;color: #333333;padding-bottom: 50px;}
#formations .certification img {padding-top: 40px;}

/**
 * PAGE FORMATIONS
 */

.catformation {padding-bottom: 50px;}

.sscatform {font-size: 1.12em;}

.catformation li:before,
.puce li:before {
    content: '';
    display: inline-block;
    height: 13px;
    width: 20px;
    background: url('../../webroot/images_sifoee/puce.png') no-repeat 0 50%;
}

/**
 * PAGE EXPERTISE
 */
/*
.expertise h1 {
    padding-bottom: 20px;
    font-weight: bold;
    color: #046197;
    font-size: 38px !important;
    letter-spacing: -2px;
    text-align: center;
}

.expertise h1::after {
    content: '';
    position: absolute;
    bottom: 0px;
    width: 10%;
    right: 45%;
    border-bottom: 3px solid #046197;
}

.expertise li:before {
    content: '';
    display: inline-block;
    height: 13px;
    width: 20px;
    background: url('../../webroot/images_sifoee/puce.png') no-repeat 0 50%;
}

.expertise h2 {margin: 4% auto;color: #046197;letter-spacing: -1.5px;}
.expertise {padding-bottom: 6%;}
.expertise li {font-size: 1.3em;}
*/

/**
 * MAILING
 */

#mailing input[type="text"] {width: 100%;}
#mailing textarea {width: 100%;}
#mailing .btn {background-color: #666;color: white;border: 1px solid #666;}
#mailing .clic {text-align: center;}
.sscatform {margin-bottom: 7%;}
.sscatform h3,.catformation h2 {color: #046197;font-weight: bold;letter-spacing: -2px;}
.logiciel {padding-bottom: 50px;}
.logiciel p {text-align: justify;}
.puce .img1 {vertical-align: -11px;width: 45%;}
.puce .img2 img {vertical-align: -9px;width: 32%;}
.puce .img3 {vertical-align: -5px;width: 15%;}
.expli {margin-top: 30%;color: black;font-size: 1.3em;}
#simulateurs .container,#simulators .container {margin-bottom: 5vh;}
#baseline2 p strong#mail a {color: #046197;}
div#baseline2 {font-size: 1.12em;text-align: justify;margin-top: 7vh;}
#titre,#lieu {float: left;margin-right: 1%;}
li {list-style-type: none;}
.catformation a {color: inherit;}
.catformation a:hover {text-decoration: underline;font-style: italic;font-size: 1.10em;}
.puce li{margin-bottom: 5px;}
.puce li.img2 {margin-bottom: 10px;}
.catformation h2 {margin: 6% auto 2% auto;}

.contact {
    background-color: #666;
    color: white;
    padding-bottom: 12%;
    position: relative;
    z-index: 1;
}

/**
 * FICHES FORMATION
 */

.fiche h3 {
    background-color: #F0F0F0;
    color: #333;
    padding: 10px 0;
    text-align: center;
}

.fiche #programme {margin-left: 4%;}
.fiche h2,.fiche li {text-align: justify;line-height: 1.5;}

.fiche h1 {
    margin: 5% 0 5% 0;
    line-height: 1.5;
    font-weight: bold;
    font-size: 30px;
    letter-spacing: -2px;
}

.fiche a {margin: 3% 0 5% 0;}
.fiche li {list-style: disc;}
.fiche #retour_fin {margin: 3vh auto;}
.fiche #retour_haut {margin: 5% auto;}

.fiche #format_pdf .row .taille {
    margin-left: auto;
    margin-right: auto;
    max-width: 780px;
}

.fiche .table {
    padding: 15px 30px 0 30px;
    line-height: 24px;
    font-size: 16px;
    width: 864px;
    margin: auto;
}

.fiche .table .bloc {width: 388px;padding: 20px 5px 10px 5px;}
.fiche .table .bloc3 {padding: 20px 5px 10px 5px;width: 864px;}
.fiche .table .bloc2 {width: 388px;padding: 20px 20px 0 20px;font-weight: 300;}
.fiche .table2 {display: none;}

@media (min-width:768px) {
    .fiche .table2 {display: none;}
}

@media (max-width:768px) {
    .fiche .table {display: none;}
    .fiche .table2 {display: block;margin: auto;}
}

.fiche .table2 {
    padding: 15px 30px 0 30px;
    line-height: 24px;
    font-size: 16px;
    width: 448px;
}

.fiche .table2 .bloc {
    width: 388px;
    padding: 20px 5px 10px 5px;
}

.fiche .table2 .bloc2 {
    width: 388px;
    padding: 20px 20px 0 20px;
    font-weight:300;
}

.fiche table td {
    vertical-align: top;
    text-align: justify;
    text-justify: inter-word;
}

.fiche table ul {margin-left: -10px;text-align: left;}
.fiche table ul li {padding: 0 0 0 10px;text-align: justify;}

.fiche tr th h2 {
    background-color: #F0F0F0;
	border: 0;
    color: #333;
    padding: 10px 0;
    text-align: center;
    font-size: 20px;
    font-weight: normal;
}

.fiche table>thead>tr>th,.fiche table>tbody>tr>td {border: none;}
.fiche #format_pdf .col-md-11 {padding: 0;min-width: 365px;}
.fiche #format_pdf .col-md-6 div {padding: 30px 10px 0 10px;}
.fiche #format_pdf .col-md-6#left1 {margin-left: 3%;}
.fiche #format_pdf .col-md-6#left2 {margin-left: 7%;}

.fiche #format_pdf .col-md-6 {
    width: 321px;
    padding: 0;
    font-size: 16px;
    text-align: justify;
    line-height: 1.5;
    text-justify: inter-word;
    font-family: sans-serif;
}

.catformation h6 {color: white;}

.information_formation div.dispo {
    display: inline-block;
    width: 200px;
    margin: 15px 30px;
    border: 1px solid #046197;
    border-radius: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #046197;
    color: white;
}

.information_formation div.dispo a {
    color: white;
    text-decoration: underline;
    cursor: pointer;
}

.information_formation .popover {color: #046197;}

/**
 * PDF
 */

a.pdf {
    color: white;
    font-size: 20px;
    display: inline-block;
    height: 48px;
    background: url('../../webroot/images_sifoee/pdf-icon.png') no-repeat 0 50% #b43337;
    line-height: 48px;
    padding: 0 20px 0 60px;
    font-variant: small-caps;
    border-radius: 24px;
}

a.pdf:hover {color: white;opacity: 1;background-color: #E14045;text-decoration: none;}
a.pdf:visited,a.pdf:link,a.pdf:active,a.pdf:focus {text-decoration: none;outline: none;}

/**
* SUIVI
*/

.suivi p.vide {
    background: linear-gradient(white, rgba(129, 202, 71, 0.9));
    background: -o-linear-gradient(white, rgba(129, 202, 71, 0.9));
    background: -webkit-linear-gradient(white, rgba(129, 202, 71, 0.9));
    height: 35%;
}

.suivi p.vide2 {
    background: linear-gradient(rgba(129, 202, 71, 0.9), white);
    background: -webkit-linear-gradient(rgba(129, 202, 71, 0.9), white);
    height: 40%;
}

.suivi p.pub {
    padding: 0% 5% 10% 5%;
    line-height: 1.5;
    font-size: 1.3em;
    background-color: rgba(129, 202, 71, 0.9);
    text-align: center;
    color: white;
    font-weight: bold;
}

.suivi-inside {width: 100%;height: 80%;margin: 0 auto;}
.suivi {margin-left: -100px;height: 700px;position: absolute;top: 0;width: 250px;}
.suivi.fixed2 {height: 700px;z-index: 0;position: absolute;top: 630px;width: 250px;}
.suivi.fixed {position: fixed;top: 60px;width: 250px;height: 700px;}
.suivi p {width: 100%;margin: 0 auto;}

/**
 * CREATION
 */

.creation h2 {margin-bottom: 7vh;}
.creation {margin: 7vh auto 10vh auto;}
.creation .col-md-8 {max-width: 730px;}

.creation .gris {
    background-color: #404040;
    color: #999999;
    padding: 2px 0 2px 5px;
    font-weight: bold;
    width: 98%;
    border: 1px solid #404040;
}

.creation input[type=text] {
    width: 90%;
    display: inline-block;
    vertical-align: top;
    border: 1px solid black;
}

.creation .lock {
    height: 16px;
    width: 16px;
    margin: 3px 4px 3px 2px;
    background: url('../../webroot/images_sifoee/icon-lock.png');
    cursor: pointer;
    opacity: 0.5;
    display: inline-block;
}

.creation .lock.js-unlocked {background-position: 0 -16px;}
.creation .lock:hover {opacity: 1;}

.creation input[type=text][readonly=readonly] {
    border: 1px solid #212121;
    color: #777777;
    background: #212121;
    cursor: default;
}

.creation select {width: 98%; border: 1px solid black;}
.creation .col-md-8 input[type=text] {width: 98%; text-align: center;}
.creation .col-md-5 input[type=text] {width: 98%;text-align: center;}
.creation .col-md-5#modif input[type=text] {width: 90%;font-size: 14px;}
.creation .alt {color: #777777;}
.creation textarea {resize: vertical;width: 98%;min-height: 78px;}

.creation #objective div.trumbowyg-editor,
.creation #instruction div.trumbowyg-editor {
    height: 300px;
    resize: none;
    overflow-y: scroll;
}

.creation #schedule div.trumbowyg-editor,
.creation #organization div.trumbowyg-editor {
    height: 460px;
    resize: none;
    overflow-y: scroll;
}

.creation .col-md-4 {width: 360px;margin: auto;font-size: 16px;}
.creation .col-md-5#modif_cat input[type=text] {width: 92%;}
.creation li {list-style-type: disc;color: black;}
.creation .btn {padding: 6px 30px;background-color: #046197;}

.creation .btn:hover {
    background-color: white;
    color: #046197;
    border: 1px solid #046197;
}

.creation #btn2 {color: black;background-color: white;}
.catformation a.btn:hover {text-decoration: none;font-style: normal;}
.trumbowyg-modal-box input[type=text] {width: 80%;}
.glyphicon-remove {color: #bf3b46;}
.glyphicon-remove:hover {color: red;}
#lien_centre {text-decoration: underline;color: #046197;}
#lien_centre:hover {color: inherit;}
a.suppr:hover+a {font-style: italic;color: red;}

/**
 * ERREUR
 */

#erreur .btn {color: #046197;border-color: #046197;}
#erreur .btn:hover {color: white;background-color: #046197;}