@charset "utf-8";body{color:#f7f7f7;font-family:'Stardos Stencil', cursive;}
.logo{flex:1 1 auto;text-align:center;align-self:center;border-radius:7px;min-width:180px;display:flex;justify-content:space-between;max-width:500px;}
.logo img{width:100%;max-width:400px;border-radius:8px;margin-top:2px;}
header{display:flex;flex-flow:row wrap;flex:1 1 100%;border-radius:5px;z-index:1;margin:5px;justify-content:stretch;font-weight:300;box-shadow:0px 0px 10px 3px rgba(0, 0, 0, 0.5);border:2px solid #000;background: url(https://cloud.camnymph.com/css/bigblue.jpg);}
header h1{flex:1 0 auto;max-width:650px;text-align:center;margin:0px;line-height:3.0em;font-size:1.3em;text-shadow:3px 3px 3px rgba(0, 0, 0, 0.75);text-transform:capitalize;}
header ul{display:flex;flex-flow:row wrap;flex:1 1 auto;padding:0;list-style:none;margin:auto;line-height:3em;margin:0;align-items:center;}
header ul li{flex:1 0 auto;text-align:center;margin:0;position:relative;}
header ul li:hover{background:url(wings.png);background-repeat:no-repeat;background-position:center;opacity: .9;background-size:contain;}
.icons{list-style:none;display:flex;align-items:center;flex:1 1 auto;justify-content:space-around;}
li.icons{font-size:1.5em;margin: 0px 7px;text-shadow:3px 3px 3px rgba(0, 0, 0, 0.75);}
li.icons a{padding:7px;}
header li.icons .fa:hover {
    transform: rotate(360deg);
}
header li.icons .fa {
    transition: 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
header ul li a{display:inline-block;text-decoration:none;font-size:1.3em;font-weight:bolder;text-shadow:3px 3px 3px rgba(0, 0, 0, 0.75);padding:0 5px;text-transform:capitalize;outline:none;letter-spacing:.3px;position:relative;}
header ul li a::before{text-shadow:0 0 1px rgba(255,255,255,0.3);content:attr(data-hover);position:absolute;-webkit-transition:-webkit-transform 0.3s, opacity 0.3s;-moz-transition:-moz-transform 0.3s, opacity 0.3s;transition:transform 0.3s, opacity 0.3s;pointer-events:none;}
header ul li a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;background:#00adff;opacity:0;-webkit-transform:translateY(5px);-moz-transform:translateY(5px);transform:translateY(5px);-webkit-transition:-webkit-transform 0.3s, opacity 0.3s;-moz-transition:-moz-transform 0.3s, opacity 0.3s;transition:transform 0.3s, opacity 0.3s;pointer-events:none;box-shadow:2px 2px 2px 0.5px rgba(0, 0, 0, 0.45);}
header ul li a:hover::before{opacity:0;-webkit-transform:translateY(-2px);-moz-transform:translateY(-2px);transform:translateY(-2px);}
header ul li a:hover::after{opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);transform:translateY(0px);}
a{text-decoration:none;color:#f7f7f7;outline:none;}
a:hover{color:#00adff;}
.button{
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    /* margin: 10px 3px; */
}
.click{background: transparent;border: 0px;overflow: hidden;position: relative;cursor: pointer;outline: none;font: inherit;font-size: 1.3em;font-weight: bolder;padding: 3px 7px;text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.75);border-top: 2px solid #f7f7f7;border-bottom: 2px solid #f7f7f7;border-radius: 20px;}
.start{
    color: #f7f7f7;
}
.start:hover{
    color: #00adff;
    border-color: #00adff;
}
.fa-refresh{font-size: 1.1em !important;width: 1em !important;}
.button a{text-align:center;display:block;text-transform:capitalize;transition:0.5s ease-in-out;margin:3px;overflow:hidden;text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.75);}
.button a strong{text-transform:capitalize;position:relative;display:inline-block;-webkit-transition:-webkit-transform 0.3s;-moz-transition:-moz-transform 0.3s;transition:transform 0.3s;/* text-decoration:underline; */}
.button a strong:before{position:absolute;top:100%;content:attr(data-hover);font-weight:bold;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0);white-space:nowrap;/* text-decoration:underline; */}
.button a:hover strong{-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);transform:translateY(-100%);}
main{display:flex;flex-flow:row wrap;flex:1 1 auto;}
main div.thumb{flex:1 1 100%;display:flex;flex-flow:row wrap;padding:3px;align-content:flex-start;justify-content:center;align-items:flex-start;min-height:702px;}
main div.thumb > section{flex:1 0 15%;max-width:400px;min-width:220px;margin:3px;position:relative;overflow:hidden;display:flex;flex-flow:row wrap;align-content:flex-start;align-items:flex-start;justify-content:flex-start;border-radius:4px;z-index:1;box-sizing:border-box;transition:0.35s ease-in-out;box-shadow:0px 0px 10px 3px rgba(0, 0, 0, 0.5);}
main div.thumb section.slider{flex:1 1 100%;max-width:none;display:block;margin:0;}
main div.thumb section.slider:hover{box-shadow:none;}
main div.thumb section:hover .counter{top:-2.7em;}
main div.thumb section a img{display:block;border-radius:5px;}
main div.thumb section:hover{box-shadow:0px 0px 5px 3px rgba(0, 126, 255, 0.6);}
main div.thumb section:hover p{color:#f7f7f7;text-shadow:3px 3px 3px rgba(0, 0, 0, 0.8);background:linear-gradient(rgba(51, 144, 189, 0.55), rgba(84, 89, 109, 0.1)) rgba(137, 137, 181, 0.1);box-shadow:0 1px rgba(255,255,255,.2) inset, 0 3px 5px rgba(0,1,6,.5), 0 0 1px 1px rgba(0,1,6,.2);}
main div.thumb section p span strong{position:absolute;top:5px;left:5px;font-size:.45em;color:#00adff;}
main div.thumb section p{margin:2px 2px 3px;flex:1 0 auto;text-align:center;line-height:1.5em;font-weight:300;color:#f7f7f7;text-shadow:2px 2px 1px rgba(0, 0, 0, 0.45);border-radius:3px;box-sizing:border-box;transition:0.35s ease-in-out;}
main div.thumb section p:hover{cursor:help;color:#00adff;font-weight:300;text-shadow:none;box-shadow:0 0 1px rgba(0,0,0,.5) inset, 0 2px 3px rgba(0,0,0,.5) inset, 0 1px 1px rgba(255,255,255,.1);background:linear-gradient(rgba(126, 126, 134, 0), rgba(70, 71, 76, 0)) rgba(126, 126, 134, 0);}
main div.thumb section p span{position:absolute;color:#f7f7f7;z-index:0;left:0px;right:0px;top:100%;width:100%;height:100%;background:rgba(0, 0, 0, 0.5);transition:all .5s ease-out;opacity:0;border-radius:5px;border:3px solid transparent;box-sizing:border-box;font-weight:300;font-size:.95em;}
main div.thumb section p span em{display:block;margin:5px 3px 0 3px;border-top:1px dotted;font-size:.9em;font-weight:normal;color:rgba(255, 255, 255, 0.6);text-align:center;font-style:normal;}
main div.thumb section p span:first-letter{text-transform:capitalize;}
main div.thumb section p span img{width:100%;border-radius:5px;}
main div.thumb section p:hover span{opacity:1;top:1.95em;z-index:100;}
main div.thumb section p span:hover{top:100%;}
main div.thumb section p span.live{bottom:0;border:none;}
main div.thumb section p span.live:hover{opacity:0;z-index:0;border-radius:7px;}
main div.pages{display:flex;flex:0 1 100%;flex-flow:row wrap;padding:0;color:rgba(255, 255, 255, 0.7);border-radius:5px;margin:3px;line-height:2em;box-sizing:border-box;order:2;box-shadow:0px 0px 10px 3px rgba(0, 0, 0, 0.5);border:2px solid #000;background: url(https://cloud.camnymph.com/css/bigblue.jpg);}
.counter{position:absolute;background-color:#344456;display:block;left:0;top:0;color:#f7f7f7;padding:4px;right:0;font-size:.9em;text-align:center;transition:top .3s ease-out;border-radius: 4px;z-index:1000;text-transform:uppercase;text-shadow:3px 3px 3px rgba(0, 0, 0, 0.75);border:solid 2px #000;background: url(https://cloud.camnymph.com/css/backblue.jpg);}
main h2{flex:1 0 auto;text-align:center;font-size:1.3em;text-transform:capitalize;color:#f7f7f7;text-shadow:3px 3px 3px rgba(0, 0, 0, 0.75);align-content:center;justify-content:center;margin:5px 0;align-items:center;}
ul.paginator{list-style:none;display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-around;flex:1 0 35%;margin:0;padding:0;margin-right:40px;}
ul.paginator li,
ul.paginator b{font-size: 1.25em;display:flex;flex:0 1 auto;align-items:center;justify-content:center;font-weight:bold;border:1px solid;border-radius:4px;width:32px;border-color:#000;height:32px;transition:0.35s ease-in-out;box-shadow:0 1px rgba(255,255,255,.2) inset, 0 3px 5px rgba(0,1,6,.5), 0 0 1px 1px rgba(0,1,6,.2);margin:2px;font-family:initial;text-shadow:1px 1px 1px rgba(0, 0, 0, 0.45);background:rgba(0, 206, 255, 0.1);}
ul.paginator b{padding:3px 10px;color:#000;width:12px;border:1px solid;border-color:#000;height:26px;box-sizing:content-box;background:rgba(247, 247, 247, 0.5);}
ul.paginator li a{text-decoration:none;display:block;color:#000;padding:3px 10px;}
ul.paginator li:hover:not(:active){background:rgba(0, 173, 255, 0.5);}
ul.paginator li:hover{box-shadow:0 0 8px 3px rgba(0, 0, 0, 0.6);color:#000;border:1px solid;border-color:#000;}
ul.paginator li a:hover{color:#f7f7f7;text-shadow:1px 1px 1px rgba(0, 0, 0, 0.45);}
footer{flex:1 1 100%;text-align:center;border-radius:5px;z-index:1;margin:5px 5px 0;box-sizing:border-box;border:2px solid #000;box-shadow:0px 0px 10px 3px rgba(0, 0, 0, 0.5);background: url(https://cloud.camnymph.com/css/backblue.jpg);}
footer ul{display:flex;list-style:none;flex-flow:row wrap;flex:1 0 auto;padding:0;line-height:1.5em;margin:0;align-items:center;}
footer ul li{flex:1 0 auto;text-align:center;margin:0px;transition:0.35s ease-in-out;}
footer ul li a{display:block;text-decoration:none;line-height:1.4em;font-size:1em;color:#f7f7f7;text-shadow:3px 3px 3px rgba(0, 0, 0, 0.75);font-weight:bolder;max-width:150px;margin:auto;transition:0.35s ease-in-out;overflow:hidden;padding:0 4px;}
footer ul li a span{position:relative;display:inline-block;-webkit-transition:-webkit-transform 0.3s;-moz-transition:-moz-transform 0.3s;transition:transform 0.3s;text-shadow:3px 3px 3px rgba(0, 0, 0, 0.75);}
footer ul li a span:before{position:absolute;top:100%;content:attr(data-hover);font-weight:bold;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0);text-shadow:3px 3px 3px rgba(0, 0, 0, 0.75);}
footer ul li a:hover span{-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);transform:translateY(-100%);}
footer ul li a:hover{}
.spot{
    flex: 1 1 auto;
    box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.5);
    border: 2px solid #000;
    background: url(https://cloud.camnymph.com/css/bigblue.jpg);
    margin: 0 5px;
    border-radius: 5px;
    order: 6;
}
.scrollup{width: 60px;height: 60px;opacity: 0.65;position:fixed;bottom: 5px;right: 5px;display:none;text-indent:-9999px;background: url('icon_top.png') no-repeat;background-size: contain;z-index: 1000;}
.scrollup:hover{
    opacity: .9;
}
@media screen and (max-width:1440px){main div.thumb{min-height:760px;}
main div.pages{order:0;}
ul.paginator{margin-right:0;}
}
@media screen and (max-width:1215px){main div.thumb{order:1;}
}
@media screen and (max-width:860px){main div.thumb{min-height:780px;}
}
@media screen and (max-width:860px){main h2{flex:1 0 100%;}
ul.paginator{flex-flow:row wrap;}
}
@media screen and (max-width:801px){main div.thumb{min-height:680px;}
header{font-size:85%;}
.codrops-icon span{display:none;}
.logo{max-width:550px;}
.logo > a{margin-right: 10%;}
}
@media screen and (max-width:666px){header{flex-flow:wrap;}
header h1{flex:1 0 auto;line-height:1.7em;max-width:100%;}
header .logo{flex:100%;min-width:100%;margin-left:0;}
main h2{font-size:1.0em;}
ul.paginator li, ul.paginator b{margin:3px;}
}
@media screen and (max-width:540px){.logo > a{/* margin-left:50px; */}
}
@media screen and (max-width:420px){.logo > a{/* margin-left:39px; */}
}