@charset "utf-8";html, body{font-size:100%;display:flex;flex:100%;margin:0;flex-flow:row wrap;align-items:stretch;align-content:stretch;background: url(https://cdn.cameffect.com/css/red-black.jpg);}
header{display:flex;flex-flow:row wrap;flex:1 1 100%;background:rgba(128, 0, 0, 0.6);border-radius:7px;z-index:1000;margin:0 5px 0px;box-sizing:border-box;position:relative;}
header h1{flex:1 0 auto;text-align:center;margin: 0;font-size:1.1em;color:rgba(222, 236, 243, 0.83);text-shadow:3px 3px 3px rgba(0, 0, 0, 0.75);text-transform:uppercase;align-self:center;}
header .logo li{list-style:none;display:flex;align-items:center;}
header .logo li a{font-size:1.4em;color:rgba(222, 236, 243, 0.83);padding:5px;text-shadow:3px 3px 3px rgba(0, 0, 0, 0.75);}
header .logo li a:hover{color:#ec0707;}
nav{display:flex;flex:1 1 auto;}
.cmn-toggle-switch{position:relative;overflow:hidden;margin:0;padding:0;width:62px;height:34px;font-size:0;text-indent:-9999px;-webkit-appearance:none;-moz-appearance:none;box-shadow:none;border:none;cursor:pointer;-webkit-transition:background 0.3s;transition:background 0.3s;}
.cmn-toggle-switch:focus{outline:none;}
.cmn-toggle-switch span{display:block;position:absolute;top:15px;left:17px;right:17px;height:4px;background:rgba(222, 236, 243, 0.83);border-radius:2px;}
.cmn-toggle-switch span::before,
.cmn-toggle-switch span::after{position:absolute;display:block;left:0;width:100%;height:4px;background-color:rgba(222, 236, 243, 0.83);content:"";}
.cmn-toggle-switch span::before{top:-10px;border-radius:2px;}
.cmn-toggle-switch span::after{bottom:-10px;border-radius:2px;}
.cmn-toggle-switch__htx{background-color:transparent;}
.cmn-toggle-switch__htx span{-webkit-transition:background 0s 0.3s;transition:background 0s 0.3s;}
.cmn-toggle-switch__htx span::before,
.cmn-toggle-switch__htx span::after{-webkit-transition-duration:0.3s, 0.3s;transition-duration:0.3s, 0.3s;-webkit-transition-delay:0.3s, 0s;transition-delay:0.3s, 0s;}
.cmn-toggle-switch__htx span::before{-webkit-transition-property:top, -webkit-transform;transition-property:top, transform;}
.cmn-toggle-switch__htx span::after{-webkit-transition-property:bottom, -webkit-transform;transition-property:bottom, transform;}
.active .cmn-toggle-switch__htx{background-color:transparent;}
.active .cmn-toggle-switch__htx span{background:none;}
.active .cmn-toggle-switch__htx span::before{top:0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}
.active .cmn-toggle-switch__htx span::after{bottom:0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);}
.active .cmn-toggle-switch__htx span::before,
.active .cmn-toggle-switch__htx span::after{-webkit-transition-delay:0s, 0.3s;transition-delay:0s, 0.3s;}
header ul{-webkit-padding-start:0;-moz-padding-start:0;padding:0;}
main{display:flex;flex-flow:row wrap;flex:1 1 auto;}
main div.embed{flex:0 1 20%;display:flex;flex-flow:row wrap;overflow:hidden;position:relative;padding:1px 0;margin:5px 0px 2px 5px;}
.logo{flex:1 1 auto;text-align:center;align-self:center;line-height:0;border-radius:7px;min-width:180px;flex-flow:row nowrap;display:flex;justify-content:center;}
.logo img{width:100%;max-width:400px;}
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: 845px;}
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:8px;z-index:1;background:rgba(128, 0, 0, 0.6);box-sizing:border-box;border:1px solid transparent;transition:0.35s ease-in-out;}
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 a img{display:block;border-radius:7px;}
main div.thumb section:hover{background:#800000;box-shadow:0px 0px 10px 3px rgba(255, 101, 101, 0.6);}
main div.thumb section:hover p{color:rgba(249, 234, 234, 0.9);text-shadow:3px 3px 3px rgba(0, 0, 0, 0.8);background:linear-gradient(rgba(126, 126, 134, 0.6), rgba(70, 71, 76, 0.1)) rgba(126, 126, 134, 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:#ec0707;}
main div.thumb section p{margin:2px 2px 3px;flex:1 0 auto;text-align:center;line-height:1.5em;font-weight:bold;color:#000;text-shadow:0px 0px 3px rgba(222, 236, 243, 0.6);border-radius:7px 7px 0 0;box-sizing:border-box;transition:0.35s ease-in-out;}
main div.thumb section p:hover{cursor:help;color:#000;font-weight:bold;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:rgba(222, 236, 243, 0.83);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:7px;border:3px solid transparent;box-sizing:border-box;}
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(222, 236, 243, 0.55);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:7px;}
main div.thumb section p:hover span{opacity:1;top:1.84em;z-index:100;font-weight:normal;}
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:8px;margin:5px 2px 0;line-height:2em;background:rgba(128, 0, 0, 0.6);box-sizing:border-box;order:2;}
.counter{position:absolute;background-color:rgba(0, 0, 0, 0.5);display:block;left:0;bottom:-3.5em;color:rgba(249, 234, 234, 0.9);padding:5px;right:0;font-size:.9em;text-align:center;transition:bottom .2s ease-out;border-radius:5px;z-index:100;text-transform:uppercase;}
main h2{flex:1 0 auto;text-align:center;font-size:1.1em;text-transform:uppercase;color:rgba(222, 236, 243, 0.83);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.3em;display:flex;flex:0 1 auto;align-items:center;justify-content:center;font-weight:bold;border:1px solid;border-radius:7px;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;}
ul.paginator b{text-shadow:0px 0px 3px rgb(222, 236, 243);padding:3px 10px;color:#000;width:12px;border:1px solid;border-color:#000;height:26px;box-sizing:content-box;background:linear-gradient(rgba(126, 126, 134, 0.6), rgba(70, 71, 76, 0.1)) rgba(126, 126, 134, 0.1);}
ul.paginator li a{text-decoration:none;display:block;color:#000;text-shadow:0px 0px 3px rgba(222, 236, 243, 0.6);padding:3px 10px;}
ul.paginator li:hover:not(:active){background:linear-gradient(rgba(126, 126, 134, 0.6), rgba(70, 71, 76, 0.1)) rgba(126, 126, 134, 0.1);}
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:rgba(249, 234, 234, 0.9);text-shadow:3px 3px 3px rgba(0, 0, 0, 0.8);}
footer{flex:1 1 100%;background:rgba(128, 0, 0, 0.6);text-align:center;border-radius:7px;z-index:1;margin:5px 5px 0;box-sizing:border-box;}
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:rgba(222, 236, 243, 0.83);text-shadow:3px 3px 3px rgba(0, 0, 0, 0.75);font-weight:bold;max-width:200px;margin:auto;transition:0.35s ease-in-out;border-radius:7px;}
footer ul li a:hover{color:#000;border-radius:7px;background:linear-gradient(rgba(126, 126, 134, 0.6), rgba(70, 71, 76, 0.1)) rgba(126, 126, 134, 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);}
.spot{
    flex: 1 1 auto;
    background: rgba(128, 0, 0, 0.6);
    margin: 2px 5px 0;
    border-radius: 7px;
    order: 6;
}
.button{
    display: flex;
    flex: 1 1 auto;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
}
.start:hover{
    color: #ec0707;
    text-shadow: 0px 0px 3px rgba(222, 236, 243, 0.6);
}
.click{
    background: transparent;
    border: 0px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    outline: none;
    font: inherit;
    font-size: 1.1em;
    font-weight: bold;
    height: 100%;
    text-transform: uppercase;
    color: rgba(222, 236, 243, 0.83);
    text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.75);
}
.button a{
    display: block;
    height: 100%;
    transition: .2s ease-in-out;
    min-height: 40px;
}
.button a:hover{
    border-radius: 7px;
    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);
    background: linear-gradient(rgba(126, 126, 134, 0.6), rgba(70, 71, 76, 0.1)) rgba(126, 126, 134, 0.1);
}
.fa-refresh{font-size: 1.3em !important;width: 1em !important;}
.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:780px;}
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){header h1{margin:0;}
main div.thumb{min-height:800px;}
}
@media screen and (max-width:666px){header{flex-flow:wrap;}
header h1{flex:1 0 100%;line-height:1.7em;font-size:1.0em;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;}
}