/*
Theme Name:Social Machines
Description:Social Machines Child Theme
Author:Silky Ocean Studios
Author URI:http://www.silkyoceanstudios.com
Template:twentyseventeen
Version:1.4.999
License:GNU General Public License v2 or later
License URI:http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Typography */

@font-face { font-family: 'AvenirNextLTPro-Regular'; src: url('/wp-content/uploads/fonts/AvenirNextLTPro-Regular.woff2') format('WOFF2'), url('/wp-content/uploads/fonts/AvenirNextLTPro-Regular.otf') format('oft'); }
@font-face { font-family: 'AvenirNextLTPro-Italic'; src: url('/wp-content/uploads/fonts/AvenirNextLTPro-It.woff2') format('WOFF2'), url('/wp-content/uploads/fonts/AvenirNextLTPro-It.otf') format('oft'); }
@font-face { font-family: 'AvenirNextLTPro-Bold'; src: url('/wp-content/uploads/fonts/AvenirNextLTPro-Bold.woff2') format('WOFF2'), url('/wp-content/uploads/fonts/AvenirNextLTPro-Bold.otf') format('oft'); }

body { font-family: "AvenirNextLTPro-Regular", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; line-height: 1.7; color: #000; background-color: #fff; }

hr { box-sizing: content-box; height: 0; overflow: visible; width: 100%; margin-top: 1rem; margin-bottom: 1rem; border-top: 1px solid rgba(0,0,0); }
p { margin-top: 0; margin-bottom: 1rem; }

img { display: inline-block; max-width: 100%; height: auto; vertical-align: top; }

a { color: #fabd00; text-decoration: none; }
a:hover { color: #feda14; text-decoration: none; }


h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin-bottom: 1rem; font-family: "AvenirNextLTPro-Regular", sans-serif; font-weight: 300; line-height: 1.2; color: inherit; }
.h1, h1 { font-size: 2.6rem; }
.h2, h2 { font-size: 1.438rem; }
.h3, h3 { font-size: 1.313em; }
.h4, h4 { font-size: 1.6rem; }
.h5, h5 { font-size: 1.188rem; }
.h6, h6 { font-size: 1.125rem; }
.text-lead { font-size: 1.188rem; }

@media (min-width:576px) {
    .h1, h1 { font-size: 2rem; }
    .h2, h2 { font-size: 1.563rem; }
    .h3, h3 { font-size: 1.438rem; }
    .h4, h4 { font-size: 1.250rem; }
    .h5, h5 { font-size: 1.188rem; }
    .h6, h6 { font-size: 1.188rem; }
    .text-lead { font-size: 1.7188rem; }
}

@media (min-width:768px) {
    .h1, h1 { font-size: 2.500rem; }
    .h2, h2 { font-size: 1.688rem; }
    .h3, h3 { font-size: 1.500rem; }
    .h4, h4 { font-size: 1.250rem; }
    .h5, h5 { font-size: 1.188rem; }
    .h6, h6 { font-size: 1.125rem; }
    .text-lead { font-size: 1.125rem; }
}

@media (min-width:992px) {
    .h1, h1 { font-size: 3.000rem; }
    .h2, h2 { font-size: 1.875rem; }
    .h3, h3 { font-size: 1.500rem; }
    .h4, h4 { font-size: 1.313rem; }
    .h5, h5 { font-size: 1.188rem; }
    .h6, h6 { font-size: 1.125rem; }
    .text-lead { font-size: 1.500rem; }
}

@media (min-width:1200px) {
    .h1, h1 { font-size: 4.25rem; }
    .h2, h2 { font-size: 2.000rem; }
    .h3, h3 { font-size: 1.500rem; }
    .h4, h4 { font-size: 1.313rem; }
    .h5, h5 { font-size: 1.188rem; }
    .h6, h6 { font-size: 1.125rem; }
    .text-lead { font-size: 1.75rem; }
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a { color: inherit; }
.small { font-size: 0.750rem; }

.text-muted { --bs-text-opacity: 1; color: rgb(145 145 145 / 75%) !important; }


/* Nav */
.navbar { padding: 0; }
.navbar-dark .navbar-nav .nav-item { padding: 0 1.5rem; border-bottom: 1px solid #ffffff29; width: 100%; }
.navbar-dark .navbar-nav .nav-link { color: #fff; position: relative; letter-spacing: 1px; font-size: 1.8rem; font-weight: 400; text-transform: capitalize; padding: 1.5rem 0; }
.navbar-dark .navbar-nav .nav-link:before { background: #fabd3b; bottom: 0; content: ""; display: block; height: 2px; left: 50%; position: absolute; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0; transform: none; }
.navbar-dark .navbar-nav .nav-link:hover:before { width: 100%; left: 0; }

.hexagon-wrapper svg.bi.bi-list { position: absolute; right: 22%; top: 20%; }

.navbar-toggler:focus { text-decoration: none; outline: 0; box-shadow: 0 0 0 transparent; }

.navbar-toggler { border: 0px solid transparent; }

@media (min-width:992px) {
    .navbar-brand img { width: 250px; }
    .navbar-dark .navbar-nav .nav-item { padding: 0 1.5rem; border: 0; }
    .navbar-dark .navbar-nav .nav-link { color: #fff; position: relative; letter-spacing: 1px; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; padding: 0.5rem 0; }
}

@media (min-width:1200px) {
    .navbar-brand img { width: 220px; }
}

.offcanvas { z-index: 2020; }

.bg-white-hex { background: url(/wp-content/uploads/2024/09/hex-white-bg.jpg) 50% 50% no-repeat; background-size: cover; }
.bg-grey .text-black.sub-heading { color: #fff; }

.header-top { background-color: #fff; vertical-align: middle; font-size: 0.9em; text-align: center; }
.header { background-color: #1A1A1A; }

.footer { background-color: #1A1A1A; color: #fff; padding: 2rem; }
.footer a { color: #fff; font-weight: 300; font-size: 0.875rem; }

@media (min-width: 1600px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1520px; }
}

.header { z-index: 2010; }
.modal { z-index: 2020; }
.offcanvas { z-index: 2030; }

.bg-black { color: #fff; background: #000; }
.bg-light { background-color: #f5f5f5 !important; }
.bg-grey { background: #1A1A1A; color: #fff; }

.bg-black a { color: #fff; }
.bg-black a:hover { color: #fabd00; }

@media (min-width:576px) {
    .single-post .entry-title { font-size: 2.5rem; }
}

.single-post .entry-content a { color:#fabd00; text-decoration:underline }
.single-post .entry-content a:hover { color:#ffffff; text-decoration:underline }

.py-6 { padding-top: 8rem; padding-bottom: 8rem; }
.pt-6 { padding-top: 8rem; }
.pb-6 { padding-bottom: 8rem; }

.my-6 { margin-top: 8rem; margin-bottom: 8rem; }
.mt-6 { margin-top: 8rem; }
.mb-6 { margin-bottom: 8rem; }


/*TABS*/
.nav-pills .nav-link { display: block; padding:1.5rem; font-weight: 700; color: rgba(0,0,0,0.5); text-transform: uppercase; text-decoration: none; background: #ffffff; border: 0; border-bottom:5px solid rgba(0,0,0,0.5); transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out; }

.bg-black .nav-pills .nav-link { background: transparent; color: #ffffff; }

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link { color: #000000; background: #ffffff; border-bottom:5px solid #000000; -webkit-transition: .6s ease-out; transition: .6s ease-out; }

.nav-pills .nav-link.first { padding-left:0; }
.nav-pills .nav-link.last { padding-right:0; }

.bg-black .nav-pills .nav-link.active,
.bg-black .nav-pills .show > .nav-link { color: #fabd3b; background: transparent; border-bottom: 5px solid #fabd3b; }

.nav-pills-vertical .nav-link { padding: 1rem 0; text-align: left; color: #ffffff; font-weight: 400; text-transform: initial; background: transparent; border-bottom: 1px solid #fabd3b; transition: box-shadow .25s ease-in-out }
.nav-pills-vertical .nav-link.active { color: #fabd3b; background: transparent; border-bottom: 1px solid #fabd3b !important; box-shadow: 0 5px 0 #fabd3b; }

.nav-pills .nav-link { border-radius: 0; }

.accordion-button { background: transparent !important; }

.accordion { border-top: 1px solid #fabd3b; border-bottom: 1px solid #fabd3b }
.accordion-item:not(:last-child) { background: #1A1A1A !important; color: #fff !important; border-bottom: 1px solid #fabd3b; }
.accordion-button { cursor: pointer; }
.accordion-button:not(.collapsed) { background: transparent !important; color: #fff !important; box-shadow: none !important; }
.accordion-button:not(.collapsed)::after, .accordion-button::after { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fabd3b' stroke-linecap='round' stroke-linejoin='round'><path d='M2 5L8 11L14 5'/></svg>"); }

.consistent-height .tab-content { display: flex; }

.consistent-height .tab-content > .tab-pane { display: block; /* undo "display: none;" */ visibility: hidden; margin-right: -100%; width: 100%; }

.consistent-height .tab-content > .active { visibility: visible; }

/*
div#v-pills-tab button { text-align: left; background: transparent; color: #fff; border-bottom: 1px solid #fabd3b;  padding: 1rem 0; font-weight: 400; font-size: 1.1rem; text-transform: capitalize;}*/

/*.bg-black .nav-pills .nav-link.active, .nav-pills .show>.nav-link, .bg-black .nav-pills .nav-link { background: transparent; color: #fff;}*/


.bg-white-hex .accordion { border-top: 1px solid #000; border-bottom: 1px solid #000; }
.bg-white-hex .accordion-item { background: transparent !important; color: #000 !important; border-bottom: 1px solid #000; }
.bg-white-hex .accordion-item:not(:last-child) { background: transparent !important; color: #000 !important; border-bottom: 1px solid #000; }
.bg-white-hex .accordion-button:not(.collapsed) { background: transparent !important; color: #000 !important; box-shadow: none !important; }
.bg-white-hex .accordion-button:not(.collapsed)::after, .bg-white-hex .accordion-button::after { background-image: none; }
.bg-white-hex .accordion-button { position: relative; display: inline-block; align-items: center; width: 100%; padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x); font-size: 1rem; color: var(--bs-accordion-btn-color); text-align: left; background-color: var(--bs-accordion-btn-bg); border: 0; border-radius: 0; overflow-anchor: none; transition: var(--bs-accordion-transition); }

/* Hexagonal Shape */
.hexagon-wrapper { display: inline-block; position: relative; width: 50px; height: 50px; }
.hexagon { --b: 1px; height: 50px; /* adjust to control the size  */ aspect-ratio: cos(30deg); clip-path: polygon( 50% 0, -50% 50%, 50% 100%, 150% 50%, 50% 0, 50% var(--b), calc(100% - var(--b) * sin(60deg)) calc(25% + var(--b) * cos(60deg)), calc(100% - var(--b) * sin(60deg)) calc(75% - var(--b) * cos(60deg)), 50% calc(100% - var(--b)), calc(var(--b) * sin(60deg)) calc(75% - var(--b) * cos(60deg)), calc(var(--b) * sin(60deg)) calc(25% + var(--b) * cos(60deg)), 50% var(--b) ); background: #fff; position: absolute; z-index: 1; left: 50%; transform: translateX(-50%); }



.chevron-up { display: block; position: absolute; left: 50%; transform: translateX(-50%) translateY(18px); top: 0; --s: 1px; width: 30px; aspect-ratio: 8/3; clip-path: polygon( 0 100%, 0 calc(100% - var(--s)), 50% 0, 100% calc(100% - var(--s)), 100% 100%, 50% var(--s) ); background: #fff; transition: transform 0.25s ease-in-out; }
.chevron-down { display: block; position: absolute; left: 50%; transform: translateX(-50%) translateY(22px) rotate(180deg); top: 0; --s: 1px; width: 30px; aspect-ratio: 8/3; clip-path: polygon( 0 100%, 0 calc(100% - var(--s)), 50% 0, 100% calc(100% - var(--s)), 100% 100%, 50% var(--s) ); background: #fff; transition: transform 0.25s ease-in-out; }

.hexagon-wrapper:hover .chevron-up { transform: translateX(-50%) translateY(8px); }
.hexagon-wrapper:hover .chevron-down { transform: translateX(-50%) translateY(32px) rotate(180deg); }

.cross { display: block; position: absolute; left: 45%; transform: translateX(-50%) translateY(18px) rotate(0deg); top: -3px; --b: 1.5px; /* thickness */ --s: 35px; /* space around */ --c: #000; height: 100px; aspect-ratio: 1; box-sizing: border-box; --g: conic-gradient(var(--c) 0 0) no-repeat 50%/; background: var(--g) var(--b) calc(100% - 2*var(--s)), var(--g) calc(100% - 2*var(--s)) var(--b); rotate: 45deg; }

.modal-header .hexagon { background: #000; --b: 2px; }
.modal-header { display: inline-block; }

.modal-header .hexagon-landscape { --b: 1px; height: 50px; aspect-ratio: cos(30deg); clip-path: polygon(50% 0, -50% 50%, 50% 100%, 150% 50%, 50% 0, 50% var(--b), calc(100% - var(--b)* sin(60deg)) calc(25% + var(--b)* cos(60deg)), calc(100% - var(--b)* sin(60deg)) calc(75% - var(--b)* cos(60deg)), 50% calc(100% - var(--b)), calc(var(--b)* sin(60deg)) calc(75% - var(--b)* cos(60deg)), calc(var(--b)* sin(60deg)) calc(25% + var(--b)* cos(60deg)), 50% var(--b)); background: #000; position: absolute; z-index: 1; left: 50%; transform: translateX(-50%) translateY(0) rotate(90deg); }

.modal-header .chevron-left { display: block; position: absolute; left: 50%; transform: translateX(-65%) translateY(-17px); top: 0; --s: 1px; width: 30px; aspect-ratio: 8 / 3; clip-path: polygon(0 100%, 0 calc(100% - var(--s)), 50% 0, 100% calc(100% - var(--s)), 100% 100%, 50% var(--s)); background: #000; transition: transform 0.25s ease-in-out; rotate: 270deg; }
.modal-header .chevron-right { display: block; position: absolute; left: 50%; transform: translateX(65%) translateY(14px); top: 0; --s: 1px; width: 30px; aspect-ratio: 8 / 3; clip-path: polygon(0 100%, 0 calc(100% - var(--s)), 50% 0, 100% calc(100% - var(--s)), 100% 100%, 50% var(--s)); background: #000; transition: transform 0.25s ease-in-out; rotate: 90deg; }

.hexagon-wrapper:hover .chevron-left { display: block; position: absolute; left: 50%; transform: translateX(-65%) translateY(-25px); top: 0; --s: 1px; width: 30px; aspect-ratio: 8 / 3; clip-path: polygon(0 100%, 0 calc(100% - var(--s)), 50% 0, 100% calc(100% - var(--s)), 100% 100%, 50% var(--s)); background: #000; transition: transform 0.25s ease-in-out; rotate: 270deg; }
.hexagon-wrapper:hover .chevron-right { display: block; position: absolute; left: 50%; transform: translateX(65%) translateY(5px); top: 0; --s: 1px; width: 30px; aspect-ratio: 8 / 3; clip-path: polygon(0 100%, 0 calc(100% - var(--s)), 50% 0, 100% calc(100% - var(--s)), 100% 100%, 50% var(--s)); background: #000; transition: transform 0.25s ease-in-out; rotate: 90deg; }




/*Modal close button*/
.modal-hexagon-wrapper .hexagon { --b: 2px; height: 50px; aspect-ratio: cos(30deg); clip-path: polygon(50% 0, -50% 50%, 50% 100%, 150% 50%, 50% 0, 50% var(--b), calc(100% - var(--b)* sin(60deg)) calc(25% + var(--b)* cos(60deg)), calc(100% - var(--b)* sin(60deg)) calc(75% - var(--b)* cos(60deg)), 50% calc(100% - var(--b)), calc(var(--b)* sin(60deg)) calc(75% - var(--b)* cos(60deg)), calc(var(--b)* sin(60deg)) calc(25% + var(--b)* cos(60deg)), 50% var(--b)); background: #000; position: absolute; z-index: 1; left: 0; transform-origin: center; transition: all 0.35s ease-in-out; display: inline-block; transform: rotate(0deg); transform-origin: center; margin: 0; padding: 0; }

.modal-hexagon-wrapper:hover .hexagon { transform: rotate(45deg); transform-origin: center; display: inline-block; transform: rotate(90deg); }

.hexagon-wrapper:hover .cross { background: url(/wp-content/uploads/2024/11/bee-black.png) 50% 50% no-repeat; opacity: 1; animation-name: fadeInOpacity; animation-iteration-count: 1; animation-timing-function: ease-in; animation-duration: .5s; rotate: 0deg; transform: translateX(-48%) translateY(-24px); }

@keyframes fadeInOpacity {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.modal-header .btn-close { --bs-btn-close-bg: none; width: 3em; height: 3em; }

.js-hero-scroll a { height: 64px; width: 40px; border-radius: 40px; position: absolute; bottom: 0; left: 50%; z-index: 4; -webkit-transform: translate(-50%); transform: translate(-50%); color: #fff; transition: opacity .3s; display: block; }

/* Form */
.form-group { position: relative; }
.form-group + .form-group { margin-top: 1.5rem; }
.form-label { position: absolute; font-size: 2.5rem; font-weight: 300; left: 0; top: 0; color: #ffffff; background-color: transparent; z-index: 10; transition: transform 250ms ease-out, font-size 250ms ease-out; }
.focused .form-label { font-size: 0.75rem; }
.form-control { color: #ffffff; position: relative; padding: 2rem 0 0.5rem 0; width: 100%; outline: 0; border: 0; box-shadow: 0 2px 0 0 #ffffff; transition: box-shadow 250ms ease-out; background: transparent; border-radius: 0; }
.form-control:focus { box-shadow: 0 6px 0 0 #fabd00; color: #ffffff; background-color: transparent; }
.form-control.filled { box-shadow: 0 2px 0 0 #fabd00; }

input.form-control:hover, textarea.form-control:hover { box-shadow: 0 6px 0 0 #e6ae00; }


.bg-white-hex .form-label { color: #000;  }
.bg-white-hex .form-control { color: #000; box-shadow: 0 2px 0 0 #000; }
.bg-white-hex .form-control:focus { box-shadow: 0 6px 0 0 #fabd00; color: #000; background-color: transparent; }


.button { cursor: pointer; position: relative; display: block; background: transparent; width: 276px; height: 68px; border: 0; line-height: 68px; text-align: center; font-size: 1rem; font-weight: 700; text-decoration: none; text-transform: uppercase; color: #fabd00; transition: all 0.5s ease-in-out; }
.button input { cursor: pointer; width: 276px; height: 68px; border: 0; background: none; color: #fabd00; text-transform: uppercase; font-size: 1.5rem; line-height: 1; padding: 0; margin: 0; display: block; font-weight: 800; transition: all 0.5s ease-in-out; }
.button:before,
.button:after { position: absolute; content: ''; width: 260px; left: 8px; height: 34px; transition: all 0.5s ease-in-out; }

.button:before { transform: perspective(15px) rotateX(3deg); }
.button:after { top: 36px; transform: perspective(15px) rotateX(-3deg); }

input[type="checkbox"] { width: 15px; height: 15px; }
.wpcf7-list-item { display: inline-flex; margin: 2rem 2rem 0 0; }

.modal-header .btn-close { display: flex; color: #fff; }
.modal-content { border-radius: 0; }

.modal-header { border-bottom: 0; }

/* Button Border Style */
.button.hex-border:before,
.button.hex-border:after { border: 2px solid #ffffff; }
.button.hex-border:before { border-bottom: none; }
.button.hex-border:after { border-top: none; }

/* Button hover styles */
.button.hex-border:hover { color: #fff; }

/* Button full Style */
.button.hex-full:before,
.button.hex-full:after { border: 2px solid #000000; background: #000000; z-index: 1; }
.button.hex-full span { position: relative; z-index: 2; }
.button.hex-full:before { border-bottom: none; }
.button.hex-full:after { border-top: none; }

/* Button hover styles */
.button.hex-full:hover, .button.hex-border:hover { color: #fabd00; }

.button.hex-full:hover:before, .button.hex-full:hover:after, .button.hex-border:hover:before, .button.hex-border:hover:after { background: #fff; }
.button.hex-full p, .button.hex-border p { color: #fabd00; z-index: 9; position: absolute; }

/* *********
* OLD CSS?
* ********* */

span.number { color: #ffc038; font-size: 3rem; font-weight: bold; }
span.project-title { color: #ffc038; }

.project-box { background: #fff; padding: 3rem; border-radius: 50px; box-shadow: 0px 0px 14px 5px #0000001a; }
.project-box-content { background: #fff; padding: 2rem; }
.project-box img { margin: 0 auto; display: flex; padding: 1rem; width: 100%; }
.project-box h3 { text-align: center; }

a.project-hover { color: #000; }
a.project-hover:hover { box-shadow: 0px 0px 8px 8px #2323233b; width: 100%; height: 100%; display: block; border-radius: 50px; transition: 0.3s cubic-bezier(0, 0, 0.2, 1); background: #2323233b; }

.whatwedo-img img { display: flex; align-items: center; margin: 0 auto; width: 70%; }

@media screen and (min-width:992px) {
    .project-box img { width: 40%; }
}

.text-primary { color: #FFDF4C !important; }
.text-muted { color: #fff6; }
.widget-area ul { padding-left: 0; list-style: none; }

.widget-title { font-size: 1.5rem; margin-top: 1rem; }

.text-yellow.sub-heading { color: #fabd3b; text-transform: uppercase; letter-spacing: 1.5px; font-family: "AvenirNextLTPro-Bold", sans-serif; }
.text-black.sub-heading { color: #000; text-transform: uppercase; letter-spacing: 1.5px; font-family: "AvenirNextLTPro-Bold", sans-serif; }


/* Buttons */
.btn { text-transform: uppercase; font-weight: 600; font-size: 1.8rem; letter-spacing: 0.125rem; border-radius: 0; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; padding: .75rem 1.75rem; }
.btn:hover, .btn:focus { text-decoration: none; }
.btn-primary { color: #fff; background-color: #fabd00; border-color: #fabd00; }
.btn-primary:hover { color: #fff; background-color: #feda14; border-color: #feda14; }
.btn-secondary { color: #fff; background-color: #feda14; border-color: #feda14; }
.btn-secondary:hover { color: #fff; background-color: #fabd00; border-color: #fabd00; }
.btn-outline-primary { color: #fabd00; background-color: transparent; background-image: none; border-color: #fabd00; }
.btn-outline-primary:hover { color: #fff; background-color: #feda14; border-color: #feda14; }
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle { color: #fff; background-color: #fabd00; border-color: #fabd00; }
.btn-primary:hover { color: #fff; background-color: #feda14; border-color: #feda14; }
.btn-primary.focus, .btn-primary:focus { color: #fff; background-color: #feda14; border-color: #feda14; box-shadow: 0 0 0 0.2rem transparent; }

.btn-outline-light { color: #fabd3b; border-color: #f8f9fa; }

/* Carousel */
.carousel-item:before { display: block; content: ""; background-color: rgba(0, 0, 0, 0.1); position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; }

@media (max-width:992px) {
    .carousel-item { height: 80vh; object-fit: cover; background-position: center !important; }
}

.carousel-item .img-fluid { width: 100%; height: 100%; object-fit: cover; }

/* Post */

ul.post-categories { list-style: none; padding-left: 0; font-size: 1.2rem; }
.entry-footer { display: none; }
.entry-header ul { padding-left: 0; list-style: none; display: inline-block; }
.entry-content { padding: 2rem 0; margin: 0; }
.link-more, .post-template-default .hero, span.byline, div#comments, .blog .entry-meta, a.more-link { display: none; }
article svg.icon { display: none; }


.border-up-down { border-top: 1px solid #000; border-bottom: 1px solid #000; }

#category-posts-2-internal .cat-post-item { list-style: disc !important; list-style-type: disc !important; margin: 0; color: #6d6868; padding: 3px 0; border-bottom: 1px solid #dadada; }

ul#category-posts-2-internal { padding-left: 1rem; }

.blog article { width: 100%; display: inline-block; vertical-align: top; border: none; background: transparent; }

.masonry-grid .grid-sizer,
.masonry-grid .card-post { width: 100%; }
.gutter-sizer { width: 0; }

@media screen and (min-width:480px) {
    .masonry-grid .grid-sizer,
    .masonry-grid .card-post { width: 48%; }
    .gutter-sizer { width: 2%; }
}

@media screen and (min-width:768px) {
    .masonry-grid .grid-sizer,
    .masonry-grid .card-post { width: 32%; }
    .gutter-sizer { width: 2%; }
}

.masonry-grid { margin-top: 1rem; }

.card-post { margin-bottom: 1.25rem; -webkit-box-shadow: none; box-shadow: none; }

img.attachment-twentyseventeen-featured-image.size-twentyseventeen-featured-image.wp-post-image { width: 100%; height: height: 100%; }

time.updated { display: none; }

.wp-show-posts-inner { background: #f5f5f5; padding: 1rem; height: 100$; }

/* hero */
.hero-header { background-color: #e9e9e9; }
.hero { background-size: cover; width: 100%; padding: 0rem; background-position: top; }
.hero.bg-black { color: #fff; padding: 0; min-height: 88vh; height: 88vh; }
.hero-content { width: 100%; max-width: 1480px; z-index: 2; }

.hero.hero-academy { background: url(/wp-content/uploads/2024/10/Academy-hero.jpg) 50% 50% no-repeat; background-position: top; color: #fff; padding: 0; min-height: 100vh; height: 100vh; }
.hero.hero-careers { background: url(/wp-content/uploads/2024/10/careers-hero.jpg) 50% 50% no-repeat; background-position: top; color: #fff; padding: 0; min-height: 100vh; height: 100vh; }
.hero.hero-blog { background: url(/wp-content/uploads/2024/10/insights-hero.jpg) 50% 50% no-repeat; background-size: cover; width: 100%; padding: 0rem; background-position: top; color: #fff; padding: 0; min-height: 100vh; height: 100vh; }

.hero.yellow-bg { background: url(/wp-content/uploads/2023/04/What-we-do-Hex-Background.png) 50% 50% no-repeat; background-size: cover; width: 100%; background-position: top; background-color: #FABD3B; color: #fff; }
.hero.white-bg { background: url(/wp-content/uploads/2023/04/Example-Projects-Hex-Background.png) 50% 50% no-repeat; background-size: cover; width: 100%; background-position: top; background-color: #F5F5F5; }

@media screen and (min-width:992px) {
    .hero { background-size: cover; width: 100%; padding: 3rem; background-position: top; }
    .hero.yellow-bg { background-attachment: fixed; }
    .hero.white-bg { background-attachment: fixed; }
}

@media screen and (min-width:992px) {
    .hero-content { width: 100%; max-width: 1480px; z-index: 2; }
}

/* Card */
.card { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #f1f1f1; background-clip: border-box; border: 0px solid rgba(0,0,0,.125); border-radius: 0rem; }
.card-img-top { width: 100%; height: auto; }

/* Recaptcha */
.grecaptcha-badge { display: none !important; }


/* Hover Effects */
figure { width: 100%; height: auto; margin: 0; padding: 1rem; background: transparent; overflow: visible; }
figure:hover + span { bottom: -36px; opacity: 1; }



/* Zoom In #1 */
.hover01 figure img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
.hover01 figure:hover img { -webkit-transform: scale(1.3); transform: scale(1.2); }

/* Fade in scroll */
.reveal { position: relative; transform: translateY(150px); opacity: 0; transition: 1s all ease; }
.reveal.active { transform: translateY(0); opacity: 1; }
.reveal2 { position: relative; transform: translateY(150px); opacity: 0; transition: 1.2s all ease; }
.reveal2.active { transform: translateY(0); opacity: 1; }
.reveal3 { position: relative; transform: translateY(150px); opacity: 0; transition: 1.4s all ease; }
.reveal3.active { transform: translateY(0); opacity: 1; }

.fade-in { opacity: 1; animation-name: fadeInOpacity; animation-iteration-count: 1; animation-timing-function: ease-in; animation-duration: 1s; }


@keyframes fadeInOpacity {
    0% { opacity: 0; }
    100% { opacity: 1; }
}


/* Team hexagon Row */

.hex-team-justin { background: url(/wp-content/uploads/2024/10/justin-hex.png) 50% 50% no-repeat; width: 100%; height: 100%; background-size: contain; }
.hex-team-justin:hover { background: url(/wp-content/uploads/2024/10/justin-hex-hover.png) 50% 50% no-repeat; width: 100%; height: 100%; background-size: contain; transition: 0.2s ease-in; }
.hex-team-nick { background: url(/wp-content/uploads/2024/10/nick-hex.png) 50% 50% no-repeat; width: 100%; height: 100%; background-size: contain; }
.hex-team-nick:hover { background: url(/wp-content/uploads/2024/10/nick-hex-hover.png) 50% 50% no-repeat; width: 100%; height: 100%; background-size: contain; transition: 0.2s ease-in; }
.hex-team-emma { background: url(/wp-content/uploads/2024/10/emma-hex.png) 50% 50% no-repeat; width: 100%; height: 100%; background-size: contain; }
.hex-team-emma:hover { background: url(/wp-content/uploads/2024/10/emma-hex-hover.png) 50% 50% no-repeat; width: 100%; height: 100%; background-size: contain; transition: 0.2s ease-in; }
.hex-team-sharon { background: url(/wp-content/uploads/2024/10/Sharon-hex.png) 50% 50% no-repeat; width: 100%; height: 100%; background-size: contain; }
.hex-team-sharon:hover { background: url(/wp-content/uploads/2024/10/Sharon-hex-hover.png) 50% 50% no-repeat; width: 100%; height: 100%; background-size: contain; transition: 0.2s ease-in; }
.hex-team-joeseph { background: url(/wp-content/uploads/2024/10/joeseph-hex.png) 50% 50% no-repeat; width: 100%; height: 100%; background-size: contain; }
.hex-team-joeseph:hover { background: url(/wp-content/uploads/2024/10/joeseph-hex-hover.png) 50% 50% no-repeat; width: 100%; height: 100%; background-size: contain; transition: 0.2s ease-in; }
.hex-team-manuel { background: url(/wp-content/uploads/2024/10/Manuel-hex.png) 50% 50% no-repeat; width: 100%; height: 100%; background-size: contain; }
.hex-team-manuel:hover { background: url(/wp-content/uploads/2024/10/Manuel-hex-hover.png) 50% 50% no-repeat; width: 100%; height: 100%; background-size: contain; transition: 0.2s ease-in; }
.hex-team-lily { background: url(/wp-content/uploads/2024/10/lily-hex.png) 50% 50% no-repeat; width: 100%; height: 100%; background-size: contain; }
.hex-team-lily:hover { background: url(/wp-content/uploads/2024/10/lily-hex-hover.png) 50% 50% no-repeat; width: 100%; height: 100%; background-size: contain; transition: 0.2s ease-in; }
.hex-team-midori { background: url(/wp-content/uploads/2024/10/Midori-hex.png) 50% 50% no-repeat; width: 100%; height: 100%; background-size: contain; }
.hex-team-midori:hover { background: url(/wp-content/uploads/2024/10/Midori-hex.-hoverpng.png) 50% 50% no-repeat; width: 100%; height: 100%; background-size: contain; transition: 0.2s ease-in; }
.hex-team-anupama { background: url(/wp-content/uploads/2024/10/Anupama-hex.png) 50% 50% no-repeat; width: 100%; height: 100%; background-size: contain; }
.hex-team-anupama:hover { background: url(/wp-content/uploads/2024/10/Anupama-hex-hover.png) 50% 50% no-repeat; width: 100%; height: 100%; background-size: contain; transition: 0.2s ease-in; }
.hex-team-ingrid { background: url(/wp-content/uploads/2024/10/Ingrid-Sommer-hex-1.png) 50% 50% no-repeat; width: 100%; height: 100%; background-size: contain; }
.hex-team-ingrid:hover { background: url(/wp-content/uploads/2024/10/Ingrid-Sommer-hex-hover-1.png) 50% 50% no-repeat; width: 100%; height: 100%; background-size: contain; transition: 0.2s ease-in; }

.team-row-1 { position: relative; }
.team-row-2 { position: relative; top: -22px; }
.team-row-3 { position: relative; top: -44px; }
.team-row-4 { position: relative; top: -65px; }

@media screen and (min-width:768px) {
    .team-row-1 { position: relative; }
    .team-row-2 { position: relative; top: -32px; }
    .team-row-3 { position: relative; top: -62px; }
    .team-row-4 { position: relative; top: -94px; }
}


@media screen and (min-width:992px) {
    .team-row-1 { position: relative; }
    .team-row-2 { position: relative; top: -42px; }
    .team-row-3 { position: relative; top: -82px; }
    .team-row-4 { position: relative; top: -122px; }
}


@media screen and (min-width:1200px) {
    .team-row-1 { position: relative; }
    .team-row-2 { position: relative; top: -50px; }
    .team-row-3 { position: relative; top: -98px; }
    .team-row-4 { position: relative; top: -148px; }
}

@media screen and (min-width:1400px) {
    .team-row-1 { position: relative; }
    .team-row-2 { position: relative; top: -56px; }
    .team-row-3 { position: relative; top: -112px; }
    .team-row-4 { position: relative; top: -168px; }
}


@media screen and (min-width:1600px) {
    .team-row-1 { position: relative; }
    .team-row-2 { position: relative; top: -65px; }
    .team-row-3 { position: relative; top: -130px; }
    .team-row-4 { position: relative; top: -195px; }
}


.hexrow, .hexrow2, .hexrow3, .hexrow4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(187px, 0fr)); justify-items: center; }

.hexrow { left: 184px; position: relative; }
.hexrow2 { left: 90px; position: relative; top: -40px; }
.hexrow3 { left: 184px; position: relative; top: -80px; }
.hexrow4 { left: 90px; position: relative; top: -120px; }

.hexrow > div, .hexrow2 > div, .hexrow3 > div, .hexrow4 > div { width: 100px; /* Keep this the same */ height: 173.2px; margin: 15px 0; /* Adjust margin for vertical layout */ position: relative; display: inline-block; background: #fabd3b; transform: rotate(90deg); }
.hexrow > div:nth-child(1), .hexrow > div:nth-child(2), .hexrow > div:nth-child(3), .hexrow > div:nth-child(4), .hexrow > div:nth-child(5), .hexrow > div:nth-child(6), .hexrow > div:nth-child(7), .hexrow > div:nth-child(8), .hexrow2 > div:nth-child(1), .hexrow2 > div:nth-child(2), .hexrow2 > div:nth-child(3), .hexrow2 > div:nth-child(4), .hexrow2 > div:nth-child(5), .hexrow2 > div:nth-child(6), .hexrow2 > div:nth-child(7), .hexrow2 > div:nth-child(8), .hexrow3 > div:nth-child(1), .hexrow3 > div:nth-child(2), .hexrow3 > div:nth-child(3), .hexrow3 > div:nth-child(4), .hexrow3 > div:nth-child(5), .hexrow3 > div:nth-child(6), .hexrow3 > div:nth-child(7), .hexrow3 > div:nth-child(8), .hexrow4 > div:nth-child(1), .hexrow4 > div:nth-child(2), .hexrow4 > div:nth-child(3), .hexrow4 > div:nth-child(4), .hexrow4 > div:nth-child(5), .hexrow4 > div:nth-child(6), .hexrow4 > div:nth-child(7), .hexrow4 > div:nth-child(8) { left: 0; }

.hexrow > div > div:first-of-type, .hexrow2 > div > div:first-of-type, .hexrow3 > div > div:first-of-type, .hexrow4 > div > div:first-of-type { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; overflow: hidden; background: #fabd3b; /*background-image: inherit;*/ -ms-transform: rotate(60deg); /* IE 9 */ -moz-transform: rotate(60deg); /* Firefox */ -webkit-transform: rotate(60deg); /* Safari and Chrome */ -o-transform: rotate(60deg); /* Opera */ transform: rotate(60deg); }

.hexrow > div > div:first-of-type:before, .hexrow2 > div > div:first-of-type:before, .hexrow3 > div > div:first-of-type:before, .hexrow4 > div > div:first-of-type:before { content: ''; position: absolute; width: 200px; /* width of main + margin sizing */ height: 100%; background: #fabd3b; /*background-image: inherit;*/ background-position: 0 0; background-repeat: no-repeat; background-size: auto 120%; bottom: 0; left: 0; z-index: 1; -ms-transform: rotate(-60deg) translate(-150px, 0); /* IE 9 */ -moz-transform: rotate(-60deg) translate(-150px, 0); /* Firefox */ -webkit-transform: rotate(-60deg) translate(-150px, 0); /* Safari and Chrome */ -o-transform: rotate(-60deg) translate(-150px, 0); /* Opera */ transform: rotate(-60deg) translate(-150px, 0); -ms-transform-origin: 0 0; /* IE 9 */ -webkit-transform-origin: 0 0; /* Safari and Chrome */ -moz-transform-origin: 0 0; /* Firefox */ -o-transform-origin: 0 0; /* Opera */ transform-origin: 0 0; }

.hexrow > div > div:last-of-type, .hexrow2 > div > div:last-of-type, .hexrow3 > div > div:last-of-type, .hexrow4 > div > div:last-of-type { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -2; overflow: hidden; background: #fabd3b; /*background-image: inherit;*/ -ms-transform: rotate(-60deg); /* IE 9 */ -moz-transform: rotate(-60deg); /* Firefox */ -webkit-transform: rotate(-60deg); /* Safari and Chrome */ -o-transform: rotate(-60deg); /* Opera */ transform: rotate(-60deg); }

.hexrow > div > div:last-of-type:before, .hexrow2 > div > div:last-of-type:before, .hexrow3 > div > div:last-of-type:before, .hexrow4 > div > div:last-of-type:before { content: ''; position: absolute; width: 200px; /* starting width + margin sizing */ height: 100%; background: #fabd3b; /*background-image: inherit;*/ background-position: 0 0; background-repeat: no-repeat; background-size: auto 120%; bottom: 0; left: 0; z-index: 1; /*translate properties are initial width (100px) and half height (173.2 / 2 = 86.6) */ -ms-transform: rotate(60deg) translate(100px, 86.6px); /* IE 9 */ -moz-transform: rotate(60deg) translate(100px, 86.6px); /* Firefox */ -webkit-transform: rotate(60deg) translate(100px, 86.6px); /* Safari and Chrome */ -o-transform: rotate(60deg) translate(100px, 86.6px); /* Opera */ transform: rotate(60deg) translate(100px, 86.6px); -ms-transform-origin: 100% 0; /* IE 9 */ -webkit-transform-origin: 100% 0; /* Safari and Chrome */ -moz-transform-origin: 100% 0; /* Firefox */ -o-transform-origin: 100% 0; /* Opera */ transform-origin: 100% 0; }

.hexrow > div > span, .hexrow2 > div > span, .hexrow3 > div > span, .hexrow4 > div > span { display: inline-block; margin: 0 -30px; line-height: 1.1; vertical-align: middle; white-space: normal; }

.hexrow:nth-child(2) > div:nth-child(1), .hexrow2:nth-child(2) > div:nth-child(1), .hexrow3:nth-child(2) > div:nth-child(1), .hexrow4:nth-child(2) > div:nth-child(1) { background: #fabd3b; /*background-image: url(http://i724.photobucket.com/albums/ww244/NBAchikk1995/flowers.jpg);*/ }

.hexrow:nth-child(2) > div:nth-child(1) > span, .hexrow2:nth-child(2) > div:nth-child(1) > span, .hexrow3:nth-child(2) > div:nth-child(1) > span, .hexrow4:nth-child(2) > div:nth-child(1) > span { /*change some other settings*/ margin: 0 -20px; color: black; font-size: .8em; font-weight: bold; }

.hexrow:nth-child(2) > div:nth-child(2), .hexrow2:nth-child(2) > div:nth-child(2), .hexrow3:nth-child(2) > div:nth-child(2), .hexrow4:nth-child(2) > div:nth-child(2) { background: #fabd3b; /*background-image: url(http://i197.photobucket.com/albums/aa231/sterling_red/landscape.jpg);*/ color: #ffffff; }

.hexrow:nth-child(2) > div:nth-child(3), .hexrow2:nth-child(2) > div:nth-child(3), .hexrow3:nth-child(2) > div:nth-child(3), .hexrow4:nth-child(2) > div:nth-child(3) { background: #fabd3b; /*background-image: url(http://i257.photobucket.com/albums/hh204/h22prld98/2157781306_7a7a8e4cf7.jpg);*/ color: #ffffff; }

.hexrow:nth-child(2) > div:nth-child(3) > div:before, .hexrow2:nth-child(2) > div:nth-child(3) > div:before, .hexrow3:nth-child(2) > div:nth-child(3) > div:before, .hexrow4:nth-child(2) > div:nth-child(3) > div:before { /* nothing special needed here */ }

.hexrow:nth-child(2) > div:nth-child(4), .hexrow2:nth-child(2) > div:nth-child(4), .hexrow3:nth-child(2) > div:nth-child(4), .hexrow4:nth-child(2) > div:nth-child(4) { background: #fabd3b; /*background-image: url(http://i916.photobucket.com/albums/ad8/paulak100/Obraz395.jpg);*/ /*you can shift a large background image, but it can get complicated
	best to keep the image as the total width (200px) and height (174px)
	that the hex would be.
	*/ background-position: -150px -20px; }

.hexrow:nth-child(2) > div:nth-child(4) > div:before, .hexrow2:nth-child(2) > div:nth-child(4) > div:before, .hexrow3:nth-child(2) > div:nth-child(4) > div:before, .hexrow4:nth-child(2) > div:nth-child(4) > div:before { background-position: -100px -20px; /* the left shift is always less in the pseudo elements by the amount of the base shift */ }

@media (max-width: 768px) {
    .hexrow > div, .hexrow2 > div, .hexrow3 > div, .hexrow4 > div { width: 80px; height: 138.6px; /* Adjust height proportionally */ margin: 10px 0; }
}

/* Expertise */

.expertise-img.human-factors { background: url(/wp-content/uploads/2024/10/AdobeStock_816868583.jpg) 50% 0 no-repeat; background-size: 100% auto; padding-top: 200px; }
.expertise-img.influence { background: url(/wp-content/uploads/2024/10/AdobeStock_759137983.jpg) 50% 0 no-repeat; background-size: 100% auto; padding-top: 200px; }
.expertise-img.resilience { background: url(/wp-content/uploads/2024/10/AdobeStock_496932695.jpg) 50% 0 no-repeat; background-size: 100% auto; padding-top: 250px; }
.expertise-img.technology { background: url(/wp-content/uploads/2024/10/AdobeStock_667063147.jpg) 50% 0 no-repeat; background-size: 100% auto; padding-top: 250px; }
.expertise-img.behaviour { background: url(/wp-content/uploads/2024/10/AdobeStock_489260710.jpg) 50% 0 no-repeat; background-size: 100% auto; padding-top: 250px; }

@media screen and (min-width:992px) {
    .expertise-img.human-factors { background: url(/wp-content/uploads/2024/10/AdobeStock_816868583.jpg) 70% 50% no-repeat; background-attachment: fixed; padding-top: 560px; background-size: auto; }
    .expertise-img.influence { background: url(/wp-content/uploads/2024/10/AdobeStock_759137983.jpg) 70% 50% no-repeat; background-attachment: fixed; padding-top: 560px; background-size: auto; }
    .expertise-img.resilience { background: url(/wp-content/uploads/2024/10/AdobeStock_496932695.jpg) 70% 50% no-repeat; background-attachment: fixed; padding-top: 560px; background-size: auto; }
    .expertise-img.technology { background: url(/wp-content/uploads/2024/10/AdobeStock_667063147.jpg) 70% 50% no-repeat; background-attachment: fixed; padding-top: 560px; background-size: auto; }
    .expertise-img.behaviour { background: url(/wp-content/uploads/2024/10/AdobeStock_489260710.jpg) 70% 50% no-repeat; background-attachment: fixed; padding-top: 560px; background-size: auto; }
}

/* Video */
video#myvideo { object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; z-index: 0; }

.embed-responsive-16by9::before { padding-top: 178.25%; }

@media screen and (min-width:768px) {
    .embed-responsive-16by9::before { padding-top: 56.25%; }
}

@media screen and (min-width:992px) {
    video#myvideo { object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; }
}

/* Wrap */

@media screen and (min-width:992px) {
    .wrap { display: flex; }

    .wrap > div { height: auto; width: 33%; flex: 1; -webkit-transition: flex .8s ease-in-out; transition: flex .8s ease-in-out; opacity: .5; }

    .wrap > div:hover { flex: 2; opacity: 1; }
}

.blog-portrait img { height: 500px; max-height: 500px; width: 100%; background-size: cover; object-fit: cover; }

/* Bee Expertise */

.bee { position: fixed; right: 0; bottom: 0; z-index: 9; padding: 3rem; }

:focus-visible { outline: transparent none 0 !important; }

/* Hexagon Animation Accordions */
.section { position: relative; height: auto; width: 100%; }
.svg-container { width: 100%; height: 100%; overflow: hidden; }
.animation-svg { position: absolute; top: 0; bottom: 0; left: -5%; right: 0; margin: auto; }

@media screen and (min-width:992px) {
    .animation-svg { position: absolute; top: 0; bottom: 0; left: 80%; right: 0; margin: auto; }
}

.animation-svg .line,
.animation-svg circle,
.animation-svg ellipse { opacity: 0; }
.animation-svg .cls-1 { stroke-miterlimit: 4; stroke-width: 1px; }
.animation-svg .cls-1,
.animation-svg .cls-2 { fill: none; stroke: #fcbe3c; }
.animation-svg .cls-3 { fill: #fcbe3c; stroke-width: 0px; }
.animation-svg .hex1 { transform-origin: 69.57733237743378px 60.2599983215332px; }
.animation-svg .hex2 { transform-origin: 272.7123718261719px 178.77810668945312px; opacity: 0; transition: opacity 1s ease; }
.animation-svg .hex3 { transform-origin: 169.2423858642578px 357.2781066894531px; opacity: 0; transition: opacity 1s ease; }
.animation-svg .hex4 { transform-origin: 376.24237060546875px 357.5281066894531px; opacity: 0; transition: opacity 1s ease; }
.animation-svg.phase1 .hex1 { animation: p1hex1 0.5s ease; }
.animation-svg.phase0 .hex2 { opacity: 0; }
.animation-svg.phase0 .hex3, .animation-svg.phase1 .hex3 { opacity: 0; }
.animation-svg.phase1 .phase-1.circle,
.animation-svg.phase2 .phase-2.circle,
.animation-svg.phase3 .phase-3.circle { animation: fadeIn 1s linear forwards; }
.animation-svg.phase2 .phase-1.circle,
.animation-svg.phase3 .phase-1.circle,
.animation-svg.phase3 .phase-2.circle,
.animation-svg.phase3 .phase-1.circle,
.animation-svg.phase3 .phase-2.circle,
.animation-svg.phase3 .phase-3.circle { opacity: 1; animation: fadeIn 1s linear forwards; }
.animation-svg.phase1 .phase-1.line,
.animation-svg.phase2 .phase-1.line,
.animation-svg.phase2 .phase-2.line,
.animation-svg.phase3 .phase-1.line,
.animation-svg.phase3 .phase-2.line,
.animation-svg.phase3 .phase-3.line,
.animation-svg.phase4 .phase-1.line,
.animation-svg.phase4 .phase-2.line,
.animation-svg.phase4 .phase-3.line,
.animation-svg.phase4 .phase-4.line { opacity: 1; animation: move .75s linear forwards, fadeIn 1s linear forwards; }
.animation-svg.phase2 .hex2,
.animation-svg.phase3 .hex2 { opacity: 1; }
.hex4 { opacity: 0; }
.animation-svg.phase1 .hex2 { opacity: 1; animation: p1hex2 1s ease, fadeIn 1.25s ease; }
.animation-svg.phase2 .hex2 { animation: p2hex2 1.25s ease; }
.animation-svg.phase2 .hex3 { animation: p2hex2 1.25s ease, fadeIn 1.25s ease; opacity: 1; }
.animation-svg.phase3 .hex3 { animation: p3hex3 1.25s ease; opacity: 1; }
.animation-svg.phase3 .hex4 { animation: p3hex4 1.25s ease, fadeIn 1.25s ease; opacity: 1; }
.animation-svg.phase4 .hex4 { animation: p4hex4 .75s linear forwards, fadeOut .5s linear forwards; }
.animation-svg.phase4 .hex3 { animation: p4hex3 .75s linear forwards, fadeOut .5s linear forwards; }
.animation-svg.phase4 .line.graphic { animation: moveBack .75s linear forwards, fadeOut .5s linear forwards; }
.animation-svg.phase4 .hex2 { animation: p4hex2 .75s linear forwards, fadeOut .5s linear forwards; }

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes p1hex1 {
    from { transform: rotate(0deg); }
    to { transform: rotate(120deg); }
}

@keyframes p1hex2 {
    from { transform: rotate(0deg); }
    to { transform: rotate(60deg); }
}

@keyframes p2hex2 {
    from { transform: rotate(60deg); }
    to { transform: rotate(-180deg); }
}

@keyframes p2hex3 {
    from { transform: rotate(0); }
    to { transform: rotate(180deg); }
}

@keyframes p2hex4 {
    from { transform: rotate(0); }
    to { transform: rotate(180deg); }
}

@keyframes p2hex3 {
    from { transform: rotate(0); }
    to { transform: rotate(180deg); }
}

@keyframes p3hex3 {
    from { transform: rotate(180deg); }
    to { transform: rotate(240deg); }
}

@keyframes p3hex4 {
    from { transform: rotate(0); }
    to { transform: rotate(60deg); }
}

@keyframes p4hex4 {
    from { transform: rotate(60deg); }
    to { transform: rotate(-60deg); }
}

@keyframes p4hex3 {
    from { transform: rotate(240deg); }
    to { transform: rotate(0deg); }
}

@keyframes p4hex2 {
    from { transform: rotate(-180deg); }
    to { transform: rotate(105deg); }
}

@keyframes move {
    100% { stroke-dashoffset: 0; }
}

@keyframes moveBack {
    0% { stroke-dashoffset: 0; }
}