body{
margin:0;
padding:0;
color:#333;
font-size:12px;
font-family:Arial,Helvetica,sans-serif;
position: relative;
min-height: 100%;
margin:10px;
}

#wrapper{border:0;margin:0;margin-left:auto;margin-right:auto;
padding:0;
}

#header{
background-color:#FFF;
background-position:right top;
border-bottom:4px solid #80B5D7;

}

#mambo{
position:relative;
width:100%;
background:url(images/header_blue.jpg)#30569D no-repeat;background-position:top right;margin:0;padding:0;}

#break{
height:50px;
}

form{
margin:0;
}

.button{
border:solid 1px #ccc;
background:#E9ECEF;
color:#666;
font-weight:bold;
font-size:11px;padding:4px;
}

.login{
margin-left:auto;
margin-right:auto;
margin-top:6em;
padding:15px;
border:1px solid #ccc;
width:429px;
background:#F1F3F5;
}

.login h1{
background:url(../images/login_header.png) no-repeat;
background-position:left top;
color:#333;
margin:0;
height:50px;
padding:15px 4px 0 50px;
text-align:left;
font-size:1.5em;
}

.login p{
padding:0 1em 0 1em;
}

.form-block{
border:1px solid #ccc;
background:#E9ECEF;
padding-top:15px;
padding-left:10px;
padding-bottom:10px;
padding-right:10px;
}

.login-form{
text-align:left;
float:right;
width:60%;
}

.login-text{
text-align:left;
width:40%;
float:left;
}

.inputlabel{
font-weight:bold;
text-align:left;
}

.inputbox{
width:150px;
margin:0 0 1em 0;
border:1px solid #ccc;
}

.clr{
clear:both;
}

.ctr{
text-align:center;
}

.version{
font-size:.8em;
}
.elements{
float: left;
width:120px;
height:120px;
border-width: 1px;
border-style: solid;
border-color: #cccccc;
margin: 10px;
text-align:center;
background-color:#FFF;
}

.adminelements{
float: left;
border-width: 1px;
border-style: solid;
border-color: #0a5200;
margin: 10px;
text-align:center;
height: 310px;
}

.admingroups{
float: left;
border-width: 1px;
border-style: solid;
border-color: #0a5200;
margin: 10px;
text-align:center;
}

#border-top.h_teal {
 position: relative;
	background: url(images/j_header_middle.png) repeat-x;
}

#border-top.h_teal div      {
	background: url(images/j_header_right.png) 100% 0 no-repeat;
}

#border-top.h_teal div div  {
	background: url(images/j_header_left.png) no-repeat;
	height: 54px;
}
#border-top .version {
	display: block; float: right;
	color: #fff;
	padding: 25px 5px 0 0;
}

#border-top .title {
	font-size: 22px;
	font-weight: bold;
	color: #fff;
	line-height: 44px;
	padding-left: 180px;
}

#system-message{
	margin-bottom: 10px;
	padding: 0;
}

.icons {
border:0px;
text-align:center;
width:75x;
height:75px;
display: block;
margin-top:5px;
margin-left: auto;
margin-right: auto;
}

#footer {
	position: absolute;
	bottom: 0;
	background-color: #0066b2;
	width: 100%;
	padding:0px;
}

#module-status .logout   { background: url(images/icon-16-logout.png) 0px 0px no-repeat; height:22px }
#module-status .site     { background: url(images/icon-16-frontpage.png) 0px 0px no-repeat; height:22px }
#module-status .retour   { background: url(images/icon-32-back.png) 0px 0px no-repeat; height:22px }
#module-status .profiles { background: url(images/user.png) 0px 0px no-repeat; height:22px }
#module-status .groupes  { background: url(images/icone_groupe_petit.png) 0px 0px no-repeat; height:22px }
#module-status .droits   { background: url(images/icone_gus_cadenas.png) 0px 0px no-repeat; height:22px }
#module-status .modules  { background: url(images/modules.png) 0px 0px no-repeat; height:22px }
#module-status .aide  { background: url(images/icone_16_aide.png) 0px 0px no-repeat; height:22px }

#navigation{
float: left;
vertical-align:top;
font-size:15;
padding-left:10px;
}

