@media screen and (min-width: 20px) {

 #responsive_menu_mobile {
  display: block;
 }

 #responsive_menu {
  display: none;
 }

 .container {
  padding-top: 4%;
 }

}

@media screen and (min-width: 800px) {

 body {
  margin-top: 10px;
 }

 #responsive_menu_mobile {
  display: none;
 }

 #responsive_menu {
  display: block;
 }

 .snippet {
  margin-left: auto;
  margin-right: auto;
 }

 .col-2 {
  float: left;
  width: 50%;
 }
 
}

@media screen and (min-width: 960px) {
 .snippet {
  width: 960px!important;
  margin-left: auto;
  margin-right: auto;
 }

 .container {
  padding-top: 3em;
 }

}

 #responsive_menu_toggler {
  padding: 0.5em;
  color: #D9D9D9;
  font-size: 120%;
 }

 #responsive_menu_toggler i {
  padding-right: 0.5em;
 }

 #responsive_menu {
  border-top: 1px solid #D9D9D9;
  border-bottom: 1px solid #D9D9D9;
  text-align: center;
  margin-bottom: 1.5em;
 }

 #responsive_menu ul {
   padding: 0;
   margin: 0;
 }

 #responsive_menu li {
   display: inline-block;
   border-top: 0px;
   padding: 0.5em;
 }

 #responsive_menu_mobile {
  background-color: #507AA8;
  border-bottom: 1px solid #D9D9D9;
  margin-bottom: 0.5em;
 }

 #responsive_menu_mobile ul {
   display: none; 
   padding: 0;
   margin: 0;
 }

 #responsive_menu_mobile li {
   border-top: 1px solid #D9D9D9;
   padding: 0.5em;
 }


body {
  font-family: 'Karla', sans-serif;
  background-color: #507AA8;
  color: #5c5c5c;
}

input, textarea {
 width: 100%;
 border: 0px;
 margin: 2px;
 padding: 2px;
 margin-bottom: 4px;
}

textarea {
 height: 5em;
 margin-bottom: 4px;
}

img {
 border: 0px;
}


a {
 text-decoration:none;
}

.highlight {
 color: #507AA8;
}

.page a {
 color: #507AA8;
}
.page a:hover {
 text-decoration: underline;
}

nav a, footer a {
  color: #D9D9D9;
}

nav a:hover, nav a.active,footer a:hover, footer a.active {
  color: #FFFFFF;
}

h1,h2 {
 font-family: 'Karla', sans-serif;
 font-weight: normal;
 margin: 0px;
}

h1 {
 font-size:1.5em;
}

h2 {
 font-size:1.3em;
}


.header {
  text-align: center;
  padding-bottom: 0.5em;
}


a.sousmenu {
  text-decoration: none;
}

a.sousmenu.active {
  color: #ffffff;
}

.container {
  background-image: url('images/LesAllies_background.png');
  background-repeat: repeat-x;
}

.accordion h3 {
 cursor: pointer;
}

.accordion h3:hover {
 color: #000000;
}

.page {
  font-family: arial, helvetica, sans-serif;
  background-color: rgb(217, 217, 217);
  background-color: rgba(217, 217, 217, 0.9);
  min-height: 300px;
  margin-left: 4%;
  margin-right: 4%;
  padding-bottom: 3.5em;
  margin-bottom: 0.5em;
  font-size: 90%;
}

footer {
  color: #d9d9d9;
  font-size: 85%;
  text-align:center;
  margin-bottom: 2em;
  margin-left: 4%;
  margin-right: 4%;
}

.visu {
 width:100%;
 margin-bottom: 1em;
}


.padded {
 padding-left: 15px;
 padding-right: 15px;
}


.separator {
 border-top: 1px solid #ccc;
 margin-bottom: 1.5em;
 margin-left: 3.5em;
 margin-right: 3.5em;
}