/* Element style */

body,
html {
    margin: 0;
    height: 100%;
}

a,
h1,
h4,
p,
ul,
span {
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}

h4 {
    margin: 0;
    font-size: 2em;
}

header,
section,
footer {
    background-color: gray;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
}

.height-30{
    height: 30%;
}

.height-10 {
    height: 10vw;
}

section {
    background-color: #FFFFFF;
}

a {
    color: #FFFFFF;
    font-size: 1vw;
    text-decoration: none;
}

aside {
    background-color: #1d407199;
    border-radius: 0 20px 20px 0;
    float: left;
    position: absolute;
    top: 35%;
    z-index: 5;
}

aside ul {
    list-style-type: none;
    padding: 0.5em;
}

aside ul li {
    font-size: 1.2rem;
    padding: 10px;
}

footer {
    background-color: #1D4071;
    height: auto;
    text-align: center;
    width: 100%;
    max-height: 20%;
}

footer p {
    margin: 0;
    color: #FFFFFF;
    font-size: 0.5rem;
    word-spacing: 1em;
    letter-spacing: 5px;
    padding: 1rem;
}

td {
    padding: 10px;
}

td img {
    width: 28em;
}


/* Class style */

.background-position {
    position: relative;
    height: 100%;
}

.main-img {
    background: url(../images/tower.png) no-repeat;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.secondary-img {
    background: url(../images/eff-nobg.png) no-repeat;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}

.no-bg {
    height: 100%;
}

.pop-bg {
    background-color: white;
    z-index: 4;
}

.secondary-img a:first-of-type {
    display: block;
    width: 20px;
    margin: 0 auto;
}

.main-navigation {
    position: sticky;
    position: -webkit-sticky;
    background-color: #AB0800;
    float: right;
    top: 30px;
    right: 0;
    width: 35%;
    z-index: 1;
}

.relative-nav {
    position: relative;
    z-index: 10;
}

.main-navigation ul {
    list-style: none;
    text-align: center;
    padding-inline-start: 0;
}

.main-navigation ul li {
    display: inline;
    padding: 16px 20px;
    margin-right: 10px;
    margin-left: 20px;
    font-family: 'Roboto', sans-serif;
}

.main-navigation ul li:hover {
    background-color: #AC423C;
}

.paris-container {
    box-sizing: border-box;
    position: relative;
    display: inline-flex;
    left: 20%;
    height: 12rem;
    top: -30%;
}

.text-paris {
    font-size: 9vw;
    letter-spacing: 0.5em;
}

._s {
    padding-left: 8%;
}

.animate-container {
    /* visibility: hidden; */
    align-items: center;
    height: 70vh;
    margin: 10px;
}

.animate-word {
    position: absolute;
    top: 290px;
    left: 220px;

    background-color: transparent;
    font-size: 1.5em;
    height: 70px;
    overflow: hidden;
    width: 40%;

}

.animate-container>div>div>h1 {
    margin-top: 0px;
    /* margin-bottom: 10%; */
}

.animate-word>div>div {
    /* padding: 0.25rem 0.75rem; */
    height: 2.81rem;
    /* margin-bottom: 2.81rem; */
    display: inline-block;
}

.animate-word div:first-child {
    animation: text-animation 12s infinite;
}

.separator {
    height: 10px;
}


.fa-angles-down,
.fa-angles-up {
    width: 20px;
    margin: 0 auto;
    color: #58A1CA;
    display: block;
    font-size: 2rem;
    position: relative;
    z-index: 3;
}

.fa-angles-down {
    bottom: 70px;
}

.fa-angles-up {
    padding-top: 30px;
}

.container-par {
    display: inline-flex;
}

.container-par img {
    width: 2.5em;
    padding-left: 0.5em;
    margin-top: -0.4em;
}

.text-content {
    display: block;
    margin: -5% 25%;
    min-height: 10px;
    overflow: hidden;
}

.gallery-content {
    display: block;
    margin: -5% 1%;
    min-height: 10px;
    overflow: hidden;
    text-align: center;
    text-align: -webkit-center;
}

.black-text {
    color: #141414;
    font-size: 4vw;
    font-weight: 700;
    text-align: center;
    margin: 0.5rem;
}

.w-50 {
    width: 50%;
}

.hide-element {
    visibility: hidden;
}

.hide-small {
    display: none;
}

.w-35 {
    width: 35%;
}

.text-content h1 {
    color: #141414;
    font-size: 4vw;
    font-weight: 700;
    margin-bottom: 10px;
}

.text-content p {
    color: #141414;
}

aside .fa-brands:hover {
    cursor: pointer;
    transform: scale(3);
    transition: 0.5s cubic-bezier(0.6, 0.03, 0.28, 0.98);
}

.table-gallery {
    /* background-color: #58a0ca33; */
    border: 2px;

}

img:hover .overlay-name {
    background-color: #58A1CA;
    color: aliceblue;
}

.loc-img:hover {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    transition: 1s ease;
}

.place-details {
    color: #141414;
    font-size: min(1.8vh, 2.5vw);
    /* font-size: 50%; */
    padding: 4%;
}

.vid-place {
    width: 20%;
    padding: 2%;
}

.info-place {
    display: flex;
    padding: 1%;
}

.the-places {
    font-size: 5vw;
    text-align: left;
    margin-left: 2vw;
}

.go-up-icon {
    background-image: linear-gradient(to left bottom, rgba(189, 189, 189, 0.79), rgba(56, 55, 55, 0.819), rgba(0, 0, 0, 0.529));
    border-radius: 50px;
    padding: 10px 20px 35px 15px;
    position: absolute;
    right: 5%;
    top: 50%;
}

.go-up-icon:hover {
    background: linear-gradient(to left bottom, rgba(255, 0, 0, 0.797), rgba(0, 0, 255, 0.819), rgba(255, 255, 255, 0.529));
}

.divider-content {
    display: block;
    margin: 0 auto;
    position: relative;
    width: 15%;
}

.small-font {
    font-size: 1.2vw;
}

.smaller-font {
    font-size: 0.9vw;
    padding: 2px 8px;
    background-color: rgb(180, 180, 180);
    border-radius: 50px;
    box-shadow: 1px 2px 1px 1px rgba(10, 10, 10, 0.768);

}

.icons {
    font-size: 1.5vw;
}

.icons i:hover {
    cursor: pointer;
    transform: scale(1.5);
    transition: 0.5s cubic-bezier(0.6, 0.03, 0.28, 0.98);
}

.m-5 {
    margin: 5% 2%;
}

.icons .fa-linkedin {
    color: rgb(30, 48, 50);
}

.icons .fa-facebook {
    color: rgb(133, 177, 255);
}

.icons .fa-instagram  {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
    border-radius: 4px;
}

.contact-content {
    text-align: center;
}

.user-container {
    column-gap: 150px;
    row-gap: 30px;
    display: inline-grid;
    grid-template-columns: auto auto;
    padding: 1px;
    text-align: center;
}

.user-container img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: 1px 2px 1px 1px rgba(10, 10, 10, 0.768);
}

