/**================================
====================================

              RESPONSIVE

====================================
====================================**/

@media(min-width: 320px) and (max-width: 479px){

.row{
	margin: 0;
	padding: 0;
}
#intro.parallax-window{
	height: 100vh;
}
.bg-intro{
	background: url(../images/backgrounds/mobile-bg.jpg) !important;
}
nav.nav-center ul.navbar-nav li a {
    color: #fff;
    padding: 16px 18px;
}
.navbar-brand {
    float: none;
}
.navbar-brand img{
	margin: auto;
}
.moduletable {
    display: flex;
    justify-content: center;
}
.navbar-brand h3{
	display: none;
}
#intro ul.element-scroll-parallax li:nth-child(1) img{
	width: 100%;
}
.moduleItemImage img{
	height: auto;
}
.modal-content img, .modal-content iframe{
	height: auto;
}
.modal-content {
    padding: 10px;
}

}

@media(min-width: 480px) and (max-width: 767px){

.row{
	margin: 0;
	padding: 0;
}
#intro.parallax-window{
	height: 100vh;
}
.bg-intro{
	background: url(../images/backgrounds/mobile-bg.jpg) !important;
}
nav.nav-center ul.navbar-nav li a {
    color: #fff;
    padding: 4px 18px;
}
.navbar-brand {
    float: none;
    padding: 0;
}
.navbar-brand img{
	margin: auto;
}
.moduletable {
    display: flex;
    justify-content: center;
}
.navbar-brand h3{
	display: none;
}
#intro ul.element-scroll-parallax li:nth-child(1) img{
	width: 100%;
}
.item img{
	width: 100%;
}
.moduleItemImage img{
	height: auto;
}
.modal-content img, .modal-content iframe{
	object-fit: cover;
	height: 300px;
}
.modal-content {
    padding: 10px;
}

}

@media(min-width: 768px) and (max-width: 991px){

.navbar-brand {
    float: none;
    padding: 0;
}
.navbar-brand img{
	margin: auto;
}
.moduletable{
	display: flex;
	justify-content: center;
}
#intro ul.element-scroll-parallax li:nth-child(1) img{
		width: 80%;
}
#tickets .headline h1::before{
	top: -18px;
    font-size: 90px;
}

