/* Pantalla ordenador */
@media screen and (min-width: 970px) and (max-width: 1199px) {

#principalmiembro {
	width: 900px;
	float: left;
	padding: 2px;
    padding-left: 15px;
}

#principalmiembro .persona {
    display: block;
	font-family: IBMPlexMono;
    font-weight: bold;
	font-size: 2rem;
	color:var(--dvgo-color-principal);	 
    margin-bottom: 0px;
    margin-left: 10px;
}

#principalmiembro .persona:hover {
	text-decoration: none;
    font-weight: bold;  	
}

#principalmiembro .medio {
	font-family: Play;
	font-size: 18px;
    color: #000;
    margin-left: 10px;
}

#principalmiembro .medio:hover {
	text-decoration: none;
    font-weight: bold;
}

#principalmiembro .actividad {
	font-family: Rubik;
	font-size: 18px;
    color: #000;
    margin-left: 10px;
}

#principalmiembro .actividad:hover {
	text-decoration: none;
    font-weight: bold;
}

#principalmiembro .rolmiembro {
    display: block;
    font-family: IBMPlexSerif;
	font-size: 24px;
	color: #000;	
    padding: 4px;
    margin-top: 0px;
    margin-left: 10px;	
}

#principalmiembro .rol:hover {
	text-decoration: none;
}

#principalmiembro .rolarea {
    display: block;
    font-family: LaconicRegular;
	font-size: 20px;
	color: #000;	
    padding: 4px;
    margin-top: 0px;
    margin-left: 10px;	
}

#principalmiembro .rolarea:hover {
	text-decoration: none;
    font-weight: bold;
}

#principalmiembro .divimagen {
    width: 28%;
    float: left;   
    margin-right: 8px; 
}

#principalmiembro .imagen {
  	border-radius: 4px;
    max-width: 85%;
    max-height: 15rem;
    float: right;
    margin: 10px;
}

#principalmiembro .divdatos {
    width: 68%; 
    float: left;   
    margin-right: 8px; 
    padding-left: 10px;
}

#principalmiembro .foto {
    width: 100px;
    float: right;
    margin: 5px;
  	border-radius: 6px;
    box-shadow:0px 0px 1px 1px rgba(0,0,0,.3);
}

}

/* Pantalla móviles */
@media screen and (max-width: 480px) {

/* ------------------------- Principalmiembro */

#principalmiembro {
	width: 95%;
	float: left;
	padding: 2px;
}

#principalmiembro .persona {
    display: block;
	font-family: IBMPlexMono;
    font-weight: bold;
	font-size: 2rem;
	color:var(--dvgo-color-principal);	 
    margin-bottom: 0px;
    margin-left: 10px;
}

#principalmiembro .persona:hover {
	text-decoration: none;
    font-weight: bold;  	
}

#principalmiembro .medio {
	font-family: Play;
	font-size: 18px;
    color: #000;
    margin-left: 10px;
}

#principalmiembro .medio:hover {
	text-decoration: none;
    font-weight: bold;
}

#principalmiembro .actividad {
	font-family: Rubik;
	font-size: 18px;
    color: #000;
    margin-left: 10px;
}

#principalmiembro .actividad:hover {
	text-decoration: none;
    font-weight: bold;
}

#principalmiembro .rolmiembro {
    display: block;
    font-family: IBMPlexSerif;
	font-size: 24px;
	color: #000;	
    padding: 4px;
    margin-top: 0px;
    margin-left: 10px;	
}

#principalmiembro .rol:hover {
	text-decoration: none;
}

#principalmiembro .rolarea {
    display: block;
    font-family: LaconicRegular;
	font-size: 20px;
	color: #000;	
    padding: 4px;
    margin-top: 0px;
    margin-left: 10px;	
}

#principalmiembro .rolarea:hover {
	text-decoration: none;
    font-weight: bold;
}

#principalmiembro .divimagen {
    width:100%;
    text-align:center;
}

#principalmiembro .imagen {
    border-radius:4px;
    max-width:85%;
    max-height:25em;
    margin:0.5em auto;
}

#principalmiembro .divdatos {
    float: left;   
    margin-right: 8px; 
    padding-left: 10px;
}

#principalmiembro .foto {
    max-width:85%;
    margin:0.5em auto;
    border-radius:6px;
    display: block;
}

}

