@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
	--first-color: #EAEAEA;
	--second-color: #304878;
	--third-color: #4A1942;
	--fourth-color: #181848;
	--fifth-color: #F0A818;
	--background-color: #F2F2F2;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background: var(--background-color);
    font-family: 'Poppins', sans-serif;
}

a {
    text-decoration: none;
}

p {
    margin: 0;
}

p span {
	font-weight: bold;
	color: var(--second-color);
}

ul {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

img {
    display: block;
    max-width: 100%;
}

h1, h2, h3 , h4 {
	color: #2a2d34;
	font-weight: 700;
}

/** @section Preloader */
.preloader {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: 10000;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
	background: #ffffff;
	transition: .3s all ease;
}

.preloader::after {
	background-image: url('../images/bkg-ev.png');
	background-position: center;
	content: '';
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1000;
}

[data-x-mode='true'] .preloader, .preloader.loaded {
	opacity: 0;
	visibility: hidden;
}

.preloader-body {
	text-align: center;
}

.preloader-body p {
	position: relative;
	right: -8px;
}

.cssload-container {
	width: 100%;
	height: 36px;
	text-align: center;
}

.cssload-speeding-wheel {
	width: 66px;
	height: 66px;
	margin: 0 auto;
	border: 3px solid var(--second-color);
	border-radius: 50%;
	border-left-color: transparent;
	border-bottom-color: transparent;
	animation: cssload-spin .88s infinite linear;
}

@keyframes cssload-spin {
	100% {
		transform: rotate(360deg);
	}
}

.page-body {
    margin-top: -24px;
}

.logotipo img {
    height: 100%;
    max-width: 170px;
}

.top-bar {
    background-color: var(--second-color);
    color: #fff;
    font-weight: 500;
	padding: 10px;
}

.header {
    background-color: #EAEAEA;
    height: 100%;
}

.header .logo img,
.header .logo input[type="image"] {
    margin: 15px auto;
    max-width: 170px;
}

.header .sticky .navbar ul li a {
    color: var(--second-color);
    font-weight: 500;
    text-align: center;
	transition: all .5s;
	text-transform: capitalize;
}

.header .sticky .navbar ul li a:hover {
    color: var(--fifth-color);
}

.header .sticky .navbar ul li a.active {
    color: #fc7803;
}

.navbar-light .navbar-nav .nav-link:focus {
    color: #fff;
}

.navbar-light .navbar-toggler {
    background-color: #fff;
    margin-bottom: 15px;
}

@media (min-width: 1024px) {
	.header .logo {
		padding-left: 40px;
		position: relative;
	}
	.header .logo img,
	.header .logo input[type="image"] {
		margin: 15px 0;
	}
}

/*=======================================================
    Slide Eventos, Slide Evento
========================================================*/
.slide-eventos {
    background-image: url('../images/slider.jpg');
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 25vh;
    position: relative;
}
@media screen and (min-width: 768px) {
	.slide-eventos {
		height: 40vh;
	}	
}
/*@media screen and (min-width: 1024px) {
	.slide-eventos {
		height: 70vh;
	}
}*/

/*.bkg-slide {
	background: rgb(0,0,0);
	background: radial-gradient(circle, rgba(0,0,0,0) 15%, rgba(0,0,0,1) 90%, rgba(0,0,0,1) 100%);
	background-size: cover;
	height: 100%;
	width: 100%;
}*/

.slide-eventos .caption {
	height: 100%;
}

.slide-eventos .caption .m-ev-bf img {
	margin-bottom: 20px;
}

.slide-eventos .caption .ex-bf {
	justify-content: center;
	margin-top: 20px;
	padding: 0 40px;
	position: relative;
	text-align: center;
}

.slide-eventos .caption .ex-bf h4 {
	color: #fff;
	font-weight: 400;
}

.slide-eventos .caption .ex-bf h4::before {
	background: url('../images/quote-left.svg') center no-repeat;
	content: "";
	height: 25px;
	left: 5%;
	position: absolute;
	top: 0;
	transform: translateY(-50%);
	width: 25px;
}

.slide-eventos .caption .ex-bf h4::after {
	background: url('../images/quote-right.svg') center no-repeat;
	content: "";
	height: 25px;
	left: 88%;
	position: absolute;
	top: 75%;
	transform: translateY(-50%);
	width: 25px;
}

.slide-eventos.sl-ev {
    background: url('../images/sl-ev.jpg') center;
    height: 200px;
    width: 100%;
}

#titulo {
/*    background-image: url('../images/franja-bf1.jpg');*/
	background-color: var(--second-color);
    background-position: bottom center;
    background-repeat: no-repeat;
    color: #fff;
    height: 130px;
    text-align: center;
    text-transform: uppercase;
}