.event-item{
	display: flex;
	justify-content: center;
}
.modal-content img, .modal-content iframe{
	object-fit: cover;
}

}
@media(min-width: 992px) and (max-width: 1200px){

#intro ul.element-scroll-parallax li:nth-child(1) img{
		width: 70%;
}
.modal-content img, .modal-content iframe{
	object-fit: cover;
}

}
/**=============== 1080p =======================**/
@media(min-width: 1920px) and (max-width: 2559px){

	h1{
		font-size: 10rem;
		margin-bottom: 12rem;
	}
	.container {
    	width: 1600px;
	}
	.wrapper {
    	padding-top: 200px;
	    padding-bottom: 200px;
	}
	.navbar-brand img{
		width: 250px;
	}
	nav.nav-center ul.navbar-nav li a {
   		color: #fff;
    	padding: 50px 25px;
    	font-size: 23px;
	}
	.navbar-brand h3{
		font-size: 50px;
		margin-top: 30px;
	}
	#intro.parallax-window{
		height: 100vh;
	}
	.my-info h1.my-name{
		font-size: 150px;	
	}
	.white{
		font-size: 50px;
	}
	#about ul.element-scroll-parallax li:nth-child(1){
		bottom: 57%;
		right: 50%;
	}
	#about ul.element-scroll-parallax li:nth-child(2){
		bottom: 57%;
		right: 45%;
	}
	#about ul.element-scroll-parallax li:nth-child(3){
		bottom: 57%;
		right: 40%;
	}
	#about ul.element-scroll-parallax li:nth-child(4){
		bottom: 57%;
		right: 20%;
	}
	#about{
		min-height: 1300px;
	}
	#about .headline h1::before{
		font-size: 200px;
	}
	.my-photo .img-wrapper{
		margin-top: -226px;
	}
	.about-me img.my-band{
		top: 600px;
	}
	.about-me p{
		font-size: 25px;
    	line-height: 1.5;
	}
	ul.social-links li{
		height: 60px;
    	width: 60px;
    	margin: 15px;
	}
	ul.social-links li::before{
		height: 60px;
    	width: 60px;
	}
	ul.social-links li a {
    	color: #fff;
    	font-size: 25px;
    	line-height: 60px;
	}
	.my-photo .img-wrapper img{
		max-width: 460px;
	}
	#store .headline h1::before{
		font-size: 200px;
	}
	.products .item img:nth-child(1) {
    	height: 320px;
	}
	.products .item .overlay img{
		height: auto;
	}
	.modal-lg {
    	width: 1300px;
	}
	.btn-secondary{
		padding: 20px 60px;
		font-size: 30px;
		margin-top: 6rem;
	}
	#tickets .headline h1::before{
		font-size: 200px;
	}
	.events .event-item .date{
		padding: 45px 20px;
		font-size: 25px;
	}
	.events .event-item .date::after{
		border-bottom: 20px solid transparent;
    	border-color: transparent transparent transparent rgba(247, 148, 30, 0.7);
    	border-left: 20px solid rgba(247, 148, 30, 0.7);
    	border-top: 20px solid transparent;
    	right: -23px;
    	top: 55px;
	}
	.events .event-item .event-description .event-info h4{
		font-size: 40px;
	}
	.events .event-item .event-description .event-info p{
		font-size: 25px;
	}
	.events .event-item .event-description .event-info {
    	padding: 23px 30px;
	}
	#blog .headline h1::before{
		font-size: 200px;
	}
	article.blog-post .short-info{
		padding: 25px;	
	}
	article.blog-post .short-info h4{
		font-size: 35px;
	}
	article.blog-post .short-info p{
		font-size: 20px;
		line-height: 1.5;
	}
	#gallery .headline h1::before{
		font-size: 200px;
		top: -34px;
	}
	ul.gallery-list li img{
		height: 370px;
		object-fit: cover;
	}
	.form-control {
    	font-size: 22px;
    	height: 80px;
	}
	#contact .headline h1::before{
		top: -28px;
	}
	.contact-info .reach strong{
		font-size: 30px;
	}
	.reach {
    	margin-bottom: 4rem;
	}
	.reach p{
		margin-bottom: 4rem;
		font-size: 22px;
	}
	#footer ul.social-links li a {
    	font-size: 50px;
	}
	.copyright{
		font-size: 25px;
	}
	.moduleItemImage img{
		height: 750px;
	}
	.modal-content img, .modal-content iframe{
		height: 750px;
    	object-fit: cover;
	}
	.products .item img {
    	height: 350px;
	}

}
/**=============== 2.5k =======================**/
@media(min-width: 2560px) and (max-width: 2879px){

	h1{
		font-size: 15rem;
		margin-bottom: 13rem;
	}
	.container {
    	width: 2200px;
	}
	.wrapper {
    	padding-top: 250px;
	    padding-bottom: 250px;
	}
	nav.nav-center ul.navbar-nav li a {
   		color: #fff;
    	padding: 70px 30px;
    	font-size: 35px;
	}
	.navbar-brand img{
		width: 365px;
	}
	.navbar-brand h3{
		font-size: 80px;
		margin-top: 35px;
	}
	#intro.parallax-window{
		height: 100vh;
	}
	.my-info h1.my-name{
		font-size: 250px;	
	}
	.white{
		font-size: 80px;
	}
	#about ul.element-scroll-parallax li:nth-child(1){
		bottom: 75%;
		right: 60%;
	}
	#about ul.element-scroll-parallax li:nth-child(2){
		bottom: 75%;
		right: 50%;
	}
	#about ul.element-scroll-parallax li:nth-child(3){
		bottom: 75%;
		right: 40%;
	}
	#about ul.element-scroll-parallax li:nth-child(4){
		bottom: 75%;
		right: 20%;
	}
	#about{
		min-height: 1800px;
	}
	#about .headline h1::before{
		font-size: 250px;
	}
	.about-me img.my-band {
    	top: 720px;
    	width: 35%;
	}
	.about-me p{
		font-size: 35px;
    	line-height: 2;
	}
	ul.social-links li{
		height: 80px;
    	width: 80px;
    	margin: 15px;
	}
	ul.social-links li::before{
		height: 80px;
    	width: 80px;
	}
	ul.social-links li a {
    	color: #fff;
    	font-size: 35px;
    	line-height: 80px;
	}
	.my-photo .img-wrapper{
		margin-top: -298px;
	}
	.my-photo .img-wrapper img{
		max-width: 600px;
	}
	#store .headline h1::before{
		font-size: 250px;
	}
	.products .item img:nth-child(1) {
    	height: 420px;
	}
	.products .item .overlay img{
		height: auto;
	}
	.modal-lg {
    	width: 1800px;
	}
	.btn-secondary{
		padding: 30px 95px;
	    font-size: 35px;
	    margin-top: 10rem;
	}
	#tickets .headline h1::before{
		font-size: 250px;
	}
	.events .event-item .date span {
    	font-size: 70px;
	}
	.events .event-item .date{
		padding: 65px 20px;
    	font-size: 40px;
    	margin-top: 1rem;
	}
	.events .event-item .date::after{
		border-bottom: 30px solid transparent;
    	border-color: transparent transparent transparent rgba(247, 148, 30, 0.7);
    	border-left: 30px solid rgba(247, 148, 30, 0.7);
    	border-top: 30px solid transparent;
    	right: -32px;
    	top: 70px;
	}
	.events .event-item .event-description .event-info h4{
		font-size: 50px;
	}
	.events .event-item .event-description .event-info p{
		font-size: 35px;
	}
	.events .event-item .event-description .event-info {
    	padding: 35px 30px;
	}
	#blog .headline h1::before{
		font-size: 250px;
	}
	.img-article img{
		height: 1100px;
		object-fit: cover;
	}
	article.blog-post .short-info{
		padding: 35px;	
	}
	article.blog-post .short-info h4{
		font-size: 50px;
	}
	article.blog-post .short-info p{
		font-size: 30px;
		line-height: 1.5;
	}
	#gallery .headline h1::before{
		font-size: 250px;
	}
	ul.gallery-list li img{
		width: 100%;
    	height: 450px;
		object-fit: cover;
	}
	#contact .headline h1::before{
		font-size: 250px;
	}
	.form-group {
    	margin-bottom: 50px;
	}
	.form-control {
    	font-size: 25px;
    	height: 110px;
    	color: #fff;
	}
	.contact-info .reach strong{
		font-size: 50px;
	}
	.reach {
    	margin-bottom: 6rem;
	}
	.reach p{
		margin-top: 15px;
    	margin-bottom: 10rem;
    	font-size: 32px;
	}
	#footer ul.social-links li a {
    	font-size: 80px;
	}
	.copyright{
		font-size: 35px;
	}
	.modal-content img, .modal-content iframe {
    	height: 1100px;
    	object-fit: cover;
	}

}

