body {
	background-color: 	var(--base);
	color:				var(--dark);
    --font-color:       var(--dark);
    --base-color:       var(--base);
}

::selection {
    background-color:   var(--purple);
}

#events ::selection,
#yrlive ::selection {
    background-color:   var(--pink);
}

#online ::selection,
#yrplay ::selection {
    background-color:   var(--blue);
}

footer ul,
header ul,
#clients_wrap ul,
#sub-brands ul,
ul#services_list {
    list-style-type:    none;
}

footer, 
section {
    background-color:	var(--base-color);
    color:              var(--font-color);
}

.dark,
.dark a,
.dark hr,
.dark svg,
.dark .btn.play,
.dark .btn.primary,
.dark .btn.secondary {
    --font-color:       var(--light);
    --base-color:       var(--dark);
}

.light {
    --font-color:       var(--dark);
    --base-color:       var(--light);
}

.accent {
    --accent:           var(--lightgrey);
}

.shards .accent {
    --accent:           var(--darkgrey);
}

.base .shards .accent {
    --accent:           var(--light);
}

#retail .accent,
#yrstore .accent,
#retail .shards .accent,
#yrstore .shards .accent {
    --accent:           var(--purple);
}

#events .accent,
#yrlive .accent,
#events .shards .accent,
#yrlive .shards .accent {
    --accent:           var(--pink);
}

#online .accent,
#yrplay .accent,
#online .shards .accent,
#yrplay .shards .accent {
    --accent:           var(--blue);
}

hr {
    --font-color:       var(--lightgrey);
    height:             1px;
    border:             0;
    background-color:   var(--font-color);
}

svg {
    fill:               var(--font-color);
}

svg .pink {
    fill:               var(--pink);
}

svg .blue {
    fill:               var(--blue);
}

svg .purple {
    fill:               var(--purple);
}

svg .accent {
    fill:               var(--accent);
}

svg .transparent {
    fill:               none;
}

footer address {
    padding-top:        10px;
}

footer hr {
    margin:             10px var(--padding);
}

#clients_wrap h4 span {
    padding-left:       5px;
}



/* 
█████████████████████████████████████████████████████

H E A D E R   A N D   N A V I G A T I O N                           
▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂
*/

header, 
header a {
	color:				var(--font-color);
}

header.bg-color {
    background-color:   var(--base-color);
}

#quick-contact:hover a,
#quick-contact:hover li,
#contact-trigger:checked ~ ul a,
#contact-trigger:checked ~ ul li {
    color:              var(--base-color);
}

#site-picker a::after,
#quick-contact:hover li,
header #main-nav a::after,
#contact-trigger:checked ~ ul li {
    background-color:   var(--font-color);
}

header {
    z-index:            999;
    position:			fixed;
    height:             var(--space);
    justify-content:    space-between; 
    padding:            0 var(--padding);
}

header #main-nav, 
header #main-nav a {
    height:             100%;
}

header svg {
    fill:               var(--font-color);
    width:              63px;
}

header, 
header nav,
header #main-nav,
header #side-nav {
    display:            flex;
}

header, 
header nav,
header #side-nav {
    align-items: 	    center;
}

header nav {
    flex:               1 1 auto;
    justify-content:    space-between;
}

header #main-nav {
    margin-right:       auto;
}

header #side-nav {
    margin-left:        auto;
    padding-right:      var(--padding);
}

#nav-trigger,
#contact-trigger, 
#quick-contact li ul, 
label[for=nav-trigger] {
    display:            none;
}

#main-nav a,
#site-picker a,
#quick-contact:hover li ul,
#contact-trigger:checked ~ ul li ul {
    display:            block;
}

#main-nav a,
#site-picker a,
#quick-contact:hover li,
label[for=contact-trigger],
#contact-trigger:checked ~ ul li {
    position:           relative;
}

header {
    white-space:        nowrap;
}

header a,
#quick-contact a {
    text-decoration:    none;
}

#quick-contact a:hover {
    text-decoration:    underline;
}

header,
#quick-contact:hover li ul,
#contact-trigger:checked ~ ul li ul {
    width:              100%;
}

#quick-contact:hover li ul,
#contact-trigger:checked ~ ul li ul {
    position:           absolute;
}

#contact-trigger:checked ~ ul li ul {
    animation-name:     none;
}

