img.foto_perfil {
	max-width: 24%;
	padding: 0px 10px;
	float: left;
}

* {
    margin: 0px;
    padding: 0px;
	font: normal 26px arial, sans-serif;
}

h1 {
    font: bold 40px arial, sans-serif;
	text-align: center;
	color: #7A2E28;
}

h2 {
    font: normal 36px arial, sans-serif;
	color: #7A2E28;
	border-bottom: 1px solid #7A2E28;
}

h3 {
    font: normal 26px arial, sans-serif;
	padding: 0px 0px 0px 0px;
}

h4 {
	font: normal 20px arial, sans-serif;
	text-align: center;
}


header, section, footer, aside, nav, article, figure, figcaption, hgroup {
    display: block;
}

body {
    text-align: center;
}

#agrupar {
    margin: 0px auto;
    text-align: left;
}

#cabecera {
    background: #DDD8D5/*gris-oscuro*/;
    border: 0px;
    padding: 0px;
}

.ima-centrada {
    display: block;
    margin: auto;
    width: 50%;
}

#idioma ul{
	list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
	background-color: #F4F0F1/*gris-claro*/;
}   
#idioma li {
	float: right;
    background-color: #F4F0F1/*gris-claro*/;
    list-style: none;
}
#idioma li a {
	color: #8A211B/*burdeos*/;
	display: block;
    text-align: center;
    padding: 6px 10px;
    text-decoration: none;	
	overflow: hidden;
	font: bold 14px arial, sans-serif;		
}
#idioma li a:hover:not(.idioma-link-active) {
    background-color: #DDD8D5/*gris-oscuro*/;
	color: #F4F0F1/*gris-claro*/;
}
#idioma li a.idioma-link-active {
    color: #F4F0F1/*gris-claro*/;
    background-color: #8A211B/*burdeos*/;
}

#menu ul{
	list-style-type: none;
    margin: 0;
    padding: 0px 0px;
    overflow: hidden;
    background-color: #8A211B/*burdeos*/;
}
#menu li {
	float: left;
	background-color: #8A211B/*burdeos*/;
    list-style: none;
	border-right: 1px solid #F4F0F1/*gris-claro*/; 
}
#menu li:last-child {
    border-right: none;
}
#menu li a {
    color: #F4F0F1/*gris-claro*/;
    display: block;
    text-align: center;
    padding: 10px 10px;
    text-decoration: none;
	overflow: hidden;
    font: normal 20px arial, sans-serif;
}
#menu li a:hover {
    background-color: #DDD8D5/*gris-oscuro*/;
	color: #8A211B/*burdeos*/;
}
.menu-link:link{
    color: #F4F0F1/*gris-claro*/; 
    background-color: transparent; 
    text-decoration: none;
	font: bold 16px arial, sans-serif;
}
.menu-link:visited {
    color: #F4F0F1/*gris-claro*/;
    background-color: transparent;
    text-decoration: none;
}
.menu-link:hover {
    color: #DDD8D5/*gris-oscuro*/;
    background-color: transparent;
    text-decoration: none;
}
.menu-link:active {
    color: #F4F0F1/*gris-claro*/;
    background-color: transparent;
    text-decoration: none;
}

section {
    padding: 20px 50px;
}

.cab-intro{
	padding: 50px 100px 30px 100px;
}

.intro{
	padding: 10px 100px;
}

.p-intro {
    color: black;
    font-style: normal;
    font-size: 20px;
    text-align: center;
    text-decoration: none;
	padding: 10px 0px 0px 0px;
}

#servicios, #perfil , #contacto {
    text-align: left;
    color: #8A211B/*burdeos*/;
    padding: 25px 40px;
    margin: 30px 160px;
	background: #F4F0F1/*gris-claro*/;
	box-shadow: 5px 5px 10px #8A211B/*burdeos*/;
	border-radius: 25px 0px 0px 0px;
}

ul.lista-servicios{
	list-style: none; /* Remove list bullets */
    padding: 0;
    margin: 0;
}

ul.lista-servicios li{
	padding-left: 16px; 	
}

ul.lista-servicios li:before{
    list-style-type: square;
	font-family: "FontAwesome";
	content: "\f086"; /* Insert content that looks like bullets */
	margin:0 5px 0 -15px;
	color: #f00;
    padding-right: 8px;
	color: #8A211B/*burdeos*/;
}


.contenido-seccion{
	padding: 20px 20px 0px 20px;
}

.opinion{
	padding: 50px 30px 0px;
}
.cliente-cargo{
    color: black;
    font-style: normal;
    font-size: 20px;
    text-align: left;
    text-decoration: none;
	padding: 0px 0px;	
}
.cliente-nombre{
    color: black;
    font-weight: bold;
    font-size: 20px;
    text-align: left;
    text-decoration: none;
	padding: 0px 0px;	
}
.cliente-opinion{
    color: black;
    font-style: italic;
    font-size: 20px;
    text-align: left;
    text-decoration: none;
	padding: 0px 0px;	
}

.p-articulo {
    color: black;
    font-style: normal;
    font-size: 18px;
    text-align: justify;
    text-decoration: none;
	padding: 5px 0px;
}

.p-contacto {
    color: black;
    font-style: normal;
    font-size: 20px;
    text-align: justify;
    text-decoration: none;
	padding: 10px 10px;
}

.icono-contacto {
    opacity: 1.0;
    color: #8A211B/*burdeos*/;
}

#correo{
	padding: 20px;
}
.formulario-correo{
	padding: 20px;
	background-color: #DDD8D5/*gris-oscuro*/;
	border: 1px solid #8A211B/*burdeos*/; 
}
.formulario-entrada{
	width: 100%;
	font-size: 16px;
	color: #8A211B/*burdeos*/; 
	padding: 10px 10px;
	margin: 5px 0px;
	border: 1px solid #8A211B/*burdeos*/; 
	box-sizing: border-box;
}




#asociaciones{
	text-align: center;
	padding: 50px;
}

.boton-inicio{
    background-color: #8A211B/*burdeos*/; 
    color: #F4F0F1/*gris-claro*/;
    border: 2px solid #8A211B/*burdeos*/; 
	border-radius: 0px;
    padding: 5px 5px;
	margin: 0px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 24px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
.boton-inicio:hover {
    background-color: #DDD8D5/*gris-oscuro*/;
    color: #8A211B/*burdeos*/; 
	/*box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);*/
}

#pie {
    clear: both;
    text-align: center;
    padding: 20px;
    background: #DDD8D5/*gris-oscuro*/;
    border-top: 6px solid #8A211B/*burdeos*/;
	margin-top: 5px;
}

.p-pie{
    color: black;
    font-style: normal;
    font-size: 20px;
    text-align: center;
    text-decoration: none;
	padding: 10px 10px;
}

.icono-social {
    opacity: 1.0;
    color: #8A211B/*burdeos*/;
}

.icono-social:hover {
    opacity: 0.5;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

.ico-link:link {
    text-decoration: none;
}

.derechos{
	font-size: 16px;
}


/* Style the buttons that are used to open and close the accordion panel */
button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}

button.accordion:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

button.accordion.active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}

/* Style the accordion panel. Note: hidden by default */
div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}


#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: red; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
}

#myBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
}