/**=============== 3k / QHD =====================**/

@media(min-width: 2880px) and (max-width: 3839px){

	h1{
		font-size: 17rem;
		margin-bottom: 15rem;
	}
	.container {
    	width: 2500px;
	}
	.wrapper {
    	padding-top: 270px;
	    padding-bottom: 270px;
	}
	.navbar-brand img{
		width: 400px;
	}
	nav.nav-center ul.navbar-nav li a {
   		color: #fff;
    	padding: 80px 40px;
    	font-size: 40px;
	}
	.navbar-brand h3{
		font-size: 90px;
		margin-top: 40px;
	}
	#intro.parallax-window{
		height: 100vh;
	}
	.my-info h1.my-name{
		font-size: 250px;	
	}
	.white{
		font-size: 80px;
	}
	#about ul.element-scroll-parallax li:nth-child(1){
		bottom: 75%;
		right: 60%;
	}
	#about ul.element-scroll-parallax li:nth-child(2){
		bottom: 75%;
		right: 50%;
	}
	#about ul.element-scroll-parallax li:nth-child(3){
		bottom: 75%;
		right: 40%;
	}
	#about ul.element-scroll-parallax li:nth-child(4){
		bottom: 75%;
		right: 20%;
	}
	#about{
		min-height: 2000px;
	}
	#about .headline h1::before{
		font-size: 310px;
		top: -90px;
	}
	.about-me img.my-band {
    	top: 800px;
    	width: 35%;
	}
	.about-me p{
		font-size: 35px;
    	line-height: 2;
	}
	ul.social-links li{
		height: 80px;
    	width: 80px;
    	margin: 15px;
	}
	ul.social-links li::before{
		height: 80px;
    	width: 80px;
	}
	ul.social-links li a {
    	color: #fff;
    	font-size: 35px;
    	line-height: 80px;
	}
	.my-photo .img-wrapper{
		margin-top: -345px;
	}
	.my-photo .img-wrapper img{
		max-width: 700px;
	}
	#store .headline h1::before{
		font-size: 310px;
		top: -90px;
	}
	.products .item img:nth-child(1) {
    	height: 550px;
    	object-fit: cover;
	}
	.products .item .overlay img{
		height: auto;
	}
	.modal-lg {
    	width: 2200px;
	}
	.btn-secondary{
		padding: 30px 95px;
	    font-size: 35px;
	    margin-top: 10rem;
	}
	#tickets .headline h1::before{
		font-size: 310px;
		top: -90px;
	}
	.events .event-item .date span {
    	font-size: 80px;
	}
	.events .event-item .date{
		padding: 75px 30px;
    	font-size: 40px;
    	margin-top: 1rem;
	}
	.events .event-item .date::after{
		border-bottom: 30px solid transparent;
    	border-color: transparent transparent transparent rgba(247, 148, 30, 0.7);
    	border-left: 30px solid rgba(247, 148, 30, 0.7);
    	border-top: 30px solid transparent;
    	right: -32px;
    	top: 70px;
	}
	.events .event-item .event-description .event-info h4{
		font-size: 55px;
	}
	.events .event-item .event-description .event-info p{
		font-size: 40px;
	}
	.events .event-item .event-description .event-info {
    	padding: 60px 40px;
	}
	#blog .headline h1::before{
		font-size: 310px;
		top: -90px;
	}
	.img-article img{
		height: 1500px;
	}
	article.blog-post .short-info{
		padding: 40px;	
	}
	article.blog-post .short-info h4{
		font-size: 60px;
	}
	article.blog-post .short-info p{
		font-size: 35px;
		line-height: 1.5;
	}
	#gallery .headline h1::before{
		font-size: 310px;
		top: -90px;
	}
	ul.gallery-list li img{
		width: 100%;
    	height: 500px;
		object-fit: cover;
	}
	#contact .headline h1::before{
		font-size: 310px;
		top: -90px;
	}
	.form-group {
    	margin-bottom: 60px;
	}
	.form-control {
    	font-size: 30px;
    	height: 120px;
    	color: #fff;
	}
	.contact-info .reach strong{
		font-size: 60px;
	}
	.reach {
    	margin-bottom: 7rem;
	}
	.reach p{
		margin-top: 20px;
    	margin-bottom: 12rem;
    	font-size: 37px;
	}
	#footer ul.social-links li a {
    	font-size: 80px;
	}
	.modal-content img, .modal-content iframe {
    	height: 1400px;
    	object-fit: cover;
	}
	.copyright{
		font-size: 35px;
	}

}