.title-event h1 {
	color: #fff;
    font-size: 50px;
}

@media (min-width: 768px) {
	.slide-eventos .caption .m-ev-bf img {
		margin: 0 auto;
		margin-bottom: 40px;
		width: 450px;
	}
	.slide-eventos .caption .ex-bf h4::before {
		left: 12%;
		top: 0;
	}
	.slide-eventos .caption .ex-bf h4::after {
		left: 85%;
		top: 75%;
	}
}

@media (min-width: 1024px) {
	.slide-eventos .caption .ex-bf {
		text-align: justify;
	}
	.slide-eventos .caption .ex-bf h4::before {
		left: 2%;
		top: 25%;
	}
	.slide-eventos .caption .ex-bf h4::after {
		left: 90%;
		top: 60%;
	}
}

@media (min-width: 1200px) {
    /*.slide-eventos {
        height: 675px;
    }*/
	.slide-eventos .caption .m-ev-bf img {
		margin: 0;
		width: 450px;
	}
	.slide-eventos .caption .ex-bf {
		justify-content: end;
		padding: 0;
	}
	.slide-eventos .caption .ex-bf h4::before {
		height: 30px;
		left: 10%;
		top: 25%;
		width: 30px;
	}
	.slide-eventos .caption .ex-bf h4::after {
		height: 30px;
		left: 102%;
		top: 75%;
		width: 30px;
	}
}

/*=======================================================
    Eventos
========================================================*/
.eventos {
	background-image: url('../images/bkg-ev.png');
	background-position: top center;
    padding: 85px 0;
}

.eventos .img-event img {
	height: 80%;
/*    margin: 30px 0;*/
    width: 80%;
}

.eventos .name-event,
.eventos .desc-event {
    background-color: #fff;
/*    margin: 30px auto;*/
    padding: 40px 20px;
    position: relative;
}

.eventos .desc-event .btnCompra {
	order: 1;
}

