@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
body {
    font-family: calibri;
    /*font-family: 'Poppins';*/
    margin: 0;
    padding: 0;
    color: #444;
    background-color; #fff;
    box-sizing: border-box;
}
.parallax1 {
    background: url(./img/bg.webp);
    background-attachment: fixed;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.parallax2 {
    background: url(./img/flowers-01.webp);
    background-attachment: fixed;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.parallax3 {
    background: url(./img/flowers-02.webp);
    background-attachment: fixed;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.parallax1 h1, .parallax2 h1, .parallax3 h1 {
    color: #ffffff;
    font-size: 70px;
    text-align: center;
    padding: 0 20px;
}
.mask{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,.5);
    z-index: 2;
}
.parallax-content {
    z-index: 3;
}
.page-content {
    width: auto;
    margin: 20px auto;
    padding: 10px 20px; 
}
@media screen and (min-device-width: 961px) and (max-device-width: 1200px) { 
    .parallax1 h1, .parallax2 h1, .parallax3 h1 {font-size: 62px;}
}
@media screen and (min-device-width: 769px) and (max-device-width: 960px) { 
    .parallax1, .parallax2, .parallax3 {width: 100%;}
    .parallax1 h1, .parallax2 h1, .parallax3 h1 {font-size: 54px;}
}
@media screen and (min-device-width: 481px) and (max-device-width: 768px) { 
    .parallax1, .parallax2, .parallax3 {width: 100%;}
    .parallax1 h1, .parallax2 h1, .parallax3 h1 {font-size: 46px;}
}
@media only screen and (max-device-width: 480px) {
    .parallax1 h1, .parallax2 h1, .parallax3 h1 {font-size: 38px;}
    .parallax1, .parallax2, .parallax3 {width: 100%;}
}