html, body {margin:0; padding:0; font-size: 14px;height:100%;

font-family: 'Raleway', sans-serif; color: #e5e5e5;
}
h1, h2, h3 {font-family: 'Playfair Display', serif; font-weight: normal; margin:0.3em 0;}
h1 {font-size:6em;}
h2 {font-size:5em;}
h3 {font-size:2em;}
p {line-height: 1.5; font-size: 1em; text-align: justify;}
a {text-decoration: none; color:#c5c5c5; border-bottom:1px solid #909090; display:inline-block; transition: .5s;}
a:hover {border-bottom:1px solid white; color:white;}
ul {padding: 0; list-style: none;}
ul.no-padding li {padding-bottom:0;}
li {padding-bottom: 0.5em;}

.panel {position: relative;}
.panel:before {position: absolute; top:0;left:0; width: 100%; height:100%; background: rgba(10,10,0,.8); content:"";}
.bg-2:before, .bg-3:before {background: rgba(0,0,0,.7);}
.bg-palace:before {background: rgba(30,10,0,.9);}
.bg-opera:before {background: rgba(30,40,20,.9);}
.bg-church:before {background: rgba(10,40,50,.9);}
.bg-castle:before {background: rgba(0,0,0,.8);}
.panel--background-image {
    background-repeat: no-repeat; background-position:center center; background-size: cover;
}
.panel--max-width {width: 100%;}

.animation {transition: 3s;position: relative;}
.fade {opacity: 0;}
.fade.visible{opacity: 1;}
.slide-top {top:30px;}
.slide-top.visible {top:0;}


.animation .line {width:0%; height: 2px; background: rgba(255,255,255,.6); position: absolute; left:10%; 
    transition: 2.5s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-delay: 0.5s;}
.animation .line-bottom {right:10%; left:auto;}
.animation.visible .line {width:40%; left:30%;}
.animation.visible .line-bottom {right:30%;left:auto;}


.animation h1 {color:white; text-align: center;
    font-weight: normal; margin:0; padding:0.8em 0 .9em; 
    transition: 3s cubic-bezier(0.215, 0.61, 0.355, 1);}
h1 span {font-size: .3em;margin-top:0;display:block;font-family: 'Raleway', sans-serif;}

.bg-1 {background-image: url(../img/back1.jpg);}
.bg-2 {background-image: url(../img/back2.jpg);}
.bg-3 {background-image: url(../img/back3.jpg);}
.bg-castle {background-image: url(../img/castle.jpg);}
.bg-church {background-image: url(../img/church.jpg);}
.bg-palace {background-image: url(../img/palace.jpg);}
.bg-opera {background-image: url(../img/opera.jpg);}

.position-center {text-align: center;}
.position-center p {text-align: center;}


.row {float:none; width: 100%; clear:both;}
.row:after{clear:both; display: table; content:"";}
.col-6 {width: 50%; box-sizing: border-box; float:left; padding: 5px 25px; text-align: left;}
.col-6:first-of-type {text-align: right;}
audio {width: 100%;}

.footer {padding: 3em 0;}
.footer h3 {font-size: 5em;}
.footer p {font-size: 1.5em;}

#player {position: fixed; z-index: 9; bottom:30px;right:40px; transition: .5s; transition-delay: 3.5s;}
#player .center, #player #load-contener, #player .prev, #player .next, #player .time {display:none;}
#player .play, #player .pause {width: 25px; height:25px; background: transparent center center no-repeat; 
     border:0; display: inline-block; background-size:contain; }
#player .play {background-image: url(../img/no-sound.png);}
#player .pause {background-image: url(../img/sound.png);}

#player .text {line-height: 25px; font-family: 'Playfair Display', serif; vertical-align: top;
    font-size: 14px;display:inline-block; margin-right: 10px;}

body .down {cursor: pointer; display: block; position: fixed;bottom:20px; left:30px; 
    width: 30px; height: 38px; background: url(../img/scroll.png) no-repeat; border:0;
    transition: 2s; background-position: 0 0; opacity: 0; transition-delay: 2.5s;}
.down.visible {bottom:10px;opacity: 0.6; animation: down 2s infinite;}
.down:hover {background-position: 0 8px;}

@keyframes down {
  0% {
    bottom:20px;
  }
  50% {
    bottom:30px;
  }
  100% {
    bottom:20px;
  }
}

@media screen and (min-width:1024px) {
    .panel {height:100%; overflow: hidden;}
    .panel__inner {position: absolute; top:50%; left:50%; transform: translate(-50%,-50%);}
    .panel--background-image {
        background-attachment: fixed;
    }
    .content {width:500px; max-width: 100%;}
    .content--wide {width:900px; max-width: 100%;}
    .position-right {margin-left: 550px; }
    .position-left {margin-right: 550px; text-align: right;}
    .position-left p{text-align: right;}
    .slide-left {left:50px;}
    .slide-left.visible {left:0;}
    .slide-right {right:50px;}
    .slide-right.visible {right:0;}
}

@media screen and (max-width:1023px) {
    body {font-size: 12px;}
    h1 {font-size: 3em;}
    h2 {font-size: 3em; }
    .panel {padding: 75px 0;}
    .bg-1 {padding: 150px 0;}
    .panel--background-image {
        background-position:top center;
    }
    .position-right {padding:0 20px; box-sizing: border-box;}
    .col-6 {width: 100%; }
    .col-6:first-of-type {text-align: left;}
}