#main-nav a,
#site-picker a {
    padding:            6px calc(var(--nav-pad) / 2);
    margin:             0 calc(var(--nav-pad) / 2);
}

header #logo {
    padding:            6px calc(var(--nav-pad) / 2) 6px calc(var(--padding) / 2);
    margin:             0 calc(var(--nav-pad) / 2) 0 calc(var(--padding) / 2);
}

#main-nav a::after,
#site-picker a::after {
    height:             1px;
    bottom:             0;
    width:              0;
}

#main-nav a:hover::after,
#site-picker a:hover::after,
#main-nav .current-menu-item a::after {
    width:              calc(100% - var(--nav-pad));
}

#quick-contact li ul li,
#quick-contact label:first-child {
    padding:            0 0 0 calc(var(--nav-pad));
}

#quick-contact label:first-child {
    padding-top:        calc(var(--nav-pad));
    padding-bottom:     calc(var(--nav-pad));
    display:            inline-block;
    pointer-events:     none;
}

#quick-contact a[href*=tel] {
    padding:            0 calc(var(--nav-pad) / 2);
}
#quick-contact li ul a[lang] {
    display:            inline-block;
    width:              30px;
}
#quick-contact li ul li a[lang] {
    padding:            0 0 6px 0;
}

#quick-contact label[for=contact-trigger] {
    display:            inline-block;
    padding-top:        calc(var(--nav-pad));
    padding-bottom:     calc(var(--nav-pad));
}

#quick-contact label[for=contact-trigger]:last-of-type {
    color:              transparent;
    padding-right:      calc(var(--nav-pad));
}

#quick-contact:hover li label[for=contact-trigger]:last-of-type::after,
#contact-trigger:checked ~ ul li label[for=contact-trigger]:last-of-type::after {
    border-top:         6px solid var(--base-color);
}

#contact-trigger:checked ~ ul li label[for=contact-trigger]:last-of-type::after {
    border-top:         2px solid var(--base-color);
    border-left:        6px solid var(--base-color);
    border-right:       6px solid var(--base-color);
}

#quick-contact label[for=contact-trigger]:last-of-type::after {
    width:              0; 
    height:             0; 
    left:               0;
    top:                50%;
    transform:          translateY(-50%);
    border-left:        6px solid transparent;
    border-right:       6px solid transparent;
    border-top:         6px solid var(--font-color);
}

#quick-contact li ul::after {
    width:              calc(100% - var(--nav-pad));
    bottom:             -var(--nav-pad);
    border-top:         var(--nav-pad) solid var(--font-color);
    border-right:       var(--nav-pad) solid transparent;
}

#site-picker {
    border-right:       1px solid var(--font-color);
    margin-right:       -1px;
}

/* 
█████████████████████████████████████████████████████

B U T T O N S   &   L I N K S                            
▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂
*/

a,
footer a {
	color:				var(--font-color);
}

label,
button,
#yr_loadmore {
    cursor:             pointer;
}

a.accent {
    color:              var(--font-color);
    text-decoration:    none;
    z-index:            0;
    display:            inline-block;
}

a.accent {
    position:           relative;
    margin-left:        2px;
    margin-right:       4px;
}

a.accent:hover {
    color:              var(--base-color);
    padding-left:       3px;
    padding-right:      3px;
    margin-left:        0px;
    margin-right:       0px;
}

a.accent::after,
a.accent::before {
    z-index:            -1;
    background-color:   var(--font-color);
}

a.accent::after {
    width:              100%;
    bottom:             4px;
    right:              0;
    height:             1px;
}

a.accent::before {
    width:              0;
    left:               0;
    bottom:             0;
    height:             100%;
}

a.accent:hover::after {
    width:              0;
}

a.accent:hover::before {
   width:               100%;
}

.btn::after, 
nav a::after,
.btn::before,
.quote::before,
a.accent::after,
a.accent::before,
.timeline::before,
.timeline div::after,
.timeline div::before,
#site-picker a::after,
.timeline-wrapper::after,
.timeline-wrapper::before,
#quick-contact li ul::after,
label[for*='read-more-']::before,
label[for=contact-trigger]::after {
    position:           absolute;
    display:            block;
    content:            "";
}

