body{
    margin: 0 !important;
    overflow-x: hidden;
}

/*========================== ESTILOS HEADER================================ */
#main-header {
	background:#D23C46;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: auto;
}

.classOrganizaciones{
	width: 100vw;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	flex-direction: row;
	margin: 2% 0 2% 0;
    flex-wrap: wrap;
}

.classApoyan{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	height: 100px;
	min-height: 100px;
	max-height: 100px;
}

.classTextoOrganizaciones{
    box-sizing: border-box; 
	padding: 10px 2px;
	height: 100%;
	text-align: center;
	writing-mode: vertical-lr;
	font-family: Helvetica;
	color: #002f70;
	background-color: white;
	font-size: 0.8em;
	margin: 0;
	transform: rotate(180deg);
	-webkit-writing-mode: vertical-lr;
	-ms-writing-mode: vertical-lr;
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
}

.classOrganizan{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	height: 100px;
	min-height: 100px;
	max-height: 100px;
}

.classENlaceHeader, .classENlaceHeaderApoyan{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: auto;
}



.classImgOganizaciones{
	object-fit: contain;
	height: 100%; 
	width: auto; 
	border: 1px solid white;
}

/*========================== ESTILOS MAIN================================ */

main{
    width: 100vw;
    height: auto;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
}

.classContainerMain{
    margin: 2% 0 2% 0;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 60vw;
    max-width: 1100px;
    -webkit-box-shadow: 0px 0px 20px 0px rgba(150,150,150,0.4);
-moz-box-shadow: 0px 0px 20px 0px rgba(150,150,150,0.4);
box-shadow: 0px 0px 20px 0px rgba(150,150,150,0.4);
}

section{
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 90%;
}

.classSectionBanner{
    margin: 2% 0 2% 0;
}

.classInformacionEvento{
    font-family: Helvetica;
    font-family: 2em;
    text-align: left;
    margin: 2% 0 0 0;
}

.classCardInvitado{
    width: 100%;
    height: auto;
    border: 1px solid black;
    margin-bottom: 5%;
    border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    -ms-border-radius: 0px !important;
    -o-border-radius: 0px !important;
    border-top-right-radius: 20px !important;
}

.classPanelistas{

}

.classTitleInvitadors{
    font-family: Arial;
    font-size: 2.5em;
}

.classBannerInvitados{
    object-fit: scale-down;
    height: auto;
    width: 100%;
}

