body {
    margin:0;
    /* background-color: #333; */
}

body, html {
    font-size:1vw;
    font-family: sans-serif;
    color: #333;
}


#container {
    position:relative;
    /*border:solid 1px #333;*/
    padding-left:3.5%;
    padding-right:2%;
    /*background-image: url(../images/background-2.jpg);*/
    background-size: cover;
}

#container.desktop {}

#container.tablet {}

#container.mobile {}


h1 {}
h2 {}
h3 {}

#slider {
     /*border:solid 1px #333;*/
    position:relative;
    aspect-ratio: 1427 / 521;
    overflow: hidden;

}

#slider .slide {
     /*border:solid 1px #333;*/
    position:absolute;
    top: 0;
    height: 100%;
    width:25%;
    /*text-align: right;*/
    /*background-image: url(../images/arrow-bgrnd-blue.png);
    background-repeat: no-repeat;
    background-position: center right;*/
    color:#fff;
}

#slider #slide-1.slide {
    /* background-color: red; */
    width:30%;
}
#slider #slide-2.slide {
    /* background-color: orange; */
}
#slider #slide-3.slide {
    /* background-color: yellow; */
}
#slider #slide-4.slide {
    /* background-color: green; */
}
#slider #slide-5.slide {
    /* background-color: purple; */
}
#slider #slide-6.slide {
    /* background-color: blue; */
}

#slider #slide-1.slide::before,
#slider #slide-2.slide::before,
#slider #slide-3.slide::before,
#slider #slide-4.slide::before,
#slider #slide-5.slide::before,
#slider #slide-6.slide::before {
  content: '';
  position: absolute;
  top: 50%;
  right:32%;
  transform: translateY(-50%) rotate(45deg) skew(5deg, 5deg);
  width: 50vw;
  height: 50vw;
  background-color: #2044A9;
  box-shadow: 0.5vw -0.5vw 1vw rgba(0, 25, 100, 0.65);
}

#slider #slide-1.slide::before {
  right:26%;
}

#slider #slide-5.slide::before {
  background: #4681C3;
}

#slider #slide-6.slide::before {
  box-shadow: 0.5vw -0.5vw 1vw rgba(0, 0, 0, 0.25);
}









/* Slide headers styles */

/* General */

#slider .slide .slide-headers .slide-title {
    font-family: 'eurostylebold';
    font-weight:400;
}

#slider .slide .slide-headers .slide-subtitle {
    font-family: 'eurostylenormal';
    letter-spacing: 0.05vw;
}

#slider .slide .slide-headers .slide-title,
#slider .slide .slide-headers .slide-subtitle {
    margin:0;
}

.slide.slide-opening .slide-title .line-break,
.slide.slide-open .slide-title .line-break,
.slide.slide-closing .slide-title .line-break {
    display:block;
    margin-left: 1em;
}




/* Closed */

.slide.slide-closed .slide-headers {
    text-align: right;
    position:absolute;
    top: 13.5vw;
    right: 9vw;
    transform: rotate(50.5deg);
    transform-origin: right center;
}

/*.slide.slide-closed .slide-headers {
    opacity:1;
}*/

.slide.slide-closed .slide-headers .slide-title,
.slide.slide-closed .slide-headers .slide-subtitle {
    display:inline;
}

.slide.slide-closed .slide-headers .slide-title {
    font-size:0.75vw;
    font-weight:700;
    text-transform: uppercase;
}

.slide.slide-closed .slide-headers .slide-subtitle {
    font-size:0.65vw;
    font-weight:400;
    text-transform: uppercase;
}


/* Opening, open, closing */

#slider .slide.slide-opening .slide-headers,
#slider .slide.slide-open .slide-headers,
#slider .slide.slide-closing .slide-headers {
    position: absolute;
    top: 19%;
    left: 1.25vw;
}

.slide.slide-opening .slide-headers {
    animation: fadeIn 0.75s;
}

.slide.slide-closing .slide-headers {
    animation: fadeOut 0.75s forwards;
}

#slider .slide.slide-opening .slide-headers .slide-title,
#slider .slide.slide-open .slide-headers .slide-title,
#slider .slide.slide-closing .slide-headers .slide-title {
    font-size: 1.18vw;
    margin-bottom: 0.25vw;
}

#slider .slide.slide-opening .slide-headers .slide-subtitle,
#slider .slide.slide-open .slide-headers .slide-subtitle,
#slider .slide.slide-closing .slide-headers .slide-subtitle {
    font-size: 1vw;
    font-weight: 400;
    line-height: 1.25;
    text-transform: uppercase;
    margin-left:1.3em;
}









/* Slide headers-2 styles */

