@font-face {
    font-family: 'ChronicleDisplay-Bold';
    src: url('../fonts/ChronicleDisplay-Bold.eot'), url('../fonts/ChronicleDisplay-Bold.ttf') format('truetype'), url('../fonts/ChronicleDisplay-Bold.woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ChronicleDisplay-Semi';
    src: url('../fonts/ChronicleDisplay-Semi.eot'), url('../fonts/ChronicleDisplay-Semi.ttf') format('truetype'), url('../fonts/ChronicleDisplay-Semi.woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'IdealSans-BookItalic';
    src: url('../fonts/IdealSans-BookItalic.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'IdealSans-ExtraLight';
    src: url('../fonts/IdealSans-ExtraLight.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'IdealSans-Light';
    src: url('../fonts/IdealSans-Light.eot'), url('../fonts/IdealSans-Light.otf'), url('../fonts/IdealSans-Light.ttf') format('truetype'), url('../fonts/IdealSans-Light.woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'IdealSans-Semibold';
    src: url('../fonts/IdealSans-Semibold.eot'), url('../fonts/IdealSans-Semibold.otf'), url('../fonts/IdealSans-Semibold.woff');
    font-weight: 700;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: none;
}

p {
    text-align: justify;
    font-family: IdealSans;
}


/*header*/
h1, h2, h3, h4, h5, h6 {
    text-align: unset;
    font-family: 'ChronicleDisplay-Bold', serif;
    font-weight: normal;
}

.main-pad {
    padding-left: 8%;
    padding-right: 8%;
}

.w-100 {
    width: 100%;
}


.header_black {
    /*z-index: 999999;*/
    /*position: absolute;*/
    overflow: hidden;
    /*top: 30px;*/
    /*left: 100px;*/
    /*height: 52px;*/
    border-radius: 2px;
    padding: 12px 0 10px 0;
    background-color: transparent;
    width: 0;
    -webkit-transition: background-color .5s ease-out;
    transition: background-color .5s ease-out;
}

.sq {
    position: absolute;
    top: 38px;
    left: 15%;
    z-index: 9999999;
    text-decoration: none;
    font-size: 20px;
    color: black;
    font-weight: 700;
    font-family: IdealSans-Semibold;
    pointer-events: none;
    display: none;
}

.sq:hover {
    color: black;
}

.en {
    position: absolute;
    top: 38px;
    left: 17%;
    z-index: 9999999;
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
    margin-left: 16px;
    color: black;
    font-family: IdealSans-Semibold;
    pointer-events: none;
    display: none;
}

.sq:hover {
    color: black;
}

.menu {
    z-index: 200;
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
}

.menu > a {
    color: black;
    font-weight: bold;
    text-decoration: none;

}


.menu .active a {
    border-bottom: 2px solid black;
}

/* I hide the checkbox because I only need the label */
#check {
    display: none;
}

.button {
    height: 52px;
    width: 3%;
    margin: 0;
    padding: 5px 1px;
    position: absolute;
    left: 5%;
    top: 30px;
    display: inline-block;
    transition: all 0.2s ease-in;
    line-height: 6px;
    text-align: left;
    z-index: 99999999;
    background-color: transparent;
    border: none;

}


.button span {
    height: 3px;
    width: 85%;
    background: white;
    display: inline-block;
    transition: all 0.5s cubic-bezier(.62, .43, .35, 1.47);
}

/* toggle icon animation */
#check:checked ~ .button span:nth-child(1) {
    width: 100%;
    background: black;
    z-index: 9999999;
    transform: rotate(45deg) translateY(5px) translateX(5px);
}

#check:checked ~ .button span:nth-child(2) {
    width: 0;
}

#check:checked ~ .button span:nth-child(3) {
    width: 100%;
    background: black;
    z-index: 9999999;
    transform: rotate(-45deg) translateY(-7px) translateX(7px);
}

/* the nav height is set to 0 when the navbar is closed */

nav {
    position: absolute;
    overflow: hidden;
    top: 25px;
    left: 5%;
    height: 52px;
    border-radius: 2px;
    padding: 12px 0 10px 0;
    z-index: 999999;
    background-color: white;
    width: 0;
    transition: background-color .5s ease-out;
    display: flex;
    justify-content: center;

}

.white-logo {
    position: fixed;
    transform: translateX(-50%);
    width: 88px;
    z-index: 9999999;
    margin-left: 50%;
    margin-top: 1.8%;
}


.black-logo {
    position: fixed;
    width: 88px;
    z-index: 9999999;
    visibility: hidden;
    transform: translateX(-50%);
    margin-left: 50%;
    margin-top: 1.8%;
}


.logo-visible {
    visibility: visible !important;
}

nav ul {
    display: flex;
    justify-content: center;
}

nav ul li {
    margin-left: 20px;
    list-style-type: none;
}

.professional-item-menu {
    display: none;
}

.public-item-menu {
    display: none;
}

nav ul li:nth-child(1) {
    margin-left: 30%;
}


nav ul li:nth-child(2) {
    margin-right: 24%;
}

nav ul li:nth-child(3) {
    margin-left: 4%;
}

svg {
    position: absolute;
    top: 5%;
    left: 49%;
    transform: translate(-120%, -50%);
    height: 3%;
    z-index: 1000000;
}


nav ul li a {
    text-decoration: none;
    color: black;
    /*font-family: IdealSans, sans-serif;*/
    font-weight: 700;
    font-family: IdealSans-Semibold;
    font-size: 20px;
    transition: all 0.4s ease-out;
    opacity: 0;
    transform: scale(0);
    transform-origin: top;
    margin-right: 20px;
}


nav ul li a::after {
    content: '';
    display: block;
    width: 0 !important;
    height: 2px;
    background: black;
    transition-duration: 500ms;
    margin: auto;
    opacity: 0;
}

nav ul li a:hover::after {
    width: 100% !important;
    opacity: 1 !important;
}

nav .selected a::after {
    content: '';
    display: block;
    width: 100% !important;
    height: 2px;
    background: black;
    opacity: 1;
}

/* the nav height will be set to the height in pixels that would have for default, using height:auto won't work but you can put that value in pixels creating the slide*/
#check:checked ~ nav {
    height: 52px;
    width: 90%;
}


