@font-face {
    font-family: 'BallparkWeiner';
    src: url('polices/ballpark.eot');
    src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'),
         url('polices/ballpark.woff') format('woff'),
         url('polices/ballpark.ttf') format('truetype'),
         url('polices/ballpark.svg#BallparkWeiner') format('svg');
    font-weight: normal;
    font-style: normal; 
}

@font-face {
    font-family: 'Dayrom';
    src: url('polices/dayrom.eot');
    src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
         url('polices/dayrom.woff') format('woff'),
         url('polices/dayrom.ttf') format('truetype'),
         url('polices/dayrom.svg#Dayrom') format('svg');
    font-weight: normal;
    font-style: normal;
}

html {
  font-size: 62.5%;
}

/* Eléments principaux de la page */
body {
    background-color: #fff9de;
    font-family: 'Trebuchet MS', Arial, sans-serif;
    color: #181818;
    font-size: 1.5rem;
}


#bloc_page {
    width: 80%;
    margin: auto;
}


section h1, footer h1 {
    /*font-family: Dayrom, serif;
    font-weight: normal;*/
    text-transform: uppercase;
    margin: 30px 0 5px;   
}


.suite_txt {
    display: none;
}


/* Header */
header {
   /* background: url('images/separateur.png') repeat-x bottom;*/
    background: -moz-linear-gradient(left, #849e24 15%, #8ecbed 60%, #ffff00, #ff6600);
    background: -webkit-linear-gradient(left, #849e24, #8ecbed, #ffff00);
    background: linear-gradient(left, #849e24, #8ecbed, #ffff00);
    margin: 8px 0;
    border-radius: 10px;   
}

#titre_principal {
    display: flex;
    /*justify-content: flex-start;*/
}

nav > h1 {
    margin: 0 auto;
    text-align: justify;       
}

.nav_html {

}

#logo {
  width: 10%;
  display: inherit;
}

#logo img {
    /*width: 320px;*/
    /*height: 80px;*/
    margin: auto 5px;
}

header h1 {
    /*font-family: 'BallparkWeiner', serif;*/
    font-size: 2.5rem;
    font-weight: normal;
   /*margin: 0 0 0 10px;*/
   text-align: center;
}

header h2 {
    font-family: Dayrom, serif;
    font-size: 1.8rem;
    margin-top: 0px;
    font-weight: normal;
}

#contenu li {
  /*display: flex;*/
  list-style-type: none;
  margin: 1.5% 0;
}

#contenu ul {
  padding: 0;
}

#contenu h2,#contenu-liens h2  {
  text-align: center;
  font-size: 2.6rem;
}

#contenu-liens h3 {
  font-size: 2rem;
  margin-bottom: 10px;
}

#contenu-liens li {
  font-size: 1.6rem;
  text-indent: 2rem;
  margin-left: 5rem;
}

#contenu-liens > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

#contenu span {
    display: block;
    position: relative;
    font-size: 1.6rem;
    /*vertical-align: middle;*/
    width:70%;
    left: 24%;
    margin-top: 30px;
}

/* Navigation */
nav ul {
    list-style-type: none;
    display: flex;
}

nav li {
    margin-right: auto;
    /*font-size: 0.7em;*/
}


nav a:hover {
    color: #760001;
    border-bottom: 3px solid #760001;
}


/* Bannière */
#banniere_image {
    display: flex;
    justify-content: space-around;   
    height: 200px;
    border-radius: 5px;
    background-color: #840f30;
    /*background: url('images/sanfrancisco.jpg') no-repeat;*/
    /*background: url('images/attentifs1.png')  no-repeat,
                url('images/DSCF31301.png') no-repeat,
                url('images/ecran1.png') no-repeat;*/
    /*position: relative;*/
    box-shadow: 0px 4px 4px #1c1a19;
    margin-bottom: 20px;
}

#banniere_image img {
	width: 24.5%;
}

#banniere_description {
    position: absolute;
    bottom: 0;
    border-radius: 0px 0px 5px 5px;
    width: 99.5%;
    height: 33px;
    padding-top: 15px;
    padding-left: 4px;
    background-color: rgba(24,24,24,0.8);
    color: white;
    font-size: 0.8em;
}

.bouton_rouge {
    position: absolute;
    width: 20%;
    line-height: 33px;
    text-decoration: none;
    /*font-family: Dayrom, serif;
    margin: .2em 0;*/
    padding: 3px;
    text-align: center;   
    font-weight: bold;
    border: 2px solid #ff6600;
    border-radius: 8px;
    color: #ff6600;
    font-size: 2rem;
    text-shadow: 0 1px 0 #000,0 2px 0 #000,0 3px 0 #000,0 4px 0 #000,0 5px 0 #aaa,
    0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),
    0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15); /*texte en 3D*/
    background: -moz-radial-gradient(top, #ffff00, #74c3f4);
    background: -webkit-radial-gradient(center, #ffff00, #74c3f4) 0 30px;
    background: -o-radial-gradient(top, #74c3f4, #ffff00) 0 30px;    
}

.bouton_bleu {
    height: 25px;
    right: 5px;
    bottom: 5px;
    background: url('images/fond_degraderouge.png') repeat-x;
    border: 1px solid #760001;
    border-radius: 5px;
    font-size: 1.2em;
    text-align: center;
    padding: 3px 8px 0px 8px;
    color: white;
    text-decoration: none;
}

.bouton_rouge img {
    border: 0;
}


/* Corps */
section {    
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 20px;
}

th, td {
    padding: 0 20px 6px;
}

table {
    margin-top: 5%;
}

iframe {
    margin-top: 30px;
}

#conteneur {    
    float: left;
    margin-right: 20px;
    flex: 3;
}

.ico_categorie {
    vertical-align: middle;
    margin-right: 8px;
}

article p, article ul {
    font-size: 0.9em;
    margin: 6px 0;
}

aside {
    flex: 1;
    position: relative;
    background-color: #706b64;
    box-shadow: 0px 2px 5px #1c1a19;
    /* border: 2px solid black;  obligatoire */    
    border-radius: 5px;
    padding: 5px;
    color: white;
    font-size: 0.9em;
    text-align: center;
}

#fleche_bulle {
    position: absolute;
    top: 100px;
    left: -12px;
}