.slide .slide-headers-2,
.slide .slide-headers-2-2 {
    position:absolute;
    transform: rotate(309.5deg);
    transform-origin: left center;
    white-space: nowrap;
}

.slide .slide-headers-2 .slide-title,
.slide .slide-headers-2-2 .slide-title {
    font-family: 'eurostylebold';
    font-size:0.75vw;
    font-weight:700;
    text-transform: uppercase;
    display:inline;
}

.slide .slide-headers-2 .slide-subtitle,
.slide .slide-headers-2-2 .slide-subtitle {
    font-family: 'eurostylenormal';
    letter-spacing: 0.05vw;
    font-size:0.65vw;
    font-weight:400;
    text-transform: uppercase;
    display:inline;
}



/* Slider content general styles */

#slider .slide .slide-content {
    /*position: absolute;
    display:flex;
    top: 31%;
    left:3.5vw;*/
}

#slider .slide.slide-open .slide-content {
    opacity:1;
    visibility: visible;
}

#slider .slide.slide-closing .slide-content {
    opacity:0;
    visibility: visible;
    transition: opacity 0.5s 0.5s linear; /* Duration must be SHORTER than JavaScript slide animation */
}

#slider .slide.slide-closed .slide-content {
    opacity:0;
    visibility: hidden;
}

#slider .slide.slide-opening .slide-content {
    opacity:1;
    visibility: visible;
    transition: opacity 0.5s 0.5s linear; /* Duration must be SHORTER than JavaScript slide animation */
}

#slider .slide .slide-content .slide-images {
    position: absolute;
    display:flex;
    top: 31%;
    left:3.5vw;
    width:7.75vw;
    height:7.75vw;
    justify-content: center;
}

#slider .slide .slide-content .slide-images .product {
    width:auto;
    height:100%;
}

#slider .slide .slide-content .slide-text {
  position: absolute;
  display: flex;
  top: 57.5%;
  left: 2.5vw;
  width: 11vw;
  font-size: 0.75vw;
  line-height: 1.3;
}



/* Custom slide styles */


/* Slide 1 */

#slider #slide-1.slide-closed .slide-headers {
    right: 8vw;
}

#slider #slide-1.slide-opening .slide-headers,
#slider #slide-1.slide-open .slide-headers,
#slider #slide-1.slide-closing .slide-headers {
    left: 3vw;
}

#slider #slide-1.slide-opening .slide-images,
#slider #slide-1.slide-open .slide-images,
#slider #slide-1.slide-closing .slide-images {
    left:5.5vw;
}

#slider #slide-1.slide-opening .slide-text,
#slider #slide-1.slide-open .slide-text,
#slider #slide-1.slide-closing .slide-text {
    left:4.2vw;
}



/* Slide 3 */

#slider #slide-3.slide .slide-content .slide-images {
    top: 34%;
}

#slider #slide-3.slide .slide-content .slide-text {
    top: 61%;
}


/* Slide 5 */

#slider #slide-5.slide-opening .slide-headers,
#slider #slide-5.slide-open .slide-headers,
#slider #slide-5.slide-closing .slide-headers {
    left: -1.5vw;
}

#slider #slide-5.slide .slide-content .slide-text {
    left: 0.5vw;
    width: 12vw;
}

/* #slide-5.slide-open .slide-headers-2 {
    left: 4.5vw;
}*/

/* #slide-5.slide-closing .slide-headers-2 {
    left: 11.5vw;
    transition: left 1s;*/ /* Duration must be SAME AS JavaScript slide animation */
/*}*/

#slide-5.slide-closed .slide-headers-2 {
    left: 2.9vw;
    top:85.1%;
}

/*#slide-5.slide-opening .slide-headers-2 {
    left: 4.5vw;
    transition: left 1s;*/ /* Duration must be SAME AS JavaScript slide animation */
/*}*/

/*#slide-5.slide-open .slide-headers-2-2 {
    left: 14.5vw;
}^/

/* #slide-5.slide-closing .slide-headers-2-2 {
    left: 16.5vw;
    transition: left 1s;*/ /* Duration must be SAME AS JavaScript slide animation */
/*}*/

#slide-5.slide-closed .slide-headers-2-2 {
    left: 11.5vw;
    top:77.5%;
}

/* #slide-5.slide-opening .slide-headers-2-2 {
    left: 14.5vw;
    transition: left 1s; */ /* Duration must be SAME AS JavaScript slide animation */
/*}*/

#slide-5 .divider {
    width: 1px;
    height: 18.3vw;
    position: absolute;
    top: 53%;
    transform: rotate(40deg);
    transform-origin: center;
    background-color: #0A2478;
}