.warning{
font-size:30px;
margin-left:30px;
margin-right:30px;
text-align:justify;
}

div #loading {
	position:absolute;
	top: 85px;
	right: 50%;
	margin-left:-65px;
	padding:5px 10px 5px 10px;
	width: 130px;
	background:#FFFFFF;
	font-size: 1.5em;
	display:none;
}

table {
/*	border:1px dotted grey;
	font-size:12px;
	background-color:#FFF;*/
}


/*******************************          2017          *****************************************/

.logo-container {
	margin-top: 10px;
/*	padding-left: 0px;
	padding-right: 5px;*/
}
.logo-container img {
	max-width:80%;
}
.bouton-devis-container {
	margin-top: 35px;
}
.bouton-facebook-container {
	margin-top: 40px;
	text-align: right;
}
.bouton-facebook-container a {
	margin-right: 3px;
}
.search-container {
	margin-top: 35px;
}
.body {
	background: none !important;
}

.header {
    width: 100%;
    display: block;
    height: 140px !important;
}

/* recherche */
div#div_recherche {
	background-image: none !important;
	background-repeat: no-repeat;
	width: 100% !important;
	height: 40px !important;
	padding-top: 0px !important;
	padding-right: 0px !important;
	text-align: right;
	margin: auto;
	border: 1px solid #ebebeb;
	border-radius: 7px;
	position: relative;
}

input#champ_recherche {
	border: none;
	background-image: none !important;
	background-repeat: no-repeat;
	background-color: transparent;
	width: 100% !important;
	height: 40px !important;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	color: #bab6b6;
	padding: 0 0 0 10px;
}

input#btn_ok {
	position: absolute;
	background-color: transparent;
	margin-left: -30px;
	width: 40px !important;
	border: none;
	cursor: pointer;
	height: 40px !important;
	z-index: 100;
}

div#div_recherche form:after {
  content: "\f002";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  position: absolute;
  font-size: 20px;
  color: #aaa;
  top: 0;
  right: 0;
  margin: 4px 10px 0 0;
  z-index: 1;
  width: 40px;
  height: 40px;
  z-index: 1;
}

 .bouton-devis-container .btn-primary {
 	width: 100%;
 }


 /********** menu *********/
 #nav  li  a{
 	padding: 20px 25px 20px 24px;
 	text-transform: uppercase;
 	color:#fff;
 	display: block;
 	font-size: 14px;
 	font-weight: 100 ;
 	font-family: 'Montserrat', sans-serif;
 	z-index: 100;
 	position: relative;
 }
 #nav li:nth-child(1) > center > a {
 	background-color: #193b5b;
 }
 #nav li:nth-child(2) > center > a {
 	background-color: #85d24c;
 }
 #nav li:nth-child(3) > center > a {
 	background-color: #ff01ae;
 }
 #nav li:nth-child(4) > center > a {
 	background-color: #ff9600;
 }
 #nav li:nth-child(5) > center > a {
 	background-color: #e90202;
 }
 #nav li:nth-child(6) > center > a {
 	background-color: #42c4ef;
 }
 #nav li:nth-child(7) > center > a {
 	background-color: #F6DF02;
 	background-color: #000;
 }
 #nav li ul a {
 	background-color: #fff !important;
 }

 a:hover, a:focus {
    text-decoration: none !important;
}



/********** SLIDER **********/

#home-slider {
	margin-top: 25px;
}
.slideshow img {
	max-width:100%;
}
.slideshow-images {
	max-width:100% !important;
}
.slideshow-images a {
	/*position: relative;*/
}

.content {
	margin-top: 20px;
}

.footer {
    background-image: none !important;
    margin-top: 25px;
}

.footer-list,.footer-list-list {
	list-style: none;
	text-align: left;
	padding: 0;
	margin: 0;
}
.footer-list span ,.footer-list a {
	color: #0a1422;
}
.footer-list-list, .footer-list-list a {
	color: #fff;
}
.footer-list.last {
	margin-top: 4px;
}

.row-2 {
	 background: #f3f3f3;
	 margin: 40px auto 0px auto 	;
	 padding: 80px 0;
}
.row-3 {
	 background: #193b5b;
	 padding: 90px 0;
	 color:#fff;
}
.btn-info{
	color: #fff !important;
}