.classAcordeon{
    width: 100%;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.classContainerDatosInvitado{
    width: 100%;
    margin-top: 3%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: nowrap;
    border-top: 0px;
    position: relative;
    border-radius: 80px;
    -webkit-border-radius: 80px;
    -moz-border-radius: 80px;
    -ms-border-radius: 80px;
    -o-border-radius: 80px;
}

.classHistoriaInvitado{
    font-family: Arial;
    width: 90%;
    border-left: 2.5px solid black;
    padding: 2% 0 2% 1.5%;
    margin: 0 0 2% 0;
}

.classVermas{
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: end;
    flex-direction: column;
    flex-wrap: nowrap;
    cursor: pointer;
    border-top-right-radius: 20px;
    
}

.classENlaceInvitado{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 1% 0 0 4%;
    margin-bottom: 2%;
}

.ClassSvgInvitado{
    height: auto;
    width: 1.5em;
    margin: 0 0.5em 0 0.5em;
    cursor: pointer;
    

}

.classNombreInvitado{
    font-family: Arial;
    width: 100%;
    color: #002f70;
    font-size: 1.8em;
    font-weight: bolder;
    text-align: left;
    padding-left: 12%;
    margin-top: 2%;
    word-wrap: break-word;
    white-space: normal;
    box-sizing: border-box;
}

.classCargoInvitado{
    font-family: Arial;
    width: 100%;
    color: black;
    font-size: 1.3em;
    text-align: left;
    padding-left: 12%;
    word-wrap: break-word;
    white-space: normal;
    box-sizing: border-box;
}

.classtextoVer{
    font-family: Arial;
    font-style: oblique;
    width: 100%;
    font-size: 1em;
    text-align: right;
    color: black;
}

.classVermas:hover{
    background-color: rgb(0, 23, 66) !important;
}

.classExpandirAcordeon{
    width: 100%;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: end;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-bottom: 2%;

}

.classIconFlecha{
    margin-right: 2%;
}

.classVermas:hover .classNombreInvitado,
.classVermas:hover .classCargoInvitado,
.classVermas:hover .classtextoVer,
.classVermas:hover .classIconFlecha {
    color: white !important;
}


.classImgInvitado{
    border: 1px solid rgba(221, 221, 221, 0.575);
    background: linear-gradient(180deg, rgba(255,255,255) 44%, rgba(17,106,255,1) 100%);
    position: absolute;
    object-fit: scale-down;
    height: auto;
    width: 10%;
    top: -20%;
    left: -1%;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

p{
    margin: 0%;
}

.classBtns{
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: 100%;
    height: auto;
    margin: 0 0 3% 0;
}

.botones{
	color: #001742;
	border: 1px solid #001742;
	background-color: white;
	font-size: 1em;
	border-radius: 5px;
	padding: 15px 32px;
	text-align: center;
	font-family: Helvetica;
    cursor: pointer;
}
button:hover {
	background-color: #001742;
	color: white;
	text-align: center;
}



/*========================== ESTILOS FOOTER================================ */
#main-footer {
    width: 100vw;
    background: #1265AA;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.classLogosFooter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100vw;
    margin: 1% 0 1% 0;
    padding: 0 5%;
}

.classLogoPotenciaVida {
    object-fit: scale-down;
    height: auto;
    width: auto;
    transform: scale(1.9);
    padding-left: 3.8em;
}
.logo{
	object-fit: scale-down;
	height: auto;
    padding-right: 40px;
 }
 .redes-sociales{
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.classSiguenos{
	color: white;
	font-family: Helvetica;
	text-align: center;
	font-size: 1em;
	width: 100%;
}
.classIconRedes{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    width: 100vw;
}
.classSvgRedes{
    height: auto;
    width: 1.5em;
    margin: 0 0.5em 0 0.5em;
    cursor: pointer;
}
.classInformacionDNDA{
	width: 100vw;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 1% 0 0% 0;
}
.classInformacionDNDAPiePagina{
	text-align: center;
	font-family: Helvetica;
	font-size: 1em;
	color: white;
}

.rotate-90-cw {
	-webkit-animation: rotate-90-cw 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: rotate-90-cw 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2024-3-26 15:52:59
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation rotate-90-cw
 * ----------------------------------------
 */
 @-webkit-keyframes rotate-90-cw {
    0% {
      -webkit-transform: rotate(0);
              transform: rotate(0);
    }
    100% {
              -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
              -moz-transform: rotate(180deg);
              -ms-transform: rotate(180deg);
              -o-transform: rotate(180deg);
}
  }
  @keyframes rotate-90-cw {
    0% {
      -webkit-transform: rotate(0);
              transform: rotate(0);
    }
    100% {
              -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
              -moz-transform: rotate(180deg);
              -ms-transform: rotate(180deg);
              -o-transform: rotate(180deg);
}
  }
  
  @media (width <= 900px){

	#main-content header, #main-content .content {
		padding: 15px 30px;
	}

	.classOrganizaciones{
		gap: 20px;
	}

    .classCargoInvitado{
        padding-left: 10%;
    }

	.classOrganizan, .classApoyan{
		width: 72%;
		flex-wrap: wrap;
		height: auto;
		max-height: none;
		min-height: none;
		padding: 0 5%;
	}

	.classTextoOrganizaciones{
		writing-mode: unset;
        transform: rotate(0deg);
        width: 100%;
        font-size: 1rem;
		padding: 0px 2px;
	}
	.classENlaceHeader, .classENlaceHeaderApoyan{
		height: 100px;
		width: 100%;
		overflow: hidden;
	}
	.classImgOganizaciones{
		width: 100%;
		height: 100%;
		object-fit: scale-down; 
	}

	.botones{
		flex: 1;
		min-width: 200px;
	}
	.classLogosFooter{
		margin-top: 8%;
	}
	.classLogoPotenciaVida{
		width: 22%;
        padding-left: 1rem;
	}
    .classIconRedes{
        margin-top: 4%;
    }
	.logo{
		height: 70px;
        padding-right: 15px;
	}
	.redes-sociales{
		margin-top: 9%;
	}
	.classInformacionDNDA{
		margin-top: 5%;
	}

    .classContainerMain{
        width: 90vw;
    }

    .classImgInvitado{
        width: 30%;
    }

    .classNombreInvitado{
        margin-top: 25%;
        padding-left: 10%;
    }

    .classCardInvitado{
        margin-bottom: 25%;
    }

    .classInformacionEvento{
        font-size: 1.2rem;
        margin-top: 10%;
    }

    .classTitleInvitadors{
        margin-bottom: 20%;
    }
}