#photo_zozor {
    text-align: center;
}

#photo_zozor img {
    border: 1px solid #181818;
}

.pouquoi > img {
    margin: 0 0 0 2%;
}

aside img {
    margin-right: 3px;
}

aside h1 {
    text-align: center;
}


/* Footer */
footer {
    display: flex;
    /*background:  url('images/ico_top.png') no-repeat top center, url('images/separateur.png') repeat-x top, url('images/ombre.png') repeat-x top;*/
    padding-top: 25px;
}

footer p, footer ul {
    font-size: 0.8em;
}

footer h1 {
    font-size: 1.1em;    
}

#tweet {
    width: 28%;
}

#mes_photos {
    width: 35%;
}

#mes_amis {
    width: 50%;
}

#mes_photos img {
    border: 1px solid #181818;
    margin-right: 2px;
}

#listes_amis {
    display: flex;
    justify-content: space-around;
    margin-top: 0;
}

#mes_amis ul {
    list-style-image: url('images/ico_liensexterne.png');
    padding-left: 2px;    
}

#mes_amis a {
    text-decoration: none;
    color: #760001;
}

#titre_principal > h4 {
    font-size: 1.1em;
    margin: 0;
    padding: 10px;
    color: #706b64;
}

#titre_principal nav {
  flex:1;  
}

#hm_formul > .hm-header {
  /*font: 13px/1.65em "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;*/
  background-color: #ff6600;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  color: #ffffff;
  /*cursor: pointer;*/
  font-size: 1em;
  font-weight: bold;
  padding: 8px 10px;
}

#hm_formul {  
  box-shadow: 1px 1px 5px #555 !important;
  /*bottom: -516px; -652px
  font-weight: 100;     
  max-width: 90%;
  position: fixed;
  z-index: 999999;
  right: 10px;
  transition: bottom 250ms ease-out 0s;
  text-shadow: none !important;
  visibility: visible;*/
  width: 60%; 
  font-size: 1.5em; 
}

.cache {
    bottom: -516px;
}

.deroule {
    bottom: 0;
}

#hm_formul > .hm-content {
  background-color: #ffffff;
  position: relative;
}

#hm_formul > .hm-content p.explainText {
  color: #000000;
  font-size: 0.7em;
  font-weight: bold;
  margin: 0;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
}

#hm_formul .cboth {
  clear: both;
}

#hm_formul > .hm-content form {
  padding: 10px;
}

#hm_formul .hide {
  /*display: none !important;*/
}

#hm_formul form input:not([type="checkbox"]), textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
}

#hm_formul > .hm-content > form input, textarea {
  border: 1px solid #aaa;
  border-radius: 2px !important;
  color: #333;
  font-size: 0.9em;
  line-height: normal;
  outline: 0 none;
  padding: 5px;
}

#hm_formul form label {
  display: inline-block;  
  font-size: 0.8em;
  margin: 0 30px;
}

#hm_formul form select {
  width: 100%;
}

#hm_formul > .hm-content > form input:not(:first-child), textarea:not(:first-child) {
  margin-top: 10px;
}
#hm_formul form input:not([type="checkbox"]), textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
}

#hm_formul > .hm-content > form input, textarea {
  border: 1px solid #aaa;
  border-radius: 2px !important;
  color: #333;
  font-size: 0.9em;
  line-height: normal;
  outline: 0 none;
  padding: 5px;
}

#hm_formul > .hm-content > form > input[type="submit"] {
  background-color: #cc0000;
  border: 0 none;
  color: #ffffff;
  cursor: pointer;
  float: right;
  padding: 5px 20px;
}
#hm_formul > .hm-content > form input:not(:first-child), textarea:not(:first-child) {
  margin-top: 10px;
}

#hm_formul form input:not([type="checkbox"]), textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
}

 @media all and (max-width: 1280px)
{
  .bouton_rouge {
    font-size: 2rem;
    width: 25%;
  }

  #contenu span {
    font-size: 1.4rem;
    left: 28%;
    width: 75%;
  }

  #contenu li {
    margin: 2.7% 0;    
  }
}

 @media all and (max-width: 1024px)
{
  .bouton_rouge {
    font-size: 1.5rem;
    width: 25%;
  }

  #contenu span {
    font-size: 1.4rem;
    left: 34%;
    width: 75%;
  }
}

@media all and (max-width: 800px)
{
  header h1 {
    font-size: 1.9rem;
  }
} 

@media all and (max-width: 600px)
{
  header h1 {
    font-size: 1.5rem;
  }
}