/********** HOME **********/
#home-part-1 {
	height: 550px;
	height: auto;
	position: relative;
	padding-bottom: 20px;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	line-height: 1.5;
	min-height: 500px;
}
#home-part-1 h1{
	color: #193b5b;
	font-size: 20px;
	font-family: 'Montserrat', sans-serif;
	padding: 0px 0 20px 0;
	margin-bottom: 0px;
	line-height: 1.3;
}
#home-part-2 {
	height: 550px;
	height: auto;
	background-color: #193b5b;
}
#home-part-3 {
	background-image: url('images/template/bg-pattern.jpg') ;
 	padding-bottom: 30px;
}

 #home-part-3 .main_content {
 	background-color: #fff;
 }
.img{
    left: 370px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}

.img-1{
	position: absolute !important;
    top: 10px;
    left:auto;
}
.img-2{
	position: fixed !important;

    /*top: 1600px;*/

}
.img-3{
	position: absolute;
    /*top: 1600px;*/

}


/********** HME mise en avant **********/
/*.entete_produit {
	width: 100% !important;
}
.box_mis_en_avant {
	margin: 0 !important;
}
.interieur_box_mis_en_avant {
    border: 1px solid #e1e1e1;
    background-color: #f6f6f6;
    width: 100% !important;
    height: 306px;
    padding: 10px;
}*/

/*#div_bloc_actu + .row {
	display: none !important;
}*/

.row-1 {
 	font-size: 14px;
 	font-weight: 100 ;
 	font-family: 'Montserrat', sans-serif;
}
.row-1 ul li span {
	display: inline-block;
	padding-left: 15px;
}
.row-1 ul li img {
	float: left;
	padding-top: 10px;
}
.row-1 ul li span.contenu {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 200;
}
.row-1 ul li span.contenu a {
	color: inherit;
	text-decoration: none;
}
.row-1 ul li span.contenu a:hover {
	color: inherit;
	text-decoration: underline;
}

.footer-list.last {
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
}
.footer-list.last h3 {
	 font-family: 'Montserrat', sans-serif;
	 font-size: 16px;
}
a:hover {
	color: #23527c;

}
#legal {
	margin-top: 80px;
}

.row-3 ul  {
	height: 175px;

}
/*.row-3 ul li {
	height: 175px;
	border-right: 1px solid #eee;
}*/

.btn-info {
	text-align: center;
	width: 240px;
}
.btn-container {
	text-align: center;
	padding-top: 20px;
}

.btn-container a {
	margin: 0 0 12px 0;
}

/********** COLONNE GAUCHE **********/

div#consultez_nos_sejours , #composez_votre_sejour, #lien_pre_reserv, #bloc_img_conseils_perso, #part3 {
	background-image: none !important;
	background-color: #f4faff;
	padding: 0 !important;
	width: 100% !important;
	height: auto !important;
}
div#composez_votre_sejour {
	margin-top: 0 !important;
}
#consultez_nos_sejours h4, #composez_votre_sejour h4, #organisez h4 {
	text-align: center;
	color: #fff;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	margin: 0 0 0 0 !important;
}
#consultez_nos_sejours h4 a, #composez_votre_sejour h4 a, #organisez h4 a {
	display: block;
	width: 100%;
	height: 100%;
	padding: 20px 0;
	margin: 5px 0 !important;
}
h4 a {
	background-color: #fff;
	border: 1px solid #193b5b;
	color: #000 ;
}

h4 a[aria-expanded="true"] {
	background-color: #193b5b;
	color : #fff !important ;
}


div#consultez_nos_sejours select, #composez_votre_sejour select {
	width: 90% !important	;
	border: none;
	border-bottom: 1px solid #eee;
	height: 35px;
	background-color: #f4faff !important;

}
#organisez a, #organisez{
	color: #000;
	font-size: 16px;

}
#organisez i  {
	font-size: 18px;
	color: #193b5b !important;
	margin-left: 35px ;
}
#organisez i {
	margin-right: 15px;
}
#part3 li:first-child{
	border-bottom:1px solid #e8edf2;
}
#part3 ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#part3 li {
	padding: 10px 0;
	margin: 0 10px;
}
#part1, #part2 {
	padding-bottom: 10px;
}
.left_column {
	width: 285px;
}


