Chapter 1 - codes

<link href='http://fonts.googleapis.com/css?family=Lobster+Two:700'; rel='stylesheet' type='text/css'>

<div style=
"width:100%px;
height:125px;
box-shadow: 1px 1px 10px #A71B4A;
border: 1px solid #A71B4A; 
padding:10px;
margin: 10px; 
background-image:url(http://colourlovers.com.s3.amazonaws.com/images/patterns/360/360248.png);
color:#A71B4A;">
<br><div align="right"><font size=8><b><span style="text-shadow: 1px 1px 10px #F7FDDF;">no. 2 marker</span></b></font size></div>
</div>

<div style=
"width:200px; 
height:125px; 
overflow:hidden;
box-shadow: 1px 1px 10px #A71B4A; 
border: 1px solid #F7FDDF;
padding:10px; 
margin: 10px;
float:left;
background:#EE2853;
color:#F7FDDF;
font-family:verdana;">
<div align="right"><h1>reppin' it</h1></div>
<br><a href=http://mweors-of-seelie.tumblr.com/ target=blank><img src=http://i.imgur.com/4r8rO9o.gif></a><img src=http://i42.tinypic.com/11bu8nt.gif>
</div>

<div style=
"width:200px; 
height:125px; 
overflow:hidden;
box-shadow: 1px 1px 10px #A71B4A; 
border: 1px solid #A71B4A;
padding:10px; 
margin: 10px;
float:left;
background:#F7FDDF;
color:#A71B4A;
font-family:verdana;">
<center><br><marquee behavior="scroll" onmouseover="this.stop();" onmouseout="this.start();" id="marquee">
<img src=https://31.media.tumblr.com/e260419abc4c42f2d0f36b221f00acc0/tumblr_myebdhhbAK1rbxbmoo1_100.png></img>
<img src="http://fc04.deviantart.net/fs71/f/2013/360/c/7/newday2_by_brandy212-d6zhkys.png" height="100px" width="100px"></img>
<img src="http://fc03.deviantart.net/fs70/f/2013/153/9/8/new_day_by_c_yang-d67k7e7.png" height="100px" width="100px"></img>
<img src="http://i42.tinypic.com/2i91loo.png" height="100px" width="100px"></img>
<img src="http://i151.photobucket.com/albums/s140/sassy-rats/sassy-rats049/summer_zpsf1d5803a.png" height="100px" width="100px"></img>
<img src="http://fc04.deviantart.net/fs70/f/2014/069/e/d/august_for_37107_tag_by_wahooligans-d79onrz.png
" height="100px" width="100px"></img>
<img src="http://i.imgur.com/D4PCrCm.png" height="100px" width="100px"></img>
</marquee>
</div>

<div style=
"width:150px; 
height:442px; 
overflow:hidden;
box-shadow: 1px 1px 10px #A71B4A; 
border: 1px solid #A71B4A;
padding:10px; 
margin: 10px;
float:right;
background:#F7FDDF;
color:#A71B4A;
font-family:verdana;">
<center><br><br><br><a class="compose" cid="37107">message</a>
<br><a href=/report.php?loc=1&other=37107>report</a>
<br><a href=/searchtopics.php?subject=&author=37107&mweor=&board=0&search=Search>my posts</a>
<br><br><br><br><br><a href=/usershop.php?id=37107>shop</a>
<br><a href=/cattery_offspring.php?id=37107>offspring</a>
<br><a href=/cattery_expected.php?id=37107>expected</a>
<br><a href=/cattery_retired.php?id=37107>retired</a>
<br><br><br><br><br><a href=/cattery.php>cattery</a>
<br><a href=/explore.php>explore</a>  
<br><a href=/chat.php>chat</a>
<br><a href=/news.php>news</a> 
<br><a href=/help.php>help</a> 
<br><a href=/logout.php>logout</a> 
<br><br><br><a href=/cattery.php?id=43641>credits</a></center>
</div>

<div style=
"width:270px; 
height:125px; 
overflow:hidden;
box-shadow: 1px 1px 10px  #A71B4A; 
border: 1px solid  #F7FDDF;
padding:10px; 
margin: 10px;
float: right;
background:#EE2853;
color: #F7FDDF;
font-family:verdana;">
<div align="right"><h1>oi, dancing boy</h1></div>
<img src="http://25.media.tumblr.com/tumblr_m4zouaZMaE1rq84qio1_500.jpg" height="54px" width="270px"></img>
</div>

<br><br><div style=
"width:442px; 
height:274px; 
overflow:hidden;
box-shadow: 1px 1px 10px #A71B4A; 
border: 1px solid #F7FDDF;
padding:10px;
margin: 10px;
float:left; 
background:#EE2853;
color:#F7FDDF;
font-family:verdana;">
<div align="right"><h1>turn on the old pizazz</h1></div>
<br>hey there! i'm summer. i'm a fourteen year old soccer player, track runner, and american girl. my other interests include taylor swift, brittana, glee (cast), pretty little liars, teen wolf, brittana, broadway musicals (billy elliot, wicked, and newsies are my favorites), the nhl, and did i say brittana?
<br>please don't ever hesitate to pm me with questions, requests, or just to chat!
<br><br>layout commisions are <b>open</b>/<s>closed</s>
<br>coding lessons are <b>open</b>/<s>closed</s>
<br>please message me if you'd like a layout or coding lessons!
<br><br><a href=/viewtopic.php?id=628686>important coding info</a>
</div>

<div style=
"width:125px; 
height:100px; 
overflow:hidden;
box-shadow: 1px 1px 10px  #A71B4A; 
border: 1px solid  #A71B4A;
padding:10px; 
margin: 10px;
float: left;
background:#F7FDDF;
color: #A71B4A;
font-family:verdana;">
<div align="right"><font size=1><h1>mweors</h1></font size></div>
<a href=/mweor.php?id=2440974&pat=yes><img src=/mweori.php?id=2440974&tiny=1></a>
<a href=/mweor.php?id=1300590&pat=yes><img src=/mweori.php?id=1300590&tiny=1></a>
<a href=/mweor.php?id=1703932&pat=yes><img src=/mweori.php?id=1703932&tiny=1></a>
<a href=/mweor.php?id=495988&pat=yes><img src=/mweori.php?id=495988&tiny=1></a>
<a href=/mweor.php?id=480433&pat=yes><img src=/mweori.php?id=480433&tiny=1></a>
<a href=/mweor.php?id=375071&pat=yes><img src=/mweori.php?id=375071&tiny=1></a>
</div>

<div style=
"width:100px; 
height:100px; 
overflow:hidden;
box-shadow: 1px 1px 10px  #A71B4A; 
border: 1px solid  #F7FDFF;
padding:10px; 
margin: 10px;
float: right;
background:#EE2853;
color: #F7FDFF;">
<h1><font size=5.75><b>if you want to be a dancer, dance</b></font size></h1>
</div>

<div style=
"width:272px; 
height:133px; 
overflow:hidden;
box-shadow: 1px 1px 10px  #A71B4A; 
border: 1px solid  #A71B4A;
padding:10px; 
margin: 10px;
float: right;
background:#F7FDDF;
color: #A71B4A;
font-family:verdana;">
<br>"don't know. sorta feels good. sorta stiff and that, but once I get going... then i like, forget everything. and... sorta disappear. sorta disappear. like i feel a change in my whole body. and i've got this fire in my body. i'm just there. flyin' like a bird. like electricity. yeah, like electricity." - Billy Elliot
</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<link rel="stylesheet" href="gallery.css">
<link rel="stylesheet" href="gallery.theme.css">
<div class="gallery autoplay items-3">
<div id="item-1" class="control-operator"></div>
<div id="item-2" class="control-operator"></div>
<div id="item-3" class="control-operator"></div>
<figure class="item">
<div align="right"><h1>solidarity, solidarity, solidarity forever</h1></div>
<blockquote>no. 2 marker breeds mweors. most offspring produced in the cattery are gen. 3, although some may be up to gen. 7-8. the general color scheme is pastel blue/pink/purple, although you may see some other colors, including pastels such as yellow, green, or orange.
<br><br><a href=/viewtopic.php?id=607612>sales</a>
<br><a href=/viewtopic.php?id=267522>breeding tips</i>
<br><a href=/viewtopic.php?id=634001>important breeding info</a></blockquote>
</figure>
<figure class="item">
<div align="right"><h1>what we need is individuality</h1></div>
<blockquote>some of the things i do on mweor include breeding, coding, (occasional) designing, rping, being jealous of all you perfect talented people, and chatting with y'all!
<br>fossil and i run the <a href=/viewtopic.php?id=634141>seelie tribe</a>, a super duper cool mweor rp revival. you should all join and rp with us because it's a party!
<br>i also lead the <a href=/viewtopic.php?id=612775>mirage</a>, a breeding/desiging family. idk bro we're pretty swaggy.</blockquote>
</figure>
<figure class="item">
<div align="right"><h1>the stars look down and see a future bright</h1></div>
<blockquote><img src="http://media.tumblr.com/tumblr_lye3f6VlSf1qbuptc.gif" width="250px" height="124px"></img></blockquote>
</figure>
<br><br>
<div class="controls"> <a href="#item-1" class="control-button">*</a> <a href="#item-2" class="control-button">*</a> <a href="#item-3" class="control-button">*</a> </div>
</div>

<style>
/////////////////////////////////////////////DO NOT TOUCH CODING BEYOND THIS POINT///////////////////////////////////////////////
</style>

<font color=#F7FDDF>

<style>
#marquee
{-webkit-marquee-style: alternate;
-moz-marquee-style: alternate;
-o-marquee-style: alternate;
-webkit-transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
opacity: .85;}
#marquee:hover
{opacity: 1;}
</style>

<style>
#topbanner,
#bottombanner,
#titlebar,
#bodyi, .titlebar,.sf-menu {display: none;} 
#footer{display:none;}
#titleimg { display:none;}
#titletxt { display:none; }
.titlebar { display:none; height:0px}
#topbanner { display:none;}
#bottombanner img { display:none;}
#menu_holder { display:none; }
#cattery_infobox { display:none;}
img.trans {display:none;}
.tip.good_label {display:none;}
.tip.neutral_label {display:none;}
</style>

<style>
#mweor_tabs 
{background: #F7FDDF; 
border:1px solid #A71B4A;
color:#A71B4A !important;
font-family:verdana !important;}
.ui-widget-header 
{background: #A71B4A;
color:#A71B4A !important;
font-family:verdana !important;
border: none;}
ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default 
{background: #EB7879;
color:#A71B4A !important;
border: 1 px solid #EB7879;
font-family:verdana !important;}
</style>

<style>
#cattery_descbox
{background:#EB7879;
width:991px;
height:925px;
float: right;
left:250px;
background-repeat:repeat;
background-attachment:fixed;
background-position:right;}
body
{background:#EB7879;
background-repeat:repeat;
background-attachment:fixed;
background-position:right;}
#content 
{background:#EB7879;
width:991px;
height:875px;
float:right;
background-repeat:repeat;
background-attachment:fixed;
background-position:right;}
</style>

<style>
.button
{color:#A71B4A;
background:#F7FDDF;
border:1px solid #A71B4A;
font-family: 'Lobster Two', cursive;
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;}
.button:hover
{color:#33AFA5;
border:1px solid#33AFA5;}
#notice
{display:none;}
.theader
{property: value;
box-shadow: 1px 1px 10px #A71B4A;
background: #EE2853;
font-family:verdana;
color:#F7FDDF; 
position:relative;}
#eventtxt
{color:#F7FDDF;
background:#EE2853;
box-shadow: 1px 1px 10px #A71B4A;
font-family:verdana;
position: relative;
border:1px solid #F7FDDF;} 
.popup 
{background-image:url(http://colourlovers.com.s3.amazonaws.com/images/patterns/360/360248.png);
color:#F7FDDF; 
border: 1px solid #F7FDDF;
box-shadow: 1px 1px 10px #A71B4A;
font-family:verdana;}
#lightbox-container-image
{background-image:url(http://colourlovers.com.s3.amazonaws.com/images/patterns/360/360248.png);
color:#F7FDDF; 
border: 1px solid #F7FDDF;
font-family:verdana;}
.ui-tooltip 
{background: #EE2853  !important;
color:#F7FDDF  !important;
box-shadow: 1px 1px 10px #A71B4A  !important;
border:7px solid transparent;
-webkit-border-image:url(http://www.colourlovers.com/paletteImg/33AFA5/F7FDDF/EB7879/EE2853/A71B4A/just:_lovers.png?cPW=MC...) 30 30 stretch; 
-o-border-image:url(http://www.colourlovers.com/paletteImg/33AFA5/F7FDDF/EB7879/EE2853/A71B4A/just:_lovers.png?cPW=MC...) 30 30 stretch; 
border-image:url(http://www.colourlovers.com/paletteImg/33AFA5/F7FDDF/EB7879/EE2853/A71B4A/just:_lovers.png?cPW=MC...) 30 30 stretch;}
font-family:verdana  !important;}
</style>

<style>
font
{color:#F7FDDF  !important; 
font-family:verdana;}
a 
{color:#33AFA5; !important
text-shadow: 0px 0px 10px #F7FDDF;
font-family:verdana;
-webkit-transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;}
a:hover
{color:#A71B4A;
font-family:verdana;}
i
{display:none;}
h1
{color:#33AFA5;
font-family: 'Lobster Two', cursive;
text-shadow: 0px 0px 10px #F7FDDF;}
b
{color:#A71B4A;
font-family: 'Lobster Two', cursive;}
</style>

<style>
.gallery .control-operator:target ~ .controls .control-button 
{color: #33AFA5;}
.gallery .control-button:first-of-type,
.items-2 .control-operator:nth-of-type(1):target ~ .controls .control-button:nth-of-type(1),
.items-2 .control-operator:nth-of-type(2):target ~ .controls .control-button:nth-of-type(2),
.items-3 .control-operator:nth-of-type(1):target ~ .controls .control-button:nth-of-type(1),
.items-3 .control-operator:nth-of-type(2):target ~ .controls .control-button:nth-of-type(2),
.items-3 .control-operator:nth-of-type(3):target ~ .controls .control-button:nth-of-type(3),
.items-4 .control-operator:nth-of-type(1):target ~ .controls .control-button:nth-of-type(1),
.items-4 .control-operator:nth-of-type(2):target ~ .controls .control-button:nth-of-type(2),
.items-4 .control-operator:nth-of-type(3):target ~ .controls .control-button:nth-of-type(3),
.items-4 .control-operator:nth-of-type(4):target ~ .controls .control-button:nth-of-type(4),
.items-5 .control-operator:nth-of-type(1):target ~ .controls .control-button:nth-of-type(1),
.items-5 .control-operator:nth-of-type(2):target ~ .controls .control-button:nth-of-type(2),
.items-5 .control-operator:nth-of-type(3):target ~ .controls .control-button:nth-of-type(3),
.items-5 .control-operator:nth-of-type(4):target ~ .controls .control-button:nth-of-type(4),
.items-5 .control-operator:nth-of-type(5):target ~ .controls .control-button:nth-of-type(5) 
{color: #A71B4A;}
.gallery .item:first-of-type 
{position: absolute;
  opacity: 1;}
.gallery .item 
{position: absolute;
margin: 10px;
 float:left;
  top: 25px;
  width:970px;
  height: 200px;
  opacity: 0;
box-shadow: 1px 1px 10px #A71B4A;
color:#F7FDDF;
font-family:verdana;
text-align:left;
  -webkit-transition: opacity .5s;
  -o-transition: opacity .5s;
  transition: opacity .5s;}
.gallery .control-operator 
{display: none;}
.gallery .control-operator:target ~ .item 
{pointer-events: none;
  opacity: 0;
  -webkit-animation: none;
  -o-animation: none;
  animation: none;}
.gallery .control-operator:target ~ .controls .control-button 
{-webkit-animation: none;
  -o-animation: none;
  animation: none;}
@-webkit-keyframes controlAnimation-2 
{0% 
{color: #33AFA5;}
14.3%, 50% 
{color: #A71B4A;}
64.3%, 100% 
{color: #33AFA5;}
}
@-o-keyframes controlAnimation-2 
{0% 
{color: #33AFA5;}
14.3%, 50% 
{color: #A71B4A;}
64.3%, 100% 
{color: #33AFA5;}
}
@keyframes controlAnimation-2 
{0% 
{color: #33AFA5;}
14.3%, 50% 
{color: #A71B4A;}
64.3%, 100% 
{color: #33AFA5;}
}
@-webkit-keyframes galleryAnimation-2 {
  0% 
{opacity: 0;}
14.3%, 50% 
{opacity: 1;}
64.3%, 100% 
{opacity: 0;}
}
@-o-keyframes galleryAnimation-2 
{0% 
{opacity: 0;}
14.3%, 50% 
{opacity: 1;}
64.3%, 100% 
{opacity: 0;}
}
@keyframes galleryAnimation-2 
{0% 
{opacity: 0;}
14.3%, 50% 
{opacity: 1;}
64.3%, 100% 
{opacity: 0;}
}
.items-2.autoplay .control-button
{ -webkit-animation: controlAnimation-2 14s infinite;
  -o-animation: controlAnimation-2 14s infinite;
  animation: controlAnimation-2 14s infinite;}
.items-2.autoplay .item 
{-webkit-animation: galleryAnimation-2 14s infinite;
  -o-animation: galleryAnimation-2 14s infinite;
  animation: galleryAnimation-2 14s infinite;}
.items-2 .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) 
{ pointer-events: auto;
  opacity: 1;}
.items-2 .control-button:nth-of-type(1),
.items-2 .item:nth-of-type(1) 
{-webkit-animation-delay: -2s;
  -o-animation-delay: -2s;
  animation-delay: -2s;}
.items-2 .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) 
{pointer-events: auto;
  opacity: 1;}
.items-2 .control-button:nth-of-type(2),
.items-2 .item:nth-of-type(2) 
{-webkit-animation-delay: 5s;
  -o-animation-delay: 5s;
  animation-delay: 5s;}
@-webkit-keyframes controlAnimation-3 
{0% 
{color: #33AFA5;}
9.5%, 33.3% 
{color: #A71B4A;}
42.9%, 100% 
{color: #33AFA5;}
}
@-o-keyframes controlAnimation-3 {
  0% 
{color: #33AFA5;}
9.5%, 33.3% 
{color: #A71B4A;}
42.9%, 100% 
{color: #33AFA5;}
}
@keyframes controlAnimation-3 {
  0% 
{color: #33AFA5;}
9.5%, 33.3% 
{color: #A71B4A;}
42.9%, 100% 
{color: #33AFA5;}
 }
@-webkit-keyframes galleryAnimation-3 
{0% 
{opacity: 0;}
9.5%, 33.3% 
{opacity: 1;}
42.9%, 100% 
{opacity: 0;}
}
@-o-keyframes galleryAnimation-3 
{ 0% 
{opacity: 0;}
9.5%, 33.3% 
{opacity: 1;}
42.9%, 100% 
{opacity: 0;}
}
@keyframes galleryAnimation-3 
{0% 
{opacity: 0;}
9.5%, 33.3% 
{opacity: 1;}
42.9%, 100% 
{opacity: 0;}
}
.items-3.autoplay .control-button 
{-webkit-animation: controlAnimation-3 21s infinite;
  -o-animation: controlAnimation-3 21s infinite;
  animation: controlAnimation-3 21s infinite;}
.items-3.autoplay .item 
{-webkit-animation: galleryAnimation-3 21s infinite;
  -o-animation: galleryAnimation-3 21s infinite;
  animation: galleryAnimation-3 21s infinite;}
.items-3 .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) 
{pointer-events: auto;
  opacity: 1;}
.items-3 .control-button:nth-of-type(1),
.items-3 .item:nth-of-type(1) {
  -webkit-animation-delay: -2s;
  -o-animation-delay: -2s;
  animation-delay: -2s;}
.items-3 .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2)
 {pointer-events: auto;
  opacity: 1;}
.items-3 .control-button:nth-of-type(2),
.items-3 .item:nth-of-type(2) 
{ -webkit-animation-delay: 5s;
  -o-animation-delay: 5s;
  animation-delay: 5s;}
.items-3 .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) 
{pointer-events: auto;
  opacity: 1;}
.items-3 .control-button:nth-of-type(3),
.items-3 .item:nth-of-type(3) 
{ -webkit-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;}
@-webkit-keyframes controlAnimation-4 
{0% 
{color: #33AFA5;}
7.1%, 25% 
{color: #A71B4A;}
32.1%, 100% 
{color: #33AFA5;}
}
@-o-keyframes controlAnimation-4 
{0% 
{color: #33AFA5;}
7.1%, 25% 
{color: #A71B4A;}
32.1%, 100% 
{color: #33AFA5;}
}
@keyframes controlAnimation-4 
{0% 
{color: #33AFA5;}
7.1%, 25% 
{color: #A71B4A;}
32.1%, 100% 
{color: #33AFA5;}
}
@-webkit-keyframes galleryAnimation-4 
{0% 
{opacity: 0;}
7.1%, 25% 
{opacity: 1;}
32.1%, 100% 
{opacity: 0;}
}
@-o-keyframes galleryAnimation-4 
{0% 
{opacity: 0;}
7.1%, 25% 
{opacity: 1;}
32.1%, 100% 
{opacity: 0;}
}
@keyframes galleryAnimation-4 
{0%
{opacity: 0;}
7.1%, 25% 
{opacity: 1;}
32.1%, 100% 
{opacity: 0;}
}
.items-4.autoplay .control-button 
{-webkit-animation: controlAnimation-4 28s infinite;
  -o-animation: controlAnimation-4 28s infinite;
  animation: controlAnimation-4 28s infinite;}
.items-4.autoplay .item 
{ -webkit-animation: galleryAnimation-4 28s infinite;
  -o-animation: galleryAnimation-4 28s infinite;
  animation: galleryAnimation-4 28s infinite;}
.items-4 .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) 
{ pointer-events: auto;
  opacity: 1;}
.items-4 .control-button:nth-of-type(1),
.items-4 .item:nth-of-type(1) 
{ -webkit-animation-delay: -2s;
  -o-animation-delay: -2s;
  animation-delay: -2s;}
.items-4 .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) 
{pointer-events: auto;
  opacity: 1;}
.items-4 .control-button:nth-of-type(2),
.items-4 .item:nth-of-type(2) 
 -webkit-animation-delay: 5s;
-o-animation-delay: 5s;
  animation-delay: 5s;}
.items-4 .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) 
{pointer-events: auto;
  opacity: 1;}
.items-4 .control-button:nth-of-type(3),
.items-4 .item:nth-of-type(3) 
{ -webkit-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;}
.items-4 .control-operator:nth-of-type(4):target ~ .item:nth-of-type(4) 
{pointer-events: auto;
  opacity: 1;}
.items-4 .control-button:nth-of-type(4),
.items-4 .item:nth-of-type(4) 
{ -webkit-animation-delay: 19s;
  -o-animation-delay: 19s;
  animation-delay: 19s;}
@-webkit-keyframes controlAnimation-5 
{ 0% 
{color: #33AFA5;}5.7%, 20% 
{color: #A71B4A;}
25.7%, 100% 
{color: #33AFA5;}
}
@-o-keyframes controlAnimation-5 
{0% 
{color: #33AFA5;}
5.7%, 20% 
{color: #A71B4A;}
25.7%, 100% 
{color: #33AFA5;}
}
@keyframes controlAnimation-5 
{0% 
{color: #33AFA5;}
5.7%, 20% 
{color: #A71B4A;}
25.7%, 100% 
{color: #33AFA5;}
}
@-webkit-keyframes galleryAnimation-5 
{0%
{opacity: 0;}
5.7%, 20%
{opacity: 1; }
25.7%, 100% 
{opacity: 0;}
}
@-o-keyframes galleryAnimation-5 
{ 0% 
{opacity: 0;}
5.7%, 20% 
{opacity: 1;}
25.7%, 100% 
{opacity: 0;}
}
@keyframes galleryAnimation-5 {
  0% 
{opacity: 0;}
5.7%, 20% 
{opacity: 1;}
25.7%, 100% 
{opacity: 0;}
}
.items-5.autoplay .control-button 
{  -webkit-animation: controlAnimation-5 35s infinite;
  -o-animation: controlAnimation-5 35s infinite;
  animation: controlAnimation-5 35s infinite;}
.items-5.autoplay .item 
{  -webkit-animation: galleryAnimation-5 35s infinite;
  -o-animation: galleryAnimation-5 35s infinite;
  animation: galleryAnimation-5 35s infinite;}
.items-5 .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) 
{  pointer-events: auto;
  opacity: 1;}
.items-5 .control-button:nth-of-type(1),
.items-5 .item:nth-of-type(1) 
{  -webkit-animation-delay: -2s;
  -o-animation-delay: -2s;
  animation-delay: -2s;}
.items-5 .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) 
{  pointer-events: auto;
  opacity: 1;}
.items-5 .control-button:nth-of-type(2),
.items-5 .item:nth-of-type(2) 
{  -webkit-animation-delay: 5s;
  -o-animation-delay: 5s;
  animation-delay: 5s;}
.items-5 .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) 
{  pointer-events: auto;
  opacity: 1;}
.items-5 .control-button:nth-of-type(3),
.items-5 .item:nth-of-type(3) 
{  -webkit-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;}
.items-5 .control-operator:nth-of-type(4):target ~ .item:nth-of-type(4) 
{  pointer-events: auto;
  opacity: 1;}
.items-5 .control-button:nth-of-type(4),
.items-5 .item:nth-of-type(4) 
{  -webkit-animation-delay: 19s;
  -o-animation-delay: 19s;
  animation-delay: 19s;}
.items-5 .control-operator:nth-of-type(5):target ~ .item:nth-of-type(5) 
{  pointer-events: auto;
  opacity: 1;}
.items-5 .control-button:nth-of-type(5),
.items-5 .item:nth-of-type(5) 
{ -webkit-animation-delay: 26s;
  -o-animation-delay: 26s;
  animation-delay: 26s;}
.gallery .control-button
{color: #33AFA5;}
.gallery .control-button:hover 
{color: #A71B4A;}
.gallery 
{ position: relative;}
.gallery .item 
{ height: 200px;
  overflow: hidden;
  text-align: center;
 float:left;
  background: #EE2853;
border: 1px solid #F7FDDF;}
.gallery .controls 
{  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;}
.gallery .control-button 
{  display: inline-block;
  margin: 0 .02em;
  font-size: 3em;
  text-align: center;
  text-decoration: none;
  -webkit-transition: color .1s;
  -o-transition: color .1s;
  transition: color .1s;}
</style>

</div>

You are not authorized to comment here. Your must be registered and logged in to comment