/* #slide-5.slide-open .divider {
    left: 3.9vw;
} */

/*#slide-5.slide-closing .divider {
    left: 8.35vw;
    transition: left 1s*/ /* Duration must be SAME AS JavaScript slide animation */
/*}*/

#slide-5.slide-closed .divider {
    left: 8.35vw;
}

/* #slide-5.slide-opening .divider {
    left: 3.9vw;
    transition: left 1s;*/ /* Duration must be SAME AS JavaScript slide animation */
/*}*/

#slide-5.slide-opening .slide-headers-2,
#slide-5.slide-open .slide-headers-2,
#slide-5.slide-closing .slide-headers-2,
#slide-5.slide-opening .divider,
#slide-5.slide-open .divider,
#slide-5.slide-closing .divider,
#slide-5.slide-opening .slide-headers-2-2,
#slide-5.slide-open .slide-headers-2-2,
#slide-5.slide-closing .slide-headers-2-2 {
    display: none;
}


/* Slide 6 */

#slider #slide-6.slide-opening .slide-headers,
#slider #slide-6.slide-open .slide-headers,
#slider #slide-6.slide-closing .slide-headers {
    left: -2.25vw;
}

#slide-6.slide-closed .slide-headers-2 {
    left: 10.2vw;
    top: 73%;
}

#slide-6.slide-opening .slide-headers-2,
#slide-6.slide-open .slide-headers-2,
#slide-6.slide-closing .slide-headers-2 {
    display: none;
}

#slider #slide-6.slide.slide-closed .slide-subtitle {
    display:none;
}

#slider #slide-6.slide .slide-content .slide-images {
    height: 6vw;
    top: 43%;
    left: 4vw;
}

#slider #slide-6.slide .slide-content .slide-text {
    top: 65.25%;
    left: -1vw;
    width: 15vw;
}


#slider .slide-button {z-index:10}




#slide-1 {
    left:-10%;
}

#slide-2 {
    left:9%; /* +14% */
}

#slide-3 {
    left:23%; /* +14% */
}

#slide-4 {
    left:37%; /* +14% */
}

#slide-5 {
    left:51%; /* +14% */
}

#slide-6 {
    left:65%; /* +14% */
}



.slide-closed {

}


.slide-open {

}







/* Keys */

#key-1, #key-2, #key-3 {
    position: absolute;
    transform-origin: center;
    font-family: 'eurostylebold';
    text-transform: uppercase;
    text-align: center;
    font-weight: 400;
    color: #0A2478;
}

#key-1 {
    top: 50%;
    left: -2%;
    transform: translate(0, -50%) rotate(90deg);
    text-transform: uppercase;
    text-align: center;
    font-size: 1.4vw;
}

#key-2 {
    top: 25%;
    right: 2%;
    transform: rotate(50.5deg);
    font-size:0.9rem;
}

#key-3 {
    top: 73%;
    right: 2%;
    transform: rotate(309.5deg);
    font-size: 0.9rem;
}

#akzonobel-logo,
#awlgrip-logo {
  position: absolute;
  right:2%;
  width:10.45vw;
}

#awlgrip-logo {
  top:4%;
}

#akzonobel-logo {
  bottom:4%;
}

#akzonobel-logo img,
#awlgrip-logo img {
  width:100%;
}




/* Buttons */

.btn {
    border:none;
    padding:0;
    cursor: pointer;
    background-color: transparent;
}


.slide-button {
    aspect-ratio:1 / 1;
    height:3vw;
    width:3vw;
    position:absolute;
    top:calc(50% - 1.5vw);
    right:6vw;
    font-size:1vw;
    line-height: 1vw;
    background-image: url(../images/icons/icon-arrow-circle.svg);
    background-size: contain;
    background-position: center;
}


.slide-button.slide-button-closed {
    transform: rotate(0);
    transition: transform 0.5s;
}


.slide-button.slide-button-open {
    transform: rotate(180deg);
    transition: transform 0.5s;
}


/* CSS animations */

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

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


/* Elements that should fade */
.slide-headers,
.slide-button,
.slide-headers-2,
.slide-headers-2-2,
.divider {
  transition: opacity 0.5s ease;
}

/* Generic fade */
.faded {
  opacity: 0.5;
}


/* Fonts */

@font-face {
    font-family: 'eurostylebold';
    src: url('../fonts/eurostilebold-webfont.woff2') format('woff2'),
         url('../fonts/eurostilebold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'eurostylenormal';
    src: url('../fonts/eurostyle_normal-webfont.woff2') format('woff2'),
         url('../fonts/eurostyle_normal-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* Helpers */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}