/********** RESULTAT RECHERCHE **********/

#div_titre_res_rech {
    font-size: 22px;
    color: #111 !important;
    text-align: center;
    background-color: #eee;
    padding: 15px 0;
}

.entete_produit {
	width: auto !important;
}
.box_mis_en_avant {
    margin-left: auto !important ;
    margin-top: 20px;
}
.interieur_box_mis_en_avant {
	width: 100% !important;
	height: 400px !important;
}
.lien_lieu_loc {
    display: block;
    margin-top: 10px;
    font-size: 11px;
    color: #0f59ad;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
}
.interieur_box_mis_en_avant img {
	display: block;
	margin: 0 auto;
}
.lien_photo img {
    width: auto !important;
    height: 120px !important;
    max-width: 100% !important;
}
.interieur_box_selection .lien_photo img {
	width: auto !important;
    height:60px !important;
    max-width: 100% !important;
}



/********** produit **********/
.image_violet {
	background: #C5037E;
	background: #ff9600 !important;
	background-image: none !important;
}
.image_orange {
    background-image: none !important;
    background: #ff9600;
    background: #e90202;
}

.image_vert {
    background-image: none !important;
    background: #85d24c;
    background: #ff01ae;
}

.entete_fiche_produit {
    width: 100% !important;
    margin: 0px  0px 20px 0!important;
   	font-family: 'Open Sans', sans-serif !important;
    font-size: 21px !important;
    color: #FFFFFF;
    padding: 15px 0 !important;
    height: auto !important;
	padding: 15px 0 15px 50px !important;
}
.champs_fiche {
    border-radius: 0px !important;
    margin-left: 0px !important;
    /*background-color: #f4faff !important;*/
    padding: 10px 15px !important;
    background-color: transparent !important;
}
.champs_fiche *, .intitule_champ_fiche,.valeur_champ_fiche, .valeur_champ_fiche *, .fiche_descriptif , .fiche_descriptif * {
	font-family: 'Open Sans', sans-serif !important;
}
.programme_fiche {
	background-color: transparent !important;
}
.fiche_descriptif {
	padding: 15px 25px !important;
	background-color: #fbfbfb !important;
	margin: 0 !important;
	margin-top: 20px !important ;
}
.ouverture_fiche {
    border-radius: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
	width: 33% !important;
	background-color: transparent !important;
	padding: 10px 25px !important;
}
.fiche_photo_photo {
	border:1px solid #eee !important;
	background-color: #fff;
	text-align: center;
}
.fiche_photo_photo img{
	vertical-align:middle;
}

.fiche {
	background-color: #f4faff !important;
}
.fiche_2 {
	background-color: #fcfaef;
}
iframe {
	padding: 10px 0 !important;
}
/********** bouttons **********/

.btn-primary {
    background-color:#193B5B !important;
    background-image:none !important;
    border-radius:0px !important;
    padding: 8px 16px !important;
 	border-radius:0px !important;
}
.btn-primary:hover {
    background-color:#255e94 !important;
 	background-image:none !important;
}
.btn-danger {
    background-color:#FF9600 !important;
    background-image:none !important;
    border-radius:0px !important;
    padding: 8px 14px !important;
 	border-radius:0px !important;
 	border-color: #FF9600 !important;
}
.btn-danger:hover {
    background-color:#E90202 !important;
 	background-image:none !important;
}

.btn-info {
    background-color:#42c4ef !important;
    background-image:none !important;
    border-radius:0px !important;
    padding: 8px 14px !important;
 	border-radius:0px !important;
}
.btn-success {
	background-image:none !important;
    border-radius:0px !important;
    padding: 8px 14px !important;
 	border-radius:0px !important;
 	border-color: #4cae4c !important		;
}
.btn-info:hover {
    background-color:#3aacd1 !important;
 	background-image:none !important;
}

.header .btn-primary, .footer .btn-info  {
	 border-radius:10px !important;
}

/********** FORMS **********/

