/*fonts-start*/
@font-face {
	font-family: 'DINOT-Light';
	src: url('../fonts/DINOT-Light.otf');
}
.font-dinotLight{
	font-family: 'DINOT-Light';
}

@font-face {
	font-family: 'DINOT-LightItalic';
	src: url('../fonts/DINOT-LightItalic.otf');
}
.font-dinotLightItalic{
	font-family: 'DINOT-LightItalic';
}

@font-face {
	font-family: 'DINOT 3';
	src: url('../fonts/DINOT 3.otf');
}
.font-dinot3{
	font-family: 'DINOT 3';
}

@font-face {
	font-family: 'DINOT-Italic';
	src: url('../fonts/DINOT-Italic.otf');
}
.font-dinotItalic{
	font-family: 'DINOT-Italic';
}

@font-face {
	font-family: 'DINOT-Medium 3';
	src: url('../fonts/DINOT-Medium 3.otf');
}
.font-dinotMedium3{
	font-family: 'DINOT-Medium 3';
}

@font-face {
	font-family: 'DINOT-MediumItalic';
	src: url('../fonts/DINOT-MediumItalic.otf');
}
.font-dinotMediumItalic{
	font-family: 'DINOT-MediumItalic';
}

@font-face {
	font-family: 'DINOT-Bold 2';
	src: url('../fonts/DINOT-Bold 2.otf');
}
.font-dinotBold2{
	font-family: 'DINOT-Bold 2';
}

@font-face {
	font-family: 'DINOT-BoldItalic';
	src: url('../fonts/DINOT-BoldItalic.otf');
}
.font-dinotBoldItalic{
	font-family: 'DINOT-BoldItalic';
}

@font-face {
	font-family: 'DINOT-Black';
	src: url('../fonts/DINOT-Black.otf');
}
.font-dinotBlack{
	font-family: 'DINOT-Black';
}

@font-face {
	font-family: 'DINOT-BlackItalic';
	src: url('../fonts/DINOT-BlackItalic.otf');
}
.font-dinotBlackItalic{
	font-family: 'DINOT-BlackItalic';
}

@font-face {
	font-family: 'DINOT-CondLight';
	src: url('../fonts/DINOT-CondLight.otf');
}
.font-dinotCondLight{
	font-family: 'DINOT-CondLight';
}

@font-face {
	font-family: 'DINOT-CondLightIta';
	src: url('../fonts/DINOT-CondLightIta.otf');
}
.font-dinotCondLightIta{
	font-family: 'DINOT-CondLightIta';
}

@font-face {
	font-family: 'DINOT-Cond';
	src: url('../fonts/DINOT-Cond.otf');
}
.font-dinotCond{
	font-family: 'DINOT-Cond';
}

@font-face {
	font-family: 'DINOT-CondIta';
	src: url('../fonts/DINOT-CondIta.otf');
}
.font-dinotCondIta{
	font-family: 'DINOT-CondIta';
}

@font-face {
	font-family: 'DINOT-CondMedium';
	src: url('../fonts/DINOT-CondMedium.otf');
}
.font-dinotCondMedium{
	font-family: 'DINOT-CondMedium';
}

@font-face {
	font-family: 'DINOT-CondMediIta';
	src: url('../fonts/DINOT-CondMediIta.otf');
}
.font-dinotCondMediIta{
	font-family: 'DINOT-CondMediIta';
}

@font-face {
	font-family: 'DINOT-CondBold';
	src: url('../fonts/DINOT-CondBold.otf');
}
.font-dinotCondBold{
	font-family: 'DINOT-CondBold';
}

@font-face {
	font-family: 'DINOT-CondBoldIta';
	src: url('../fonts/DINOT-CondBoldIta.otf');
}
.font-dinotCondBoldIta{
	font-family: 'DINOT-CondBoldIta';
}

@font-face {
	font-family: 'DINOT-CondBlack';
	src: url('../fonts/DINOT-CondBlack.otf');
}
.font-dinotCondBlack{
	font-family: 'DINOT-CondBlack';
}

@font-face {
	font-family: 'DINOT-CondBlackIta';
	src: url('../fonts/DINOT-CondBlackIta.otf');
}
.font-dinotCondBlackIta{
	font-family: 'DINOT-CondBlackIta';
}
/*fonts end*/

