<!--HTML-->

<div id="main_entertainment">
<div class="menu1">
<br id="tab2"/><br id="tab3"/>
<a href="#tab1">Сериалы</a><a href="#tab2">Coming</a><a href="#tab3">Coming</a>
 
<div id="escroll"><div class="e_vkl_1">
<genre_tv>Драма</genre_tv>

<div class="elements-block">

<div id="myModal1" class="modal">
<div class="modal__content">
<div class="modal-header">
<span class="close" data-modal="myModal1">&times;</span>
</div>
<div class="modal-body">
<modal-text>1. обанкротиться</modal-text>
<modal-text>2. вести собственное расследование</modal-text>
<modal-text>3. нанять секретаря</modal-text>
<modal-text>4. сломать четвертую стену</modal-text>
<modal-text>5. путешествовать на поезде</modal-text></div>
<div class="modal-body_2">
<modal-text>1. кинуть в "осторожно, спойлеры" 5 фильмов с Брюсом Уиллисом</modal-text>
<modal-text>2. запостить 3 фото в соцсети</modal-text>
<modal-text>3. поставить 10 и более плюсов за день</modal-text>
<modal-text>4. посвятить кому-нибудь 3 числа сообщений/репутации</modal-text>
<modal-text>5. провести во флуде допрос (например: где мой пост?!)</modal-text>
</div></div></div>
<button class="myBtn" data-modal="myModal1" ><img src="https://i.imgur.com/resblcf.jpg" id="back-img" class="img-modal"></button>

<button class="myBtn" data-modal="myModal2" ><img src="https://i.imgur.com/HhUAkLb.jpg" id="back-img" class="img-modal"></button>
<div id="myModal2" class="modal">
<div class="modal__content">
<div class="modal-header">
<span class="close" data-modal="myModal2">&times;</span>
</div>
<div class="modal-body">
<modal-text>1. прийти в гости и выпить бутылку вина</modal-text>
<modal-text>2. что-нибудь нарисовать и выдать за произведение известного художника</modal-text>
<modal-text>3. что-то украсть и делать вид, что ничего не было</modal-text>
<modal-text>4. жить в чужом доме</modal-text>
<modal-text>5. сходить в музей</modal-text>
</div>
<div class="modal-body_2">
<modal-text>1. очень долго и активно нудеть и втирать бесполезную информацию, выдавая ее за очень полезную </modal-text>
<modal-text>2. представляться во флуде вымышленным именем </modal-text>
<modal-text>3. в игре "слова" использовать только слова, связанные с искусством (20 сообщений) </modal-text>
<modal-text>4. выставить в соцсеть фото персонажа в шляпе [если такой нет, то просто фото шляпы] </modal-text>
<modal-text>5. использовать в трех постах слова [на выбор]: вино, картины, костюм-тройка, мошенник; повторяться можно </modal-text>

</div></div></div>

<button class="myBtn" data-modal="myModal3" ><img src="https://i.pinimg.com/originals/93/6c/29/936c29177d8c7531d9dc50fb35594bc2.jpg" id="back-img" class="img-modal"></button>
<div id="myModal3" class="modal">
<div class="modal__content">
<div class="modal-header">
<span class="close" data-modal="myModal3">&times;</span></div>
<div class="modal-body">
<modal-text>1. побывать в зале суда</modal-text>
<modal-text>2. получить визитку адвоката</modal-text>
<modal-text>3. стать соучастником убийства</modal-text>
<modal-text>4. подставить другого </modal-text>
<modal-text>5. побывать на вечеринке у костра</modal-text></div>
<div class="modal-body_2">
<modal-text>1. нафлудить 100 и более сообщений за неделю</modal-text>
<modal-text>2. открыть эпизод на 5 и более человек</modal-text>
<modal-text>3. рассуждать во флуде об идеальном убийстве</modal-text>
<modal-text>4. набить в точках 20 сообщений за 3 дня</modal-text>
<modal-text>5. кинуть в "пой мне еще" 3 оста из сериала</modal-text>
</div></div></div>


