@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@100;400;700;800&display=swap');

html, body{
    font-family: 'Fira Sans Condensed', sans-serif;
}

a, a:hover, a:focus{
    color: #ffffff;
    text-decoration: none;
    font-size: 17pt;
}

p{
    font-size: 15pt;
    line-height: 21pt;
}

h2{
    font-size: 34pt;
}

.subtitle{
    font-size: 24pt;
}

.underline::after{
    content:'';
    display: block;
    position: relative;
    height: 1px;
    width: 20px;
    border-bottom: 1px solid #ffffff;
    margin: 10px auto 10px 0px;
}

.text-end .underline::after{
    margin: 10px 0px 10px auto;
}

.note-right{
    overflow: visible;
    height: 0px;
    padding-top: 100%;
    -webkit-transform: rotate(-90deg);
}

.note-left{
    overflow: visible;
    height: 0px;
    padding-bottom: 100%;
    margin-top: 100%;
    -webkit-transform: rotate(-90deg);
}

/*
 * COLORS
 */
.text-blue-water, .text-blue-water:hover, .text-blue-water:focus{
    color: #006876;
}
    .text-blue-water.underline::after{
        border-bottom-color: #006876;
    }

.text-blue-sea, .text-blue-sea:hover, .text-blue-sea:focus{
    color: #00808d;
}
    .text-blue-sea.underline::after{
        border-bottom-color: #00808d;
    }

.text-blue-duck, .text-blue-duck:hover, .text-blue-duck:focus{
    color: #237883;
}
    .text-blue-duck.underline::after{
        border-bottom-color: #237883;
    }

.text-orange, .text-orange:hover, .text-orange:focus{
    color: #ee8032;
}
    .text-orange.underline::after{
        border-bottom-color: #ee8032;
    }

.text-orange-dark, .text-orange-dark:hover, .text-orange-dark:focus{
    color: #d95017;
}
    .text-orange-dark.underline::after{
        border-bottom-color: #d95017;
    }

.text-green, .text-green:hover, .text-green:focus{
    color: #a5c400;
}
    .text-green.underline::after{
        border-bottom-color: #a5c400;
    }

.text-green-dark, .text-green-dark:hover, .text-green-dark:focus{
    color: #8da700;
}
    .text-green-dark.underline::after{
        border-bottom-color: #8da700;
    }



/*
 * BACKGROUNDS
 */
.bg-green{
    background: rgba(106, 176, 35, 0.9);
}
.bg-light-blue{
    background: rgba(219, 237, 233, 0.9);
}
.bg-yellow-green{
    background: rgba(165, 196, 0, 1);
}
.bg-white-50{
    background: rgba(255, 255, 255, 0.5);
}
.bg-white-70{
    background: rgba(255, 255, 255, 0.7);
}
.bg-white-80{
    background: rgba(255, 255, 255, 0.8);
}
.bg-light-orange{
    background: rgba(254, 221, 171, 0.9);
}
.bg-dark-blue{
    background: rgba(17, 128, 142, 1);
}

/*
 * SECTIONS
 */

.content-left, .content-right{
    padding: 77px;
}


header{
    background: url(../img/bg-header.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #ffffff;
    padding-top: 140px;
}
    header .content-left{
        padding-top: 120px;
    }
    header .content-right{
        padding-left: 40px;
    }

#editorial{
    background: url(../img/bg-body-1.jpg);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: auto 100%;
}

#cooperer .bg-custom-cooperer{
    background: url(../img/bg-body-2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}
    #cooperer .content-right{
        padding-top: 20px;

    }

#transformer-soutenir{
    background: url(../img/bg-body-3.jpg);
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: auto 100%;
}


#uipp-2030{
    background: url(../img/bg-body-4.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
    #uipp-2030 .bg-custom-uipp-2030{
        background: url(../img/bg-body-4-b.jpg);
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 100% auto;
    }

#organisation{
    background: url(../img/bg-body-5.jpg);
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: auto;

}




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

    a, a:hover, a:focus{
        font-size: 15pt;
    }


    p{
        font-size: 13pt;
        line-height: 19pt;
    }

    h2{
        font-size: 24pt;
    }

    .subtitle{
        font-size: 18pt;
    }


    .content-left, .content-right{
        margin-top: 30px;
        padding: 15px;
    }


}