* {
	margin:0;
    padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.certificados {
    width: 95%;
    max-width: 95%;
    margin: 1em auto;
    overflow: hidden;
}

.info1 h1{
    font-size: 16px;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    text-align: justify;
}

.main {
	max-width: 100%;
	width: 100%;
	height: auto;
	overflow: hidden;
    margin: auto;
    background-size: cover;
}

.opciones {
	width: 100%;
    padding-top: 5px;
    padding-bottom: 10px;
    background: #fff;
}

.menulateral {
	background: #fff;
    width: 100%;
    max-width: 100%;
}

.menulateral li {
	padding: 5px;
	color: #000;
    overflow: hidden;
    margin-left: 15px;
    font-family: "Nunito", sans-serif;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    background: #fff;
}

.menulateral li:hover {
	color: #DBDBDB;
    background: #011F7B;
	font-weight: bold;
}

.menulateral a {
	background: #000;
}

.promocion {
    width: 100%;
    height: auto;
    max-width: 100%;
    margin-top: 1em;
}

.promocion img {
    width: 100%;
    background-size: cover;
}

.promocion1 {
    margin-top: 2em;
    width: 100%;
    text-align: center;
    align-content: center;
    align-items: center;
    margin-bottom: 2em;
}

.promocion1 a {
    background: #DBDBDB;
	padding: 8px;
	font-family: 'Roboto', sans-serif;
    color: darkcyan;
    font-size: 16px;
    border-radius: 7px;
    cursor: pointer;
    margin-top: 1em;
    margin-bottom: 1em;
    text-decoration: none;
    font-weight: 400;
}

.promocion1 a:hover {
    color: #00171f;
}


.bodega {
    width: 100%;
    max-width: 100%;
}

.bodega img {
    background-size: cover;
    overflow: hidden;
    width: 100%;
    display: inline-block;
}

.especialidad {
    padding-top: 2em;
    height: auto;
    width: 100%;
    overflow: hidden;
    margin: auto;
    margin-top: 1em;
}

.especialidades2 {
    width: 100%;
    max-width: 100%;
    padding: 1em;
    margin: auto;
}

.especialidades2 h1 {
    padding-bottom: 0.2em;
    color: black;
    border-bottom: 1px solid red;
    margin: auto;
    font-family: "Roboto", sans-serif;
    font-size: 23px;
    font-weight: 600;
}

.especialidades1 {
    width: 100%;
    margin-top: 0;
    padding: 1em;
}

.especialidades1 img {
    width: 75%;
    height: auto;
}

.especialidades1 h4 {
    font-size: 14px;
    font-family: "Roboto", sans-serif;
    padding: 0.5em;
    font-weight: 200;
}

.cubrimos {
    width: 90%;
}



.clientes {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-top: 2em;
    margin: auto;
}

.clientestitulo {
    width: 100%;
    max-width: 100%;
    padding: 1em;
    margin: auto;
}

.clientestitulo h1 {
    padding-bottom: 0.2em;
    color: black;
    border-bottom: 1px solid red;
    margin: auto;
    font-family: "Roboto", sans-serif;
    font-size: 23px;
    font-weight: 600;
}

.listaclientes {
    width: 90%;
    max-width: 100%;
    padding: 1.5em;
}

.listaclientes img {
    width: 70%;
    border-radius: 1em;
}




.principal {
    background: #fff;
    width: 100%;
    padding-top: 5px;
}

.tarjeta1 {
	background: #fff ;
    margin: auto;
    width: 90%;
    max-width: 100%;
    padding: 1em;
}

.tarjeta1:hover{
    -webkit-box-shadow: inset 0px 0px 7px 5px rgba(0,0,0,0.12);
    -moz-box-shadow: inset 0px 0px 7px 5px rgba(0,0,0,0.12);
    box-shadow: inset 0px 0px 7px 5px rgba(0,0,0,0.12);
}

.tarjeta1 img {
    width:250px;
	height:332px;
}

.infopro{
	width:100%;
    max-width: 100%;
	position: relative;
	max-width: 100%;
	height: 80px;
	background-color: #1E328A;
	border-radius: 0.51em;
	overflow: hidden;
}

.infopro p{
	padding-left: 0.5em;
	padding-top: 0.9em;
	line-height: 0.5em;
	text-align: left;
}

.titulopro{
    font-size: 16px;
    font-weight: 400;
	color: #87C131;
}

.adicionalpro{
	color: #fff;
}

.modal1 {
	font-size: 0.8em;
	float: right;
	margin-top: -30.5px;
	margin-right: 1.5em;
}

a {
	text-align: none;
	color: white;
}

 <!-- modal --> 

.modal-content {
    border-radius: 1.1em;
    overflow: hidden;
}

.modal-header {
    background: #16529C;
    overflow: hidden;
}

.modal-title {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    width: 100%;
    color: white;
}

.modal-body {
    background: #fff;
}

.modalimg .img {
    box-shadow: 0 0 20px 0;
}

.detalle {
    margin: 2em 0 2em 0;
    width: 100%;
}

.detalle h6 {
    margin: auto;
    font-size: 16px;
    font-family: 'Archivo', sans-serif;
    font-weight: 600;
    padding: 0.2em;
    color: #323234;
    text-align: left;
    margin-left: 200px;
}

.modal-footer {
    background: #DFDEDE;
}

.modal-footer .btn {
    margin: auto;
    background: #16529C;
    color: white;
}

#page { 
    width: 585px;
    margin: 20px auto;
}