.eventos .name-event h2 {
    color: var(--second-color);
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.eventos .desc-event .descrip p {
    color: #666;
    font-size: 14px;
}

.eventos .desc-event .descrip p span {
	color: #2a2d34;
	font-weight: 700;
}

.eventos .desc-event .btnCompra button,
.evento-c .ev-cr .img-event .btnCompra button,
.evento-c .ev-cr .img-event .btnCompra input {
    background-color: var(--second-color);
    border: none;
    border-radius: 0;
    color: #fff;
	font-weight: 700;
	margin-bottom: 10px;
    padding: 10px;
	transition: all .5s;
}
@media screen and (min-width: 768px) {
	.eventos .desc-event .btnCompra button,
	.evento-c .ev-cr .img-event .btnCompra button,
	.evento-c .ev-cr .img-event .btnCompra input {
		margin-bottom: 0px;
	}
}
.eventos .desc-event .btnCompra button:hover {
	background-color: var(--third-color);
}

/*=======================================================
    Evento
========================================================*/

.evento-c {
    background-image: url('../images/bkg-ev.png');
	background-position: top center;
	background-size: cover;
	padding-bottom: 80px;
}

.evento-c .ev-cr {
	width: 100%;
}

.evento-c .ev-cr .img-event {
    background-color: #fff;
    height: 345px;
    position: relative;
	width: 100%;
}

.evento-c .ev-cr .img-event img {
    border-radius: 10%;
	margin: 0 auto;
	margin-top: -35px;
	width: 70%;
}

.evento-c .ev-cr .img-event .recinto {
	margin: 20px 20px 0 20px;
	text-align: center;
}

.evento-c .ev-cr .img-event .recinto span {
	color: #2a2d34;
	font-weight: 700;
}

.evento-c .ev-cr .name-event {
    display: flex;
    justify-content: center;
    align-items: center;
}

.evento-c .ev-cr .name-event img {
    border-radius: 10%;
    width: 40%;
}

.evento-c .ev-cr .img-event .btnCompra {
    left: 50%;
    position: absolute;
    top: 80%;
    transform: translateX(-50%);
}

.evento-c .ev-cr .name-event,
.evento-c .ev-cr .desc-event {
    background-color: #fff;
    height: fit-content;
	margin: 20px 0;
    padding: 30px;
	width: 100%;
}

@media (min-width: 768px) {
    .eventos .img-event img {
        width: 60%;
    }
    .eventos .name-event,
    .eventos .desc-event {
        width: 65%;
        margin: 0 auto;
    }
	.eventos .desc-event .btnCompra {
		order: 0;
	}
    .eventos .desc-event .btnCompra button {
        width: 100px;
    }
    .evento-c .ev-cr .img-event {
        height: 350px;
        width: 80%;
    }
	.evento-c .ev-cr .img-event img {
		width: 45%;
	}
	.evento-c .ev-cr .img-event .recinto {
		margin: 0 auto;
		margin-top: 20px;
		width: 380px;
	}
	.evento-c .ev-cr .desc-event {
		align-items: center;
		display: flex;
		height: 190px;
		width: 80%;
	}
    .evento-c .ev-cr .img-event .btnCompra button {
        width: 120px;
    }
}

@media (min-width: 1024px) {
    .eventos .ev {
        display: grid;
        grid-template-columns: 340px 10px auto;
        grid-template-rows: repeat(2, auto);
        gap: 10px;
        padding: 15px 0;
    }
    .eventos .img-event img {
        width: 100%;
    }
    .eventos .name-event,
    .eventos .desc-event {
        width: 100%;
        height: 100%;
    }
    .eventos .ev .img-event {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
    }
    .eventos .ev .name-event {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
/*        margin-bottom: 15px;*/
    }
    .eventos .ev .desc-event {
        grid-column: 3 / 4;
        grid-row: 2 / 3;
/*        margin-top: 15px;*/
    }
    .eventos .desc-event .btnCompra button {
        width: 130px;
    }
	.evento-c .ev-cr .img-event img {
		width: 33%;
	}
}

@media (min-width: 1200px) {
    .eventos .desc-event .btnCompra button {
        width: 170px;
    }
    .evento-c .ev-cr .img-event {
        height: auto;
		margin-top: -35px;
		/*margin-bottom: 60px;*/
        width: 500px;
    }
	.evento-c .ev-cr .img-event img {
		border-radius: 0;
		margin-top: 0;
		width: 100%;
	}
	.evento-c .ev-cr .img-event .recinto {
		margin: 10px auto;
	}
	.evento-c .ev-cr .img-event .btnCompra {
		top: 88%;
	}
	.evento-c .ev-cr .img-event .btnCompra button {
        width: 220px;
    }
    .evento-c .ev-cr .name-event {
        display: flex;
        flex-wrap: wrap;
        left: 50%;
        top: 200px;
        height: 355px;
    }
    .evento-c .ev-cr .name-event img {
        height: 248px;
        border-radius: 0;
        width: 248px;
    }
    .evento-c .ev-cr .desc-event {
        height: fit-content;
		margin-top: -35px;
        width: 630px;
        z-index: 999;
    }
}

/*=======================================================
    Quienes Somos
========================================================*/

.somos .v-about video {
    height: 100%;
    width: 100%;
}

/*=======================================================
    Formas de Pagos
========================================================*/

.fp-tc img {
	width: 55%;
}

/*=======================================================
    Registro / Login
========================================================*/
.somos .v-about {
    margin: 80px auto;
}

.btn-registro .bkgRegInSe {
    background-color: #fff;
    height: 270px;
    padding: 35px;
    position: relative;
}

.btn-registro .btnRegInSe::after {
    border-bottom: 1px solid #666;
    content: '';
    left: 50%;
    position: absolute;
    top: 55%;
    transform: translate(-50%, -50%);
    width: 80%;
}

.btn-registro .btnRegInSe .btn-danger {
    background-color: var(--second-color);
    border-radius: 0;
    border-color: var(--second-color);
	font-weight: 700;
	transition: all 300ms ease;
    width: 350px;
}

.btn-registro .btnRegInSe .btn-danger:hover {
    background-color: var(--fifth-color);
    border-color: var(--fifth-color);
}

.btn-registro .p-r-session {
    margin-top: 20px;
    padding-top: 20px;
}

.btn-registro .p-r-session .click-s,
.registro .form-r .f-r .term-cond .txt-term a,
.login .f-login .login-reg a {
    color: var(--fifth-color);
    font-weight: 600;
    transition: all 300ms ease;
}

.btn-registro .p-r-session .click-s:hover,
.registro .form-r .f-r .term-cond .txt-term a:hover,
.login .f-login .login-reg a:hover {
    color: var(--second-color);
}

.registro .form-r,
.login .f-login {
    background-color: #fff;
    padding: 65px;
    position: relative;
}

.registro .form-r .header-r,
.login .f-login .header-r {
    background-color: var(--fourth-color);
    color: #fff;
    height: 65px;
    left: 0;
    max-height: 85px;
    position: absolute;
    top: 0;
    width: 100%;
}

.registro .form-r .header-r input.back-r,
.login .f-login .header-r input.back-r {
    color: #fff;
    height: 30px;
    left: 65px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
}

.registro .form-r .header-r h2,
.login .f-login .header-r h2 {
	color: #fff;
    margin: 0;
}

.registro .form-r .f-r,
.login .f-login .f-r {
    margin-top: 40px;
}

.registro .form-r input,
.login .f-login input,
.registro .form-r select {
    border-radius: 0;
    color: #333;
    height: 45px;
    position: relative;
}

.form-control:focus {
    color: #2a2d34;
    background-color: #fff;
    border-color: var(--fifth-color);
    outline: 0;
    box-shadow: none;
}

.registro .form-r label,
.login .f-login label {
    color: var(--second-color);
	font-weight: 700;
}

.registro .form-r .btn-danger,
.login .f-login .btn-success {
    background-color: var(--fifth-color);
    border-color: var(--fifth-color);
    color: #fff;
	font-weight: 700;
	transition: all 300ms ease;
}

.registro .form-r .btn-danger:hover,
.login .f-login .btn-success:hover {
    background-color: var(--second-color);
    border-color: var(--second-color);
}

.registro .form-r .f-r span.camp-ob label {
    margin: 15px 0;
}

.registro .form-r .f-r .r-chk .chk-oferta,
.registro .form-r .f-r .term-cond .chk-term {
    width: 50px;
}

.login .f-login .login-reg {
    margin-top: 15px;
}

@media (min-width: 768px) {
    .btn-registro .bkgRegInSe {
        width: 600px;
    }
}

/*=======================================================
    Panel
========================================================*/

.panel-user,
.succes-compra {
	background-color: #fff;
	padding: 40px;
}

.panel-user .perfil,
.panel-user .ticket {
	margin-top: 40px;
}

.panel-user .perfil input,
.panel-user .ticket input {
	width: 55%;
}

.footer.u-foot {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: auto;
}
.per-datos label {
	color: #2a2d34;
	font-weight: 700;
}
.per-datos input,
.per-datos select {
	border: 1px solid #666;
	border-radius: 0;
	color: #333;
	height: 45px;
}

.btnSaveBack input,
input.backPer,
input.impri {
	background-color: #fc7803;
	border: 0;
	border-radius: 0;
	color: #fff;
	font-weight: 700;
	margin-bottom: 20px;
	transition: all .3s;
}

.btnSaveBack input:hover {
	background-color: #232c3b;
}

input.backPer {
	background-color: #232c3b;
}

input.backPer:hover {
	background-color: #fc7803;
}

input.impri {
	background-color: #ec7b10;
}

input.impri:hover {
	background-color: #232c3b;
}

.succes-compra .success-img {
	margin-bottom: 50px;
	margin-top: 30px;
}

.succes-compra .success-img img {
	width: 10%;
}

.succes-compra input {
	background-color: #fc7803;
	border: 0;
	border-radius: 0;
	color: #fff;
	margin-bottom: 25px;
	margin-top: 25px;
	transition: all .3s;
	width: 320px;
}

.succes-compra input:hover {
	background-color: #232c3b;
}

@media (min-width: 768px) {
	.panel-user .perfil input,
	.panel-user .ticket input {
		width: 45%;
	}
}

/*=======================================================
    Frase
========================================================*/
#frase {
    background-color: #fff;
    padding: 100px 0;
}

