/*
###########################################################################
Main styles for jerichocases.de 2023

FileName:   loading.css
Author:		Barbara Völk, www.grafik-webdesign.info
Version:    2023.03.02
###########################################################################
*/


/***********************************************/
/* COLOURS */

/*
logo
yellow #F1B700
white #FFFFFF
black #1D252A

Colours:
yellow1 #F1B700
yellow lighter #FFCF40
black #1D252A -> rgba(29,37,42,1)
blue #303084
red #CC0000


black #000000 -> rgba(222,225,225,1)

Text:
logo grey #4c565c
black #0E0E10;

*/



/*
Type Druck: Helvetica Neue
font-family: 'NotoSans", sans-serif;

Type Druck: Rotis Semi Sans
font-family: 'RobotoCondensed", sans-serif;

Menue
font-family: 'Titillium_Web", sans-serif;


/***********************************************/

 .header,
        #topNav,
        /*.logoTop,*/
        #logo {
            animation: fadein 3s ease-out;
        }

        @keyframes loaderAnim {
            to {
                transform: translate3d(0, -100px, 0);
            }
        }


        @keyframes fadein {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        /* Safari, Chrome and Opera > 12.1 */
        @-webkit-keyframes fadein {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }


/***********************************************/
/* Page Loader */
/***********************************************/


/* Page Loader */
.js .loading::before {
	content: '';
	position: fixed;
	z-index: 100; z-index: 999!important;
	top: 0;
	left: 0;
	display: flex;
	width: 100%;
	height: 100%;
	text-align: center;
	background: #1D252A; /* bg-black 1D252A blue #303084 red #CC0000 */
}

.js .loading::after {
	content: '';
	position: fixed;
	z-index: 10000!important;
	top: 50%;
	left: 50%;
	width: 50px;/* width: 30vw;*/
	height: 50px; /*height: 200px;*/
	margin: -25px 0 0 -25px;
	pointer-events: none;
	background: #fff;background: #CC0000;
   /* background: url(../images/logo.png) no-repeat left top;
    background-size: 20vw auto;*/
/*	animation: loaderAnim 0.8s ease-out infinite alternate forwards;*/
    animation: loaderAnim 0.8s ease-out infinite alternate forwards;
}


@keyframes loaderAnim {
	to {
		transform: translate3d(0,-100px,0);
	}
}


@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
        /* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* Content */
.content {
	/*position: relative;*/
   /* display: grid; display: flex;
	min-height: 300px;
	overflow-x: hidden;*/
}


body.noTouch .intro {
    display: flex;
    height:80vh;
    align-content: flex-end; align-content: flex-start;
   /* position: absolute;*/
}



/*h1.home-title div > div {
    border-bottom: red 1px solid;
    margin-top: 0vh;
}

h1.home-title div + div {
    border-bottom: blue 1px solid;
    margin-top: -3vh;
}*/
.home-title {
    text-align: left;
}


body.noTouch h1.home-title #h1.i {
    /*border-bottom: yellow 1px solid;
    background: lightblue;*/
    line-height: 0;
}

/*.content__image {
	width: 100%;
	display: block;
}*/

/*.triggers {
	border: 2px solid;
	padding: 3em;
	margin: 0 5vw;
	width: 40vw;
}*/


 @media only screen and (max-width:768px) /*and (orientation:portrait)*/ {
body.noTouch h1.home-title #h1.i {
    /*background: lightyellow;
    line-height: 0;
    line-height: 5rem; line-height: 6rem;*/
    /*text-align: right;*/
}
}

 @media only screen and (max-width:667px) and (orientation:portrait) {
     
body.touch h1.home-title #h1.i {
    /*border-bottom: yellow 1px solid;*/
   /* background: lightblue;*/
    line-height: 5rem;
    /*font-size: 10rem;*/
}
 body.noTouch h1.home-title #h1.i {
    /*background: lightyellow;
    line-height: 0;
    line-height: 5rem; line-height: 6rem;*/
    /*text-align: right;*/
     line-height: 5rem;
}
    
}

 @media only screen and (max-width:667px) and (orientation:landscape) {
     

/*h1.home-title {
    background: lightyellow;
     line-height: 15rem;
}*/
    
}