/**================== 4k =====================**/

@media(min-width: 3840px){

	h1{
		font-size: 22rem;
		margin-bottom: 19rem;
	}
	.container {
    	width: 3200px;
	}
	.wrapper {
    	padding-top: 400px;
	    padding-bottom: 400px;
	}
	.navbar-brand img{
		width: 500px;
	}
	nav.nav-center ul.navbar-nav li a {
   		color: #fff;
    	padding: 100px 60px;
    	font-size: 50px;
	}
	.navbar-brand h3{
		font-size: 100px;
		margin-top: 40px;
	}
	#intro.parallax-window{
		height: 100vh;
	}
	.my-info h1.my-name{
		font-size: 350px;	
	}
	.white{
		font-size: 100px;
	}
	#about ul.element-scroll-parallax li:nth-child(1){
		bottom: 90%;
		right: 60%;
	}
	#about ul.element-scroll-parallax li:nth-child(2){
		bottom: 90%;
		right: 50%;
	}
	#about ul.element-scroll-parallax li:nth-child(3){
		bottom: 90%;
		right: 40%;
	}
	#about ul.element-scroll-parallax li:nth-child(4){
		bottom: 90%;
		right: 20%;
	}
	#about{
		min-height: 2700px;
	}
	#about .headline h1::before{
		font-size: 410px;
		top: -110px;
	}
	.about-me img.my-band {
    	top: 900px;
    	width: 35%;
	}
	.about-me p{
		font-size: 50px;
    	line-height: 2;
	}
	ul.social-links li{
		height: 150px;
    	width: 150px;
    	margin: 45px;
	}
	ul.social-links li::before{
		height: 150px;
    	width: 150px;
	}
	ul.social-links li a {
    	color: #fff;
    	font-size: 60px;
    	line-height: 150px;
	}
	.my-photo .img-wrapper{
		margin-top: -421px;
	}
	.my-photo .img-wrapper img{
		max-width: 1000px;
	}
	#store .headline h1::before{
		font-size: 410px;
		top: -110px;
	}
	.products .item img:nth-child(1) {
    	height: 550px;
	}
	.products .item .overlay img{
		height: auto;
	}
	.modal-lg {
    	width: 2700px;
	}
	.btn-secondary{
		padding: 55px 150px;
     	font-size: 50px;
    	margin-top: 15rem;
	}
	#tickets .headline h1::before{
		font-size: 410px;
		top: -110px;
	}
	.events .event-item .date span {
    	font-size: 80px;
	}
	.events .event-item .date{
		padding: 120px 31px;
    	font-size: 40px;
	}
	.events .event-item .date::after{
		border-bottom: 30px solid transparent;
    	border-color: transparent transparent transparent rgba(247, 148, 30, 0.7);
    	border-left: 30px solid rgba(247, 148, 30, 0.7);
    	border-top: 30px solid transparent;
    	right: -32px;
    	top: 70px;
	}
	.events .event-item .event-description .event-info h4{
		font-size: 80px;
	}
	.events .event-item .event-description .event-info p{
		font-size: 50px;
    	margin-top: 30px;
	}
	.events .event-item .event-description .event-info {
    	padding: 70px 50px;
	}
	#blog .headline h1::before{
		font-size: 410px;
		top: -110px;
	}
	.img-article img{
		width: 100%;
    	height: 1800px;
	}
	article.blog-post .short-info{
		padding: 40px;	
	}
	article.blog-post .short-info h4{
		font-size: 75px;
	}
	article.blog-post .short-info p{
		font-size: 45px;
		line-height: 1.5;
	}
	#gallery .headline h1::before{
		font-size: 410px;
		top: -110px;
	}
	ul.gallery-list li img{
		width: 100%;
    	height: 800px;
		object-fit: cover;
	}
	#contact .headline h1::before{
		font-size: 410px;
		top: -110px;
	}
	.form-group {
    	margin-bottom: 80px;
	}
	.form-control {
    	font-size: 50px;
    	height: 130px;
    	color: #fff;
	}
	.contact-info .reach strong{
		font-size: 70px;
	}
	.reach {
    	margin-bottom: 5rem;
	}
	.reach p{
		margin-top: 35px;
    	margin-bottom: 10rem;
    	font-size: 45px;
	}
	#footer ul.social-links li a {
    	font-size: 100px;
	}
	.modal-content img, .modal-content iframe {
    	height: 2000px;
    	object-fit: cover;
	}
	.copyright{
		font-size: 45px;
	}

}