.frase h3 {
	color: #2a2d34;
    font-style: italic;
	font-weight: 600;
}

/*=======================================================
    Comprar Ticket
========================================================*/
#bkg-gral,
#buy-ticket,
#panel-user,
#succes-compra,
#somos {
	background-image: url('../images/bkg-ev.png');
	background-position: top center;
	background-size: cover;
	padding: 80px 0;
}

.bkg-buy-t {
	background-color: #fff;
	padding: 10px;
}

.v-map input,
.btnCompra input {
	background-color: #fc7803;
	border: 0;
	border-radius: 0;
	color: #fff;
	font-weight: 700;
	transition: all .5s;
}

.btnCompra input {
	height: 50px;
}

.btnCompra input:disabled {
	background-color: #606163;
}

.v-map input:hover,
.btnCompra input:hover {
	background-color: #232c3b;
}

.instrucciones {
    margin: 30px 0;
    text-align: justify;
}

.instrucciones span {
    color: #000;
    font-weight: 900;
}

.lugares select {
    border-radius: 0;
	color: rgb(78, 78, 78);
    height: 45px;
    width: 100%;
}

.l-disp label,
.add-ticket label {
	margin-bottom: 20px;
	margin-top: 30px;
}

.lugares label,
.l-disp label,
.add-ticket label {
    color: #2a2d34;
    font-weight: 700;
}

