#spin {
  font-size:75px !important;
  -webkit-text-stroke: 1px #AC9121;
  -webkit-text-fill-color: transparent;
}

#spin:after {
  content:"";
  animation: spin 2.3s linear infinite;
}

@keyframes spin {
  0% { content: "DDH NE IPA"; }
  25% { content: "DH PALE ALE";}
  50% { content:"LAGER"; }
  75% { content:"STOUT"; }
  100% { content:"WEISS"; }
}
.fade-out {
	-webkit-animation: fade-out 1s ease-out 1.9s both;
	        animation: fade-out 1s ease-out 1.9s both;
}
.slide-out-top {
	-webkit-animation: slide-out-top 1.1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 2.1s both;
	        animation: slide-out-top 1.1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 2.1s both;
}

@-webkit-keyframes slide-out-top {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-2000px);
            transform: translateY(-2000px);
    opacity: 1;
  }
}
@keyframes slide-out-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-2000px);
            transform: translateY(-2000px);
    opacity: 1;
  }
}
@-webkit-keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.hidden {
    opacity: 0;
}
#loader h2{
	position:absolute;
	top:46% !important;
	left:5% !important;
	font-size:75px !important;
	color:#AC9121 !important;
}

#loader {
    position: fixed;
    width: 100%;
    height: 100%;
    background: url(/wp-content/uploads/2023/05/bg-e2.png);
	background-position:top right !important;
	background-color:#272728 !important;
	background-size:cover;
    top: 0px;
    left: 0px !important;
	z-index:99999999999 !important;
}

.preloader {
    border-radius: 0px;
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 0px;
    left: calc(50% - 20px);
    top: calc(50% - 20px);
    background: #fff;
    transform: rotate(45deg);
    animation: preloader 2s linear infinite;
}

.loadBar {
    position: absolute;
    width: 90%;
    height: 3px;
    border-radius: 0px;
    left: 5%;
    bottom: 43%;
    background: #ffffff1f;
	margin-left:auto !important;
	margin-right:auto !important;
}

.progress {
    position: relative;
    width: 0%;
    height: inherit;
    border-radius: 0px;
    background: #f1d6b4;
   background: linear-gradient(135deg,#AC9121 0%,rgb(170 136 60 / 90%) 15%,rgb(207 169 114 / 82%) 35%,rgb(230 184 80 / 55%) 50%,rgb(207 169 114 / 82%) 70%,rgb(170 136 60 / 90%) 85%, #AC9121 100%) !important;
}

@keyframes loading {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

@keyframes preloader {
    0%,
    100% {
        transform: rotate(45deg);
    }
    60% {
        transform: rotate(405deg);
    }
}
@media only screen and (max-width: 1700px) {
	#loader h2{
		top:47% !important;
	}
}
@media only screen and (max-width: 1650px) {
	#loader h2{
		font-size:65px !important;
	}
	#spin {
    	font-size:65px !important;
	}
}
@media only screen and (max-width: 1600px) {
    #spin {
    	font-size:60px !important;
	}
	#loader h2{
		top:48% !important;
		font-size:60px !important;
	}
}
@media only screen and (max-width: 1500px) {
    #spin {
    	font-size:55px !important;
	}
	#loader h2{
		top:48% !important;
		font-size:55px !important;
	}
}
@media only screen and (max-width: 1450px) {
	#loader h2{
		top:48% !important;
		font-size:50px !important;
	}
	#spin {
    	font-size:50px !important;
	}
}
@media only screen and (max-width: 1400px) {
    #spin {
    	font-size:45px !important;
	}
	#loader h2{
		top:48% !important;
		font-size:45px !important;
	}
}
@media only screen and (max-width: 1200px) {
    #spin {
    	font-size:40px !important;
	}
	#loader h2{
		top:50% !important;
		font-size:40px !important;
	}
}
@media only screen and (max-width: 1000px) {
    #spin {
    	font-size:35px !important;
	}
	#loader h2{
		font-size:35px !important;
	}
}

@media only screen and (max-width: 992px) {
	#loader h2{
		margin-bottom:0px !important;
	}
	#loader {
		background-position:center center !important;
	}
}
@media only screen and (max-width: 800px) {
    #spin {
    	font-size:20px !important;
	}
	#loader h2{
		font-size:20px !important;
		top:51% !important;
	}
}



@media only screen and (max-width: 450px) {
	#spin {
    	font-size:18px !important;
	}
	#loader h2{
		font-size:18px !important;
		top:50% !important;
	}
	.loadBar{
		bottom:47% !important;
	}
}
@media only screen and (max-width: 400px) {
	#spin {
    	font-size:16px !important;
	}
	#loader h2{
		font-size:16px !important;
		top:49% !important;
	}
	.loadBar{
		bottom:47% !important;
	}
}
@media only screen and (max-width: 370px) {
	#spin {
    	font-size:15px !important;
	}
	#loader h2{
		font-size:15px !important;
	}
}
@media only screen and (max-width: 330px) {
	#spin {
    	font-size:14px !important;
	}
	#loader h2{
		font-size:14px !important;
	}
}
@media only screen 
and (max-device-width: 992px) 
and (orientation: landscape) { 
	#loader h2{
		top:40% !important;
	}
}