@font-face {
    font-family: 'Open Sans';
    src: url('open-sans/OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
}
@font-face {
    font-family: 'Myriad Pro Condensed';
    src: url('charte_graphique_inra/valises-polices/myriad pro/MyriadPro-Cond.otf') format('truetype');

    font-weight: normal;
}
@font-face {
    font-family: 'Myriad Pro Condensed';
    src: url('charte_graphique_inra/valises-polices/myriad pro/MyriadPro-LightCond.otf') format('truetype');

    font-weight: 200;
}
@font-face {
    font-family: 'Minion Pro';
    src: url('charte_graphique_inra/valises-polices/minion pro/MinionPro-Regular.otf') format('truetype');

    /*font-weight: normal;
    font-style: normal;*/
}
@font-face {
    font-family: 'Icons';
    src: url(../fonts/icons.eot);
    src: url(../fonts/icons.eot?#iefix) format('embedded-opentype'), 
        url(../fonts/icons.svg#icons) format('svg'), 
        url(../fonts/icons.woff) format('woff'), 
        url(../fonts/icons.ttf) format('truetype');
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-decoration: inherit;
    text-transform: none;
}

html { font-size: 95%; }

body{
    /*font-family: "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif/*rtl:prepend:"Droid Arabic Kufi","Droid Sans"; */
    font-family: "Minion Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif/*rtl:prepend:"Droid Arabic Kufi","Droid Sans", */;
    margin: 0px;
    padding: 0px;
    color: #555555;
    min-width: 320px;
    /*background: #FCFCFC;*/

    background: url(../images/bg-gradient-sand.png) repeat-x,url(/media/img/sandstone/bg-sand.png) repeat,#f5f1e8;
}

/******************************************************************/
/* !!!!!!!!!!!!!!!!!! CHARTE GRAPHIQUE INRA !!!!!!!!!!!!!!!!!!!!! */
/******************************************************************/

.capflor-title h1 {
    font-family: "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;	
    text-transform: lowercase !important;
    margin-left: 90px !important;
    color: white;
}

.introduction.capflor-title h1 {
    margin-left: 0px !important;
}

h1,h2,h3,h4,.button,.menu,.header,.label,.steps{
    font-family: "Myriad Pro Condensed", sans-serif;
}

.header,.steps{
    text-transform: uppercase;	
}

.label{
    font-weight: 100 !important;	
}

#introbanner{
    background-image: url(../images/slider/accueil2.png) !important;
    background-color: #00B5AD !important;
    /*opacity: .8;*/
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
}

#footerbanner{
    background-image: url(../images/genome_inra.png) !important;
    /*background-color: #333 !important;*/
    opacity: .9;
    background-position: right top;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
}

.bloc_accueil{
    padding-top: 80px;
    padding-bottom: 80px;
}

.bloc_accueil h1{
    font-weight: 500;
}

.bloc_accueil h2{
    font-weight: 200;
}

input:not([type="submit"]), .ui.dropdown, textarea {
    background-color: rgb(250, 255, 189) !important;
}

/****************** FIN CHARTE GRAPHIQUE INRA *********************/


/*
#footer{
        font-family: "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
        margin: 0px;
        padding: 0px;
        color: #555555;
        min-width: 320px;
        background: url(../images/bg-gradient-sand.png) repeat-x,url(/media/img/sandstone/bg-sand.png) repeat,#f5f1e8;
}
*/

.marque_deposee{
    cursor: pointer;
}

.marque_deposee::after{
    content: '\00ae';
    font-size: 0.5em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    top: -0.5em;
    cursor: pointer;
}

#footer{
    background: #6b004e url(../images/genome_inra_gradient_transparent.png) no-repeat right top !important; /* W3C */

    /*background-image: 
    background-position: right top;
    background-repeat: no-repeat;*/
    font-family: "Myriad Pro Condensed", sans-serif;
    font-weight: 100;
    color:#fff;
}