.imgMap,
.v-map {
    margin-top: 30px;
}

.n-evento, .fecha-e, .d-compra {
    text-align: center;
    margin-bottom: 20px;
}

.n-evento span, .fecha-e span, .d-compra span {
	color: #2a2d34;
	font-weight: 900;
}

.img-event img {
	width: 75%;
}

.d-compra {
    margin-top: 40px;
}

.pagerGrids td {
	background-color: #232c3b;
	border: none;
	color: #fff;
	font-size: 15px;
	font-weight: 400;
	padding: 3px 8px;
	transition: all .5s;
}

.pagerGrids td a {
	color: #fc7803;
}

.pagerGrids td a:hover {
	color: #fff;
}

.alert-danger {
	border: none;
}

.l-disp .btnElegir,
.add-ticket .btnDelete {
    background-color: #fc7803;
	border-radius: 0;
    color: #fff;
}
.l-disp .btnElegir:hover,
.add-ticket .btnDelete:hover {
    background-color: #232c3b;
}

.add-ticket .btnDelete {
	background-color: #a10000;
}

@media (min-width: 768px) {
	.bkg-buy-t {
		padding: 40px;
	}
	.instrucciones {
		text-align: center;
	}
}

/*=======================================================
    Footer
========================================================*/
.ban-b {
    background-image: url('../images/franja-bf2.jpg');
    background-position: right top;
    background-repeat: no-repeat;
    height: 130px;
}

.footer {
    color: #fff;
    font-weight: 300;
	position: relative;
}

.footer .tc-foot {
	align-items: center;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 30px;
	width: 100%;
}

.footer .tc-foot img {
	width: 90px;
	height: 100%;
	margin: 0 auto;
	margin-bottom: 20px;
}

.footer .datos-c {
    background-color: var(--fourth-color);
    padding: 30px 0;
}

.footer .datos-c i,
.footer .web i {
    margin-right: 5px;
}

.footer .web {
    background-color: var(--second-color);
    padding: 15px;
}
.footer .web .terminos-politicas {
	align-items: center;
	display: flex;
}
.footer .web .terminos-politicas p:first-child {
	margin-right: 20px;
}
.footer .web .terminos-politicas p a {
	color: white;
}
.footer .web .terminos-politicas p a:hover {
	color: var(--fifth-color);
	text-decoration: underline;
}

@media (min-width: 768px) {
	.footer .tc-foot {
		flex-direction: row;
	}
    .footer .tc-foot img {
        height: 150px;
        width: 50%;
    }
}

@media (min-width: 1024px) {
    .ban-b {
        background-position: center;
        height: 200px;
    }
}

@media (min-width: 1200px) {
    .ban-b {
        height: 230px;
    }
}

/*=======================================================
    To Top
========================================================*/

.to-top.active {
    opacity: 1;
    pointer-events: auto;
}

.to-top {
    background-color: var(--third-color);
    border: 1px solid #fff;
    border-radius: 46px;
    bottom: 30px;
    color: #fff;
    line-height: 46px;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    right: 15px;
    text-align: center;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    width: 46px;
    z-index: 1000;
}

.to-top:hover {
    background-color: var(--first-color);
    color: #fff;
}

/*=======================================================
    Parallax
========================================================*/
.parallax-js {
	position: relative;
	overflow: hidden;
}

.parallax-js .layer {
	position: absolute;
}

.parallax-js .layer-01 path {
	animation: colorHover 2s infinite ease-out;
}

.parallax-js .layer-01 path:nth-child(1) {
	animation-delay: 1.1s;
}

.parallax-js .layer-01 path:nth-child(2) {
	animation-delay: 1.2s;
}

.parallax-js .layer-01 path:nth-child(3) {
	animation-delay: 1.3s;
}

.parallax-js .layer-01 path:nth-child(4) {
	animation-delay: 1.4s;
}

.parallax-js .layer-01 path:nth-child(5) {
	animation-delay: 1.5s;
}

.parallax-js .layer-01 path:nth-child(6) {
	animation-delay: 1.6s;
}

.parallax-js .layer-01 path:nth-child(7) {
	animation-delay: 1.7s;
}

