﻿@font-face {
    font-family: "Ember";
    src: url('fonts/AmazonEmber_Bd.ttf') format("truetype");
    font-display: swap;
    font-weight: 700;
}

@font-face {
    font-family: "Ember";
    src: url('fonts/AmazonEmber_Rg.ttf') format("truetype");
    font-display: swap;
    font-weight: 500;
}

@font-face {
    font-family: "Ember";
    src: url('fonts/AmazonEmber_Lt.ttf') format("truetype");
    font-display: swap;
    font-weight: 400;
}

body {
    font-size: 16px;
    color: #000000;
    font-family: "Ember";
    height: 100vh;
    font-weight: 400;
    margin: 0 auto;
    background: #444444;
    width: 100%;
    display: flex;
    align-items: center;
}

p {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 500;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Ember";
    font-weight: 700 !important;
    color: #242f3e;
    margin-bottom: 10px;
}

hr {
    margin: 40px 0px;
}

.main-content .bold {
    color: #2074d5;
    font-weight: 700;
    text-decoration: none;
}

.side-quote .bold, .callout-right .bold, .callout-left .bold {
    color: #ff9900;
    font-weight: 700;
    text-decoration: none;
}

.footer a, .footer a:hover {
    color: #0d6efd;
}

a {
    color: #ff9900;
}

    a:hover {
        color: #ff9900;
    }

img {
    width: 100%;
    object-fit: cover;
}

    img.img-inline {
        max-height: 220px;
    }

.logo {
    width: 70px;
    height: auto;
}

img.brand-logo {
    width: auto;
    max-height: 70px;
    max-width: 180px;
    object-fit: unset;
    padding: 10px;
}

.footer {
    position: absolute;
    bottom: 0;
    color: #ffffff;
    padding: 0px 70px;
    height: 90px;
    width: 100%;
    z-index: 101;
}

    .footer img {
        width: 50px;
        height: auto;
    }

.slide-content {
    height: 100%;
    overflow: hidden;
    overflow-y:auto;
}

.center-content {
    padding: 0px 80px;
}

.main-content {
    padding: 100px 70px 20px;
    margin: 0 auto;
}

img.img-column {
    z-index: 100;
}

.slide-content::-webkit-scrollbar:horizontal {
    height: 4px;
}

.slide-content::-webkit-scrollbar-thumb {
    background-color: #656565;
    border-radius: 5px;
}

#ebookCarousel {
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    background-image: none;
}

.carousel-indicators [data-bs-target] {
    background-color: #3a3a3a;
}

i.bi.bi-chevron-left, i.bi.bi-chevron-right {
    font-size: 40px;
    color: #ffffff;
}

.carousel {
    height: 100vh;
    background-color: #444444;
    width: 100%;
    max-height: 1082px;
}

.carousel-inner {
    height: 100%;
    width: 100%;
    margin: 0 auto;
}

.carousel-item {
    margin: 0 auto;
    float: none;
    background-color: #fff;
    height: 100%;
    max-width: 1400px;
    position: relative;
}

p.subtitle,
span.subtitle {
    font-size: 30px;
    font-weight: 500;
}

.header {
}

    .header.d-flex.align-items-center {
        margin-bottom: 100px;
    }

    .header .subtitle {
        text-transform: uppercase;
    }

.TOC ul li {
    list-style: none;
    margin-bottom: 10px;
}

.TOC ul {
    padding: 0;
    margin-top: 30px;
}

.TOC button:hover {
    text-decoration: underline;
}

button {
    font-size: 20px;
    font-weight: 500;
    background: unset;
    border: none;
    text-align: left;
}

    button p {
        margin-bottom: 5px;
        margin-left: 30px;
    }

.centerContentSlide h1 {
    color: #ffffff;
    z-index: 1000;
}

.centerContentSlide {
    height: 100%;
}

    .centerContentSlide .slide-content {
        overflow: hidden;
    }

.centerContentSlideBody {
    z-index: 101;
    position: relative;
    height: 100vh;
}

.side-quote {
    height: 100%;
    background-color: #242f3e;
    color: #fff;
    /*padding: 180px 70px 0px;*/
    position: relative;
    overflow: hidden;
}

.side-quote-image {
    -webkit-transform: rotate(83deg) scale(1.2, 1.2);
    -webkit-transform-origin: 50% 50%;
    transform: rotate(83deg) scale(1.2, 1.2);
    transform-origin: 50% 50%;
    height: 900px;
    left: -230px;
    position: absolute;
    top: 59px;
    width: 900px;
}

