/* Theme Name: SOL Author: Francisco Mónaco Author URI: http://franciscomonaco.com/ Description: Tailor made theme developed specially for SOL's website. Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */ /*------------------------------------------ Reset */ * { box-sizing: border-box; outline: none; outline: none; } p, a, h1, h2, h3, h4, h5, h6, ul, ol, li, body, div, section, nav, input, textarea { margin: 0; padding: 0; font-weight: normal; } video, svg, img { vertical-align: middle; width: 100%; height: auto; display: block; } input[type="text"], input[type="submit"], textarea, select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } /*------------------------------------------ Defining variables */ :root { --font-size: 14px; --font-line-height: 1.8; --title-size: 24px; --title-line-height: 1.2; --title-main: 32px; --title-secondary: 32px; --title-tertiary: 28px; --title-small: 19px; --border-radius: 8px; } /*------------------------------------------ Transitions */ .simple-transition { transition-property: all; transition-duration: 0.2s; } .fancy-transition, .button-style, .button-style svg, .main-nav .links .link, footer .link-columns .column .item .link, .main-nav .links .link:after, footer .link-columns .column .item .link:after, .newsletter .card-wrapper .form .send, .course-card .thumbnail .background .image, .course-card .thumbnail .info .bottom-row .play, .course-filters .filters .item { transition-property: all; transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); transition-duration: 0.4s; } /*------------------------------------------------------------------------------------ Titles */ .title-style { font-size: var(--title-size); line-height: var(--title-line-height); } .title-style.main-size { font-size: var(--title-main); } .title-style.secondary-size { font-size: var(--title-secondary); } .title-style.tertiary-size { font-size: var(--title-tertiary); } .title-style.small-size { font-size: var(--title-small); } /*------------------------------------------------------------------------------------ Links */ .link-style { text-decoration: none; cursor: pointer; } /*------------------------------------------------------------------------------------ Buttons */ .button-style { padding: 9px 18px; line-height: 18px; font-size: 12px; text-decoration: none; cursor: pointer; display: inline-block; border-width: 1px; border-style: solid; border-radius: var(--border-radius); text-align: center; } .button-style svg { width: 10px; height: 10px; margin-left: 12px; display: inline-block; stroke-width: 2px; } .button-style.large-size { padding: 16px 24px; line-height: 18px; font-size: 16px; } /*------------------------------------------------------------------------------------ Text */ .upper { text-transform: uppercase; } .lower { text-transform: lowercase; } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } /*------------------------------------------------------------------------------------ Border */ .border { border-width: 1px; border-style: solid; } .border-top { border-top-width: 1px; border-top-style: solid; } .border-bottom { border-bottom-width: 1px; border-bottom-style: solid; } .border-left { border-left-width: 1px; border-left-style: solid; } .border-right { border-right-width: 1px; border-right-style: solid; } /*------------------------------------------------------------------------------------ Editor content */ .editor-content { font-size: var(--font-size); line-height: var(--font-line-height); } .editor-content div, .editor-content p { font-size: var(--font-size); line-height: var(--font-line-height); margin-bottom: 12px; } .editor-content div:last-child, .editor-content p:last-child { margin-bottom: 0; } .editor-content a:hover { opacity: 0.6; } .editor-content h2 { margin: 20px 0 16px; line-height: 1.45; font-size: var(--title-tertiary); } .editor-content h3 { margin: 18px 0 16px; line-height: 1.45; font-size: var(--title-size); } .editor-content h4, .editor-content h5, .editor-content h6 { margin: 16px 0 16px; line-height: 1.45; font-size: var(--title-small); } .editor-content h2:first-child, .editor-content h3:first-child, .editor-content h4:first-child, .editor-content h5:first-child, .editor-content h6:first-child { margin-top: 0; } .editor-content ol, .editor-content ul { padding-left: 24px; margin-bottom: 36px; } .editor-content li { margin-bottom: 8px; } /*------------------------------------------------------------------------------------ Enter animations */ .main-nav { transition-property: all; transition-timing-function: cubic-bezier(.5,.5,.57,.88); transition-duration: 0.8s; transition-delay: 0.6s; } main { transition-property: all; transition-timing-function: cubic-bezier(.5,.5,.57,.88); transition-duration: 0.8s; transition-delay: 1.0s; } footer { transition-property: all; transition-timing-function: cubic-bezier(.5,.5,.57,.88); transition-duration: 0.8s; transition-delay: 1.4s; } .enter-animations .main-nav { opacity: 1 !important; transform: translate3D(0, 0, 0) !important; } .enter-animations main { opacity: 1 !important; transform: translate3D(0, 0, 0) !important; } .enter-animations footer { opacity: 1 !important; transform: translate3D(0, 0, 0) !important; } /*------------------------------------------------------------------------------------ General classes */ body { font-size: var(--font-size); } .cover-image { background-size: cover; background-position: center; } .image-wrapper img { object-fit: cover; object-position: center; } .ghost-link { padding-top: var(--interface-height); margin-top: calc(var(--interface-height) * -1); } /*------------------------------------------------------------------------------------ Interface */ .main-nav { position: fixed; top: 0; left: 0; width: 100%; padding: 20px 0; z-index: 100; } .main-nav .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.8; } .main-nav .inner { position: relative; display: flex; justify-content: space-between; align-items: center; } .main-nav .inner .logo .link { display: block; height: 24px; } .main-nav .inner .logo .link svg { height: 100%; width: auto; } .main-nav .controls { display: flex; } .main-nav .controls .buttons-wrapper { display: flex; } .main-nav .actions { display: flex; } .main-nav .actions .button { font-size: 11px; padding: 9px 12px; } .main-nav .actions .item:last-child { margin-left: 12px; } .main-nav .menu-button { margin-left: 24px; display: flex; align-items: center; } .main-nav .menu-button .button-wrapper { width: 30px; height: 30px; position: relative; } .main-nav .menu-button .button-wrapper .line { width: 20px; height: 1px; position: absolute; left: 50%; margin-left: -10px; top: 50%; transform-origin: center; } .main-nav .menu-button .button-wrapper .line-1 { margin-top: -4px; } .main-nav .menu-button .button-wrapper .line-2 { margin-top: 4px; } .menu-is-open .main-nav .menu-button .button-wrapper .line-1 { margin-top: 0; transform: rotate(45deg); } .menu-is-open .main-nav .menu-button .button-wrapper .line-2 { margin-top: 0; transform: rotate(-45deg); } .mobile-menu { position: fixed; bottom: 0; left: 0; width: 100%; height: calc(100% - var(--interface-height)); z-index: 100; opacity: 0; pointer-events: none; } .menu-is-open .mobile-menu { opacity: 1; pointer-events: all; } .mobile-menu .wrapper { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 48px; padding-bottom: 80px; } .mobile-menu .links .item { margin-bottom: 10px; } .mobile-menu .links .item .link { font-size: 30px; } .mobile-menu .actions .item { margin-bottom: 12px; } .mobile-menu .actions .item .button { width: 100%; } /*------------------------------------------------------------------------------------ Sections */ /* Section Global */ section { margin-bottom: var(--doble-padding); } section .buttons-wrapper { display: flex; gap: 12px; } /* Landing - Classic */ .landing-classic .image-wrapper { height: 220px; } .landing-classic .image-wrapper img { height: 100%; border-radius: var(--border-radius); } .landing-classic .info-wrapper { display: flex; flex-direction: column; gap: 20px; } .landing-classic .review .stars { display: flex; margin-bottom: 6px; } .landing-classic .review .stars svg { margin-right: 5px; width: 17px; } /* Landing - Text Hero Text */ .landing-text-hero-text .image-wrapper img { border-radius: var(--border-radius); } /* Landing - Service Video */ .landing-service-video .icon-wrapper .icon { border-radius: var(--border-radius); display: flex; justify-content: center; align-items: center; } .landing-service-video .icon-wrapper .icon svg { width: 180px; } .landing-service-video .info-wrapper { border-radius: var(--border-radius); } .landing-service-video .video-wrapper { position: relative; } .landing-service-video .video-wrapper video { border-radius: var(--border-radius); cursor: pointer; } .landing-service-video .video-wrapper .play { position: absolute; width: 80px; height: 80px; top: 50%; left: 50%; margin: -40px 0 0 -40px; border-radius: 1000px; padding-left: 7px; display: flex; justify-content: center; align-items: center; background-color: rgba(255, 255, 255, 0.8); pointer-events: none; } .video-is-playing .landing-service-video .video-wrapper .play { opacity: 0; } .landing-service-video .video-wrapper .play svg { width: 30px; } /* Landing - Video Landing */ .video-landing .video-wrapper { position: relative; border-radius: var(--border-radius); overflow: hidden; } .video-landing .video-wrapper .cover-wrapper { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .video-landing .video-wrapper .cover-wrapper .image { width: 100%; height: 100%; } .video-landing .video-wrapper .cover-wrapper .image img { object-fit: cover; } .video-landing .video-wrapper .cover-wrapper .play-icon { position: absolute; width: 50px; height: 50px; top: 50%; left: 50%; margin: -25px 0 0 -25px; padding: 16px 13px 16px 19px; border-radius: 1000px; background-color: rgba(255, 255, 255, 0.8); } .video-landing .data-points { display: flex; column-gap: 24px; } .video-landing .data-points .item p { font-size: 12px; } .video-landing .data-points .item .name { margin-bottom: 6px; } .video-landing .password-cta .wrapper { position: relative; border-radius: var(--border-radius); overflow: hidden; } .video-landing .password-cta .wrapper .image-holder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-landing .password-cta .wrapper .image-holder img { object-fit: cover; height: 100%; } .video-landing .password-cta .wrapper .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.7; } .video-landing .password-cta .wrapper .content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 40px; } .video-landing .password-cta .wrapper .content .padder { height: 20px; } .video-landing .password-cta .wrapper .content .description { font-size: 12px; } .video-landing .password-cta .wrapper .content .head { display: flex; flex-direction: column; align-items: center; gap: 16px; } .video-landing .password-cta .wrapper .content .head .icon { width: 50px; margin-bottom: 10px; } .video-landing .password-cta .wrapper .content .head .button { line-height: 50px; font-size: 14px; padding: 0 40px; } .video-landing .password-cta .wrapper .content .separator { width: 80%; border-bottom: 1px solid; } .video-landing .password-cta .wrapper .content .foot { display: flex; flex-direction: column; align-items: center; gap: 16px; } .video-landing .password-cta .wrapper .content .foot .form-wrapper { width: 100%; } .video-landing .password-cta .wrapper .content .foot .form { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px; } .video-landing .password-cta .wrapper .content .foot .form label { display: none; } .video-landing .password-cta .wrapper .content .foot .form input { display: block; text-align: center; } .video-landing .password-cta .wrapper .content .foot .form input.text { width: 100%; height: 46px; padding: 0 20px; border-radius: var(--border-radius); border: none; } .video-landing .password-cta .wrapper .content .foot .form input.submit { height: 50px; font-size: 14px; padding: 0 40px; } /* Loop - Service Loop Teaser */ .service-loop-teaser .actions .button { width: 100%; } /* Loop - Course Filters */ .course-filters .filters .item { padding: 6px 10px; font-size: 14px; border-radius: var(--border-radius); display: inline-block; text-decoration: none; margin: 0 6px 8px 0; } /* Content - Two Row Stats */ .two-row-stats .image-wrapper { } .two-row-stats .image-wrapper img { height: 100%; border-radius: var(--border-radius); } .two-row-stats .info-wrapper .checklist .item { margin-bottom: 8px; display: flex; align-items: center; } .two-row-stats .info-wrapper .checklist .item .text { font-size: var(--font-size); } .two-row-stats .info-wrapper .checklist .item .icon { width: 26px; padding: 8px; border-radius: 100px; margin-right: 8px; } /* Cta - Contact */ .contact { margin-bottom: 0; } /* Cta - Stats */ .stats .stats-wrapper { display: flex; gap: 24px; } .stats .stats-wrapper .col { width: 50%; } .stats .stats-wrapper .col-1 { padding-top: 48px; } .stats .stats-wrapper .col .item { height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 24px; border-radius: var(--border-radius); } .stats .stats-wrapper .col .item:last-child { margin-bottom: 0; } .stats .stats-wrapper .col .item .title { margin-bottom: 12px; } /* Cta - Location */ .location .map-wrapper { overflow: hidden; position: relative; height: 90vw; border-radius: 4px; border-style: solid; border-width: 4px; } .location .map-wrapper iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .location .address-wrapper .item { margin-bottom: 12px; } .location .address-wrapper .item .link { position: relative; font-size: 22px; } .location .address-wrapper .item .link:before { content: ''; width: 100%; height: 1px; display: block; position: absolute; left: 0; bottom: -2px; } .location .contacts-wrapper .item { margin-bottom: 8px; } .location .contacts-wrapper .item .link { display: flex; align-items: center; } .location .contacts-wrapper .item .link .icon { display: block; width: 32px; border-radius: 100px; padding: 8px; margin-right: 12px; } /*------------------------------------------------------------------------------------ Footer */ footer .link-columns { display: flex; flex-wrap: wrap; } footer .link-columns .column { width: 50%; } footer .link-columns .column .title { margin-bottom: 18px; } footer .link-columns .column .item { margin-bottom: 12px; opacity: 0.6; } footer .link-columns .column .item.indented { padding-left: 8px; display: none; } footer .link-columns .column .item.indented .link:before { content: '- '; } footer .copyright { opacity: 0.6; } /*------------------------------------------------------------------------------------ Repeaters */ /* Service Icon */ .service-card-icon .card-head { display: block; border-radius: var(--border-radius) var(--border-radius) 0 0; } .service-card-icon .card-head svg { width: 100px; } .service-card-icon .info-wrapper { border-radius: 0 0 var(--border-radius) var(--border-radius); } .service-card-icon .info-wrapper .title { margin-bottom: 14px; } .service-card-icon .info-wrapper .excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 50px; } .service-card-icon .info-wrapper .link { display: flex; width: 100%; justify-content: flex-end; } .service-card-icon .info-wrapper .link .text { display: flex; align-items: center; } .service-card-icon .info-wrapper .link .text .icon { width: 36px; height: 36px; display: inline-block; padding: 10px; border-radius: 100px; margin-left: 10px; } /* Course */ .course-card .thumbnail { position: relative; border-radius: var(--border-radius); overflow: hidden; } .course-card .thumbnail .background { position: relative; } .course-card .thumbnail .background .image { height: 280px; } .course-card .thumbnail .background .image img { height: 100%; object-fit: cover; } .course-card .thumbnail .background .overlay { position: absolute; height: 100%; width: 100%; top: 0; left: 0; background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%); } .course-card .thumbnail .info { position: absolute; height: 100%; width: 100%; top: 0; left: 0; display: flex; flex-direction: column; justify-content: space-between; } .course-card .thumbnail .info .top-row { width: 100%; display: flex; column-gap: var(--padding); } .course-card .thumbnail .info .top-row .title { width: calc(100% - 70px); } .course-card .thumbnail .info .top-row .duration { width: 70px; display: flex; justify-content: flex-end; } .course-card .thumbnail .info .top-row .duration svg { width: 36px; height: 36px; } .course-card .thumbnail .info .bottom-row { width: 100%; display: flex; justify-content: space-between; align-items: flex-end; } .course-card .thumbnail .info .bottom-row .icon { width: 40px; height: 40px; } .course-card .thumbnail .info .bottom-row .play { width: 50px; height: 50px; padding: 16px 13px 16px 19px; border-radius: 100px; } .course-card .thumbnail .link-overlay { position: absolute; height: 100%; width: 100%; top: 0; left: 0; } .course-card .info-wrapper .title { margin-bottom: 8px; } .course-card .info-wrapper .title .link { text-decoration: none; } /*------------------------------------------------------------------------------------ Modules */ /* Newsletter */ .newsletter .card-wrapper { border-radius: var(--border-radius); } .newsletter .card-wrapper .form .email-field { width: 100%; padding: 20px 20px 19px; border-radius: var(--border-radius); border: none; margin-bottom: 12px; } .newsletter .card-wrapper .form .send { padding: 20px 20px 19px; border-radius: var(--border-radius); border: none; } /* Logo / Image */ .logo-image .image-wrapper { border-radius: var(--border-radius); overflow: hidden; } @media(min-width: 900px){ /* -------------------------------------------- */ /*------------------------------------------ Defining variables */ :root { --font-size: 15px; --title-size: 28px; --title-main: 42px; --title-secondary: 32px; --title-tertiary: 30px; --title-small: 20px; } /*------------------------------------------------------------------------------------ Buttons */ .button-style { padding: 9px 18px; line-height: 18px; font-size: 12px; text-decoration: none; cursor: pointer; display: inline-block; border-width: 1px; border-style: solid; border-radius: var(--border-radius); text-align: center; } .button-style svg { width: 12px; height: 12px; margin-left: 12px; display: inline-block; stroke-width: 2px; } .button-style.large-size { padding: 16px 24px; line-height: 18px; font-size: 16px; } /*------------------------------------------------------------------------------------ Editor content */ .editor-content h2 { margin: 30px 0 20px; } .editor-content h3 { margin: 26px 0 18px; } .editor-content h4, .editor-content h5, .editor-content h6 { margin: 20px 0 16px; } .editor-content ol, .editor-content ul { padding-left: 26px; margin-bottom: 50px; } .editor-content li { margin-bottom: 10px; } /*------------------------------------------------------------------------------------ Interface */ .main-nav { padding: 20px 0; } .main-nav .inner .logo .link { height: 24px; } .main-nav .controls .links-wrapper { display: flex; gap: 24px; } .main-nav .links { display: flex; margin-right: 24px; align-items: center; } .main-nav .links .link { font-size: 14px; } .main-nav .controls .buttons-wrapper { gap: 12px; } .main-nav .actions { display: flex; } .main-nav .actions .button { font-size: 11px; padding: 9px 12px; } .main-nav .actions .item:last-child { margin-left: 0; } .main-nav .menu-button { display: none; } /*------------------------------------------------------------------------------------ Sections */ /* Section Global */ section { margin-bottom: var(--doble-padding); } section .buttons-wrapper { gap: 14px; } /* Landing - Classic */ .landing-classic .columns { display: flex; gap: var(--padding); flex-direction: row-reverse; align-items: center; } .landing-classic .columns > div { width: 50%; } .landing-classic .columns .left-column { margin: 0; } .landing-classic .image-wrapper { height: 500px; } .landing-classic .info-wrapper { display: flex; flex-direction: column; gap: 20px; } .landing-classic .review .stars { display: flex; margin-bottom: 6px; } .landing-classic .review .stars svg { margin-right: 5px; width: 17px; } /* Landing - Text Hero Text */ .landing-text-hero-text .info-wrapper { display: flex; gap: var(--padding); align-items: flex-end; } .landing-text-hero-text .info-wrapper > * { width: 50%; } .landing-text-hero-text .image-wrapper { height: 300px; } .landing-text-hero-text .image-wrapper img { height: 100%; } .landing-text-hero-text .content-wrapper { display: flex; gap: var(--padding); } .landing-text-hero-text .content-wrapper > * { width: 50%; } /* Landing - Service Video */ .landing-service-video .head { display: flex; gap: var(--half-padding); padding-bottom: var(--half-padding); flex-direction: row-reverse; } .landing-service-video .icon-wrapper { margin-bottom: 0; flex: 1; } .landing-service-video .icon-wrapper .icon { height: 100%; } .landing-service-video .icon-wrapper .icon svg { width: 180px; } .landing-service-video .info-wrapper { width: 60%; } .landing-service-video .video-wrapper { position: relative; } .landing-service-video .video-wrapper video { border-radius: var(--border-radius); cursor: pointer; } .landing-service-video .video-wrapper .play { position: absolute; width: 80px; height: 80px; top: 50%; left: 50%; margin: -40px 0 0 -40px; border-radius: 1000px; padding-left: 7px; display: flex; justify-content: center; align-items: center; background-color: rgba(255, 255, 255, 0.8); pointer-events: none; } .video-is-playing .landing-service-video .video-wrapper .play { opacity: 0; } .landing-service-video .video-wrapper .play svg { width: 30px; } /* Landing - Title Text */ .title-text .info-wrapper { display: flex; column-gap: var(--padding); align-items: flex-end; } .title-text .info-wrapper > div { width: 50%; padding-bottom: 0; } /* Landing - Video Landing */ .video-landing .info-wrapper { display: flex; column-gap: var(--padding); align-items: flex-end; } .video-landing .info-wrapper > div { width: 50%; padding-bottom: 0; } .video-landing .data-points { display: flex; column-gap: var(--padding); } .video-landing .data-points .item p { font-size: 14px; } .video-landing .data-points .item .name { margin-bottom: 8px; } .video-landing .password-cta .wrapper { padding: var(--v-separation) 0; } .video-landing .password-cta .wrapper .content { flex-direction: row; align-items: center; gap: 0; justify-content: space-evenly; padding-left: 0; padding-right: 0; } .video-landing .password-cta .wrapper .content .padder { height: 30px; } .video-landing .password-cta .wrapper .content .description { font-size: 14px; } .video-landing .password-cta .wrapper .content .head { width: 50%; gap: 16px; max-width: 300px; } .video-landing .password-cta .wrapper .content .head .icon { width: 50px; margin-bottom: 10px; } .video-landing .password-cta .wrapper .content .head .button { line-height: 50px; font-size: 14px; padding: 0 40px; } .video-landing .password-cta .wrapper .content .separator { width: 0%; height: 160px; border-bottom: none; border-left: 1px solid; } .video-landing .password-cta .wrapper .content .foot { width: 50%; gap: 16px; align-self: stretch; justify-content: space-between; max-width: 300px; } .video-landing .password-cta .wrapper .content .foot .form { gap: 20px; } .video-landing .password-cta .wrapper .content .foot .form input.text { width: 100%; height: 46px; padding: 0 20px; } .video-landing .password-cta .wrapper .content .foot .form input.submit { height: 50px; font-size: 14px; padding: 0 40px; } /* Loop - Service Loop Generic */ .service-loop .loop { display: flex; flex-wrap: wrap; gap: var(--padding); padding: var(--half-padding) 0; } .service-loop .loop.cols-1 > * { width: calc(100%); } .service-loop .loop.cols-2 > * { flex: 1; } .service-loop .loop.cols-3 > * { width: calc((100% / 3) - 20px); } .service-loop .loop.cols-4 > * { width: calc(25% - 20px); } .service-loop .loop.cols-5 > * { width: calc(20% - 20px); } /* Loop - Service Loop Teaser */ .service-loop-teaser .section-head { display: flex; gap: var(--padding); align-items: flex-end; justify-content: space-between; } .service-loop-teaser .section-head .info-wrapper { width: 550px; } .service-loop-teaser .section-foot { display: flex; flex-direction: column; align-items: flex-end; text-align: right; } .service-loop-teaser.course-category .section-foot { display: none; } .service-loop-teaser .section-foot .info-wrapper { width: 550px; } .service-loop-teaser .actions .button { width: auto; } /* Loop - Course Filters */ .course-filters .filters .item { padding: 10px 16px; font-size: 16px; margin: 0 8px 10px 0; } /* Content - Two Row Stats */ .two-row-stats .row { display: flex; gap: var(--padding); } .two-row-stats .row-1 { align-items: flex-end; } .two-row-stats .row-2 { flex-direction: row-reverse; align-items: flex-start; padding-bottom: 0; } .two-row-stats .row > * { width: 50%; } .two-row-stats .image-wrapper { margin-bottom: 0; } .two-row-stats .row-2 .info-wrapper { text-align: right; } .two-row-stats .row-2 .info-wrapper .checklist { display: flex; flex-direction: column; align-items: flex-end; } .two-row-stats .row-2 .info-wrapper .actions .buttons-wrapper { justify-content: flex-end; } .two-row-stats .info-wrapper .checklist .item { margin-bottom: 10px; } .two-row-stats .info-wrapper .checklist .item .icon { width: 28px; padding: 9px; margin-right: 10px; } /* Content - Two Col Article */ .two-col-article .content-wrapper { width: 70%; } /* Cta - Contact */ .contact .inner { padding-left: var(--padding); padding-right: var(--padding); padding-top: var(--v-separation); padding-bottom: var(--v-separation); } .contact .columns { display: flex; gap: var(--padding); align-items: center; border-radius: var(--border-radius); } .contact .columns > * { width: 50%; } .contact .columns .right-column { display: flex; gap: var(--half-padding); } .contact .columns .right-column > * { width: 50%; } .contact .columns .right-column .col { display: flex; flex-direction: column; justify-content: center; gap: var(--half-padding); } .contact .columns .right-column .col img { border-radius: var(--border-radius); } .contact .columns .right-column .col-2 img { height: 220px; width: auto; object-fit: cover; object-position: center; } /* Cta - Stats */ .stats .inner { padding: var(--padding); } .stats .columns { display: flex; gap: var(--padding); border-radius: var(--border-radius); align-items: center; } .stats .columns > * { width: 50%; } .stats .stats-wrapper { display: flex; gap: var(--padding); } .stats .stats-wrapper .col { width: 50%; } .stats .stats-wrapper .col-1 { padding-top: 48px; } .stats .stats-wrapper .col .item { height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 24px; border-radius: var(--border-radius); } .stats .stats-wrapper .col .item:last-child { margin-bottom: 0; } .stats .stats-wrapper .col .item .title { margin-bottom: 12px; } /* Cta - Location */ .location .columns { display: flex; gap: var(--padding); align-items: center; } .location .columns > * { width: 50%; } .location .map-wrapper { height: 50vw; border-radius: 8px; border-width: 8px; } .location .address-wrapper .item { margin-bottom: 14px; } .location .address-wrapper .item .link { font-size: 24px; } .location .contacts-wrapper .item { margin-bottom: 10px; } .location .contacts-wrapper .item .link .icon { width: 36px; padding: 9px; margin-right: 14px; } /* Cta - App */ .app .inner { padding: var(--padding); padding-bottom: 0; } .app .columns { display: flex; gap: var(--padding); align-items: center; padding-bottom: 0; border-radius: var(--border-radius); } .app .columns > * { width: 50%; } .app .columns .left-column .image-wrapper { max-width: 280px; margin: 0 auto; max-height: 380px; overflow: hidden; } .app .columns .right-column { padding-bottom: var(--padding); } /*------------------------------------------------------------------------------------ Footer */ footer .inner { padding-top: var(--padding); padding-bottom: var(--padding); } footer .info-wrapper { display: flex; gap: var(--padding); } footer .link-columns { width: 60%; } footer .link-columns > * { flex: 1; } footer .link-columns .column .title { margin-bottom: 22px; } footer .link-columns .column .item { margin-bottom: 16px; } footer .link-columns .column .item.indented { padding-left: 9px; display: block; } footer .link-columns .column .item.indented .link:before { content: '- '; } footer .footer-card { width: 40%; } footer .copyright { display: flex; justify-content: space-between; } /*------------------------------------------------------------------------------------ Repeaters */ /* Course */ .course-card .thumbnail .background .image { height: 320px; } } @media(min-width: 1200px){ /* -------------------------------------------- */ /*------------------------------------------ Defining variables */ :root { --font-size: 16px; --title-size: 32px; --title-main: 58px; --title-secondary: 46px; --title-tertiary: 38px; --title-small: 20px; } /*------------------------------------------------------------------------------------ Buttons */ .button-style { padding: 18px 26px; line-height: 18px; font-size: 14px; } .button-style svg { width: 14px; height: 14px; margin-left: 22px; } .button-style.large-size { padding: 28px 38px; line-height: 18px; font-size: 18px; } /*------------------------------------------------------------------------------------ Editor content */ .editor-content h2 { margin: 60px 0 26px; } .editor-content h3 { margin: 50px 0 22px; } .editor-content h4, .editor-content h5, .editor-content h6 { margin: 38px 0 18px; } .editor-content ol, .editor-content ul { padding-left: 28px; margin-bottom: 60px; } .editor-content li { margin-bottom: 14px; } /*------------------------------------------------------------------------------------ Interface */ .main-nav { padding: 32px 0; } .main-nav .inner { max-width: 1292px; margin: 0 auto; } .main-nav .inner .logo .link { height: 48px; } .main-nav .controls .links-wrapper { gap: 60px; } .main-nav .links { margin-right: 60px; } .main-nav .links .link { font-size: 17px; } .main-nav .controls .buttons-wrapper { gap: 24px; } .main-nav .actions .button { font-size: 14px; line-height: 18px; padding: 16px 26px; } /*------------------------------------------------------------------------------------ Sections */ /* Section Global */ section { margin-bottom: var(--doble-padding); } section .buttons-wrapper { gap: 18px; } section .limit-width { max-width: 1292px; margin: 0 auto; } /* Landing - Classic */ .landing-classic .image-wrapper { height: 540px; } /* Landing - Video Landing */ .video-landing .password-cta .wrapper .content .head { max-width: 360px; } .video-landing .password-cta .wrapper .content .foot { max-width: 360px; } /* Loop - Service Loop Generic */ .service-loop .loop.cols-3 > * { width: calc((100% / 3) - 27px); } /* Loop - Service Loop Teaser */ .service-loop-teaser .section-head .info-wrapper { width: 700px; } .service-loop-teaser .section-foot .info-wrapper { width: 700px; } /* Content - Two Col Article */ .two-col-article .content-wrapper { width: 70%; } /* Cta - Stats */ .stats .stats-wrapper .col .item { height: 220px; } /* Cta - Location */ .location .map-wrapper { height: 600px; } /*------------------------------------------------------------------------------------ Footer */ footer .inner { max-width: 1292px; margin: 0 auto; } /*------------------------------------------------------------------------------------ Repeaters */ /* Course */ .course-card .thumbnail .background .image { height: 380px; } } @media(hover: hover) { /* -------------------------------------------- */ /*------------------------------------------------------------------------------------ Animations */ /* Links */ .main-nav .links .link:hover, footer .link-columns .column .item .link:hover { opacity: 0.9; } .main-nav .links .link, footer .link-columns .column .item .link { position: relative; } .main-nav .links .link:after, footer .link-columns .column .item .link:after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; border-bottom-style: solid; border-bottom-width: 1px; } .main-nav .links .link:hover:after, footer .link-columns .column .item .link:hover:after { width: 100%; } /* Buttons */ .button-style:hover { opacity: 0.8; transform: scale(1.03); } .newsletter .card-wrapper .form .send:hover { opacity: 0.8; transform: scale(1.03); } .course-filters .filters .item:hover { opacity: 0.8; transform: translateY(-6px); } .button-style:hover svg.move-right { transform: translateX(6px); } .button-style:hover svg.move-left { transform: translateX(-6px); } .button-style:hover svg.move-top { transform: translateY(-6px); } .button-style:hover svg.move-bottom { transform: translateY(6px); } .button-style:hover svg.move-top-right { transform: translate3D(6px, -6px, 0); } .button-style:hover svg.move-top-left { transform: translate3D(-6px, -6px, 0); } .button-style:hover svg.move-bottom-right { transform: translate3D(6px, 6px, 0); } .button-style:hover svg.move-bottom-left { transform: translate3D(-6px, 6px, 0); } /* Repeaters */ .course-card .thumbnail .background .image { transition-property: all; transition-timing-function: cubic-bezier(.5,.5,.57,.88); transition-duration: 1s; } .course-card:hover .thumbnail .background .image { transform: scale(1.6); transition-duration: 10s; } .course-card .thumbnail .info .bottom-row .play { transition-property: all; transition-timing-function: cubic-bezier(.5,.5,.57,.88); transition-duration: 0.2s; } .course-card:hover .thumbnail .info .bottom-row .play { transform: scale(1.1); } }