select,
.btn {
    text-decoration:    none;
	display: 			inline-block;
    border-style:       solid;
    position:           relative;
    white-space:        nowrap;
    margin-right:       14px;
    margin-bottom:      6px;
}

.btn.primary,
.btn.play:hover,
.btn.secondary:hover {
   	padding:			15px 20px 13px 20px; 
	border: 	        1px solid var(--font-color);
}

.btn.primary::before, 
.btn.primary::after,
.btn.secondary::before,
.btn.secondary::after {
    width:              10px;
    height:             20px;
    transform:          rotate(45deg);
    background-color:   var(--base-color);
}

.btn.primary::before,
.btn.secondary::before {
    left:               -3px;
    top:                -7px;
    border-right:       1px solid var(--font-color);
}

.btn.secondary::before,
.btn.secondary::after {
    opacity:            0;
}

.btn.secondary:hover::before,
.btn.secondary:hover::after {
    opacity:            1;
}

.btn.primary::after,
.btn.secondary::after {
    right:              -3px;
    bottom:             -7px;
    border-left:        1px solid var(--font-color);
}

.btn.play:hover,
.btn.primary:hover,
.btn.secondary:hover {
    background-color:   var(--font-color);
    color:              var(--base-color);
}

.btn.play,
.btn.secondary,
#yr_filters input[type="radio"] + label {
	padding:			15px 0px 13px 0px;
    border:             0;
    border-top:         1px solid transparent;
    border-bottom:      1px solid var(--font-color);
}

#yr_filters input[type="radio"] + label {
	padding:			15px 20px 13px 20px; 
    margin-right:       4px;
}


#yr_filters input[type="radio"] {
    display:            none;
}

#yr_filters input[type="radio"]:checked + label {
    background-color:   var(--dark);
    color:              var(--light);
}


.btn.play {
    padding-right:      14px;
    margin-right:       26px;
}

.btn.play:hover {
    padding-right:      10px;
    margin-right:       30px;
}

.btn.play::after {
    width:              0; 
    height:             0; 
    right:              0;
    top:                50%;
    transform:          translateY(-50%);
    border-top:         6px solid transparent;
    border-bottom:      6px solid transparent;
    border-left:        6px solid var(--font-color);
}

.btn.play:hover::after { 
    right:              -26px;
    border-top:         25px solid transparent;
    border-bottom:      25px solid transparent;
    border-left:        25px solid var(--font-color);
}

[id*='read-more-'],
[id*='read-more-'] ~ p {
    display:            none;
}

[id*='read-more-']:checked ~ p {
    display:            inherit;
}

[id*='read-more-'] ~ p ~ label::after {
    content:            " more";
}

label[for*='read-more-'] {
    display:            inline-block;
    position:           relative;
    padding-right:      20px;
}

[id*='read-more-'] ~ p ~ label::before {
    width:              0; 
    height:             0; 
    right:              0;
    top:                50%;
    transform:          translateY(-50%);
    border-left:        6px solid transparent;
    border-right:       6px solid transparent;
    border-top:         6px solid black;
}

[id*='read-more-']:checked ~ p ~ label:after {
    content:" less"
}

[id*='read-more-']:checked ~ p ~ label::before {
    transform:          rotate(180deg);
    top:                40%;
}

a:hover,
footer a,
#clients_wrap a,
#contact a[href*=tel], 
#contact a[href*=mailto] {
    text-decoration:    none;
}

footer a:hover,
#contact a[href*=tel]:hover, 
#contact a[href*=mailto]:hover {
    text-decoration:    underline;
}


/* 
█████████████████████████████████████████████████████

F O R M S                          
▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂
*/

::placeholder {
    color:              var(--font-color);
}

.visuallyhidden {
    border:             0;
    clip:               rect(0 0 0 0);
    height:             1px;
    margin:             -1px;
    overflow:           hidden;
    padding:            0;
    position:           absolute;
    width:              1px;
}

input[type=submit] {
    background-color:   var(--base-color);
    color:              var(--font-color);
    cursor:             pointer;
    position:           relative;
}

.btn.primary.submit,
.btn.secondary.submit {
    padding:            0;
}

button.btn,
.btn.primary input[type=submit],
.btn.secondary input[type=submit] {
    background-color:   transparent;
    border:             0;
    margin:             0;
}

