html, body {
height: 100%;
}
/*
* Font
*/
body {
font: 14px/1.42857143 'Lato', sans-serif;
color: #fff;
letter-spacing: 0.06em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: #000;
}
/*
* Headings
*/
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
color: #fff; }
h1, .h1 {
font-size: 5rem;
margin-top: 6rem;
margin-bottom: 4rem; }
h1 .btn, .h1 .btn {
margin-top: 7px; }
h1 .btn-lg, .h1 .btn-lg {
margin-top: 0; }
h2, .h2 {
margin-top: 4rem;
margin-bottom: 2.5rem; }
p {
margin-bottom: 1rem;
margin-top: 1rem; }
.label {
font-weight: normal; }
iframe {
border: 0; }
.fa {
-webkit-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none; }
/*
* Links
*/
a {
color: inherit;
text-decoration: underline;
-o-transition: .3s color ease;
transition: .3s color ease; }
a:hover,
a:focus {
color: #D92B4C; }
/*
* Images max width
*/
img {
max-width: 100%; }
/*
* Social List
*/
.social-list {
display: block;
margin: 1rem 0;
clear: both; }
.social-list:after, .social-list:before {
content: '';
display: table;
clear: both; }
/*
* Tags
*/
.tags {
margin: 1rem 0;
display: block;
clear: both;
color: rgba(255, 255, 255, 0.5);
font-size: 1.2rem; }
.tags a {
text-decoration: none; }
/*
* Date
*/
.date {
margin-top: 8px;
color: rgba(255, 255, 255, 0.5);
font-size: 1.2rem; }
/*
* Meta
*/
.meta {
display: block;
clear: both;
font-size: 1.2rem;
margin: 1rem 0; }
.meta .item {
display: inline-block;
margin-right: 2rem; }
.meta .meta-icon {
font-size: 1.5rem;
margin-right: 3px;
vertical-align: text-bottom; }
/*
* Description
*/
.description {
margin: 0;
margin-top: 1rem;
margin-bottom: 2rem; }
/*
* Content
*/
.content-wrap {
max-width: 1400px;
margin: 0 auto;
background: #000;
padding: 0.1px;
overflow: hidden; }
.content-wrap .youplay-content {
margin-top: 6rem;
margin-bottom: 6rem; }
.content-wrap.full, .content-wrap.wide {
max-width: none; }
@media (max-width: 767px), (min-width: 767px) and (max-width: 991px) {
.content-wrap .youplay-content .side-block:first-child {
margin-top: 6rem; }
.content-wrap .youplay-content .side-block:last-child {
margin-bottom: 6rem; } }
.youplay-section {
margin-bottom: 6rem; }
/*
* Google Maps
*/
.youplay-gmaps {
height: 450px;
width: 100%; }
/*------------------------------------------------------------------
Helper Classes
-------------------------------------------------------------------*/
/*
* Text Color Helper
*/
.text-default {
color: #D92B4C !important; }
.text-primary {
color: #2B6AD9 !important; }
.text-success {
color: #2BD964 !important; }
.text-info {
color: #2BD7D9 !important; }
.text-warning {
color: #EB8324 !important; }
.text-danger {
color: #D92B4C !important; }
.text-mute {
color: rgba(255, 255, 255, 0.5) !important; }
/*
* Bg Color Helper
*/
.bg-default {
background-color: #D92B4C !important; }
.bg-primary {
background-color: #2B6AD9 !important; }
.bg-success {
background-color: #2BD964 !important; }
.bg-info {
background-color: #2BD7D9 !important; }
.bg-warning {
background-color: #EB8324 !important; }
.bg-danger {
background-color: #D92B4C !important; }
/*
* Circle / Rounded Images Helper
*/
img.circle {
border-radius: 50%; }
img.rounded {
border-radius: 5px; }
/*
* Text Align Helper
*/
.align-left {
text-align: left; }
.align-center {
text-align: center; }
.align-right {
text-align: right; }
.align-justify {
text-align: justify; }
/*
* Vertical Align Helper
*/
.va-t {
vertical-align: top !important; }
.va-m {
vertical-align: middle !important; }
.va-b {
vertical-align: bottom !important; }
.va-s {
vertical-align: super !important; }
/*
* Inline Block Helper
*/
.dib {
display: inline-block !important; }
/*
* Cursor Pointer Helper
*/
.cursor {
cursor: pointer !important; }
/*
* Text Transform Helper
*/
.text-uppercase {
text-transform: uppercase !important; }
/*
* Font Weight Helper
*/
.fw-100 {
font-weight: 100 !important; }
.fw-200 {
font-weight: 200 !important; }
.fw-300 {
font-weight: 300 !important; }
.fw-400 {
font-weight: 400 !important; }
.fw-500 {
font-weight: 500 !important; }
.fw-600 {
font-weight: 600 !important; }
.fw-700 {
font-weight: 700 !important; }
.fw-800 {
font-weight: 800 !important; }
.fw-900 {
font-weight: 900 !important; }
/*
* Font Size Helper
*/
.fs-4 {
font-size: 4px !important; }
.fs-5 {
font-size: 5px !important; }
.fs-6 {
font-size: 6px !important; }
.fs-7 {
font-size: 7px !important; }
.fs-8 {
font-size: 8px !important; }
.fs-9 {
font-size: 9px !important; }
.fs-10 {
font-size: 10px !important; }
.fs-11 {
font-size: 11px !important; }
.fs-12 {
font-size: 12px !important; }
.fs-13 {
font-size: 13px !important; }
.fs-14 {
font-size: 14px !important; }
.fs-15 {
font-size: 15px !important; }
.fs-16 {
font-size: 16px !important; }
.fs-17 {
font-size: 17px !important; }
.fs-18 {
font-size: 18px !important; }
.fs-19 {
font-size: 19px !important; }
.fs-20 {
font-size: 20px !important; }
.fs-22 {
font-size: 22px !important; }
.fs-24 {
font-size: 24px !important; }
.fs-26 {
font-size: 26px !important; }
.fs-28 {
font-size: 28px !important; }
.fs-30 {
font-size: 30px !important; }
.fs-35 {
font-size: 35px !important; }
.fs-40 {
font-size: 40px !important; }
.fs-45 {
font-size: 45px !important; }
.fs-50 {
font-size: 50px !important; }
/*
* Line Height Helper
*/
.lh-0 {
line-height: 0px !important; }
.lh-5 {
line-height: 5px !important; }
.lh-10 {
line-height: 10px !important; }
.lh-15 {
line-height: 15px !important; }
.lh-20 {
line-height: 20px !important; }
.lh-25 {
line-height: 25px !important; }
.lh-30 {
line-height: 30px !important; }
.lh-35 {
line-height: 35px !important; }
.lh-40 {
line-height: 40px !important; }
.lh-45 {
line-height: 45px !important; }
.lh-50 {
line-height: 50px !important; }
/*
* Text Ellipsis Helper
*/
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
/*
* Overflow Helper
*/
.of-a {
overflow: auto !important; }
.of-h {
overflow: hidden !important; }
.of-v {
overflow: visible !important; }
.of-x-a {
overflow-x: auto !important; }
.of-x-h {
overflow-x: hidden !important; }
.of-x-v {
overflow-x: visible !important; }
.of-y-a {
overflow-y: auto !important; }
.of-y-h {
overflow-y: hidden !important; }
.of-y-v {
overflow-y: visible !important; }
/*
* Border Radius Helper
*/
.br-0 {
border-radius: 0px !important; }
.br-1 {
border-radius: 1px !important; }
.br-2 {
border-radius: 2px !important; }
.br-3 {
border-radius: 3px !important; }
.br-4 {
border-radius: 4px !important; }
.br-5 {
border-radius: 5px !important; }
.br-6 {
border-radius: 6px !important; }
.br-7 {
border-radius: 7px !important; }
.br-8 {
border-radius: 8px !important; }
.br-9 {
border-radius: 9px !important; }
.br-10 {
border-radius: 10px !important; }
.br-12 {
border-radius: 12px !important; }
.br-14 {
border-radius: 14px !important; }
.br-16 {
border-radius: 16px !important; }
.br-18 {
border-radius: 18px !important; }
.br-20 {
border-radius: 20px !important; }
.br-25 {
border-radius: 25px !important; }
.br-30 {
border-radius: 30px !important; }
.br-35 {
border-radius: 35px !important; }
/*
* Paddings Helper
*/
.p-0 {
padding: 0px !important; }
.p-1 {
padding: 1px !important; }
.p-2 {
padding: 2px !important; }
.p-3 {
padding: 3px !important; }
.p-4 {
padding: 4px !important; }
.p-5 {
padding: 5px !important; }
.p-6 {
padding: 6px !important; }
.p-7 {
padding: 7px !important; }
.p-8 {
padding: 8px !important; }
.p-9 {
padding: 9px !important; }
.p-10 {
padding: 10px !important; }
.p-15 {
padding: 15px !important; }
.p-20 {
padding: 20px !important; }
.p-25 {
padding: 25px !important; }
.p-30 {
padding: 30px !important; }
.p-35 {
padding: 35px !important; }
.p-40 {
padding: 40px !important; }
.p-45 {
padding: 45px !important; }
.p-50 {
padding: 50px !important; }
.p-60 {
padding: 60px !important; }
.p-70 {
padding: 70px !important; }
.p-80 {
padding: 80px !important; }
.p-90 {
padding: 90px !important; }
.p-100 {
padding: 100px !important; }
.pt-0 {
padding-top: 0px !important; }
.pt-1 {
padding-top: 1px !important; }
.pt-2 {
padding-top: 2px !important; }
.pt-3 {
padding-top: 3px !important; }
.pt-4 {
padding-top: 4px !important; }
.pt-5 {
padding-top: 5px !important; }
.pt-6 {
padding-top: 6px !important; }
.pt-7 {
padding-top: 7px !important; }
.pt-8 {
padding-top: 8px !important; }
.pt-9 {
padding-top: 9px !important; }
.pt-10 {
padding-top: 10px !important; }
.pt-15 {
padding-top: 15px !important; }
.pt-20 {
padding-top: 20px !important; }
.pt-25 {
padding-top: 25px !important; }
.pt-30 {
padding-top: 30px !important; }
.pt-35 {
padding-top: 35px !important; }
.pt-40 {
padding-top: 40px !important; }
.pt-45 {
padding-top: 45px !important; }
.pt-50 {
padding-top: 50px !important; }
.pt-60 {
padding-top: 60px !important; }
.pt-70 {
padding-top: 70px !important; }
.pt-80 {
padding-top: 80px !important; }
.pt-90 {
padding-top: 90px !important; }
.pt-100 {
padding-top: 100px !important; }
.pl-0 {
padding-left: 0px !important; }
.pl-1 {
padding-left: 1px !important; }
.pl-2 {
padding-left: 2px !important; }
.pl-3 {
padding-left: 3px !important; }
.pl-4 {
padding-left: 4px !important; }
.pl-5 {
padding-left: 5px !important; }
.pl-6 {
padding-left: 6px !important; }
.pl-7 {
padding-left: 7px !important; }
.pl-8 {
padding-left: 8px !important; }
.pl-9 {
padding-left: 9px !important; }
.pl-10 {
padding-left: 10px !important; }
.pl-15 {
padding-left: 15px !important; }
.pl-20 {
padding-left: 20px !important; }
.pl-25 {
padding-left: 25px !important; }
.pl-30 {
padding-left: 30px !important; }
.pl-35 {
padding-left: 35px !important; }
.pl-40 {
padding-left: 40px !important; }
.pl-45 {
padding-left: 45px !important; }
.pl-50 {
padding-left: 50px !important; }
.pl-60 {
padding-left: 60px !important; }
.pl-70 {
padding-left: 70px !important; }
.pl-80 {
padding-left: 80px !important; }
.pl-90 {
padding-left: 90px !important; }
.pl-100 {
padding-left: 100px !important; }
.pr-0 {
padding-right: 0px !important; }
.pr-1 {
padding-right: 1px !important; }
.pr-2 {
padding-right: 2px !important; }
.pr-3 {
padding-right: 3px !important; }
.pr-4 {
padding-right: 4px !important; }
.pr-5 {
padding-right: 5px !important; }
.pr-6 {
padding-right: 6px !important; }
.pr-7 {
padding-right: 7px !important; }
.pr-8 {
padding-right: 8px !important; }
.pr-9 {
padding-right: 9px !important; }
.pr-10 {
padding-right: 10px !important; }
.pr-15 {
padding-right: 15px !important; }
.pr-20 {
padding-right: 20px !important; }
.pr-25 {
padding-right: 25px !important; }
.pr-30 {
padding-right: 30px !important; }
.pr-35 {
padding-right: 35px !important; }
.pr-40 {
padding-right: 40px !important; }
.pr-45 {
padding-right: 45px !important; }
.pr-50 {
padding-right: 50px !important; }
.pr-60 {
padding-right: 60px !important; }
.pr-70 {
padding-right: 70px !important; }
.pr-80 {
padding-right: 80px !important; }
.pr-90 {
padding-right: 90px !important; }
.pr-100 {
padding-right: 100px !important; }
.pb-0 {
padding-bottom: 0px !important; }
.pb-1 {
padding-bottom: 1px !important; }
.pb-2 {
padding-bottom: 2px !important; }
.pb-3 {
padding-bottom: 3px !important; }
.pb-4 {
padding-bottom: 4px !important; }
.pb-5 {
padding-bottom: 5px !important; }
.pb-6 {
padding-bottom: 6px !important; }
.pb-7 {
padding-bottom: 7px !important; }
.pb-8 {
padding-bottom: 8px !important; }
.pb-9 {
padding-bottom: 9px !important; }
.pb-10 {
padding-bottom: 10px !important; }
.pb-15 {
padding-bottom: 15px !important; }
.pb-20 {
padding-bottom: 20px !important; }
.pb-25 {
padding-bottom: 25px !important; }
.pb-30 {
padding-bottom: 30px !important; }
.pb-35 {
padding-bottom: 35px !important; }
.pb-40 {
padding-bottom: 40px !important; }
.pb-45 {
padding-bottom: 45px !important; }
.pb-50 {
padding-bottom: 50px !important; }
.pb-60 {
padding-bottom: 60px !important; }
.pb-70 {
padding-bottom: 70px !important; }
.pb-80 {
padding-bottom: 80px !important; }
.pb-90 {
padding-bottom: 90px !important; }
.pb-100 {
padding-bottom: 100px !important; }
/*
* Margins Helper
*/
.mauto {
margin-left: auto;
margin-right: auto; }
.m-0 {
margin: 0px !important; }
.m-1 {
margin: 1px !important; }
.m-2 {
margin: 2px !important; }
.m-3 {
margin: 3px !important; }
.m-4 {
margin: 4px !important; }
.m-5 {
margin: 5px !important; }
.m-6 {
margin: 6px !important; }
.m-7 {
margin: 7px !important; }
.m-8 {
margin: 8px !important; }
.m-9 {
margin: 9px !important; }
.m-10 {
margin: 10px !important; }
.m-15 {
margin: 15px !important; }
.m-20 {
margin: 20px !important; }
.m-25 {
margin: 25px !important; }
.m-30 {
margin: 30px !important; }
.m-35 {
margin: 35px !important; }
.m-40 {
margin: 40px !important; }
.m-45 {
margin: 45px !important; }
.m-50 {
margin: 50px !important; }
.m-60 {
margin: 60px !important; }
.m-70 {
margin: 70px !important; }
.m-80 {
margin: 80px !important; }
.m-90 {
margin: 90px !important; }
.m-100 {
margin: 100px !important; }
.mt-0 {
margin-top: 0px !important; }
.mt-1 {
margin-top: 1px !important; }
.mt-2 {
margin-top: 2px !important; }
.mt-3 {
margin-top: 3px !important; }
.mt-4 {
margin-top: 4px !important; }
.mt-5 {
margin-top: 5px !important; }
.mt-6 {
margin-top: 6px !important; }
.mt-7 {
margin-top: 7px !important; }
.mt-8 {
margin-top: 8px !important; }
.mt-9 {
margin-top: 9px !important; }
.mt-10 {
margin-top: 10px !important; }
.mt-15 {
margin-top: 15px !important; }
.mt-20 {
margin-top: 20px !important; }
.mt-25 {
margin-top: 25px !important; }
.mt-30 {
margin-top: 30px !important; }
.mt-35 {
margin-top: 35px !important; }
.mt-40 {
margin-top: 40px !important; }
.mt-45 {
margin-top: 45px !important; }
.mt-50 {
margin-top: 50px !important; }
.mt-60 {
margin-top: 60px !important; }
.mt-70 {
margin-top: 70px !important; }
.mt-80 {
margin-top: 80px !important; }
.mt-90 {
margin-top: 90px !important; }
.mt-100 {
margin-top: 100px !important; }
.ml-0 {
margin-left: 0px !important; }
.ml-1 {
margin-left: 1px !important; }
.ml-2 {
margin-left: 2px !important; }
.ml-3 {
margin-left: 3px !important; }
.ml-4 {
margin-left: 4px !important; }
.ml-5 {
margin-left: 5px !important; }
.ml-6 {
margin-left: 6px !important; }
.ml-7 {
margin-left: 7px !important; }
.ml-8 {
margin-left: 8px !important; }
.ml-9 {
margin-left: 9px !important; }
.ml-10 {
margin-left: 10px !important; }
.ml-15 {
margin-left: 15px !important; }
.ml-20 {
margin-left: 20px !important; }
.ml-25 {
margin-left: 25px !important; }
.ml-30 {
margin-left: 30px !important; }
.ml-35 {
margin-left: 35px !important; }
.ml-40 {
margin-left: 40px !important; }
.ml-45 {
margin-left: 45px !important; }
.ml-50 {
margin-left: 50px !important; }
.ml-60 {
margin-left: 60px !important; }
.ml-70 {
margin-left: 70px !important; }
.ml-80 {
margin-left: 80px !important; }
.ml-90 {
margin-left: 90px !important; }
.ml-100 {
margin-left: 100px !important; }
.mr-0 {
margin-right: 0px !important; }
.mr-1 {
margin-right: 1px !important; }
.mr-2 {
margin-right: 2px !important; }
.mr-3 {
margin-right: 3px !important; }
.mr-4 {
margin-right: 4px !important; }
.mr-5 {
margin-right: 5px !important; }
.mr-6 {
margin-right: 6px !important; }
.mr-7 {
margin-right: 7px !important; }
.mr-8 {
margin-right: 8px !important; }
.mr-9 {
margin-right: 9px !important; }
.mr-10 {
margin-right: 10px !important; }
.mr-15 {
margin-right: 15px !important; }
.mr-20 {
margin-right: 20px !important; }
.mr-25 {
margin-right: 25px !important; }
.mr-30 {
margin-right: 30px !important; }
.mr-35 {
margin-right: 35px !important; }
.mr-40 {
margin-right: 40px !important; }
.mr-45 {
margin-right: 45px !important; }
.mr-50 {
margin-right: 50px !important; }
.mr-60 {
margin-right: 60px !important; }
.mr-70 {
margin-right: 70px !important; }
.mr-80 {
margin-right: 80px !important; }
.mr-90 {
margin-right: 90px !important; }
.mr-100 {
margin-right: 100px !important; }
.mb-0 {
margin-bottom: 0px !important; }
.mb-1 {
margin-bottom: 1px !important; }
.mb-2 {
margin-bottom: 2px !important; }
.mb-3 {
margin-bottom: 3px !important; }
.mb-4 {
margin-bottom: 4px !important; }
.mb-5 {
margin-bottom: 5px !important; }
.mb-6 {
margin-bottom: 6px !important; }
.mb-7 {
margin-bottom: 7px !important; }
.mb-8 {
margin-bottom: 8px !important; }
.mb-9 {
margin-bottom: 9px !important; }
.mb-10 {
margin-bottom: 10px !important; }
.mb-15 {
margin-bottom: 15px !important; }
.mb-20 {
margin-bottom: 20px !important; }
.mb-25 {
margin-bottom: 25px !important; }
.mb-30 {
margin-bottom: 30px !important; }
.mb-35 {
margin-bottom: 35px !important; }
.mb-40 {
margin-bottom: 40px !important; }
.mb-45 {
margin-bottom: 45px !important; }
.mb-50 {
margin-bottom: 50px !important; }
.mb-60 {
margin-bottom: 60px !important; }
.mb-70 {
margin-bottom: 70px !important; }
.mb-80 {
margin-bottom: 80px !important; }
.mb-90 {
margin-bottom: 90px !important; }
.mb-100 {
margin-bottom: 100px !important; }
/*
* Negative Margins Helper
*/
.mn-0 {
margin: 0px !important; }
.mn-1 {
margin: -1px !important; }
.mn-2 {
margin: -2px !important; }
.mn-3 {
margin: -3px !important; }
.mn-4 {
margin: -4px !important; }
.mn-5 {
margin: -5px !important; }
.mn-6 {
margin: -6px !important; }
.mn-7 {
margin: -7px !important; }
.mn-8 {
margin: -8px !important; }
.mn-9 {
margin: -9px !important; }
.mn-10 {
margin: -10px !important; }
.mn-15 {
margin: -15px !important; }
.mn-20 {
margin: -20px !important; }
.mn-25 {
margin: -25px !important; }
.mn-30 {
margin: -30px !important; }
.mn-35 {
margin: -35px !important; }
.mn-40 {
margin: -40px !important; }
.mn-45 {
margin: -45px !important; }
.mn-50 {
margin: -50px !important; }
.mn-60 {
margin: -60px !important; }
.mn-70 {
margin: -70px !important; }
.mn-80 {
margin: -80px !important; }
.mn-90 {
margin: -90px !important; }
.mn-100 {
margin: -100px !important; }
.mnt-0 {
margin-top: 0px !important; }
.mnt-1 {
margin-top: -1px !important; }
.mnt-2 {
margin-top: -2px !important; }
.mnt-3 {
margin-top: -3px !important; }
.mnt-4 {
margin-top: -4px !important; }
.mnt-5 {
margin-top: -5px !important; }
.mnt-6 {
margin-top: -6px !important; }
.mnt-7 {
margin-top: -7px !important; }
.mnt-8 {
margin-top: -8px !important; }
.mnt-9 {
margin-top: -9px !important; }
.mnt-10 {
margin-top: -10px !important; }
.mnt-15 {
margin-top: -15px !important; }
.mnt-20 {
margin-top: -20px !important; }
.mnt-25 {
margin-top: -25px !important; }
.mnt-30 {
margin-top: -30px !important; }
.mnt-35 {
margin-top: -35px !important; }
.mnt-40 {
margin-top: -40px !important; }
.mnt-45 {
margin-top: -45px !important; }
.mnt-50 {
margin-top: -50px !important; }
.mnt-60 {
margin-top: -60px !important; }
.mnt-70 {
margin-top: -70px !important; }
.mnt-80 {
margin-top: -80px !important; }
.mnt-90 {
margin-top: -90px !important; }
.mnt-100 {
margin-top: -100px !important; }
.mnl-0 {
margin-left: 0px !important; }
.mnl-1 {
margin-left: -1px !important; }
.mnl-2 {
margin-left: -2px !important; }
.mnl-3 {
margin-left: -3px !important; }
.mnl-4 {
margin-left: -4px !important; }
.mnl-5 {
margin-left: -5px !important; }
.mnl-6 {
margin-left: -6px !important; }
.mnl-7 {
margin-left: -7px !important; }
.mnl-8 {
margin-left: -8px !important; }
.mnl-9 {
margin-left: -9px !important; }
.mnl-10 {
margin-left: -10px !important; }
.mnl-15 {
margin-left: -15px !important; }
.mnl-20 {
margin-left: -20px !important; }
.mnl-25 {
margin-left: -25px !important; }
.mnl-30 {
margin-left: -30px !important; }
.mnl-35 {
margin-left: -35px !important; }
.mnl-40 {
margin-left: -40px !important; }
.mnl-45 {
margin-left: -45px !important; }
.mnl-50 {
margin-left: -50px !important; }
.mnl-60 {
margin-left: -60px !important; }
.mnl-70 {
margin-left: -70px !important; }
.mnl-80 {
margin-left: -80px !important; }
.mnl-90 {
margin-left: -90px !important; }
.mnl-100 {
margin-left: -100px !important; }
.mnr-0 {
margin-right: 0px !important; }
.mnr-1 {
margin-right: -1px !important; }
.mnr-2 {
margin-right: -2px !important; }
.mnr-3 {
margin-right: -3px !important; }
.mnr-4 {
margin-right: -4px !important; }
.mnr-5 {
margin-right: -5px !important; }
.mnr-6 {
margin-right: -6px !important; }
.mnr-7 {
margin-right: -7px !important; }
.mnr-8 {
margin-right: -8px !important; }
.mnr-9 {
margin-right: -9px !important; }
.mnr-10 {
margin-right: -10px !important; }
.mnr-15 {
margin-right: -15px !important; }
.mnr-20 {
margin-right: -20px !important; }
.mnr-25 {
margin-right: -25px !important; }
.mnr-30 {
margin-right: -30px !important; }
.mnr-35 {
margin-right: -35px !important; }
.mnr-40 {
margin-right: -40px !important; }
.mnr-45 {
margin-right: -45px !important; }
.mnr-50 {
margin-right: -50px !important; }
.mnr-60 {
margin-right: -60px !important; }
.mnr-70 {
margin-right: -70px !important; }
.mnr-80 {
margin-right: -80px !important; }
.mnr-90 {
margin-right: -90px !important; }
.mnr-100 {
margin-right: -100px !important; }
.mnb-0 {
margin-bottom: 0px !important; }
.mnb-1 {
margin-bottom: -1px !important; }
.mnb-2 {
margin-bottom: -2px !important; }
.mnb-3 {
margin-bottom: -3px !important; }
.mnb-4 {
margin-bottom: -4px !important; }
.mnb-5 {
margin-bottom: -5px !important; }
.mnb-6 {
margin-bottom: -6px !important; }
.mnb-7 {
margin-bottom: -7px !important; }
.mnb-8 {
margin-bottom: -8px !important; }
.mnb-9 {
margin-bottom: -9px !important; }
.mnb-10 {
margin-bottom: -10px !important; }
.mnb-15 {
margin-bottom: -15px !important; }
.mnb-20 {
margin-bottom: -20px !important; }
.mnb-25 {
margin-bottom: -25px !important; }
.mnb-30 {
margin-bottom: -30px !important; }
.mnb-35 {
margin-bottom: -35px !important; }
.mnb-40 {
margin-bottom: -40px !important; }
.mnb-45 {
margin-bottom: -45px !important; }
.mnb-50 {
margin-bottom: -50px !important; }
.mnb-60 {
margin-bottom: -60px !important; }
.mnb-70 {
margin-bottom: -70px !important; }
.mnb-80 {
margin-bottom: -80px !important; }
.mnb-90 {
margin-bottom: -90px !important; }
.mnb-100 {
margin-bottom: -100px !important; }
/*
* Opacity
*/
.op-0 {
opacity: 0 !important; }
.op-1 {
opacity: 0.1 !important; }
.op-2 {
opacity: 0.2 !important; }
.op-3 {
opacity: 0.3 !important; }
.op-4 {
opacity: 0.4 !important; }
.op-5 {
opacity: 0.5 !important; }
.op-6 {
opacity: 0.6 !important; }
.op-7 {
opacity: 0.7 !important; }
.op-8 {
opacity: 0.8 !important; }
.op-9 {
opacity: 0.9 !important; }
.op-10 {
opacity: 1 !important; }
/*
* Responsive embeds
*/
.responsive-embed {
position: relative;
display: block;
overflow: hidden;
height: 0;
padding: 0;
clear: both; }
.responsive-embed.responsive-embed-16x9 {
padding-bottom: 56.25%; }
.responsive-embed.responsive-embed-4x3 {
padding-bottom: 75%; }
.responsive-embed > .embed-item,
.responsive-embed > iframe,
.responsive-embed > embed,
.responsive-embed > object {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
border: 0; }
/*------------------------------------------------------------------
Angled Buttons
-------------------------------------------------------------------*/
.btn,
.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.btn.active:hover,
.btn:active:hover,
.btn.active:focus,
.btn:active:focus,
.btn.active.focus,
.btn:active.focus {
background: none;
border: none;
color: #fff;
box-shadow: none;
text-decoration: none;
outline: none; }
.btn {
position: relative;
margin-left: 10px;
margin-right: 10px;
padding: 10px 30px;
z-index: 1; }
.btn.btn-xs {
padding: 4px 15px; }
.btn.btn-sm {
padding: 8px 20px; }
.btn.btn-lg {
padding: 15px 50px; }
.btn.btn-full {
margin-left: 0;
margin-right: 0;
width: 100%; }
.btn:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid #fff;
z-index: -1;
-webkit-transform: skew(-8deg);
-ms-transform: skew(-8deg);
-o-transform: skew(-8deg);
transform: skew(-8deg);
background: none;
-o-transition: .3s background ease, .3s border ease;
transition: .3s background ease, .3s border ease; }
.btn:hover:before,
.btn:focus:before,
.btn.focus:before,
.btn:active:before,
.btn.active:before,
.open > .dropdown-toggle.btn:before {
border: 2px solid #fff;
background: #56974e; }
.btn-primary:hover:before,
.btn-primary:focus:before,
.btn-primary.focus:before,
.btn-primary:active:before,
.btn-primary.active:before,
.open > .dropdown-toggle.btn-primary:before {
border: 2px solid #2B6AD9;
background: #2B6AD9; }
.btn-success:hover:before,
.btn-success:focus:before,
.btn-success.focus:before,
.btn-success:active:before,
.btn-success.active:before,
.open > .dropdown-toggle.btn-success:before {
border: 2px solid #2BD964;
background: #2BD964; }
.btn-info:hover:before,
.btn-info:focus:before,
.btn-info.focus:before,
.btn-info:active:before,
.btn-info.active:before,
.open > .dropdown-toggle.btn-info:before {
border: 2px solid #2BD7D9;
background: #2BD7D9; }
.btn-warning:hover:before,
.btn-warning:focus:before,
.btn-warning.focus:before,
.btn-warning:active:before,
.btn-warning.active:before,
.open > .dropdown-toggle.btn-warning:before {
border: 2px solid #EB8324;
background: #5d8058; }
.btn-danger:hover:before,
.btn-danger:focus:before,
.btn-danger.focus:before,
.btn-danger:active:before,
.btn-danger.active:before,
.open > .dropdown-toggle.btn-danger:before {
border: 2px solid #D92B4C;
background: #5d8058; }
.dropdown-menu {
padding: 5px 0;
margin-top: 0;
margin-left: -3px;
background-color: #fff;
border: none;
border-radius: 0;
box-shadow: none; }
.dropup .dropdown-menu {
margin-bottom: 0;
margin-left: 3px; }
.dropdown-menu > li > a {
padding: 10px 20px;
text-decoration: none;
color: #080325; }
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
color: #080325;
background-color: #f2f2f2; }
.btn-group > .btn + .dropdown-toggle {
margin-left: -12px; }
.open > .dropdown-toggle.btn {
background: none;
border: none;
box-shadow: none;
color: #fff; }
.btn-default.disabled,
.btn-default.disabled.active,
.btn-default.disabled.focus,
.btn-default.disabled:active,
.btn-default.disabled:focus,
.btn-default.disabled:hover,
.btn-default[disabled],
.btn-default[disabled].active,
.btn-default[disabled].focus,
.btn-default[disabled]:active,
.btn-default[disabled]:focus,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default,
fieldset[disabled] .btn-default.active,
fieldset[disabled] .btn-default.focus,
fieldset[disabled] .btn-default:active,
fieldset[disabled] .btn-default:focus,
fieldset[disabled] .btn-default:hover {
background-color: transparent;
border-color: transparent; }
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
opacity: 0.3; }
/*------------------------------------------------------------------
Bootstrap Grid Additions
-------------------------------------------------------------------*/
.row.no-gutter {
margin-left: 0;
margin-right: 0; }
.row.no-gutter > [class*='col-']:not(:first-child),
.row.no-gutter > [class*='col-']:not(:last-child) {
padding-right: 0;
padding-left: 0; }
.row.vertical-gutter > [class*='col-'],
.row.vertical-gutter > [class*='col-'] {
padding-top: 30px; }
.row.vertical-gutter {
margin-top: -30px; }
.multi-columns-row .first-in-row {
clear: left; }
.multi-columns-row .col-xs-6:nth-child(2n + 3) {
clear: left; }
.multi-columns-row .col-xs-4:nth-child(3n + 4) {
clear: left; }
.multi-columns-row .col-xs-3:nth-child(4n + 5) {
clear: left; }
.multi-columns-row .col-xs-2:nth-child(6n + 7) {
clear: left; }
.multi-columns-row .col-xs-1:nth-child(12n + 13) {
clear: left; }
@media (min-width: 768px) {
.multi-columns-row .col-xs-6:nth-child(2n + 3) {
clear: none; }
.multi-columns-row .col-xs-4:nth-child(3n + 4) {
clear: none; }
.multi-columns-row .col-xs-3:nth-child(4n + 5) {
clear: none; }
.multi-columns-row .col-xs-2:nth-child(6n + 7) {
clear: none; }
.multi-columns-row .col-xs-1:nth-child(12n + 13) {
clear: none; }
.multi-columns-row .col-sm-6:nth-child(2n + 3) {
clear: left; }
.multi-columns-row .col-sm-4:nth-child(3n + 4) {
clear: left; }
.multi-columns-row .col-sm-3:nth-child(4n + 5) {
clear: left; }
.multi-columns-row .col-sm-2:nth-child(6n + 7) {
clear: left; }
.multi-columns-row .col-sm-1:nth-child(12n + 13) {
clear: left; } }
@media (min-width: 992px) {
.multi-columns-row .col-sm-6:nth-child(2n + 3) {
clear: none; }
.multi-columns-row .col-sm-4:nth-child(3n + 4) {
clear: none; }
.multi-columns-row .col-sm-3:nth-child(4n + 5) {
clear: none; }
.multi-columns-row .col-sm-2:nth-child(6n + 7) {
clear: none; }
.multi-columns-row .col-sm-1:nth-child(12n + 13) {
clear: none; }
.multi-columns-row .col-md-6:nth-child(2n + 3) {
clear: left; }
.multi-columns-row .col-md-4:nth-child(3n + 4) {
clear: left; }
.multi-columns-row .col-md-3:nth-child(4n + 5) {
clear: left; }
.multi-columns-row .col-md-2:nth-child(6n + 7) {
clear: left; }
.multi-columns-row .col-md-1:nth-child(12n + 13) {
clear: left; } }
@media (min-width: 1200px) {
.multi-columns-row .col-md-6:nth-child(2n + 3) {
clear: none; }
.multi-columns-row .col-md-4:nth-child(3n + 4) {
clear: none; }
.multi-columns-row .col-md-3:nth-child(4n + 5) {
clear: none; }
.multi-columns-row .col-md-2:nth-child(6n + 7) {
clear: none; }
.multi-columns-row .col-md-1:nth-child(12n + 13) {
clear: none; }
.multi-columns-row .col-lg-6:nth-child(2n + 3) {
clear: left; }
.multi-columns-row .col-lg-4:nth-child(3n + 4) {
clear: left; }
.multi-columns-row .col-lg-3:nth-child(4n + 5) {
clear: left; }
.multi-columns-row .col-lg-2:nth-child(6n + 7) {
clear: left; }
.multi-columns-row .col-lg-1:nth-child(12n + 13) {
clear: left; } }
/*------------------------------------------------------------------
Angled Pagination
-------------------------------------------------------------------*/
.pagination {
display: block;
margin: 4rem 0;
clear: both; }
.pagination:after, .pagination:before {
content: '';
display: block;
clear: both; }
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
border: none; }
.pagination > li > a,
.pagination > li > span {
cursor: pointer; }
.pagination > li:first-child > a,
.pagination > li > a,
.pagination > li > a:hover,
.pagination > li > a:focus,
.pagination > li:first-child > span,
.pagination > li > span,
.pagination > li > span:hover,
.pagination > li > span:focus {
position: relative;
background: none;
border: none;
margin-left: -2px;
padding: 10px 30px;
box-shadow: none;
z-index: 1;
color: #fff;
text-decoration: none; }
.pagination > li:first-child > a:before,
.pagination > li > a:before,
.pagination > li > a:hover:before,
.pagination > li > a:focus:before,
.pagination > li:first-child > span:before,
.pagination > li > span:before,
.pagination > li > span:hover:before,
.pagination > li > span:focus:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid #fff;
z-index: -1;
-webkit-transform: skew(-8deg);
-ms-transform: skew(-8deg);
-o-transform: skew(-8deg);
transform: skew(-8deg);
background: none;
-o-transition: .3s background ease, .3s border ease;
transition: .3s background ease, .3s border ease; }
.pagination > li.active > a,
.pagination > li.active > a:hover,
.pagination > li > a:hover,
.pagination > li.active > span,
.pagination > li.active > span:hover,
.pagination > li > span:hover {
background: none; }
.pagination > li.active > a:before,
.pagination > li.active > a:hover:before,
.pagination > li > a:hover:before,
.pagination > li.active > span:before,
.pagination > li.active > span:hover:before,
.pagination > li > span:hover:before {
border: 2px solid #D92B4C;
background: #D92B4C; }
/*------------------------------------------------------------------
Progress Bars
-------------------------------------------------------------------*/
.progress {
box-shadow: none;
border-radius: 0;
background-color: rgba(255, 255, 255, 0.1);
-webkit-transform: skew(-8deg);
-ms-transform: skew(-8deg);
-o-transform: skew(-8deg);
transform: skew(-8deg);
-webkit-backface-visibility: hidden; }
.progress .progress-bar {
background-color: #D92B4C; }
.progress .progress-bar-primary {
background-color: #2B6AD9; }
.progress .progress-bar-success {
background-color: #2BD964; }
.progress .progress-bar-info {
background-color: #2BD7D9; }
.progress .progress-bar-warning {
background-color: #EB8324; }
.progress .progress-bar-danger {
background-color: #D92B4C; }
/*------------------------------------------------------------------
Timeline
-------------------------------------------------------------------*/
.youplay-timeline {
position: relative; }
.youplay-timeline:after {
/* clearfix */
content: '';
display: table;
clear: both; }
.youplay-timeline:before {
/* this is the vertical line */
content: '';
position: absolute;
top: 0;
left: 28px;
height: 100%;
width: 4px;
background: rgba(255, 255, 255, 0.1); }
.youplay-timeline .youplay-timeline-block {
position: relative;
margin: 4rem 0;
padding-left: 80px;
clear: both; }
.youplay-timeline .youplay-timeline-block:after {
/* clearfix */
content: '';
display: table;
clear: both; }
.youplay-timeline .youplay-timeline-block:first-child {
margin-top: 0; }
.youplay-timeline .youplay-timeline-block:last-child {
margin-bottom: 0; }
.youplay-timeline .youplay-timeline-icon {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
line-height: 50px;
background: #D92B4C;
font-size: 2rem;
text-align: center;
overflow: hidden;
-webkit-transform: skew(-8deg);
-ms-transform: skew(-8deg);
-o-transform: skew(-8deg);
transform: skew(-8deg);
-webkit-backface-visibility: hidden; }
.youplay-timeline .youplay-timeline-icon > i {
vertical-align: baseline;
-webkit-transform: skew(8deg);
-ms-transform: skew(8deg);
-o-transform: skew(8deg);
transform: skew(8deg);
-webkit-backface-visibility: hidden; }
.youplay-timeline .youplay-timeline-icon img {
display: block;
width: 100%;
-webkit-transform: skew(8deg) scale(1.15);
-ms-transform: skew(8deg) scale(1.15);
-o-transform: skew(8deg) scale(1.15);
transform: skew(8deg) scale(1.15);
-webkit-backface-visibility: hidden; }
.youplay-timeline .youplay-timeline-content {
position: relative;
margin-left: 0;
padding-top: 5px;
width: 100%; }
.youplay-timeline .youplay-timeline-content h3 {
margin-top: 0rem; }
.youplay-timeline .youplay-timeline-content .youplay-timeline-date {
display: inline-block;
position: relative;
float: left;
font-size: 1rem;
padding: 1.5em 0;
opacity: .7;
width: 100%;
left: 0; }
.youplay-timeline-block .youplay-timeline .youplay-timeline-content {
float: none; }
.youplay-timeline-block .youplay-timeline .youplay-timeline-content .youplay-timeline-date {
left: 0;
text-align: left; }
/*------------------------------------------------------------------
Accordion
-------------------------------------------------------------------*/
.panel-group .panel {
background: none;
border: none; }
.panel-group .panel-body {
padding: 1.25rem 1.8rem; }
.panel-group.panel-group .panel + .panel {
margin-top: 1rem; }
.panel-group .panel-heading {
position: relative;
color: #fff;
border: none;
background: none;
background-color: none;
border-radius: none;
padding: 0; }
.panel-group .panel-heading .panel-title a,
.panel-group .panel-heading .panel-title a:hover,
.panel-group .panel-heading .panel-title a:focus {
display: block;
padding: 1.25rem 1.8rem;
color: #fff;
text-decoration: none; }
.panel-group .panel-heading + .panel-collapse > .panel-body {
border: none; }
.panel-group .panel-heading > * {
position: relative;
z-index: 2; }
.panel-group .icon-plus,
.panel-group .icon-minus {
font-size: 2.5rem;
margin-top: -5px;
float: right; }
.panel-group .icon-plus:after,
.panel-group .icon-minus:after {
display: block;
content: '+';
-o-transition: .3s -o-transform ease;
transition: .3s -webkit-transform ease;
transition: .3s transform ease; }
.panel-group .icon-minus:after {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg); }
.panel-group .panel-default > .panel-heading:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.1);
-webkit-transform: skew(-8deg);
-ms-transform: skew(-8deg);
-o-transform: skew(-8deg);
transform: skew(-8deg);
z-index: 1; }
/*------------------------------------------------------------------
Tabs
-------------------------------------------------------------------*/
.nav-tabs {
border-color: rgba(255, 255, 255, 0.1); }
.nav-tabs > li > a,
.nav-tabs > li > a:focus,
.nav-tabs > li > a:hover,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
font-size: 16px;
padding: 1.25rem 1.8rem;
color: #fff;
text-decoration: none;
border-radius: 0;
background: none;
border: none;
margin-bottom: 1px;
margin-left: 3px;
z-index: 1; }
.side-block .nav-tabs > li > a, .side-block
.nav-tabs > li > a:focus, .side-block
.nav-tabs > li > a:hover, .side-block
.nav-tabs > li.active > a, .side-block
.nav-tabs > li.active > a:focus, .side-block
.nav-tabs > li.active > a:hover {
padding: .75rem 1.3rem;
font-size: 1.2rem; }
.nav-tabs > li.active > a:focus:after,
.nav-tabs > li.active > a:hover:after,
.nav-tabs > li.active > a:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.1);
-webkit-transform: skew(-8deg);
-ms-transform: skew(-8deg);
-o-transform: skew(-8deg);
transform: skew(-8deg);
z-index: -1; }
.tab-content > .tab-pane {
padding: 1.25rem 1.8rem; }
/*------------------------------------------------------------------
Features
-------------------------------------------------------------------*/
.youplay-features {
margin-bottom: 4.5rem; }
.youplay-features .feature {
position: relative;
padding: 3rem;
margin-bottom: 3rem;
text-align: center; }
.youplay-features .feature i {
font-size: 5rem; }
/*------------------------------------------------------------------
Tables
-------------------------------------------------------------------*/
.table-bordered,
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th,
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
border-color: rgba(255, 255, 255, 0.1); }
.table-hover > tbody > tr:hover,
.table-striped > tbody > tr:nth-of-type(odd) {
background-color: rgba(255, 255, 255, 0.1); }
/*------------------------------------------------------------------
Pager
-------------------------------------------------------------------*/
.pager li > a,
.pager li > span {
position: relative;
z-index: 1; }
.pager li > a, .pager li > a:focus, .pager li > a:hover,
.pager li > span,
.pager li > span:focus,
.pager li > span:hover {
padding: 5px 14px;
text-decoration: none;
background: none;
border: none;
border-radius: 0;
padding: 10px 30px;
color: #fff; }
.pager li > a:before,
.pager li > span:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid #fff;
z-index: -1;
-webkit-transform: skew(-8deg);
-ms-transform: skew(-8deg);
-o-transform: skew(-8deg);
transform: skew(-8deg);
background: none;
-o-transition: .3s background ease, .3s border ease;
transition: .3s background ease, .3s border ease; }
.pager li > a:hover:before, .pager li > a.active:before,
.pager li > span:hover:before,
.pager li > span.active:before {
border: 2px solid #D92B4C;
background: #D92B4C; }
/*------------------------------------------------------------------
Labels
-------------------------------------------------------------------*/
.label {
position: relative;
background: none;
z-index: 1; }
.label:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
-webkit-transform: skew(-8deg);
-ms-transform: skew(-8deg);
-o-transform: skew(-8deg);
transform: skew(-8deg);
background: rgba(255, 255, 255, 0.1); }
.label-primary:before {
background: #2B6AD9; }
.label-success:before {
background: #2BD964; }
.label-info:before {
background: #2BD7D9; }
.label-warning:before {
background: #EB8324; }
.label-danger:before {
background: #D92B4C; }
/*------------------------------------------------------------------
Alerts
-------------------------------------------------------------------*/
.alert {
position: relative;
border: none;
border-radius: 0;
color: inherit;
background: none;
border-color: none;
z-index: 1; }
.alert:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
-webkit-transform: skew(-8deg);
-ms-transform: skew(-8deg);
-o-transform: skew(-8deg);
transform: skew(-8deg);
background: rgba(255, 255, 255, 0.1); }
.alert-primary:before {
background: #2B6AD9; }
.alert-success:before {
background: #2BD964; }
.alert-info:before {
background: #2BD7D9; }
.alert-warning:before {
background: #EB8324; }
.alert-danger:before {
background: #D92B4C; }
/*------------------------------------------------------------------
Modals
-------------------------------------------------------------------*/
.modal-content {
background-color: #080325;
border: none;
border-radius: 0;
box-shadow: none; }
.modal-header,
.modal-footer {
padding: 3rem;
border-color: rgba(255, 255, 255, 0.2); }
.modal-body {
padding: 3rem; }
.close,
.close:hover,
.close:focus {
color: #fff;
text-shadow: none;
opacity: 0.5; }
.close:hover {
opacity: 1; }
/*------------------------------------------------------------------
Tooltips
-------------------------------------------------------------------*/
.tooltip-inner {
position: relative;
color: #080325;
background: none;
padding: 8px 18px;
border-radius: 0; }
.tooltip-inner:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
-webkit-transform: skew(-8deg);
-ms-transform: skew(-8deg);
-o-transform: skew(-8deg);
transform: skew(-8deg);
background: #fff; }
.tooltip.left .tooltip-arrow {
right: 1px;
border-left-color: #fff; }
.tooltip.top .tooltip-arrow {
border-top-color: #fff; }
.tooltip.bottom .tooltip-arrow {
border-bottom-color: #fff; }
.tooltip.right .tooltip-arrow {
left: 1px;
border-right-color: #fff; }
/*------------------------------------------------------------------
Popovers
-------------------------------------------------------------------*/
.popover {
font: inherit;
background-color: rgba(0,0,0,0.7);
color: #fff;
border: none;
border-radius: 0;
width: 200px;}
.popover.left > .arrow:after {
border-left-color: #333; }
.popover.top > .arrow:after {
border-top-color: #333; }
.popover.bottom > .arrow:after {
border-bottom-color: #333; }
.popover.right > .arrow:after {
left: 1px;
border-right-color: #333; }
.popover-title {
background-color: rgba(157, 111, 45, 0.8);;
color: #fff;
font-weight: bold;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
/*------------------------------------------------------------------
Angled Images
-------------------------------------------------------------------*/
.angled-img {
position: relative;
display: block;
-webkit-shape-outside: polygon(9% 0, 0 100%, 91% 100%, 100% 0%);
shape-outside: polygon(9% 0, 0 100%, 91% 100%, 100% 0%);
pointer-events: auto; }
.angled-img, .angled-img:hover, .angled-img:focus {
color: inherit;
text-decoration: none;
outline: none; }
.angled-img .img {
position: relative;
overflow: hidden;
-webkit-transform: skew(-8deg);
-ms-transform: skew(-8deg);
-o-transform: skew(-8deg);
transform: skew(-8deg);
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
background: #160962 !important;
-webkit-backface-visibility: hidden; }
.angled-img .img > img {
width: 100%;
-webkit-transform: skew(8deg) scale(1.15);
-ms-transform: skew(8deg) scale(1.15);
-o-transform: skew(8deg) scale(1.15);
transform: skew(8deg) scale(1.15);
-o-transition: .3s opacity ease;
transition: .3s opacity ease;
-webkit-backface-visibility: hidden;
opacity: 0.9; }
.angled-img .img.img-offset {
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%; }
.angled-img:hover .img > img {
opacity: 0.6; }
.angled-img .icon {
font-size: 5rem;
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -25px;
opacity: 0.2;
-o-transition: .3s opacity ease;
transition: .3s opacity ease; }
.angled-img:hover .icon {
opacity: 0.8; }
.angled-img .price {
font-weight: bold; }
.angled-img .price del {
color: rgba(255, 255, 255, 0.5); }
.angled-img h4 {
font-weight: bold; }
.angled-img .badge {
position: absolute;
left: 0;
top: 0;
border-radius: 0;
font-size: 1.5rem;
padding: 10px 15px;
-o-transition: .3s opacity ease;
transition: .3s opacity ease;
-webkit-backface-visibility: hidden;
opacity: 0; }
.angled-img .badge.show-half {
opacity: 0.5; }
.angled-img .badge.show {
opacity: 1; }
.angled-img:hover .badge {
opacity: 1; }
.angled-img .over-info {
position: absolute;
top: 0;
left: 0;
width: 90%;
height: 100%;
margin-left: 5%;
text-align: center; }
.angled-img .over-info.bottom {
top: auto;
bottom: 0;
height: auto;
text-align: left; }
.angled-img .over-info h4,
.angled-img .over-info .rating {
margin-top: 1.2rem;
margin-bottom: 1.2rem; }
.angled-img .over-info > div {
display: table;
height: 100%;
width: 100%; }
.angled-img .over-info > div > div {
display: table-cell;
vertical-align: middle; }
.angled-img .bottom-info {
width: 100%;
text-align: center;
margin: 0 auto;
margin-bottom: 1.8rem; }
.angled-img .bottom-info h4 {
position: relative;
text-align: center;
margin-top: 1.8rem;
margin-bottom: 3rem; }
.angled-img .bottom-info h4:after {
content: '';
position: absolute;
bottom: -1.5rem;
left: 0;
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.5); }
/*------------------------------------------------------------------
Angled Backgrounds 1
-------------------------------------------------------------------*/
.angled-bg {
position: relative;
display: block; }
.angled-bg > * {
position: relative;
z-index: 2; }
.angled-bg:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #588959;
-webkit-transform: skew(-8deg);
-ms-transform: skew(-8deg);
-o-transform: skew(-8deg);
transform: skew(-8deg);
z-index: 0;
-o-transition: .3s background ease;
transition: .3s background ease; }
.angled-bg:hover:after {
background: rgba(255, 255, 255, 0.1); }
.angled-bg.item {
display: block;
width: 100%;
margin-bottom: 2rem; }
.angled-bg.item:hover, .angled-bg.item:focus {
color: inherit; }
.angled-bg.item .price {
margin-top: 10px;
margin-right: 20px;
font-size: 1.6rem;
font-weight: bold; }
.angled-bg.item .remove,
.angled-bg.item .remove:hover,
.angled-bg.item .remove:focus {
font-size: 1.7rem;
margin-top: 5px;
margin-right: 20px;
text-decoration: none; }
/*------------------------------------------------------------------
Forms
-------------------------------------------------------------------*/
/* Fixed default inputs text color */
button, input, select, textarea {
color: #000; }
.youplay-input input,
.youplay-input textarea,
.youplay-textarea input,
.youplay-textarea textarea,
.youplay-select select {
color: inherit; }
/* Styled Forms */
.youplay-form {
background: rgba(0, 0, 0, 0.9);
padding: 4rem; }
/* Input and Textarea */
.youplay-input,
.youplay-textarea {
position: relative;
margin-bottom: 2rem; }
.youplay-input ::-webkit-input-placeholder,
.youplay-textarea ::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.5);
transition: .3s color ease; }
.youplay-input ::-moz-placeholder,
.youplay-textarea ::-moz-placeholder {
color: rgba(255, 255, 255, 0.5);
transition: .3s color ease; }
.youplay-input :-ms-input-placeholder,
.youplay-textarea :-ms-input-placeholder {
color: rgba(255, 255, 255, 0.5);
transition: .3s color ease; }
.youplay-input ::placeholder,
.youplay-textarea ::placeholder {
color: rgba(255, 255, 255, 0.5);
-o-transition: .3s color ease;
transition: .3s color ease; }
.youplay-input.input-filled ::-webkit-input-placeholder,
.youplay-textarea.input-filled ::-webkit-input-placeholder {
color: rgba(8, 3, 37, 0.8); }
.youplay-input.input-filled ::-moz-placeholder,
.youplay-textarea.input-filled ::-moz-placeholder {
color: rgba(8, 3, 37, 0.8); }
.youplay-input.input-filled :-ms-input-placeholder,
.youplay-textarea.input-filled :-ms-input-placeholder {
color: rgba(8, 3, 37, 0.8); }
.youplay-input.input-filled ::placeholder,
.youplay-textarea.input-filled ::placeholder {
color: rgba(8, 3, 37, 0.8); }
.youplay-input input, .youplay-input textarea,
.youplay-textarea input,
.youplay-textarea textarea {
position: relative;
resize: none;
width: 100%;
padding: 1rem 1.8rem;
display: block;
background: none;
border: none;
outline: none;
z-index: 2;
-o-transition: .3s color ease;
transition: .3s color ease; }
.youplay-input:after,
.youplay-textarea:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.1);
-webkit-transform: skew(-8deg);
-ms-transform: skew(-8deg);
-o-transform: skew(-8deg);
transform: skew(-8deg);
-o-transition: .3s background ease;
transition: .3s background ease; }
.youplay-input.has-error:after,
.youplay-textarea.has-error:after {
background: rgba(217, 43, 76, 0.3); }
.youplay-input .icon,
.youplay-textarea .icon {
position: absolute;
left: 2rem;
top: 1rem;
font-size: 1.8rem;
color: #fff;
-o-transition: .3s color ease;
transition: .3s color ease;
z-index: 2; }
.youplay-input .icon + input,
.youplay-input .icon + textarea,
.youplay-textarea .icon + input,
.youplay-textarea .icon + textarea {
padding-left: 5rem; }
.youplay-input.input-filled:after,
.youplay-textarea.input-filled:after {
background: white; }
.youplay-input.input-filled .icon,
.youplay-input.input-filled input,
.youplay-input.input-filled textarea,
.youplay-textarea.input-filled .icon,
.youplay-textarea.input-filled input,
.youplay-textarea.input-filled textarea {
color: #080325; }
.youplay-textarea:after {
-webkit-transform: skew(-5deg);
-ms-transform: skew(-5deg);
-o-transform: skew(-5deg);
transform: skew(-5deg); }
/* Ratings */
.youplay-rating {
overflow: hidden;
display: inline-block;
position: relative;
margin-bottom: 10px; }
.youplay-rating [type=radio] + label {
font-size: 2rem;
width: auto;
height: auto;
line-height: 1;
padding: 0;
padding-right: 0.7rem; }
.youplay-rating input {
display: none; }
.youplay-rating input:checked ~ label {
color: #D92B4C; }
.youplay-rating label {
position: relative;
cursor: default;
clear: none;
float: right;
display: block;
width: 2.2em;
height: 2em; }
.youplay-rating label:after, .youplay-rating label:before {
content: none;
display: none; }
.youplay-rating label:hover,
.youplay-rating label:hover ~ label {
color: #D92B4C;
opacity: 0.8; }
/* Selects */
.youplay-select {
position: relative;
display: block;
font-weight: normal;
width: 100%;
/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */ }
.youplay-select select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
border: none;
outline: none;
display: block;
width: 100%;
padding: 1rem 1.8rem;
padding-right: 3.6rem;
margin: 0;
background: none; }
.youplay-select option {
color: #000; }
@-moz-document url-prefix() {
.youplay-select option {
color: inherit; } }
.youplay-select select[multiple] {
padding-right: 1.8rem; }
.youplay-select select[multiple] option {
color: inherit; }
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.youplay-select select {
padding-right: 4rem; } }
.youplay-select:after {
content: '';
position: absolute;
pointer-events: none;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.1);
-webkit-transform: skew(-8deg);
-ms-transform: skew(-8deg);
-o-transform: skew(-8deg);
transform: skew(-8deg);
-o-transition: .3s background ease;
transition: .3s background ease; }
.youplay-select:before {
right: 1.8rem;
top: 1.8rem;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-top-color: #fff;
border-width: 5px;
margin-left: -5px; }
/* Checkboxes */
.youplay-checkbox {
margin-bottom: 2rem; }
.youplay-checkbox input[type="checkbox"] {
visibility: hidden;
opacity: 0;
width: 0;
height: 0; }
.youplay-checkbox input[type="checkbox"] + label {
position: relative;
font-weight: normal;
cursor: pointer;
padding-left: 35px; }
.youplay-checkbox input[type="checkbox"] + label:after {
content: '';
position: absolute;
display: block;
left: -8px;
top: -2px;
width: 25px;
height: 25px;
background: rgba(255, 255, 255, 0.1);
-webkit-transform: skew(-8deg);
-ms-transform: skew(-8deg);
-o-transform: skew(-8deg);
transform: skew(-8deg);
-o-transition: .3s background ease;
transition: .3s background ease;
z-index: 1; }
.youplay-checkbox input[type="checkbox"] + label:before {
font: 17px 'Glyphicons Halflings';
content: '\e013';
position: absolute;
left: -4px;
top: 0;
color: #fff;
opacity: 0;
-o-transition: .3s opacity ease;
transition: .3s opacity ease;
z-index: 2; }
.youplay-checkbox input[type="checkbox"]:checked + label:before {
opacity: 1; }
/* Radios */
.youplay-radio {
margin-bottom: 2rem; }
.youplay-radio input[type="radio"] {
visibility: hidden;
opacity: 0;
width: 0;
height: 0; }
.youplay-radio input[type="radio"] + label {
position: relative;
font-weight: normal;
cursor: pointer;
padding-left: 35px; }
.youplay-radio input[type="radio"] + label:after {
content: '';
position: absolute;
display: block;
left: -8px;
top: -2px;
width: 25px;
height: 25px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
z-index: 1; }
.youplay-radio input[type="radio"] + label:before {
content: '';
position: absolute;
left: -1px;
top: 5px;
width: 11px;
height: 11px;
border-radius: 50%;
background: #fff;
opacity: 0;
-o-transition: .3s opacity ease;
transition: .3s opacity ease;
z-index: 2; }
.youplay-radio input[type="radio"]:checked + label:before {
opacity: 1; }
/*------------------------------------------------------------------
Navbar
-------------------------------------------------------------------*/
.no-transition *,
.no-transition *:before,
.no-transition *:after {
-o-transition: none !important;
transition: none !important; }
.navbar-youplay {
border: none;
min-height: 50px;
background: rgba(0, 0, 0, 0.4);
-o-transition: .3s background ease;
transition: .3s background ease; }
.navbar-youplay a {
text-decoration: none; }
.navbar-youplay .navbar-brand {
display: block;
height: 80px;
line-height: 80px;
margin-left: 15px;
-o-transition: .3s ease;
transition: .3s ease; }
@media (max-width: 767px) {
.navbar-youplay .navbar-brand {
float: none;
margin: 0 auto; } }
.navbar-youplay .navbar-nav > li > a {
height: 80px;
padding: 24.24242px 0;
-o-transition: .3s ease;
transition: .3s ease; }
.navbar-youplay .navbar-nav > li > a > .label {
display: block;
padding: 0;
text-transform: none;
color: rgba(255, 255, 255, 0.5);
-o-transition: .3s ease;
transition: .3s ease;
text-align: left; }
.navbar-youplay .navbar-nav > li > a > .label:before {
content: none; }
.navbar-youplay .navbar-nav > li > a:hover > .label,
.navbar-youplay .navbar-nav > li > a:focus > .label,
.navbar-youplay .navbar-nav > li.open > a > .label {
color: #fff; }
.navbar-youplay .navbar-brand {
padding: 0;
width: 160px; }
.navbar-youplay .navbar-brand img {
display: inline-block;
max-width: 100%; }
.navbar-youplay .navbar-nav > li > a,
.navbar-youplay .navbar-nav > li > a:hover,
.navbar-youplay .navbar-nav > li > a:focus,
.navbar-youplay .navbar-nav > li.open > a {
color: #fff; }
.navbar-youplay .navbar-nav > li > a {
text-transform: uppercase; }
.navbar-youplay .navbar-nav > li {
margin-left: 30px; }
.navbar-youplay .navbar-nav > .active > a,
.navbar-youplay .navbar-nav > .active > a:focus,
.navbar-youplay .navbar-nav > .active > a:hover,
.navbar-youplay .navbar-nav > .open > a,
.navbar-youplay .navbar-nav > .open > a:focus,
.navbar-youplay .navbar-nav > .open > a:hover,
.navbar-youplay .nav .open > a,
.navbar-youplay .nav .open > a:focus,
.navbar-youplay .nav .open > a:hover {
color: #fff;
background: none; }
.navbar-youplay .navbar-nav > .active > a:after,
.navbar-youplay .navbar-nav > .active > a:focus:after,
.navbar-youplay .navbar-nav > .active > a:hover:after {
content: '';
position: absolute;
background: #fff;
height: 3px;
bottom: 0;
left: 0;
right: 0; }
.navbar-youplay .navbar-nav > li > .dropdown-menu,
.navbar-youplay .dropdown-menu {
border: none;
border-radius: 5px;
background: #000;
background: rgba(0, 0, 0, 0.8); }
.navbar-youplay .navbar-nav > li > .dropdown-menu > ul,
.navbar-youplay .dropdown-menu > ul {
display: block;
list-style: none;
float: left;
margin: 0;
padding: 0;
min-width: 160px; }
.navbar-youplay .navbar-nav > li > .dropdown-menu > ul > li > a,
.navbar-youplay .dropdown-menu > ul > li > a {
position: relative;
display: block;
color: #fff;
padding: 10px 25px; }
.navbar-youplay .navbar-nav > li > .dropdown-menu > ul > li > a:after,
.navbar-youplay .dropdown-menu > ul > li > a:after {
content: '';
display: block;
width: 0;
height: 1px;
background: #fff;
-o-transition: .3s width ease;
transition: .3s width ease; }
.navbar-youplay .navbar-nav > li > .dropdown-menu > ul > li > a:focus:after,
.navbar-youplay .navbar-nav > li > .dropdown-menu > ul > li > a:hover:after,
.navbar-youplay .navbar-nav > li > .dropdown-menu > ul > li.active > a:after,
.navbar-youplay .navbar-nav > li > .dropdown-menu > ul > li.open > a:after,
.navbar-youplay .dropdown-menu > ul > li > a:focus:after,
.navbar-youplay .dropdown-menu > ul > li > a:hover:after,
.navbar-youplay .dropdown-menu > ul > li.active > a:after,
.navbar-youplay .dropdown-menu > ul > li.open > a:after {
width: 100%; }
.navbar-youplay .navbar-nav > li > .dropdown-menu > ul .divider,
.navbar-youplay .dropdown-menu > ul .divider {
background: rgba(255, 255, 255, 0.15); }
.navbar-youplay .dropdown-hover > .dropdown-menu {
display: block;
visibility: hidden;
opacity: 0;
-webkit-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-o-transition: .2s visibility ease, .2s opacity ease, .2s -o-transform ease;
transition: .2s visibility ease, .2s opacity ease, .2s -webkit-transform ease;
transition: .2s visibility ease, .2s opacity ease, .2s transform ease; }
.navbar-youplay .dropdown-hover:hover > .dropdown-menu,
.navbar-youplay .dropdown-hover.open > .dropdown-menu {
visibility: visible;
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0); }
.navbar-youplay .navbar-nav > li > .dropdown-menu {
margin-top: 15px; }
.navbar-youplay .navbar-nav > li > .dropdown-menu:before {
content: '';
position: absolute;
left: 0;
top: -15px;
width: 100%;
height: 15px; }
.navbar-youplay .nav > .dropdown > .dropdown-menu:after {
content: " ";
position: absolute;
pointer-events: none;
border: solid transparent;
bottom: 100%;
left: 20px;
height: 0;
width: 0;
border-bottom-color: rgba(8, 3, 37, 0.8);
border-width: 10px;
margin-right: -10px; }
.navbar-youplay .navbar-right > .dropdown > .dropdown-menu:after {
margin-right: 0;
margin-left: -10px;
right: 20px;
left: auto; }
.navbar-youplay.navbar-small {
background: #000;
background: rgba(0, 0, 0, 0.94);
z-index: 9999999; }
.navbar-youplay.navbar-small .navbar-brand {
height: 50px;
line-height: 50px; }
.navbar-youplay.navbar-small .navbar-nav > li > a {
height: 50px;
padding: 15.15152px 0; }
.navbar-youplay.navbar-small .navbar-nav > li > a > .label {
display: none; }
.navbar-youplay.navbar-small .navbar-brand {
width: 110px; }
.navbar-youplay .navbar-toggle,
.navbar-youplay .navbar-toggle:hover,
.navbar-youplay .navbar-toggle:focus {
border: none;
background: none; }
.navbar-youplay .navbar-toggle .icon-bar,
.navbar-youplay .navbar-toggle:hover .icon-bar,
.navbar-youplay .navbar-toggle:focus .icon-bar {
width: 25px;
background: #fff;
-webkit-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-o-transition: .3s margin-top ease, .3s -o-transform ease, .3s opacity ease;
transition: .3s margin-top ease, .3s -webkit-transform ease, .3s opacity ease;
transition: .3s margin-top ease, .3s transform ease, .3s opacity ease; }
.navbar-youplay .navbar-toggle .icon-bar + .icon-bar,
.navbar-youplay .navbar-toggle:hover .icon-bar + .icon-bar,
.navbar-youplay .navbar-toggle:focus .icon-bar + .icon-bar {
margin-top: 6px; }
.navbar-youplay .navbar-toggle {
margin-top: 23px;
-o-transition: .2s margin-top ease;
transition: .2s margin-top ease; }
.navbar-youplay.navbar-small .navbar-toggle {
margin-top: 8px; }
.navbar-youplay.youplay-navbar-collapsed .navbar-toggle :nth-child(3),
.navbar-youplay.youplay-navbar-collapsed .navbar-toggle:hover :nth-child(3) {
opacity: 0; }
.navbar-youplay.youplay-navbar-collapsed .navbar-toggle :nth-child(2),
.navbar-youplay.youplay-navbar-collapsed .navbar-toggle:hover :nth-child(2) {
-webkit-transform: rotate(45deg) translate(9px, 15px);
-ms-transform: rotate(45deg) translate(9px, 15px);
-o-transform: rotate(45deg) translate(9px, 15px);
transform: rotate(45deg) translate(9px, 15px); }
.navbar-youplay.youplay-navbar-collapsed .navbar-toggle :nth-child(4),
.navbar-youplay.youplay-navbar-collapsed .navbar-toggle:hover :nth-child(4) {
-webkit-transform: rotate(-45deg) translate(9px, -15px);
-ms-transform: rotate(-45deg) translate(9px, -15px);
-o-transform: rotate(-45deg) translate(9px, -15px);
transform: rotate(-45deg) translate(9px, -15px); }
@media (max-width: 767px) {
.navbar-youplay, .navbar-youplay.navbar-small {
background: #000; }
.navbar-youplay .navbar-header {
background: #000;
background: rgba(0, 0, 0, 0.4); }
.navbar-youplay.navbar-small .navbar-header {
background: #000;
background: rgba(0, 0, 0, 0.94); }
.navbar-youplay .navbar-collapse {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 90%;
max-width: 400px;
margin: 0;
padding: 30px;
padding-top: 95px;
overflow-y: auto;
max-height: 100%;
border: none;
background: #000;
-o-transition: .3s padding-top ease, .5s -o-transform ease;
transition: .3s padding-top ease, .5s -webkit-transform ease;
transition: .3s padding-top ease, .5s transform ease; }
.navbar-youplay .navbar-collapse:before {
content: '';
display: block;
position: fixed; }
.navbar-youplay .navbar-collapse.collapse {
display: block;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%); }
.navbar-youplay .navbar-collapse .navbar-nav {
margin: 0; }
.navbar-youplay .navbar-collapse .navbar-nav > li {
margin-left: 0; }
.navbar-youplay .navbar-collapse .navbar-nav > li > a {
padding: 15.15152px 0;
height: 50px; }
.navbar-youplay .navbar-collapse .dropdown-menu > ul > li > a,
.navbar-youplay .navbar-collapse .navbar-nav > li > .dropdown-menu > ul > li > a {
padding: 10px 0; }
.navbar-youplay .navbar-collapse .dropdown-submenu > .dropdown-menu,
.navbar-youplay .navbar-collapse .dropdown-hover > .dropdown-menu {
opacity: 1;
visibility: visible;
-webkit-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none; }
.navbar-youplay .navbar-collapse .dropdown-submenu > .dropdown-menu:after,
.navbar-youplay .navbar-collapse .dropdown-hover > .dropdown-menu:after {
content: none; }
.navbar-youplay .navbar-collapse .dropdown-submenu > [data-toggle] + .dropdown-menu,
.navbar-youplay .navbar-collapse .dropdown-hover > [data-toggle] + .dropdown-menu {
display: none; }
.navbar-youplay .navbar-collapse .dropdown-submenu.open > .dropdown-menu,
.navbar-youplay .navbar-collapse .dropdown-hover.open > .dropdown-menu {
display: block; }
.navbar-youplay .navbar-collapse .open .dropdown-menu > li > a {
color: rgba(0, 0, 0, 0.5); }
.navbar-youplay .navbar-collapse .open .dropdown-menu > li.open > a,
.navbar-youplay .navbar-collapse .open .dropdown-menu > li > a:hover,
.navbar-youplay .navbar-collapse .open .dropdown-menu > li > a:focus {
color: #fff; }
.navbar-youplay .navbar-collapse .navbar-nav > li > .dropdown-menu,
.navbar-youplay .navbar-collapse .navbar-nav > li > .dropdown-menu > ul {
position: relative;
margin: 0;
width: 100% !important;
float: none; }
.navbar-youplay .navbar-collapse .navbar-nav > li {
clear: both; }
.navbar-youplay .navbar-collapse .dropdown-submenu > .dropdown-menu {
position: relative;
left: auto;
right: auto;
width: 100% !important;
margin: 0; }
.navbar-youplay .navbar-collapse .dropdown-submenu > .dropdown-menu:before, .navbar-youplay .navbar-collapse .dropdown-submenu > .dropdown-menu:after {
content: none; }
.navbar-youplay .navbar-collapse .dropdown-submenu > .dropdown-menu > ul {
float: none; }
.navbar-youplay .navbar-collapse .dropdown-submenu > a:before {
border-color: transparent;
border-top-color: #000; }
.navbar-youplay .navbar-collapse .dropdown > .dropdown-menu {
padding-left: 20px; }
.navbar-youplay.navbar-small .navbar-collapse {
padding-top: 65px; }
.navbar-youplay.navbar-small .navbar-collapse .navbar-nav > li > a > .label {
display: block; }
.navbar-youplay .navbar-header {
position: relative;
z-index: 1; }
.navbar-youplay .dropdown-menu {
box-shadow: none; }
.navbar-youplay ~ .content-wrap {
opacity: 1;
-o-transition: .5s opacity ease;
transition: .5s opacity ease; }
.navbar-youplay.youplay-navbar-collapsed ~ .content-wrap {
opacity: 0.3; } }
/*
* bootstrap dropdown submenus
* from http://www.bootply.com/86684
*/
.dropdown-submenu {
position: relative; }
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -3px;
border-radius: 6px;
margin-left: 15px; }
.dropdown-submenu > .dropdown-menu:after {
content: " ";
position: absolute;
pointer-events: none;
border: solid transparent;
right: 100%;
top: 15px;
height: 0;
width: 0;
border-right-color: rgba(8, 3, 37, 0.8);
border-width: 10px; }
.dropdown-submenu > .dropdown-menu:before {
content: '';
position: absolute;
left: -15px;
top: 0;
width: 15px;
height: 100%; }
.dropdown-submenu > .dropdown-menu {
display: block;
visibility: hidden;
opacity: 0;
-webkit-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-o-transition: .2s visibility ease, .2s opacity ease, .2s -o-transform ease;
transition: .2s visibility ease, .2s opacity ease, .2s -webkit-transform ease;
transition: .2s visibility ease, .2s opacity ease, .2s transform ease; }
.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu.open > .dropdown-menu {
visibility: visible;
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0); }
.dropdown-submenu > a:before {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px;
border-left-color: #fff;
margin-top: 5px;
margin-right: -10px; }
.dropdown-submenu:hover > a:before {
border-left-color: #fff; }
.dropdown-submenu.pull-left {
float: none !important; }
.dropdown-submenu.pull-left > a:before {
border-color: transparent;
border-right-color: #fff; }
.dropdown-submenu.pull-left > .dropdown-menu {
left: auto;
right: 100%;
margin-left: 0;
margin-right: 15px; }
.dropdown-submenu.pull-left > .dropdown-menu:after {
left: 100%;
right: auto;
border: solid transparent;
border-left-color: #080325;
border-left-color: rgba(8, 3, 37, 0.8);
border-width: 10px; }
.dropdown-submenu.pull-left > .dropdown-menu:before {
left: auto;
right: -15px;
top: 0; }
/*
* Shopping Cart
*/
.navbar-youplay .dropdown-cart .dropdown-menu {
width: 260px;
padding-top: 1rem; }
.navbar-youplay .dropdown-cart .youplay-side-news {
padding-left: 2rem;
padding-right: 1rem; }
.navbar-youplay .dropdown-cart h4 a {
text-decoration: underline; }
/*------------------------------------------------------------------
Banner
-------------------------------------------------------------------*/
.no-banner {
padding-top: 80px; }
.youplay-banner {
position: relative;
background: fff;
min-height: 550px;
overflow: hidden;
display: -webkit-flex;
display: -ms-flexbox;
padding-top:80px;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%; }
@media screen and (min-width: 0\0) {
.youplay-banner {
height: 0; } }
.youplay-banner.banner-top {
padding-top: 80px; }
.youplay-banner.small {
min-height: 450px;
font-size: inherit; }
.youplay-banner.xsmall {
min-height: 350px; }
.youplay-banner.full {
min-height: 100%; }
.youplay-banner h1, .youplay-banner h2 {
margin-top: 0; }
.youplay-banner .image {
position: absolute;
clear: both;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 50% 0px; }
.youplay-banner .info {
position: relative;
width: 100%; }
@media (max-width: 767px) {
.youplay-banner .info {
text-align: center; } }
.youplay-banner .info h1, .youplay-banner .info h2 {
font-size: 5rem;
text-transform: uppercase; }
.youplay-banner .img {
background: #FFF !important;
}
.youplay-banner,
.angled-img .img {
background: #FFF !important;
}
.full,
.full .youplay-banner {
height: 100%;
min-height: 600px; }
.full {
overflow: auto; }
.full .youplay-banner .image {
background-position: 50% 50%;
background-size: cover; }
.wide .youplay-banner .image {
background-position: 50% 50%;
background-size: cover; }
/*------------------------------------------------------------------
Owl Carousel
-------------------------------------------------------------------*/
.youplay-carousel .angled-img {
margin-left: -1px; }
.youplay-carousel .angled-img .bottom-info {
width: 80%; }
.youplay-carousel .owl-prev,
.youplay-carousel .owl-next {
position: absolute;
cursor: pointer;
font-size: 2rem;
top: 0;
height: 100%;
width: 70px;
-o-transition: .3s opacity ease;
transition: .3s opacity ease;
opacity: 1; }
.youplay-carousel .owl-prev:hover,
.youplay-carousel .owl-next:hover {
opacity: 0.8; }
.youplay-carousel .owl-prev {
background: -o-linear-gradient(left, #080325, rgba(8, 3, 37, 0));
background: linear-gradient(to right, #080325, rgba(8, 3, 37, 0)); }
.youplay-carousel .owl-next {
right: -0.1px;
background: -o-linear-gradient(right, #080325, rgba(8, 3, 37, 0));
background: linear-gradient(to left, #080325, rgba(8, 3, 37, 0)); }
/*------------------------------------------------------------------
Default Owl Carousel
-------------------------------------------------------------------*/
.owl-carousel .owl-dots {
text-align: center;
margin-right: 0;
margin-top: 15px;
margin-bottom: 5px; }
.owl-carousel .owl-dot {
display: inline-block;
width: 40px;
height: 8px;
margin-left: 15px;
margin-top: 5px;
-webkit-transform: skew(-8deg);
-ms-transform: skew(-8deg);
-o-transform: skew(-8deg);
transform: skew(-8deg);
border: 2px solid #fff;
-o-transition: .3s background ease;
transition: .3s background ease; }
.owl-carousel .owl-dot:hover, .owl-carousel .owl-dot.active {
background: #fff; }
/*------------------------------------------------------------------
Owl Slider
-------------------------------------------------------------------*/
.youplay-slider {
-webkit-shape-outside: polygon(9% 0, 0 100%, 91% 100%, 100% 0%);
shape-outside: polygon(9% 0, 0 100%, 91% 100%, 100% 0%);
pointer-events: auto; }
.youplay-slider .angled-img {
-webkit-shape-outside: none;
shape-outside: none; }
.youplay-slider > .owl-stage-outer {
-webkit-transform: skew(-8deg);
-ms-transform: skew(-8deg);
-o-transform: skew(-8deg);
transform: skew(-8deg); }
.youplay-slider > .owl-stage-outer .owl-item {
-webkit-transform: skew(8deg);
-ms-transform: skew(8deg);
-o-transform: skew(8deg);
transform: skew(8deg); }
.youplay-slider .owl-dots {
text-align: center;
margin-right: 15%;
margin-top: -5px;
margin-bottom: 5px; }
.youplay-slider .owl-dot {
display: inline-block;
width: 40px;
height: 8px;
margin-left: 15px;
margin-top: 5px;
-webkit-transform: skew(-8deg);
-ms-transform: skew(-8deg);
-o-transform: skew(-8deg);
transform: skew(-8deg);
border: 2px solid #fff;
-o-transition: .3s background ease;
transition: .3s background ease; }
.youplay-slider .owl-dot:hover, .youplay-slider .owl-dot.active {
background: #fff; }
/*------------------------------------------------------------------
Countdown
-------------------------------------------------------------------*/
.full .countdown,
.countdown.style-1 {
text-align: center;
max-width: 600px;
margin: 2rem auto; }
.full .countdown .row > div > span,
.countdown.style-1 .row > div > span {
display: block;
font-size: 1.2rem;
font-weight: bold;
line-height: 1; }
.full .countdown .row > div > span + span,
.countdown.style-1 .row > div > span + span {
display: inline-block;
position: relative;
font-weight: normal;
font-size: 5rem;
margin-top: 1rem;
padding: 25px;
margin-left: -30px;
padding-left: 40px;
padding-right: 30px; }
.full .countdown .row > div > span + span span,
.countdown.style-1 .row > div > span + span span {
position: relative;
z-index: 2; }
.full .countdown .row > div > span + span:after,
.countdown.style-1 .row > div > span + span:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
-webkit-transform: skew(-8deg);
-ms-transform: skew(-8deg);
-o-transform: skew(-8deg);
transform: skew(-8deg);
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%; }
/*------------------------------------------------------------------
Hexagon Rating
-------------------------------------------------------------------*/
.youplay-review-rating {
margin-top: 3rem;
margin-bottom: 3rem;
border-top: 2px solid rgba(255, 255, 255, 0.1);
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
padding: 3rem;
padding-top: 0; }
.youplay-review-rating .row > div {
padding-top: 3rem; }
.youplay-review-rating ul {
list-style-type: none;
padding: 0;
margin: 0; }
.youplay-hexagon-rating {
position: relative;
width: 120px;
height: 120px;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.news-one .angled-img .youplay-hexagon-rating {
position: absolute;
bottom: 15px;
left: 10px; }
.youplay-hexagon-rating > canvas {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg); }
.youplay-hexagon-rating > span {
position: absolute;
text-align: center;
font-weight: bold;
font-size: 3.5rem;
width: 60px;
height: 60px;
line-height: 60px;
margin-left: -30px;
margin-top: -30px;
top: 50%;
left: 50%; }
.youplay-hexagon-rating.youplay-hexagon-rating-small {
width: 50px;
height: 50px; }
.youplay-hexagon-rating.youplay-hexagon-rating-small > span {
font-size: 1.3rem; }
/*------------------------------------------------------------------
Search Block
-------------------------------------------------------------------*/
.search-block {
position: fixed;
display: table;
background: #080325;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100000;
padding: 4rem;
visibility: hidden;
opacity: 0;
-o-transition: .5s opacity ease, .5s visibility ease;
transition: .5s opacity ease, .5s visibility ease; }
.search-block.active {
opacity: 1;
visibility: visible; }
.search-block.active > form {
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); }
.search-block > form {
display: table-cell;
vertical-align: middle;
-webkit-transform: scale(0.7);
-ms-transform: scale(0.7);
-o-transform: scale(0.7);
transform: scale(0.7);
-o-transition: .5s -o-transform ease;
transition: .5s -webkit-transform ease;
transition: .5s transform ease; }
.search-block > form input {
font-size: 5rem;
padding: 2rem 5rem; }
.search-block > .search-toggle {
position: absolute;
right: 4rem;
top: 4rem;
text-decoration: none;
font-size: 3rem;
z-index: 2;
text-shadow: 1px 1px 1px #080325; }
.search-block > .search-toggle, .search-block > .search-toggle:hover {
color: #fff; }
/*------------------------------------------------------------------
Side Block
-------------------------------------------------------------------*/
.side-block {
margin-bottom: 3rem; }
.side-block.right-side,
.side-block.right-side input {
text-align: right; }
.side-block .block-title {
position: relative;
padding: 1rem 1.8rem;
margin: 0;
margin-bottom: 1rem; }
.side-block .block-title:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.1);
-webkit-transform: skew(-8deg);
-ms-transform: skew(-8deg);
-o-transform: skew(-8deg);
transform: skew(-8deg); }
.side-block .block-content {
margin-top: 1rem;
padding: 0 1.8rem; }
.side-block ul {
list-style-type: none; }
.side-block ul a {
display: block;
padding: .4rem 0; }
.side-block .price,
.side-block .date {
display: block;
margin: 0.5rem 0; }
/*------------------------------------------------------------------
Comments / Reviews
-------------------------------------------------------------------*/
.comments-block,
.reviews-block {
margin-top: 4rem;
margin-bottom: 4rem; }
.comments-block .comment-avatar,
.comments-block .review-avatar,
.reviews-block .comment-avatar,
.reviews-block .review-avatar {
width: 70px;
display: block;
-webkit-transform: skew(-8deg);
-ms-transform: skew(-8deg);
-o-transform: skew(-8deg);
transform: skew(-8deg);
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
margin-right: 3rem;
background: #160962;
overflow: hidden;
-webkit-backface-visibility: hidden;
cursor: pointer; }
.comments-block .comment-avatar > img,
.comments-block .review-avatar > img,
.reviews-block .comment-avatar > img,
.reviews-block .review-avatar > img {
width: 100%;
-webkit-transform: skew(8deg) scale(1.15);
-ms-transform: skew(8deg) scale(1.15);
-o-transform: skew(8deg) scale(1.15);
transform: skew(8deg) scale(1.15);
-o-transition: .3s opacity ease;
transition: .3s opacity ease;
-webkit-backface-visibility: hidden;
opacity: 1; }
.comments-block .comment-avatar:hover > img,
.comments-block .review-avatar:hover > img,
.reviews-block .comment-avatar:hover > img,
.reviews-block .review-avatar:hover > img {
opacity: 0.6; }
.comments-block .comment-form,
.comments-block .review-form,
.reviews-block .comment-form,
.reviews-block .review-form {
margin: 3rem 0; }
.comments-block .comment-cont,
.comments-block .review-cont,
.reviews-block .comment-cont,
.reviews-block .review-cont {
position: relative;
margin-left: 100px; }
.comments-block .comments-list,
.comments-block .comments-list .child-comment,
.comments-block .reviews-list,
.comments-block .reviews-list .child-comment,
.reviews-block .comments-list,
.reviews-block .comments-list .child-comment,
.reviews-block .reviews-list,
.reviews-block .reviews-list .child-comment {
margin: 0;
padding: 0;
list-style-type: none; }
.comments-block .comments-list > li > article,
.comments-block .comments-list .child-comment > li > article,
.comments-block .reviews-list > li > article,
.comments-block .reviews-list .child-comment > li > article,
.reviews-block .comments-list > li > article,
.reviews-block .comments-list .child-comment > li > article,
.reviews-block .reviews-list > li > article,
.reviews-block .reviews-list .child-comment > li > article {
margin-bottom: 2.5rem; }
.comments-block .comments-list .date,
.comments-block .comments-list .child-comment .date,
.comments-block .reviews-list .date,
.comments-block .reviews-list .child-comment .date,
.reviews-block .comments-list .date,
.reviews-block .comments-list .child-comment .date,
.reviews-block .reviews-list .date,
.reviews-block .reviews-list .child-comment .date {
color: rgba(255, 255, 255, 0.5);
font-size: 1.2rem; }
.comments-block .comments-list .child-comment,
.comments-block .reviews-list .child-review,
.reviews-block .comments-list .child-comment,
.reviews-block .reviews-list .child-review {
margin-left: 100px; }
@media (max-width: 767px) {
.comments-block .comments-list .child-comment,
.comments-block .reviews-list .child-review,
.reviews-block .comments-list .child-comment,
.reviews-block .reviews-list .child-review {
margin-left: 50px; } }
.comments-block .comments-list,
.comments-block .reviews-list,
.reviews-block .comments-list,
.reviews-block .reviews-list {
margin: 3rem 0; }
.comments-block .comment-text,
.comments-block .review-text,
.reviews-block .comment-text,
.reviews-block .review-text {
margin: 1rem 0; }
.comments-block .rating,
.reviews-block .rating {
margin-top: 0.3rem; }
.comments-block .review-like,
.comments-block .comment-like,
.reviews-block .review-like,
.reviews-block .comment-like {
position: relative;
opacity: 0.5;
-o-transition: .3s opacity ease;
transition: .3s opacity ease; }
.comments-block .review-like a,
.comments-block .comment-like a,
.reviews-block .review-like a,
.reviews-block .comment-like a {
display: inline-block;
text-decoration: none;
margin-left: 1rem; }
.comments-block .comment-cont:hover .review-like,
.comments-block .comment-cont:hover .comment-like,
.comments-block .review-cont:hover .review-like,
.comments-block .review-cont:hover .comment-like,
.reviews-block .comment-cont:hover .review-like,
.reviews-block .comment-cont:hover .comment-like,
.reviews-block .review-cont:hover .review-like,
.reviews-block .review-cont:hover .comment-like {
opacity: 1; }
/*------------------------------------------------------------------
News List
-------------------------------------------------------------------*/
.youplay-news .news-one + .news-one {
margin-top: 4.5rem; }
@media (min-width: 767px) and (max-width: 991px) {
.youplay-news .news-one {
margin-left: 3rem;
margin-right: 3rem; } }
@media (max-width: 767px) {
.youplay-news .news-one {
margin-left: 0.8rem;
margin-right: 0.8rem; } }
.youplay-news .news-one h3 a, .youplay-news .news-one h2 a {
color: inherit; }
.youplay-news .news-one h3 a:hover, .youplay-news .news-one h3 a:focus, .youplay-news .news-one h2 a:hover, .youplay-news .news-one h2 a:focus {
color: #D92B4C; }
.youplay-news .news-one h3 a, .youplay-news .news-one h3 a:hover, .youplay-news .news-one h3 a:focus, .youplay-news .news-one h2 a, .youplay-news .news-one h2 a:hover, .youplay-news .news-one h2 a:focus {
text-decoration: none; }
.youplay-news .news-one .angled-img {
margin-left: 0.5rem;
margin-right: 2.5rem; }
.youplay-news {
margin-bottom: 4rem;
margin-top: 6rem; }
h2 + .youplay-news {
margin-top: 0; }
/*
* News Grid Style
*/
.youplay-news.news-grid .news-one {
margin-top: 0;
margin-bottom: 1rem; }
.youplay-news.news-grid .news-one .angled-img {
margin-right: 0;
margin-left: 0; }
@media (max-width: 767px) {
.youplay-news.news-grid .news-one .angled-img {
margin-left: 3rem;
margin-right: 3rem; } }
.youplay-news.news-grid .news-one h3 {
margin: 1.5rem 0; }
.youplay-news.news-grid .news-one .read-more {
display: block;
margin-top: 1.5rem; }
.youplay-news.news-grid .news-one .date {
display: block; }
.youplay-news.news-grid {
margin-bottom: 6rem; }
/*------------------------------------------------------------------
News Post
-------------------------------------------------------------------*/
.youplay-post {
margin-bottom: 2rem;
margin-top: 6rem; }
.youplay-post .news-one .angled-img,
.youplay-post .news-one .youplay-slider {
display: inline-block;
width: 50%;
max-width: 350px; }
.youplay-post .news-one .angled-img .img {
-webkit-transform: skew(-8deg);
-ms-transform: skew(-8deg);
-o-transform: skew(-8deg);
transform: skew(-8deg);
-webkit-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%; }
.youplay-post .news-one .youplay-slider {
max-width: 350px; }
.youplay-post .news-one .youplay-slider.pull-left {
margin-right: 3rem; }
.youplay-post .news-one .youplay-slider.pull-right {
margin-left: 3rem; }
.youplay-post .news-one .youplay-slider .angled-img {
width: auto;
margin: 0; }
.youplay-post .news-one .youplay-slider .angled-img .img {
-webkit-transform: skew(-8deg) scale(0.9) translateX(-5%);
-ms-transform: skew(-8deg) scale(0.9) translateX(-5%);
-o-transform: skew(-8deg) scale(0.9) translateX(-5%);
transform: skew(-8deg) scale(0.9) translateX(-5%);
-webkit-transform-origin: 100% 30%;
-ms-transform-origin: 100% 30%;
-o-transform-origin: 100% 30%;
transform-origin: 100% 30%; }
.youplay-post .news-one .angled-img {
margin-right: 5rem;
margin-bottom: 2rem;
margin-left: 2rem; }
.youplay-post .news-one .youplay-carousel .angled-img {
margin-right: 0;
width: 100%; }
.youplay-post .news-one .description {
margin-bottom: 3rem;
margin-top: 0; }
.youplay-post .news-one .social-list {
margin-top: 3rem; }
/*------------------------------------------------------------------
News in Side Block
-------------------------------------------------------------------*/
.youplay-side-news {
text-align: left;
padding: 1rem 0; }
.youplay-side-news h4 {
margin: 0; }
.youplay-side-news .date {
margin-top: 8px;
color: rgba(255, 255, 255, 0.5);
font-size: 1.2rem; }
/*------------------------------------------------------------------
Store
-------------------------------------------------------------------*/
.youplay-store {
margin-top: 6rem;
margin-bottom: 4rem; }
.youplay-store .isotope-options {
margin-top: 0; }
.youplay-store .isotope-list a.item {
margin-bottom: 2rem; }
.youplay-store .isotope .isotope-options {
margin-bottom: 2rem; }
.youplay-store.store-grid .isotope .isotope-options {
margin-bottom: 4rem; }
.youplay-store.store-grid .isotope-list {
margin-right: 1.5rem; }
.youplay-store.store-grid .isotope .isotope-list .item {
margin-bottom: 1rem; }
@media (max-width: 767px) {
.youplay-store.store-grid .isotope-list {
margin-left: 1.4rem; } }
/*------------------------------------------------------------------
Search Page
-------------------------------------------------------------------*/
.youplay-search {
padding-top: 6rem;
padding-bottom: 6rem; }
.youplay-search > form input {
font-size: 2rem;
padding: 1.5rem 3rem; }
.youplay-search .angled-bg {
display: block;
width: 100%;
margin-bottom: 2rem; }
.youplay-search .angled-bg:hover, .youplay-search .angled-bg:focus {
color: inherit; }
.youplay-search .angled-bg .price {
margin-top: 10px;
margin-right: 20px;
font-size: 1.6rem;
font-weight: bold; }
.youplay-search .angled-bg .date {
margin-top: 10px;
margin-right: 20px; }
/*------------------------------------------------------------------
User Profile
-------------------------------------------------------------------*/
.youplay-user .angled-img {
display: inline-block;
vertical-align: top;
width: 150px; }
.youplay-user .angled-img .img > img {
opacity: 1; }
.youplay-user .angled-img:hover .img > img {
opacity: 0.6; }
.youplay-user .angled-img .icon {
opacity: 0; }
.youplay-user .angled-img:hover .icon {
opacity: 0.8; }
.youplay-banner .info .youplay-user h2 {
font-size: 3.5rem;
margin-bottom: 0.5rem;
margin-top: 0; }
.youplay-user .user-data {
position: relative;
display: inline-block;
padding: 1.8rem 3rem;
margin-left: -4px;
height: 151px; }
.youplay-user .user-data:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(8, 3, 37, 0.4);
-webkit-transform: skew(-8deg);
-ms-transform: skew(-8deg);
-o-transform: skew(-8deg);
transform: skew(-8deg);
z-index: 1; }
.youplay-user .user-data > * {
position: relative;
z-index: 2; }
.youplay-user .user-data .location {
font-size: 1rem;
color: rgba(255, 255, 255, 0.5); }
.youplay-user .user-data .activity {
margin-top: 1.3rem; }
.youplay-user .user-data .activity > div {
display: inline-block;
text-align: center; }
.youplay-user .user-data .activity > div + div {
margin-left: 3rem; }
.youplay-user .user-data .activity > div .title {
font-size: 1rem;
color: rgba(255, 255, 255, 0.5); }
.youplay-user .user-data .activity > div .num {
font-size: 2.5rem;
line-height: 1.2; }
/* User Profile Navigation */
.youplay-user-navigation {
position: absolute;
bottom: 0;
left: 0;
right: 0; }
.youplay-user-navigation ul {
list-style: none;
margin: 0;
padding: 0; }
.youplay-user-navigation ul li {
position: relative;
display: block;
float: left;
z-index: 1; }
.youplay-user-navigation ul li > a {
position: relative;
display: block;
font-size: 1.6rem;
padding: 1.25rem 1.8rem;
color: #fff;
text-decoration: none;
border-radius: 0;
background: none;
border: none; }
.youplay-user-navigation ul li > a:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: transparent;
-webkit-transform: skew(-8deg);
-ms-transform: skew(-8deg);
-o-transform: skew(-8deg);
transform: skew(-8deg);
-o-transition: .3s background-color;
transition: .3s background-color;
z-index: -1; }
@media (max-width: 767px) {
.youplay-user-navigation ul li > a {
font-size: 1.4rem;
padding: 1rem 1.5rem; } }
.youplay-user-navigation ul li.active > a:after,
.youplay-user-navigation ul li:focus > a:after,
.youplay-user-navigation ul li:hover > a:after {
background-color: rgba(255, 255, 255, 0.1); }
.youplay-user-navigation ul li.active > a:after {
background: rgba(255, 255, 255, 0.1);
background-color: #080325; }
.youplay-user-navigation + .info {
padding-bottom: 50px; }
/* User Messages */
.youplay-messages tbody > tr > td {
padding: 1.5rem; }
.youplay-messages tbody > tr {
-o-transition: .3s background-color;
transition: .3s background-color; }
.youplay-messages .message-unread {
background-color: rgba(255, 255, 255, 0.1); }
.youplay-messages .message-from {
width: 300px; }
.youplay-messages .message-from .angled-img {
width: 80px;
float: left;
margin-right: 20px; }
.youplay-messages .message-from .angled-img img {
width: auto;
opacity: 1; }
.youplay-messages .message-from .message-from-name {
text-decoration: none;
font-size: 1.6rem; }
.youplay-messages .message-description .message-description-name {
font-weight: bold;
text-decoration: none;
font-size: 1.6rem; }
.youplay-messages .message-description .message-excerpt {
font-size: 1.2rem;
margin-top: 0.5rem; }
.youplay-messages .message-action {
position: relative;
width: 90px; }
.youplay-messages .message-action .messages-count {
position: absolute;
text-align: center;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 4px;
font-weight: bold;
min-width: 30px;
padding-left: 5px;
padding-right: 5px;
height: 30px;
line-height: 30px;
left: 50%;
top: 50%;
margin-top: -15px;
margin-left: -15px; }
.youplay-messages .message-action .message-delete {
float: right;
opacity: 0;
-o-transition: .3s opacity, .3s color;
transition: .3s opacity, .3s color; }
.youplay-messages tbody > tr:hover .message-action .message-delete {
opacity: 1; }
/*------------------------------------------------------------------
Login
-------------------------------------------------------------------*/
.youplay-login .youplay-banner .info h2 {
font-size: 4rem;
margin-top: 0;
margin-bottom: 3rem; }
.youplay-login .youplay-form {
max-width: 500px;
margin: 3rem auto; }
.youplay-login .youplay-form form {
margin-top: 2rem; }
.youplay-login .youplay-form input {
text-align: center; }
.youplay-login .youplay-form button {
margin: 0;
width: 100%; }
.youplay-login .youplay-form .social-list {
margin: 0; }
.full.youplay-login,
.full.youplay-login .youplay-banner {
min-height: 510px; }
/*------------------------------------------------------------------
404
-------------------------------------------------------------------*/
.youplay-404 .youplay-banner .info h2 {
font-size: 8rem;
margin-top: 0;
margin-bottom: 3rem; }
.youplay-404 form {
max-width: 400px;
margin: 3rem auto; }
.full.youplay-404,
.full.youplay-404 .youplay-banner {
min-height: 400px; }
/*------------------------------------------------------------------
Forum
-------------------------------------------------------------------*/
.youplay-forum {
margin: 1rem 0; }
.youplay-forum, .youplay-forum ul {
padding: 0;
clear: both; }
.youplay-forum:after, .youplay-forum:before, .youplay-forum ul:after, .youplay-forum ul:before {
content: '';
display: table;
clear: both; }
.youplay-forum li {
background: none;
margin: 0;
list-style: none; }
.youplay-forum > li li {
float: left;
padding: 2rem; }
.youplay-forum > li img {
margin-right: 10px; }
.youplay-forum > li .cell-icon {
width: 4%;
font-size: 2rem;
padding: 0;
padding-top: 1.4rem;
padding-left: 2rem; }
.youplay-forum > li .cell-info {
width: 48%; }
.youplay-forum > li .cell-info .title {
text-decoration: none;
font-weight: bold; }
.youplay-forum > li .cell-info .description {
color: rgba(255, 255, 255, 0.8);
margin: 0;
margin-top: 0.5rem;
margin-bottom: 2rem; }
.youplay-forum > li .cell-info .forums-list li {
padding: 0;
padding-right: 1rem; }
.youplay-forum > li .cell-info .forums-list li i {
margin-right: .2rem; }
.youplay-forum > li .cell-topic-count,
.youplay-forum > li .cell-reply-count {
text-align: center;
width: 12%; }
.youplay-forum > li .cell-freshness {
text-align: right;
width: 24%; }
.youplay-forum > li .cell-freshness a {
text-decoration: none; }
@media (max-width: 767px) {
.youplay-forum > li .cell-freshness {
display: none; }
.youplay-forum > li .cell-icon {
width: 6%; }
.youplay-forum > li .cell-topic-count,
.youplay-forum > li .cell-reply-count {
width: 15%; }
.youplay-forum > li .cell-info {
width: 63%; } }
@media (max-width: 532px) {
.youplay-forum > li .cell-icon {
display: none; }
.youplay-forum > li .cell-topic-count,
.youplay-forum > li .cell-reply-count {
width: 17%; }
.youplay-forum > li .cell-info {
width: 64%; } }
.youplay-forum > li.header,
.youplay-forum > li.body > ul {
position: relative;
margin-bottom: 2rem;
padding-left: 1rem;
padding-right: 1rem;
z-index: 1; }
.youplay-forum > li.header:before,
.youplay-forum > li.body > ul:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid rgba(255, 255, 255, 0.3);
-webkit-transform: skew(-8deg);
-ms-transform: skew(-8deg);
-o-transform: skew(-8deg);
transform: skew(-8deg);
z-index: -1; }
.youplay-forum > li.header.header:before, .youplay-forum > li.header.sticky:before,
.youplay-forum > li.body > ul.header:before,
.youplay-forum > li.body > ul.sticky:before {
background: rgba(255, 255, 255, 0.1);
border: none; }
.youplay-forum > li.header.closed:before,
.youplay-forum > li.body > ul.closed:before {
border: 2px solid rgba(255, 255, 255, 0.1); }
.youplay-forum > li.header.closed > *,
.youplay-forum > li.body > ul.closed > * {
opacity: 0.4; }
/*
Forum Reply
*/
.youplay-forum li {
background: none;
margin: 0;
list-style: none; }
.youplay-forum > li > div + div {
margin-top: 4rem; }
.youplay-forum > li > div .top {
position: relative;
padding: .1rem 2rem;
z-index: 1;
margin-bottom: 1rem; }
.youplay-forum > li > div .top:after {
content: '';
display: table;
clear: both; }
.youplay-forum > li > div .top:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.1);
-webkit-transform: skew(-8deg);
-ms-transform: skew(-8deg);
-o-transform: skew(-8deg);
transform: skew(-8deg);
z-index: -1; }
.youplay-forum > li > div .top a {
text-decoration: none; }
.youplay-forum > li > div .avatar {
width: 100px;
display: block;
-webkit-transform: skew(-8deg);
-ms-transform: skew(-8deg);
-o-transform: skew(-8deg);
transform: skew(-8deg);
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
margin-right: 3rem;
background: #160962;
overflow: hidden;
-webkit-backface-visibility: hidden;
cursor: pointer; }
.youplay-forum > li > div .avatar > img {
width: 100%;
-webkit-transform: skew(8deg) scale(1.15);
-ms-transform: skew(8deg) scale(1.15);
-o-transform: skew(8deg) scale(1.15);
transform: skew(8deg) scale(1.15);
-o-transition: .3s opacity ease;
transition: .3s opacity ease;
-webkit-backface-visibility: hidden;
opacity: 1; }
.youplay-forum > li > div .avatar:hover > img {
opacity: 0.6; }
.youplay-forum > li > div .reply {
position: relative;
margin-left: 130px; }
/*------------------------------------------------------------------
Clan Wars
-------------------------------------------------------------------*/
.youplay-match {
display: inline-block;
white-space: nowrap; }
.youplay-match .angled-img {
display: inline-block;
vertical-align: top;
width: 150px; }
.youplay-match .angled-img .img > img {
opacity: 1; }
.youplay-match .youplay-match-data {
position: relative;
display: inline-block;
padding: 1.8rem 3rem;
margin-left: -4px;
margin-right: -4px;
height: 151px; }
.youplay-match .youplay-match-data:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(8, 3, 37, 0.4);
-webkit-transform: skew(-8deg);
-ms-transform: skew(-8deg);
-o-transform: skew(-8deg);
transform: skew(-8deg);
z-index: 1; }
.youplay-match .youplay-match-data > * {
position: relative;
z-index: 2; }
.youplay-match .youplay-match-data h3 {
font-size: 3.5rem;
text-transform: uppercase;
margin-top: 3.5rem;
margin-bottom: 0; }
.youplay-match-left {
text-align: right; }
@media (min-width: 767px) and (max-width: 991px) {
.youplay-match-left,
.youplay-match-right {
text-align: center; } }
@media (max-width: 767px) {
.youplay-match-left,
.youplay-match-right {
text-align: center; } }
.youplay-match-vs {
position: relative;
display: inline-block;
font-size: 2.5rem;
padding: 1rem 1.5rem;
margin-top: 4.7rem;
margin-bottom: 4.7rem; }
.youplay-match-vs:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(8, 3, 37, 0.4);
-webkit-transform: skew(-8deg);
-ms-transform: skew(-8deg);
-o-transform: skew(-8deg);
transform: skew(-8deg);
z-index: 1; }
.youplay-match-vs > * {
position: relative;
z-index: 2; }
/* Game Maps */
.youplay-game-maps .youplay-single-map {
padding-left: 1rem; }
.youplay-game-maps .youplay-single-map:after, .youplay-game-maps .youplay-single-map:before {
content: '';
display: table;
clear: both; }
.youplay-game-maps .youplay-single-map .angled-img {
max-width: 10rem;
float: left; }
.youplay-game-maps .youplay-single-map .angled-img img {
opacity: 1; }
.youplay-game-maps .youplay-single-map .youplay-single-map-description {
margin-left: 13rem; }
.youplay-game-maps .youplay-single-map + .youplay-single-map {
margin-top: 2rem; }
/* Matches List */
.youplay-matches-list .youplay-single-match {
display: block;
padding-top: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.youplay-matches-list .youplay-single-match + .youplay-single-match {
margin-top: 2rem; }
.youplay-matches-list .youplay-single-match .youplay-match-title {
-o-transition: .3s color ease;
transition: .3s color ease; }
.youplay-matches-list .youplay-single-match:hover .youplay-match-title {
color: #D92B4C; }
.youplay-matches-list .youplay-single-match .angled-img {
max-width: 10rem; }
.youplay-matches-list .youplay-single-match .angled-img img {
opacity: 1; }
.youplay-matches-list .youplay-single-match .youplay-match-count {
float: right;
font-size: 2rem;
margin-top: 3rem;
padding: 1rem 2rem; }
.side-block .youplay-matches-list .youplay-single-match {
text-decoration: none; }
.side-block .youplay-matches-list .youplay-single-match + .youplay-single-match {
margin-top: 1rem; }
.side-block .youplay-matches-list .youplay-single-match .angled-img {
max-width: 4rem; }
.side-block .youplay-matches-list .youplay-single-match .youplay-match-count {
font-size: 1rem;
margin-top: 1rem;
padding: 0.5rem; }
/* Match Widget */
.youplay-match-widget {
text-align: center; }
.youplay-match-widget, .youplay-match-widget:hover {
text-decoration: none; }
.youplay-match-widget .youplay-match-title {
-o-transition: .3s color ease;
transition: .3s color ease; }
.youplay-match-widget:hover .youplay-match-title {
color: #D92B4C; }
/*------------------------------------------------------------------
Magnific Popup
-------------------------------------------------------------------*/
.mfp-bg {
background: #080325; }
.mfp-figure:after {
box-shadow: 0 0 8px rgba(8, 3, 37, 0.6);
background: #080325; }
img.mfp-img {
padding-top: 65px; }
.mfp-figure:after {
top: 65px; }
.mfp-iframe-scaler iframe {
top: 20px; }
.mfp-arrow:after {
content: none; }
.mfp-arrow-right:before {
color: #fff;
border-left-color: #fff; }
.mfp-arrow-left:before {
color: #fff;
border-right-color: #fff; }
.mfp-preloader {
margin-top: -100px; }
.mfp-preloader .preloader {
margin: 0 auto; }
.mfp-arrow-right:before,
.mfp-arrow-left:before {
font-family: 'Glyphicons Halflings';
content: '\e080';
border: none;
font-size: 5rem;
margin-top: 20px;
margin-left: 20px; }
.mfp-arrow-left:before {
content: '\e079'; }
button.mfp-close {
height: 65px;
width: 75px;
line-height: 65px;
font-size: 0;
color: transparent; }
button.mfp-close:before {
font-family: 'Glyphicons Halflings';
content: '\e014';
font-size: 4rem;
color: #fff; }
.mfp-close,
.mfp-arrow {
opacity: 0.3; }
.mfp-close:before,
.mfp-arrow:before {
opacity: 1; }
.mfp-close:hover,
.mfp-arrow:hover {
opacity: 0.6; }
.mfp-with-fade .mfp-content,
.mfp-with-fade .mfp-arrow,
.mfp-with-fade .mfp-close, .mfp-with-fade.mfp-bg {
opacity: 0;
-webkit-backface-visibility: hidden;
-o-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out; }
.mfp-with-fade.mfp-ready .mfp-content {
opacity: 1; }
.mfp-with-fade.mfp-ready .mfp-arrow,
.mfp-with-fade.mfp-ready .mfp-close {
opacity: 0.3; }
.mfp-with-fade.mfp-ready .mfp-arrow:hover,
.mfp-with-fade.mfp-ready .mfp-close:hover {
opacity: 0.6; }
.mfp-with-fade.mfp-ready.mfp-bg {
opacity: 0.8; }
.mfp-with-fade.mfp-removing .mfp-content,
.mfp-with-fade.mfp-removing .mfp-arrow,
.mfp-with-fade.mfp-removing .mfp-close, .mfp-with-fade.mfp-removing.mfp-bg {
opacity: 0; }
/*------------------------------------------------------------------
Slider Revolution
-------------------------------------------------------------------*/
.rs-youplay {
position: relative;
background: #080325; }
.rs-youplay .tp-banner {
overflow: hidden; }
.rs-youplay .slotholder > .tp-bgimg:after,
.rs-youplay .slotholder > .slot .slotslide:after,
.rs-youplay .tp-arr-iwrapper:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.4;
background: #160962; }
.rs-youplay h1, .rs-youplay .h1 {
font-size: 3.7em;
margin-top: 1em;
margin-bottom: 0.6em;
text-transform: uppercase; }
.rs-youplay .btn {
font-size: 1em; }
.rs-youplay .btn-group-lg > .btn,
.rs-youplay .btn-lg {
font-size: 1.285em; }
.rs-youplay .btn.btn-lg,
.rs-youplay .btn:focus.btn-lg,
.rs-youplay .btn:hover.btn-lg {
padding: 0.8em 3em; }
.rs-youplay .tp-bannertimer {
top: auto;
bottom: 0;
height: 2px; }
.rs-youplay .tp-caption a,
.rs-youplay .tp-caption a:hover {
color: #fff;
-o-transition: .3s ease;
transition: .3s ease; }
/*------------------------------------------------------------------
Isotope
-------------------------------------------------------------------*/
.isotope .isotope-options {
margin-bottom: 4rem; }
.isotope .isotope-list .item {
margin-bottom: 3rem; }
.isotope .isotope-list .item .img-offset {
-webkit-transform: skew(-8deg) translateX(-5%);
-ms-transform: skew(-8deg) translateX(-5%);
-o-transform: skew(-8deg) translateX(-5%);
transform: skew(-8deg) translateX(-5%); }
.isotope .isotope-list .item .img-offset + * {
-webkit-transform: translateX(-5%);
-ms-transform: translateX(-5%);
-o-transform: translateX(-5%);
transform: translateX(-5%); }
/*------------------------------------------------------------------
Sweet Alert
-------------------------------------------------------------------*/
.sweet-alert {
background-color: #080325;
color: inherit; }
.sweet-alert .btn:focus,
.sweet-alert .btn.focus {
box-shadow: none; }
.sweet-alert .icon.success:before,
.sweet-alert .icon.success:after,
.sweet-alert .icon.success .fix {
background: #080325; }
.sweet-alert .lead {
color: #fff; }
.sweet-overlay {
background-color: rgba(8, 3, 37, 0.7); }
/*------------------------------------------------------------------
Social Likes
-------------------------------------------------------------------*/
.social-likes__widget:before,
.social-likes__widget:after {
display: block !important; }
.social-likes__button {
color: inherit;
padding: .04em .7em .18em 1em; }
/*------------------------------------------------------------------
Footer
-------------------------------------------------------------------*/
footer {
position: relative;
overflow: hidden; }
footer .wrapper {
position: relative; }
footer .social {
background: #000;
background: rgba(0, 0, 0, 0.45);
text-align: center;
overflow: hidden; }
footer .social .container {
position: relative; }
footer .social h3 {
margin-top: 5rem;
margin-bottom: 4rem; }
footer .social .icons {
margin: 0 auto;
margin-bottom: 5rem;
max-width: 600px; }
footer .social .icons a {
color: inherit;
text-decoration: none; }
footer .social .icons a i {
position: relative;
display: inline-block;
font-size: 5rem;
padding: 25px;
padding-left: 40px;
padding-right: 30px; }
footer .social .icons a i:before {
position: relative;
z-index: 1; }
footer .social .icons a i:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(157, 111, 45, 0.8);
-webkit-transform: skew(-8deg);
-ms-transform: skew(-8deg);
-o-transform: skew(-8deg);
transform: skew(-8deg);
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-o-transition: .3s background ease;
transition: .3s background ease; }
footer .social .icons a span {
display: block; }
footer .social .icons a:hover i:after {
background: rgba(0, 0, 0, 0.4); }
@media (max-width: 767px) {
footer .social .icons > div {
margin-bottom: 4rem; }
footer .social .icons {
margin-bottom: 1rem; } }
footer .copyright {
position: relative;
background: #936f2d;
background: rgba(157, 111, 45, 0.8);
text-align: center;
padding: 20px; }
/*------------------------------------------------------------------
Preloader
-------------------------------------------------------------------*/
.preloader-wrapp {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #000;
z-index: 100000000; }
.preloader-wrapp .preloader {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px; }
.preloader-wrapp > img {
position: absolute;
bottom: 50%;
left: 50%;
width: 180px;
margin-left: -90px;
margin-bottom: -10px;
z-index: 2; }
.preloader {
position: relative;
box-sizing: border-box;
background-clip: padding-box;
width: 200px;
height: 200px;
border-radius: 100px;
border: 5px solid rgba(0, 0, 0, 0.1);
-webkit-mask: linear-gradient(rgba(0, 0, 0, 0.1), black 90%);
-webkit-transform-origin: 50% 60%;
-ms-transform-origin: 50% 60%;
-o-transform-origin: 50% 60%;
transform-origin: 50% 60%;
-webkit-transform: perspective(200px) rotateX(80deg);
transform: perspective(200px) rotateX(80deg); }
.preloader:before,
.preloader:after {
content: "";
position: absolute;
left: 0;
top: 0;
margin: -5px;
box-sizing: inherit;
width: inherit;
height: inherit;
border-radius: inherit;
border: 5px solid rgba(255, 255, 255, 0.1);
opacity: .85;
border-color: transparent;
border-top-color: #D92B4C;
-webkit-animation: youplay-preloader-spin 1s infinite;
-o-animation: youplay-preloader-spin 1s infinite;
animation: youplay-preloader-spin 1s infinite; }
.preloader:after {
-webkit-animation-delay: 0.35s;
-o-animation-delay: 0.35s;
animation-delay: 0.35s; }
@-webkit-keyframes youplay-preloader-spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@-o-keyframes youplay-preloader-spin {
100% {
-o-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes youplay-preloader-spin {
100% {
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg); } }
.preloader-wrapp > img,
.preloader-wrapp > .preloader {
-webkit-animation: youplay-preloader-fade .5s;
-o-animation: youplay-preloader-fade .5s;
animation: youplay-preloader-fade .5s; }
@-webkit-keyframes youplay-preloader-fade {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@-o-keyframes youplay-preloader-fade {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@keyframes youplay-preloader-fade {
0% {
opacity: 0; }
100% {
opacity: 1; } }
.playnowicon{display: inline;}
.navbar-small .playnowicon{opacity:0; display:none !important; height: 0;}
.playnowtext{clear:both;display: block; margin-top: 4px;}
.navbar-youplay .navbar-nav>li.play>a{height:inherit!important;padding:0!important;-o-transition:.3s ease;transition:.3s ease}
/*
----------------------------
CUSTOM BOX MODAL CSS BELOW
----------------------------
*/
.custombox-open,
.custombox-open body {
overflow: hidden;
}
.custombox-perspective,
.custombox-perspective body {
perspective: 600px;
height: 100%;
}
.custombox-overlay-open {
visibility: visible;
opacity: 1;
}
/*
----------------------------
Defaults
----------------------------
*/
.custombox-overlay {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: fixed;
transition-delay: 0s;
}
.custombox-overlay-default {
transition-timing-function: linear;
transition-property: opacity;
opacity: 0;
}
.custombox-modal-wrapper {
right: 0;
top: 0;
bottom: 0;
left: 0;
outline: 0 none;
overflow: auto;
position: fixed;
text-align: center;
}
.custombox-modal-container {
margin: 0 auto;
position: relative;
}
.custombox-modal img {
max-width: 100%;
height: auto;
}
.custombox-scrollbar {
position: absolute;
top: -9999px;
width: 50px;
height: 50px;
overflow: scroll;
}
.custombox-loading {
position: fixed;
transform: translateY(-50%) translateX(-50%);
top: 50%;
left: 50%;
}
/*
----------------------------
Overlay: Letmein
----------------------------
*/
.custombox-overlay-letmein {
transition-property: all;
transition-timing-function: ease;
visibility: hidden;
}
.custombox-overlay-open.custombox-overlay-letmein {
transform: rotateX(-2deg);
transform-origin: 50% 0;
transform-style: preserve-3d;
visibility: visible;
opacity: 1;
}
/*
----------------------------
Overlay: Slide together
----------------------------
*/
.custombox-overlay-slidetogether {
transform: translateY(-100%);
transition-property: transform ease-in-out;
}
.custombox-overlay-open.custombox-overlay-slidetogether {
transform: translateY(0);
transition-property: transform ease-in-out;
}
/*
----------------------------
Overlay: Corner
----------------------------
*/
.custombox-overlay-corner {
transform: translateY(150px) translateX(150px);
transition-property: opacity, transform, visibility;
}
.custombox-overlay-open.custombox-overlay-corner {
transform: translateY(0);
transition-property: opacity, transform;
}
/*
----------------------------
Overlay: Scale
----------------------------
*/
.custombox-overlay-scale {
transform: scale(0.9);
transition-property: transform;
}
.custombox-overlay-open.custombox-overlay-scale {
transform: scale(1);
transition-property: transform;
}
/*
----------------------------
Overlay: Door
----------------------------
*/
.custombox-overlay-door {
visibility: hidden;
width: 0;
left: 50%;
transform: translateX(-50%);
transition-property: width ease-in-out;
}
.custombox-overlay-open.custombox-overlay-door {
visibility: visible;
width: 100%;
transition-property: width ease-in-out;
}
/*
----------------------------
Overlay: Push
----------------------------
*/
.custombox-container-push {
overflow-x: hidden;
transition-property: transform;
}
.custombox-container-open.custombox-container-push {
transform: translateX(100%);
}
.custombox-overlay-push {
backface-visibility: hidden;
transform: translateX(-100%);
transition-property: transform ease-in-out;
}
.custombox-overlay-open.custombox-overlay-push {
transform: translateX(0);
transition-property: transform ease-in-out;
}
/*
----------------------------
Overlay: Content Scale
----------------------------
*/
.custombox-open-contentscale body {
background-color: #DDD;
}
.custombox-container-contentscale {
transition: transform 0.5s;
overflow: hidden;
height: 100%;
}
.custombox-container-open.custombox-container-contentscale {
transform: scale(0.8);
}
.custombox-overlay-contentscale {
transform: translateY(100%);
transition-property: transform ease-in-out;
}
.custombox-overlay-open.custombox-overlay-contentscale {
transform: translateY(0);
transition-property: transform ease-in-out;
}
/*
----------------------------
Overlay: Makeway
----------------------------
*/
.custombox-container-open.custombox-container-makeway {
height: 100%;
overflow: hidden;
}
.custombox-overlay-open.custombox-overlay-makeway {
transition-property: all;
}
.custombox-overlay-open.custombox-overlay-makeway,
.custombox-container-open.custombox-container-makeway {
transform-style: preserve-3d;
transform-origin: 0 50%;
animation: rotateRightSideFirst 0.5s forwards ease-in;
}
@keyframes rotateRightSideFirst {
50% {
transform: translateZ(-50px) rotateY(5deg);
animation-timing-function: ease-out;
}
100% {
transform: translateZ(-200px);
}
}
/*
----------------------------
Overlay: Slip
----------------------------
*/
.custombox-overlay-open.custombox-overlay-slip {
transition-property: all;
}
.custombox-overlay-open.custombox-overlay-slip,
.custombox-container-open.custombox-container-slip {
transform-style: preserve-3d;
transform-origin: 50% 100%;
animation: OpenTop 0.5s forwards ease-in-out;
}
@keyframes OpenTop {
50% {
transform: rotateX(10deg);
animation-timing-function: ease-out;
}
}
/*
----------------------------
Modal: Fadein
----------------------------
*/
.custombox-modal-fadein {
transform: scale(0.7);
transition-property: all;
opacity: 0;
visibility: hidden;
}
.custombox-modal-open .custombox-modal-fadein {
transform: scale(1);
opacity: 1;
visibility: visible;
}
/*
----------------------------
Modal: Slide
----------------------------
*/
.custombox-modal-container-slide > div,
.custombox-modal-container-slidetogether > div {
opacity: 0;
float: left;
}
.custombox-modal-open > .custombox-modal-container-slide > div,
.custombox-modal-open > .custombox-modal-container-slidetogether > div {
opacity: 1;
}
/*
----------------------------
Modal: Slide from top
----------------------------
*/
.custombox-modal-slide-top {
transform: translateY(-300%);
}
.custombox-modal-open .custombox-modal-slide-top {
transform: translateY(0);
}
/*
----------------------------
Modal: Slide from left
----------------------------
*/
.custombox-modal-slide-left {
transform: translateX(-300%);
}
.custombox-modal-open .custombox-modal-slide-left {
transform: translateX(0);
}
/*
----------------------------
Modal: Slide from right
----------------------------
*/
.custombox-modal-slide-right {
transform: translateX(300%);
}
.custombox-modal-open .custombox-modal-slide-right {
transform: translateX(0);
}
/*
----------------------------
Modal: Slide from bottom
----------------------------
*/
.custombox-modal-slide-bottom {
transform: translateY(300%);
}
.custombox-modal-open .custombox-modal-slide-bottom {
transform: translateY(0);
}
/*
----------------------------
Modal: Newspaper
----------------------------
*/
.custombox-modal-newspaper {
transform: scale(0) rotate(720deg);
opacity: 0;
transition-property: all;
position: absolute;
}
.custombox-overlay-newspaper {
transition-property: all;
}
.custombox-modal-open .custombox-modal-newspaper {
transform: scale(1) rotate(0deg);
opacity: 1;
}
/*
----------------------------
Modal: Fall
----------------------------
*/
.custombox-modal-container-fall {
perspective: 1300px;
}
.custombox-modal-fall {
transform-style: preserve-3d;
transform: translateZ(600px) rotateX(20deg);
opacity: 0;
}
.custombox-modal-open .custombox-modal-fall {
transition-timing-function: ease-in;
transition-property: all;
transform: translateZ(0) rotateX(0deg);
opacity: 1;
}
/*
----------------------------
Modal: Sideball
----------------------------
*/
.custombox-modal-container-sidefall {
perspective: 1300px;
}
.custombox-modal-wrapper-sidefall {
overflow-x: hidden;
}
.custombox-modal-sidefall {
transform-style: preserve-3d;
transform: translate(30%) translateZ(600px) rotate(10deg);
opacity: 0;
}
.custombox-modal-open .custombox-modal-sidefall {
transition-timing-function: ease-in;
transition-property: all;
transform: translate(0) translateZ(0) rotate(0deg);
opacity: 1;
}
/*
----------------------------
Modal: Blur
----------------------------
*/
.custombox-open-blur .custombox-container-blur {
filter: blur(3px);
}
@media all and (-ms-high-contrast: none) {
.custombox-open-blur .custombox-container-blur {
text-shadow: 0 0 8px #000;
color: rgba(255,255,255,0);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
zoom: 1;
}
}
.custombox-modal-blur {
transform: translateY(-5%);
opacity: 0;
position: absolute;
}
.custombox-overlay-blur,
.custombox-modal-container-blur {
transition-property: all;
}
.custombox-modal-open .custombox-modal-blur {
transform: translateY(0);
opacity: 1;
}
/*
----------------------------
Modal: 3D Flip generic
----------------------------
*/
.custombox-modal-container-flip {
perspective: 1300px;
}
/*
----------------------------
Modal: 3D Flip horizontal
----------------------------
*/
.custombox-modal-flip-horizontal {
position: absolute;
transform-style: preserve-3d;
transform: rotateY(-70deg);
transition-property: all;
opacity: 0;
}
.custombox-modal-open .custombox-modal-flip-horizontal {
transform: rotateY(0deg);
opacity: 1;
}
/*
----------------------------
Modal: 3D Flip vertical
----------------------------
*/
.custombox-modal-flip-vertical {
position: absolute;
transform-style: preserve-3d;
transform: rotateX(-70deg);
transition-property: all;
opacity: 0;
}
.custombox-modal-open .custombox-modal-flip-vertical {
transform: rotateX(0deg);
opacity: 1;
}
/*
----------------------------
Modal: 3D Sign
----------------------------
*/
.custombox-modal-container-sign {
perspective: 1300px;
}
.custombox-modal-sign {
transform-style: preserve-3d;
transform: rotateX(-60deg);
transform-origin: 50% 0;
opacity: 0;
transition-property: all;
}
.custombox-modal-open .custombox-modal-sign {
transform: rotateX(0deg);
opacity: 1;
}
/*
----------------------------
Modal: Superscaled
----------------------------
*/
.custombox-modal-superscaled {
transform: scale(2);
opacity: 0;
transition-property: all;
position: absolute;
}
.custombox-modal-open .custombox-modal-superscaled {
transform: scale(1);
opacity: 1;
}
/*
----------------------------
Modal: 3D Slit
----------------------------
*/
.custombox-modal-container-slit {
perspective: 1300px;
}
.custombox-modal-slit {
transform-style: preserve-3d;
transform: translateZ(-3000px) rotateY(90deg);
opacity: 0;
}
.custombox-modal-open .custombox-modal-slit {
animation: slit .7s forwards ease-out;
}
@keyframes slit {
50% {
transform: translateZ(-250px) rotateY(89deg);
opacity: 1;
animation-timing-function: ease-out;
}
100% {
transform: translateZ(0) rotateY(0deg);
opacity: 1;
}
}
/*
----------------------------
Modal: 3D Rotate generic
----------------------------
*/
.custombox-modal-container-rotate {
perspective: 1300px;
}
/*
----------------------------
Modal: 3D Rotate from bottom
----------------------------
*/
.custombox-modal-rotate-bottom {
transform-style: preserve-3d;
transform: translateY(100%) rotateX(90deg);
transform-origin: 0 100%;
opacity: 0;
transition-timing-function: ease-out;
transition-property: all;
position: absolute;
}
.custombox-modal-open .custombox-modal-rotate-bottom {
transform: translateY(0) rotateX(0deg);
opacity: 1;
}
/*
----------------------------
Modal: 3D Rotate from left
----------------------------
*/
.custombox-modal-rotate-left {
transform-style: preserve-3d;
transform: translateZ(100px) translateX(-30%) rotateY(90deg);
transform-origin: 0 100%;
opacity: 0;
transition-property: all;
position: absolute;
}
.custombox-modal-open .custombox-modal-rotate-left {
transform: translateZ(0) translateX(0) rotateY(0deg);
opacity: 1;
}
/*
----------------------------
Modal: Letmein
----------------------------
*/
.custombox-modal-container-letmein {
transition-property: transform;
transform: rotateX(-2deg);
transform-origin: 50% 0;
transform-style: preserve-3d;
opacity: 1;
}
.custombox-modal-letmein {
opacity: 0;
transform: translateY(300%);
float: left;
}
.custombox-modal-open .custombox-modal-letmein {
transform: translateY(0);
opacity: 1;
transition-property: all;
}
/*
----------------------------
Modal: Makeway
----------------------------
*/
.custombox-modal-makeway {
transform: translateX(200%);
opacity: 0;
float: left;
}
.custombox-modal-open .custombox-modal-makeway {
transform: translateX(0);
opacity: 1;
}
.custombox-modal-wrapper-makeway {
overflow: hidden;
}
/*
----------------------------
Modal: Slip
----------------------------
*/
.custombox-modal-slip {
transform: translateY(-350%);
}
.custombox-modal-open .custombox-modal-slip {
transform: translateY(0);
transition-property: all;
}
/*
----------------------------
Modal: Corner
----------------------------
*/
.custombox-modal-corner {
opacity: 0;
transform: translateY(150px) translateX(150px);
transition-property: opacity, transform, visibility;
}
.custombox-modal-open .custombox-modal-corner {
transform: translateY(0);
opacity: 1;
transition-property: opacity, transform;
}
/*
----------------------------
Modal: Slide together
----------------------------
*/
.custombox-modal-slidetogether {
transform: translateY(-600%);
}
.custombox-modal-open .custombox-modal-slidetogether {
transform: translateY(0);
}
/*
----------------------------
Modal: Scale
----------------------------
*/
.custombox-modal-scale {
transform: scale(0.9);
transition: transform;
opacity: 0;
}
.custombox-modal-open .custombox-modal-scale {
transform: scale(1);
transition: transform;
opacity: 1;
}
/*
----------------------------
Modal: Door
----------------------------
*/
.custombox-modal-door {
visibility: hidden;
opacity: 0;
}
.custombox-modal-open .custombox-modal-door {
opacity: 1;
visibility: visible;
}
/*
----------------------------
Modal: Push
----------------------------
*/
.custombox-modal-push {
transform: translateX(-300%);
}
.custombox-modal-open .custombox-modal-push {
transform: translateX(0);
}
/*
----------------------------
Modal: Content Scale
----------------------------
*/
.custombox-modal-contentscale {
transform: translateY(600%);
transition-property: transform ease-in-out;
position: absolute;
}
.custombox-modal-open .custombox-modal-contentscale {
transform: translateY(0);
}
/*
----------------------------
Modal: Val
----------------------------
*/
.custombox-modal-swell {
animation-duration: 0.5s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
animation-name: swell-close;
}
.custombox-modal-open .custombox-modal-swell {
animation-name: swell-open;
}
@keyframes swell-open {
0% {
opacity: 0;
transform: translate3d(calc(-100vw - 50%), 0, 0);
}
50% {
opacity: 1;
transform: translate3d(100px, 0, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes swell-close {
0% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
50% {
opacity: 1;
transform: translate3d(-100px, 0, 0) scale3d(1.1, 1.1, 1);
}
100% {
opacity: 0;
transform: translate3d(calc(100vw + 50%), 0, 0)
}
}
/*
----------------------------
Modal: Rotate down
----------------------------
*/
.custombox-modal-rotatedown {
animation-duration: 0.4s;
animation-timing-function: cubic-bezier(0.7,0,0.3,1);
animation-fill-mode: forwards;
transform-origin: -150% 50%;
animation-name: rotatedown-close;
overflow: hidden;
}
.custombox-modal-open .custombox-modal-rotatedown {
animation-name: rotatedown-open;
}
.custombox-modal-open .custombox-modal-rotatedown div > * {
animation: rotatedown-elem 0.4s both;
transform-origin: -50% 50%;
animation-timing-function: cubic-bezier(0.7,0,0.3,1);
animation-delay: 0.15s;
}
@keyframes rotatedown-open {
0% {
opacity: 0;
transform: rotate3d(0, 0, 1, -45deg);
}
100% {
opacity: 1;
transform: rotate3d(0, 0, 1, 0deg);
}
}
@keyframes rotatedown-close {
0% {
opacity: 1;
}
100% {
opacity: 0;
transform: rotate3d(0, 0, 1, 45deg);
}
}
@keyframes rotatedown-elem {
0% {
opacity: 0;
transform: translate3d(0, -150px, 0) rotate3d(0, 0, 1, -20deg);
}
100% { opacity: 1;
transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg);
}
}
/*
----------------------------
Modal: Flash
----------------------------
*/
.custombox-modal-flash {
animation-duration: 0.4s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.7,0,0.3,1);
animation-name: flash-close;
overflow: hidden;
}
.custombox-modal-open .custombox-modal-flash {
animation-name: flash-open;
}
.custombox-modal-open .custombox-modal-flash div > * {
animation: flash-elem-open 0.4s cubic-bezier(0.7,0,0.3,1) both;
}
.custombox-modal-flash div > * {
animation: flash-elem-close 0.4s cubic-bezier(0.7,0,0.3,1) both;
}
@keyframes flash-open {
0% {
opacity: 0;
transform: translate3d(-400px, 0, 0)
scale3d(1.4, 0, 1);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}
}
@keyframes flash-close {
0% {
opacity: 1;
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}
20% {
opacity: 1;
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}
100% {
opacity: 0;
transform: translate3d(-400px, 0, 0) scale3d(1.4, 0, 1);
}
}
@keyframes flash-elem-open {
0% {
opacity: 0;
transform: translate3d(-100px, 0, 0);
}
20% {
opacity: 0;
transform: translate3d(-100px, 0, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes flash-elem-close {
0% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
100% {
opacity: 0;
transform: translate3d(-100px, 0, 0);
}
}
#modal {
}
#modalcontent {
background: #000;
width: 100%;
height: 100%; min-height:100%;
margin: 0 auto;
display: block;
}
#insidebase .buildings{
background: #000;
}
#insidebase .building {
float: left;
width: 50%;
height: 100px;
display: block;
background: transparent;
z-index: 99;
}
#insidebase .tile .building {
float: left;
width: 100%;
height: 100%;
display: block;
background: transparent;
}
#insidebase .base{
background: url('/assets/images/insidebase.jpg') #fff;
height: 100%;
position: relative;
padding: 0 !important;
}
#insidebase .tile {
float: left;
width: 12.5%;
height: 12.5%;
display: block;
color: #000;
}
#insidebase .tile:hover, #insidebase .tile:active {
border: solid 1px #eee;
}
/* ----- CSMAP ----- */
.mapael .mapTooltip {
position: absolute;
background-color: #fff;
moz-opacity: 0.80;
opacity: 0.80;
filter: alpha(opacity=80);
border-radius: 4px;
padding: 10px;
z-index: 1000;
max-width: 200px;
display: none;
color: #232323;
}
.mapael .map {
margin: 0 auto;
height: 500px;
overflow: hidden;
position: relative;
border-radius: 5px;
}
/* For all zoom buttons */
.mapael .zoomButton {
background-color: #fff;
border: 1px solid #ccc;
color: #000;
width: 15px;
height: 15px;
line-height: 15px;
text-align: center;
border-radius: 3px;
cursor: pointer;
position: absolute;
top: 0;
font-weight: bold;
left: 10px;
-webkit-user-select: none;
-khtml-user-select : none;
-moz-user-select: none;
-o-user-select : none;
user-select: none;
}
/* Reset Zoom button first */
.mapael .zoomReset {
top: 10px;
}
/* Then Zoom In button */
.mapael .zoomIn {
top: 30px;
}
/* Then Zoom Out button */
.mapael .zoomOut {
top: 50px;
}
.buildingimg {
max-height: 100%;
height: 100%;
}
.custombox-modal-container {
margin: 70px 5% 15px 5% !important;
}
.upgradeactive .tile {
cursor: copy !important;
}
.ui-draggable-disabled {
opacity: 0.3 !important;
}