#form_id_1 tr td{
	padding: 5px 10px;
}
#form_id_2 {
	position: relative;
	width: 181px;
}
#adresse_mail {
	padding: 3px 0px 3px 10px;
	width: 181px;
	font-size: 13px;
}
.footer #envoyer {
	position: absolute;
	right:0;
	top:1px;
	background-color: #fff;
	color: #42C4EF;
	background: none;
	border: 0;
}
#form_pre_reservation input, #form_pre_reservation select, #form_pre_reservation textarea, #form_pre_reservation button {
	margin-left: 10px !important;
}
#form_pre_reservation input, #form_pre_reservation select, #form_pre_reservation textarea {
	margin: 5px 0;
}
label{
	font-weight: normal !important;
}



/********** selection **********/
#table_resultats_prod button {
	width: 185px;
	/*padding: 8px 6px !important;*/
	font-size: 13px !important;

}
#table_resultats_prod button i {
	margin-left: 8px;
}

.box_selection {
    padding-left: 8px;
    padding-right: 8px;
    border: 1px solid #a6aaaf;
    border-radius: 0px !important;
}
.box_selection .box_selection_pointilles {
    float: left;
   	border: 2px dashed #e1e1e1;
   	background: none !important;
    width: 87px;
    height: 143px !important;
    padding: 0px 5px 0px 5px !important;
    font-size: 12px;
    color: #6d6f71;
    text-align: center;
    margin-left: 8px;
    margin-right: 8px;
    margin-top: 15px !important;
}
.interieur_box_selection {
	width: 100% !important;
	height: 140px !important;
}
.prod_box_selection {
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding: 0 8px !important;
	height: auto !important;
}
#table_resultats_prod .lien_photo img {
	display: block;
	margin: 0 auto;
	height: 70px !important;
	max-width: 100%;
}
.box_selection button {
	width: 100% !important;
	padding: 0px 6px !important;
	margin: 0 !important;
}
.lien_btn_voir, .btn_pre_reserver {
	float: left;
	width: 50%;
}

.lien_intitule {
	padding: 10px 0;
	text-align: center;
}







/********** R E M O V E **********/

#nav li ul {
	display: none !important
}

#div_bloc_actu #contenu_act .actualite {
	line-height: 2 !important;
}
/*#div_bloc_actu #contenu_act .actualite img {
	width: auto !important;
	height: 400px !important;
}*/




/*@media only screen and (min-width : 768px) {
    .is-table-row {
        display: table;
    }
    .is-table-row [class*="col-"] {
        float: none;
        display: table-cell;
        vertical-align: top;
    }
}*/

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}


@media only screen and (max-width: 767px) {
/* smartphone */
	.fiche_photo_photo, .fiche_photo {
		width: 100% !important;
	}
	.left_column {
		display: none !important;
	}
	.ouverture_fiche {
	    width: 100% !important;
	}
	#home-slider {
		/*display: none !important;*/
		margin-top: 10px;
	}
	img {
		max-width: 100% !important;
		margin: 0 !important;
		height: auto !important;
	}
	.row-2 {
	    padding: 20px 0;
	}
	.footer-list li {
		height: auto;
		text-align: center;
	}
	.row-3 {
    	padding: 20px 0;
	}
	.footer-list.last {
    	margin-top: 20px;
	}
	.footer-list .row-3 li {
		height: auto;
	}
	#form_id_2 {
    	margin: 0 auto 30px auto;
	}
	.row-3 ul {
		height: auto;
		margin-bottom: 20px;
	}
	.footer-list > li {
		padding: 10px 0;
	}
	/********** menu responsive  **********/
	body {
		position: relative;
		overflow-x: hidden;
	}
	.head {
		/*position: relative;
		overflow-x:hidden ;
		overflow-y:visible ;*/
	}
	.header_links {
	   position: absolute !important;
	   right: -60%;
	   top: 40px;
	   width: 60% !important;
	    transition: all .2s ease .2s;
	    /*display: none;*/
	}
	#nav li a,#nav li {
		width: 100% !important;
	}
	#nav li a {
		padding: 15px 26px 15px 25px;
		font-size: 13px;
	}

	.mobile-menu {
	   position: absolute;
	   right: 15px;
	   top: 10px;
	}
}

@media only screen and (max-width: 760px) {
	#div_bloc_actu #contenu_act .actualite img {
		float: none !important;
		margin: 0 auto !important;
		display: block;
	}
}
@media only screen and (max-width: 370px) {
	.btn_pre_reserver .pull-right {
		float: left !important;
	}
}