textarea,
input[type=tel],
input[type=text],
input[type=email],
input[type=password] {
    display:            block;
    width:              100%;
    background:         var(--base-color);
    color:              var(--font-color);
    border:             1px solid var(--font-color);
    padding:			15px 20px 13px 20px; 
-webkit-border-radius:  0;
-webkit-appearance:     none;
}

.submit,
textarea,
input[type=tel],
input[type=text],
input[type=email],
input[type=password] {
    margin-top:         6px;
    margin-bottom:      20px;
}

input[type=radio],
input[type=checkbox] {
-webkit-border-radius:  0;
-webkit-appearance:     none;
    background:         var(--base-color);
    color:              var(--font-color);
    border:             1px solid var(--font-color);
    height:             20px;
    width:              20px;
    margin-right:       5px;
}

input[type=radio] {
	border-radius: 		10px;
}

input[type=radio]:checked,
input[type=checkbox]:checked {
    background:         var(--font-color);
}

input[type=checkbox]:checked {
    background:         var(--font-color);
}

footer input[type=text],
footer input[type=email] {
    border:             0;
    border-bottom:      1px solid var(--font-color);
    padding:			15px 20px 13px 0; 
    margin:             0;
}

footer .submit {
    margin-top:         10px
}

#contact main textarea {
    height:             200px;
}

#contact main input[type=submit] {
    width:              200px;
}

#contact label[for=last_name],
#contact label[for=first_name] {
    display:            inline-block;
    width:              calc(50% - (var(--padding) / 2) - 3px );
}

#contact label[for=first_name] {
    margin-right:       var(--padding);
}



#contact main textarea::placeholder,
#contact main input[type=tel]::placeholder,
#contact main input[type=text]::placeholder,
#contact main input[type=email]::placeholder {
    opacity:           0;
}

#contact main textarea:focus::placeholder,
#contact main input[type=tel]:focus::placeholder,
#contact main input[type=text]:focus::placeholder,
#contact main input[type=email]:focus::placeholder {
    opacity:           1;
}


select {
    border:             1px solid var(--font-color);
    border-radius:      unset;
   	padding:			15px 34px 13px 20px; 
    background-color:   transparent;
    position:           relative;
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
    background:         linear-gradient(45deg, transparent 50%, var(--font-color) 50%),
                        linear-gradient(135deg, var(--font-color) 50%, transparent 50%);
    background-position:
                        calc(100% - 21px) 20px,
                        calc(100% - 16px) 20px;
  background-size:      6px 6px;
  background-repeat:    no-repeat;
}

#yr_filters button, 
#yr_filters select {
    margin-top:          calc(var(--padding) / 2);
    margin-bottom:       calc(var(--padding) / 2);
}

#yr_filters button:focus {
    outline:            0;
}

div.wpcf7 .ajax-loader {
    position:           absolute;
}

.wpcf7-not-valid {
    margin-bottom:      6px;
}

.wpcf7-not-valid-tip {
    margin-bottom:      14px;
}

.wpcf7-form-control {
	margin-bottom: 		20px;
	display:			block;
}

span.wpcf7-list-item {
	display:			flex;
	margin:				6px 0 0 0;
}

span.wpcf7-list-item label {
	display: 			flex;
	align-items: 		center;
}


/* 
█████████████████████████████████████████████████████

C L I E N T   L O G O S   /   B E N E F I T S                          
▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂
*/

main ul {
    margin-left:        20px;
}


main ul#slider-controls {
    margin-left:        0;
    padding-bottom:     0;
}

#sub-brands ul,
ul#services_list {
    margin-left:        0;
}


#client_logos .flex [class*='col-']:nth-child(1),
#client_logos .flex [class*='col-']:nth-child(8) {
    display:            none;
}

#client_logos .flex {
    margin:             0 calc(var(--padding));
}

#client_logos .flex [class*='col-'] {
    position:           relative;
    padding:            0;
}

#client_logos .flex [class*='col-'] img:not(:first-child) {
    position:           absolute;
    top:                0;
    opacity:            0;
}

#sub-brands .summary.yrstore h3 {
    letter-spacing:     -0.4px;
}

#sub-brands ul li {
    position:           relative;
}

#sub-brands ul li div svg {
    margin-right:       6px;
}