.side-quote-body {
    position: relative;
}

.side-quote .specialQuote,
.calloutQuote .specialQuote {
    font-size: 100px;
    position: absolute;
    color: #ff9900;
    top: -25px;
}

.side-quote-text {
    padding-top: 45px;
}

.side-quote h1, .side-quote h2, .side-quote h3 {
    color: #fff;
}
/*Callout*/

.callout-right {
    position: absolute;
    top: -100px;
    /*background: -webkit-linear-gradient(0deg, rgb(13, 68, 143,1), rgb(211, 188, 153, 1));*/
    background-color: #242f3e;
    color: #ffffff;
    padding: 70px 70px 35px 70px;
    z-index: 101;
}

.callout-left {
    position: absolute;
    top: -100px;
    /*background: -webkit-linear-gradient(0deg, rgb(13, 68, 143,1), rgb(211, 188, 153, 1));*/
    background-color: #242f3e;
    color: #ffffff;
    padding: 70px 70px 35px 70px;
    z-index: 101;
}

    .callout-left h2, .callout-left h3, .callout-right h2, .callout-right h3 {
        color: #fff;
    }

.quotemark {
    font-size: 40px;
    color: #ff9900;
}

.calloutQuote {
    position: relative;
}

h4.subhead {
    color: #fbd8bf;
    text-transform: uppercase;
    letter-spacing: 2px;
}

h5.subhead {
    color: #fbd8bf;
    text-transform: uppercase;
    letter-spacing: 2px;
}

h6.subhead {
    color: #fbd8bf;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    margin-bottom: 5px;
}

.titleSlide {
    background: -webkit-linear-gradient(0deg, rgb(13, 68, 143,1), rgb(211, 188, 153, 0.4)), center / cover no-repeat url(../img/AWS_Windmolen_Video-min.gif);
}

    .titleSlide p, .titleSlide h1, .titleSlide span {
        color: #ffffff;
    }

.fullBackgroundGradiant {
    -webkit-transform: scale(1, -1);
    -webkit-transform-origin: 50% 50%;
    opacity: .6;
    transform: scale(1, -1);
    transform-origin: 50% 50%;
    height: 100%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 100;
}

.rightOverFlow {
}

.rightOverFlowGradiant {
    -webkit-transform: rotate(-7deg) scale(1.2, 1.2);
    -webkit-transform-origin: 50% 50%;
    transform: rotate(-7deg) scale(1.2, 1.2);
    transform-origin: 50% 50%;
    height: 100%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 100;
}

.zoomImg {
    background-size: auto 100%;
    background-position: center center;
    background-repeat: no-repeat;
    animation-fill-mode: forwards;
    animation-name: zoom-in-stop;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-direction: alternate;
}

