@import url("https://fonts.googleapis.com/css?family=Lalezar");

/*Theme db-theme-night (default and base decor style)*/
.db-overlay--design {
	background:#000;
	background: radial-gradient(ellipse at center,  #4f4f4f 0%,#000000 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4f4f', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.db-modal-close--text,
.db-modal-title--side,
.db-count-active,
.db-count-length,
.db-nav__icon {
	color:#fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size:10px;
	letter-spacing:2px;
	text-transform:uppercase;
}
.db-modal-close--icon:before,
.db-modal-close--icon:after {
	background-color:#fff;
}
.db-modal-title--back {
	color:rgba(0,0,0,0.3);
	font-size:18vw;
	text-transform:uppercase;
	font-family: 'Lalezar', cursive;
}
.db-modal {
	box-shadow: 0 40px 80px 0 rgba(0, 0, 0, 0.5);
}
.dexterbox {
	cursor:pointer;
}

/*Theme day*/
[data-theme=day].db-overlay--design {
	background:#fff;
	background: radial-gradient(ellipse at center,  #ffffff 0%,#f1f1f1 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f1f1f1',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
[data-theme=day] .db-modal-close--text,
[data-theme=day] .db-modal-title--side,
[data-theme=day] .db-count-active,
[data-theme=day] .db-count-length,
[data-theme=day] .db-nav__icon {
	color:#000;
}
[data-theme=day] .db-modal-close--icon:before,
[data-theme=day] .db-modal-close--icon:after {
	background-color:#000;
}
[data-theme=day] .db-modal-title--back {
	color:rgba(0,0,0,0.05);
}

/*For Theme Rainbow*/
[data-theme=rainbow] .db-modal-title--back {
	color:rgba(0,0,0,0.1);
}

/*For Theme Chameleon*/
[data-theme=chameleon] .db-modal-title--back {
	color:rgba(255,255,255,0.2);
}
.ltie9 .db-overlay {display:none;}
.db-overlay {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	-ms-transform:scale(0);
	transform:scale(0) translate3d(0,0,0);
	transform-origin:center center;
	transition: all 0.3s cubic-bezier(.73,-0.64,.99,.58);
	overflow:hidden;
	z-index:9999;
	opacity:0;
}
.db-overlay-open .db-overlay {
	-ms-transform:scale(1);
	transform:scale(1) translate3d(0,0,0);
	opacity:1;
	transition: all 0.4s cubic-bezier(0,.7,.66,1.32);
}
.db-modal-wrap {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	z-index:2;
}
.db-modal {
	max-height:76.5vh;
	max-width:100vw;
	width: auto;
	height: auto;
	transition: all 0.3s cubic-bezier(0,.22,0,1.43);
}
iframe.db-modal {
	z-index:6;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	max-height:none;
	max-width:none;
}
.db-modal-close {
	position:fixed;
	top:0;
	right:0;
	cursor:pointer;
	opacity:1;
	white-space:nowrap;
	font-size:0;
	transform: rotate(90deg) translate3d(0,0,0);
	transform-origin: 120px 120px 0;
	width:240px;
	height:120px;
	z-index:3;
}
.db-modal-close--icon {
	width:120px;
	height:120px;
	display:inline-block;
	vertical-align:top;
	position:relative;
	opacity:0.7;
}
.db-modal-close--text {
	position:relative;
	height:120px;
	line-height:120px;
	text-align:left;
	display:inline-block;
	vertical-align:top;
	transform:translate3d(0,0,0);
}
.db-modal-close--icon:before {
	content:'';
	width:30px;
	height:1px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%) rotate(45deg);
}
.db-modal-close--icon:after {
	content:'';
	width:30px;
	height:1px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%) rotate(-45deg);
}
.db-modal-close:hover .db-modal-close--icon {
	opacity:1;
}
.db-modal-title--back {
	opacity:1;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	z-index:0;
	transition: all 0.2s ease;
	white-space:nowrap;
}
.db-corner--bottom-left {
	position:absolute;
	bottom:50vh;
	left:55px;
	width:50vh;
	transform-origin: left bottom;
	padding:0;
	transform: rotate(90deg) translateX(-60px) translateZ(0);
	text-align:right;
	z-index:3;
}
.db-corner--bottom-right {
	position:absolute;
	bottom:30px;
	right:45px;
	width:50vh;
	transform-origin: right top;
	transform: rotate(90deg) translateZ(0);
	text-align:right;
	z-index:3;
}
.db-modal-title--side {
	text-transform:uppercase;
	line-height:1.2em;
	display:inline-block;
	text-align:right;
	z-index:3;
	transition: all 0.2s ease;
}
.db-corner--top-left {
	position:absolute;
	top:33px;
	left:53px;
	width:50vh;
	transform-origin: left bottom;
	transform: rotate(90deg) translateZ(0);
	text-align:left;
	z-index:3;	
}

/*Counter*/
.db-count{
	transition: all 0.2s ease;
	display:inline-block;
	line-height:1.2em;
}
.db-corner-item + .db-corner-item {
	margin-left:60px;
}
.db-count-active,
.db-count-length {
	display:inline-block;
	text-align:right;
	z-index:3;
	transition: all 0.2s ease;
}

/*Arrow navigation*/
.db-nav {
	position: absolute;
    top: 50%;
    transform: translateY(-50%);
	width: 10%;
	height:0;
	padding-top:10%;
	z-index:4;
	cursor:pointer;
	display:none;
}
.db-nav.db-nav.db-nav--disable {
	opacity:.2;
	cursor:default;
}
.db-nav--show {
	display:block !important;
}
.db-nav--left {
	left:14%;
}
.db-nav--right {
	right:14%;
}
.db-nav__icon {
	opacity:0.7;
	border-style:solid;
	border-width:1px 0 0;
	width:17px;
	height:0;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	margin:0 10px;
	transition: all 0.3s ease;
}
.db-nav__icon--left:before {
	content:'';
	width: 0; 
	height: 0; 
	border-right-width:6px;
	border-right-style:solid;
	position:absolute;
	transform:translateY(-50%);
	top:50%;
	left:0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent; 
}
.db-nav__icon--left:after {
	content:'';
	width:40px;
	height:40px;
	border-style:solid;
	border-width:1px;
	border-radius:50%;
	position:absolute;
	top:50%;
	transform:translateY(-50%)  scale(1);
	transition: all 0.3s ease;
	margin-left:-10px;
}
.db-nav__icon--right:before {
	content:'';
	width: 0; 
	height: 0; 
	border-left-width:6px;
	border-left-style:solid;
	position:absolute;
	transform:translateY(-50%);
	top:50%;
	right:0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent; 
}
.db-nav__icon--right:after {
	content:'';
	width:40px;
	height:40px;
	border-style:solid;
	border-width:1px;
	border-radius:50%;
	position:absolute;
	top:50%;
	transform:translateY(-50%)  scale(1);
	transition: all 0.3s ease;
	margin-left:-10px;
}
.db-nav:not(.db-nav--disable):hover .db-nav__icon:after {
	transform:translateY(-50%) scale(1.3);
}
.db-nav:not(.db-nav--disable):active .db-nav__icon:after {
	transform:translateY(-50%) scale(1.2);
	opacity:0.9;
	transition: all 0.1s ease;
}
.db-nav__icon--left {
	left:0;
}
.db-nav__icon--right {
	right:0;

}

/*Animation classes*/
.db-hide--to-left {
	transform:translateX(-100%);
	opacity:0;
	transition: all 0.1s linear;
}
.db-show--from-right {
	transform:translateX(100%);
	opacity:0;
}
.db-title-back-hide--to-top {
	transform:translate(-50%, -100%);
	opacity:0;
}
.db-title-back-show--from-bot {
	transform:translate(-50%, 0%);
	opacity:0;
	transition: all 0s ease !important;
}

.db-title-left-hide--to-top {
	transform:translateX(-50%);
	opacity:0;
}
.db-title-left-show--from-bot {
	transform:translateX(50%);
	opacity:0;
	transition: all 0s ease !important;
}
.db-hide--to-right {
	transform:translateX(100%);
	opacity:0;
}
.db-show--from-left {
	transform:translateX(-100%);
	opacity:0;
}
.db-title-back-hide--to-bot {
	transform:translate(-50%, 0%);
	opacity:0;
}
.db-title-back-show--from-top {
	transform:translate(-50%, -100%);
	opacity:0;
	transition: all 0s ease !important;
}
.db-title-left-hide--to-bot {
	transform:translateX(50%);
	opacity:0;
}
.db-title-left-show--from-top {
	transform:translateX(-50%);
	opacity:0;
	transition: all 0s ease !important;
}
.db-text--to-top .db-corner--top-left {
    left: 40px;
    text-align: right;
    top: 50vh;
    transform: rotate(-90deg) translateX(-57px) translateZ(0px);
    transform-origin: left top 0;
    width: 50vh;
}
.db-text--to-top .db-corner--bottom-left {
    bottom: 30px;
    left: 40px;
    text-align: left;
    transform: rotate(-90deg) translateZ(0px);
    transform-origin: left top 0;
    width: 50vh;
}
.db-text--to-top .db-modal-close--text {
    transform: translate3d(0px, 0px, 0px) rotate(180deg);
}
.db-text--to-top .db-corner--bottom-right {
	bottom: 50vh;
    right: 47px;
    text-align: left;
    transform: rotate(-90deg) translateX(60px) translateZ(0px);
    transform-origin: right bottom 0;
    width: 50vh;
}
.db-text--to-right .db-corner--top-left {
    left: 60px;
    text-align: left;
    top: 45px;
    transform: translateZ(0px);
    transform-origin: left top 0;
    width: auto;
}
.db-text--to-right .db-corner--bottom-left {
    bottom: 50px;
    left: 60px;
    text-align: left;
    transform:  translateZ(0px);
    width: auto;
}
.db-text--to-right .db-modal-close--text {
    transform: translate3d(0px, 0px, 0px) rotate(180deg);
}
.db-text--to-right .db-modal-close {
    transform: translate3d(0px, 0px, 0px) rotate(180deg);
	transform-origin: center center;
}
.db-text--to-right .db-corner--bottom-right {
	bottom: 50px;
    right: 60px;
    text-align: right;
    transform: translateZ(0px);
    transform-origin: right bottom 0;
    width: auto;
}

/*Youtube*/
.db-y-play {
	display:none;
	position:absolute;
	top:50%;
	left:50%;
	margin:-24px 0 0 -34px;
	z-index:5;
	width:68px;
	height:48px;
	cursor:pointer;
	transition: all 0.3s cubic-bezier(0,.22,0,1.43);
}
.db-y-play:hover .ytp-large-play-button-bg {
	fill: #f00;
}

/*Important*/
.db-hide {
	display:none !important;
}
.db-show {
	display:block !important;
}