/** * SWOM * (c) Excez * Rick Bongers */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,100;0,200;0,400;0,500;0,700;1,500&display=swap'); :root { --blue: #1F4576; --white: #ffffff; } #wpadminbar { display:none !important; } html, body { padding:0; margin:0; margin-top:0px !important; overflow-x:hidden; } body { font-family: 'DM sans', sans-serif; font-weight: 300; font-style: normal; color: #343434; font-size: 16px; line-height: 28px; letter-spacing: .3px; background-color:#fff; } body .vc_row, body .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .container { position:relative; } #project-content p { margin-bottom:1rem; } a { color:inherit; text-decoration:none; } a:hover { text-decoration:none; color:#662c91;} .hidden-link, .hidden-link:hover { color: inherit; text-decoration: inherit; } :focus { outline:none !important;} button { cursor: pointer; } p { line-height: } h1 { position: relative; margin-bottom:40pt; letter-spacing: 0px; font-weight:700; font-size:45pt;} h1, h2, h3, h4 { color:#1F4576; font-family: 'DM Sans', serif;} .h1, .h2, .h3, .h4 { color:#1F4576; font-family: 'DM Sans', serif;} h2 { color:#333C39; font-size:32px; font-weight: bold; } h3 { font-size:17px; font-weight: bold; color: #333C39; margin-bottom:15px; } h5 { font-size:14pt; color:#662c91; font-style: italic; font-weight:600; line-height:27px; } h6 { font-family: 'DM sans', serif; font-size: 12px; font-weight:bold; color:#707070; text-transform:uppercase; } .vc_row[data-vc-full-width] { overflow:visible !important; } .vc_row.vc_row-has-fill { background-position: bottom right !important; } .above-banner { transform:translateY(-250px); } .smart-background { width: 100%; height: 100%; background-position: center; background-size: cover; } .smart-background .image { display: none; } .smart-background .image img { width: 100%; max-height: 500px; object-fit: cover; } body .hamburger { display: none; opacity: 1 !important; } body .hamburger-inner, body .hamburger-inner:after, body .hamburger-inner:before { background-color:#333C39; } body .hamburger.is-active .hamburger-inner:after, body .hamburger.is-active .hamburger-inner:before { background-color:#333C39 !important; opacity: 1 !important;} body.scrolled-top .hamburger-inner, body.scrolled-top .hamburger-inner:after, body.scrolled-top .hamburger-inner:before { background-color:#000; } body.scrolled-top .hamburger.is-active .hamburger-inner:after, body.scrolled-top .hamburger.is-active .hamburger-inner:before { background-color:#000 !important; } body.mobile-menu-open .hamburger.is-active .hamburger-inner:after, body.mobile-menu-open .hamburger.is-active .hamburger-inner:before { background-color:#000 !important; } header { background:#F5F5F1; position: relative; z-index:25; width: 100vw; transition:.2s all ease-in-out } .navbar.main-navbar { height:120px; z-index:9999; width:100%; top:0; transition:.3s all ease-in-out; } .navbar.main-navbar .navbar-brand { height:78px; width: 200px; transition:.4s all ease-in-out; margin-top:0px; z-index:10} .navbar.main-navbar .navbar-brand img { max-height:100%; max-width:50vw; } .navbar.main-navbar .navbar-brand img.logo_black_sticky { display:none;} .navbar.main-navbar .navbar-above { position:absolute; right:0px; top:10px; font-weight:600; color:#000; } .navbar.main-navbar .navbar-above p span { margin-left: 30px } .navbar.main-navbar #menu-primary-menu { margin-top:0px; transition:.3s all ease-in-out; } .navbar.main-navbar .nav > li { position: relative; } .navbar.main-navbar .nav > li > a { color: #141E39; display:flex; padding:10px 20px; font-size:15px; text-decoration:none; font-weight:400; font-family: 'DM Sans', serif; } .navbar.main-navbar .nav > li.menu-item-has-children > a { padding-right:30px; } .navbar.main-navbar .nav > li.current_page_item a, .navbar.main-navbar .nav > li.current-menu-item a, .navbar.main-navbar .nav > li:hover a { color:#141E39 } .navbar.main-navbar .nav > li:hover > .dropdown-menu { display:block; border: none; padding: 20px; padding-right: 80px; box-shadow: 0px 0px 15px rgba(0, 0, 0, .16); top:calc(100% - 5px); border-radius: 0;} .navbar.main-navbar .nav > li.phone > a::before { content:"\f095"; font-family:"Font Awesome 6 Pro"; font-weight:600; padding-right:5px; } .navbar.main-navbar .nav > li.menu-item-has-children > a:after { content:"\f107"; font-family:"Font Awesome 6 Pro"; font-weight:600; padding-left:5px; border-top: none; border-right: none; border-bottom: none; border-left: none } .navbar.main-navbar .nav > li.menu-item-has-children:hover > a:after { content:"\f106" } .mega-menu-open .navbar.main-navbar .nav > li.menu-item-has-children > a:after { content:"\f0d8"; } .navbar.main-navbar .nav > li:not(.mega-menu) .container { max-width: unset; width:100%; list-style: none; } .navbar.main-navbar .nav > li:not(.mega-menu) .container > li > a { color:#000; font-family: 'DM Sans', serif; font-size:15px; display: block; padding:5px 0px; } body.mobile-menu-open .navbar.main-navbar, body.mega-menu-open .navbar.main-navbar { overflow:visible; } /* Mega Menu */ .mega-menu-open .navbar.main-navbar .nav li.mega-menu > .dropdown-menu { display: flex; opacity: 1; pointer-events:unset; } .mega-menu-open header { background-color:#fff; } .mega-menu-open .navbar.main-navbar .nav > li > a { color:#000; } .navbar.main-navbar .nav li.mega-menu { position: inherit; } .navbar.main-navbar .nav li.mega-menu > .dropdown-menu { pointer-events:none; border:none; display: none; opacity: 0; position: absolute; top: 168px; left: -15px; width: 100vw; z-index: -1; padding:40px 0px; transition:.2s all ease-in-out } .scrolled-top .navbar.main-navbar .nav li.mega-menu > .dropdown-menu { top:100px; } .navbar.main-navbar .nav li.mega-menu > .dropdown-menu > .container { list-style: none; display: flex; } .navbar.main-navbar .nav li.mega-menu > .dropdown-menu > .container > li { width:100%; display: flex; flex-direction: column;} .navbar.main-navbar .nav li.mega-menu > .dropdown-menu > .container > li > a { color:var(--blue); font-size:12px; font-weight:800; font-family: 'Montserrat', serif; text-transform: uppercase; } .navbar.main-navbar .nav li.mega-menu > .dropdown-menu > .container > li > .dropdown-menu { position: initial; display: block; border: none; } .navbar.main-navbar .nav li.mega-menu > .dropdown-menu > .container > li > .dropdown-menu > .container { width:100%; list-style: none; margin:0; padding:0; } .navbar.main-navbar .nav li.mega-menu > .dropdown-menu > .container > li > .dropdown-menu > .container > li {} .navbar.main-navbar .nav li.mega-menu > .dropdown-menu > .container > li > .dropdown-menu > .container > li > a { font-size:12px; color:#000; font-weight:400; font-family: 'Montserrat', serif; text-transform: uppercase; white-space: nowrap;} .vc_message_box.vc_message_box-standard.vc_color-white { border:none; padding: 40px 30px; } .vc_message_box.vc_message_box-standard.vc_color-white .vc_message_box-icon { display:none; } .vc_message_box.vc_message_box-standard.vc_color-white p { font-family:'spectral', sans-serif; color:#141E39; font-size:15px; line-height:23px; } .vc_message_box.vc_message_box-standard.vc_color-white p strong { font-weight:bold; } /* Banner */ .vc-banner { padding-bottom: 150px; background: transparent; margin-bottom: -150px; } .vc-banner .vc-banner-inner { padding: 115px 100px; position: relative; } .vc-banner .vc-banner-inner .vc-banner-image { height:100%; position: absolute; width: calc(100vw - 30%); left:35%; top:0px; } .vc-banner .vc-banner-inner .vc-banner-image img { object-fit:cover; height: 100%; width: 100%; } .vc-banner .vc-banner-container { background:#fff; width: 670px; height:100%; padding: 80px; max-width: 40vw; } .vc-banner .vc-banner-container .container { width: 100%; } .vc-banner h3 { text-transform:uppercase; color:#707070; font-size:14px; font-family: 'DM Sans', serif; font-weight: bold;; } .vc-banner h1 { color:#333C39 !important; font-size:45px; font-weight:bold; text-align: left; padding-right: 200px; } .vc-banner + .container-main article > .entry-content > section:first-child.vc_section { transform: translateY(-180px); } .vc-banner + .container-main > .container > section:first-child.vc_section { transform: translateY(-180px); } .vc_pageable-slide-wrapper.vc_clearfix { width:100%; } .vc_team-card-container .vc_gitem-animated-block { padding-right: 80px; } .vc_team-card-container .vc_gitem-animated-block .vc_gitem-zone { overflow: visible; margin-bottom: 100px; } .vc_team-card .vc_gitem-row-position-bottom { left: 60px !important; background-color: #EFEDE4; bottom: -60px !important; } .vc_team-card .vc_custom_heading.vc_gitem-post-data.vc_gitem-post-data-source-post_title { font-weight:bold; margin-bottom: 2px;} .vc_team-card .vc_gitem-acf.field_64bcf7373293d { text-transform:uppercase; font-family:'DM Sans', serif; font-size:11px; } .vc_team-card .vc_gitem_row .vc_gitem-col { padding: 20px !important; } .badge { border-radius:0px;} .badge.badge-warning {background-color: #e7a900; } .btn,.vc_btn3.vc_general { border-radius:30px !important; padding: 14px 40px !important; margin-bottom:20px; font-size:13px !important; transition:.2s all ease-in-out; margin-right:20px; font-size: 13px; font-weight:500; font-family:'DM Sans', sans-serif !important; } .btn:hover { text-decoration:none; } .btn.btn-lg, .vc_btn3-block.vc_btn3-size-lg { padding:15px 30px !important; font-size:20px !important; } .btn.btn-lg i , .vc_btn3-block.vc_btn3-size-lg i { font-size: 23px !important; margin-top: 6px; } .btn.btn-sm { font-size:13px !important; transition:.2s all ease-in-out; padding:8px 30px !important;} .btn.btn-warning {background-color: #e7a900; border-color:#e7a900; color:#fff } .bg-warning { background-color:#e7a900 !important} .btn.btn-link { color:#333C39 } .btn.btn-default { border:1px solid var(--blue); color:var(--blue); background-color:#fff; } .btn.btn-default:hover { background: var(--blue); color:#fff; } .btn.btn-purple, .btn.btn-swom, body .vc_btn3.vc_btn3-color-violet.vc_btn3-style-modern, body .vc_btn3.vc_btn3-color-purple.vc_btn3-style-modern { background-color:#662c91; color:#fff; background-image:none;; border:none;} .btn.btn-purple:hover, .btn.btn-swom:hover, body .vc_btn3.vc_btn3-color-violet.vc_btn3-style-modern:hover, body .vc_btn3.vc_btn3-color-purple.vc_btn3-style-modern:hover { background-color:#582381; color:#fff; background-image:none;; border:none;} .btn.btn-purple:focus, .btn.btn-swom:focus, body .vc_btn3.vc_btn3-color-violet.vc_btn3-style-modern:focus, body .vc_btn3.vc_btn3-color-purple.vc_btn3-style-modern:focus { background-color:#582381; color:#fff; background-image:none;; border:none;} .btn.btn-green, body .vc_btn3.vc_btn3-color-turquoise.vc_btn3-style-modern { background-color:#00999d; color:#fff; background-image:none;; border:none; } .btn.btn-green:hover, body .vc_btn3.vc_btn3-color-turquoise.vc_btn3-style-modern:hover { background-color:#00999d; color:#fff; background-image:none;; border:none; } .btn.btn-green:focus, body .vc_btn3.vc_btn3-color-turquoise.vc_btn3-style-modern:focus { background-color:#00999d; color:#fff; background-image:none;; border:none; } .btn.btn-red, .btn.btn-kbo, body .vc_btn3.vc_btn3-color-danger.vc_btn3-style-modern { color:#fff; background-color:#ff0000; background-image:none;; border:none; } .btn.btn-red:hover, .btn.btn-kbo:hover, body .vc_btn3.vc_btn3-color-danger.vc_btn3-style-modern:hover { color:#fff; background-color:#ff0000; background-image:none;; border:none; } .btn.btn-red:focus, .btn.btn-kbo:focus, body .vc_btn3.vc_btn3-color-danger.vc_btn3-style-modern:focus { color:#fff; background-color:#ff0000; background-image:none;; border:none; } .btn.btn-orange, .btn.btn-swombus, body .vc_btn3.vc_btn3-color-orange.vc_btn3-style-modern { color:#fff; background-color:#ff7900; background-image:none;; border:none; } .btn.btn-orange:hover, .btn.btn-swombus:hover, body .vc_btn3.vc_btn3-color-orange.vc_btn3-style-modern:hover { color:#fff; background-color:#ff7900; background-image:none;; border:none; } .btn.btn-orange:focus, .btn.btn-swombus:focus, body .vc_btn3.vc_btn3-color-orange.vc_btn3-style-modern:focus { color:#fff; background-color:#ff7900; background-image:none;; border:none; } .btn.btn-lightblue, .btn.btn-shc, body .vc_btn3.vc_btn3-color-blue.vc_btn3-style-modern { color:#fff; background-color:#ccce0a;color:#fff; background-image:none;; border:none; } .btn.btn-lightblue:hover, .btn.btn-shc:hover, body .vc_btn3.vc_btn3-color-blue.vc_btn3-style-modern:hover { color:#fff; background-color:#ccce0a;color:#fff; background-image:none;; border:none; } .btn.btn-lightblue:focus, .btn.btn-shc:focus, body .vc_btn3.vc_btn3-color-blue.vc_btn3-style-modern:focus { color:#fff; background-color:#ccce0a;color:#fff; background-image:none;; border:none; } .btn.btn-blue, body .vc_btn3.vc_btn3-color-primary.vc_btn3-style-modern { color:#fff; background-color:#2a3990; background-image:none;; border:none; } .btn.btn-blue:hover, body .vc_btn3.vc_btn3-color-primary.vc_btn3-style-modern:hover { color:#fff; background-color:#2a3990; background-image:none;; border:none; } .btn.btn-blue:focus, body .vc_btn3.vc_btn3-color-primary.vc_btn3-style-modern:focus { color:#fff; background-color:#2a3990; background-image:none;; border:none; } .btn.btn-primary { background-color:#333C39; border-color:#333C39; } .btn.btn-primary:hover { background-color:transparent; !important; color:#333C39;} .btn.btn-secondary { background-color:transparent; border-color:#333C39; color:#333C39;} .btn.btn-secondary:hover { background-color:#333C39 !important; color:white; } .btn.btn-outline { background-color: transparent !important; color:#000;} .btn.btn-outline.btn-primary { color:#020351; } .btn.btn-outline.btn-primary:hover { color:#fff; background-color:#020351; } .vc_btn3.vc_btn3-color-grey.vc_btn3-style-modern { color:#fff !important; background-color:#333C39 !important; border-color:#333C39 !important; background-image: none !important; } .vc_btn3.vc_btn3-color-grey.vc_btn3-style-modern:hover { color:#333C39 !important; background-color:transparent !important; } .btn.btn-primary span { position: relative; z-index:2; } .btn.btn-xs { padding: 8px 12px; font-size: 11pt !important; border-radius: 4px; text-transform: none;} body .vc_btn3.vc_btn3-size-md { font-size:17px;} body .btn-block .vc_btn3 { width:100%; text-align:center; } .form-control { border-radius:0; border:none; height: calc(2rem + 4px); font-size:12pt; background-color: transparent; border-bottom: 1px solid #646464; padding-left:0px !important; padding-right:0px !important; } .form-control:focus { box-shadow:none; outline:none; border-color:#4b3671; background-color: transparent; } textarea.form-control { border: 1px solid #646464 !important; padding-left: 10px !important; padding-right: 10px !important; } .select-control { position: relative;} .select-control .form-control { -webkit-appearance: none; cursor: pointer; } .select-control:after { pointer-events:none; content:"\f078"; font-family:"Font Awesome 5 Pro"; position: absolute; top:4px; padding:5px; right:1px; display: block; width:50px; height:40px; background: #fff; z-index: 9999999999;color:#dfe3e9; font-size:10pt; } .select-control.has-value:after { content:"\f00d"; font-size: 15pt; } .select-control.date-control:before { pointer-events:none; content:"\f073"; font-family:"Font Awesome 5 Pro"; position: absolute; top:4px; padding:5px; left:10px; display: block; width:50px; height:40px; background: #fff; z-index: 9999999999;color:#dfe3e9; font-size:16pt; } .select-control.date-control input { padding-left:60px; } .form-group { margin-bottom: 2.5rem !important } .form-group label { font-weight:300; font-size:12pt; font-family: 'Montserrat', sans-serif; } .form-group .form-control { border-radius:0; box-shadow:none; } form.wpcf7-form br { display: none; } .vc_separator { margin-bottom:20px !important; } .vc_separator:after {content:""; display:block; width:100%; background:url(../images/dots.png) no-repeat left top; height:20px; margin-top:20px; } .vc_separator .vc_sep_holder { display: none; } .col-full-height > .vc_column-inner > .wpb_wrapper, .col-full-height > .vc_column-inner > .wpb_wrapper > .wpb_content_element { height:100%; } .wpb_gmaps_widget, .wpb_gmaps_widget div, .wpb_gmaps_widget iframe { height:100%; max-height:600px } /* Owl */ .owl-theme .owl-nav .owl-prev, .owl-theme .owl-nav .owl-next { position: absolute; left: -100px; top: 50%; } .owl-theme .owl-nav .owl-next { left:auto; right:-100px; } .owl-experiences .item img { max-height: 150px; width: auto; margin: auto; } .owl-carousel[data-nav="true"] .owl-nav.disabled { display:block !important; } .col-simple { margin-bottom:60px; } .col-simple .image { border-top:10px solid #fff; margin-bottom:10px; } .col-simple .col-class-inner { background:#fff; padding:20px 30px; } .col-simple h4 { height: 50px; overflow:hidden; font-weight:700; font-size:23px; margin-top:20px; margin-bottom:20px; line-height: 25px; color:#4b3671; } .col-simple p { font-weight:300; height:200px; overflow: hidden; text-overflow: ellipsis } .col-simple p a { font-weight:600; } .col-simple .btn { margin-bottom: -35px; margin-top: 30px; font-size: 15px !important; font-weight: bold;} .icon-list { font-size:12pt; margin-bottom:5px; white-space:nowrap; } .icon-list i { font-size:17pt; color:#4abdbd; margin-right:10px; } .icon-list i.fa-border { border:1px solid #4abdbd; border-radius:500px; width:23px; height:23px; font-size:10pt; text-align:center; padding:5px; } .icon-list small { font-size:12px; } .vc_grid-filter.vc_grid-filter-left::before { content:'Filter op' !important; margin-bottom: 10px; } .vc_gitem-zone .vc_gitem-post-data-source-post_title h4 { color:#333C39; font-size: 17px; margin-bottom: -10px; } .vc_gitem-zone .vc_gitem-acf { color:#646464; font-size: 13px; } .vc_gitem-zone .vc_grid-filter.vc_grid-filter-size-md .vc_grid-filter-item { background-color:#fff; border-radius:20px; padding: 5px 20px !important;} .vc_gitem-zone .vc_grid-filter.vc_grid-filter-center { text-align:left !important; margin-left: 10px; margin-top: 5px; transition: .3s ease-in-out; } .vc_grid-item-mini.vc_is-hover .vc_gitem-animate-scaleRotateIn .vc_gitem-zone-a { transform: scale(1.1) !important;} .vc_grid-item-mini.vc_is-hover .vc_grid-filter.vc_grid-filter-center { margin-top:17px; margin-left:20px; } .vc_gitem_row .vc_gitem-col { padding: 10px 20px !important; } .vc_grid-container .vc_grid-filter.vc_grid-filter-size-lg .vc_grid-filter-item { opacity: .5; margin-right: 20px; border-radius: 30px !important; font-size:16px; padding: 10px 30px; border:1px solid #333C39; color:#333C39; font-weight:600; } .vc_grid-container .vc_grid-filter.vc_grid-filter-size-lg .vc_grid-filter-item.vc_active, .vc_grid-container .vc_grid-filter.vc_grid-filter-size-lg .vc_grid-filter-item:hover { opacity:1; background-color:transparent; border:1px solid #333C39; color:#333C39 !important; } .vc_grid-container .vc_grid-filter.vc_grid-filter-color-black>.vc_grid-filter-item.vc_active>span, .vc_grid-container .vc_grid-filter.vc_grid-filter-color-black>.vc_grid-filter-item:hover>span { color: #333C39 !important; } .vc_grid-container .vc_grid-filter.vc_grid-filter-bordered-rounded>.vc_grid-filter-item:last-child { margin-right:0px; border-top-right-radius: 30px; border-bottom-right-radius: 30px; } body .vc_grid-pagination .vc_grid-pagination-list.vc_grid-pagination-color-grey>li { margin:0px 5px !important; border-radius:100px; color:#747474 !important; border: 1px solid #747474 !important; border-color: #747474 !important; width: 30px !important; height: 30px !important} body .vc_grid-pagination .vc_grid-pagination-list.vc_grid-pagination-color-grey>li>a { border-color:transparent !important; border:none !important; font-size: 13px; padding: 5px; display: inline-block;} body .vc_grid-pagination .vc_grid-pagination-list.vc_grid-pagination-color-grey>li.vc_grid-active { background-color:#333C39 !important; color:#fff !important; } body .vc_grid-pagination .vc_grid-pagination-list.vc_grid-pagination-color-grey>li.vc_grid-active>a{ color:#fff !important; } .row-picturebooks.move__footer { margin-bottom:100px; z-index: 8} .row-picturebooks .col-picturebook { height:250px; padding:0px; } .row-picturebooks .col-picturebook .outer { position:relative; height:100%; display:block; } .row-picturebooks .col-picturebook .outer .inner { width:100%; height:100%; } .row-picturebooks .col-picturebook .outer .inner img { object-fit: cover; width:100%; height: 100%; } .row-picturebooks .col-picturebook .show_all { display: none; } .row-picturebooks .col-picturebook:nth-child(4) .show_all { display: flex; position: absolute; top:0; left:0; right:0; bottom:0px; background-color:rgba(0,0,0,0.5); color:#fff; font-family: 'Montserrat'; align-items: center; text-align: center;} .row-picturebooks .col-picturebook:nth-child(4) .show_all span { display: block; text-align: center; width: 100%; } .owl-carousel-images .owl-item { height:150px } .owl-carousel-images .owl-item > div { height:100%; } .owl-carousel-images .owl-item > div > div { display: table; width:100%; height:100%; } .owl-carousel-images .owl-item > div > div > div { display: table-cell; width:100%; height:100%; text-align:center; vertical-align:middle; padding:50px; } .owl-carousel-images .owl-item > div > div > div img { max-height: 100px; width: auto; max-width: 90%; margin:auto; -webkit-filter: grayscale(100%); filter: grayscale(100%); transition:.5s all; } .owl-carousel-images .owl-item:hover > div > div > div img { -webkit-filter: grayscale(0%); filter: grayscale(0%); } .vc_images_carousel { width:100% !important; } .vc_images_carousel img { max-width:100%; height:auto; } .vc_basic_grid .vc_grid.vc_row .vc_grid-item.vc_visible-item, .vc_media_grid .vc_grid.vc_row .vc_grid-item.vc_visible-item { display:inline-block !important; } .vc-fancybox.vc-fancybox-card {} .vc-fancybox.vc-fancybox-card .image { padding-right: 60px; overflow: hidden; } .vc-fancybox.vc-fancybox-card .image img { width: 100%; transition:.3s all ease-in-out } .vc-fancybox.vc-fancybox-card:hover .image img { transform: scale(1.1); } .vc-fancybox.vc-fancybox-card .content { color:#646464; background-color:white; padding:20px; margin-left:60px; margin-top:-100px; margin-bottom: -240px; position: relative; z-index: 2; height:100%; } .vc-fancybox .content .target-link:hover { background-color: #333C39 !important; color:#fff !important; } @media (max-width: 991.98px) { .vc-fancybox.vc-fancybox-card .content { height:auto; } } .cards-equal-height { margin-bottom:200px; } .cards-equal-height .vc_column_container>.vc_column-inner { display:flex; height:100% } .cards-equal-height .vc_column_container>.vc_column-inner > div { height:100% } .cards-equal-height .vc_column_container>.vc_column-inner > div > div { height:100% } .cards-equal-height .vc_column_container>.vc_column-inner > div > div > div { height:100% } .cards-equal-height .vc_column_container>.vc_column-inner .vc-fancybox-container { display:flex; height: 100%; } .cards-equal-height .vc_column_container>.vc_column-inner .vc-fancybox-container .vc-fancy-inner { display:flex; height: 100%; } .vc-fancybox.vc-fancybox-image {} .vc-fancybox.vc-fancybox-image .image { width: 70%; overflow: hidden; } .vc-fancybox.vc-fancybox-image .image img { width: 100%; transition:.3s all ease-in-out } .vc-fancybox.vc-fancybox-image:hover .image img { transform: scale(1.1); } .vc-fancybox.vc-fancybox-image .content { width: calc(30% + 60px); color:#646464; background-color:white; padding:20px; margin-left:auto; margin-top: -180px; margin-bottom: 100px; position: relative; z-index: 2; } .vc-fancybox.vc-fancybox-gray {} .vc-fancybox.vc-fancybox-gray .image { width: 50%; overflow: hidden; } .vc-fancybox.vc-fancybox-gray .image img { width: 100%; transition:.3s all ease-in-out } .vc-fancybox.vc-fancybox-gray:hover .image img { transform: scale(1.1); } .vc-fancybox.vc-fancybox-gray .content { width: calc(50% + 60px); color:#646464; background-color:#F5F5F1; padding:100px 40px; margin-left:auto; margin-top: -300px; margin-bottom: 100px; position: relative; z-index: 2; } .vc-fancybox.vc-fancybox-gray .content h3 { font-size: 32px; } .vc-fancybox.vc-fancybox-gray .content h6 { font-weight: bold; font-size: 14px; color:#333C39 } .vc-fancybox.vc-fancybox-gray.flip .image { margin-left:auto } .vc-fancybox.vc-fancybox-gray.flip .content { margin-left:0px; } /* .vc-fancybox { margin-bottom:400px; clear: both; display: flex; direction: rtl; margin-top: 350px; } .vc-fancybox .vc-fancy-inner { width:50%; position: relative; } .vc-fancybox .vc-fancy-inner .image { position: absolute; z-index: 4; top: -50%; left: calc(-100% - 100px); } .vc-fancybox .vc-fancy-inner .image img { object-fit: cover; width:100%; height:100%; } .vc-fancybox .vc-fancy-inner .content { background:#fff; padding:50px 100px; box-shadow: 0px 0px 30px rgba(0,0,0,0.14); text-align:center; position: relative; z-index: 5; direction: ltr;} .vc-fancybox.bordered { margin-bottom:200px; margin-top:250px; } .vc-fancybox.bordered .vc-fancy-inner { width:60%; } .vc-fancybox.bordered .vc-fancy-inner .image { top: 10%; left: -30vw; height: 80%; width: 40vw; z-index: 8} .vc-fancybox.bordered .vc-fancy-inner .content { background: transparent; padding: 150px 100px 150px 30%; border:1px solid #fff; box-shadow: none; text-align:left; color:#fff; } .vc-fancybox.bordered .vc-fancy-inner .content h1, .vc-fancybox.bordered .vc-fancy-inner .content h2, .vc-fancybox.bordered .vc-fancy-inner .content h3 { color:#fff; } */ footer.footer { background-color:#333C39; color:#fff; } footer.footer p, footer.footer a, footer.footer dt, footer.footer dd { color:#fff; font-size:11pt; text-decoration: none; } footer.footer h3 { color:#fff; font-weight:300; margin-bottom:20px;} footer.footer ul { list-style:none; padding:0px; margin:0px; column-count:1; } footer.footer dl { margin-bottom: 0px } footer.footer .fa-facebook-f { background:#fff; border-radius:500px; color:#4b3671; width:35px; height:35px; font-size:18pt; text-align:center; padding:7px; } footer.footer .footer-bottom { background-color:#333C39; padding:20px 0px; border-top:1px solid #3d4a46} footer.footer .footer-bottom p { font-size:13px; font-weight:300; margin:0; padding:0 } footer.footer .footer-bottom a { color:#fff} footer.footer .list-inline li a i { font-size:18px; margin-top:10px; } .footer-socials { display:flex; } .footer-socials > a { display:inline-block; padding-right:25px; } .footer-socials > a i { font-size: 20px; } footer.footer .footer-content { padding: 50px 0px; } footer.footer .footer-topper { padding: 60px 0px; background-color:#F5F5F1; } footer.footer .footer-topper .footer-brand { width:100px; margin:auto; } footer.footer .footer-topper .footer-brand img { max-width: 100%; } footer.footer .wp-block-heading { color:#fff; font-size:17px; font-weight: 600; margin-bottom: 20px; } .footer-bottom { background-color:#333C39; padding:12px 0 5px 0; font-size:13px;} .footer-bottom a { color:#fff; font-size: 16px; font-weight: bold; } .card .card-body > .table-responsive { margin:-1.25rem; width: calc(100% + 2.5rem); } .card .card-body > .table-responsive > .table { margin-bottom:0px; } .table th { border-top:none; border-bottom:none !important; color:#4b3671; text-align:left; font-size:12pt; line-height: 30pt; } .table td { font-size:12pt; font-weight:500; line-height: 20pt; } .table-hover tbody tr td { cursor: pointer;} .table-hover tbody tr:hover { background-color: #fafafa } .filter-row label { color: #4b3671; text-align: left; font-size: 14pt; line-height:40pt; font-weight:600; margin-bottom: 0; } ul.list-inline { list-style: none; display: inline; margin-top:5px; } ul.list-inline > li { list-style: none; display: inline-block; padding:0px 5px; margin: 0} .custom-map { height:100%; height:600px; } .custom-map #map { height:100%; width:100%; } .padding-fix-right { padding:0px 100px 0px 0px; } .padding-fix-left { padding:0px 0px 0px 100px; } .z-index { z-index:10; } section.vc_section { z-index: 5; position: relative; } body .vc_row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .row:before, .row:after {display: inline-block !important;} /* Safari fix */ .vc_row:before, .vc_row:after {display: inline-block !important;} .mt_negative.row_mt_negative { margin-top: -150px;; } .move-to-top > .vc_column-inner > .wpb_wrapper { padding:20px 20px; background:#fff; height:100% } .move-to-top .wpb_wrapper { position: relative;} .move-to-top .vc_btn3-container { height: 80px; display: block; } .move-to-top .vc_btn3 { position: absolute !important; bottom: 20px; top: auto !important; left: 20px !important; width: calc(100% - 40px) !important;} .newsletter-form { position: relative; } .newsletter-form button { background-color: transparent; position: absolute; right: 10px; border: beige; top: 0px; padding: 10px; } .order-sm-first { order: unset !important } ::-moz-selection, ::selection { color: #fff; background: #6598c4; } /* // Large devices (desktops, less than 1400px) */ @media (max-width: 1399.98px) { } @media (max-width: 1599.98px) { .navbar.main-navbar .nav li a { padding:0 20px; } } /* // Large devices (desktops, less than 1200px) */ @media (max-width: 1199.98px) { .navbar.main-navbar { height:120px; } .navbar.main-navbar .nav li a { padding:0px 10px; font-size:11pt; } .navbar.main-navbar .navbar-brand { height:80px; margin-top:0px; } .navbar.main-navbar .nav li a { padding:0 10px; } .mega-menu-open .navbar.main-navbar .nav li.mega-menu > .dropdown-menu { top:100px; } .vc-banner .vc-banner-container { max-width:60vw; } } /* // Large devices (desktops, less than 1200px) */ @media (max-width: 1025px) { .btn.btn-lg, .vc_btn3-block.vc_btn3-size-lg { font-size:16px !important; white-space: nowrap; } .activity-list .col-activity .content .btn { display:none; } h3 { font-size:16pt} .activity-list .col-activity .content .h4 { font-size:15px } .col-simple h4 { font-size:18px } .navbar.main-navbar .nav li a { padding:0px 10px } .navbar.main-navbar .nav li.highlight { margin-left:0px; } .row-picturebooks .col-picturebook { height:200px } .vc-banner .vc-banner-container { max-width:80vw; padding: 40px; } } /* // Medium devices (tablets, less than 992px) */ @media (max-width: 991.98px) { .vc-banner:before, .vc-banner:after { bottom:-1px; } .vc-banner .vc-banner-inner { padding-top:100px; padding-bottom:100px; } .vc-banner h1 { font-size:30pt; } body .hamburger { display: inline-block; margin-top: 0px;} .hamburger { z-index: 999995; position: absolute; right: 25px; top: 25px;} .scrolled-top .hamburger { top:15px; } .navbar.main-navbar .navbar-collapse { display: block; pointer-events: none; opacity: 0; transition: .3s all; width: 100vw; top: 40px; left: 0px; position: relative; background: #F5F5F1; z-index: 1;} .navbar.main-navbar .navbar-collapse .nav { padding-top: 5vh; text-align: center;} .navbar.main-navbar .navbar-collapse .nav li { display:block; width:100%; padding:15px; } .navbar.main-navbar .navbar-collapse .nav li a { color:#000; } .navbar.main-navbar #menu-primary-menu { padding-top:0px; margin-top: 112px; background: #F5F5F1; } .navbar.main-navbar .nav li.mega-menu > .dropdown-menu { position: initial; } .navbar.main-navbar .nav li.mega-menu > .dropdown-menu .container { max-width: unset; } .mobile-menu-open .navbar.main-navbar .navbar-collapse { opacity:1; pointer-events:all; position: absolute; width:100vw; } .navbar-above { display:none; } .navbar.main-navbar .navbar-brand { position: absolute; top: 20px;} .dropdown-menu, .navbar.main-navbar .nav > li:hover > .dropdown-menu { position: initial; padding: 0; background-color: transparent; box-shadow: none; width: 100%; text-align: center; font-weight: 400; } .navbar.main-navbar .navbar-collapse .nav .dropdown-menu li { padding:5px; } h2 { font-size:17pt; } h3 { font-size:14pt; } body .btn, body .vc_btn3.vc_btn3-size-lg { font-size:12px !important; } .navbar.main-navbar .nav.ml-left { position:unset; } nav.navbar.main-navbar ul.sub-menu { padding-top: 0px; margin-left: 50vw; text-align: left; position: unset; float: none; width: auto !important; } nav.navbar.main-navbar ul.sub-menu li { padding:0px !important; } nav.navbar.main-navbar ul.sub-menu li a { padding:5px; color:#333 } #menu-item-22 { display:inherit; } .vc-banner + .container-main article > .entry-content > section:first-child.vc_section { transform: translateY(-80px); } .vc-banner + .container-main > .container > section:first-child.vc_section { transform: translateY(-80px); } input, textarea { border:1px solid #ccc; } body .bg-md-none { background:none !important} /*.vc_pageable-slide-wrapper { display: block; }*/ .vc_pageable-slide-wrapper .vc_grid-item { width:33%; flex-basis: 33%; } .vc_pageable-slide-wrapper .vc_grid-item.projects-gallery { width:100%; flex-basis: 100%; } .vc_pageable-slide-wrapper .vc_grid-item.whirlpool-grid-list { width:100%; flex-basis: 100%; } .projects-gallery-extra-pad > .vc_grid:after { display: none; opacity: 0 } .vc-fancybox { margin-bottom: 100px; margin-top:0px; } /* .vc-fancybox .vc-fancy-inner { width: 90vw; }*/ /* .vc-fancybox .vc-fancy-inner .image { position: relative; top: auto; left: auto; width: 100%; margin-right: 2.5vw;}*/ /* .vc-fancybox .vc-fancy-inner .content { width: 80%; padding: 40px 20px; margin-right: 12.5%; margin-top: -80px; transform: none !important}*/ .vc-fancybox.bordered { display: block; margin-bottom: 60px; } .vc-fancybox.bordered .vc-fancy-inner { width:100%; } .vc-fancybox.bordered .vc-fancy-inner .image { position: relative; top: auto; left: auto; width: 90%; margin:auto;} .vc-fancybox.bordered .vc-fancy-inner .content { padding:40px 40px; width:100%; margin:-80px auto 0 auto } .row-picturebooks.move__footer {} .col-footer-4 .widget-title { display: none; } .vc-banner .vc-banner-inner .vc-banner-image { width: 100vw; left:0px; } .vc-banner .vc-banner-inner { padding: 100px 0px; } .vc-banner .vc-banner-inner > .container { max-width: 100%; } .vc-banner .vc-banner-container { max-width:unset; padding: 30px; width:100%; } .vc-fancybox.vc-fancybox-image .image { width: 100%; } .vc-fancybox.vc-fancybox-image .content { width:80%; margin-left:10%; margin-top:-80px; } .vc-fancybox.vc-fancybox-gray .image { width: 100%; } .vc-fancybox.vc-fancybox-gray .content { width:80%; margin-left:25%; margin-top:-80px; padding:30px; } .vc-fancybox.vc-fancybox-gray.flip .content { margin-left:-5%; } .col-footer-3 { display:none; } } /* // Small devices (landscape phones, less than 768px) */ @media (max-width: 767.98px) { .order-sm-first { order: -1 !important; } .header-tabs ul { display:block;} .header-tabs ul li { margin:auto; } body .bg-sm-none { background:none !important} .vc-banner h1 { font-size:20pt; max-width:none; } .vc-banner h3 { font-size:12px; } .vc-banner h3 + h1 { font-size:20pt; padding:0 } .vc-banner .buttons > div { float: none !important } .vc-banner .buttons > div > a { width: 100%; display: block; } body .vc_column_container > .vc_column-inner { padding-left:15px; padding-right:15px; } .vc_pageable-slide-wrapper .vc_grid-item { width:50%; flex-basis: 50%;} .footer-topper-content a.btn.btn-link { display:none; } footer.footer .footer-topper { padding: 40px 0px 20px 0px; } footer.footer .footer-content { padding: 40px 15px; } .col-footer-3 { display:none; } .smart-background .image { display: block; } .header__sticky__scroll_top.scrolled-top.nav-down header .navbar.main-navbar { height:80px; } header .navbar.main-navbar .navbar-brand { width:100px; left:0px; } .header__sticky__scroll_top.scrolled-top.nav-down header .navbar.main-navbar .navbar-brand { top: 10px !important;height: 60px; left: 0px !important; width: 100px; } .col-footer-1 .widget-title { opacity: 0; height:10px; margin: 0; } .custom-hover-grid .vc_grid-item-mini > .vc_gitem-animated-block .vc_gitem-zone-b .vc_gitem-row-position-middle { padding:0px; margin: 0px; } .custom-hover-grid .vc_grid-item-mini > .vc_gitem-animated-block .vc_gitem-zone-b .vc_gitem-row-position-middle > .vc_gitem-col { width:100%; } .row-picturebooks .col-picturebook { height:300px; } .row-picturebooks > .col-picturebook:nth-child(2), .row-picturebooks > .col-picturebook:nth-child(3) { display: none; } body.vc_responsive .vc_gitem-post-data.vc_grid-filter { display: block !important } .vc_gitem-zone-a .vc_gitem-row-position-top > .vc_gitem-col { width:100%; } .vc_gitem-zone-a .vc_gitem-row-position-middle > .vc_gitem-col { width:100%; } .vc_gitem-zone-a .vc_gitem-row-position-bottom > .vc_gitem-col { width:100%; } .whirlpool-grid.vc_gitem-zone-a .vc_gitem-row-position-bottom > .vc_gitem-col { width:50%; } } /* // Extra small devices (portrait phones, less than 576px) */ @media (max-width: 575.98px) { html { padding:0px; } #app::before { display: none; } .padding-fix-left { padding:0px 0px; } .padding-fix-right { padding:0px 0px; } .hidden-xs { display:none !important; } .order-xs-first { order: -1; } .vc_pageable-slide-wrapper .vc_grid-item { width:100%; flex-basis: 100%;} /*.vc_pageable-slide-wrapper .vc_grid-item .vc_gitem-animated-block { height: 300px !important; }*/ .vc_section.above-banner { margin-left:0px; margin-right:0px; } .vc-banner + .container-main article > .entry-content > section:first-child.vc_section { margin-left:0px; margin-right:0px; } .vc-banner + .container-main > .container > section:first-child.vc_section { margin-left:0px; margin-right:0px; } header { width:100vw !important; } .navbar.main-navbar #menu-primary-menu { width: calc(100vw + 20px); margin-left: -20px !important; ;} .navbar.main-navbar .navbar-collapse .nav li { text-align:left; } .navbar.main-navbar .nav li.highlight { margin: 0px 10px !important; height: 50px; text-align: center; padding: 10px !important; } nav.navbar.main-navbar ul.sub-menu { margin-left:50px !important; padding-top: 10px !important; } .navbar.main-navbar .navbar-brand { top:20px !important; } .navbar.main-navbar .navbar-collapse .nav li { padding:10px 15px; text-align: center; } .mega-menu-open .navbar.main-navbar .nav li.mega-menu > .dropdown-menu { padding:20px 0px; } .navbar.main-navbar .nav li.mega-menu > .dropdown-menu > .container { flex-direction: column; margin:0;} .navbar.main-navbar .nav li.mega-menu > .dropdown-menu > .container > li { padding:0px; } .navbar.main-navbar .nav li.mega-menu > .dropdown-menu > .container > li > .dropdown-menu > .container > li { padding:0px; } } .fancybox-thumbs.fancybox-thumbs-x { top: auto; width: auto; bottom: 0; left: 0; right: 0; height: 95px; padding: 10px 10px 5px 10px; box-sizing: border-box; background: rgba(0, 0, 0, 0.3);} .fancybox-show-thumbs .fancybox-inner { right: 0; bottom: 95px;} /* CONTAINER WIDTH */ @media (min-width: 992px) { .navbar-expand-lg .navbar-collapse { padding-right: 80px; } } @media (min-width: 1600px){ .container { max-width: 1200px; } } @media (min-width: 2000px){ .container { max-width: 1200px; } } @keyframes navigation-in { 0% { background: white; } 100% { background: white; } } @keyframes navigation-out { 0% { background: white; } 99% { background: white; } 100% { background: transparent; } } /*! * Hamburgers * @description Tasty CSS-animated hamburgers * @author Jonathan Suh @jonsuh * @site https://jonsuh.com/hamburgers * @link https://github.com/jonsuh/hamburgers */.hamburger{font:inherit;display:inline-block;overflow:visible;margin:0;padding:15px;cursor:pointer;transition-timing-function:linear;transition-duration:.15s;transition-property:opacity,filter;text-transform:none;color:inherit;border:0;background-color:transparent}.hamburger.is-active:hover,.hamburger:hover{opacity:.7}.hamburger.is-active .hamburger-inner,.hamburger.is-active .hamburger-inner:after,.hamburger.is-active .hamburger-inner:before{background-color:#000}.hamburger-box{position:relative;display:inline-block;width:40px;height:24px}.hamburger-inner{top:50%;display:block;margin-top:-2px}.hamburger-inner,.hamburger-inner:after,.hamburger-inner:before{position:absolute;width:40px;height:4px;transition-timing-function:ease;transition-duration:.15s;transition-property:transform;border-radius:4px;background-color:#000}.hamburger-inner:after,.hamburger-inner:before{display:block;content:""}.hamburger-inner:before{top:-10px}.hamburger-inner:after{bottom:-10px}.hamburger--3dx .hamburger-box{perspective:80px}.hamburger--3dx .hamburger-inner{transition:transform .15s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dx .hamburger-inner:after,.hamburger--3dx .hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dx.is-active .hamburger-inner{transform:rotateY(180deg);background-color:transparent!important}.hamburger--3dx.is-active .hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.hamburger--3dx.is-active .hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.hamburger--3dx-r .hamburger-box{perspective:80px}.hamburger--3dx-r .hamburger-inner{transition:transform .15s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dx-r .hamburger-inner:after,.hamburger--3dx-r .hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dx-r.is-active .hamburger-inner{transform:rotateY(-180deg);background-color:transparent!important}.hamburger--3dx-r.is-active .hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.hamburger--3dx-r.is-active .hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.hamburger--3dy .hamburger-box{perspective:80px}.hamburger--3dy .hamburger-inner{transition:transform .15s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dy .hamburger-inner:after,.hamburger--3dy .hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dy.is-active .hamburger-inner{transform:rotateX(-180deg);background-color:transparent!important}.hamburger--3dy.is-active .hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.hamburger--3dy.is-active .hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.hamburger--3dy-r .hamburger-box{perspective:80px}.hamburger--3dy-r .hamburger-inner{transition:transform .15s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dy-r .hamburger-inner:after,.hamburger--3dy-r .hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dy-r.is-active .hamburger-inner{transform:rotateX(180deg);background-color:transparent!important}.hamburger--3dy-r.is-active .hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.hamburger--3dy-r.is-active .hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.hamburger--3dxy .hamburger-box{perspective:80px}.hamburger--3dxy .hamburger-inner{transition:transform .15s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dxy .hamburger-inner:after,.hamburger--3dxy .hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dxy.is-active .hamburger-inner{transform:rotateX(180deg) rotateY(180deg);background-color:transparent!important}.hamburger--3dxy.is-active .hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.hamburger--3dxy.is-active .hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.hamburger--3dxy-r .hamburger-box{perspective:80px}.hamburger--3dxy-r .hamburger-inner{transition:transform .15s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dxy-r .hamburger-inner:after,.hamburger--3dxy-r .hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dxy-r.is-active .hamburger-inner{transform:rotateX(180deg) rotateY(180deg) rotate(-180deg);background-color:transparent!important}.hamburger--3dxy-r.is-active .hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.hamburger--3dxy-r.is-active .hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.hamburger--arrow.is-active .hamburger-inner:before{transform:translate3d(-8px,0,0) rotate(-45deg) scaleX(.7)}.hamburger--arrow.is-active .hamburger-inner:after{transform:translate3d(-8px,0,0) rotate(45deg) scaleX(.7)}.hamburger--arrow-r.is-active .hamburger-inner:before{transform:translate3d(8px,0,0) rotate(45deg) scaleX(.7)}.hamburger--arrow-r.is-active .hamburger-inner:after{transform:translate3d(8px,0,0) rotate(-45deg) scaleX(.7)}.hamburger--arrowalt .hamburger-inner:before{transition:top .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)}.hamburger--arrowalt .hamburger-inner:after{transition:bottom .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)}.hamburger--arrowalt.is-active .hamburger-inner:before{top:0;transition:top .1s ease,transform .1s cubic-bezier(.895,.03,.685,.22) .1s;transform:translate3d(-8px,-10px,0) rotate(-45deg) scaleX(.7)}.hamburger--arrowalt.is-active .hamburger-inner:after{bottom:0;transition:bottom .1s ease,transform .1s cubic-bezier(.895,.03,.685,.22) .1s;transform:translate3d(-8px,10px,0) rotate(45deg) scaleX(.7)}.hamburger--arrowalt-r .hamburger-inner:before{transition:top .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)}.hamburger--arrowalt-r .hamburger-inner:after{transition:bottom .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)}.hamburger--arrowalt-r.is-active .hamburger-inner:before{top:0;transition:top .1s ease,transform .1s cubic-bezier(.895,.03,.685,.22) .1s;transform:translate3d(8px,-10px,0) rotate(45deg) scaleX(.7)}.hamburger--arrowalt-r.is-active .hamburger-inner:after{bottom:0;transition:bottom .1s ease,transform .1s cubic-bezier(.895,.03,.685,.22) .1s;transform:translate3d(8px,10px,0) rotate(-45deg) scaleX(.7)}.hamburger--arrowturn.is-active .hamburger-inner{transform:rotate(-180deg)}.hamburger--arrowturn.is-active .hamburger-inner:before{transform:translate3d(8px,0,0) rotate(45deg) scaleX(.7)}.hamburger--arrowturn.is-active .hamburger-inner:after{transform:translate3d(8px,0,0) rotate(-45deg) scaleX(.7)}.hamburger--arrowturn-r.is-active .hamburger-inner{transform:rotate(-180deg)}.hamburger--arrowturn-r.is-active .hamburger-inner:before{transform:translate3d(-8px,0,0) rotate(-45deg) scaleX(.7)}.hamburger--arrowturn-r.is-active .hamburger-inner:after{transform:translate3d(-8px,0,0) rotate(45deg) scaleX(.7)}.hamburger--boring .hamburger-inner,.hamburger--boring .hamburger-inner:after,.hamburger--boring .hamburger-inner:before{transition-property:none}.hamburger--boring.is-active .hamburger-inner{transform:rotate(45deg)}.hamburger--boring.is-active .hamburger-inner:before{top:0;opacity:0}.hamburger--boring.is-active .hamburger-inner:after{bottom:0;transform:rotate(-90deg)}.hamburger--collapse .hamburger-inner{top:auto;bottom:0;transition-delay:.13s;transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.13s}.hamburger--collapse .hamburger-inner:after{top:-20px;transition:top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,opacity .1s linear}.hamburger--collapse .hamburger-inner:before{transition:top .12s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)}.hamburger--collapse.is-active .hamburger-inner{transition-delay:.22s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:translate3d(0,-10px,0) rotate(-45deg)}.hamburger--collapse.is-active .hamburger-inner:after{top:0;transition:top .2s cubic-bezier(.33333,0,.66667,.33333),opacity .1s linear .22s;opacity:0}.hamburger--collapse.is-active .hamburger-inner:before{top:0;transition:top .1s cubic-bezier(.33333,0,.66667,.33333) .16s,transform .13s cubic-bezier(.215,.61,.355,1) .25s;transform:rotate(-90deg)}.hamburger--collapse-r .hamburger-inner{top:auto;bottom:0;transition-delay:.13s;transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.13s}.hamburger--collapse-r .hamburger-inner:after{top:-20px;transition:top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,opacity .1s linear}.hamburger--collapse-r .hamburger-inner:before{transition:top .12s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)}.hamburger--collapse-r.is-active .hamburger-inner{transition-delay:.22s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:translate3d(0,-10px,0) rotate(45deg)}.hamburger--collapse-r.is-active .hamburger-inner:after{top:0;transition:top .2s cubic-bezier(.33333,0,.66667,.33333),opacity .1s linear .22s;opacity:0}.hamburger--collapse-r.is-active .hamburger-inner:before{top:0;transition:top .1s cubic-bezier(.33333,0,.66667,.33333) .16s,transform .13s cubic-bezier(.215,.61,.355,1) .25s;transform:rotate(90deg)}.hamburger--elastic .hamburger-inner{top:2px;transition-timing-function:cubic-bezier(.68,-.55,.265,1.55);transition-duration:.275s}.hamburger--elastic .hamburger-inner:before{top:10px;transition:opacity .125s ease .275s}.hamburger--elastic .hamburger-inner:after{top:20px;transition:transform .275s cubic-bezier(.68,-.55,.265,1.55)}.hamburger--elastic.is-active .hamburger-inner{transition-delay:75ms;transform:translate3d(0,10px,0) rotate(135deg)}.hamburger--elastic.is-active .hamburger-inner:before{transition-delay:0s;opacity:0}.hamburger--elastic.is-active .hamburger-inner:after{transition-delay:75ms;transform:translate3d(0,-20px,0) rotate(-270deg)}.hamburger--elastic-r .hamburger-inner{top:2px;transition-timing-function:cubic-bezier(.68,-.55,.265,1.55);transition-duration:.275s}.hamburger--elastic-r .hamburger-inner:before{top:10px;transition:opacity .125s ease .275s}.hamburger--elastic-r .hamburger-inner:after{top:20px;transition:transform .275s cubic-bezier(.68,-.55,.265,1.55)}.hamburger--elastic-r.is-active .hamburger-inner{transition-delay:75ms;transform:translate3d(0,10px,0) rotate(-135deg)}.hamburger--elastic-r.is-active .hamburger-inner:before{transition-delay:0s;opacity:0}.hamburger--elastic-r.is-active .hamburger-inner:after{transition-delay:75ms;transform:translate3d(0,-20px,0) rotate(270deg)}.hamburger--emphatic{overflow:hidden}.hamburger--emphatic .hamburger-inner{transition:background-color .125s ease-in .175s}.hamburger--emphatic .hamburger-inner:before{left:0;transition:transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,left .125s ease-in .175s}.hamburger--emphatic .hamburger-inner:after{top:10px;right:0;transition:transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,right .125s ease-in .175s}.hamburger--emphatic.is-active .hamburger-inner{transition-delay:0s;transition-timing-function:ease-out;background-color:transparent!important}.hamburger--emphatic.is-active .hamburger-inner:before{top:-80px;left:-80px;transition:left .125s ease-out,top .05s linear .125s,transform .125s cubic-bezier(.075,.82,.165,1) .175s;transform:translate3d(80px,80px,0) rotate(45deg)}.hamburger--emphatic.is-active .hamburger-inner:after{top:-80px;right:-80px;transition:right .125s ease-out,top .05s linear .125s,transform .125s cubic-bezier(.075,.82,.165,1) .175s;transform:translate3d(-80px,80px,0) rotate(-45deg)}.hamburger--emphatic-r{overflow:hidden}.hamburger--emphatic-r .hamburger-inner{transition:background-color .125s ease-in .175s}.hamburger--emphatic-r .hamburger-inner:before{left:0;transition:transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,left .125s ease-in .175s}.hamburger--emphatic-r .hamburger-inner:after{top:10px;right:0;transition:transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,right .125s ease-in .175s}.hamburger--emphatic-r.is-active .hamburger-inner{transition-delay:0s;transition-timing-function:ease-out;background-color:transparent!important}.hamburger--emphatic-r.is-active .hamburger-inner:before{top:80px;left:-80px;transition:left .125s ease-out,top .05s linear .125s,transform .125s cubic-bezier(.075,.82,.165,1) .175s;transform:translate3d(80px,-80px,0) rotate(-45deg)}.hamburger--emphatic-r.is-active .hamburger-inner:after{top:80px;right:-80px;transition:right .125s ease-out,top .05s linear .125s,transform .125s cubic-bezier(.075,.82,.165,1) .175s;transform:translate3d(-80px,-80px,0) rotate(45deg)}.hamburger--minus .hamburger-inner:after,.hamburger--minus .hamburger-inner:before{transition:bottom .08s ease-out 0s,top .08s ease-out 0s,opacity 0s linear}.hamburger--minus.is-active .hamburger-inner:after,.hamburger--minus.is-active .hamburger-inner:before{transition:bottom .08s ease-out,top .08s ease-out,opacity 0s linear .08s;opacity:0}.hamburger--minus.is-active .hamburger-inner:before{top:0}.hamburger--minus.is-active .hamburger-inner:after{bottom:0}.hamburger--slider .hamburger-inner{top:2px}.hamburger--slider .hamburger-inner:before{top:10px;transition-timing-function:ease;transition-duration:.15s;transition-property:transform,opacity}.hamburger--slider .hamburger-inner:after{top:20px}.hamburger--slider.is-active .hamburger-inner{transform:translate3d(0,10px,0) rotate(45deg)}.hamburger--slider.is-active .hamburger-inner:before{transform:rotate(-45deg) translate3d(-5.71429px,-6px,0);opacity:0}.hamburger--slider.is-active .hamburger-inner:after{transform:translate3d(0,-20px,0) rotate(-90deg)}.hamburger--slider-r .hamburger-inner{top:2px}.hamburger--slider-r .hamburger-inner:before{top:10px;transition-timing-function:ease;transition-duration:.15s;transition-property:transform,opacity}.hamburger--slider-r .hamburger-inner:after{top:20px}.hamburger--slider-r.is-active .hamburger-inner{transform:translate3d(0,10px,0) rotate(-45deg)}.hamburger--slider-r.is-active .hamburger-inner:before{transform:rotate(45deg) translate3d(5.71429px,-6px,0);opacity:0}.hamburger--slider-r.is-active .hamburger-inner:after{transform:translate3d(0,-20px,0) rotate(90deg)}.hamburger--spin .hamburger-inner{transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.22s}.hamburger--spin .hamburger-inner:before{transition:top .1s ease-in .25s,opacity .1s ease-in}.hamburger--spin .hamburger-inner:after{transition:bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.675,.19)}.hamburger--spin.is-active .hamburger-inner{transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:rotate(225deg)}.hamburger--spin.is-active .hamburger-inner:before{top:0;transition:top .1s ease-out,opacity .1s ease-out .12s;opacity:0}.hamburger--spin.is-active .hamburger-inner:after{bottom:0;transition:bottom .1s ease-out,transform .22s cubic-bezier(.215,.61,.355,1) .12s;transform:rotate(-90deg)}.hamburger--spin-r .hamburger-inner{transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.22s}.hamburger--spin-r .hamburger-inner:before{transition:top .1s ease-in .25s,opacity .1s ease-in}.hamburger--spin-r .hamburger-inner:after{transition:bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.675,.19)}.hamburger--spin-r.is-active .hamburger-inner{transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:rotate(-225deg)}.hamburger--spin-r.is-active .hamburger-inner:before{top:0;transition:top .1s ease-out,opacity .1s ease-out .12s;opacity:0}.hamburger--spin-r.is-active .hamburger-inner:after{bottom:0;transition:bottom .1s ease-out,transform .22s cubic-bezier(.215,.61,.355,1) .12s;transform:rotate(90deg)}.hamburger--spring .hamburger-inner{top:2px;transition:background-color 0s linear .13s}.hamburger--spring .hamburger-inner:before{top:10px;transition:top .1s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)}.hamburger--spring .hamburger-inner:after{top:20px;transition:top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)}.hamburger--spring.is-active .hamburger-inner{transition-delay:.22s;background-color:transparent!important}.hamburger--spring.is-active .hamburger-inner:before{top:0;transition:top .1s cubic-bezier(.33333,0,.66667,.33333) .15s,transform .13s cubic-bezier(.215,.61,.355,1) .22s;transform:translate3d(0,10px,0) rotate(45deg)}.hamburger--spring.is-active .hamburger-inner:after{top:0;transition:top .2s cubic-bezier(.33333,0,.66667,.33333),transform .13s cubic-bezier(.215,.61,.355,1) .22s;transform:translate3d(0,10px,0) rotate(-45deg)}.hamburger--spring-r .hamburger-inner{top:auto;bottom:0;transition-delay:0s;transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.13s}.hamburger--spring-r .hamburger-inner:after{top:-20px;transition:top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,opacity 0s linear}.hamburger--spring-r .hamburger-inner:before{transition:top .1s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)}.hamburger--spring-r.is-active .hamburger-inner{transition-delay:.22s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:translate3d(0,-10px,0) rotate(-45deg)}.hamburger--spring-r.is-active .hamburger-inner:after{top:0;transition:top .2s cubic-bezier(.33333,0,.66667,.33333),opacity 0s linear .22s;opacity:0}.hamburger--spring-r.is-active .hamburger-inner:before{top:0;transition:top .1s cubic-bezier(.33333,0,.66667,.33333) .15s,transform .13s cubic-bezier(.215,.61,.355,1) .22s;transform:rotate(90deg)}.hamburger--stand .hamburger-inner{transition:transform 75ms cubic-bezier(.55,.055,.675,.19) .15s,background-color 0s linear 75ms}.hamburger--stand .hamburger-inner:before{transition:top 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0s}.hamburger--stand .hamburger-inner:after{transition:bottom 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0s}.hamburger--stand.is-active .hamburger-inner{transition:transform 75ms cubic-bezier(.215,.61,.355,1) 0s,background-color 0s linear .15s;transform:rotate(90deg);background-color:transparent!important}.hamburger--stand.is-active .hamburger-inner:before{top:0;transition:top 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .15s;transform:rotate(-45deg)}.hamburger--stand.is-active .hamburger-inner:after{bottom:0;transition:bottom 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .15s;transform:rotate(45deg)}.hamburger--stand-r .hamburger-inner{transition:transform 75ms cubic-bezier(.55,.055,.675,.19) .15s,background-color 0s linear 75ms}.hamburger--stand-r .hamburger-inner:before{transition:top 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0s}.hamburger--stand-r .hamburger-inner:after{transition:bottom 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0s}.hamburger--stand-r.is-active .hamburger-inner{transition:transform 75ms cubic-bezier(.215,.61,.355,1) 0s,background-color 0s linear .15s;transform:rotate(-90deg);background-color:transparent!important}.hamburger--stand-r.is-active .hamburger-inner:before{top:0;transition:top 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .15s;transform:rotate(-45deg)}.hamburger--stand-r.is-active .hamburger-inner:after{bottom:0;transition:bottom 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .15s;transform:rotate(45deg)}.hamburger--squeeze .hamburger-inner{transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:75ms}.hamburger--squeeze .hamburger-inner:before{transition:top 75ms ease .12s,opacity 75ms ease}.hamburger--squeeze .hamburger-inner:after{transition:bottom 75ms ease .12s,transform 75ms cubic-bezier(.55,.055,.675,.19)}.hamburger--squeeze.is-active .hamburger-inner{transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:rotate(45deg)}.hamburger--squeeze.is-active .hamburger-inner:before{top:0;transition:top 75ms ease,opacity 75ms ease .12s;opacity:0}.hamburger--squeeze.is-active .hamburger-inner:after{bottom:0;transition:bottom 75ms ease,transform 75ms cubic-bezier(.215,.61,.355,1) .12s;transform:rotate(-90deg)}.hamburger--vortex .hamburger-inner{transition-timing-function:cubic-bezier(.19,1,.22,1);transition-duration:.2s}.hamburger--vortex .hamburger-inner:after,.hamburger--vortex .hamburger-inner:before{transition-delay:.1s;transition-timing-function:linear;transition-duration:0s}.hamburger--vortex .hamburger-inner:before{transition-property:top,opacity}.hamburger--vortex .hamburger-inner:after{transition-property:bottom,transform}.hamburger--vortex.is-active .hamburger-inner{transition-timing-function:cubic-bezier(.19,1,.22,1);transform:rotate(765deg)}.hamburger--vortex.is-active .hamburger-inner:after,.hamburger--vortex.is-active .hamburger-inner:before{transition-delay:0s}.hamburger--vortex.is-active .hamburger-inner:before{top:0;opacity:0}.hamburger--vortex.is-active .hamburger-inner:after{bottom:0;transform:rotate(90deg)}.hamburger--vortex-r .hamburger-inner{transition-timing-function:cubic-bezier(.19,1,.22,1);transition-duration:.2s}.hamburger--vortex-r .hamburger-inner:after,.hamburger--vortex-r .hamburger-inner:before{transition-delay:.1s;transition-timing-function:linear;transition-duration:0s}.hamburger--vortex-r .hamburger-inner:before{transition-property:top,opacity}.hamburger--vortex-r .hamburger-inner:after{transition-property:bottom,transform}.hamburger--vortex-r.is-active .hamburger-inner{transition-timing-function:cubic-bezier(.19,1,.22,1);transform:rotate(-765deg)}.hamburger--vortex-r.is-active .hamburger-inner:after,.hamburger--vortex-r.is-active .hamburger-inner:before{transition-delay:0s}.hamburger--vortex-r.is-active .hamburger-inner:before{top:0;opacity:0}.hamburger--vortex-r.is-active .hamburger-inner:after{bottom:0;transform:rotate(-90deg)} /* * Usage: *
* */ .sk-rotating-plane { width: 40px; height: 40px; background-color: #333; margin: 40px auto; -webkit-animation: sk-rotatePlane 1.2s infinite ease-in-out; animation: sk-rotatePlane 1.2s infinite ease-in-out; } @-webkit-keyframes sk-rotatePlane { 0% { -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 100% { -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } @keyframes sk-rotatePlane { 0% { -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 100% { -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } /* * Usage: *
* */ .sk-double-bounce { width: 40px; height: 40px; position: relative; margin: 40px auto; } .sk-double-bounce .sk-child { width: 100%; height: 100%; border-radius: 50%; background-color: #333; opacity: 0.6; position: absolute; top: 0; left: 0; -webkit-animation: sk-doubleBounce 2s infinite ease-in-out; animation: sk-doubleBounce 2s infinite ease-in-out; } .sk-double-bounce .sk-double-bounce2 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes sk-doubleBounce { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes sk-doubleBounce { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); } } /* * Usage: *
* */ .sk-wave { margin: 40px auto; width: 50px; height: 40px; text-align: center; font-size: 10px; } .sk-wave .sk-rect { background-color: #333; height: 100%; width: 6px; display: inline-block; -webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out; animation: sk-waveStretchDelay 1.2s infinite ease-in-out; } .sk-wave .sk-rect1 { -webkit-animation-delay: -1.2s; animation-delay: -1.2s; } .sk-wave .sk-rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .sk-wave .sk-rect3 { -webkit-animation-delay: -1s; animation-delay: -1s; } .sk-wave .sk-rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .sk-wave .sk-rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes sk-waveStretchDelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4); transform: scaleY(0.4); } 20% { -webkit-transform: scaleY(1); transform: scaleY(1); } } @keyframes sk-waveStretchDelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4); transform: scaleY(0.4); } 20% { -webkit-transform: scaleY(1); transform: scaleY(1); } } /* * Usage: *
* */ .sk-wandering-cubes { margin: 40px auto; width: 40px; height: 40px; position: relative; } .sk-wandering-cubes .sk-cube { background-color: #333; width: 10px; height: 10px; position: absolute; top: 0; left: 0; -webkit-animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both; animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both; } .sk-wandering-cubes .sk-cube2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } @-webkit-keyframes sk-wanderingCube { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 25% { -webkit-transform: translateX(30px) rotate(-90deg) scale(0.5); transform: translateX(30px) rotate(-90deg) scale(0.5); } 50% { /* Hack to make FF rotate in the right direction */ -webkit-transform: translateX(30px) translateY(30px) rotate(-179deg); transform: translateX(30px) translateY(30px) rotate(-179deg); } 50.1% { -webkit-transform: translateX(30px) translateY(30px) rotate(-180deg); transform: translateX(30px) translateY(30px) rotate(-180deg); } 75% { -webkit-transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @keyframes sk-wanderingCube { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 25% { -webkit-transform: translateX(30px) rotate(-90deg) scale(0.5); transform: translateX(30px) rotate(-90deg) scale(0.5); } 50% { /* Hack to make FF rotate in the right direction */ -webkit-transform: translateX(30px) translateY(30px) rotate(-179deg); transform: translateX(30px) translateY(30px) rotate(-179deg); } 50.1% { -webkit-transform: translateX(30px) translateY(30px) rotate(-180deg); transform: translateX(30px) translateY(30px) rotate(-180deg); } 75% { -webkit-transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } /* * Usage: * * */ .sk-spinner-pulse { width: 40px; height: 40px; margin: 40px auto; background-color: #333; border-radius: 100%; -webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out; animation: sk-pulseScaleOut 1s infinite ease-in-out; } @-webkit-keyframes sk-pulseScaleOut { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } @keyframes sk-pulseScaleOut { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } /* * Usage: *
* */ .sk-chasing-dots { margin: 40px auto; width: 40px; height: 40px; position: relative; text-align: center; -webkit-animation: sk-chasingDotsRotate 2s infinite linear; animation: sk-chasingDotsRotate 2s infinite linear; } .sk-chasing-dots .sk-child { width: 60%; height: 60%; display: inline-block; position: absolute; top: 0; background-color: #333; border-radius: 100%; -webkit-animation: sk-chasingDotsBounce 2s infinite ease-in-out; animation: sk-chasingDotsBounce 2s infinite ease-in-out; } .sk-chasing-dots .sk-dot2 { top: auto; bottom: 0; -webkit-animation-delay: -1s; animation-delay: -1s; } @-webkit-keyframes sk-chasingDotsRotate { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes sk-chasingDotsRotate { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes sk-chasingDotsBounce { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes sk-chasingDotsBounce { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); } } /* * Usage: *
* */ .sk-three-bounce { margin: 40px auto; width: 80px; text-align: center; } .sk-three-bounce .sk-child { width: 20px; height: 20px; background-color: #333; border-radius: 100%; display: inline-block; -webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; } .sk-three-bounce .sk-bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .sk-three-bounce .sk-bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes sk-three-bounce { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes sk-three-bounce { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } } /* * Usage: *
* */ .sk-circle { margin: 40px auto; width: 40px; height: 40px; position: relative; } .sk-circle .sk-child { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .sk-circle .sk-child:before { content: ''; display: block; margin: 0 auto; width: 15%; height: 15%; background-color: #333; border-radius: 100%; -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; } .sk-circle .sk-circle2 { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); } .sk-circle .sk-circle3 { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); } .sk-circle .sk-circle4 { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .sk-circle .sk-circle5 { -webkit-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg); } .sk-circle .sk-circle6 { -webkit-transform: rotate(150deg); -ms-transform: rotate(150deg); transform: rotate(150deg); } .sk-circle .sk-circle7 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .sk-circle .sk-circle8 { -webkit-transform: rotate(210deg); -ms-transform: rotate(210deg); transform: rotate(210deg); } .sk-circle .sk-circle9 { -webkit-transform: rotate(240deg); -ms-transform: rotate(240deg); transform: rotate(240deg); } .sk-circle .sk-circle10 { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .sk-circle .sk-circle11 { -webkit-transform: rotate(300deg); -ms-transform: rotate(300deg); transform: rotate(300deg); } .sk-circle .sk-circle12 { -webkit-transform: rotate(330deg); -ms-transform: rotate(330deg); transform: rotate(330deg); } .sk-circle .sk-circle2:before { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .sk-circle .sk-circle3:before { -webkit-animation-delay: -1s; animation-delay: -1s; } .sk-circle .sk-circle4:before { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .sk-circle .sk-circle5:before { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .sk-circle .sk-circle6:before { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .sk-circle .sk-circle7:before { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .sk-circle .sk-circle8:before { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .sk-circle .sk-circle9:before { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .sk-circle .sk-circle10:before { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .sk-circle .sk-circle11:before { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .sk-circle .sk-circle12:before { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } @-webkit-keyframes sk-circleBounceDelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes sk-circleBounceDelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } } /* * Usage: *
* */ .sk-cube-grid { width: 40px; height: 40px; margin: 40px auto; /* * Spinner positions * 1 2 3 * 4 5 6 * 7 8 9 */ } .sk-cube-grid .sk-cube { width: 33.33%; height: 33.33%; background-color: #333; float: left; -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; } .sk-cube-grid .sk-cube1 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .sk-cube-grid .sk-cube2 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .sk-cube-grid .sk-cube3 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .sk-cube-grid .sk-cube4 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .sk-cube-grid .sk-cube5 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .sk-cube-grid .sk-cube6 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .sk-cube-grid .sk-cube7 { -webkit-animation-delay: 0.0s; animation-delay: 0.0s; } .sk-cube-grid .sk-cube8 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .sk-cube-grid .sk-cube9 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } @-webkit-keyframes sk-cubeGridScaleDelay { 0%, 70%, 100% { -webkit-transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1); } 35% { -webkit-transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1); } } @keyframes sk-cubeGridScaleDelay { 0%, 70%, 100% { -webkit-transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1); } 35% { -webkit-transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1); } } /* * Usage: *
* */ .sk-fading-circle { margin: 40px auto; width: 40px; height: 40px; position: relative; } .sk-fading-circle .sk-circle { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .sk-fading-circle .sk-circle:before { content: ''; display: block; margin: 0 auto; width: 15%; height: 15%; background-color: #333; border-radius: 100%; -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; } .sk-fading-circle .sk-circle2 { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); } .sk-fading-circle .sk-circle3 { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); } .sk-fading-circle .sk-circle4 { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .sk-fading-circle .sk-circle5 { -webkit-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg); } .sk-fading-circle .sk-circle6 { -webkit-transform: rotate(150deg); -ms-transform: rotate(150deg); transform: rotate(150deg); } .sk-fading-circle .sk-circle7 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .sk-fading-circle .sk-circle8 { -webkit-transform: rotate(210deg); -ms-transform: rotate(210deg); transform: rotate(210deg); } .sk-fading-circle .sk-circle9 { -webkit-transform: rotate(240deg); -ms-transform: rotate(240deg); transform: rotate(240deg); } .sk-fading-circle .sk-circle10 { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .sk-fading-circle .sk-circle11 { -webkit-transform: rotate(300deg); -ms-transform: rotate(300deg); transform: rotate(300deg); } .sk-fading-circle .sk-circle12 { -webkit-transform: rotate(330deg); -ms-transform: rotate(330deg); transform: rotate(330deg); } .sk-fading-circle .sk-circle2:before { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .sk-fading-circle .sk-circle3:before { -webkit-animation-delay: -1s; animation-delay: -1s; } .sk-fading-circle .sk-circle4:before { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .sk-fading-circle .sk-circle5:before { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .sk-fading-circle .sk-circle6:before { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .sk-fading-circle .sk-circle7:before { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .sk-fading-circle .sk-circle8:before { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .sk-fading-circle .sk-circle9:before { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .sk-fading-circle .sk-circle10:before { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .sk-fading-circle .sk-circle11:before { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .sk-fading-circle .sk-circle12:before { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } @-webkit-keyframes sk-circleFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; } } @keyframes sk-circleFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; } } /* * Usage: *
* */ .sk-folding-cube { margin: 40px auto; width: 40px; height: 40px; position: relative; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } .sk-folding-cube .sk-cube { float: left; width: 50%; height: 50%; position: relative; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .sk-folding-cube .sk-cube:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #333; -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both; animation: sk-foldCubeAngle 2.4s infinite linear both; -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; } .sk-folding-cube .sk-cube2 { -webkit-transform: scale(1.1) rotateZ(90deg); transform: scale(1.1) rotateZ(90deg); } .sk-folding-cube .sk-cube3 { -webkit-transform: scale(1.1) rotateZ(180deg); transform: scale(1.1) rotateZ(180deg); } .sk-folding-cube .sk-cube4 { -webkit-transform: scale(1.1) rotateZ(270deg); transform: scale(1.1) rotateZ(270deg); } .sk-folding-cube .sk-cube2:before { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .sk-folding-cube .sk-cube3:before { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .sk-folding-cube .sk-cube4:before { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } @-webkit-keyframes sk-foldCubeAngle { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; } } @keyframes sk-foldCubeAngle { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; } }