/********** menu responsive  **********/


/* Common button styles */
.nav-button {
  position: relative;
  height: 1.4rem;
  width: 1.8rem;
  background-color: transparent;
  background-image: linear-gradient(to right, currentColor, currentColor);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 5px;
  padding: 0;
  outline: 0;
  border: 0;
  color: #333;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: .25s cubic-bezier(.17,.67,.89,1.4);
  transition-property: transform;
  will-change: transform;
 }
.nav-button::before,
.nav-button::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  display: block;
  height: 5px;
  background: currentColor;
  transition: .25s;
  transition-property: transform, top;
  will-change: transform, top;
}
.nav-button::before {
  top: 0;
}
.nav-button::after {
  top: calc(100% - 4px);
}



/* cross button */
.cross-button:focus {
  background-image: none;
}
.cross-button:focus::before,
.cross-button:focus::after{
   top: 50%;
 }
.cross-button:focus::before {
   transform: translate3d(0,-50%,0) rotate3d(0,0,1,45deg);
 }
.cross-button:focus::after {
   transform: translate3d(0,-50%,0) rotate3d(0,0,1,-45deg);
 }



/* arrow button 1 */
.arrow-button-1:focus {
   transform: rotate(90deg) translateZ(0);
 }
.arrow-button-1:focus::before {
  width: 60%;
  transform: rotate(-45deg) translate3d(-48%, 0, 0);
 }
.arrow-button-1:focus::after {
  width: 60%;
  transform: rotate(45deg) translate3d(-48%, 0, 0);
 }


/* arrow button 2 */
.arrow-button-2:focus {
  transform: rotate(180deg);
 }
.arrow-button-2:focus::before {
  width: 60%;
  transform: rotate(-45deg) translate3d(-48%, 0, 0);
 }
.arrow-button-2:focus::after {
  width: 60%;
  transform: rotate(45deg) translate3d(-48%, 0, 0);
 }

/* arrow button 3 */
.arrow-button-3:focus {
   transform: rotate(-90deg) translateZ(0);
 }
.arrow-button-3:focus::before {
  width: 60%;
  transform: rotate(-45deg) translate3d(-48%, 0, 0);
 }
.arrow-button-3:focus::after {
  width: 60%;
  transform: rotate(45deg) translate3d(-48%, 0, 0);
 }

/* arrow button 4 */
.arrow-button-4:focus::before {
  width: 60%;
  transform: rotate(-45deg) translate3d(-48%, 0, 0);
 }
.arrow-button-4:focus::after {
  width: 60%;
  transform: rotate(45deg) translate3d(-48%, 0, 0);
 }

/* Round button */
.round-button {
  display: inline-block;
  position: relative;
  z-index: 1;
  height: 4rem;
  width: 4rem;
  background-color: transparent;
  padding: 0;
  outline: 0;
  border: 1px solid #333;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: transform .2s;
}
.round-button::after,
.round-button::before {
  content: "";
  position: absolute;
  top: 15%;
  right: 40%;
  bottom: 15%;
  left: 40%;
  background-color: #333;
  border-radius: 10px;
  transition: transform .25s;
  will-change: transform;
}
.round-button::before {
  top: 40%;
  right: 15%;
  bottom: 40%;
  left: 15%;
}
/* opened nav button */
.round-button:focus,
.round-button:focus::before {
  transform: rotate(90deg) translateZ(0);
}




/* Global deco */

/*html {
  font-size: 62.5%;
}

body {
  margin: 0;
  padding: 2rem;
  background: #222;
  color: #fff;
  font-family: helvetica, arial, sans-serif;
  font-size: 1.4em;
  line-height: 1.5;
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
section {
  display: inline-block;
  border: .5rem solid #000;
  vertical-align: top;
  margin-bottom: .5rem;;
  padding: 1rem 2rem 4rem;
  text-align: center;
  background: #efefef;
  flex: 1 0 25%;
}

h1,
h2 {
  margin-top: 0;
  margin-bottom: 1rem;

}

h1 {
  font-size: 2.8rem;
  color: #bbb;
}

h2 {
  margin-top: 2rem;
  color: #333;
}

a {
  color: #bbb
}*/