13 al 16 de octubre 2020, Experiencias que inspiran
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}
JS
var modal = document.getElementById("objetivos-mdl"); var btn = document.getElementById("objetivos-btn"); var span = document.getElementsByClassName("close")[0]; btn.onclick = function() { modal.style.display = "block"; } span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }
Sede Buenos Aires
Rivadavia 6778 1er Piso (Capital Federal)
+54 / 011-46703400 (int138)
distancia@uflo.edu.ar
Sede Regional Comahue
Mengelle 8 (Cipolletti, Río Negro)
+54 / 299-548-7799
distanciacomahue@uflo.edu.ar