.parallax-js .layer-01 path:nth-child(8) {
	animation-delay: 1.8s;
}

.parallax-js .layer-01 path:nth-child(9) {
	animation-delay: 1.9s;
}

.parallax-js .layer-01 path:nth-child(10) {
	animation-delay: 2s;
}

.parallax-js .layer-01 path:nth-child(11) {
	animation-delay: 2.1s;
}

.parallax-js .layer-01 path:nth-child(12) {
	animation-delay: 2.2s;
}

.parallax-js .layer-02 circle {
	position: relative;
	fill: #d90e90;
	transition: .44s ease-out all;
	opacity: 0;
}

.parallax-js .layer-02 circle:nth-child(1) {
	transform: translate(45px, -30px);
}

.parallax-js .layer-02 circle:nth-child(2) {
	transform: translate(27px, -30px);
}

.parallax-js .layer-02 circle:nth-child(3) {
	transform: translate(9px, -30px);
}

.parallax-js .layer-02 circle:nth-child(4) {
	transform: translate(-9px, -30px);
}

.parallax-js .layer-02 circle:nth-child(5) {
	transform: translate(-27px, -30px);
}

.parallax-js .layer-02 circle:nth-child(6) {
	transform: translate(-45px, -30px);
}

.parallax-js .layer-02 circle:nth-child(7) {
	transform: translate(45px, -11.25px);
}

.parallax-js .layer-02 circle:nth-child(8) {
	transform: translate(27px, -11.25px);
}

.parallax-js .layer-02 circle:nth-child(9) {
	transform: translate(9px, -11.25px);
}

.parallax-js .layer-02 circle:nth-child(10) {
	transform: translate(-9px, -11.25px);
}

.parallax-js .layer-02 circle:nth-child(11) {
	transform: translate(-27px, -11.25px);
}

.parallax-js .layer-02 circle:nth-child(12) {
	transform: translate(-45px, -11.25px);
}

.parallax-js .layer-02 circle:nth-child(13) {
	transform: translate(45px, 10px);
}

.parallax-js .layer-02 circle:nth-child(14) {
	transform: translate(26.25px, 10px);
}

.parallax-js .layer-02 circle:nth-child(15) {
	transform: translate(9px, 10px);
}

.parallax-js .layer-02 circle:nth-child(16) {
	transform: translate(-9px, 10px);
}

.parallax-js .layer-02 circle:nth-child(17) {
	transform: translate(-27px, 10px);
}

.parallax-js .layer-02 circle:nth-child(18) {
	transform: translate(-45px, 10px);
}

.parallax-js .layer-02 circle:nth-child(19) {
	transform: translate(45px, 31.25px);
}

.parallax-js .layer-02 circle:nth-child(20) {
	transform: translate(26.25px, 31.25px);
}

.parallax-js .layer-02 circle:nth-child(21) {
	transform: translate(9px, 31.25px);
}

.parallax-js .layer-02 circle:nth-child(22) {
	transform: translate(-9px, 31.25px);
}

.parallax-js .layer-02 circle:nth-child(23) {
	transform: translate(-27px, 31.25px);
}

.parallax-js .layer-02 circle:nth-child(24) {
	transform: translate(-45px, 31.25px);
}

.parallax-js:hover .layer-02 circle {
	opacity: 1;
	transform: translate(0, 0);
}

.parallax-js .layer-03 svg {
	animation-name: svgScale;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	fill: none;
}

.parallax-js .layer-03 path {
	fill: #822ea8;
}

.parallax-js .layer-04 svg {
	fill: none;
	animation: svgRotate 5s infinite;
	transition: .3s ease-out all;
}

.parallax-js .layer-04 rect {
	fill: #72EDFF;
}

.parallax-js .layer-05 svg {
	fill: none;
}

.parallax-js .layer-05 circle {
	fill: #9FC948;
}

.parallax-js .layer-06 svg {
	fill: none;
}

.parallax-js .layer-06 circle {
	fill: #d90e90;
}

.parallax-js .layer-06-inner,
.parallax-js .layer-07-inner {
	position: relative;
	width: 18px;
	height: 18px;
}

.parallax-js .layer-06-inner:before,
.parallax-js .layer-07-inner:before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border: 1px solid #d90e90;
	border-radius: 50%;
	animation: beforeScale 3s infinite;
}

.parallax-js .layer-06-inner svg,
.parallax-js .layer-07-inner svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.parallax-js .layer-07 svg {
	fill: none;
}

.parallax-js .layer-07 circle {
	fill: #4F35EA;
}

