.youtube-popup {
    background: #f8f8f8;
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    color: #333333;
    font: 14px "Roboto", Arial, sans-serif;
    padding: 20px;
    width: 450px;

    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 99999;
}

.youtube-popup__headline {
    font-weight: bold;
    margin: 0 0 5px 0;
}

.youtube-popup__text {
    margin: 0 0 10px 0;
}

.youtube-popup__button-container {
    text-align: center;
}

.youtube-popup__button {
    background: #FF8C00;
    border-radius: 3px;
    color: #ffffff;
    display: inline-block;
    padding: 13px 50px;
    margin: 0 auto;
    text-decoration: none;
}

.youtube-popup__button:hover,
.youtube-popup__button:visited,
.youtube-popup__button:active {
    text-decoration: none;
}

.youtube-popup__close {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNyAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGQ9Ik05LjQyNDUgOC41TDE2LjgwODggMS4xMTcwNUMxNy4wNjM3IDAuODYwNzU1IDE3LjA2MzcgMC40NDc1NCAxNi44MDg4IDAuMTkxMjQzQzE2LjU1MjUgLTAuMDYzNzQ3NSAxNi4xMzkyIC0wLjA2Mzc0NzUgMTUuODgyOSAwLjE5MTI0M0w4LjUgNy41NzU1TDEuMTE3MDUgMC4xOTEyNDNDMC44NjA3NTUgLTAuMDYzNzQ3NSAwLjQ0NzU0IC0wLjA2Mzc0NzUgMC4xOTEyNDMgMC4xOTEyNDNDLTAuMDYzNzQ3NSAwLjQ0NzU0IC0wLjA2Mzc0NzUgMC44NjA3NTUgMC4xOTEyNDMgMS4xMTcwNUw3LjU3NTUgOC41TDAuMTkxMjQzIDE1Ljg4MjlDLTAuMDYzNzQ3NSAxNi4xMzkyIC0wLjA2Mzc0NzUgMTYuNTUyNSAwLjE5MTI0MyAxNi44MDg4QzAuMzE5MzkyIDE2LjkzNTYgMC40ODY3NyAxNi45OTk3IDAuNjU0MTQ4IDE2Ljk5OTdDMC44MjE1MjYgMTYuOTk5NyAwLjk4ODkwNCAxNi45MzU2IDEuMTE3MDUgMTYuODA4OEw4LjUgOS40MjQ1TDE1Ljg4MjkgMTYuODA4OEMxNi4wMTExIDE2LjkzNTYgMTYuMTc4NSAxNi45OTk3IDE2LjM0NTkgMTYuOTk5N0MxNi41MTMyIDE2Ljk5OTcgMTYuNjgwNiAxNi45MzU2IDE2LjgwODggMTYuODA4OEMxNy4wNjM3IDE2LjU1MjUgMTcuMDYzNyAxNi4xMzkyIDE2LjgwODggMTUuODgyOUw5LjQyNDUgOC41WiIgZmlsbD0iYmxhY2siLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMCI+CjxyZWN0IHdpZHRoPSIxNyIgaGVpZ2h0PSIxNi45OTk3IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=) no-repeat center center/17px 17px;
    cursor: pointer;
    display: block;
    width: 17px;
    height: 17px;

    position: absolute;
    top: 10px;
    right: 10px;
}

.youtube-popup-video {
    position: relative;
}

.youtube-popup-video__href {
    display: block;
    text-decoration: none;
    margin: 0 0 16px 0;
}

.youtube-popup-video__preview {
    border: none;
    display: block;
    width: 100%;
}