/*mobile-main-whole-image-start*/
/*.mobile{
	padding: 0;
	margin: 0;
	background-image: url("https://images.wallpaperscraft.ru/image/danboard_progulka_pechal_odinochestvo_7383_1920x1080.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	height: 100vh;
	overflow-y: scroll;
}*/

.mobile:before {
	content: "";
	position: fixed;
	left: 0;
	right: 0;
	z-index: -1;
  
	display: block;
	background-image: url("../images/mobileBackground.jpg");
	background-position: 29% 0;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 100vh;
  
	-webkit-filter: brightness(60%);
	-moz-filter: brightness(60%);
	-o-filter: brightness(60%);
	-ms-filter: brightness(60%);
	filter: brightness(60%);
}

.mobile {
/*	position: fixed;
	left: 0;
	right: 0;*/
	z-index: 1;
	padding: 0;
	margin: 0;
	/*height: 100vh;*/
	overflow-y: auto!important;
	/*margin-bottom: 100px;*/
}

/*.mobile div.logo-img-parent {
	background: black;
	height: 5em;
	width: 5em;
	position: relative;
	left: -8px !important;
	top: -15px;
	border-radius: 50%;
	z-index: 99;
}

.mobile img.logo {
	margin-top: 10px;
	height: 4em;
	margin-left: 9px;
}*/

.mobile div.margin-top-5{
	margin-top: 5rem;
}
/*mobile-main-whole-image-end*/


.mobile div.number {
	background-color: rgb(255, 240, 0);
	color: black;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	height: 70px;
	width: 70px;
	font-size: 2.5em;
	margin: 30px auto;
	-webkit-box-shadow: 0px -1px 15px 1px rgba(0,0,0,0.44);
	box-shadow: 0px -1px 15px 1px rgba(0,0,0,0.44);
}

.mobile div.tracker button{
	background-color: transparent;
	color: rgb(255, 240, 0);
	border: 2px solid rgb(255, 240, 0);
	border-radius: 50%;
	outline: none;
	height: 60px;
	width: 60px;
}

.mobile div.main-div{
	background: #FFF;
	height: 100%;
}

.mobile div.main-div h4{
	padding: 0 10px;
	font-size: 1em;
}

.mobile p#slideNumber{
	font-size: 1.5em;
	color: rgb(255, 240, 0);
	padding-top: 20%;
}

.mobile ul.unstyled{
	padding: 0;
	list-style-type: none;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}

.mobile ul.unstyled li{
	width: 100%;
	border-top: 1px solid rgb(227, 227, 227);
	background-color: rgb(242, 242, 242);
	padding: 0px 0;
	display: table;
}

.mobile div.letter{
	display: table-cell;
	vertical-align: middle; 
	width: 15%;
	font-size: 1.8em;
	padding-left: 40px;
}

