@charset "utf-8";

/* font */
@font-face {
	font-family: 'Handletter';
    src: url(../font/Handletter.otf);
}

@font-face {
    font-family: 'NotoSans';
    src: url(../font/NotoSans.ttf);
}

@font-face {
    font-family: 'Aquarion';
    src: url(../font/Aquarion.ttf);
}

/* main */
::selection {
    background: #fefefe;
    color: #100b22;
}

::-moz-selection {
    background: #fefefe;
    color: #100b22;
}

*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
	font-family: 'NotoSans';
	background: #100b22;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}

h1,
h2 {
	font-family: 'Aquarion';
	text-align: center;
	color: #f8fbd9;
}

p {
	font-family: 'NotoSans';
	font-size: 1.2em;
	line-height: 1.4;
	text-align: justify;
	color: #b5aaf8;
}

@media (max-width: 768px) {
    p {
        font-size: 1em;
    }
}

a {
	text-decoration: none;
	color: #b5aaf8;
}

a:hover,
a:focus {
	outline: none;
	color: #b5aaf8;
}

img {
	height: auto;
	max-width: 100%;
	border: 0;
}

.container { 
	max-width: 1100px;
	margin: 0 auto; 
}

.container:after,
.col:after { 
	content: ""; 
	display: table; 
	clear: both; 
}
		
.col { 
	display: block;
	float: left;
	width: 100%;
}

@media (min-width: 768px) {
    .span_1 {width: 8.33333333333%;}
    .span_2 {width: 16.6666666667%;}
    .span_3 {width: 25%;}
    .span_4 {width: 33.3333333333%;}
    .span_5 {width: 41.6666666667%;}
    .span_6 {width: 50%;}
    .span_7 {width: 58.3333333333%;}
    .span_8 {width: 66.6666666667%;}
    .span_9 {width: 75%;}
    .span_10 {width: 83.3333333333%;}
    .span_11 {width: 91.6666666667%;}
    .span_12 {width: 100%;}
}

/* menu */
.menu {
    position: fixed;
    top: 0;
    width: 100%;
    height: 50px;
    padding: 0 10%;
    background: rgba(16, 11, 34, 0.7);
    z-index: 3;
}

img.logo {
	display: block;
    float: left;
	width: 138px;
    margin: auto;
	padding: 3px;
}

ul.nav {
    display: block;
    float: right;
    margin-top: 13px;
}

li.nav {
	display: inline;
	text-decoration: none;
	margin-left: 0.7em;
}

li.nav a {
	font-family: 'Aquarion';
    font-size: 1.1em;
	list-style-type: none;
	text-decoration: none;
    padding: 0 0.3em;
	text-shadow: 0.5px 0 0 rgba(255, 255, 255, 0.5);
	color: #fefefe;
}

li.nav a:hover {
    background: #fefefe;
    color: #100b22;
}

@media (max-width: 768px) {
    ul.nav {
        display: none;
    }
    
    img.logo {
        float: none;
    }
}

/* intro */
.intro {
    position: relative;
    width: 100%;
	text-align: center;
    box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.9);
    background: url(../img/bg-header.jpg) no-repeat top center; 
    z-index: 1;
}

.intro p {
	padding: 0.25em 5%;
	text-indent: 2em;
    cursor: default;
}

.intro-content {
    background: #100b22;
    margin-top: 1350px;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
}

#section-1,
#section-2,
#section-3,
#section-4 {
    padding: 2em 0;
}

@media (max-width: 768px) {
    .intro-content {
        margin-top: 1000px;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }
}

/* player */
.player {
    display: inline-block;
	width: 300px;
	margin: 15px;
	text-align: center;
	vertical-align: top;
}

.player p {
    font-family: 'Aquarion';
	font-size: 1.1em;
	font-style: italic;
    line-height: 1.2;
	text-align: left;
	text-indent: 0;
	color: #f8fbd9;
	margin: 0.5em 0 0 0;
}

.player span {
	font-family: 'Aquarion';
	font-size: 1.4em;
	font-weight: bold;
	font-style: normal;
	color: #fafafa;
}

.player img {
	max-width: 300px;
	width: 100%;
}

/* slider fotorama.io */
.fotorama {
    margin-top: 3em;
}

/* footer*/
.footer {
	height: 552px;
	width: 100%;
    background: url(../img/footer.png) no-repeat center center;
}

.dev {
    position: relative;
    height: 70px;
    text-align: center;
    background: #3c3c3c;
    z-index: -2;
}

.about {
    position: fixed;
    left: 0;
    bottom: 8px;
    width: 50%;
    margin: 0 25%;
	font-family: 'Handletter';
    font-size: 1.7em;
    letter-spacing: 0.02em;
    color: #f8fbd9;
    z-index: -1; 
}

.about a {
    cursor: pointer;
    color: #f8fbd9;
}

.about a:hover,
.about a:focus {
    text-decoration: none;
}

.about span {
    font-size: 1.2em;
    margin-bottom: 3px;
    padding: 0 0.2em;
    color: #ef5350;
}

@media (max-width: 768px) {
    .about {
        font-size: 1.3em;
        bottom: 12px;
    }
}

.pulse {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
}

@-webkit-keyframes pulse {
    25% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    
    75% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
}

@keyframes hvr-pulse {
    25% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    
    75% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
}

.pulse:hover,
.pulse:focus,
.pulse:active {
    -webkit-animation-name: hvr-pulse;
    animation-name: hvr-pulse;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

/* grayscale */
.grayscale { 
  	-webkit-filter: grayscale(0%);
  	-moz-filter: grayscale(0%);
  	-ms-filter: grayscale(0%);
  	-o-filter: grayscale(0%);
  	filter: none;
}

.grayscale:hover {
    -webkit-filter: grayscale(100%);
  	-moz-filter: grayscale(100%);
  	-ms-filter: grayscale(100%);
  	-o-filter: grayscale(100%);
  	filter: grayscale(100%);
  	filter: url(grayscale.svg#greyscale); /* Firefox 4+ */
  	filter: gray; /* IE 6-9 */
}