.fade-in-img-2 {
    background-image: url(../img/Gradient_Colorset_01_Industrial_Full_55_2.png);
    -webkit-transform: rotate(83deg) scale(1.2, 1.2);
    -webkit-transform-origin: 50% 50%;
    transform: rotate(83deg) scale(1.2, 1.2);
    transform-origin: 50% 50%;
    height: 900px;
    left: -230px;
    position: absolute;
    top: 59px;
    width: 900px;
    animation-delay: 2s;
    opacity: 0;
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

.test2 {
    background-size: cover;
    left: -10%;
    animation-name: left-right-stop;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-direction: alternate;
    animation-fill-mode: forwards;
    position: absolute;
    height: 110vh;
    width: 110vw;
}

.side-img {
    position: relative;
    overflow: hidden;
}

.rightLeftAnima {
    background-size: auto 100%;
    background-position: center center;
    background-repeat: no-repeat;
    animation-fill-mode: forwards;
    animation-name: right-Left-stop;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-direction: alternate;
    position: absolute;
    height: 100vh;
    width: 100vw;
    right: -180%
}

.slide-down-0 {
    animation-delay: 0s;
    opacity: 0;
    animation-name: slideDown;
    animation-duration: 2s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

.fade-in-0 {
    animation-delay: 0s;
    opacity: 0;
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

.fade-in-1 {
    animation-delay: 1s;
    opacity: 0;
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

.fade-in-2 {
    animation-delay: 2s;
    opacity: 0;
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

.fade-in-3 {
    animation-delay: 3s;
    opacity: 0;
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

.fade-in-4 {
    animation-delay: 4s;
    opacity: 0;
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

.fade-in-slide-up-0 {
    height: 200px;
    overflow: hidden;
}

    .fade-in-slide-up-0 img,
    .fade-in-slide-up-0 div {
        animation: slideUp 0s, fadeIn 1s;
        opacity: 0;
        animation-duration: 4s;
        animation-timing-function: ease-in;
        animation-fill-mode: forwards;
        margin-top: 100%;
    }

.fade-in-slide-up-1 {
    height: 200px;
    overflow: hidden;
}

    .fade-in-slide-up-1 img {
        animation-delay: 1s;
        opacity: 0;
        animation-name: fadeInSlideUp;
        animation-duration: 4s;
        animation-timing-function: ease-in;
        animation-fill-mode: forwards;
        margin-top: 100%;
    }

.fade-in-slide-up-2 {
    height: 200px;
    overflow: hidden;
}

    .fade-in-slide-up-2 img,
    .fade-in-slide-up-2 div {
        animation-delay: 2s;
        opacity: 0;
        animation-name: fadeInSlideUp;
        animation-duration: 4s;
        animation-timing-function: ease-in;
        animation-fill-mode: forwards;
        margin-top: 100%;
    }

.fade-in-slide-up-text-1 {
    transform: translateY(100%);
    animation: fadeInUpText 1s 1s forwards;
    overflow: hidden;
    opacity: 0;
}

.fade-in-slide-up-text-2 {
    transform: translateY(100%);
    animation: fadeInUpText 1s 2s forwards;
    overflow: hidden;
    opacity: 0;
}

.fade-in-slide-up-text-3 {
    transform: translateY(100%);
    animation: fadeInUpText 1s 3s forwards;
    overflow: hidden;
    opacity: 0;
}

.fade-in-slide-down-text-1 {
    transform: translateY(-100%);
    animation: fadeInDownText 1s 1s forwards;
    overflow: hidden;
    opacity: 0;
}

.fade-in-slide-down-text-2 {
    transform: translateY(-100%);
    animation: fadeInDownText 1s 2s forwards;
    overflow: hidden;
    opacity: 0;
}

.fade-in-slide-down-text-3 {
    transform: translateY(-100%);
    animation: fadeInDownText 1s 2s forwards;
    overflow: hidden;
    opacity: 0;
}

@keyframes fadeInUpText {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes fadeInDownText {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes slideUp {
    0% {
        margin-top: 100%;
        height: 300%;
    }

    100% {
        margin-top: 0%;
        height: 100%;
    }
}

@keyframes slideDown {
    0% {
        margin-top: -100%;
        height: 100%;
    }

    20% {
        margin-top: -90%;
        height: 140%;
    }

    40% {
        margin-top: 40%;
        height: 180%;
    }

    60% {
        margin-top: 60%;
        height: 220%;
    }

    80% {
        margin-top: 80%;
        height: 260%;
    }

    100% {
        margin-top: 100%;
        height: 300%;
    }
}

.simpleZoom {
    animation-fill-mode: forwards;
    animation-name: simpleZoom;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 3s;
    animation-direction: alternate;
}

@keyframes simpleZoom {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.5);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes left-right-stop {
    0% {
        left: -10%;
    }

    100% {
        left: 0%;
    }
}

@keyframes right-Left-stop {
    0% {
        right: -180%;
    }

    100% {
        right: -120%;
    }
}

@keyframes zoom-in-stop {
    0% {
        background-size: auto 100%;
    }

    100% {
        background-size: auto 110%;
    }
}

@media screen and (max-width: 1600px) {
    i.bi.bi-chevron-left, i.bi.bi-chevron-right {
        font-size: 40px;
        color: #3a3a3a;
    }
}

@media screen and (max-width: 1200px) {
    .main-content {
        padding: 20px;
    }

    .side-quote {
    }

    .callout-right, .callout-left {
        position: inherit;
        padding: 15px;
        top: 0;
    }

    .side-quote-image {
        display: none;
    }
}

@media screen and (max-width: 992px) {
    .slide-content {
        overflow: auto;
    }

    .main-content {
        padding: 20px;
    }

    .side-quote {
    }

    .callout-right, .callout-left {
        position: inherit;
        padding: 15px;
    }
}

@media screen and (max-width: 768px) {
    .carousel-item {
        width: 100%;
    }

    .main-content {
        padding: 20px;
    }

    .side-quote {
    }
}