body{
	background-image: url("imagenes/idear-fondo.jpg");
}

#respuesta{
	padding-top: 20px;
	padding-bottom: 20px;
	position: fixed;
	left: 100px;
}

.menu{
	background: #04605D;
	/*position: fixed;
	/*background-image: url("../../imagenes/fondo-menu.jpg");*/
	/*-webkit-background-size: cover;
	background-size: cover;*/
	-webkit-box-shadow: 6px 8px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 6px 8px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 6px 8px 5px 0px rgba(0,0,0,0.75);

	border-radius: 4px 4px 4px 4px;
	-moz-border-radius: 4px 4px 4px 4px;
	-webkit-border-radius: 4px 4px 4px 4px;
	border: 0px solid #000000;
	color: #ffffff;
}

.menu li{
	text-align: center;
	cursor: pointer;
	padding:10px 10px;
	border-style: 
	-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);

	border-radius: 4px 4px 4px 4px;
	-moz-border-radius: 4px 4px 4px 4px;
	-webkit-border-radius: 4px 4px 4px 4px;
	border: 0px solid #000000;

	text-decoration: none;

	margin: 5px 5px -10px -10px;
	color: #ffffff;

}

.menu li:hover{
	background: #12B2C3;
}

.menu a{
	text-decoration: none;
	text-align: center;
	color:#fff;
	
}

.menu ul{
	list-style: none;
	
	padding: 10px;
}

.menu ul li ul{
	margin-left: 20px;
	text-align: right;
	color: #ffffff;
}

.mensaje-error{
	background-color: #D16F5A;
	color: #2B0401;
	width: 300px;
	height: 100px;
	text-align: center;
	padding: 10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius: 10px;
	position: fixed;
	left: 70%;
	-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
}

.mensaje-ok{
	background-color: #73D15A;
	color: #082401;
	width: 300px;
	height: 100px;
	text-align: center;
	padding: 10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius: 10px;
	position: fixed;
	left: 70%;
	-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
}

.wifeo_pagemenu a{
	color:#FFFFFF;
	text-decoration:none
} 

.wifeo_rubrique a{
	color:#FFFFFF;
	text-decoration:none
} 

.wifeo_pagesousmenu a{
	color:#FFFFFF;
	text-decoration:none
}

.wifeo_conteneur_menu{
	border-spacing:0px
} 

.wifeo_conteneur_menu{
	height:auto;
	width:170px
} 

.wifeo_pagemenu a{
	border-top:1px solid #2AADBB;
	border-bottom:2px solid #005D6B;
	background-color:#028593;
	-webkit-transition-property:background-color;
	-moz-transition-property:background-color;
	-ms-transition-property:background-color;
	-o-transition-property:background-color;
	transition-property:background-color;
	-webkit-transition-duration:1s;
	-moz-transition-duration:1s;
	-ms-transition-duration:1s;
	-o-transition-duration:1s;
	width:170px;
	padding:5px;
	height:40px;
	text-align:left;
	display:table-cell;
	vertical-align:middle
} 

.wifeo_pagemenu a:hover{
	border-top:1px solid #002B39;
	border-bottom:2px solid #002B39;
	background-color:#002B39;
	width:170px;
	padding:5px;
	height:40px;
	text-align:left;
	display:table-cell;
	vertical-align:middle
} 

.wifeo_rubrique a{
	background-color:#028593;
	-webkit-transition-property:background-color;
	-moz-transition-property:background-color;
	-ms-transition-property:background-color;
	-o-transition-property:background-color;
	transition-property:background-color;
	-webkit-transition-duration:1s;
	-moz-transition-duration:1s;
	-ms-transition-duration:1s;
	-o-transition-duration:1s;
	transition-duration:1s;
	border-top:1px solid #2AADBB;
	border-bottom:2px solid #005D6B;
	padding:5px;
	height:40px;
	width:170px;
	text-align:left;
	text-decoration:none;
	display:table-cell;
	vertical-align:middle
} 

.wifeo_rubrique a:hover{
	background-color:#002B39;
	border-top:1px solid #002B39;
	border-bottom:1px solid #002B39
}
	 
.wifeo_pagesousmenu{
	background-color:#143F4D;
	background-image:url();
	background-position:right;
	background-repeat:no-repeat;
	-webkit-transition:all 0.25s ease;
	-moz-transition:all 0.25s ease;
	-ms-transition:all 0.25s ease;
	-o-transition:all 0.25s ease;
	transition:all 0.25s ease;
	border-top:1px solid #1E4957;
	border-bottom:1px solid #0A3543;
	padding:5px;
	width:160px;
	display:table;
	text-align:left;
	padding-top:10px;
	padding-bottom:10px
} 

.wifeo_pagesousmenu:hover{
	background-image:url();
	background-position:left;
	background-repeat:no-repeat;
	background-color:#000007;
	border-top:1px solid #28282F;
	border-bottom:1px solid #000000;
	padding:5px;
	width:160px;
	display:table;
	text-align:left;
	padding-top:10px;
	padding-bottom:10px
} 

.wifeo_sousmenu{
	width:170px;
	display:none
}
.input{
	background-color: #FFFFE0;
	border-color: #F1C40F;
	
  }
  
  :root{
    --primaryColor: #2f9ac4;
    --colorHover: #2f9ac4;
    --sizeButton: 60px;
    --sizeIcons: 25px;
    --widthContent: 200px;
    --heightContent: 130px;
}

*{
    margin: 0;
    padding: 0;
}

body{
    font-family: 'Calibri';
    font-size: 16px;
    background: var(--bgColor);
    position: relative;
}


.menu-content{
    width: var(--widthContent);
    height: var(--heightContent);
    position: fixed;
    bottom: 90px;
    left: 95%;
    transform: translateX(-50%);
}

.menu-item{
    width: var(--sizeButton);
    height: var(--sizeButton);
    background: var(--primaryColor);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    bottom: 0;
    left: 60px;
    transition: transform 300ms;
}

.menu-item:hover{
    background: var(--colorHover);
}

.menu-item img{
    width: var(--sizeIcons);
    transition: transform 300ms;
}

#menu{
    z-index: 10;
}

.menu-active #menu img{
    transform: rotate(45deg);
}

.menu-active .menu-item:nth-child(2){
    transform: translateX(-70px);
}

.menu-active .menu-item:nth-child(3){
    transform: translateY(-70px);
}

.menu-active .menu-item:nth-child(4){
    transform: translateX(70px);
}


.main-content{
     width: var(--widthContent);
    height: var(--heightContent);
    position: fixed;
    bottom: -40px;
    left: 92%;
   
}


.main-content h1{
    text-align: center;
    color: rgb(14, 14, 14);
    font-weight: 300;
    font-size: 2em;
}