.parallax-js .layer-07-inner:before {
	border-color: #4f35ea;
	animation: beforeScale 5s infinite;
	animation-delay: 1s;
}

.parallax-js .layer-08 svg {
	fill: none;
}

.parallax-js .layer-08 line {
	stroke: #ef6942;
	stroke-dasharray: 128;
	stroke-dashoffset: 1000;
	animation: dash 6s linear infinite;
}

.parallax-js .layer-08 line:nth-child(3) {
	animation-delay: .2s;
}

.parallax-js .layer-08 line:nth-child(4) {
	animation-delay: .25s;
}

.parallax-js .layer-08 line:nth-child(1) {
	animation-delay: .3s;
}

.parallax-js .layer-08 line:nth-child(2) {
	animation-delay: .35s;
}

.parallax-js .layer-09 svg {
	fill: none;
}

.parallax-js .layer-09 path {
	fill: #fff281;
}

.parallax-js .layer-10 svg {
	fill: none;
}

.parallax-js .layer-10 path {
	fill: #ff4f4f;
}

.parallax-js .layer {
	display: none;
}

@media (min-width: 576px) {
	.parallax-js .layer {
		display: block;
	}
	.parallax-js .layer-01 {
		top: -0.5%;
		left: calc( 50% - 540px / 2);
	}
	.parallax-js .layer-02 {
		top: 15%;
		left: calc( 50% - 540px / 2  + 540px / 12 * 10);
	}
	.parallax-js .layer-03 {
		top: 42%;
		left: calc( 50% - 540px / 2  + 540px / 12 * 1.4);
	}
	.parallax-js .layer-04 {
		top: 55%;
		left: calc( 50% - 540px / 2  - 540px / 12 * 1.3);
	}
	.parallax-js .layer-05 {
		top: 64%;
		left: calc( 50% - 540px / 2  + 540px / 12 * 1.2);
	}
	.parallax-js .layer-06 {
		top: 81.5%;
		left: calc( 50% - 540px / 2  + 540px / 12 * 4);
	}
	.parallax-js .layer-07 {
		top: 42%;
		left: calc( 50% - 540px / 2  + 540px / 12 * 12);
	}
	.parallax-js .layer-08 {
		top: 81.5%;
		left: calc( 50% - 540px / 2  + 540px / 12 * 11);
	}
	.parallax-js .layer-09 {
		z-index: 2;
		top: 15%;
		left: calc( 50% - 540px / 2  + 540px / 12 * 13);
	}
	.parallax-js .layer-10 {
		z-index: 1;
		top: 23%;
		left: calc( 50% - 540px / 2  + 540px / 12 * 13.5);
	}
}

@media (min-width: 768px) {
	.parallax-js .layer-01 {
		top: -0.5%;
		left: calc( 50% - 720px / 2);
	}
	.parallax-js .layer-02 {
		top: 15%;
		left: calc( 50% - 720px / 2  + 720px / 12 * 10);
	}
	.parallax-js .layer-03 {
		top: 42%;
		left: calc( 50% - 720px / 2  + 720px / 12 * 1.4);
	}
	.parallax-js .layer-04 {
		top: 55%;
		left: calc( 50% - 720px / 2  - 720px / 12 * 1.3);
	}
	.parallax-js .layer-05 {
		top: 64%;
		left: calc( 50% - 720px / 2  + 720px / 12 * 1.2);
	}
	.parallax-js .layer-06 {
		top: 81.5%;
		left: calc( 50% - 720px / 2  + 720px / 12 * 4);
	}
	.parallax-js .layer-07 {
		top: 42%;
		left: calc( 50% - 720px / 2  + 720px / 12 * 12);
	}
	.parallax-js .layer-08 {
		top: 81.5%;
		left: calc( 50% - 720px / 2  + 720px / 12 * 11);
	}
	.parallax-js .layer-09 {
		z-index: 2;
		top: 15%;
		left: calc( 50% - 720px / 2  + 720px / 12 * 13);
	}
	.parallax-js .layer-10 {
		z-index: 1;
		top: 23%;
		left: calc( 50% - 720px / 2  + 720px / 12 * 13.5);
	}
}