<button class="myBtn" data-modal="myModal5" ><img src="https://i.imgur.com/Ypuzre6.jpg" id="back-img" class="img-modal"></button>
<div id="myModal5" class="modal">
<div class="modal__content">
<div class="modal-header">
<span class="close" data-modal="myModal5">&times;</span></div>
<div class="modal-body">
<modal-text>1. следить за копом</modal-text>
<modal-text>2. устроить вечер покера</modal-text>
<modal-text>3. купить радиоуправляемую игрушку</modal-text>
<modal-text>4. прятаться от бывшей/бывшего</modal-text>
<modal-text>5. приготовить новое шедевральное, но 
совершенно несъедобное блюдо</modal-text></div>
<div class="modal-body_2">
<modal-text>1. выдвигать во флуде невероятные теории заговора</modal-text>
<modal-text>2. уверять всех, что вас похитили инопланетяне</modal-text>
<modal-text>3. нафлудить 150 сообщений за день</modal-text>
<modal-text>4. кидать в "пой мне еще" песни элвиса пресли 3 дня подряд</modal-text>
<modal-text>5. поставить статус "nevermore"</modal-text>
</div></div></div>

<button class="myBtn" data-modal="myModal6" ><img src="https://i.imgur.com/NPEUQyq.jpg" id="back-img" class="img-modal"></button>
<div id="myModal6" class="modal">
<div class="modal__content">
<div class="modal-header">
<span class="close" data-modal="myModal6">&times;</span></div>
 <div class="modal-body">
<modal-text>1. обнаружить человеческие останки</modal-text>
<modal-text>2. наблюдать за следствием</modal-text>
<modal-text>3. дать знакомому дурацкое прозвище</modal-text>
<modal-text>4. принести кофе на работу</modal-text>
<modal-text>5. общаться с подозреваемым</modal-text></div>
 <div class="modal-body_2">
<modal-text>1. один день писать сообщения только в комментариях к плюсам, не используя обычные сообщения во флуде</modal-text>
<modal-text>2. пофлудить в чьей-то личной теме</modal-text>
<modal-text>3. нафлудить больше 200 сообщений за неделю</modal-text>
<modal-text>4. оставить комментарий в чужой соцсети ("подписаться", прокомментировать от лица персонажа) </modal-text>
<modal-text>5. выставить фото происшествия в своей соцсети</modal-text>
</div></div></div>


<div id="myModal7" class="modal">
<div class="modal__content">
<div class="modal-header">
<span class="close" data-modal="myModal7">&times;</span></div>
<div class="modal-body">
<modal-text>1. помочь следствию</modal-text>
<modal-text>2. так помогать следствию, что оно зашло в тупик</modal-text>
<modal-text>3. пригласить участок на чай и забыть об этом</modal-text>
<modal-text>4. пролить чай на важные документы</modal-text>
<modal-text>5. быть ошибочно арестованным</modal-text></div>
<div class="modal-body_2">
<modal-text>1. представляться во флуде любым женским именем вместо своей фамилии (гг звали Патрик Джейн)</modal-text>
<modal-text>2. все напитки в разговоре заменять на чай (вообще все)</modal-text>
<modal-text>3. выставить в соцсети фоточки с чаем</modal-text>
<modal-text>4. набить 100 сообщений в смайлах</modal-text>
<modal-text>5. оставить 20 забавных комментариев к плюсам</modal-text>
</div></div></div>
<button class="myBtn" data-modal="myModal7" ><img src="https://i.imgur.com/91R0NfV.jpg" id="back-img" class="img-modal"></button>


