@font-face {
    font-family: "Styrene Regular";
    src: url("//common.static.burberry.com/fonts/v5/BBY-Styrene/BurberryStyreneB-Regular.woff2");
    font-style: normal;
    -webkit-font-smoothing: antialiased;
}

@font-face {
    font-family: "Styrene Medium";
    src: url("//common.static.burberry.com/fonts/v5/BBY-Styrene/BurberryStyreneB-Medium.woff2");
    font-style: normal;
    -webkit-font-smoothing: antialiased;
}

@font-face {
    font-family: "Styrene Bold";
    src: url("//common.static.burberry.com/fonts/v5/BBY-Styrene/BurberryStyreneB-Bold.woff2");
    font-style: normal;
    -webkit-font-smoothing: antialiased;
}  

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

#scene-container {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100); 
    width: 100vw;
    font-family: "Styrene Regular";
    font-weight: normal;
}

header {
    text-align: center;
    margin-top: 4.5vh;
}

header img {
    width: 95.5vw;
}

p{
    font-size: 16px;
    line-height: 24px;
    margin: 0 26.6vw;
    text-align: left;
    font-weight: 400;
}

li{    
    margin: 0 25.6vw 
}

p.legal{ 
    text-align: center;
}

h1{
    margin-bottom: 52px;
    text-align: center;
    font-family: "Styrene Medium";
    font-weight: normal;
}


h2{
    font-size: 24px;
    margin-bottom: 0;
    margin-top: 32px;
    font-family: "Styrene Medium";
    font-weight: normal;
}

h4 {
    font-size: 24px;
    font-weight: 200;
    margin-top: 0;
    margin-bottom: 24px;
}

.intro-section-a{
    margin-top: 36px;
}

.animated-char{
    text-align: center;
    margin: 20px;
}

.animated-char img{
    width: 52px;
}

.animated-ballon{
    text-align: center;
    margin-top: 20px;
    margin-bottom: 72px;
}

.animated-ballon img{
    width: 144px;
 }
 
.arrow{
    width: 20px;
}

.amp {
    margin-bottom: 0.83em; 
}

.card{
    width: 30%;
    padding:1vw;
}

.card.communities{
    width:22%;
}

.card img{
    width: 100%;
}

.card video{
    width: 100%;
} 

.card-text{
    text-align: left;
    margin: 0;
}

.card-text.communities{
    margin: 32px 0;
}

.line-bottom{
    border-bottom: 1px solid #767676;
    display: block;
    margin: 52px 25vw 72px;
}

.line-top{
    border-bottom: 1px solid #767676;
    display: block;
    margin: 72px 25vw 52px;
}

.info-cards{
    display: flex ;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 36px;
}

button {
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    padding: 12px 24px;
    color: #fff;
    background-color: #000;
    font-family: "Styrene Regular";
    border-style: none;
}

button:hover{
    background-color: #666666;
}


.card-title.amp {
    margin-top: 32px;
    margin-bottom: 24px;
}

.link{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 72px;
}

p.subtitle{
    text-align: left;
}

.legal {
    padding-bottom: 100px;
}

.title-results, .title-communities{
    margin-bottom: 72px;
}

.subtitle-amplification{
    text-align: center;
    margin-bottom: 72px;
}

.subtitle-communities{
    text-align: center;
    margin-bottom: 72px;
}

.title-communities{
    margin-bottom: 24px;
}

.title-amplification{
    margin-bottom: 24px;
}


@media screen and (max-width: 767px){   
    p{
        font-size: 14px;
        margin: 0 3vw;     
        padding: 3%;
        line-height: 20px;
    }

    li{
        font-size: 14px;
        margin: 0 1vw;     
        padding: 3%;
        line-height: 20px;
    }

    h1, h2, h4 {
        font-size: 16px; 
    }

    h1, .title-results{
        margin-bottom: 40px;
    }

    .subtitle-amplification{
        margin-bottom: 40px;
    }
    
    .subtitle-communities{
        margin-bottom: 40px;
    }
    
    .title-communities{
        margin-bottom: 20px;
    }
    
    .title-amplification{
        margin-bottom: 20px;
    }
    
    h2 {
        margin-top: 20px;  
    }

    h4{
        margin-bottom: 20px;
    }

    header {
        margin-top:0;
    }
    header img {
        width: 100%;
    }

    p.weblink{
      width:200px; 
    }

    .intro-section-a{
        margin-top: 20px;
    }

    .card{
        width: 100%;
    }

    .info-cards{
        padding:0 3%;
    }

    .card.communities{
        width: 100%;
    }

    .card-text{
        padding: 0;
        margin-bottom: 36px;
    }

    .card-title.amp {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .animated-ballon{
        margin-bottom: 52px;
    }
    
    .link{
        margin-top: 36px;
    }

    .line-bottom, .line-top{
        margin-top: 40px;
        margin-bottom: 52px;
    }

    button{
        padding: 11px 24px;
        color: #fff;
        width: 245px;
    }

    .first-card-section{
        margin-bottom: -36px;
    }
    
}