@media (min-width: 992px) {
	.parallax-js .layer-01 {
		top: -0.5%;
		left: calc( 50% - 960px / 2);
	}
	.parallax-js .layer-02 {
		top: 15%;
		left: calc( 50% - 960px / 2  + 960px / 12 * 10);
	}
	.parallax-js .layer-03 {
		top: 42%;
		left: calc( 50% - 960px / 2  + 960px / 12 * 1.4);
	}
	.parallax-js .layer-04 {
		top: 55%;
		left: calc( 50% - 960px / 2  - 960px / 12 * 1.3);
	}
	.parallax-js .layer-05 {
		top: 64%;
		left: calc( 50% - 960px / 2  + 960px / 12 * 1.2);
	}
	.parallax-js .layer-06 {
		top: 81.5%;
		left: calc( 50% - 960px / 2  + 960px / 12 * 4);
	}
	.parallax-js .layer-07 {
		top: 42%;
		left: calc( 50% - 960px / 2  + 960px / 12 * 12);
	}
	.parallax-js .layer-08 {
		top: 81.5%;
		left: calc( 50% - 960px / 2  + 960px / 12 * 11);
	}
	.parallax-js .layer-09 {
		z-index: 2;
		top: 15%;
		left: calc( 50% - 960px / 2  + 960px / 12 * 13);
	}
	.parallax-js .layer-10 {
		z-index: 1;
		top: 23%;
		left: calc( 50% - 960px / 2  + 960px / 12 * 13.5);
	}
}

@media (min-width: 1200px) {
	.parallax-js .layer-01 {
		top: -0.5%;
		left: calc( 50% - 1200px / 2 - 70px);
	}
	.parallax-js .layer-02 {
		top: 15%;
		left: calc( 50% - 1200px / 2  + 1200px / 12 * 10);
	}
	.parallax-js .layer-03 {
		top: 42%;
		left: calc( 50% - 1200px / 2  + 1200px / 12 * 1.4);
	}
	.parallax-js .layer-04 {
		top: 55%;
		left: calc( 50% - 1200px / 2  - 1200px / 12 * 2);
	}
	.parallax-js .layer-05 {
		top: 64%;
		left: calc( 50% - 1200px / 2  + 1200px / 12 * 1.2);
	}
	.parallax-js .layer-06 {
		top: 81.5%;
		left: calc( 50% - 1200px / 2  + 1200px / 12 * 3);
	}
	.parallax-js .layer-07 {
		top: 42%;
		left: calc( 50% - 1200px / 2  + 1200px / 12 * 12);
	}
	.parallax-js .layer-08 {
		top: 76.5%;
		left: calc( 50% - 1200px / 2  + 1200px / 12 * 11);
	}
	.parallax-js .layer-09 {
		z-index: 2;
		top: 15%;
		left: calc( 50% - 1200px / 2  + 1200px / 12 * 13);
	}
	.parallax-js .layer-10 {
		z-index: 1;
		top: 23%;
		left: calc( 50% - 1200px / 2  + 1200px / 12 * 13.5);
	}
}

@keyframes colorHover {
	0% {
		fill: #d90e90;
	}
	100% {
		fill: #f4f2ee;
	}
}

@keyframes colorHoverModern {
	0% {
		fill: #f09922;
	}
	100% {
		fill: #d7a753;
	}
}

@keyframes svgScale {
	0% {
		transform: scale(0.5);
	}
	20% {
		transform: scale(1);
	}
	80% {
		transform: scale(1);
	}
	100% {
		transform: scale(0.5);
	}
}

@keyframes svgScaleInverse {
	0% {
		transform: scale(0.5, -1);
	}
	20% {
		transform: scale(1, -1);
	}
	80% {
		transform: scale(1, -1);
	}
	100% {
		transform: scale(0.5, -1);
	}
}

@keyframes svgRotate {
	0% {
		transform: rotate(0deg) scale(1);
		transform-origin: center bottom;
	}
	20% {
		transform: rotate(-45deg) scale(0.7);
	}
	100% {
		transform: rotate(-90deg) scale(1);
	}
}

@keyframes beforeScale {
	0% {
		opacity: 1;
		transform: scale(1);
	}
	70% {
		opacity: 0;
		transform: scale(2);
	}
	100% {
		opacity: 0;
		transform: scale(1);
	}
}

@keyframes dash {
	0% {
		stroke-dashoffset: 128;
	}
	5% {
		stroke-dashoffset: 0;
	}
	95% {
		stroke-dashoffset: 0;
	}
	100% {
		stroke-dashoffset: 128;
	}
}

@keyframes opacityScale {
	0% {
		opacity: 0;
	}
	20%, 40% {
		opacity: 1;
		transform: translate(0, 0);
	}
	100% {
		opacity: 0;
		transform: translate(0, 0);
	}
}

/*=======================================================
    Loading
========================================================*/

.loadingAnimation img {
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 25%;
	z-index: 100;
}