#check:checked ~ nav a {
    padding: 3px;
    opacity: 1;
    transform: scale(1);
}

@media screen and (min-width: 870px) {
    nav .selected a::after {
        content: '';
        display: block;
        width: 100% !important;
        height: 2px;
        background: black;
    }

    #check:checked ~ nav {
        height: 52px;
        animation: animate-open-menu 1s forwards;
    }

    @keyframes animate-open-menu {
        from {
            width: 0;
            opacity: 0;
        }

        to {
            width: 90%;
            opacity: 1;
        }
    }


    #check:checked ~ nav a {
        padding: 3px;
        animation: animate-menu-items 300ms forwards;
        animation-delay: 1s;
        transform: scale(1);
        opacity: 0;
        color: black;
    }


    #check:checked ~ nav a::after {
        animation: animate-menu-items 300ms forwards;
        animation-delay: 1s;
        opacity: 0;
    }


    @keyframes animate-menu-items {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }


}

#check:checked ~ .en {
    pointer-events: all;
    display: block;
}

#check:checked ~ .sq {
    pointer-events: all;
    display: block;
}

/* ---------------------------------------------speeches.html and interview.html  css -------------------------------------------------*/

.team-area {

    width: 90%;
    margin-left: 20px;
    margin-top: 13vw;
}

.single-team {

    width: 24vw;
    height: 34vw;
    padding: 24px;
    position: relative;
    display: flex;
    align-items: center;
    transition: .6s ease-out;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
    opacity: 0;
    animation: load_up 2s forwards;
    -webkit-animation: load_down 2s forwards;
}

@keyframes load_down {
    from {
        opacity: 0;
        bottom: 90%
    }
    to {
        opacity: 1;
        bottom: 20%;
    }

}

.single-team:hover {
    transform: translateY(15px);
    opacity: 0;
}

.single-team:hover:before {
    opacity: 1;

}

.single-team:hover .team-text {
    opacity: 1;
    transform: translateY(0);
}

single-team:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #000, transparent);
    z-index: 2;
    transition: 0.5s;
    opacity: 0;

}

.single-team img {
    width: auto;
    height: 40vh;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
}

.single-team .team-text {
    position: relative;
    z-index: 40;
    color: black;
    opacity: 0;
    transform: translateY(60px);
    transition: 1s;

}

