@charset "UTF-8";
/* CI4DJ Parts - CSS Main */

body{
	font-family: '4DJ';
	font-weight:200;
	font-size:14px;
	color: rgb(255,255,255);
	margin:0;
	background-color: rgb(33,33,33);
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	overflow-x: hidden;
	overflow-y: scroll;
}

h1{padding: 0; margin: 0; font-family: '4DJ'; font-weight: 300; font-size: 50px; text-transform: uppercase;}
h2{padding: 0; margin: 0; font-family: '4DJ'; font-weight: 300; font-size: 35px; text-transform: uppercase;}
h3{padding: 0; margin: 0; font-family: '4DJ'; font-weight: 300; font-size: 22px; text-transform: uppercase;}
h4{padding: 0; margin: 0; font-family: '4DJ'; font-weight: 300; font-size: 18px; text-transform: uppercase;}
h5{padding: 0; margin: 0; font-family: '4DJ'; font-weight: 300; font-size: 14px; text-transform: uppercase;}
h6{padding: 0; margin: 0; font-family: '4DJ'; font-weight: 300; font-size: 12px; text-transform: uppercase;}
p{padding: 0; margin: 0; font-family: 'Open Sans', sans-serif; font-weight: 600;}

#loading {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgb(8,16,16);
    /*background-image: url('../images/loader.gif');*/
    background-repeat: no-repeat;
    background-size: 10%;
    background-position: center;
    z-index:999999;
}

#loading.hide{
    display: none;
}

@media only screen and (max-width : 767px) {
  .same-height {
    height: auto !important;
  } 
}

.push-top{
	position: relative;
	display: block;
	width: 100vw;
	height: 190px;
	background-color: rgba(0,0,0,0);
	opacity: 0;
}

.wpcc-color-custom-945973764.wpcc-container{
	box-shadow: 0 4px 12px rgba(0,0,0,0);
	backdrop-filter: blur(10px);
	background-color: rgba(33,33,33,0.7) !important;
	border: 1px solid rgb(139,139,139) !important;
}

.wpcc-float .wpcc-message {
	position: relative;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	display: block;
}

.wpcc-float .wpcc-message p{
	position: relative;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	display: block;
}


.wpcc-privacy {
	position: relative;
	margin-top: 10px;
	display: block;
}

.wpcc-float .wpcc-compliance .wpcc-btn {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: 40px !important;
	line-height: 28px !important;
	background-color: rgba(206,7,50,1) !important;
	color: rgb(255,255,255) !important;
	border: 1px solid rgba(206,7,50,1) !important;
	font-weight: 300 !important;
	font-size: 14px !important;
	text-align: center !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	transition: all .2s ease !important;
}

.wpcc-float .wpcc-compliance .wpcc-btn:hover {
	background-color: rgba(206,7,50,0) !important;
}

.header{
	position: fixed;
	display: block;
	width: calc(100vw - 120px);
	height: 90px;
	top: 50px;
	left: 60px;
	border: 1px solid rgb(139,139,139);
	background-color: rgba(33,33,33,0.7);
	backdrop-filter: blur(10px);
	z-index: 888;
}

.header .logo{
	position: relative;
	display: inline-block;
	width: auto;
	height: 100%;
	padding: 20px 60px 20px 60px;
	border-right: 1px solid rgb(139,139,139);
}

.header .logo .img{
	position: relative;
	display: block;
	width: 252px;
	height: calc(90px - 40px);
}

