/*!
 * Additional Themeing by Akulatraxas.
 */

 html,
 body {
     width: 100%;
     height: 100vh;
     margin: 0;
 }
 
 body {
     font-family: 'Roboto', sans-serif;
     background-color:#cecece;
 }
 
 hr-alt {
     max-width: 50px;
     border-color: #f05f40;
     border-width: 3px;
 }
 
 hr {
     border: 0;
     height: 1px;
     background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
     }
 
 
 hr.light {
     border-color: #fff;
 }
 
 a {
     color: #f05f40;
     -webkit-transition: all .35s;
     -moz-transition: all .35s;
     transition: all .35s;
 }
 
 a:hover,
 a:focus {
     color: #eb3812;
 }
 
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: 'Roboto', sans-serif;
 }
 
 p {
    margin-bottom: 20px;
    font-size: 20px;
    /*font-size: 14px;*/
    line-height: 1.5;
    /*line-height: 1.4;*/
}

.stage_container {
    display: grid;
    height: 100%;
}

.loader {
    z-index: 100;
    background-color: #cecece;
    width: 100%;
    height: 100%;
}

.loader .loadertxt {
    padding: 15%;
    font-weight: 200; 
}

.loadertxt h1 {
    font-weight: 100;
}

.stage {
    width: 80vw;
    height: 65vh;
    height: calc(80vw/2.25);
    box-shadow: 4px 3px 3px 1px rgba(0, 0, 0, 0.3);
    border: 1px solid black;
    margin: auto auto;
    overflow: hidden;
}