.mobile .card li .circle{
	background: #000;
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.mobile label{
	padding: 10px;
	display: table-cell;
	vertical-align: middle;text-align: left;
}


/*list-item-input-start*/
.mobile .styled-checkbox {
	position: absolute;
	opacity: 0;
}
.mobile .styled-checkbox + label {
	position: relative;
	cursor: pointer;
	padding: 0;
}
.mobile .styled-checkbox + label:before {
	content: "";
	display: inline-block;
	vertical-align: text-top;
	width: 20px;
	height: 20px;
	background: transparent;
	border-radius: 50%;
	position: absolute;
	right: 10px;
	top: 12px;
}

.mobile .styled-checkbox:checked + label:before {
	background: rgb(255, 240, 0);
	border: none;
}
.mobile .styled-checkbox:disabled + label:before {
	box-shadow: none;
	background: #ddd;
}
.mobile .styled-checkbox:checked + label:after {
	content: "";
	position: absolute;
	right: 24px;
	top: 21px;
	background: black;
	width: 2px;
	height: 2px;
	box-shadow: 2px 0 0 black, 4px 0 0 black, 4px -2px 0 black, 4px -4px 0 black, 4px -6px 0 black, 4px -8px 0 black;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.mobile input[type=radio] + label>img {
	border: 2px solid transparent;
}

.mobile input[type=radio]:checked + label>img {
	 border: 2px solid rgb(255, 240 ,0);
}

.mobile ul.unstyled li.sel_bk_color{
	background-color: rgb(255, 240, 0);
}
/*list-item-input-end*/



/*cards-start*/
.mobile .cards {
	position: relative;
	list-style-type: none;
	padding: 0;
	width: 80vw;
	margin: 12% auto 5% auto;
}

.mobile .card ul{
	list-style-type: none;
	max-height: 41vh;
	overflow-y: scroll;
}

.mobile .card {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	height: 68vh;
	background: rgb(227, 227, 227);
	padding: 40px;
	transform: translateY(-48px) rotate(0deg) translateX(30px) scale(0.8);
	transform-origin: 0 0;

	transition: transform 0.6s cubic-bezier(0.8, 0.2, 0.1, 0.8) 0.1s,
	background 0.4s linear;
	border-radius: 0px;
	cursor: pointer;
	user-select: none;
	opacity: 0.8;
}

.mobile .card--next {
	z-index: 5;
	transform: translateY(-25px) rotate(0deg) translateX(18px) scale(0.9);
	opacity: 0.9;
}

.mobile .card--out {
	animation: card-out 0.6s cubic-bezier(0.8, 0.2, 0.1, 0.8);
	transform: translateY(-70px) rotate(0deg) translateX(50px) scale(0.7);
	z-index: 1;
	background: rgb(227, 227, 227);
	opacity: 0.7;
}

@keyframes card-out {
	0% {
		z-index: 20;
		transform: translateY(0px) rotate(-4deg);
	}
	50% {
		transform: translateY(-120%) rotate(-5deg) translateX(-40px);
	}
	80% {
		z-index: 1;
	}
	100% {
		transform: translateY(-50px) rotate(8deg) translateX(55px) scale(0.95);
	}
}

.mobile .card--current {
	cursor: auto;
	user-select: auto;
	position: relative;
	z-index: 10;
	opacity: 1;
	background: #eee;
	transform: rotate(0deg) translateX(0%) scale(1);
	padding: 0;
}
/*cards-end*/


@media screen and (max-width: 767px){
	.desktop{
		display: none!important;
	}

	.mobile{
		display: block!important;
	}

	.mobile .cards{
		margin: 10% auto 5% auto;
	}

	.mobile .card{
		height: 60vh;
		width: 75vw;
		margin-left: 0vw;
	}
}

@media (min-width : 425px) and (max-width : 823px) and (orientation : landscape) {
	.desktop{
		display: none!important;
	}

	.mobile{
		display: block!important;
	}

	.mobile .cards{
		margin: 0% auto 5% auto;
	}

	.mobile .card{
		height: 90vh;
		width: 65vw;
		margin-left: 10vw;
	}
}

@media screen and (max-width: 425px){
	.mobile .card{
		height: 68vh;
	}
}


@media screen and (max-width: 414px){
	.mobile ul.unstyled li{
		padding: 4px 0;
	}

	.mobile div.letter{
		font-size: 1.4em;
	}

	.mobile div.number{
		height: 60px;
		width: 60px;
		font-size: 2em;
		margin: 25px auto;
	}

	.mobile .card--next{
		transform: translateY(-25px) rotate(0deg) translateX(15px) scale(0.9);
	}
}


@media screen and (max-width: 411px){
	.mobile ul.unstyled li{
		padding: 6px 0;
	}

	.mobile div.letter{
		font-size: 1.3em;
	}
}


@media screen and (max-width: 375px){
	.mobile ul.unstyled li{
		padding: 2px 0;
	}

	.mobile div.letter{
		font-size: 1.5em;
	}

	.mobile .card--next{
		z-index: 5;
		transform: translateY(-25px) rotate(0deg) translateX(15px) scale(0.9);
	}
}


@media screen and (max-width: 320px){
	.mobile div.number {
		padding: 7px;
		height: 45px;
		width: 45px;
		font-size: 1.3em;
		margin: 20px auto;
	}

	.mobile ul.unstyled li{
		padding: 4px 0;
	}

	.mobile div.letter{
		font-size: 1.2em;
		padding-left: 20px;
	}

	.mobile label{
		padding-left: 15px;
		font-size: 0.8em;
	}

	.mobile div.main-div h4{
		font-size: 0.8em;
	}

	.mobile .card--next {
		transform: translateY(-25px) rotate(0deg) translateX(16px) scale(0.9);
	}

	.mobile .card--current {
		transform: rotate(0deg) translateX(2px) scale(1); 
	}

	.mobile .cards {
		margin: 8% auto 5% auto;
	}
}