@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800&display=swap');
* {
	padding: 0;
	margin: 0;
	outline: 0;
}
/* Reset */
html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-webkit-box-sizing: border-box;
    box-sizing: border-box;
}
*,
*:before,
*:after {
	-webkit-box-sizing: inherit;
    box-sizing: inherit;
}
button:focus{
    outline: none;
}
body{
    font-family: 'Montserrat', sans-serif;
    background: rgb(226,221,227);
    background: linear-gradient(318deg, rgba(226, 221, 227, 0.31) 0%, rgba(237,234,241, 0.31) 100%);
    color: #2B2B2B;
    width: 100vw;
    overflow-x: hidden;
}
p a{
    color: #439F7A;
    text-decoration: underline;
}
span a{
    color: #FFF;
    text-decoration: underline;
}
h1, h2, h3, p, a, span, button{
    font-family: 'Montserrat', sans-serif;
    text-align: left;
    font-weight: 500;
}
.flex{
    display: flex;
    align-items: center;
    justify-content: center;
}
.green{
    color: #439F7A;
    font-weight: 700;
}

.top-wave{
    background-image: url('../images/shape-top-mob.png');
    background-position: top;
    background-size: contain;
    background-repeat: no-repeat;
}
.mobile{
    display: block;
}  
.desktop{
    display: none;
}  

.btn-vvsa{
    text-decoration: none;
    color: white;
    font-weight: 600;
    padding: 10px 15px;
    background-color: #439F7A;
    border-radius: 25px;
    outline: none;
    border: none;
}

#video{
    background-color: #2B2B2B;
    padding: 20px;
}
#video video{
    width: 100%;
    max-height: 100vh;
    height: 100vh;
}
#text{
    padding: 40px 15vw;
    text-align: center;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    min-height: 70vh;
    justify-content: space-evenly;
}
#text h3{
    text-align: center;
    font-weight: 600;
    font-size: 1.3em;
}
#text .tappe{
    display: flex;
    flex-flow: column nowrap;
    /* margin: 20px calc(2vw * 20px); */
    justify-content: space-evenly;
    width: 100%;
}
#text .tappe .tappa{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-evenly;
    position: relative;
}
#text .tappe .tappa:not(.final)::before{
    content: '';
    border-left: 1px dashed #2B2B2B;
    margin: 0px 10px;
    height: 80%;
    width: 1px;
    position: absolute;
    z-index: -1;
    left: 0px;
}
#text .tappe .tappa .stop{
    width: 21px;
}
#text .tappe .tappa .stop .dot{
    width: 21px;
    height: 21px;
    border: 5px solid #439F7A;
    background-color: white;
    position: absolute;
    border-radius: 25px;
    top: 0;
    box-shadow: #f7f6f8 0px 1px 0px 6px;
}
#text .tappe .tappa.final .stop .dot{
    background-color: #439F7A;
}

#text .tappe .tappa p{
    width: calc(100% - 21px);
    margin-bottom: 30px;
    padding: 0px 20px;
}
.reviews{
    display: flex;
    flex-flow: column nowrap;
    padding: 20px;
    align-items: center
}
.reviews h2{
    width: 100%;
    text-align: center;
}
.reviews .review{
    width: 80%;
    margin: 20px;
    text-align: center;
}
.reviews .review img{
    width: 100%;
    max-width: 600px;
    border-radius: 12px;
}
#footer{
    width: 100%;
    padding: 10px;
}
#footer p{
    padding: none;
    font-size: 0.9em;
    text-align: center;
}
@keyframes fadeIn {
    100%{
        opacity: 1;
        /* transform: scale(1); */
        /* transform: translate(0); */
    }
}
@keyframes fadeLeft {
    100%{
        opacity: 1;
        transform: translate(0);
    }
}
@media screen and (orientation: landscape) {
    .mobile{
        display: none;
    }  
    .desktop{
        display: block;
    }  
}