html, body {
position: relative;
height: 100%;
}
body {
background: #000000;
margin: 0;
padding: 0;
}
.container{
position:relative;
}
.language{
width:30px;
display:inline-block;
}
.language .all{
display:none;
}
.fotorama__wrap {
margin:0 auto;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
font-size: 18px;
height: auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
}
.swiper-slide-scroll{
font-size: 18px;
height: 300px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.parallax-bg {
position: absolute;
left: 0;
top: 0;
width: 130%;
height: 100%;
-webkit-background-size: cover;
background-size: cover;
background-position: center;
}
.spacer40 {
margin-top: 40px; /* define margin as you see fit */
}
.spacer100 {
margin-top: 1000px; /* define margin as you see fit */
}
.MenuBg {
width:250px;
height:100%;
right:0px;
top:0px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+85&0+0,1+100 */
background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 85%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(85%,rgba(0,0,0,0.85)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 85%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 85%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 85%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 85%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
opacity: .1;
position: fixed;
z-index:9;
right:-250px;
}
.swiper-pagination span .MenuLabel {
font-family: 'pristinaregular', Arial, sans-serif;
transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
opacity: 0;
position: absolute;
right: 0px;
padding-right:50px;
width: 240px;
color: #dddddd;
font-weight:500;
font-size: 2em;
height:40px;
margin-top:-10px;
text-align:right;
line-height:52px;
}
.swiper-pagination:hover span .MenuLabel{
color: #FFFFFF;
opacity: .5;
margin-top:-10px;
}
.swiper-pagination-clickable:hover + .MenuBg {
transition: opacity .2s ease-out;
opacity: 1 !important;
right:0px;
}
.swiper-pagination:hover span .MenuLabel:hover {
transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
opacity: 1;
font-weight:600;
color: #e00600;
text-shadow: 0 0 5px #000 , 0 0 25px #000 , 0 0 10px #e00600, 0 0 30px #e00600, 0 0 60px #e00600;
}
.swiper-pagination-bullet2 {
width: 14px;
height: 14px;
display: inline-block;
border-radius: 100%;
background: #000;
opacity: 1;
color: #000000;
margin:25px 10px !important;
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.swiper-pagination-bullet-active2 {
background: #FFFFFF;
color: #FFFFFF;
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
-webkit-animation: neon1 1.5s ease-in-out infinite alternate;
-moz-animation: neon1 1.5s ease-in-out infinite alternate;
animation: neon1 1.5s ease-in-out infinite alternate;
}
.swiper-pagination-bullet2:hover {
width: 14px;
height: 14px;
background: #FFFFFF;
color: #FFFFFF;
-webkit-animation: neon1 1.5s ease-in-out infinite alternate;
-moz-animation: neon1 1.5s ease-in-out infinite alternate;
animation: neon1 1.5s ease-in-out infinite alternate;
}
.swiper-pagination-bullet {
width: 31px;
height: 31px;
display: inline-block;
background: url('../images/bull_off.png');
opacity: 1;
color: #000000;
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.swiper-pagination-bullet-active {
width: 31px;
height: 31px;
background: url('../images/bull_on.png');
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
box-shadow: 0 0 70px #e00600, 0 0 140px #e00600, 0 0 150px #e00600;
}
.swiper-pagination-bullet:hover {
width: 31px;
height: 31px;
background: url('../images/bull_on.png');
color: #FFFFFF;
}
@-webkit-keyframes neon1 {
from {
box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #d20000, 0 0 70px #d20000, 0 0 80px #d20000, 0 0 100px #d20000, 0 0 150px #d20000;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #d20000, 0 0 70px #d20000, 0 0 80px #d20000, 0 0 100px #d20000, 0 0 150px #d20000;
}
to {
box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #d20000, 0 0 35px #d20000, 0 0 40px #d20000, 0 0 50px #d20000, 0 0 75px #d20000;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #d20000, 0 0 35px #d20000, 0 0 40px #d20000, 0 0 50px #d20000, 0 0 75px #d20000;
}
}
.swiper-wrapper{
}
.news-content{
font-family: 'LatienneSwaT-ReguItal';
font-size: 17px;
color:#fff;
margin-top:0px;
text-shadow: 0 0 5px #000 , 0 0 25px #000 , 0 0 10px #000, 0 0 30px #000, 0 0 60px #000;
}
.news-content .latest-blog-title{
color: #e00600;
font-weight:600;
}
.news-content .post-meta{
font-size:12px;
margin-top:10px;
}
/* ---------------------------------------------------------------------------- */
/* button */
/* ---------------------------------------------------------------------------- */
.btn_style_1{
margin:10px;
display: inline-block;
border-radius: 50%;
text-align:center;
background: none;
font-size:1.5em;
width:30px;
height:30px;
color: #FFFFFF;
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #000, 0 0 70px #000, 0 0 80px #000;
}
.btn_style_1:hover{
color: #000000;
background: #FFFFFF;
-webkit-animation: neon1 1.5s ease-in-out infinite alternate;
-moz-animation: neon1 1.5s ease-in-out infinite alternate;
animation: neon1 1.5s ease-in-out infinite alternate;
}
.btn_style_2{
margin:10px;
display: inline-block;
border-radius: 50%;
text-align:center;
background: none;
font-size:1.5em;
width:30px;
height:30px;
color: #FFFFFF;
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.btn_style_2:hover{
color: #000000;
background: #FFFFFF;
-webkit-animation: neon1 1.5s ease-in-out infinite alternate;
-moz-animation: neon1 1.5s ease-in-out infinite alternate;
animation: neon1 1.5s ease-in-out infinite alternate;
}
/* ---------------------------------------------------------------------------- */
/* Videos */
/* ---------------------------------------------------------------------------- */
.bgvideo {
top: 0; right: 0; bottom: 0; left: 0;
overflow: hidden;
z-index:1;
}
.bgvideo > video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; z-index:1;
}
/* 1. No object-fit support: */
@media (min-aspect-ratio: 16/9) {
.bgvideo > video { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
.bgvideo > video { width: 300%; left: -100%; }
}
/* 2. If supporting object-fit, overriding (1): */
@supports (object-fit: cover) {
.bgvideo > video {
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
}
}
/* ---------------------------------------------------------------------------- */
/* Backgrounds */
/* ---------------------------------------------------------------------------- */
.slide-mobile-0{
background: #000000 url('/wp-content/uploads/2015/10/VRC_Shot03.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.slide-mobile-4{
background: #000000 url('/wp-content/uploads/2015/10/VRC_Wallpaper5.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.slide2{
background: url('../images/bg/the-game.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.slide8{
background: #000000 url('../images/bg/media.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.slide6{
background: #000000 url('../images/bg/features.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.slide5{
background: #000000 url('/wp-content/uploads/2015/09/vendetta-ravens-cry-gameplay.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.slide7{
background: #000000 url('../images/bg/news.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.slide9{
background: #000000 url('/wp-content/uploads/2015/09/vendetta-ravens-cry-our-vendetta.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.gradient-1-off{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.85+45,0.68+74,0+100 */
background: -moz-linear-gradient(top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.85) 45%, rgba(0,0,0,0.68) 74%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.85)), color-stop(45%,rgba(0,0,0,0.85)), color-stop(74%,rgba(0,0,0,0.68)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.85) 45%,rgba(0,0,0,0.68) 74%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.85) 45%,rgba(0,0,0,0.68) 74%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.85) 45%,rgba(0,0,0,0.68) 74%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.85) 45%,rgba(0,0,0,0.68) 74%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
padding:0px !important;
color:#bdbdbd;
}
.gradient-1-off {
position: relative;
border-top: 1px solid rgba(92, 92, 92, 1);
}
.gradient-1-off:before, .gradient-1-off:after {
content: "";
position: absolute;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
background-image: -webkit-linear-gradient(rgba(92, 92, 92, 1), transparent);
background-image: -moz-linear-gradient(rgba(92, 92, 92, 1), transparent);
background-image: -o-linear-gradient(rgba(92, 92, 92, 1), transparent);
background-image: linear-gradient(rgba(92, 92, 92, 1), transparent);
top: -1px;
bottom: -1px;
width: 1px;
}
.gradient-1-off:before {
left: -1px;
}
.gradient-1-off:after {
right: -1px;
}
.gradient-1 h3{
position:relative;
text-align:center;
margin-top:-30px;
margin-bottom:40px;
font-size:2em;
color:#FFFFFF;
font-weight:700px;
text-transform:uppercase;
z-index: 6;
}
.gradient-1 h3::before{
content: ' ';
position:absolute;
background: url('../images/blood.png') no-repeat top center;
width: 100%;
height:60px;
display:block;
position: absolute;
z-index: -1;
margin-top:-10px;
}
.gradient-2-off{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+49,000000+49,000000+100&0+0,0.65+11,0.65+87,0+100 */
background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 11%, rgba(0,0,0,0.65) 49%, rgba(0,0,0,0.65) 87%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(11%,rgba(0,0,0,0.65)), color-stop(49%,rgba(0,0,0,0.65)), color-stop(87%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 11%,rgba(0,0,0,0.65) 49%,rgba(0,0,0,0.65) 87%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 11%,rgba(0,0,0,0.65) 49%,rgba(0,0,0,0.65) 87%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 11%,rgba(0,0,0,0.65) 49%,rgba(0,0,0,0.65) 87%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 11%,rgba(0,0,0,0.65) 49%,rgba(0,0,0,0.65) 87%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
}
.gradient-2-off {
position: relative; margin-bottom:50px;
}
.gradient-2-off:before, .gradient-2-off:after {
content: "";
height: 2px;
/* I've removed the vendor prefixes, if you are looking to support older browsers
then refer to older version of this answer.
*/
background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(150,150,150,.85) 50%,rgba(0,0,0,0) 100%);
display: block;
}
.gradient-2-off-red {
position: relative; padding:30px 60px;margin:0px;
}
.gradient-2-off-red:before, .gradient-2-off-red:after {
content: "";
position: absolute;
}
.gradient-2-off-red:before {
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
z-index: -2;
}
.gradient-2-off-red:after {
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: -webkit-gradient(radial, center bottom, 10, 90% 0%, 350, from(#b10000), to(transparent));
background-image: -webkit-radial-gradient(center bottom, 350px 40px, rgba(177,0,0,.85), transparent);
background-image: -moz-radial-gradient(center bottom, farthest-corner, #b10000 0%, transparent 72%);
z-index: -1;
}
.gradient-3{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+49,000000+49,000000+100&0+0,0.65+11,0.65+87,0+100 */
background-image: -webkit-gradient(radial, center bottom, 10, 90% 0%, 850, from(#000000), to(transparent));
background-image: -webkit-radial-gradient(center bottom, 850px 60px, rgba(0,0,0,.85), transparent);
background-image: -moz-radial-gradient(center bottom, farthest-corner, #000000 0%, transparent 72%);
}
.gradient-3 .gradient-red-line{
content: "";
height: 2px;
/* I've removed the vendor prefixes, if you are looking to support older browsers
then refer to older version of this answer.
*/
background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(177,0,0,.65) 50%,rgba(0,0,0,0) 100%);
display: block;
}
.gradient-3 {
position: relative; margin-bottom:30px;
}
.gradient-3:after {
content: "";
height: 2px;
/* I've removed the vendor prefixes, if you are looking to support older browsers
then refer to older version of this answer.
*/
background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(150,150,150,.85) 50%,rgba(0,0,0,0) 100%);
display: block;
}
.gradient-3-red {
position: relative; padding:0px 60px;margin:0px;
}
.gradient-3-red:before, .gradient-3-red:after {
content: "";
position: absolute;
}
.gradient-3-red:before {
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
z-index: -2;
}
.gradient-3-red:after {
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: -webkit-gradient(radial, center bottom, 10, 90% 0%, 350, from(#b10000), to(transparent));
background-image: -webkit-radial-gradient(center bottom, 350px 40px, rgba(177,0,0,.85), transparent);
background-image: -moz-radial-gradient(center bottom, farthest-corner, #b10000 0%, transparent 72%);
z-index: -1;
}
.site-pagination ul{
padding:0px;
margin-bottom:0px;
}
.site-pagination ul ol{
margin-bottom:0px;
}
/* ---------------------------------------------------------------------------- */
/* Characters */
/* ---------------------------------------------------------------------------- */
.characters-select{
margin-top:180px; height:350px;
}
.characters-list ul {
position:relative;
top:-90px;
width:570px;
height:200px;
margin:0 auto;
}
.characters-list ul li{
position:absolute;
list-style: none;
margin:0px; padding:0px;
text-align:center;
}
.characters-list ul li img{
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
margin:12px;
}
.characters-list ul li:nth-child(1){ top:0px; left:210px; }
.characters-list ul li:nth-child(2){ top:80px; left:0px; }
.characters-list ul li:nth-child(3){ top:80px; left:140px; }
.characters-list ul li:nth-child(4){ top:80px; left:280px; }
.characters-list ul li:nth-child(5){ top:80px; left:420px; }
.characters-list ul li:nth-child(6){ top:160px; left:70px; }
.characters-list ul li:nth-child(7){ top:160px; left:210px; }
.characters-list ul li:nth-child(8){ top:160px; left:350px; }
.characters-list ul li:nth-child(9){ top:240px; left:0px; }
.characters-list ul li:nth-child(10){ top:240px; left:140px;}
.characters-list ul li:nth-child(11){ top:240px; left:280px; }
.characters-list ul li:nth-child(12){ top:240px; left:420px; }
/* ---------------------------------------------------------------------------- */
/* */
/* ---------------------------------------------------------------------------- */
.alpha {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFUlEQVQIW2NkYGDwYWBg2MLIAAE+AAupAU9KDN7bAAAAAElFTkSuQmCC);
width: 100%;
height: 100%;
min-height: 0;
position: absolute;
overflow: hidden;
z-index: 5;
}
img.lazy {
display: none;
}
.hometext{
margin-top:100px;
}
/* ---------------------------------------------------------------------------- */
/* Layout */
/* ---------------------------------------------------------------------------- */
.margin10{
margin:10px;
}
.popupImg{
width:auto;
height:auto;
}
.modalWindow{
z-index: 10;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 90%;
height: 90%;
background:rgba(0,0,0,1);
border:1px solid #333333;
}
.pageModal .centerContainer{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
.modalWindow::after
{
content:' Close';
width:30;
height:30px;
background:white;
position:absolute;
top:-30px;
right:0px;
}
/* ---------------------------------------------------------------------------- */
/* overlay */
/* ---------------------------------------------------------------------------- */
.overlay{
}
.content{
position:absolute;
width:100%;
height:100%;
font-family: 'LatienneSwaT-ReguItal';
font-size: 18px;
color:#FFFFFF;
z-index: 9;
padding:0px 100px 0px;
font-weight:100;
text-align: justify;
text-shadow: 0 0 5px #000 , 0 0 7px #000 , 0 0 10px #000, 0 0 20px #000 ;
}
h1{
position:relative;
font-family: 'LatienneURWDCD-Regu';
text-align:center;
font-size: 42px;
margin-top:170px;
margin-bottom:30px;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
h1::before{
content: ' ';
position:absolute;
background: url('../images/blood.png') no-repeat top center;
width: 100%;
height:60px;
display:block;
position: absolute;
z-index: -1;
margin-top:-5px;
left:0px;
}
.Blood{
position:relative;
font-family: 'LatienneURWDCD-Regu';
text-align:center;
font-size: 36px;
margin-top:0px;
margin-bottom:0px;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
.Blood::before{
content: ' ';
position:absolute;
background: url('../images/blood.png') no-repeat top center;
width: 100%;
height:60px;
display:block;
position: absolute;
z-index: -1;
margin-top:-5px;
left:0px;
}
a:link,a:active,a:visited,a:hover{
color:#eeeeee;
text-decoration:none;
}
h3{
font-family: 'LatienneURWDCD-Regu';
font-size: 26px;
white-space: nowrap;
text-align:center;
color:rgba(255,255,255,.75);
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
h3:hover{
color:#FFFFFF;
}
footer{
position:absolute;
bottom:100px;
}
.social{
position: fixed;
right: 25px;
top: 10px;
text-align: left;
z-index: 11;
}
.backHome{
position: fixed;
left: 25px;
top: 10px;
text-align: left;
z-index: 11;
}
.copyright{
position: fixed;
bottom: 10px;
width:100%;
text-align: center;
z-index: 11;
font-family:'amerigo_btitalic';
color:#646464;
}
.logo{
position:absolute;
left:0px;
z-index: 15;
top:0px;
opacity:0;
}
.logo_small{
position:fixed;
left:30%;
z-index: 11;
width:300px;
top:0px;
}
.overlay .tl{
background: url('../images/overlay/overlay_tl.png');
width:20px;
height:130px;
position:fixed;
left:0px;
top:0px;
z-index: 10;
}
.overlay .tc1{
background: url('../images/overlay/overlay_tc.png');
height:130px;
position:fixed;
right:50%;
left:20px;
top:0px;
z-index: 10;
}
.overlay .tc2{
background: url('../images/overlay/overlay_tc.png');
height:130px;
position:fixed;
left:50%;
right:20px;
top:0px;
z-index: 10;
}
.overlay .tr{
background: url('../images/overlay/overlay_tr.png');
width:20px;
height:130px;
position:fixed;
right:0px;
top:0px;
z-index: 10;
}
.overlay .bl{
background: url('../images/overlay/overlay_bl.png');
width:20px;
height:100px;
position:fixed;
left:0px;
bottom:0px;
z-index: 10;
}
.overlay .bc1{
background: url('../images/overlay/overlay_bc.png');
height:100px;
position:fixed;
right:50%;
left:20px;
bottom:0px;
z-index: 10;
}
.overlay .bc2{
background: url('../images/overlay/overlay_bc.png') ;
height:100px;
position:fixed;
left:50%;
right:20px;
bottom:0px;
z-index: 10;
}
.overlay .br{
background: url('../images/overlay/overlay_br.png');
width:20px;
height:100px;
position:fixed;
right:0px;
bottom:0px;
z-index: 10;
}
/* ===================================================*/
/* Screen frame */
/* ===================================================*/
.screenshot {
position: relative;
margin: 0px;
padding: 1px 15px;
}
.screenshot img{
margin-top:6px;
margin-left:-8px;
padding-bottom:0px;
margin-bottom:6px;
transition: box-shadow .3s linear;
}
.screenshot img:hover{
-webkit-box-shadow: 0px 0px 15px 5px rgba(0,0,0, .75);
-moz-box-shadow: 0px 0px 15px 5px rgba(0,0,0, .75);
box-shadow: 0px 0px 15px 5px rgba(0,0,0, .75);
}
.screenshot .tl{
background: url('../images/screenshot/screenshot_tl.png');
width:31px;
height:31px;
position:absolute;
left:0px;
top:0px;
z-index: 10;
}
.screenshot .tc1{
background: url('../images/screenshot/screenshot_tc.png');
height:31px;
position:absolute;
right:50%;
left:31px;
top:0px;
z-index: 10;
}
.screenshot .tc2{
background: url('../images/screenshot/screenshot_tc.png');
height:31px;
position:absolute;
left:50%;
right:48px;
top:0px;
z-index: 10;
}
.screenshot .tr{
background: url('../images/screenshot/screenshot_tr.png');
width:31px;
height:31px;
position:absolute;
right:17px;
top:0px;
z-index: 10;
}
.screenshot .bl{
background: url('../images/screenshot/screenshot_bl.png');
width:31px;
height:31px;
position:absolute;
left:0px;
bottom:0px;
z-index: 10;
}
.screenshot .lc1{
background: url('../images/screenshot/screenshot_lc.png');
width:31px;
position:absolute;
top:50%;
bottom:31px;
left:0px;
z-index: 10;
}
.screenshot .lc2{
background: url('../images/screenshot/screenshot_lc.png');
width:31px;
position:absolute;
bottom:50%;
top:31px;
left:0px;
z-index: 10;
}
.screenshot .rc1{
background: url('../images/screenshot/screenshot_rc.png');
width:31px;
position:absolute;
top:50%;
bottom:31px;
right:17px;
z-index: 10;
}
.screenshot .rc2{
background: url('../images/screenshot/screenshot_rc.png');
width:31px;
position:absolute;
bottom:50%;
top:31px;
right:17px;
z-index: 10;
}
.screenshot .bc1{
background: url('../images/screenshot/screenshot_bc.png');
height:31px;
position:absolute;
right:50%;
left:31px;
bottom:0px;
z-index: 10;
}
.screenshot .bc2{
background: url('../images/screenshot/screenshot_bc.png');
height:31px;
position:absolute;
left:50%;
right:48px;
bottom:0px;
z-index: 10;
}
.screenshot .br{
background: url('../images/screenshot/screenshot_br.png');
width:31px;
height:31px;
position:absolute;
right:17px;
bottom:0px;
z-index: 10;
}
.screenshot .bractive{
content: ' ';
background: url('../images/screenshot/screenshot_selection.png');
width:70px;
height:70px;
position:absolute;
right:17px;
bottom:0px;
z-index: 10;
}
/* ===================================================*/
.fotorama__thumb-border {
border:2px solid #dddddd !important;
}
.fotorama__stage, .light-border{
border:1px solid #dddddd !important;
}
.vcenter{
}
/* ===================================================*/
.subpage,.subpageFotorama{
cursor: pointer;
}
.change-bg,.change-bg-text,.media-text,.load-text,.screenshot{
cursor: pointer;
}
.pageModal{
position:fixed;
width:100%;
height:100%;
z-index: 99998;
top:0px;
display:none;
background-image:transparent no-repeat center center;
background-color:rgba(0,0,0,1);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
transition: background 1s linear;
}
.pageModal #loading {
position:absolute;
top:50%;
left:50%;
font-size:2em;
z-index:99;
color:#EEEEEE;
}
.pageModal #closeBtn {
position:absolute;
top:10px;
right:10px;
cursor: pointer;
z-index: 99999;
}
#sparcle{
border:0px !important;
position:absolute;
height:63px; width:226px;
opacity:0;
left:10px;
z-index:0;
-webkit-transition: opacity .4s ease-in-out, left 1s, width 1s; /* For Safari 3.1 to 6.0 */
transition: opacity .4s ease-in-out, left 1s, width 1s;
}
/* ---------------------------------------------------------------------------- */
/* links */
/* ---------------------------------------------------------------------------- */
.links-1 a:link,.links-1 a:visited,.links-1 a:active{
font-family: 'LatienneSwaT-ReguItal', Arial, sans-serif;
color:#eeeeee;
font-size:18px;
}
.links-1 a:hover{
font-family: 'LatienneSwaT-ReguItal', Arial, sans-serif;
color:#FFFFFF;
font-size:18px;
text-decoration:none;
}
.links-2:link,.links-2:visited,.links-2:active{
color:#999999;
font-size:14px;
}
.links-2:hover{
color:#eeeeee;
font-size:14px;
text-decoration:none;
}
hr{
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
}
/* ---------------------------------------------------------------------------- */
/* scrollbar */
/* ---------------------------------------------------------------------------- */
.scrollbar{
overflow: auto;
padding: 7px;
}
.scrollbar2{
max-height:280px;
overflow: hidden;
}
/* Styles specific to this particular page */
.scroll-pane
{
width: 100%;
height: 200px;
overflow: auto;
}
.horizontal-only
{
height: auto;
max-height: 200px;
}
.align-bottom{
position:absolute;
bottom:60px;
left:0px;
width:100%;
}
.align-top{
}
.pageModal .gradient-3{
margin-bottom:0px;
}
@media(max-width: 480px){
.overlay .logo img{
width:200px;
}
h1{margin-top: 70px; }
/* ---------------------------------------------------------------------------- */
/* Characters */
/* ---------------------------------------------------------------------------- */
.characters-select{
margin:140px auto 0;
width:200px;
}
.characters-list ul {
position:relative;
top:0px;
margin:0 auto;
}
.characters-list ul li{
position:absolute;
list-style: none;
margin:0px; padding:0px;
text-align:center;
}
.characters-list ul li img{
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
margin:12px;
width:70px;
height:70px;
}
.characters-list ul li:nth-child(1){ top:0px; left:140px; }
.characters-list ul li:nth-child(2){ top:50px; left:-40px; }
.characters-list ul li:nth-child(3){ top:50px; left:80px; }
.characters-list ul li:nth-child(4){ top:50px; left:200px; }
.characters-list ul li:nth-child(5){ top:50px; left:320px; }
.characters-list ul li:nth-child(6){ top:100px; left:20px; }
.characters-list ul li:nth-child(7){ top:100px; left:140px; }
.characters-list ul li:nth-child(8){ top:100px; left:260px; }
.characters-list ul li:nth-child(9){ top:150px; left:-40px; }
.characters-list ul li:nth-child(10){ top:150px; left:80px;}
.characters-list ul li:nth-child(11){ top:150px; left:200px; }
.characters-list ul li:nth-child(12){ top:150px; left:320px; }
}
@media(max-width: 767px){
.overlay .logo img{
width:230px;
}
h1{margin-top: 80px; }
.align-bottom{
position:absolute;
bottom:50px;
left:0px;
width:100%;
}
.content{
padding:0px 20px 0;
font-size:17px;
}
.overlay .logo{
position:fixed;
left:0px;
z-index: 11;
width:300px;
top:0px;
}
.logo_small{
position:fixed;
left:50%;
z-index: 11;
width:250px;
top:0px;
margin-left:-50%;
}
/* ---------------------------------------------------------------------------- */
/* Characters */
/* ---------------------------------------------------------------------------- */
.characters-select{
height:300px;
margin:140px auto 0;
width:450px;
}
.characters-list ul {
position:relative;
top:0px;
margin:0 auto;
}
.characters-list ul li{
position:absolute;
list-style: none;
margin:0px; padding:0px;
text-align:center;
}
.characters-list ul li img{
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
margin:12px;
width:70px;
height:70px;
}
.characters-list ul li:nth-child(1){ top:0px; left:140px; }
.characters-list ul li:nth-child(2){ top:50px; left:-40px; }
.characters-list ul li:nth-child(3){ top:50px; left:80px; }
.characters-list ul li:nth-child(4){ top:50px; left:200px; }
.characters-list ul li:nth-child(5){ top:50px; left:320px; }
.characters-list ul li:nth-child(6){ top:100px; left:20px; }
.characters-list ul li:nth-child(7){ top:100px; left:140px; }
.characters-list ul li:nth-child(8){ top:100px; left:260px; }
.characters-list ul li:nth-child(9){ top:150px; left:-40px; }
.characters-list ul li:nth-child(10){ top:150px; left:80px;}
.characters-list ul li:nth-child(11){ top:150px; left:200px; }
.characters-list ul li:nth-child(12){ top:150px; left:320px; }
}
@media(max-width: 1024px){
.logoHometext {
width:400px;
}
.overlay .logo img{
width:250px;
}
h1{ font-size: 2em; margin-top: 140px; }
h3{ font-size: .7em; white-space:normal;}
.content{
font-size:17px;
}
.align-bottom{
position:absolute;
bottom:60px;
left:0px;
width:100%;
}
}
@media(max-width: 1224px){
.logoHometext {
width:550px;
}
h3{ font-size: 1.1em; }
.content{
font-size:17px;
}
.align-bottom{
position:absolute;
bottom:30px;
left:0px;
width:100%;
}
}
@media(max-width: 1824px){
h3{ font-size: 1.3em; }
.content{
font-size:17px;
}
}