.user-contact {
    margin: 5% 0;
}

.user-contact a:hover:first-of-type {
    background-color: rgba(255, 108, 108, 0.699);
    color: #1D4071;
}

.user-contact a:active:first-of-type {
    background-color: rgba(67, 67, 255, 0.964);
    box-shadow: 0px 0px 0px 0px;
    color: #ffffff;
}


/* ID's style */

#scroll-page {
    height: 100vh;
    width: 100vw;
    scroll-snap-type: y proximity;
    overflow-y: scroll;
    scroll-behavior: smooth !important;
}

#logo-exp {
    display: inline-block;
    position: relative;
    bottom: 70px;
    padding-top: 2.5rem;
    padding-left: 8%;
}

#logo-exp h4 {
    color: #42489C;
}

#logo-exp .container-par h4 {
    color: #FF4B55;
}

/* media-query style */

@media screen and (max-width: 700px) {
    table {
        display: inline;
    }

    tr>th {
        display: none;
    }

    tr>td {
        display: block;
        text-align: center;
    }

    tr {
        display: block;
    }

    td img {
        width: 30%;
    }

    .user-container {
        grid-template-columns: auto;
    }

    .height-30 {
        height: 100%;
    }
}

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

    /* Element style */
    a {
        font-size: 1vw;
    }

    /* Class style */
    .main-navigation {
        width: 17%;
        height: 23px;
    }

    .main-navigation ul {
        margin: 2px;
    }

    .main-navigation ul li {
        padding: 2px 0;
        margin: 0;
    }

    .animate-word {
        top: 180px;
        left: 90px;
    }

}

/* media styles */
@media screen and (max-width: 920px) {

    .info-place {
        display: block;
        text-align: center;
    }

    .the-places {
        text-align: center;
    }

    .place-details {
        margin: 0 auto;
        text-align: center;
    }

    .hide-large {
        display: none;
    }

    .hide-small {
        display: inline;
    }

    #info-eiffel,
    #info-lourve,
    #info-pantheon,
    #info-notre {
        height: 60em !important;
    }

}

@media screen and (max-width: 920px) {
    .w-35 {
        width: 100%;
    }
}

/* Animation style */
@keyframes text-animation {
    0% {
        margin-top: 0;
    }

    10% {
        margin-top: 0;
    }

    20% {
        margin-top: -2.62rem;
    }

    30% {
        margin-top: -6.62rem;
    }

    40% {
        margin-top: -12.62rem;
    }

    50% {
        margin-top: -17.62rem;
    }

    60% {
        margin-top: -12.62rem;
    }

    70% {
        margin-top: -6.62rem;
    }

    80% {
        margin-top: -2.62rem;
    }

    90% {
        margin-top: 0;
    }

    100% {
        margin-top: 0;
    }
}