<button class="myBtn" data-modal="myModal4" ><img src="https://i.imgur.com/UAXOINI.jpg" id="back-img" class="img-modal"></button>
<div id="myModal4" class="modal">
<div class="modal__content">
<div class="modal-header">
<span class="close" data-modal="myModal4">&times;</span></div>
<div class="modal-body">
<modal-text>1. украсть и съесть чужой пудинг</modal-text>
<modal-text>2. посетить вечеринку нудистов</modal-text>
<modal-text>3. скурить улику</modal-text>
<modal-text>4. подружиться с чужим ребенком</modal-text>
<modal-text>5. не верить в правду</modal-text></div>
<div class="modal-body_2">
<modal-text>1. обращаться к кому-то во флуде как "детектив!"</modal-text>
<modal-text>2. нафлудить более 50 сообщений за день </modal-text>
<modal-text>3. поставить <a href="https://i.imgur.com/xcXKJIU.png">&nbsp;&nbsp;&nbsp;плашку</a></modal-text>
<modal-text>4. кинуть в "пой мне еще" 5 остов из сериала</modal-text>
<modal-text>5. написать заявку с внешностью любого актера из сериала "Люцифер"</modal-text>
</div></div></div>



</div></div>

</div>
 
 <div class="e_vkl_2">вкладка 2</div>
 
 <div class="e_vkl_3">вкладка 3</div>

</div>
</div>

<style>

.modal {
    z-index: 1050;
    display: none;
    background-image: url(https://i.imgur.com/deLe44N.png);
    width: 657px;
    height: 400px;
    left: -20px;
    position: absolute;
    top: -25px;
    background-size: 100%;
}

#escroll {
    overflow: auto;
    width: 657px;
    height: 400px;
    position: relative;
    left: 84px;
    top: -84px;
}

text-style {
position: relative;
    top: 30px;
    left: 40px;
    line-height: 2;
    color: #fff;
    font-size: 12px;
}