#sub-brands ul li div:nth-child(2) {
    margin-top:         calc(-25px / var(--font));
    opacity:            0;
}

#sub-brands .logo, 
#sub-brands .summary {
    padding-top:        160px; 
    padding-bottom:     160px; 
}

#sub-brands .logo {
    text-align:         center;
}
#sub-brands .logo svg {
    width:              81%;
}

.quote {
    background-color:   var(--accent);
    color:              var(--light);
    position:           relative
}

.quote::before {
    width:              0;
    height:             0;
    top:                0;
    left:               50%;
    transform:          translateX(-50%);
    border-left:        20px solid transparent;
    border-right:       20px solid transparent;
    border-top:         20px solid var(--base-color);
}

.dark + .quote::before {
    border-top:         20px solid var(--dark);
}

ul#services_list li div {
    border-top:         1px solid var(--font-color);
}

/* 
█████████████████████████████████████████████████████

I M A G E S   &   V I D E O S                       
▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂
*/

#clients_wrap img.img_3x2 {
    clip-path:          polygon( 79%   0%, 
                                100%  33%, 
                                100% 100%, 
                                  0% 100%, 
                                   0   0);
-webkit-clip-path:      polygon( 79%   0%, 
                                100%  33%, 
                                100% 100%, 
                                  0% 100%, 
                                   0   0 );
}

img.img_3x2 {
        clip-path:      polygon( 21%   0%, 
                                100%   0, 
                                100%  67%, 
                                 79% 100%, 
                                  0  100%, 
                                  0%  33%);
-webkit-clip-path:      polygon( 21%   0%, 
                                100%   0, 
                                100%  67%, 
                                 79% 100%, 
                                  0  100%, 
                                  0%  33%);
}

.left img.img_3x2 {
    clip-path:          polygon( 79%   0%, 
                                100%  33%, 
                                100% 100%, 
                                 21% 100%, 
                                   0  67%, 
                                   0   0 );
-webkit-clip-path:      polygon( 79%   0%, 
                                100%  33%, 
                                100% 100%, 
                                 21% 100%, 
                                   0  67%, 
                                   0   0 );
}

img.img_16x9 {
    clip-path:          polygon( 16.75%  0%, 
                                100%     0, 
                                100%    70%, 
                                 83.5%  100%, 
                                  0     100%, 
                                  0%     30%);
-webkit-clip-path:      polygon( 16.75%  0%, 
                                100%     0, 
                                100%    70%, 
                                 83.5%  100%, 
                                  0     100%, 
                                  0%     30%);
}

.left img.img_16x9 {
    clip-path:          polygon( 83.5%   0%, 
                                100%    30%, 
                                100%    100%, 
                                 16.75% 100%, 
                                  0      70%, 
                                  0%     0%);
-webkit-clip-path:      polygon( 83.5%   0%, 
                                100%    30%, 
                                100%    100%, 
                                 16.75% 100%, 
                                  0      70%, 
                                  0%     0%);
}

img.img_4x3 {
    clip-path:          polygon( 22%     0%, 
                                100%     0, 
                                100%    83.5%, 
                                 78%   100%, 
                                  0    100%, 
                                  0%    16.75%);
-webkit-clip-path:      polygon( 22%     0%, 
                                100%     0, 
                                100%    83.5%, 
                                 78%   100%, 
                                  0    100%, 
                                  0%    16.75%);
}

.left img.img_4x3,
.dpl-grid:nth-child(even) .grid-image img {
    clip-path:          polygon(   0%     0%, 
                                  78%     0, 
                                 100%    16.75%,
                                 100%   100%, 
                                  22%    100%, 
                                   0%     83.5% );
-webkit-clip-path:      polygon(   0%     0%, 
                                  78%     0, 
                                 100%    16.75%,
                                 100%   100%, 
                                  22%    100%, 
                                   0%     83.5% );
}

img.img_4x1 {
    clip-path:          polygon( 7.5%    0%, 
                                100%     0, 
                                100%    70%, 
                                 92.5%  100%, 
                                  0     100%, 
                                  0%     30%);
-webkit-clip-path:      polygon( 7.5%    0%, 
                                100%     0, 
                                100%    70%, 
                                 92.5%  100%, 
                                  0     100%, 
                                  0%     30%);
}

.wrap-images img {
    margin-top:         20px;
}

