body, html {
    height: 100%;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    scroll-behavior: smooth;
}

a {
    color: inherit;
    text-decoration: inherit; /* no underline */

    -webkit-transition: color .5s linear, background-color .5s linear;
    -moz-transition: color .5s linear, background-color .5s linear;
    -ms-transition: color .5s linear, background-color .5s linear;
    -o-transition: color .5s linear, background-color .5s linear;
    transition: color .5s linear, background-color .5s linear;
}

div {
    -webkit-transition: background-image 1.5s linear;
    -moz-transition: background-image 1.5s linear;
    -ms-transition: background-image 1.5s linear;
    -o-transition: background-image 1.5s linear;
    transition: background-image 1.5s linear;    
}

.background {
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.backgroundhead {
    background-image: url("image/tipaza.jpg");
}

.title {
    top: 3vw;
    left: 3vw;
}

.title h1 {
    /* Font attributes */
    font-size: 5vw;
    font-weight: 900;
    color:rgba(247, 247, 247, 0.9);
    vertical-align: bottom;
    line-height: 5vw;
    height: 5vw;

    margin: 0;
    padding: 0;
}

.menu {
    /* Font attributes */
    font-size: 3vw;
    font-weight: 900;
    color:rgba(247, 247, 247, 0.9);
    margin: 0;
    padding: 0;
    text-align: right;
    top: 3vw;
    right: 3vw;
}

.menu a {
    font-size: 3vw;
    padding: 0 0 0 1vw;
}

.fl {
    /* Float that header */
    position: absolute;
    z-index: 10;
    margin: 0;
    padding: 0;
    overflow-wrap: break-word;
}

.fl a:hover {
    color:rgba(47, 62, 70, 0.9);
}

.main {
    width: 100%;
    display: inline-block;
    position: relative;
    top: 100vh;
    background:rgba(247, 247, 247, 1);
    background-color: #f5f1ed;
    font-size: 2vw;
}

.main a {
    color: #778da9;
}

.main a:hover {
    color: #1b263b;
}

.main h2 {
    font-size: calc(16px + 3vw);
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

.below {
    padding: 5vh 10vw 5vh 10vw;
    position: relative;
    min-height: 100vh;
}

.within {
    padding: 5vh 10vw 5vh 10vw;
    min-height: 100vh;
}

.written {
    font-family:Georgia, 'Times New Roman', Times, serif;
    margin: 1vw;
}

.written p{
    font-size: calc(16px + 1vw);
}

.written h2{
    font-size: calc(20px + 1vw);
}

.fullvideo {
    padding-top: 56.25%;
    position: relative;
}

.floattopleft {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.chasing-monsoon-bg {
    background-image: url('image/chasing_monsoon.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    height: 100vh;
}

.las-aguas-bg {
    background-image: url('image/lasaguas_dry.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    height: 100vh;
}

.las-aguas-bg:hover {
    background-image: url('image/lasaguas_wet.jpg');
}

.between-the-fjords-bg {
    background-image: url('image/between_the_fjords.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    height: 100vh;
}

.las-aguas-bg h3{
    text-align: center;
}