.week-code {
width: 70px;
    height: 25px;
    position: relative;
    left: -100px;
    top: 90px;
    background-color: #a2c2fe;
    color: #ffffff!important;
    text-transform: uppercase;
    border-image: linear-gradient(20deg, #ffffff 38%, #ffffff87 65%);
    border-image-slice: 1;
    cursor: pointer;
    outline: none;
    font-size: 13px;
    text-shadow: 0 0 1px white;
}

.week-code:hover {
    background-color: #ad98d5;
}

style-close {
    position: relative;
    top: 195px;
    left: -188px;
    z-index: 1;
    background: #9bb8fd;
    text-shadow: 0 0 8px #eaf1ff;
    border-radius: 10px;
    padding-bottom: 4px;
    padding-right: 4px;
    padding-left: 4px;
    font-size: 20px;
}

.main-week-info {
position: absolute;
    left: 550px;
    margin-top: 30px;
    font-size: 14px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 2px #dde5ff;
    font-style: italic;
    z-index: 100000000;
}

.main-week-info-block {
    background: linear-gradient(45deg, #a3c3fe, #8599fa);
    width: 400px;
    height: 200px;
    position: relative;
    top: 170px;
    left: 150px;
    box-shadow: inset 0 0 7px 3px #e8f0ff8c;
    border-radius: 40px;
}

#back-img {
    background: url(https://i.imgur.com/lUGpiEy.png);
    padding: 50px;
    padding-top: 32px;
    background-size: 100%;
    padding-right: 50px;
    background-repeat: no-repeat;
    /* margin: -5px; */
    margin-left: -13px;
    vertical-align: top;
}

.myBtn {
    background-color: transparent;
    border: none;
    outline: none;
}

.modal {

}

.modal_2 {
    z-index: 1050;
    display: none;
    background-image: url(https://i.imgur.com/i2DwdN9.png);
    width: 718px;
    height: 573px;
    left: 190px;
    position: absolute;
    background-size: 100%;
}

.modal__content {
width: 450px;
    height: 361px;
    background: url(https://i.imgur.com/4M04plt.png);
    position: relative;
    top: 30px;
    left: 100px;
    background-size: 100%;
}

#main-week {
width: 850px;
    height: 573px;
    background-image: url(https://i.imgur.com/nih1DWK.png);
    background-size: 100%;
    margin-top: -250px;
}

.elements-block {
    width: 615px;
    height: 330px;
    position: relative;
}

.element-week {
background-image: url(https://i.imgur.com/977umoz.png);
    background-size: 100%;
    width: 200px;
    height: 206px;
    position: relative;
background-repeat: no-repeat; 
display: inline-block;
}

.modal-body {
height: 90px;
    width: 335px;
    display: block;
    position: absolute;
    top: 65px;
    left: 60px;
    overflow: auto;
}

.modal-body_2 {
height: 90px;
    width: 335px;
    display: block;
    position: absolute;
    top: 200px;
    left: 60px;
    overflow: auto;
}

modal-text {
    color: #fff;
    position: relative;
    top: 5px;
    background: linear-gradient(45deg, #5561ab, transparent);
    font-size: 10.5px;
    font-family: arial;
    text-transform: uppercase;
    padding: 3px;
    width: 310px;
    display: flex;
    overflow: auto;
    margin-bottom: 10px!important;
    padding-right: 10px;
}

.modal-body_2 a {color:#c6d4ff!important;}

 .elements-block::-webkit-scrollbar {
    display: block;
    width: 3px;
    border-right: none;
    border-left: none;
    background-color: #b7d2da00;
}
    
 .elements-block::-webkit-scrollbar-thumb {
background: linear-gradient(45deg, #7987f8, #a5c6ff);
    border-right: none;
    border-left: none;
}

.img-modal {
position: relative;
    width: 100px;
    height: auto;
    background-size: 100%;
    top: 20px;
}


#main_entertainment {
    background: url(https://i.imgur.com/6tnpSHq.png);
    background-size: 100%;
    width: 850px;
    height: 478px;
    margin-top: -10px;
}

.menu1 {
    display: flex;
    flex-direction: column;
    width: 100px;
    position: relative;
    left: 60px;
    top: 40px;
}

.e_vkl_1 {
    width: 620px;
    height: 370px;
    position: relative;
    left: 20px;
    top: 10px;
}

.e_vkl_2 {
    width: 620px;
    height: 370px;
    position: relative;
    left: 100px;
    top: -70px;
}

.e_vkl_3 {
    width: 620px;
    height: 370px;
    position: relative;
    left: 100px;
    top: -70px;
}

genre_tv {

}


#tab2, #tab3 {position: fixed; }

.menu1 > a,
.menu1 #tab2:target ~ a:nth-of-type(1),
.menu1 #tab3:target ~ a:nth-of-type(1),
.menu1 > a { line-height: 28px; }

#tab2,
#tab3,
.menu1 > div,
.menu1 #tab2:target ~ div:nth-of-type(1),
.menu1 #tab3:target ~ div:nth-of-type(1) {display: none; }

.menu1 > div:nth-of-type(1),
.menu1 #tab2:target ~ div:nth-of-type(2),
.menu1 #tab3:target ~ div:nth-of-type(3) { display: block; }

.menu1 > a:nth-of-type(1),
.menu1 #tab2:target ~ a:nth-of-type(2),
.menu1 #tab3:target ~ a:nth-of-type(3) { }
</style>

<script>

var modal = document.getElementById('myModal');
var buttons = document.getElementsByClassName("myBtn")
var span = document.getElementsByClassName("close");
var escroll = document.getElementById('escroll');

for (var i = 0; i < buttons.length; i++) {
	buttons[i].onclick = function() {
    var id = this.getAttribute('data-modal');
    var modal = document.getElementById(id);
    modal.style.display = 'block';
    escroll.style.overflow = 'hidden';
  }
}

for (var i = 0; i < span.length; i++) {
  span[i].onclick = function() {
    var id = this.getAttribute('data-modal');
    var modal = document.getElementById(id);
    modal.style.display = 'none';
    escroll.style.overflow = 'auto';
  }
}

window.onclick = function(event) {
  var isModal = (' ' + event.target.className + ' ').indexOf(' modal ') > -1;
  if (isModal) {
    event.target.style.display = "none";
    escroll.style.overflow = 'auto';
  }
}

</script>