.header .logo .img svg{
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.header .navigate{
	position: absolute;
	display: block;
	width: auto;
	height: 100%;
	padding: 20px 60px 20px 60px;
	top: 0;
	right: 0;
	/*border-left: 1px solid rgb(139,139,139);*/
}

.header .navigate .con{
	position: relative;
	display: block;
	width: auto;
	height: calc(108px - 60px);
	padding: 0 95px 0 0;
}

.header .navigate .con .menu{
	position: relative;
	display: block;
	width: auto;
	height: 100%;
}

.header .navigate .con .menu ul{
	position: relative;
	display: block;
	width: auto;
	height: 100%;
	padding: 0;
	margin: 0;
}

.header .navigate .con .menu ul li{
	position: relative;
	display: inline-block;
	width: auto;
	height: 100%;
	padding: 0 15px 0 0;
	float: left;
	margin: 0;
}

.header .navigate .con .menu ul li a{
	position: relative;
	display: block;
	width: auto;
	height: 100%;
	line-height: 48px;
	font-size: 14px;
	font-weight: 300;
	text-decoration: none;
	text-transform: uppercase;
	padding: 0 0 0 45px;
	margin: 0;
	color: rgb(206,7,50);
	transition: all .2s ease;
}

.header .navigate .con .menu ul li a.subex{
	padding: 0 15px 0 45px;
}

.header .navigate .con .menu ul li a:hover{
	color: rgb(255,255,255);
}

.header .navigate .con .menu ul li a .icon{
	position: absolute;
	display: block;
	width: 30px;
	height: 30px;
	top: 50%;
	left: 0;
	transform: translate(0, -50%);
}

.header .navigate .con .menu ul li a .icon svg{
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.header .navigate .con .menu ul li a .icon svg path{
	fill: rgb(139,139,139);
	transition: all .2s ease;
}

.header .navigate .con .menu ul li a:hover .icon svg path{
	fill: rgb(255,255,255);
}

.header .navigate .con .menu ul li a .down{
	position: absolute;
	display: block;
	width: 7px;
	height: 6px;
	top: calc(50% + 2px);
	right: 0;
	transform: translate(0, -50%);
}

.header .navigate .con .menu ul li a .down svg{
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.header .navigate .con .menu ul li a .down svg path{
	fill: rgb(139,139,139);
	transition: all .2s ease;
}

.header .navigate .con .menu ul li a:hover .down svg path{
	fill: rgb(255,255,255);
}

.m-toggle{
	position: fixed;
	display: block;
	width: 45px;
	height: 27px;
	right: 120px;
	top: 95px;
	transform: translate(0, -50%);
	z-index: 998;
}

.m-toggle:hover{
	cursor: pointer;
}

.m-toggle .bar-one{
	position: absolute;
	display: block;
	width: 28px;
	height: 3px;
	top: 0;
	right: 0;
	border-radius: 200px;
	background-color: rgb(206,7,50);
}

.m-toggle:hover .bar-one{
	cursor: pointer;
	animation-name: bar1;
  	animation-duration: 1s;
}

.m-toggle.active .bar-one{
	width: 45px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
	transition: top .4s, transform .4s .4s, background .4s .4s;
	background-color: rgb(255,255,255);
}

.m-toggle.active .bar-one{
	cursor: pointer;
	animation-name: none;
  	animation-duration: 0;
}

@-webkit-keyframes bar1 {
  	0% {width: 28px;}
  	50% {width: 45px;}
	100% {width: 28px;}
}

.m-toggle .bar-two{
	position: absolute;
	display: block;
	width: 45px;
	height: 3px;
	top: 50%;
	right: 0;
	transform: translate(0, -50%);
	border-radius: 200px;
	background-color: rgb(206,7,50);
}

.m-toggle:hover .bar-two{
	cursor: pointer;
	animation-name: bar2;
  	animation-duration: 1s;
}

.m-toggle.active .bar-two{
	opacity: 0;
	transition: opacity .4s;
}

.m-toggle.active .bar-two{
	cursor: pointer;
	animation-name: none;
  	animation-duration: 0;
}

@-webkit-keyframes bar2 {
  	0% {width: 45px;}
  	50% {width: 28px;}
	100% {width: 45px;}
}

.m-toggle .bar-three{
	position: absolute;
	display: block;
	width: 36px;
	height: 3px;
	top: calc(100% - 3px);
	right: 0;
	border-radius: 200px;
	background-color: rgb(206,7,50);	
}

.m-toggle:hover .bar-three{
	cursor: pointer;
	animation-name: bar3;
  	animation-duration: 1s;
}

.m-toggle.active .bar-three{
	width: 45px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
	transition: top .4s, transform .4s .4s, background .4s .4s;
	background-color: rgb(255,255,255);	
}

.m-toggle.active .bar-three{
	cursor: pointer;
	animation-name: none;
  	animation-duration: 0;
}

.burger-menu{
	position: fixed;
	display: block;
	overflow: hidden;
	width: 0;
	height: 100vh;
	top: 0;
	right: 0;
	transition: all .5s ease;
	z-index: 996;
}

.burger-menu.opened{
	width: 100vw;
}

.burger-menu .bm-background{
	position: absolute;
	display: block;
	width: 100vw;
	height: 100vh;
	top: 0;
	right: 0;
	background-image: url(../images/dj-gray-b-menu.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom;
	z-index: 996;
}

.burger-menu ul{
	position: absolute;
	display: block;
	width: auto;
	height: auto;
	top: 180px;
	right: 240px;
	z-index: 997;
	margin: 0;
	padding: 0;
}

.burger-menu ul li{
	position: relative;
	display: block;
	text-align: right;
	margin: 0 0 15px 0;
}

.burger-menu ul li a{
	position: relative;
	display: block;
	font-size: 22px;
	font-weight: 300;
	color: rgb(206,7,50);
	text-decoration: none;
	transition: all .2s ease;
}

.burger-menu ul li a:hover{
	color: rgb(255,255,255);
}

@-webkit-keyframes bar3 {
  	0% {width: 36px;}
  	50% {width: 45px;}
	100% {width: 36px;}
}

.footer{
	position: relative;
	display: block;
	width: 100vw;
	height: auto;
	padding: 80px 130px 50px 130px;
	background-color: rgb(33,33,33);
	z-index: 556;
}

.footer .main{
	position: relative;
	display: block;
	width: 100%;
	height: auto;
}

.footer .main .logo{
	position: relative;
	display: block;
	width: auto;
	height: 45px;
	margin: 0 0 60px 0;
}

.footer .main .logo svg{
	position: relative;
	display: block;
	width: auto;
	height: 100%;
}

.footer .main .links{
	position: relative;
	display: block;
	width: auto;
	height: auto;
	margin: 0 0 30px 0;
}

.footer .main .links ul{
	position: relative;
	display: block;
	width: auto;
	height: auto;
	padding: 0;
	margin: 0;
}

.footer .main .links ul li{
	position: relative;
	display: inline-block;
	width: auto;
	height: auto;
	margin: 0 15px 0 0;
}

.footer .main .links ul li a{
	position: relative;
	display: block;
	width: auto;
	height: auto;
	font-size: 12px;
	font-weight: 300;
	text-transform: uppercase;
	text-decoration: none;
	color: rgb(139,139,139);
	padding: 0 15px 0 0;
	border-right: 1px solid rgb(139,139,139);
	transition: all .2s ease;
}

.footer .main .links ul li:last-child a{
	border-right: none;
}

.footer .main .links ul li a:hover{
	color: rgb(255,255,255);
}

.footer .main .social-icons{
	position: absolute;
	display: block;
	width: auto;
	height: 50px;
	bottom: 0;
	right: 0;
}

.footer .main .social-icons ul{
	position: relative;
	display: block;
	width: auto;
	height: 50px;
	padding: 0;
	margin: 0;
}

.footer .main .social-icons ul li{
	position: relative;
	display: inline-block;
	width: 50px;
	height: 50px;
	margin: 0 15px 0 0;
}

.footer .main .social-icons ul li a{
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.footer .main .social-icons ul li a img{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.footer .main .social-icons ul li a img#facebook{
	transform: rotate(180deg);
	animation: animfacebook 4s infinite linear;
}

@keyframes animfacebook {
  	from {transform: rotate(180deg);}
	to {transform: rotate(539deg);}
}

.footer .main .social-icons ul li a img#instagram{
	transform: rotate(0deg);
	animation: animinstagram 4s infinite linear;
}

@keyframes animinstagram {
  	from {transform: rotate(0deg);}
	to {transform: rotate(359deg);}
}

.footer .main .social-icons ul li a img#youtube{
	transform: rotate(-90deg);
	animation: animyoutube 4s infinite linear;
}

@keyframes animyoutube {
  	from {transform: rotate(-90deg);}
	to {transform: rotate(269deg);}
}

.footer .main .social-icons ul li a svg{
	position: absolute;
	display: block;
	width: 20px;
	height: 20px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#cookie-law{
	position: fixed;
	display: block;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.7);
	z-index: 999999;
	opacity: 1;
	transition: all 0.4s ease;
}

#cookie-law .cookie-info-box{
	position: absolute;
	display: block;
	width: 20vw;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgb(255,255,255);
	padding: 30px 30px 0 30px;
	text-align: center;
	z-index: 999999;
}

#cookie-law .cookie-info-box p{
	text-align: center;
	color: rgb(0,0,0);
}

#cookie-law .cookie-info-box a.cookie-info-button{
	position: relative;
	display: inline-block;
	width: auto;
	height: auto;
	font-size: 16px;
	text-transform: uppercase;
	text-decoration: none;
	background-color: rgb(0,0,0);
	color: rgb(255,255,255);
	padding: 10px 30px;
	cursor: pointer;
	margin: 30px 15px;
}