.parallax, .layer {
    display: block;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

.parallax {
    overflow: hidden;
    position: relative;
    min-height: 460px;
}

.p_background {
    background: url('img/perch_background_50.jpg') no-repeat 50% 100%;
    background-size: cover;
    width: 110%;
    left: -5%;
    top: -5%;
    bottom: -1vh;
    position:absolute; 
}

.p_clouds_bg {
    background: url('img/perch_clouds_background_50.png') no-repeat 10% 100%;
    background-size: 60%;
    width: 110%;
    left: -5%;
    bottom: -6%;
    position:absolute;
    width: 150%;
    height: 160%; 
    background-repeat: repeat-x;
    animation: 200s para infinite linear;
}

.p_dragon {
    background: url('img/perch_character_50.png') no-repeat 10% 100%;
    background-size: 60%;
    position: absolute; 
    width: 100%;
    height: 110%;
    bottom: -2%;
}

.p_clouds_fg {
    background: url('img/perch_clouds_foreground_50_endless_200.png') no-repeat 20% 100%;
    
    left: -15%;
    bottom: -6%;
    position:absolute;
    width: 150%;
    height: 160%; 
    background-repeat: repeat-x;
    animation: 70s para_fg infinite linear;
}

.p_lightning {
    background: url('img/perch_lightning.png') no-repeat;
    width: 100%;
    height: 100%;
    background-position: 15% 10%;
    position:absolute;
    mix-blend-mode: multiply;
    opacity: 0.3;
    animation: lightning 7s 1s infinite;
    animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
}

.p_water {
    position:absolute;
    width: 15%;
    height: 1%;
    bottom: 5%;
    right: 17%;
    transform: rotate(-8deg);
    animation: sparcles 7s 0s infinite;
}

.p_water .sparkley {
    width: 100%;
    height: 100%;
}

.icons {
    position:absolute;
    bottom:0%;
    right:0%;
    width: 20%;
    height: 50px;
    overflow: hidden;
}

.icons ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

.icons ul li {
    float: right;
}

.icons ul li img {
    max-height: 50px;
    width: auto;
}

@media only screen and (min-width: 300px) and  (max-width:799px) {
    body {
        margin: 0 0;
    }
    .stage {
        width: 100vw;
        height: 100vh;
        margin: 0 0;
        overflow: hidden;
    }

    .p_background {
        background-size: cover;
        background-position: 30%;
        position:absolute; 
    }

    .p_clouds_bg {
        background-size: 60%;
        background-size: cover;
        width: 110%;
        left: -5%;
        bottom: -6%;
        background-repeat: repeat-x;
        animation: 160s para infinite linear;
    }


    .p_dragon {
        background-size: cover;
        background-position: bottom;
        height: 105%;
        width: 100%;
        bottom: -2%;
        left: 0;
    }

    .p_clouds_fg {
        background-size: cover;
        background-position: 130%;
        height: 78%;
        left: -9%;
        top: 10%;
        background-repeat: repeat-x;
        animation: 70s para infinite linear;
    }

    .p_lightning {
        background-position: 80% 10%;
    }
}

@media (min-width: 799px) and  (orientation: portrait) {
    body {

        
    }
    .stage {
        height: 80vh;
        /*height: calc(80vw/2.25);*/
        width: calc(80vh*0.697);
        box-shadow: 4px 3px 3px 1px rgba(0, 0, 0, 0.3);
        border: 1px solid black;
        margin: auto auto;
        overflow: hidden;
    }

    .p_background {
        background-size: cover;
        background-position: 30%;
        position:absolute; 
    }

    .p_clouds_bg {
        background-size: 60%;
        background-size: cover;
        width: 110%;
        left: -5%;
        bottom: -6%;
        background-repeat: repeat-x;
        animation: 160s para infinite linear;
    }

    .p_dragon {
        background-size: cover;
        background-position: bottom;
        height: 105%;
        width: 100%;
        bottom: -2%;
        left: 0;
    }

    .p_clouds_fg {
        background-size: cover;
        background-position: 130%;
        height: 78%;
        left: -9%;
        top: 10%;
        background-repeat: repeat-x;
        animation: 70s para infinite linear;
    }

    .p_lightning {
        background-position: 40% 5%;
    }

    .p_water {
        position:absolute;
        width: 15%;
        height: 1%;
        bottom: 25%;
        right: 5%;
        transform: rotate(15deg);
        animation: sparcles 7s 0s infinite;
    }

}

@keyframes para {
    0% {
		background-position: 
			0px 100%;
		}
    50% {
		background-position: 
			-2500px 100%;
		}
	100% {
		background-position: 
			-5000px 100%;
		}
}

@keyframes para_fg {
    0% {
		background-position: 
			-150% 100%;
		}
    50% {
		background-position: 
			0% 100%;
		}
	100% {
		background-position: 
			140% 100%;
		}
	}

    .line {
        position: absolute;
        width: 1px;
        height: 100%;
        top: 0;
        left: 15%;
        background: rgba(255, 255, 255, 0.0);
        overflow: hidden;
        }
    
    .line:nth-child(1)::after {
        animation-delay: 1s;
        animation-timing-function: cubic-bezier(0.1, 0.5, 0, 0.97);
    }
    
    .line:nth-child(2) {margin-left: 15%;}
    .line:nth-child(2)::after {
        animation-delay: 2s;
        animation-timing-function: cubic-bezier(0.1, 0.26, 0, 0.97);
    }
    
    .line:nth-child(3) {margin-left: 20%;}
    .line:nth-child(3)::after {
        animation-timing-function: cubic-bezier(0.8, 0.26, 0, 0.47);
    }
    .line:nth-child(4) {margin-left: 24%;}
    .line:nth-child(4)::after {
        animation-delay: 3s;
    }
    
    .line::after {
        content: "";
        display: block;
        position: absolute;
        height: 15vh;
        width: 100%;
        top: -50%;
        left: 0;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #ffffff 100%);
        animation: drop 7s 0s infinite;
        animation-fill-mode: forwards;
        animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
    }

@keyframes drop {
    0% {
        top: -50%;
    }
    100% {
        top: 110%;
    }
}

@keyframes lightning {
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 0.3;
    }
}

@keyframes sparcles {
    0% {
        opacity: 0.1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 0.1;
    }
}