.team-text {
    margin: 0;
    /*letter-spacing: 3px;*/
    text-align: center;
    font-weight: bold;

}


.image_slide_interview h2 {
    width: 60%;
    color: black;
    text-align: center;
    padding: 15px 30px;
    transform: translateY(50%);

}


.item {
    width: 400px;
    height: 400px;
    background-color: white;
    position: relative;
    display: inline-block;
    margin: 1% 1% 1% 1%;
    overflow: hidden;
    box-shadow: 2px 2px 2px #444444;

}

.item .overlay {
    color: #000;
    text-align: center;
    width: 78%;
    height: 81%;
    background-color: #fff;
    opacity: 0;
    transition: all 0.5s ease;
    position: absolute;
    top: 20px;
    bottom: 0;
    left: 40px;
    transform: translateY(60%);
}

.clean .overlay:hover {
    opacity: 0.83;
}


/*----------------------------------- interview and speeches articles slide in css--------------------------------------------------------------------*/

.article_interview {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.article_interview_imazh {
    width: 50%;
    transition: 2s;
    display: block;
    margin-top: -30%;
    opacity: 0;
}

.article_interview:hover .article_interview_imazh {
    margin-top: 0;
    opacity: 1;
}

.article_interview > div > p {
    font-size: 20px;
    padding: 0 10%;

}

.page_content > h2 {
    padding-left: 5%;
}

/* -----------------------------------------------------------------------------portrait.html css------------------------------------------------------ */
.portrait {
    width: 100%;
    position: fixed;
    right: 90%;
    opacity: 1;
    animation: load_right 2s forwards;
    -webkit-animation: load_right 2s forwards;
}


@keyframes load_right {
    from {
        opacity: 1;
        right: 90%
    }
    to {
        opacity: 1;
        right: 0%;
    }

}

@-webkit-keyframes load_right {
    from {
        opacity: 1;
        right: 90%
    }
    to {
        opacity: 1;
        right: 0%;
    }

}

.portrait > div > p {
    font-size: 32px;
    font-family: IdealSans-Semibold;
}

/*------------------------------------------------profile------------------------------*/
.profile {

    position: fixed;
    top: 90%;
    left: 0;
    opacity: 1;
    animation: load_profile 2s forwards;
    -webkit-animation: load_profile 2s forwards;


    margin: 0;

    width: 100%;
    background-color: black;
    height: 300px;
    text-align: center;
    color: white;

}


@keyframes load_profile {
    from {
        opacity: 1;
        top: 90%
    }
    to {
        opacity: 1;
        top: 40%;
    }

}

@-webkit-keyframes load_profile {
    from {
        opacity: 1;
        top: 90%
    }
    to {
        opacity: 1;
        top: 40%;
    }

}


body, html, .flex-wrapper {
    display: flex;
    flex: 1;
}

.flex-wrapper {
    background: #444;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.c-scene {
    height: 50vh;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.c-scene1 {
    height: 100vh;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /*margin: 0;*/
    padding: 0;
    overflow-x: hidden;
    margin-left: auto;

}

.c-scene2 {
    height: 100vh;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /*margin: 0;*/
    padding: 0;
    overflow-x: hidden;
    margin-left: auto;

}

.c-scene3 {
    height: 100vh;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /*margin: 0;*/
    padding: 0;
    overflow-x: hidden;
    margin-left: auto;
}

.c-scene4 {
    height: 100vh;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /*margin: 0;*/
    padding: 0;
    overflow-x: hidden;
    margin-left: auto;
}

.c-scene__content {
    color: white;
    max-width: 80%;
    position: relative;
}

.c-scene__quote {
    font-family: 'EB Garamond', serif;
    font-size: 70px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    left: 100vw;
}

.c-scene1 > div > img {
    margin: 0;
    padding: 0;
    position: fixed;
    right: 65%;
    transform: translateY(-65%);
    white-space: nowrap;
    font-size: 100px;
    top: 90vw;
}

.c-scene__author {
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    opacity: 0.5;
}

/*Scene Colours*/
#scene1 {
    background-color: black;

}

.c-scene_ {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.c-scene5 {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /*margin: 0;*/
    padding: 0;
    overflow-x: hidden;
    margin-left: auto;
}

#scene5 {
    background-color: black;
    z-index: 99999;
    height: 100vh;
    width: 96vw;


}

.c-scene__quote1 {
    font-family: 'EB Garamond', serif;
    font-size: 70px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    left: 100vw;
}

/* ------------------------------------------------------------------------------------------------fullwidth.html animation css----------------------------------------------------------------------------*/

.image_slide4 > a > img {
    z-index: 2020000;
    width: 50%;
    position: fixed;
    right: 90%;
    opacity: 0.7;
    animation: load_right1 2s forwards;
    -webkit-animation: load_right1 2s forwards;
}


@keyframes load_right1 {
    from {
        /*opacity: 0;*/
        right: 90%
    }
    to {
        /*opacity: 1;*/
        right: 0%;
    }

}

@-webkit-keyframes load_right1 {
    from {
        /*opacity: 0;*/
        right: 90%
    }
    to {
        /*opacity: 1;*/
        right: 0%;
    }

}

.image_slide5 > a > img {
    z-index: 20200000;
    width: 50%;
    position: fixed;
    left: 90%;
    opacity: 0;
    /*right: 0;*/
    animation: load_right_2 2s forwards;
    -webkit-animation: load_right_2 2s forwards;
}


@keyframes load_right_2 {
    from {
        opacity: 0;
        left: 90%;
    }
    to {
        opacity: 1;
        left: 0%;
    }

}

@-webkit-keyframes load_right_2 {
    from {
        opacity: 0;
        left: 90%;
    }
    to {
        opacity: 1;
        left: 0%;
    }

}

image_slide4 > a > img:hover {
    opacity: 1.4;
}


/* -----------------------------------------------------------------------------------------css for divs on the left and on the right of pages--------------------------------------------------------------*/

.line_left {
    /*width: 100vw;*/
    /*height: 50px;*/
    /*background: black;*/
    /*color: white;*/
    /*border-style: solid;*/
    /*border-color: white;*/
    /*z-index: 3;*/
    /*position: fixed;*/
    /*right: 938px;*/
    /*top: 112px;*/
    /*text-transform: uppercase;*/
    /*transform: rotate(-90deg);*/
    width: 91vw;
    height: 50px;
    background: black;
    color: white;
    border-style: solid;
    border-color: white;
    z-index: 3;
    position: fixed;
    right: 1022px;
    top: 234px;
    text-transform: uppercase;
    transform: rotate(-90deg);
}

.line_left > a {
    position: absolute;
    top: 17%;
    left: 27%;
    color: white;
    font-size: 20px;
    font-weight: normal;
    font-family: 'ChronicleDisplay-Bold';
    letter-spacing: 2px;
    text-decoration: none;
    border-bottom: 2px solid white;
}

.line_left_v2 {
    width: 200vh;
    height: 50px;
    background: black;
    color: white;
    border-style: solid;
    border-color: white;
    z-index: 3;
    position: fixed;
    left: -100vh;
    top: 146px;
    text-transform: uppercase;
    transform: rotate(-90deg) translateY(44%);
}


.line_left_v2 > a {
    position: absolute;
    top: 17%;
    left: 27%;
    color: white;
    font-size: 20px;
    font-weight: normal;
    font-family: 'ChronicleDisplay-Bold';
    letter-spacing: 2px;
    text-decoration: none;
}

.line_left > a:hover {
    color: white;
    border-bottom: 2px solid white;
}

.line_right {
    width: 100vw;
    height: 71px;
    color: black;
    border-style: solid;
    border-color: black;
    background: white;
    z-index: 120;
    position: fixed;
    left: 943px;
    top: 133px;
    text-transform: uppercase;
    transform: rotate(-90deg);
}

.line_right > a {
    position: absolute;
    top: 12%;
    left: 27%;
    color: black;
    font-size: 24px;
    font-weight: 700;
    font-family: IdealSans-Semibold;
    letter-spacing: 2px;
    text-decoration: none;
    border-bottom: 2px solid black;
}

.line_right_v2 {
    width: 200vh;
    height: 50px;
    color: black;
    border-style: solid;
    border-color: black;
    background: white;
    z-index: 120;
    position: fixed;
    top: 125px;
    text-transform: uppercase;
    right: -100vh;
    transform: rotate(-90deg) translateY(-44%);
}

.line_right_v2 > a {
    position: absolute;
    top: 12%;
    left: 27%;
    color: black;
    font-size: 24px;
    font-weight: 700;
    font-family: IdealSans-Semibold;
    letter-spacing: 2px;
    text-decoration: none;
    margin-top: -3px;
}


.line_right_v2 > a::after {
    content: '';
    display: block;
    width: 100% !important;
    height: 2px !important;
    background: black;
    transition-duration: 500ms;
    margin: auto;
}


.line_right_v2:hover > a::after {
    width: 140% !important;
    transform: translateX(-20%);
}


.line_left_v2 > a::after {
    content: '';
    display: block;
    width: 100% !important;
    height: 2px !important;
    background: white;
    transition-duration: 500ms;
    margin: auto;
}


.line_left_v2:hover > a::after {
    width: 60% !important;
}


.bottom-border-lateral {
    width: 100%;
    height: 2px;
    background: black;
}

.line_right > a:hover {
    color: black;
    border-bottom: 2px solid black;
}

/*------------------------------------------------------------------css for button on interview and speeches articles-----------------------------------------------------------------*/
.button_ {
    color: black;
    border-bottom: 1px solid black;
}

.button_:hover {
    border-bottom: 1px solid black;
    color: black;
}


/*--------------------------------------------------------------------------------------------------------------------- RESPONSIVE -------------------------------------------------------------*/


@media screen and (max-width: 1260px) {
    nav ul li:nth-child(1) {
        margin-left: 28%;
    }

    nav ul li:nth-child(2) {
        margin-right: 12%;
    }
}


@media screen and (max-width: 1100px) {
    nav ul li a {
        font-size: 1.7vw;
    }
}

@media screen and (max-width: 1000px) {

    .line_left_v2, .line_right_v2 {
        display: none;
    }


    nav ul li:nth-child(1) {
        margin-left: 19.5%;
    }

    nav ul li a {
        font-size: 17px;
    }

    .sq, .en {
        font-size: 16px;
        margin: 0 2px;
    }

    .en {
        margin-left: 12px;
    }

    .white-logo, .black-logo {
        width: 7%;
        top: 52px;
    }

    #check:checked ~ nav {
        width: 93%;
    }

    .button {
        left: 7%;
    }

    #check:checked ~ .button span:nth-child(1) {
        transform: rotate(45deg) translateY(5px) translateX(5px);
    }

}


