CSS
/* MENUS */
.menu-top ul {
display:flex;
list-style-type: none;
margin: 0;
padding: 0;
line-height: 5rem;
border-top: 5px solid #cecece;
border-bottom: 5px solid #cecece;
font-family: 'Nunito', sans-serif;
font-size: 2.2rem;
font-weight: 700;
}
.menu-top li {
display: inline;
}
.menu-top li a{
color: #cecece;
text-align: center;
padding: 1.5rem 5rem;
text-decoration: none;
background-color: transparent;
}
.menu-top li a:hover{
background-color: #cecece;
color: white;
}
.menu-top li a:active, .menu-top li a.active{
background-color: #cecece;
color: white;
box-shadow: 10px 10px #a8a8a8;
}
/* menu1 */
.menu1 ul {
border-top: 5px solid #F26B0F;
border-bottom: 5px solid #F26B0F;
}
.menu1 li a{
color: #F26B0F;
}
.menu1 li a:hover{
background-color: #F26B0F;
}
.menu1 li a:active, .menu1 li a.active{
background-color: #F26B0F;
color: white;
box-shadow: 10px 10px #9C00C4;
}
/* menu2 */
.menu2 ul {
border-top: 5px solid #FF045C;
border-bottom: 5px solid #FF045C;
}
.menu2 li a{
color: #FF045C;
}
.menu2 li a:hover{
background-color: #FF045C;
}
.menu2 li a:active, .menu2 li a.active{
background-color: #FF045C;
color: white;
box-shadow: 10px 10px #9C00C4;
}
/* menu3 */
.menu3 ul {
border-top: 5px solid #9C00C4;
border-bottom: 5px solid #9C00C4;
}
.menu3 li a{
color: #9C00C4;
}
.menu3 li a:hover{
background-color: #9C00C4;
}
.menu3 li a:active, .menu3 li a.active{
background-color: #9C00C4;
color: white;
box-shadow: 10px 10px #005CAB;
}
/* GRADIENTES */
.gradfull{background: rgb(242,107,15);
background: linear-gradient(90deg, rgba(242,107,15,1) 0%, rgba(255,4,92,1) 25%, rgba(156,0,196,1) 50%, rgba(0,92,171,1) 75%, rgba(0,193,178,1) 100%);
}
.grad1{
background: rgb(242,107,15);
background: linear-gradient(180deg, rgba(242,107,15,1) 0%, rgba(255,4,92,1) 100%);
}
.grad2{
background: rgb(255,4,92);
background: linear-gradient(180deg, rgba(255,4,92,1) 0%, rgba(156,0,196,1) 100%);
}
.grad3{
background: rgb(156,0,196);
background: linear-gradient(180deg, rgba(156,0,196,1) 0%, rgba(0,92,171,1) 100%);
}
.grad4{
background: rgb(0,92,171);
background: linear-gradient(180deg, rgba(0,92,171,1) 0%, rgba(0,193,178,1) 100%);
}
.stickgrad{
position: fixed;
top: 0;
left:0;
height: 2rem;
width: 100%;
z-index: 9;
}
.sidegrad{
height: 100%;
}
/* INICIO */
.maxwidth153{
max-width: 153px;
}
.video-btn{
transition: transform 1s;
}
.video-btn:hover{
-webkit-transform: scale(1.2) rotate(360deg);
-o-transform: scale(1.2) rotate(360deg);
transform: scale(1.2) rotate(360deg);
transition: transform .5s;
}
/* Accordion */
.elementor-accordion .elementor-tab-title .elementor-accordion-icon.elementor-accordion-icon-left{
font-size: 2.2rem;
padding-top: 0.5rem;
}
.elementor-accordion .elementor-accordion-item {
border: none;
border-bottom: 2px solid #FF045C;
padding-left: 4.7rem;
}
.elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon-opened {
transform: rotate(45deg);
}
.elementor-accordion .elementor-accordion-item .elementor-accordion-icon-closed {
transition: transform .2s;
}
.elementor-accordion .elementor-accordion-item:hover .elementor-accordion-icon-closed {
transition: transform .3s;
transform: rotate(45deg);
}
.elementor-accordion .elementor-tab-content {
border:none;
}
.elementor-accordion .elementor-accordion-item:hover .elementor-accordion-title, .elementor-accordion .elementor-accordion-item:active .elementor-accordion-title{
color: #9c00c4;
}
/* Participacion */
.part-p{
color: #9C00C4;
font-family: "Raleway", Sans-serif;
font-size: 2.2rem;
font-weight: bold;
line-height: 1.7em;
width: 100%;
max-width: 100%;
}
/* tooltip participacion */
.tooltip {
position: relative;
border-bottom: 4px dotted #00c1b2;
cursor: pointer;
}
.tooltip .h2{
font-size: 20px;
font-weight: 800;
color: #fff;
margin-bottom: 10px;
border-bottom: 2px solid #fff;
line-height: 45px;
}
.tooltip .tooltiptext {
visibility: hidden;
background-color: #9c00c4;
color: #fff;
text-align: left;
position: absolute;
z-index: 1;
width: 300px;
top: 210%;
left: 50%;
margin-left: -72px;
padding: 6px 20px 20px;
font-size: 20px;
line-height: 24px;
box-shadow: 10px 10px #005cab;
}
.tooltip:hover .tooltiptext {
visibility: visible;
transform: translate(10px,20px);
transition: transform .5s, opacity .5s;
}
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%;
left: 0;
width: 0;
height: 0;
border-bottom: 42px solid #9c00c4;
border-right: 45px solid transparent;
}
/* FOOTER */
.footersep{
border-right: 10px solid #00C1B2;
border-left: 10px solid #00C1B2;
}
.footerleft{
border-left: 10px solid #005CAB;
}
.footerright{
border-right: 10px solid #005CAB;
}
.uflofooter .elementor-image > a img[src$=".svg"], .uflofooter .elementor-image figure > a img[src$=".svg"] {
width: 170px;
}
.uflofooter:hover{
-webkit-filter: opacity(.8);
filter: opacity(.8);
}
.rotatedots{
transition: transform ease-in-out .5s;
transform: rotate(-45deg);
}
.rotatedots:hover{
transition: transform ease-in-out 1s;
transform: rotate(135deg);
cursor:crosshair;
}
/* BUTTONS */
.btn-grad1 a{
background: rgb(242,107,15);
background: linear-gradient(90deg, rgba(242,107,15,1) 0%, rgba(255,4,92,1) 100%);
}
/* MODAL */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal .close {
color: #fff;
float: right;
font-size: 4.6rem;
font-weight: bold;
padding-right: 13px;
line-height: 3.2rem;
}
.modal .close:hover,
.modal .close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 10px 10px;
background: rgb(242,107,15);
background: linear-gradient(90deg, rgba(242,107,15,1) 0%, rgba(255,4,92,1) 100%);
color: white;
}
.modal-header h2{
color: #fff;
font-family: "Nunito", Sans-serif;
font-size: 2.6rem;
font-weight: 900;
line-height: 1.4em;
text-align: center;
margin: 0;
}
.modal-body {
padding: 2% 10%;
font-family: "Raleway", Sans-serif;
font-size: 2rem;
font-weight: bold;
border-left: 40px solid #f26b0f;
}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-content {
position: relative;
background-color: #fefefe;
margin: 7% auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 10px 10px #9C00C4;
animation-name: animatetop;
animation-duration: 0.4s;
max-width: 800px;
}
@keyframes animatetop {
from {top: -300px; opacity: 0}
to {top: 0; opacity: 1}
}
/* mediaqueries */
@media (max-width: 767px) {
.order1{order:1;}
.order2{order:2;}
.order3{order:3;}
.menu-top ul {
font-size: 1.9rem;
}
.menu-top li a{
padding: 1.5rem 2rem;
}
.elementor-accordion .elementor-accordion-item {
padding-left: 1.7rem;
}
}
#oculta{
display:none}
