html {
    scroll-behavior: smooth;
}

body {
    background-color: #2f3c51;
    font-family: "Montserrat", serif;
}

h1 {
}

h2 {
}

h3 {
}

p {
    font-size: 14px;
    line-height: 1.25rem;
}

a {
}

a:hover {
}

section.header {
    height: 85px;
    margin: 0 auto;
}

header {
    position: relative;
    margin: 0 auto;
}

.header__logo {
    margin: 0 0 0 12%;
}

.main-nav {
    position: absolute;
    right: 115px;
    top: 20px;
}


.call-out {
    position: relative;
    top: 30px;
    left: 175px;
    height: 185px;
    width: 310px;
    padding: 30px 0 0 0;
    background-image: url("../images/bg-hero-call-out.png");
    background-repeat: repeat;
    text-align: center;
}

.call-out .hero-beats {
    position: relative;
    left: -30px;
    margin: 0 0 15px 0;
}

.call-out h2 {
    font-family: "Montserrat-ExtraBold", serif;
    color: #ffffff;
    margin: 0 0 5px 0;
    font-size: 18px;
}

.call-out h3 {
    color: #ffffff;
    margin: 0;
    font-size: 18px;
    margin: 0 0 0 -17px;
}


.media-player {
    position: relative;
    width: 800px;
    padding: 50px 0 0 215px;
}

@media (max-width: 1200px) {
    .main-nav {
        right: 100px;
    }
}

@media (max-width: 900px) {
    .main-nav {
        left: 10px;
        top:80px;
    }
    section.header {
        height: 125px;
        margin: 0 auto;
    }
    .call-out {
        left: 15px;
    }

    
.media-player {
    width: auto;
}
}

.main-nav ul {
    display: flex;
}

.main-nav li {
    list-style: none;
    text-transform: uppercase;
    margin: 0 0 0 75px;
    font-size: 12px;
}

.main-nav li a {
    color: #fff;
    text-decoration: none;
}

.hero-outer {
    min-height: 385px;
    background-image: url("../images/bg-hero.jpg");
    background-repeat: no-repeat;
    background-position: center 75px;
    background-attachment: fixed;
}

.hero-inner {
}


.main-content {
    display: flex;
    padding: 0 120px;
    background-color: #ffffff;
}

@media (max-width: 768px) {
    .call-out{
        display:none;
    }
    .main-content {
        display: block;
        padding: 60px;
    }
        .hero-outer {
    min-height: 385px;
    background-image: url("../images/bg-mobile.jpg");
    background-position: center 75px;
    
}
}

.main-content .left {
    width: 55%;
    padding: 80px 20% 5% 5%;
}

@media (max-width: 768px) {
    .main-content .left {
        padding: 0;
    }
}

.main-content .left h2 {
    margin: 0;
}

@media (max-width: 768px) {
    .main-content .left,
    .main-content .tright {
        width: 100%;
    }
    
}

.main-content .right {
    width: 45%;
    padding: 125px 0 0 0;
    min-height: 400px;
    background-color: #d1d3d4;
}

@media (max-width: 768px) {
    .main-content .right {
        width: 100%;
        margin: 25px 0 0 0;
        padding: 35px 0;
        min-height: auto;
    }
}

.main-content .right img {
    width: 85%;
    display: block;
    margin: 0 auto;
}

.music-player-outer {
    display: flex;
    height: 350px;
    width: 100%;
    background-color: #db6d68;
}

.music-player-inner {
    /* max-width: 1200px; */
    margin: 50px 0;
    padding: 0 12.5%;
}

.music-player-inner h2,
.music-player-inner h3,
.music-player-inner p {
    font-family: "Montserrat-ExtraBold", serif;
    color: #fff;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 0.2rem;
    margin: 0 0 15px 0;
}

.music-player-inner h3 {
    font-family: "Montserrat-ExtraBold", serif;
    font-size: 14px;
    margin: 0 0 15px 0;
}

.music-player-inner p {
    font-family: "Montserrat-Medium", serif;
    font-size: 14px;
    margin: 0 0 10px 0;
}

.music-player-inner .music-player {
    width: 100%;
    height: auto;
    margin: 20px 0 0 0;
}


.album-cover {
    position: absolute;
    left: 0;
    top: 0;
}

.play-button {
    position: absolute;
    left: 64px;
    top: 58px;
    z-index: 10;
    cursor: pointer;
}

.social-blocks-outer {
    width: 100%;
    background-color: #ffffff;
}

.social-blocks-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 70px 0;
    width: 900px;
}

@media (max-width: 900px) {
    .social-blocks-inner {
        width: auto;
    }
}

@media (max-width: 500px) {
    .social-blocks-inner {
        display: block;
        height: auto;
        padding: 35px 0;
    }
}

.social-blocks-inner .item img {
    display: block;
    width: 80%;
    height: auto;
    margin: 0 25px 0 0;
    transition: all 0.5s ease;
}

@media (max-width: 650px) {
    .social-blocks-inner .item img {
        margin: 0 auto 25px auto;
    }
}

.social-blocks-inner .item img:hover {
    box-shadow: 0 2px 6px #000;
}

footer {
    margin: 0 auto;
    height: 175px;
    text-align: center;
}

footer .footer__logo {
    margin: 50px auto 0 auto;
}