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

.popup-banner {
	position: fixed;
	display: none;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.7);
	z-index: 999999;
}

.popup-banner.opened {
	display: block;
}

.popup-banner .close-pop {
	position: absolute;
	display: inline-block;
	width: auto;
	height: 30px;
	line-height: 30px;
	top: 0;
	right: 0;
	padding: 0 15px;
	background-color: rgb(206,7,50);
	cursor: pointer;
}

.popup-banner img{
	position: absolute;
	display: block;
	width: auto;
	height: auto;
	max-width: 60vw;
	max-height: 70vh;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation-name: zmmn;
  	animation-duration: 1s;
}

@keyframes zmmn {
  from {max-width: 0; max-height: 0;}
  to {max-width: 60vw; max-height: 70vh;}
}

.youtube-channel-video-embed {
	position: relative;
	display: block;
	width: 100%;
}

.youtube-channel-video-embed::before {
	content: " ";
	display: block;
	padding-bottom: 56.25%;
}

.youtube-channel-video-embed iframe{
	position: absolute;
	display: block;
	width: 100% !important;
	height: 100% !important;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.main-top-content {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100vw;
	height: auto;
	padding: 190px 120px 50px 120px;
	background-image: url(../images/dj-gray-top.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom;
	z-index: 555;
}

.main-top-content .youtube-channel-videos {
	position: relative;
	display: block;
	width: calc(100vw - 240px) !important;
	height: auto;
}

.main-top-content .youtube-channel-videos .gallery-top {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border: 1px solid rgb(139,139,139);
	margin: 0 0 10px 0;
	box-shadow: 0 0 24px rgba(0,0,0,0.7);
}

.main-top-content .youtube-channel-videos .gallery-thumbs {
	position: relative;
	display: block;
	width: 100%;
	height: 10vw;
}

.main-top-content .youtube-channel-videos .gallery-thumbs .youtube-channel-video-embed {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	border: 1px solid rgb(206,7,50);
}

.swiper-button-next.swiper-button-white {
	position: absolute;
	display: block;
	width: 50px;
	height: auto;
	top: 50%;
	right: 30px;
}

.swiper-button-next.swiper-button-white svg {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
}

.swiper-button-prev.swiper-button-white {
	position: absolute;
	display: block;
	width: 50px;
	height: auto;
	top: 50%;
	left: 30px;
}

.swiper-button-prev.swiper-button-white svg {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
}

.swiper-button-next.swiper-button-white:after {
	display: none;
}

.swiper-button-prev.swiper-button-white:after {
	display: none;
}

.legal-page-container {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0 0 0 0;
}

.legal-page-container .main-legal {
	position: relative;
	display: block;
	overflow: visible;
	width: 100%;
	height: auto;
	padding: 80px 105px;
	background-color: rgb(46,45,44);
	box-shadow: inset 0 12px 18px -7px rgba(0,0,0,0.7);
}

.legal-page-container .main-legal h1 {
	position: relative;
	display: inline-block;
	width: auto;
	height: 46px;
	padding: 0 0 30px 120px;
	margin: 0 0 30px 0;
	font-size: 36px;
	top: 0;
	text-align: left;
	left: -120px;
	color: rgb(255,255,255);
	border-bottom: 1px solid rgb(139,139,139);
}

.legal-page-container .main-legal h2 {
	position: relative;
	display: block;
	width: 100%;
	height: 36px;
	padding: 30px 0 0 0;
	margin: 0 0 60px 0;
	font-size: 26px;
	top: 0;
	text-align: left;
	color: rgb(255,255,255);
}

.legal-page-container .main-legal p {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0 0 15px 0;
	font-size: 14px;
	font-weight: 400;
	color: rgb(255,255,255);
}

.legal-page-container .main-legal a {
	color: rgb(225,225,225);
	text-decoration: underline;
	transition: all .2s ease;
}

.legal-page-container .main-legal a:hover {
	color: rgb(255,255,255);
}

.course-page-container{
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0 0 0 0;
}

.course-page-container .main-courses {
	position: relative;
	display: block;
	overflow: visible;
	width: 100%;
	height: auto;
	padding: 80px 105px;
	background-color: rgb(206,7,50);
	box-shadow: inset 0 12px 18px -7px rgba(0,0,0,0.7);
}

.course-page-container .main-courses h1 {
	position: relative;
	display: inline-block;
	width: auto;
	height: 46px;
	padding: 0 0 30px 120px;
	margin: 0 0 30px 0;
	font-size: 36px;
	top: 0;
	text-align: left;
	left: -120px;
	color: rgb(46,45,44);
	border-bottom: 1px solid rgb(139,139,139);
}

.course-page-container .main-courses p {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	padding: 0 0 105px 0;
	margin: 0;
	font-size: 13px;
	color: rgb(255,255,255);
}

.course-page-container .main-courses .items {
	width: 100%;
	padding: 0 15px;
}

.course-page-container .main-courses .items .item {
	padding: 0;
	border: 1px solid rgba(46,45,44,1);
	z-index: 500;
}

.course-page-container .main-courses .items .item::before {
	content: " ";
	display: block;
	padding-bottom: 100%;
}

.course-page-container .main-courses .items .item .item-content {
	position: absolute;
	display: block;
	width: calc(100% + 1px);
	height: calc(100% + 1px);
	border: none;
	top: -1px;
	left: -1px;
	background-color: rgb(206,7,50);
}

.course-page-container .main-courses .cover-right {
	position: absolute;
	display: block;
	width: 1px;
	height: 100%;
	top: 0;
	right: 15px;
	background-color: rgb(206,7,50);
	z-index: 501;
}

.course-page-container .main-courses .cover-bottom {
	position: absolute;
	display: block;
	width: 100%;
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: rgb(206,7,50);
	z-index: 501;
}

.course-page-container .main-courses .items .item .item-content .image {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: url(../images/course-thumb.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	transition: all .2s ease;
	opacity: 0;
}

.course-page-container .main-courses .items .item .item-content:hover .image {
	opacity: 1;
}

.course-page-container .main-courses .items .item .item-content h3 {
	position: absolute;
	display: block;
	width: 100%;
	height: auto;
	top: 50%;
	left: 0;
	transform: translate(0, -50%);
	font-size: 18px;
	text-align: center;
	color: rgb(255,255,255);
	padding: 0 30px;
	transition: all .2s ease;
}

.course-page-container .main-courses .items .item .item-content:hover h3 {
	top: 30px;
	color: rgb(206,7,50);
	transform: none;
}



.course-page-container .main-courses .items .item .item-content h4 {
	position: absolute;
	display: inline-block;
	width: auto;
	height: auto;
	bottom: 30px;
	left: 30px;
	font-size: 9px;
	text-align: left;
	color: rgb(255,255,255);
	opacity: 0;
	transition: all .2s ease;
}

.course-page-container .main-courses .items .item .item-content h4::after {
	content: url(../images/button-arrow.png);
	position: absolute;
	width: 7px;
	height: 7px;
	top: 50%;
	left: calc(100% + 5px);
	transform: translate(0, -50%);
}

.course-page-container .main-courses .items .item .item-content:hover h4 {
	opacity: 1;
}

.producer-page-container {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0 0 0 0;
}

.producer-page-container .main-courses {
	position: relative;
	display: block;
	overflow: visible;
	width: 100%;
	height: auto;
	padding: 80px 105px;
	background-color: rgb(46,45,44);
	box-shadow: inset 0 12px 18px -7px rgba(0,0,0,0.7);
}

.producer-page-container .main-courses h1 {
	position: relative;
	display: inline-block;
	width: auto;
	height: 46px;
	padding: 0 0 30px 120px;
	margin: 0 0 30px 0;
	font-size: 36px;
	top: 0;
	text-align: left;
	left: -120px;
	color: rgb(255,255,255);
	border-bottom: 1px solid rgb(139,139,139);
}

.producer-page-container .main-courses p {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	padding: 0 0 105px 0;
	margin: 0;
	font-size: 13px;
	color: rgb(255,255,255);
}

.producer-page-container .main-courses .items {
	width: 100%;
	padding: 0 15px;
}

.producer-page-container .main-courses .items .item {
	padding: 0;
	border: 1px solid rgba(139,139,139,1);
	z-index: 500;
}

.producer-page-container .main-courses .items .item::before{
	content: " ";
	display: block;
	padding-bottom: 100%;
}

.producer-page-container .main-courses .items .item .item-content{
	position: absolute;
	display: block;
	width: calc(100% + 1px);
	height: calc(100% + 1px);
	border: none;
	top: -1px;
	left: -1px;
	background-color: rgb(46,45,44);
}

.producer-page-container .main-courses .cover-right{
	position: absolute;
	display: block;
	width: 1px;
	height: 100%;
	top: 0;
	right: 15px;
	background-color: rgb(46,45,44);
	z-index: 501;
}

.producer-page-container .main-courses .cover-bottom{
	position: absolute;
	display: block;
	width: 100%;
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: rgb(46,45,44);
	z-index: 501;
}

.producer-page-container .main-courses .items .item .item-content .image{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: url(../images/course-thumb.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	transition: all .2s ease;
	opacity: 0;
}

.producer-page-container .main-courses .items .item .item-content:hover .image{
	opacity: 1;
}

.producer-page-container .main-courses .items .item .item-content h3{
	position: absolute;
	display: block;
	width: 100%;
	height: auto;
	top: 50%;
	left: 0;
	transform: translate(0, -50%);
	font-size: 18px;
	text-align: center;
	color: rgb(255,255,255);
	padding: 0 30px;
	transition: all .2s ease;
}

.producer-page-container .main-courses .items .item .item-content:hover h3{
	top: 30px;
	color: rgb(206,7,50);
	transform: none;
}



.producer-page-container .main-courses .items .item .item-content h4{
	position: absolute;
	display: inline-block;
	width: auto;
	height: auto;
	bottom: 30px;
	left: 30px;
	font-size: 9px;
	text-align: left;
	color: rgb(255,255,255);
	opacity: 0;
	transition: all .2s ease;
}

.producer-page-container .main-courses .items .item .item-content h4::after{
	content: url(../images/button-arrow.png);
	position: absolute;
	width: 7px;
	height: 7px;
	top: 50%;
	left: calc(100% + 5px);
	transform: translate(0, -50%);
}

.producer-page-container .main-courses .items .item .item-content:hover h4{
	opacity: 1;
}

.container-formula{
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	padding: 0 120px;
	margin: 120px 0 160px 0;
}

.container-formula .formula-one{
	position: relative;
	display: block;
	overflow: visible;
	width: 100%;
	height: auto;
	padding: 80px;
	background-color: rgb(206,7,50);
}

.container-formula .formula-one .left-side{
	padding: 0;
}

.container-formula .formula-one .left-side img{
	position: absolute;
	display: block;
	width: calc(100% + 60px);
	height: auto;
	top: -160px;
	left: -140px;
	filter: drop-shadow(0 0 12px rgba(0,0,0,0.5));
}

.container-formula .formula-one .right-side{
	padding: 0;
}

.container-formula .formula-one .right-side .text-content{
	padding: 0;
}

.container-formula .formula-one .right-side .text-content .col-sm-6{
	padding: 0;
}

.container-formula .formula-one .right-side .text-content .col-sm-6 img{
	position: absolute;
	display: block;
	width: auto;
	height: 200%;
	top: calc(-30.2% - 80px);
	right: 80px;
}

.container-formula .formula-one .right-side .text-content h1{
	position: relative;
	display: block;
	width: 100%;
	height: 46px;
	padding: 0 0 30px 0;
	margin: 0 0 30px 0;
	font-size: 36px;
	color: rgb(46,45,44);
	border-bottom: 1px solid rgb(139,139,139);
}

.container-formula .formula-one .right-side .text-content p{
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	padding: 0 0 105px 0;
	margin: 0;
	font-size: 13px;
	color: rgb(255,255,255);
}

.container-formula .formula-one .right-side .items{
	padding: 0;
}

.container-formula .formula-one .right-side .items .item{
	padding: 0;
	border: 1px solid rgba(46,45,44,1);
	z-index: 500;
}

.container-formula .formula-one .right-side .items .item::before{
	content: " ";
	display: block;
	padding-bottom: 100%;
}

.container-formula .formula-one .right-side .items .item .item-content {
	position: absolute;
	display: block;
	width: calc(100% + 1px);
	height: calc(100% + 1px);
	border: none;
	top: -1px;
	left: -1px;
	background-color: rgb(206,7,50);
}

.container-formula .formula-one .right-side .items .item .item-content.destaq{
	background-color: rgb(255,255,255);
}

.container-formula .formula-one .right-side .cover-right {
	position: absolute;
	display: block;
	width: 1px;
	height: 100%;
	top: 0;
	right: 0;
	background-color: rgb(206,7,50);
	z-index: 501;
}

.container-formula .formula-one .right-side .cover-bottom {
	position: absolute;
	display: block;
	width: 100%;
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: rgb(206,7,50);
	z-index: 501;
}

.container-formula .formula-one .right-side .items .item .item-content .image{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: url(../images/course-thumb.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	transition: all .2s ease;
	opacity: 0;
}

.container-formula .formula-one .right-side .items .item .item-content:hover .image{
	opacity: 1;
}

.container-formula .formula-one .right-side .items .item .item-content.active .image{
	opacity: 1;
}

.container-formula .formula-one .right-side .items .item .item-content h3{
	position: absolute;
	display: block;
	width: 100%;
	height: auto;
	top: 50%;
	left: 0;
	transform: translate(0, -50%);
	font-size: 11px;
	text-align: center;
	color: rgb(255,255,255);
	padding: 0 30px;
	transition: all .2s ease;
}

.container-formula .formula-one .right-side .items .item .item-content:hover h3{
	top: 30px;
	color: rgb(206,7,50);
	transform: none;
}

.container-formula .formula-one .right-side .items .item .item-content.active h3{
	top: 30px;
	color: rgb(206,7,50);
	transform: none;
}

.container-formula .formula-one .right-side .items .item .item-content.destaq h3{
	color: rgb(206,7,50);
}



.container-formula .formula-one .right-side .items .item .item-content h4{
	position: absolute;
	display: inline-block;
	width: auto;
	height: auto;
	bottom: 30px;
	left: 30px;
	font-size: 9px;
	text-align: left;
	color: rgb(255,255,255);
	opacity: 0;
	transition: all .2s ease;
}

.container-formula .formula-one .right-side .items .item .item-content h4::after{
	content: url(../images/button-arrow.png);
	position: absolute;
	width: 7px;
	height: 7px;
	top: 50%;
	left: calc(100% + 5px);
	transform: translate(0, -50%);
}

.container-formula .formula-one .right-side .items .item .item-content:hover h4{
	opacity: 1;
}

.container-formula .formula-one .right-side .items .item .item-content.active h4{
	opacity: 1;
}

.producer-intro{
	position: relative;
	display: block;
	width: 100vw;
	height: auto;
	padding: 0;
	background-color: rgb(46,45,44);
	box-shadow: inset 0 12px 18px -7px rgba(0,0,0,0.7);
}

.producer-intro .producer-intro-content{
	position: relative;
	display: block;
	overflow: visible;
	width: 100%;
	height: auto;
	padding: 80px 120px;
}

.producer-intro .producer-intro-content h1{
	position: relative;
	display: block;
	width: 100%;
	height: 46px;
	padding: 0 0 30px 0;
	margin: 0 0 30px 0;
	font-size: 36px;
	color: rgb(206,7,50);
	border-bottom: 1px solid rgb(139,139,139);
}

.producer-intro .producer-intro-content p{
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	padding: 0 0 30px 0;
	margin: 0;
	font-size: 13px;
	color: rgb(255,255,255);
}

.prod-left{
	padding: 0 30px 0 0;
}

.prod-left .col-sm-10{
	padding: 0;
}

.prod-left .col-sm-4{
	padding: 0 30px 0 0;
}

.prod-right{
	padding: 0;
}

.button-gear{
	position: relative;
	display: inline-block;
	width: 100%;
	height: auto;
	top: 50%;
	transform: translate(0, -50%);
}
.button-gear::before{
	content: ' ';
	display: block;
	padding-bottom: 100%;
}

.button-gear .base{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.button-gear .top{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
  	animation: btnanimone 8s infinite;
}

@keyframes btnanimone {
  	0% {transform: rotate(-130deg);}
  	50% {transform: rotate(45deg);}
	100% {transform: rotate(-130deg);}
}

.button-gear-two {
	position: relative;
	display: inline-block;
	width: 100%;
	height: auto;
	top: 50%;
	transform: translate(0, -50%);
}
.button-gear-two::before {
	content: ' ';
	display: block;
	padding-bottom: 100%;
}

.button-gear-two .base {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.button-gear-two .top {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
  	animation: btnanimtwo 8s infinite;
}

@keyframes btnanimtwo {
  	0% {transform: rotate(-130deg);}
	25% {transform: rotate(-130deg);}
  	50% {transform: rotate(130deg);}
	100% {transform: rotate(-130deg);}
}

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

.equalizer::before {
	content: ' ';
	display: block;
	padding-bottom: 147.25%;
}

.equalizer .eq-base {
	position: absolute;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	animation: volumegray 8s infinite;
}

.equalizer .eq-base img {
	position: absolute;
	display: block;
	width: 100%;
	height: auto;
	top: 0;
	left: 0;
}

.equalizer .eq-filled {
	position: absolute;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 50%;
	bottom: 0;
	left: 0;
	animation: volumered 8s infinite;
}

@keyframes volumered {
  	0% {height: 25%;}
	25% {height: 25%;}
  	50% {height: 25%;}
	75% {height: 75%;}
	100% {height: 25%;}
}

.equalizer .eq-filled img{
	position: absolute;
	display: block;
	width: 100%;
	height: auto;
	bottom: 0;
	left: 0;
}

.equalizer .eq-button {
	position: absolute;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 100%;
	bottom: 0;
	left: 0;
}

.equalizer .eq-button img{
	position: absolute;
	display: block;
	width: 100%;
	height: auto;
	bottom: 25%;
	left: 0;
	transform: translate(0, 50%);
	animation: volumebtn 8s infinite;
}

@keyframes volumebtn {
  	0% {bottom: 25%;}
	25% {bottom: 25%;}
  	50% {bottom: 25%;}
	75% {bottom: 75%;}
	100% {bottom: 25%;}
}

.producer-intro .producer-intro-content .items{
	padding: 0 0 60px 0;
}

.producer-intro .producer-intro-content .items .item{
	padding: 0;
}

.producer-intro .producer-intro-content .items .item .item-content{
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	border: none;
}

.producer-intro .producer-intro-content .items .item .item-content .image{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: url(../images/course-thumb.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	transition: all .2s ease;
	opacity: 0;
}

.producer-intro .producer-intro-content .items .item .item-content:hover .image{
	opacity: 1;
}

.producer-intro .producer-intro-content .items .item .item-content.active .image{
	opacity: 1;
}

.producer-intro .producer-intro-content .items .item:nth-child(1) .item-content{
	border-top: 0 solid rgba(139,139,139,0);
	border-left: 0 solid rgba(139,139,139,0);
	border-bottom: 1px solid rgba(139,139,139,1);
	border-right: 1px solid rgba(139,139,139,1);
}

.producer-intro .producer-intro-content .items .item:nth-child(2) .item-content{
	border-top: 0 solid rgba(139,139,139,0);
	border-left: 0 solid rgba(139,139,139,0);
	border-bottom: 1px solid rgba(139,139,139,1);
	border-right: 1px solid rgba(139,139,139,0);
}

.producer-intro .producer-intro-content .items .item:nth-child(3) .item-content{
	border-top: 0 solid rgba(139,139,139,0);
	border-left: 0 solid rgba(139,139,139,0);
	border-bottom: 0 solid rgba(139,139,139,1);
	border-right: 1px solid rgba(139,139,139,1);
}

.producer-intro .producer-intro-content .items .item:nth-child(4) .item-content{
	border-top: 0 solid rgba(139,139,139,0);
	border-left: 0 solid rgba(139,139,139,0);
	border-bottom: 0 solid rgba(139,139,139,1);
	border-right: 1px solid rgba(139,139,139,0);
}

.producer-intro .producer-intro-content .items .item .item-content.destaq{
	background-color: rgba(255,255,255,1);
}

.producer-intro .producer-intro-content .items .item .item-content.destaq:hover{
	background-color: rgba(255,255,255,0);
}

.producer-intro .producer-intro-content .items .item .item-content::before{
	content: " ";
	display: block;
	padding-bottom: 100%;
}

.producer-intro .producer-intro-content .items .item .item-content h3{
	position: absolute;
	display: block;
	width: 100%;
	height: auto;
	top: 50%;
	left: 0;
	transform: translate(0, -50%);
	font-size: 11px;
	text-align: center;
	color: rgb(255,255,255);
	transition: all .2s ease;
}

.producer-intro .producer-intro-content .items .item .item-content:hover h3{
	top: 30px;
	color: rgb(206,7,50);
	transform: none;
}

.producer-intro .producer-intro-content .items .item .item-content.active h3{
	top: 30px;
	color: rgb(206,7,50);
	transform: none;
}

.producer-intro .producer-intro-content .items .item .item-content.destaq h3{
	color: rgb(206,7,50);
}

.producer-intro .producer-intro-content .items .item .item-content h4{
	position: absolute;
	display: inline-block;
	width: auto;
	height: auto;
	bottom: 30px;
	left: 30px;
	font-size: 9px;
	text-align: left;
	color: rgb(255,255,255);
	opacity: 0;
	transition: all .2s ease;
}

.producer-intro .producer-intro-content .items .item .item-content h4::after{
	content: url(../images/button-arrow.png);
	position: absolute;
	width: 7px;
	height: 7px;
	top: 50%;
	left: calc(100% + 5px);
	transform: translate(0, -50%);
}

.producer-intro .producer-intro-content .items .item .item-content:hover h4{
	opacity: 1;
}

.producer-intro .producer-intro-content .items .item .item-content.active h4{
	opacity: 1;
}

.link-button-ghost-w{
	position: relative;
	display: inline-block;
	width: 100%;
	height: 50px;
}

.link-button-ghost-w a{
	position: relative;
	display: block;
	width: 100%;
	height: 50px;
	line-height: 50px;
	background-color: rgba(206,7,50,0);
	color: rgb(255,255,255);
	border: 1px solid rgba(206,7,50,1);
	font-weight: 300;
	font-size: 14px;
	text-align: center;
	text-decoration: none;
	transition: all .2s ease;
}

.link-button-ghost-w a:hover{
	background-color: rgba(206,7,50,1);
}

.link-button-filled-w{
	position: relative;
	display: inline-block;
	width: 100%;
	height: 50px;
}

.link-button-filled-w a{
	position: relative;
	display: block;
	width: 100%;
	height: 50px;
	line-height: 50px;
	background-color: rgba(206,7,50,1);
	color: rgb(255,255,255);
	border: 1px solid rgba(206,7,50,1);
	font-weight: 300;
	font-size: 14px;
	text-align: center;
	text-decoration: none;
	transition: all .2s ease;
}

.link-button-filled-w a:hover{
	background-color: rgba(206,7,50,0);
}

.store-intro{
	position: relative;
	display: block;
	width: 100vw;
	height: auto;
	padding: 0;
	background-color: rgb(33,33,33);
}

.store-intro .store-intro-content{
	position: relative;
	display: block;
	overflow: visible;
	width: 100%;
	height: auto;
	padding: 0;
}

.store-intro .store-intro-content .str-left{
	padding: 80px 0 0 120px;
}

.store-intro .store-intro-content .str-left img{
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 60px 0;
	filter: drop-shadow(0 0 12px rgba(0,0,0,0.5));
}

.store-intro .store-intro-content .str-left .text{
	padding: 0;
}

.store-intro .store-intro-content .str-left h1{
	position: relative;
	display: block;
	width: calc(100% + 120px);
	height: 46px;
	padding: 0 0 30px 120px;
	margin: 0 0 30px 0;
	font-size: 36px;
	left: -120px;
	color: rgb(206,7,50);
	border-bottom: 1px solid rgb(139,139,139);
}

.store-intro .store-intro-content .str-left p{
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	padding: 0 0 30px 0;
	margin: 0;
	font-size: 13px;
	text-align: justify;
	color: rgb(255,255,255);
}

.store-intro .store-intro-content .str-right{
	padding: 0;
}

.store-intro .store-intro-content .str-right svg{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
}

.store-intro .store-intro-content .str-right img{
	position: absolute;
	display: block;
	width: 50%;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	filter: drop-shadow(0 0 12px rgba(0,0,0,0.5));
}

.store-intro .store-intro-content .str-right::before{
	content: ' ';
	display: block;
	padding-bottom: 100%;
}

.newsletter-banner{
	position: relative;
	display: block;
	width: 100vw;
	height: auto;
	padding: 0;
	background-color: rgb(33,33,33);
	background-image: url(../images/newsletter-banner.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top;
	border-bottom: 1px solid rgba(206,7,50,1);
}

.newsletter-banner .newsletter-banner-content{
	position: relative;
	display: block;
	overflow: visible;
	width: 100%;
	height: auto;
	padding: 156px 120px 80px 120px;
}

.newsletter-banner .newsletter-banner-content h1{
	position: absolute;
	display: block;
	width: calc(50% + 120px);
	height: 46px;
	padding: 0 120px 30px 0;
	margin: 0 0 30px 0;
	font-size: 36px;
	top: 80px;
	text-align: left;
	right: -120px;
	color: rgb(206,7,50);
	border-bottom: 1px solid rgb(139,139,139);
}

.newsletter-banner .newsletter-banner-content form{
	position: relative;
	display: block;
	width: 100%;
	height: auto;
}

.newsletter-banner .newsletter-banner-content form .col-sm-5{
	padding: 0 30px 0 0;
}

.newsletter-banner .newsletter-banner-content form .col-sm-4{
	padding: 0 30px 0 0;
}

.newsletter-banner .newsletter-banner-content form .col-sm-3{
	padding: 0;
}

.newsletter-banner .newsletter-banner-content form input{
	position: relative;
	display: block;
	width: 100%;
	height: 50px;
	line-height: 48px;
	font-size: 14px;
	font-weight: 300;
	outline: none;
	text-align: center;
	color: rgb(33,33,33);
	background-color: rgb(139,139,139);
	border: none;
}

input, select, textarea{
    color: rgb(33,33,33);
}

input::placeholder, select::placeholder, textarea::placeholder{
    color: rgb(33,33,33);
}

textarea:focus, input:focus {
    color: rgb(33,33,33);
}

.newsletter-banner .newsletter-banner-content form button{
	position: relative;
	display: block;
	width: 100%;
	height: 50px;
	line-height: 48px;
	background-color: rgba(206,7,50,1);
	color: rgb(255,255,255);
	border: 1px solid rgba(206,7,50,1);
	font-weight: 300;
	font-size: 14px;
	text-align: center;
	text-decoration: none;
	transition: all .2s ease;
}

.newsletter-banner .newsletter-banner-content form button:hover{
	background-color: rgba(206,7,50,0);
}

.course-container {
	position: relative;
	display: block;
	width: 100vw;
	height: auto;
	padding: 220px 120px 0 120px;
	background-color: rgb(33,33,33);
	background-image: url(../images/course-back.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top;
}

.course-container .col-sm-12{
	padding: 0 0 60px 0;
}

.course-container .col-sm-12.formrow{
	padding: 0;
}

.course-container .col-sm-6.formrow{
	padding: 0;
}

.course-container .col-sm-6.formrow.left{
	padding: 0 10px 0 0;
}

.course-container .col-sm-6.formrow.right{
	padding: 0 0 0 10px;
}

.course-container .col-sm-6{
	padding: 0;
}

.course-container .col-sm-8{
	padding: 0;
}

.course-container h1{
	position: relative;
	display: inline-block;
	width: auto;
	height: 46px;
	padding: 0 0 30px 120px;
	margin: 0 0 30px 0;
	font-size: 36px;
	font-weight: 200;
	top: 0;
	text-align: left;
	left: -120px;
	color: rgb(206,7,50);
	border-bottom: 1px solid rgb(139,139,139);
}

.course-container h1 span{
	font-weight: 300;
}

.course-container h2{
	position: relative;
	display: inline-block;
	width: auto;
	height: auto;
	padding: 0;
	margin: 0 0 30px 0;
	font-size: 22px;
	font-weight: 300;
	text-align: left;
	color: rgb(255,255,255);
}

.course-container h2.red{
	color: rgb(206,7,50);
}

.course-container p{
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
	font-size: 13px;
	text-align: justify;
	color: rgb(255,255,255);
	text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

.course-container ul{
	position: relative;
	display: block;
	width: auto;
	height: auto;
	padding: 0;
	margin: 0;
}

.course-container ul li{
	position: relative;
	display: block;
	width: auto;
	height: auto;
	padding: 0;
	margin: 0 0 5px 0;
	font-size: 14px;
	color: rgb(255,255,255);
	transition: all .2s ease;
}

.course-container ul li a{
	position: relative;
	display: inline-block;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 300;
	color: rgb(255,255,255);
	transition: all .2s ease;
}

.course-container ul li a:hover{
	cursor: pointer;
	color: rgb(206,7,50);
}

.course-container ul li a.active{
	color: rgb(206,7,50);
}

.course-container ul li a.destaq{
	color: rgb(206,7,50);
}

.course-container .link-button-filled-w{
	position: absolute;
	display: block;
	width: 70%;
	height: 50px;
	bottom: 0;
	right: 0;
}

.course-container .link-button-filled-w a{
	position: relative;
	display: block;
	width: 100%;
	height: 50px;
	line-height: 50px;
	background-color: rgba(206,7,50,1);
	color: rgb(255,255,255);
	border: 1px solid rgba(206,7,50,1);
	font-weight: 300;
	font-size: 14px;
	text-align: center;
	text-decoration: none;
	padding: 0;
	transition: all .2s ease;
}

.course-container .link-button-filled-w a:hover{
	background-color: rgba(206,7,50,0);
}

.service-form h4{
	font-size: 14px;
	margin: 0 0 15px 0;
}

.service-form input{
	position: relative;
	display: block;
	width: 100%;
	height: 40px;
	line-height: 38px;
	font-size: 11px;
	font-weight: 300;
	outline: none;
	text-align: left;
	text-transform: uppercase;
	color: rgb(33,33,33);
	background-color: rgb(139,139,139);
	border: none;
	margin: 0 0 15px 0;
	padding: 0 15px;
}

.service-form .select-box{
	position: relative;
	display: block;
	width: 100%;
	height: 40px;
	background-color: rgb(139,139,139);
	margin: 0 0 15px 0;
}

.service-form select{
	position: relative;
	display: block;
	width: 100%;
	height: 40px;
	line-height: 38px;
	font-size: 11px;
	font-weight: 300;
	outline: none;
	text-align: left;
	text-transform: uppercase;
	color: rgb(33,33,33);
	background-color: rgb(139,139,139);
	border: none;
	padding: 0 15px;
}

input, select, textarea{
    color: rgb(33,33,33);
}

input::placeholder, select::placeholder, textarea::placeholder{
    color: rgb(33,33,33);
}

textarea:focus, input:focus {
    color: rgb(33,33,33);
}

.service-form textarea{
	position: relative;
	display: block;
	width: 100%;
	height: 240px;
	font-size: 11px;
	font-weight: 300;
	outline: none;
	text-align: left;
	text-transform: uppercase;
	color: rgb(33,33,33);
	background-color: rgb(139,139,139);
	border: none;
	margin: 0 0 15px 0;
	padding: 15px;
}

.service-form button{
	position: relative;
	display: block;
	width: 100%;
	height: 50px;
	line-height: 48px;
	background-color: rgba(206,7,50,1);
	color: rgb(255,255,255);
	border: 1px solid rgba(206,7,50,1);
	font-weight: 300;
	font-size: 14px;
	text-align: center;
	text-decoration: none;
	transition: all .2s ease;
}

.service-form button:hover{
	background-color: rgba(206,7,50,0);
}

tab {
	margin-left: 30px;
}

.warning-mod {
	position: fixed;
	display: none;
	width: 25vw;
	height: auto;
	padding: 30px;
	margin: 0;
	top: 50px;
	right: 50px;
	z-index: 999999;
}

.warning-mod.active {
	display: block;
}

.warning-mod.destaq {
	display: block;
}

.warning-mod#wsuccs {
	background-color: rgb(0,182,59);
	color: rgb(255,255,255);
}

.warning-mod#wfld {
	background-color: rgb(206,7,50);
	color: rgb(255,255,255);
}

.warning-mod .close {
	position: absolute;
	display: block;
	width: 10px;
	height: 10px;
	top: 15px;
	right: 15px;
	opacity: 1;
	cursor: pointer;
}

.warning-mod .close svg{
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	opacity: 1;
}

.warning-mod#wsuccs .close svg path{
	fill: rgba(255,255,255,1);
}

.warning-mod#wfld .close svg path{
	fill: rgba(255,255,255,1);
}