@media screen and (max-width: 1320px) {

    .item-container-horizontal-scroller {
        margin-top: 30vh;
    }

    .single-team img {
        width: 18vw;
    }

    .button {
        width: 50px;
    }
}


@media screen and (max-width: 940px) {
    nav ul li a {
        font-size: 14px;
    }

    .sq, .en {
        font-size: 14px;
        margin-top: 4px;
    }

    .sq {
        left: 12%;
    }

    .en {
        left: 14%;
    }

    .button {
        top: 32px;
    }

    nav ul li {
        margin-left: 0;
    }


    nav ul li:nth-child(1) {
        margin-left: 20.5%;
    }
}


@media screen and (max-width: 870px ) {
    .button {
        left: 100%;
        transform: translateX(-125%);
        margin-right: 8px;
    }

    nav ul {
        display: block;
        margin-right: -85%;
        margin-top: 125px;
        transform: translateX(-50%);
    }


    #check:checked ~ nav {
        left: 0;
        top: 0;
        width: 103vw;
        height: 103vh;
    }

    .menu {
        top: 0;
    }

    .black-logo {
        display: none;
    }


    nav ul li:nth-child(n) {
        margin: 5% 10px;
        text-align: right;
        height: 40px
    }

    .sq, .en {
        color: white !important;
        pointer-events: unset;
        display: block;
    }

    .en {
        margin-left: 22px;
    }

    #check:checked ~ nav a {
        font-size: 24px;
    }

    nav ul li:nth-child(2) {
        margin-bottom: 45%;
    }

    #check:checked ~ .professional-item-menu {
        z-index: 9999999999;
        color: white;
        background: black;
        width: 100vw;
        position: absolute;
        top: 80px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 5%;
        font-size: 30px;
    }

    #check:checked ~ .public-item-menu {
        z-index: 9999999999;
        color: white;
        background: black;
        width: 100vw;
        position: absolute;
        top: 240px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 5%;
        font-size: 30px;
    }

    .white-logo {
        width: 58px;
        top: 42px;
    }

}