/* Pantalla tablets */
@media screen and (min-width: 481px) and (max-width: 969px) {

/* ------------------------- Principalmiembro */
#principalmiembro {
    width:100%;
    }
    
    #principalmiembro .persona {
    display:block;
    font-family: IBMPlexMono;
    font-weight: bold;
    font-size: 2rem;
    color: var(--dvgo-color-principal);
    margin-bottom: 0px;
    margin-left: 0.5em;
    }
    
    #principalmiembro .persona:hover {
    text-decoration:none;
    font-weight:bold;
    }
    
    #principalmiembro .medio {
    font-family:Play;
    font-size:1.5em;
    color:#000;
    margin-left:0.5em;
    }
    
    #principalmiembro .medio:hover {
    text-decoration:none;
    font-weight:bold;
    }
    
    #principalmiembro .actividad {
    font-family: Rubik;
    font-size:1.5em;
    color:#000;
    margin-left:0.5em;
    }
    
    #principalmiembro .actividad:hover {
    text-decoration:none;
    font-weight:bold;
    }
    
    #principalmiembro .rolmiembro {
    display:block;
    font-family: IBMPlexSerif;
    font-size:2em;
    color:#000;
    padding:0.2em;
    margin-top:0px;
    margin-left:0.5em;
    }
    
    #principalmiembro .rol:hover {
    text-decoration:none;
    }
    
    #principalmiembro .rolarea {
    display:block;
    font-family:LaconicRegular;
    font-size:1.7em;
    color:#000;
    padding:0.2em;
    margin-top:0px;
    margin-left:0.5em;
    }
    
    #principalmiembro .rolarea:hover {
    text-decoration:none;
    font-weight:bold;
    }
    
    #principalmiembro .divimagen {
    width:100%;
    text-align:center;
    }
    
    #principalmiembro .imagen {
    border-radius:4px;
    max-width:85%;
    max-height:25em;
    margin:0.5em auto;
    }
    
    #principalmiembro .cuadromiembro {
    width:95%;
    padding:0.2em;
    border:2px solid #E0E4EA;
    border-radius:8px;
    box-shadow:0px 0px 2px 2px rgba(224,228,234,.5);
    }
    
    #principalmiembro .divdatos {
    clear:both;
    width:100%;
    text-align:center;
    padding-top:0.5em;
    }
    
    #principalmiembro .divfoto {
    width:100%;
    text-align:center;
    }
    
    #principalmiembro .foto {
    max-width:85%;
    margin:0.5em auto;
    border-radius:6px;
    display: block;
    }
    
}


/* Pantalla full width */
@media screen and (min-width: 1200px) {

#principalmiembro {
	width: 80%;
	float: left;
	padding: 2px;
    padding-left: 15px;
}

#principalmiembro .persona {
    display: block;
	font-family: IBMPlexMono;
    font-weight: bold;
	font-size: 2rem;
	color:var(--dvgo-color-principal);	 
    margin-bottom: 0px;
    margin-left: 10px;
}

#principalmiembro .persona:hover {
	text-decoration: none;
    font-weight: bold;  	
}

#principalmiembro .medio {
	font-family: Play;
	font-size: 18px;
    color: #000;
    margin-left: 10px;
}

#principalmiembro .medio:hover {
	text-decoration: none;
    font-weight: bold;
}

#principalmiembro .actividad {
	font-family: Rubik;
	font-size: 18px;
    color: #000;
    margin-left: 10px;
}

#principalmiembro .actividad:hover {
	text-decoration: none;
    font-weight: bold;
}

#principalmiembro .rolmiembro {
    display: block;
    font-family: IBMPlexSerif;
	font-size: 24px;
	color: #000;	
    padding: 4px;
    margin-top: 0px;
    margin-left: 10px;	
}

#principalmiembro .rol:hover {
	text-decoration: none;
}

#principalmiembro .rolarea {
    display: block;
    font-family: LaconicRegular;
	font-size: 20px;
	color: #000;	
    padding: 4px;
    margin-top: 0px;
    margin-left: 10px;	
}

#principalmiembro .rolarea:hover {
	text-decoration: none;
    font-weight: bold;
}

#principalmiembro .divimagen {
    width: 20%;
    float: left;   
    margin-right: 8px; 
}

#principalmiembro .imagen {
  	border-radius: 4px;
    max-width: 85%;
    max-height: 15rem;
    float: right;
    margin: 10px;
}

#principalmiembro .divdatos {
    width: 75%; 
    float: left;   
    margin-right: 8px; 
    padding-left: 10px;
}

#principalmiembro .foto {
    width: 150px;
    float: right;
    margin: 5px;
  	border-radius: 6px;
    box-shadow:0px 0px 1px 1px rgba(0,0,0,.3);
}

}