/* Variables */ /* ========== General ========== */ body { color: #cccccc; } h1, h2, h3, h4, h5, h6 { font-family: sans-serif; } a { text-decoration: none; } p { font-family: sans-serif; } /* ========== ========== */ /* ========== Back to top button ========== */ .back-to-top { position: fixed; display: none; right: 15px; bottom: 15px; z-index: 99999; text-decoration: none; } .back-to-top i { display: flex; align-items: center; justify-content: center; font-size: 24px; width: 40px; height: 40px; border-radius: 50%; background-color: #bb8800; color: #1e3c70; transition: all 0.4s; } .back-to-top i:hover { background-color: #1e3c70; color: #bb8800; } /* ========== aos animation delay mobile ========== */ @media screen and (max-width: 768px) { [data-aos-delay] { transition-delay: 0 !important; } } /* ========== Header ========== */ #header { transition: all 0.5s; z-index: 997; padding: 8px 0; position: absolute; width: 100%; background-color: rgba(20, 30, 48, 0.8); } #header .logo { max-height: 68px; margin: 3px 4px 0 0; } #header .logo-unam { max-height: 55px; } #header h1 { color: #1e3c70; font-weight: 900; font-size: 28px; color: #fff; } #header h1 span { color: #bb8800; } @media (max-width: 768px) { #header { position: fixed; } #header .logo { max-height: 40px; margin: 0 2px 0 0; } #header .logo-unam { max-height: 40px; margin: 0 2px 0 0; } #header h1 { text-align: center; margin: 0 auto; font-weight: 700; font-size: 22px; visibility: hidden; } } /* ========== Nav Menu ========== */ /* Desktop */ .nav-menu ul { margin: 0; padding: 0; list-style: none; } .nav-menu > ul { display: flex; } .nav-menu > ul > li { position: relative; white-space: nowrap; padding: 10px 0 10px 28px; } .nav-menu a { display: block; position: relative; color: #fff; transition: 0.3s; font-size: 15px; font-weight: 600; } .nav-menu a:hover { color: #ffc451; } .nav-menu > a { color: #ffc451; } .nav-menu li:hover > a { color: #ffc451; } .nav-menu .drop-down ul { display: block; position: absolute; left: 14px; top: calc(100% + 30px); z-index: 99; opacity: 0; visibility: hidden; padding: 0; background: #fff; box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25); transition: 0.3s; } .nav-menu .drop-down ul a { padding: 10px 20px; font-size: 14px; font-weight: 500; text-transform: none; color: #151515; } .nav-menu .drop-down ul a:hover { color: #151515; background: #ffc451; } .nav-menu .drop-down ul .active > a { color: #151515; background: #ffc451; } .nav-menu .drop-down ul li:hover > a { color: #151515; background: #ffc451; } .nav-menu .drop-down:hover > ul { opacity: 1; top: 100%; visibility: visible; } .nav-menu .drop-down li { min-width: 180px; position: relative; } .nav-menu .drop-down > a:after { content: "\ea99"; font-family: IcoFont; padding-left: 5px; } .nav-menu .drop-down .drop-down ul { top: 0; left: calc(100% - 30px); } .nav-menu .drop-down .drop-down:hover > ul { opacity: 1; top: 0; left: 100%; } .nav-menu .drop-down .drop-down > a { padding-right: 35px; } .nav-menu .drop-down .drop-down > a:after { content: "\eaa0"; font-family: IcoFont; position: absolute; right: 15px; } @media (max-width: 1366px) { .nav-menu .drop-down .drop-down ul { left: -90%; } .nav-menu .drop-down .drop-down:hover > ul { left: -100%; } .nav-menu .drop-down .drop-down > a:after { content: "\ea9d"; } } /* Mobile Navigation */ .mobile-nav-toggle { position: fixed; top: 15px; right: 10px; z-index: 9998; border: 0; background: none; font-size: 24px; transition: all 0.4s; outline: none !important; line-height: 1; cursor: pointer; text-align: right; } .mobile-nav-toggle i { color: #bb8800; } .mobile-nav { position: fixed; top: 0px; right: 55px; bottom: 0px; left: 0px; z-index: 9999; overflow-y: auto; background: rgba(30, 60, 112, 0.9); transition: ease-in-out 0.2s; opacity: 0; visibility: hidden; padding: 10px 0; text-align: center; } .mobile-nav * { margin: 10px; padding: 0; list-style: none; } .mobile-nav a { display: block; position: relative; color: #bb8800; padding: 10px 20px; font-weight: 700; outline: none; font-size: 1.2em; } .mobile-nav a:hover { color: #151515; text-decoration: none; background: #ffc451; } .mobile-nav .active a { color: #151515; text-decoration: none; background: #ffc451; } .mobile-nav li:hover a { color: #151515; text-decoration: none; background: #ffc451; } .mobile-nav .drop-down > a { padding-right: 35px; } .mobile-nav .drop-down > a:after { content: "\ea99"; font-family: IcoFont; padding-left: 10px; position: absolute; right: 15px; } .mobile-nav .drop-down ul { display: none; overflow: hidden; } .mobile-nav .drop-down li { padding-left: 20px; } .mobile-nav .active.drop-down a:after { content: "\eaa1"; } .mobile-nav-overly { width: 100%; height: 100%; z-index: 9997; top: 0; left: 0; position: fixed; background: rgba(0, 0, 0, 0.6); overflow: hidden; display: none; transition: ease-in-out 0.2s; } .mobile-nav-active { overflow: hidden; } .mobile-nav-active .mobile-nav { opacity: 1; visibility: visible; } .mobile-nav-active .mobile-nav-toggle i { color: #fff; } /* ========== Nav Menu Sec ========== */ /* Desktop */ .navbar-2 { background-color: transparent !important; } .navbar-2 a { transition: 0.3s; font-size: 14px; font-weight: 600; } .navbar-2 .dropdown-menu a:hover { background-color: #1e3c70; color: #fff; } .navbar-2 .dropdown-item i:hover { color: goldenrod !important; } .navbar-2 i { color: goldenrod; font-size: 8px; vertical-align: middle; } .nav-menu-2 ul { margin: 0; padding: 0; list-style: none; } .nav-menu-2 > ul { display: flex; } .nav-menu-2 > ul > li { position: relative; white-space: nowrap; padding: 10px 0 10px 28px; } .nav-menu-2 a { display: block; position: relative; color: #fff; transition: 0.3s; font-size: 15px; font-weight: 600; } .nav-menu-2 a:hover { color: #ffc451; } .nav-menu-2 .active > a { color: #ffc451; } .nav-menu-2 li:hover > a { color: #ffc451; } .nav-menu-2 .drop-down ul { display: block; position: absolute; left: 14px; top: calc(100% + 30px); z-index: 99; opacity: 0; visibility: hidden; padding: 0; background: #fff; box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25); transition: 0.3s; } .nav-menu-2 .drop-down ul a { padding: 10px 20px; font-size: 14px; font-weight: 500; text-transform: none; color: #151515; } .nav-menu-2 .drop-down ul a:hover { color: #151515; background: #ffc451; } .nav-menu-2 .drop-down ul .active > a { color: #151515; background: #ffc451; } .nav-menu-2 .drop-down ul li:hover > a { color: #151515; background: #ffc451; } .nav-menu-2 .drop-down:hover > ul { opacity: 1; top: 100%; visibility: visible; } .nav-menu-2 .drop-down li { min-width: 180px; position: relative; } .nav-menu-2 .drop-down > a:after { content: "\ea99"; font-family: IcoFont; padding-left: 5px; } .nav-menu-2 .drop-down .drop-down ul { top: 0; left: calc(100% - 30px); } .nav-menu-2 .drop-down .drop-down:hover > ul { opacity: 1; top: 0; left: 100%; } .nav-menu-2 .drop-down .drop-down > a { padding-right: 35px; } .nav-menu-2 .drop-down .drop-down > a:after { content: "\eaa0"; font-family: IcoFont; position: absolute; right: 15px; } @media (max-width: 1366px) { .nav-menu-2 .drop-down .drop-down ul { left: -90%; } .nav-menu-2 .drop-down .drop-down:hover > ul { left: -100%; } .nav-menu-2 .drop-down .drop-down > a:after { content: "\ea9d"; } } /* Mobile */ .mobile-nav-2-toggle { position: fixed; top: 70px; right: 8px; z-index: 9998; border: 0; background: none; font-size: 24px; transition: all 0.4s; outline: none !important; line-height: 1; cursor: pointer; text-align: right; background-color: #1e3c70; padding: 8px; border-radius: 50%; } .mobile-nav-2-toggle i { color: #bb8800; } .mobile-nav-2 { position: fixed; top: 0px; right: 55px; bottom: 0px; left: 0px; z-index: 9999; overflow-y: auto; background: rgba(30, 60, 112, 0.9); transition: ease-in-out 0.2s; opacity: 0; visibility: hidden; padding: 10px 0; font-size: 1.2em; text-align: center; } .mobile-nav-2 * { margin: 10px; padding: 0; list-style: none; } .mobile-nav-2 a { display: block; position: relative; color: #bb8800; padding: 10px 20px; font-weight: 700; outline: none; } .mobile-nav-2 a:hover { color: #151515; text-decoration: none; background: #ffc451; } .mobile-nav-2 .active > a { color: #151515; text-decoration: none; background: #ffc451; } .mobile-nav-2 li:hover > a { color: #151515; text-decoration: none; background: #ffc451; } .mobile-nav-2 .drop-down > a { padding-right: 35px; } .mobile-nav-2 .drop-down > a:after { content: "\ea99"; font-family: IcoFont; padding-left: 10px; position: absolute; right: 15px; } .mobile-nav-2 .drop-down ul { display: none; overflow: hidden; } .mobile-nav-2 .drop-down li { padding-left: 20px; } .mobile-nav-2 .active.drop-down > a:after { content: "\eaa1"; } .mobile-nav-2-overly { width: 100%; height: 100%; z-index: 9997; top: 0; left: 0; position: fixed; background: rgba(0, 0, 0, 0.6); overflow: hidden; display: none; transition: ease-in-out 0.2s; } .mobile-nav-2-active { overflow: hidden; } .mobile-nav-2-active .mobile-nav-2 { opacity: 1; visibility: visible; } .mobile-nav-2-active .mobile-nav-2-toggle i { color: #fff; } /* ========== Hero ========== */ #hero { width: 100%; min-height: 100vh; background: url("../img/solid.png") top center; background-size: cover; position: relative; display: flex; justify-content: center; align-items: flex-end; color: white; } #hero #hero_container { min-height: 80vh; } #hero #hero_container #information { min-height: 80vh; } #hero #hero_container #information #box-information1 li { list-style: none; } #hero #hero_container #information #box-information1 span { color: #bb8800; } #hero #hero_container #information #box-information1 h2 { font-weight: 700; letter-spacing: 0.1rem; } #hero #hero_container #information #box-information1 #line-information { border-left: 3px solid #bb8800; padding-left: 15px; position: relative; margin: 20px 0; } #hero #hero_container #information #box-information1 #line-information:before { content: ''; position: absolute; width: 15px; height: 15px; border-radius: 50%; background: white; top: -10px; left: -9px; border: solid 2px #1e3c70; } #hero #hero_container #information #box-information2 { position: relative; color: rgba(0, 0, 0, 0.7); margin-top: 25px; display: flex; justify-content: center; align-items: flex-end; } #hero #hero_container #information #box-information2 #information-2-card { border-radius: 15px; padding: 10px; position: relative; z-index: 5; display: flex; flex-direction: column; justify-content: space-around; padding-left: 35px; background: rgba(255, 255, 255, 0.6); height: 95%; margin: auto 0; padding-bottom: 1.5rem; } #hero #hero_container #information #box-information2 #information-2-card::before { content: ''; width: 60px; height: 60px; border-left: 4px #1e3c70 solid; border-top: 4px #1e3c70 solid; position: absolute; top: 3px; left: 3px; border-radius: 6px; } #hero #hero_container #information #box-information2 #information-2-card::after { content: ''; width: 60px; height: 60px; border-bottom: 4px #1e3c70 solid; border-right: 4px #1e3c70 solid; position: absolute; bottom: 7px; right: 7px; border-radius: 6px; } #hero #hero_container #information #box-information2 #information-2-card span { color: #bb8800; } #hero #hero_container #information #box-information2 #information-2-card h2 { font-weight: 600; } @media (max-width: 768px) { #hero { min-height: 150vh; } #hero #hero_container { margin-top: 115px; min-height: 150vh; } #hero #hero_container #information { min-height: 150vh; word-wrap: break-word; } } @media (max-width: 425px) { #hero { min-height: 180vh; } #hero #hero_container { margin-top: 115px; min-height: 180vh; } #hero #hero_container #information { min-height: 180vh; word-wrap: break-word; } #hero #hero_container #information #box-information2 #information-2-card { padding-bottom: 40px; } } @media (max-width: 1300px) { #hero { min-height: 125vh; } #hero #hero_container { margin-top: 115px; min-height: 100vh; } #hero #hero_container #information { min-height: 100vh; } } /* ========== Main ========== */ #main { min-height: 100vh; display: flex; flex-direction: column; justify-content: end; align-items: center; } #main #main_container { min-height: 80vh; } #main #main_container #main_information { min-height: 80vh; } #main #main_container #main_information #main_information_box1 { display: flex; flex-direction: column; justify-content: center; align-items: start; } #main #main_container #main_information #main_information_box1 h2 { font-weight: 700; } #main #main_container #main_information #main_information_box1 span { color: #bb8800; } #main #main_container #main_information #main_information_box1 #main_box-line1 { border-left: 4px solid #bb8800; padding-left: 20px; position: relative; padding-bottom: 40px; color: rgba(0, 0, 0, 0.8); text-align: justify; } #main #main_container #main_information #main_information_box1 #main_box-line1::before { content: ''; position: absolute; width: 15px; height: 15px; background: white; border: solid 3px #1e3c70; border-radius: 50%; top: 0px; left: -9px; } #main #main_container #main_information #main_information_box1 #main_box-line1::after { content: ''; position: absolute; width: 15px; height: 15px; background: white; border: solid 3px #1e3c70; border-radius: 50%; top: 88px; left: -9px; } #main #main_container #main_information #main_information_box2 { display: flex; flex-direction: column; justify-content: center; align-items: start; margin-bottom: 50px; } #main #main_container #main_information #main_information_box2 h2 { font-weight: 700; } #main #main_container #main_information #main_information_box2 span { color: #bb8800; } #main #main_container #main_information #main_information_box2 #main_box-line2 { color: rgba(0, 0, 0, 0.8); border-left: 4px solid #bb8800; padding-left: 20px; position: relative; } #main #main_container #main_information #main_information_box2 #main_box-line2 li { list-style: none; margin: 10px 0; } #main #main_container #main_information #main_information_box2 #main_box-line2::before { content: ''; position: absolute; width: 15px; height: 15px; background: white; border: solid 3px #1e3c70; border-radius: 50%; top: 0px; left: -9.5px; } @media (max-width: 768px) { #main { min-height: 200vh; } #main #main_container { min-height: 200vh; } #main #main_container #main_information { min-height: 100vh; word-wrap: break-word; } #main #main_container #main_information #main_information_box1 { min-height: 100vh; } #main #main_container #main_information #main_information_box1 #main_box-line1::after { top: -50px; } #main #main_container #main_information #main_information_box2 { min-height: 100vh; } } @media (max-width: 1199px) { #main #main_container #main_information #main_information_box1 #main_box-line1::after { top: 115px; } #main #main_container #main_information #main_information_box2 { padding-top: 50px; } } @media (max-width: 1199px) { #main #main_container #main_information #main_information_box1 { margin-top: 40px; } #main #main_container #main_information #main_information_box1 #main_box-line1::after { top: 135px; } } @media (max-width: 765px) { #main #main_container #main_information #main_information_box1 #main_box-line1::after { top: 87px; } } @media (max-width: 560px) { #main #main_container #main_information #main_information_box1 #main_box-line1::after { top: 115px; } } @media (max-width: 425px) { #main #main_container #main_information #main_information_box1 #main_box-line1::after { top: 140px; } } @media (max-width: 350px) { #main #main_container #main_information #main_information_box1 #main_box-line1::after { top: 160px; } } @media (max-width: 305px) { #main #main_container #main_information #main_information_box1 #main_box-line1::after { top: 184px; } } @media (max-width: 270px) { #main #main_container #main_information #main_information_box1 #main_box-line1::after { top: 255px; } } /* #hero { width: 100%; min-height: 100vh; background: url("../img/solid.png") top center; background-size: cover; position: relative; display: flex; justify-content: center; align-items: flex-end; color: white; .hero-container{ width: 85%; height: 82vh; display: flex; gap: 10px; color: white; .box-information1{ width: 50%; height: 82vh; padding-top: 3px; li{ list-style: none; } span{ color: @color-prin; } h2{ font-weight: 700; letter-spacing: 1px;margin: 15px 0; } h3{ font-size: 25px; } .line-information{ border-left: 3px solid @color-prin; padding-left: 15px; position: relative; margin: 20px 0; &:before{ content: ''; position: absolute; width: 15px; height: 15px; border-radius: 50%; background: white; top: -10px; left: -9px; border: solid 2px @color-sec; } } } .box-information2{ width: 50%; height: 82vh; display: flex; justify-content: end; position: relative; color: rgba(0, 0, 0, 0.7); margin-top: 25px; span{ color: @color-prin; font-weight: 600; letter-spacing: 1px; font-size: 25px; } .information-2-card{ width: 90%; height: 90%; border-radius: 15px; padding: 10px; position: relative; z-index: 5; position: absolute; display: flex; flex-direction: column; justify-content: space-around; padding-left: 35px; background: rgba(255, 255, 255, 0.6); &::before{ content: ''; width: 60px; height: 60px; border-left: 5px @color-sec solid; border-top: 5px @color-sec solid; position: absolute; top: 7px; left: 7px; border-radius: 6px; } &::after{ content: ''; width: 60px; height: 60px; border-bottom: 5px @color-sec solid; border-right: 5px @color-sec solid; position: absolute; bottom: 7px; right: 7px; border-radius: 6px; } div{ line-height: 10px; } p{ font-weight: 400; } } } } } */ /* #main{ width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; color: rgba(0,0,0,0.7); li{ list-style: none; } .main-container{ width: 85%; height: 85%; display: flex; gap: 40px; margin-bottom: 30px; h2{ margin-bottom: 40px; } .box1,.box2{ width: 50%; height: 100%; h2{ font-weight: 600; font-size: 30px; } span{ color: @color-prin; } ul,li{ margin: 13px 0; } } .box-line1{ border-left: 4px solid @color-prin; padding-left: 20px; position: relative; padding-bottom: 40px; &::before{ content: ''; position: absolute; width: 15px; height: 15px; background: white; border: solid 3px @color-sec; border-radius: 50%; top:0px; left: -9px; } &::after{ content: ''; position: absolute; width: 15px; height: 15px; background: white; border: solid 3px @color-sec; border-radius: 50%; top: 88px; left: -9px; } } .box-line2{ border-left: 4px solid @color-prin; padding-left: 20px; position: relative; &::before{ content: ''; position: absolute; width: 15px; height: 15px; background: white; border: solid 3px @color-sec; border-radius: 50%; top:0px; left: -9px; } } } } */ /* ========== Footer ========== */ #footer { background-color: black; padding: 0 0 30px 0; color: #fff; font-size: 14px; } #footer .footer-top { background: linear-gradient(rgba(2, 2, 2, 0.9), rgba(20, 30, 48, 0.9)), url("../img/bg/_DSC3031.jpg") fixed top; background-size: cover; border-bottom: 1px solid #222222; padding: 60px 0 30px 0; } #footer .footer-top .footer-info { margin-bottom: 30px; } #footer .footer-top .footer-info h3 { font-size: 28px; margin: 0 0 20px 0; padding: 2px 0 2px 0; line-height: 1; font-weight: 700; } #footer .footer-top .footer-info h3 span { color: #bb8800; } #footer .footer-top .footer-info p { font-size: 14px; line-height: 24px; margin-bottom: 0; font-family: "Raleway", sans-serif; color: #fff; text-align: justify; } #footer .footer-top .social-links a { font-size: 18px; display: inline-block; background: #292929; color: #fff; line-height: 1; padding: 8px 0; margin-right: 4px; border-radius: 4px; text-align: center; width: 36px; height: 36px; transition: 0.3s; } #footer .footer-top .social-links a:hover { background: #ffc451; color: #151515; text-decoration: none; } #footer .footer-top h4 { font-size: 16px; font-weight: 600; color: #fff; position: relative; padding-bottom: 12px; } #footer .footer-top .footer-links { margin-bottom: 30px; } #footer .footer-top .footer-links ul { list-style: none; padding: 0; margin: 0; } #footer .footer-top .footer-links ul i { padding-right: 2px; color: #ffc451; font-size: 18px; line-height: 1; } #footer .footer-top .footer-links ul li { padding: 10px 0; display: flex; align-items: center; } #footer .footer-top .footer-links ul li:first-child { padding-top: 0; } #footer .footer-top .footer-links ul a { color: #fff; transition: 0.3s; display: inline-block; line-height: 1; } #footer .footer-top .footer-links ul a:hover { color: #ffc451; }