body {

    font-size: 1.2em;
    font-family: "Trebuchet MS";

}

.os-col-xs-8 div span span {
    color: white !important;
    right: 3rem !important;
    position: relative !important;
}

span.os-rating-logo {
    display: none !important;
}

#op {
  display :flex; 
  background-color :black ;
  
}

.os-bootstrap {
    background: black !important;
    bottom: 0.6rem;
    position: relative;
}

@media (min-width: 858px) {
    html {
        font-size: 21px;
    }
}

@media (min-width: 780px) {
    html {
        font-size: 21px;
    }
}

@media (min-width: 702px) {
    html {
        font-size: 21px;
    }
}

@media (min-width: 624px) {
    html {
        font-size: 20px;
    }
}

@media (max-width: 623px) {
    html {
        font-size: 20px;
    }
}

#opinionsystem{
  width:200px;
}



p {
    color :black;

}

a {
    text-decoration: none;
}
h1 {
    font-weight: bold;

}

h2 {
    font-weight: bold;
}
h3 {
    font-size: 1.2em;
}


#sommaire p:hover
{
color: tomato;
}

#retour {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;

}

#nav {
    opacity: 85%;
}


/* Main Container -  this controls the size of the circle */
.circle_container
{
    width:250px;
    height:250px;
    margin : 0;
    padding : 0;
    /*	border : 1px solid red; */
}

/* Circle Main draws the actual circle */
.circle_main
{
    width : 100%;
    height : 100%;
    border-radius : 50%;
    border : 2px solid black;	/* can alter thickness and colour of circle on this line */
    margin : 0;
    padding : 0;
    background-color: red;
}

.circle_main p
{
    color: white;
    font-weight: bold;
    font-size: 2em;
}


/* Circle Main draws the actual circle */
.circle_right
{
    width : 100%;
    height : 100%;
    border-radius : 50%;
    border : 2px solid black;	/* can alter thickness and colour of circle on this line */
    margin : 0;
    padding : 0;
    background-color: black;
}

.circle_right p
{
  color: white;
    font-weight: bold;
    font-size: 2em;
}

/* Circle Main draws the actual circle */
.circle_mid
{
    width : 100%;
    height : 100%;
    border-radius : 50%;
    border : 2px solid black;	/* can alter thickness and colour of circle on this line */
    margin : 0;
    padding : 0;
    background-color: white;
}

.circle_mid p
{
    color: black;
    font-weight: bold;
    font-size: 2em;
}



/* Circle Main draws the actual circle */
#middle
{
    width : 100%;
    height : 100%;
    border-radius : 50%;
    margin : 0;
    padding : 0;
}

/* Circle Text Container - constrains text area to within the circle */
.circle_text_container
{
    /* area constraints */
    width : 70%;
    height : 70%;
    max-width : 70%;
    max-height : 70%;
    margin : 0;
    padding : 0;

    /* some position nudging to center the text area */
    position : relative;
    left : 15%;
    top : 15%;

    /* preserve 3d prevents blurring sometimes caused by the text centering in the next class */
    transform-style : preserve-3d;

    /*border : 1px solid green;*/
}

/* Circle Text - the appearance of the text within the circle plus vertical centering */
.circle_text
{
    /* change font/size/etc here */
    font: 11px "Tahoma", Arial, Serif;
    text-align : center;

    /* vertical centering technique */
    position : relative;
    top : 50%;
    transform : translateY(-50%);
}


[class*="hide-"]{
    opacity: 0;
    transform: translateY(-30px);
}

.hide-2{
    transition-delay: .3s;
}

.hide-3{
    transition-delay: .6s;
}

.hide-4{
    transition-delay: .9s;
}

.animated{
    opacity: 1;
    transform: translateY(0);
    transition: 1s;
}

#carteSaintFons
{
    height: 200px;
    width: 300px;
}


#primary_nav_wrap
{
    margin-top:15px
}

ul.dropdown-list
{
    list-style:none;
    position:relative;
    float:left;
    margin:0;
    padding:0;
}

ul.dropdown-list a
{
    display:block;
    color:white;
    text-decoration:none;
    font-weight:700;
    font-size:12px;
    line-height:32px;
    padding:0 15px;
    font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

ul.dropdown-list li
{
    position:relative;
    float:left;
    margin:0;
    padding:0;
}



ul.dropdown-list li:hover
{
    background: red;
}

ul.dropdown-list ul
{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background: rgba(0, 0, 0, 0.85);
    padding:0;
    list-style-type: none;
}

ul.dropdown-list ul li
{
    float:none;


}

ul.dropdown-list ul a
{
    line-height:120%;
    padding:10px 15px
}

ul.dropdown-list ul ul
{
    top:0;
    left:100%
}

ul.dropdown-list li:hover > ul
{
    display:block
}

#men
{
    color: white ;
    font-size: 1.2em;
}

#banner
{
    background: url(image/imgbanniere.jpg) no-repeat center center fixed ;
    background-size: cover;
    width: 100%;
    height: 90vh;
}

#titre {
   padding-top: 20%;
    color: white;
    text-shadow: 2px 0 0 black, -2px 0 0 black, 0 2px 0 black, 0 -2px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 #fff, -1px 1px 0 #fff;

}


#foot p {
   color: white;
}

#logofoot img
{
    height: 25px;
    width: 25px;
}

#titree {
    color: white ;
    font-size: 1.8em
}

#nav a
{
    color: white ;
    font-size: 0.7em
}

#nav img
{
    height: 20px ;
    width: 100px
}

#logo img {
    height: 150px; width : 150px;
}


#logo img:hover {
    height: 160px; width : 160px;

}

#conduite img
{
    height: 400px; width:500px;
}
#eval img
{
    height: 600px ; width: 500px;
}