#footer::before{
    background: #6b004e; /* Old browsers */
    background: -moz-linear-gradient(45deg,  #6b004e 0%, #850060 39%, #850060 46%, #824a71 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#6b004e), color-stop(39%,#850060), color-stop(46%,#850060), color-stop(100%,#824a71)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(45deg,  #6b004e 0%,#850060 39%,#850060 46%,#824a71 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(45deg,  #6b004e 0%,#850060 39%,#850060 46%,#824a71 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(45deg,  #6b004e 0%,#850060 39%,#850060 46%,#824a71 100%); /* IE10+ */
    background: linear-gradient(45deg,  #6b004e 0%,#850060 39%,#850060 46%,#824a71 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b004e', endColorstr='#824a71',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#footer a{
    color:#fff;
}

.container{
    margin: 50px 10px 140px 10px ;
}

.launch.button{	
    position: fixed;
    top: 120px;
    z-index: 500;
}

#page{
    min-height:86vh;
}

#content .ui.grid{              /* STYLE MENU REDEF MM 29/08/2018 */
    margin:0;
}

#button-menu,                   /* STYLE MENU REDEF MM 15/02/2018 */
#param-menu,
#menu,
#params{
    opacity:0.9;
}

/* Computer Only */
@media only screen and (min-width: 992px) {
    .computer.only {
        display: block !important;
    }

    #button-menu .computer.only {
        display: inline !important;
    }

}
@media only screen and (max-width: 991px) {
    .computer.only {
        display: none;
    }
}

.masthead {
    position: relative;
    overflow: hidden;
    background-color: #00B5AD;
    text-align: center;
    /*margin-top: 20px;*/
    padding-top: 20px;/*padding: 45px 0px;*/

    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0px;
    border-bottom: none;
}
.masthead .grid {
    position: relative;
    z-index: 2;
}
.masthead.segment h1, .capflor-title>h1 {
    font-size: 5em /*!important*/;
    color: #FFFFFF;
    line-height: 1.2;
    margin: -20px 0px 0px;
    padding-bottom: 0px;
}
.masthead:before {
    /*background: #00B5AD url(http://semantic-ui.com/images/tile-bg.png) repeat fixed 0% 0%;*/
    position: absolute;
    z-index: 1;
    width: 500%;
    height: 500%;
    top: 0px;
    left: 0px;
    content: '';
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation-name: masthead;
    -moz-animation-name: masthead;
    -o-animation-name: masthead;
    animation-name: masthead;
    -webkit-animation-duration: 80s;
    -moz-animation-duration: 80s;
    -ms-animation-duration: 80s;
    -o-animation-duration: 80s;
    animation-duration: 80s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@keyframes masthead {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: -50% -100%;
    }
    100% {
        background-position: -100% -200%;
    }

}

@-moz-keyframes masthead {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: -50% -100%;
    }
    100% {
        background-position: -100% -200%;
    }

}

@-webkit-keyframes masthead {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: -50% -100%;
    }
    100% {
        background-position: -100% -200%;
    }

}

@-ms-keyframes masthead {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: -50% -100%;
    }
    100% {
        background-position: -100% -200%;
    }

}

@-o-keyframes masthead {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: -50% -100%;
    }
    100% {
        background-position: -100% -200%;
    }

}


#button-menu, #param-menu{
    animation-duration: 0.3s;
}


@keyframes slideRight {
    from {
        left: 0px;
    }
    to {
        left: 275px;
    }
}

@keyframes slideLeft {
    from {
        left: 275px;
    }
    to {
        left: 0px;
    }
}

@-moz-keyframes slideRight {
    from {
        left: 0px;
    }
    to {
        left: 275px;
    }
}

@-moz-keyframes slideLeft {
    from {
        left: 275px;
    }
    to {
        left: 0px;
    }
}

@-webkit-keyframes slideRight {
    from {
        left: 0px;
    }
    to {
        left: 275px;
    }
}

@-webkit-keyframes slideLeft {
    from {
        left: 275px;
    }
    to {
        left: 0px;
    }
}

@-ms-keyframes slideRight {
    from {
        left: 0px;
    }
    to {
        left: 275px;
    }
}

@-ms-keyframes slideLeft {
    from {
        left: 275px;
    }
    to {
        left: 0px;
    }
}

@-o-keyframes slideRight {
    from {
        left: 0px;
    }
    to {
        left: 275px;
    }
}

@-o-keyframes slideLeft {
    from {
        left: 275px;
    }
    to {
        left: 0px;
    }
}