#thumbs, #thumbs1, #thumbs2, #thumbs3, #thumbs4, #thumbs5, #thumbs6, #thumbs7, #thumbs8, #thumbs9, #thumbs10, #thumbs11, #thumbs12, #thumbs13, #thumbs14, #thumbs15, #thumbs16, #thumbs17, #thumbs18, #thumbs19, #thumbs20 {
    padding-top: 10px;
    overflow: hidden;
    width: 100%;
    margin-left: 95px;
}

#thumbs img, #thumbs1 img, #thumbs2 img, #thumbs3 img, #thumbs4 img, #thumbs5 img, #thumbs6 img, #thumbs7 img, #thumbs8 img, #thumbs9 img, #thumbs10 img, #thumbs11 img, #thumbs12 img, #thumbs13 img, #thumbs14 img, #thumbs15 img,, #thumbs16 img, #thumbs17 img, #thumbs18 img, #thumbs19 img, #thumbs20 img #largeImage, #largeImage1, #largeImage2, #largeImage3, #largeImage4, #largeImage5, #largeImage6, #largeImage7, #largeImage8, #largeImage9, #largeImage10, #largeImage11, #largeImage12, #largeImage13, #largeImage14, #largeImage15, #largeImage16, #largeImage17, #largeImage18, #largeImage19, #largeImage20 { 
    border: 1px solid gray; 
    padding: 4px; 
    background-color: white; 
    cursor: pointer;
    overflow: hidden;

} 

 #largeImage, #largeImage1, #largeImage2, #largeImage3, #largeImage4, #largeImage5, #largeImage6, #largeImage7, #largeImage8, #largeImage9, #largeImage10, #largeImage11, #largeImage12, #largeImage13, #largeImage14, #largeImage15, #largeImage16, #largeImage17, #largeImage18, #largeImage19, #largeImage20 { 
    margin-left: 95px;
} 
    
#panel { 
    position: relative; 
}

.miniatura img { 
    width: 20%;
    height: 20%;
    overflow: hidden;
    cursor: pointer;
}


@media screen and (max-width: 990px){

	#thumbs, #thumbs1, #thumbs2, #thumbs3, #thumbs4, #thumbs5, #thumbs6, #thumbs7, #thumbs8, #thumbs9, #thumbs10, #thumbs11, #thumbs12, #thumbs13, #thumbs14, #thumbs15, #thumbs16, #thumbs17, #thumbs18, #thumbs19, #thumbs20 {
        margin-left: 10px;
    }
    
    #largeImage, #largeImage1, #largeImage2, #largeImage3, #largeImage4, #largeImage5, #largeImage6, #largeImage7, #largeImage8, #largeImage9, #largeImage10, #largeImage11, #largeImage12, #largeImage13, #largeImage14, #largeImage15, #largeImage16, #largeImage17, #largeImage18, #largeImage19, #largeImage20 { 
        margin-left: 10px;
    }
    
    .modal-body .detalle h6 {
        margin-left: 100px;
    }
}

@media screen and (max-width: 767px){
    
    .modal-body .detalle h6 {
        margin: auto;
        text-align: center;
    }
    
    .clientestitulo h1 {
        font-size: 30px;
    }
    
    .especialidades2 h1 {
        font-size: 25px;
    }
    
    .promocion {
        display: none;
    }
    
    .modal-footer .btn {
        float: left;
     }
}

@media screen and (max-width: 360px){
	
	.titulopro {
        font-size: 15px;
    }
    
    .adicionalpro{
        font-size: 12px;
    }

}