/* 
█████████████████████████████████████████████████████

T I M E L I N E                         
▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂
*/

.timeline-wrapper {
    position:           relative;
    width:              100%;
}


.timeline-wrapper::after,
.timeline-wrapper::before {
    height:             100%;
    top:                0;
    z-index:            501;
}

.timeline-wrapper::before {
    left:               0;
    width:              var(--padding);
    background-color:   var(--base-color);
    background:         -moz-linear-gradient(left, rgba(var(--base-color-rgba),1) 0%, rgba(var(--base-color-rgba),0) 100%);
    background:         -webkit-linear-gradient(left, rgba(var(--base-color-rgba),1) 0%, rgba(var(--base-color-rgba),0) 100%); 
    background:         linear-gradient(to right, rgba(var(--base-color-rgba),1) 0%, rgba(var(--base-color-rgba),0) 100%); 
}

.timeline-wrapper::after {
    right:              0;
    width:              calc(var(--padding) * 2);
    background-color:   var(--base-color);
    background:         -moz-linear-gradient(right, rgba(var(--base-color-rgba),1) 0%, rgba(var(--base-color-rgba),0) 100%);
    background:         -webkit-linear-gradient(right, rgba(var(--base-color-rgba),1) 0%, rgba(var(--base-color-rgba),0) 100%);
    background:         linear-gradient(to left, rgba(var(--base-color-rgba),1) 0%, rgba(var(--base-color-rgba),0) 100%);
}

.timeline-mask {
    width:              100%;
    overflow-y:         scroll;
}

.timeline {
    display:            grid; 
    grid-auto-flow:     column; 
    grid-template-rows: 1fr 1fr;
    padding-left:       var(--padding);
    padding-right:      var(--padding);
    position:           relative;
}

.timeline::before {
    height:             1px;
    top:                50%;
    z-index:            1;
    width:              34px;
    left:               calc(var(--padding) - 20px);
    background-color:   var(--base-color);
}

.timeline div {
    grid-column:        auto / span 2; 
    min-width:          300px;
    padding-left:       20px;
    padding-right:      20px;
    position:           relative;
}

.timeline div:nth-child(2) {
    grid-column:        2 / span 2;
}

.timeline div:nth-child(odd) {
    padding-top:        40px;
    border-top:         1px solid var(--font-color);
}

.timeline div:nth-child(even) {
    padding-bottom:     40px;   
}

.timeline div:nth-child(odd)::after,
.timeline div:nth-child(odd)::before,
.timeline div:nth-child(even)::after,
.timeline div:nth-child(even)::before {
    width:              1px;
    height:             20px;
    background-color:   var(--font-color);
}

.timeline div:nth-child(odd)::before,
.timeline div:nth-child(even)::before {
    transform:          rotate(45deg);
}

.timeline div:nth-child(odd)::after {
    top:                14px;
    left:               20px;
}

.timeline div:nth-child(odd)::before {
    left:               27px;
    top:                -3px;    
}

.timeline div:nth-child(even)::before {
    bottom:             -3px;
    left:               13px;
}

.timeline div:nth-child(even)::after {
    bottom:             14px;
    left:               20px;
}

.timeline div:nth-child(1) {
    padding-left:       0;
}

.timeline div:nth-child(1)::before {
    left:               7px;
}

.timeline div:nth-child(1)::after {
    left:               0;
}


/* 
█████████████████████████████████████████████████████

S H A R D S                      
▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂
*/

footer {
	overflow: 			hidden;
}

footer,
section {
    position:           relative;
}

footer,
#design_print_love {
    z-index:            0;
}

.shards-container {
    position:           absolute;
    overflow:           hidden;
    z-index:            -1;
}

#about #your_global_customization_partner .shards-container {
    right:              -20px;
    top:                0;
    transform:          scale(0.7);
    transform-origin:   top;
}

#about #your_global_customization_partner .shards {
    transform:          translateY(-166px);
}

footer .shards-container {
    right:              var(--padding);
    bottom:             0;
    transform-origin:   bottom;
    transform:          scale(0.8);
}

footer .shards {
    margin-bottom:      -8px;
}

#design_print_love .shards-container {
    left:               50%;
    top:                0;
    transform:          translateX(-50%);
}

#design_print_love .shards {
    transform:          translateY(-140px);
}