<!--HTML-->
<link href='https://fonts.googleapis.com/css?family=Lora:400,700italic,700,400italic|Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Vidaloka" rel="stylesheet">

<div id="ride">
 <div class="r-col1">
   <div class="r-head">
  <div class="name">
   Birth of a Beauty
   </div></div>
   <div class="r-im"><a href="#openedm"><img src="http://funkyimg.com/i/2o52W.png" /></a></div>
 </div>
 <div class="r-col1">
   <div class="r-im"><a href="#openedm2"><img src="http://funkyimg.com/i/2o52V.png" /></a></div>
    <div class="r-head">
     <div class="name2">
      The Girl Who Sees Smells 
   </div></div>
 </div>
 <div class="r-col1">
   <div class="r-head">
   <div class="name">
     Doctors
   </div></div>
   <div class="r-im"><a href="#openedm3"><img src="http://funkyimg.com/i/2o52X.png" /></a></div>
 </div>
</div>
<div class="merc_cred"><a href="http://cttw.jcink.net/index.php?showuser=160"><font style="text-transform:uppercase; font-family:calibri; font-size:10px; color:#b6a589;">© merc</font></a></div>

<div id="openedm" class="mercdia">
   <div class="openedm"><a href="#close" title="Close" class="close">X</a>

       	<div class="optop">
    Городской охотник 
       <h1>боевик, романтика, триллер, драма, детектив</h1>
     </div>
     
     <div class="oppara"><div class="oppara2">

носить маску
<br>заваривать кофе из стиков
<br>стрелять из пистолета 
<br>скрываться от кого либо
<br>купаться (играть) в фонтане
     
     </div></div>
   </div>
</div>

<div id="openedm2" class="mercdia">
   <div class="openedm"><a href="#close" title="Close" class="close" style="background-color: #785c37;">X</a>

     <div class="optop" style="background-color: #785c37;">
     Потомки солнца
       <h1>боевик, романтика, драма, медицина</h1>
     </div>
     
     <div class="oppara"><div class="oppara2">
завязать шнурки кому-то 
<br>пойти в кафе с мягкими игрушками 
<br>стать волонтёром
<br>оказаться за границей, попасть в горячую точку (стихийное бедствие / военные действия) 
<br>говорить по рации
     
     </div></div>
     
   </div>
</div>

<div id="openedm3" class="mercdia">
   <div class="openedm"><a href="#close" title="Close" class="close" style="background: #785c37;">X</a>

       	<div class="optop" style="background-color: #785c37;">
     Телохранитель 
       <h1>драма, политика, триллер, мелодрама, романтика</h1>
     </div>
     
     <div class="oppara"><div class="oppara2">
приготовить рамён для друга/второй половинки 
<br>провести вечер на крыше дома
<br>просматривать записи с камер наблюдения в комнате охраны
<br>угрожать кому-то компроматом
<br>стать участником потасовки

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

<style type="text/css">

#ride {
 width: 500px;
 margin: 20px auto;
 height: 500px;
 line-height: 110%;
}
#ride .r-col1 {
 width: 165px;
 float: left;
 background-color: #af997b;
 height: 500px;
}
#ride .r-col1 .r-head {
 width: 125px;
 padding: 20px;
 height: 80px;
}
#ride .r-col1 .r-head .name {
 font-family: Vidaloka;
 text-align: center;
 font-size: 20px;
 color: #785c37;
 line-height: 120%;
}

#ride .r-col1 .r-head .name2 {
 font-family: Vidaloka;
 text-align: center;
 font-size: 20px;
 line-height: 120%;
 color: #785c37;
}

#ride .r-col1 .r-im {
 width: 165px;
 height: 380px;
 background-image:url(http://placehold.it/165x380/191919/ffffff);
}
.mercdia {
   position: fixed;
   font-family: Arial, Helvetica, sans-serif;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background: rgba(0, 0, 0, 0.8);
   z-index: 99999;
   opacity:0;
   -webkit-transition: opacity 400ms ease-in;
   -moz-transition: opacity 400ms ease-in;
   transition: opacity 400ms ease-in;
   pointer-events: none;
}
.mercdia:target {
   opacity:1;
   pointer-events: auto;
}
.mercdia > .openedm {
   width: 300px;
   position: relative;
   margin: 10% auto;
   background-color: #af997b;
   padding: 20px;
   outline: 1px solid #654d2e;
   outline-offset: 0px;
}
.openedm .optop {
 padding: 40px;
 font-family: montserrat;
 text-transform: lowercase;
 background-color: #785c37;
 text-align: center;
 border: 1px solid #af997b;
 color: #af997b;
 font-weight: bold;
 font-size: 20px;
 line-height: 100%;
}
.openedm .optop h1 {
 font-family: montserrat;
 font-size: 7px;
 letter-spacing: 2px;
 color: #af997b;
 text-transform: uppercase;
 margin-top: -3px;
}

.openedm .oppara2::-webkit-scrollbar-thumb:vertical {
background-color: #cccccc;
height: 10px;
border: 1px solid #af997b;
width: 3px;
}
.openedm .oppara2::-webkit-scrollbar {
width: 3px;
border: 2px solid #654d2e;
background-color: #696969;
}


.openedm .oppara {
 padding: 40px;
 height: 200px;
 font-family: lora;
 font-size: 13px;
 line-height: 120%;
 background-color: #af997b;
 color: #31220d;
 text-align: justify;
}
.openedm .oppara2 {
 height: 200px;
 overflow: auto;
 padding-right: 2px;
}
.close {
   background: #785c37;
   color: #654d2e;
   border: 1px solid #654d2e;
   line-height: 22px;
   position: absolute;
   right: -12px;
   text-align: center;
   top: -10px;
   width: 24px;
 text-transform: lowercase;
   font-family: montserrat;
   text-decoration: none;
   font-weight: bold;
}
</style>