.youtube-popup-video__bg {
    background: rgba(0, 0, 0, 0.3) url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48Zz48cGF0aCBkPSJNMjU1LjcsNDQ2LjNjLTUzLjMsMC4zLTEwNi42LTAuNC0xNTkuOC0zLjNjLTE3LjMtMS0zNC42LTIuNS01MC4zLTExYy0xMC41LTUuNy0xOC42LTEzLjYtMjMuNy0yNC44ICAgQzEzLjMsMzg4LjYsMTAuNiwzNjksOSwzNDljLTMuNC00MS4zLTMuNi04Mi42LTEuOC0xMjMuOGMwLjktMjEuOSwxLjYtNDQsNi44LTY1LjVjMi04LjQsNC45LTE2LjYsOC44LTI0LjQgICBjOS4yLTE4LjMsMjUuMi0yNy40LDQ0LjUtMzEuMmMxNi4yLTMuMiwzMi44LTMuMSw0OS4zLTMuOGM1NS45LTIuMywxMTEuOS0zLjUsMTY3LjktMi45YzQzLjEsMC41LDg2LjMsMS42LDEyOS40LDMuOCAgIGMxMy4zLDAuNywyNi43LDAuOSwzOS40LDUuNmMxNy4yLDYuNCwzMCwxNy4yLDM2LjksMzQuN2M2LjcsMTYuOCw5LjMsMzQuMiwxMC43LDUyLjFjMy45LDQ4LjYsNCw5Ny4yLDAuOCwxNDUuOCAgIGMtMS4xLDE2LjQtMi4yLDMyLjgtNi41LDQ4LjljLTkuNywzNy0zMi44LDUxLjUtNjYuNyw1My44Yy0zNi4yLDIuNC03Mi41LDMuNy0xMDguOCw0LjJDMjk4LjQsNDQ2LjUsMjc3LDQ0Ni4zLDI1NS43LDQ0Ni4zeiAgICBNMjAzLjIsMzQ0YzQ4LjQtMjYuNSw5Ni4yLTUyLjcsMTQ0LjgtNzkuM2MtNDguNy0yNi43LTk2LjUtNTIuOC0xNDQuOC03OS4zQzIwMy4yLDIzOC43LDIwMy4yLDI5MSwyMDMuMiwzNDR6IiBmaWxsPSIjREQyQzI4Ii8+PHBhdGggZD0iTTIwMy4yLDM0NGMwLTUzLDAtMTA1LjMsMC0xNTguNWM0OC4zLDI2LjQsOTYuMSw1Mi42LDE0NC44LDc5LjNDMjk5LjQsMjkxLjQsMjUxLjYsMzE3LjUsMjAzLjIsMzQ0eiIgZmlsbD0iI0ZFRkRGRCIvPjwvZz48L3N2Zz4=') no-repeat center center;
    background-size: 100px 100px;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.youtube-popup-video:hover .youtube-popup-video__bg {
    background: rgba(0, 0, 0, 0.2) url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48Zz48cGF0aCBkPSJNMjU1LjcsNDQ2LjNjLTUzLjMsMC4zLTEwNi42LTAuNC0xNTkuOC0zLjNjLTE3LjMtMS0zNC42LTIuNS01MC4zLTExYy0xMC41LTUuNy0xOC42LTEzLjYtMjMuNy0yNC44ICAgQzEzLjMsMzg4LjYsMTAuNiwzNjksOSwzNDljLTMuNC00MS4zLTMuNi04Mi42LTEuOC0xMjMuOGMwLjktMjEuOSwxLjYtNDQsNi44LTY1LjVjMi04LjQsNC45LTE2LjYsOC44LTI0LjQgICBjOS4yLTE4LjMsMjUuMi0yNy40LDQ0LjUtMzEuMmMxNi4yLTMuMiwzMi44LTMuMSw0OS4zLTMuOGM1NS45LTIuMywxMTEuOS0zLjUsMTY3LjktMi45YzQzLjEsMC41LDg2LjMsMS42LDEyOS40LDMuOCAgIGMxMy4zLDAuNywyNi43LDAuOSwzOS40LDUuNmMxNy4yLDYuNCwzMCwxNy4yLDM2LjksMzQuN2M2LjcsMTYuOCw5LjMsMzQuMiwxMC43LDUyLjFjMy45LDQ4LjYsNCw5Ny4yLDAuOCwxNDUuOCAgIGMtMS4xLDE2LjQtMi4yLDMyLjgtNi41LDQ4LjljLTkuNywzNy0zMi44LDUxLjUtNjYuNyw1My44Yy0zNi4yLDIuNC03Mi41LDMuNy0xMDguOCw0LjJDMjk4LjQsNDQ2LjUsMjc3LDQ0Ni4zLDI1NS43LDQ0Ni4zeiAgICBNMjAzLjIsMzQ0YzQ4LjQtMjYuNSw5Ni4yLTUyLjcsMTQ0LjgtNzkuM2MtNDguNy0yNi43LTk2LjUtNTIuOC0xNDQuOC03OS4zQzIwMy4yLDIzOC43LDIwMy4yLDI5MSwyMDMuMiwzNDR6IiBmaWxsPSIjREQyQzI4Ii8+PHBhdGggZD0iTTIwMy4yLDM0NGMwLTUzLDAtMTA1LjMsMC0xNTguNWM0OC4zLDI2LjQsOTYuMSw1Mi42LDE0NC44LDc5LjNDMjk5LjQsMjkxLjQsMjUxLjYsMzE3LjUsMjAzLjIsMzQ0eiIgZmlsbD0iI0ZFRkRGRCIvPjwvZz48L3N2Zz4=') no-repeat center center;
    background-size: 100px 100px;
}

#youtube-popup-video__container {
    margin: 0 0 10px 0;
}

.youtube-popup-video__container-fixed {
    position: fixed;
    left: 10px;
    bottom: 0;
    z-index: 199999;
    width: 480px;
    height: auto;
}

.youtube-popup-video__container-fixed iframe {
    z-index: 199999;
}

.youtube-popup-video__button-close {
    background: #FD8C25 url('../img/cross.svg') no-repeat center center;
    width: 26px;
    height: 26px;
    margin: 0 0 5px auto;
    cursor: pointer;
}

.youtube-popup-video__button-close-hidden {
    display: none;
}