

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,600;0,700;0,900;1,200;1,300;1,400;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');



/*azul : #0D4253 : fundo*/

:root {
	--color-white: #FFFFFF;
	--color-black: #000000;


	--color-blue-bold: #32205F;
	--color-blue: #B5EFF2;
	--color-blue-light: #E9FAFB;

	--color-red-normal: #9D2A2C;
	--color-red-bold: #752125;
	
	
	--color-green: #87af0a;
	--color-green-bold: #749302;
	--color-green-lemon: #C5E735;

	--color-gray: #5c5c5c;
	--color-gray-light: #e8e8e8;
	
	
	--black: #1C1C1C;
	--gray: #C4C4C4; 
	--meuestilo: #EC008C;
	--meubemestar: #FF8D8D;
	--meudinheiro: #57AB8A;
	--nossaslutas: #9F5DB5;

	--color-primary: #EC008C;
	
	--color-dark-gray: #444444;
	--color-btn-gray: #666666;
	--color-light-gray: #aaaaaa;




	
}


/* ------------------------------------------- */
/* customizacao */
/* ------------------------------------------- */
	body, html{ min-height: 100%; margin: 0; }
	body{
		background-color: var(--color-gray-light);
		background-image: url('../images/fundo.jpg');
		/*background-image: url('../images/bg-warehouse.jpg');*/
		background-position: center center;
		background-size: cover;
		font-size: 1.30rem;
		line-height: 1.3; 
		color: var(--color-black);
		font-family: 'Open Sans', sans-serif !important;
	}

	h1, h2, h3, h4, h5, h6{ letter-spacing: 0.04rem; line-height: 1.1; }

	h1 { font-size: 2.50rem; font-weight: bold; }
	h2 { font-size: 2.30rem; font-weight: 600; }
	h3 { font-size: 1.90rem; font-weight: 600; }
	h4 { font-size: 1.70rem; font-weight: 600; }

	p{ font-size: 1.0rem; line-height: 1.35; margin-bottom: 1.0rem; }


	section.section{ position: relative; padding: 10px 0; }


	.nolink{ text-decoration: none !important; color: inherit !important; }
	.nolink:hover{ text-decoration: none !important !important; }

	.bg-white{ background-color: var(--color-white); }
	.bg-green-lemon{ background-color: var(--color-green-lemon); }
	.bg-blue{ background-color: var(--color-blue); }
	.bg-blue-light{ background-color: var(--color-blue-light); }

	.bg-gray{ background-color: var(--color-gray); }


	.container-fluid{ width: 93%; }


	.row-eq-height {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
	}

	.box-center{
		margin: 0 auto;
		text-align: center;
	}

	.radius55{ border-radius: 55px !important; }
	.radius60{ border-radius: 60px !important; }
	.radius-larg{ border-radius: 95px !important; }
	.radius-medium{ border-radius: 60px !important; }
	.radius-squade{ border-radius: 30px !important; }


	.brMD{ display:block !important; }
	.brSM { display: none !important; }

	.bd1{ border: 1px dotted red; } 

	/*.textP p{ font-size: 33px; letter-spacing: 0.2rem; }*/
	/*.textP2 p{ font-size: 24px; letter-spacing: 0.2rem; }*/



	#app{ position: relative; height: 100%; }
	main{ position: relative; height: 100%; }
	.main-overlay{ position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-color: rgb(0, 0, 0, .3); z-index: -1; }
	.content-wrapper{ z-index: 1; min-height: 100%; min-height: 90vh; }
	iframe { position: relative; width: 100%; height: 100%; }

	.no-under{ text-decoration: none !important; }


	/* HEADER */



	/* CARDS */
		.card.card-login{ 
			position: relative;
			width: 340px;
			width: 100%;
			/*box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%) !important; */
			border: 0px solid rgba(0,0,0,.125) !important;
			margin: 0 auto; 
			background-color: #a671e9 !important;
			background-color: #7912fb !important;
			/*background-image: linear-gradient(to right, #a671e9 0%, #7a5e9f 100%) !important;*/
			/*background-image: linear-gradient(to right, #a671e9 0%, #7a5e9f 50%, #a671e9 100%);*/

			/*-webkit-transform: skew(-40deg);*/
			/*-moz-transform: skew(-40deg);*/
			/*-o-transform: skew(-40deg);*/


			/*background-image: linear-gradient(to top, #A638E7 0%, #757BF5 100%);*/
			box-shadow: 0.3rem 0.3rem 0.2rem rgb(255 255 255 / 90%) !important;
			box-shadow: 0px 6px 20px 2px rgba(0,0,0,0.75) !important;
			background-image: linear-gradient(to top, #02a0c3 0%, #1783b9 100%);
			background-image: linear-gradient(to top, #ffffff 0%, #ffffff 100%);
		}
		.bg-gradiente{
			z-index: 0;
			position: absolute;
			bottom: 0;
			left: -5%;
			height: 100% !important;
			width: 90%;
			-webkit-transform: skew(-25deg);
			-moz-transform: skew(-25deg);
			-o-transform: skew(-25deg);
			/*background-image: linear-gradient(to right, #a671e9 0%, #7a5e9f 70%, #a671e9 100%);*/
			/*background-image: linear-gradient(to right, #7912fb 0%, #ab6cfd 70%, #7912fb 100%);*/
		}

		.card.card-login .card-header{
			padding: 0.75rem 0.75rem;
			margin-bottom: 0;
			background-color: rgba(0,0,0,0); 
			border-bottom: 2px solid rgba(255,255, 255, .05);
			text-align: center;
			color: black;
		}
		.card.card-login .card-header h1{ font-size: 1.5rem; }
		.card.card-login .card-header .logotipo{
			width: 80px;
			height: 80px;
			margin: 0 auto;
			background-color: white;
			border-radius: 50%;	
			text-align: center;
			margin-bottom: 10px;
		}
		.card.card-login .card-header .logotipo img{ width: 80%; margin: 0 auto; text-align: center; }
		.card.card-login .card-body{ 
			padding: 18px 40px;
			color: #000000;
		} 
		.card.card-login .card-footer{
			padding: 10px 40px;
			border-top: 2px solid rgba(255,255, 255, .05);	
		}




		.card-login .form-box{ 
			padding: 0;
			padding-bottom: 0;
			margin-bottom: 0;  
		}
		.card-login .form-box .form-error{
			line-height: .5;
		}
		.card-login .form-box .form-error small{ 
			font-size: 0.7rem; color: #f5abab;
		}
		.card-login .form-box .form-item{
			border-bottom: .05rem solid rgb(255,255,255, .5);
		}
		.card-login .form-group{ margin-bottom: 0; }
		.card-login .form-group .form-control{
			/* padding: .15rem .75rem 3px 0rem; */
			border: 0;
			border-radius: 0;
			color: #000000;
			font-size: .9rem;
			font-weight: bold;
			border: 1px solid #ced4da;
			background-color: rgb(255 255 255 / 90%);
			border: 1px solid #68b0c8;
			border: 1px solid #ced4da;
			border-radius: .25rem;
		}
		.card-login .form-group .form-check-input:checked {
			background-color: #848484;
			border-color: #848484;
		}
		.card-login .form-group .form-control-placeholder {
			font-size: .80rem;
			color: #000000;
			margin: 0 !important;
		}
		/*.card-login .form-group .form-control-placeholder {*/
			/*position: absolute;*/
			/*top: 7px;*/
			/*padding: 0px 0 0 10px;*/
			/*padding-left: 0px;*/
			/*transition: all 200ms;*/
			/*font-size: .85rem;*/
			/*color: rgb(255 255 255);*/
		/*}*/
		/*.card-login .form-group .form-control:focus + .form-control-placeholder,*/
		/*.card-login .form-group .form-control:valid + .form-control-placeholder {*/
			/*top: -2px;*/
			/*font-size: .70rem;*/
			/*opacity: 0.5;*/
			/*transform: translate3d(0, -80%, 0);*/
			/*color: rgb(199 199 199);*/
		/*}*/

		.card-login .form-group .form-select {
			background-color: rgb(255 255 255 / 90%);
			border: 1px solid #68b0c8;
			border: 1px solid #ced4da;
			font-size: .9rem;
			font-weight: bold;
		}


		.box-form-card { display: none; }
		.box-form-card.active { display: block; }



		.card.card-contagem{ 
			position: relative;
			width: 450px;
			/*box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%) !important; */
			border: 0px solid rgba(0,0,0,.125) !important;
			margin: 0 auto; 
			background-color: #a671e9 !important;
			background-color: #7912fb !important;
			/*background-image: linear-gradient(to right, #a671e9 0%, #7a5e9f 100%) !important;*/
			/*background-image: linear-gradient(to right, #a671e9 0%, #7a5e9f 50%, #a671e9 100%);*/

			/*-webkit-transform: skew(-40deg);*/
			/*-moz-transform: skew(-40deg);*/
			/*-o-transform: skew(-40deg);*/


			background-image: linear-gradient(to top, #A638E7 0%, #757BF5 100%);
			box-shadow: 0.3rem 0.3rem 0.2rem rgb(255 255 255 / 90%) !important;
		}
		.card.card-contagem .card-header{
			padding: 0.5rem 1rem;
			padding-top: 30px;
			padding-bottom: 0px;
			margin-bottom: 0;
			background-color: rgba(0,0,0,0); 
			border-bottom: 2px solid rgba(255,255, 255, .05);
			text-align: center;
			color: white;
		}
		.card.card-contagem .card-header h1{ font-size: 2.5rem; }
		.card.card-contagem .card-header h2{ font-size: 1.5rem; }
		.card.card-contagem .card-header .logotipo{
			width: 120px;
			height: 120px;
			margin: 0 auto;
			background-color: white;
			border-radius: 50%;	
			text-align: center;
			margin-bottom: 10px;
		}
		.card.card-contagem .card-header .logotipo img{ width: 80%; margin: 0 auto; text-align: center; }
		.card.card-contagem .card-body{ 
			padding: 40px 40px;
			color: white;
		} 
		.card.card-contagem .card-body{ 
			padding: 40px 20px;
			color: white;
		} 

		.card.card-contagem .card-body .contador{
			margin: 0 auto;
			text-align: center;
			display: table;
		}


		.form-select,	
		textarea:focus, 
		textarea.form-control:focus, 
		input.form-control:focus, 
		input[type=text]:focus, 
		input[type=password]:focus, 
		input[type=email]:focus, 
		input[type=number]:focus, 
		[type=text].form-control:focus, 
		[type=password].form-control:focus, 
		[type=email].form-control:focus, 
		[type=tel].form-control:focus, 
		[contenteditable].form-control:focus {
			box-shadow: inset 0 -1px 0 #ddd;
			box-shadow: none;
		}


		::-webkit-input-placeholder {color: #000; }
		:-moz-placeholder { color: #000; opacity: 1; }
		::-moz-placeholder { color: #000; opacity: 1; }
		:-ms-input-placeholder { color: #000; }
		::-ms-input-placeholder { color: #000; }
		::placeholder { color: #000; }
		*::placeholder {
			color: #000;
		}


		.card-vlr-ingresso{
			width: auto;
			text-align: center;
			position: relative;
			display: table;
			margin: 0 auto;
			margin-bottom: 8px;
			padding: 10px 20px;
			background-color: rgb(39 20 149);
			border-radius: .35rem;

			-webkit-box-shadow: 2px 0px 18px 1px rgba(66,66,66,0.67); 
			box-shadow: 2px 0px 18px 1px rgba(66,66,66,0.67);
		}
		.card-vlr-ingresso .text-valor{
			width: auto;
			text-align: center;
			position: relative;
			display: table;
			margin: 0 auto;
			padding-left: 30px;
		}
		.card-vlr-ingresso .text-valor h3{ margin: 0 !important; padding: 0 !important; }



	/* BUTTONS */
		/*.btn-primary {*/
		/*	color: var(--color-black);*/
		/*	padding: .75rem 1.75rem; */
		/*	border-radius: .5rem;*/
		/*	font-size: .85rem;*/
		/*	background-color: var(--color-green);*/
		/*	border-color: var(--color-green);*/
		/*	border: 0;*/

		/*	background: linear-gradient(to left,  var(--color-white) 50%, #221d88 50%);*/
		/*	background-size: 210% 100%;*/
		/*	background-position:right bottom;*/
		/*	transition:all .5s ease;*/

		/*	box-shadow: 0.3rem 0.3rem 0.2rem rgb(255 255 255 / 90%) !important;*/
		/*}*/
		/*.btn-primary:hover, .btn-primary:focus {*/
		/*	background-color: var(--color-green-bold); */
		/*	border-color: var(--color-green-bold);*/
		/*	background-position:left bottom;*/
		/*}*/

		.btn-primary {
			color: #fff;
			background-color: rgb(50, 85, 120);
			border-color: rgb(50, 85, 120);
			background-color: #022595;
			border-color: #022595;
			border-radius: 8px;
		}
		.btn-primary:not(:disabled):not(.disabled).active, 
		.btn-primary:not(:disabled):not(.disabled):active, 
		.show>.btn-primary.dropdown-toggle {
			color: #fff;
			background-color: rgb(50, 85, 120);
			border-color: rgb(50, 85, 120);
			background-color: #313b67;
			border-color: #313b67;
		}
		.btn-primary:hover {
			color: #fff;
			background-color: rgb(24, 40, 56);
			border-color: rgb(24, 40, 56);
			background-color: #313b67;
			border-color: #313b67;
		}

		.btn-secondary {
			color: var(--color-white);
			padding: .75rem 1.75rem; 
			border-radius: .5rem;
			font-size: .85rem;
			border: 0;

			background: linear-gradient(to left, #673a8b 50%, var(--color-white) 50%);
			background-size: 210% 110%;
			background-position:right bottom;
			transition:all .5s ease;

			/*box-shadow: 0.3rem 0.3rem 0.2rem rgb(255 255 255 / 90%) !important;*/
		}
		.btn-secondary:hover, .btn-secondary:focus {
			background-position:left bottom;
			color: var(--color-black);
		}

		.btn:focus,.btn:active:focus,.btn.active:focus,
		.btn.focus,.btn:active.focus,.btn.active.focus {
			outline: none;
			box-shadow: none;
		}

		.btn-voltar{ border-radius: .5rem; }


		.btn-esqueci{
			text-decoration: none;
			color: var(--color-white);
			font-size: 0.75rem;
		}
		.btn-esqueci:hover{ text-decoration: none; color: rgb(255,255,255, .9);  }


		.btn-cadastro{
			text-decoration: none;
			color: var(--color-white);
			text-transform: uppercase;
			border-top: 1px solid white;
			border-bottom: 1px solid white;
			padding: 4px 0;
			font-size: 1.0rem;
		}
		.btn-cadastro:hover{ text-decoration: none; color: rgb(255,255,255, .9);  }







	/* DASHBOARD */
		.boxLateral{
			z-index: 99;
			position: fixed;
			left: -240px;
			top: 0;
			width: 240px;
			height: 100vh;
			background-color: white;

			-webkit-box-shadow: 2px 0px 18px 1px rgba(66,66,66,0.67); 
			box-shadow: 2px 0px 18px 1px rgba(66,66,66,0.67);
		}
		.boxLateral.active{ left: 0; }
		.boxLateral-close{
			position: absolute;
			right: -40px;
			top: 31px;
			/*background-color: white;*/
			width: 40px;
			/*padding: 9px;*/
			/*border-top-right-radius: .35rem;*/
			/*border-bottom-right-radius: .35rem; */

			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-content: center;
			justify-content: flex-start;
			align-items: center;
		}
		.boxLateral-close a{
			padding: 9px;
			background-color: white;
			background-color: #659833;
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
			border-top-right-radius: .35rem;
			border-bottom-right-radius: .35rem;
		}
		.boxLateral-close a i{ font-size: 1.5rem; color: white; }

		.boxLateral.active .boxLateral-close a{
			-webkit-transform: translate(0) rotate(180deg);
			/*-webkit-transform-origin: 60% 100%;*/

			-o-transform:translate(0) rotate(180deg);
			/*-o-transform-origin:60% 100%;*/

			transform: translate(0) rotate(180deg);
			/*transform-origin: 60% 100%;*/

			border-top-left-radius: .35rem;
			border-bottom-left-radius: .35rem;
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}
    
		.boxLateral-content{
			padding: 15px;		
			/*background-color: gray;*/

			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			align-content: space-between;
			justify-content: space-between;
			height: 100%;
		}
		.boxLateral-content .logotipo{ /*background-color: gray;*/ text-align: center; margin: 0 auto; }
		.boxLateral-content .busca{ margin: 25px 0; }
		.boxLateral-content .slider{ height: auto; }

		.filtro-itens a{ display: block; }

		.input-search{
			border-color: #659833;
			border-width: 2px;
			border-radius: .75rem;
		}
		.input-group-text.bsc{ background-color: #659833; border: 1px solid #659833; }
		.input-group-text.bsc i{ font-size: .75rem; color: white; }



	/* SELECT 2 */
		.select2-search--dropdown{
			padding: 0px !important;
		}
		.form-control-placeholder_cbo{
			font-size: .70rem;
			color: rgb(199 199 199);
		}
		.select2-results__option{
			font-size: .9rem !important;
			font-weight: bold !important;
			color: #FFFFFF !important; 
		}
		.select2-container--default .select2-selection--single{
			border: 0 !important;
			background-color: rgb(255,255,255, 0) !important;
		}
		.select2-container .select2-selection--single .select2-selection__rendered{
			font-size: .9rem !important;
			font-weight: bold !important;
			padding-left: 0 !important;
			padding-right: 10px !important;
			color: #FFFFFF !important;
		}
		.select2-container--default .select2-selection--single .select2-selection__arrow b{
			border-color: #FFF transparent transparent transparent !important;
		}
		.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{
			/*border-color: #FFF transparent transparent transparent !important;*/
			border-color: transparent transparent #FFF transparent !important;
		}
		.select2-dropdown{
			background-color: #4b2e7e !important;
			border: 1px solid #4b2e7e !important;
		}
		.select2-container--default .select2-results__option--selected{
			background-color: #8762f0 !important;
			color: #FFFFFF !important;
		}
		.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
			background-color: #8762f0 !important;
			color: #FFFFFF !important; 
		}
		.select2-container--default .select2-search--dropdown .select2-search__field{
			border: 1px solid #fff !important;
			font-size: .9rem !important;
			display: block !important;
		}



	/* MODAL */
		.modal-dialog-w-auto{
			position: relative;
			display: table !important;  /* This is important */ 
			overflow-y: auto;    
			overflow-x: auto;
			width: auto;
			min-width: 300px !important; 
			max-width: 800px !important;
		}



	/* OVERLAY */
		.overlay{
			position: absolute;
			top: -1500px;
			background-color: rgb(255,255,255, .95);
			height: 100%;
			width: 100%;
			border-radius: .25rem;
			z-index: 600;

			-webkit-transition: all .3s;
			-o-transition: all .3s;
			transition: all .3s;
		}
		.overlay.active{ top: 0px; }
		.overlay .text-msg{ padding: 10px; font-size: 1rem; text-align: center; }



	/* LINK PARA PAGAMENTO */
		.linkpagto{ display:none; }
		.linkpagto.active{ display:block; }



	/* LOADING */
		.box-loading{
			position: absolute;
			top: -1500px;
			background-color: rgb(255,255,255, .95);
			height: 100%;
			width: 100%;
			border-radius: .25rem;
			z-index: 600;

			-webkit-transition: all .3s;
			-o-transition: all .3s;
			transition: all .3s;
		}
		.box-loading.active{ top: 0px; }
		.box-loading .text-msg{ padding: 10px; font-size: 1rem; text-align: center; }





	/* LOADING */
		/*.loading-center{*/
			/*position: fixed;*/
			/*z-index: 800;*/
			/*top: 0;*/
			/*left: 0;*/
			/*height: 100vh;*/
			/*/*background: rgb(199 199 199 / 80%);*/*/
			/*width: 100%;*/
			/*padding: 0 15px;*/
			/*display: none;*/
		/*}*/
		/*.loading-center .overlay{ */
			/*position: absolute;*/
			/*top: 0;*/
			/*left: 0;*/
			/*z-index: 805;*/
			/*height: 100%;*/
			/*width: 100%;*/
			/*background-color: #000;*/
			/*opacity: .5;*/
			/*-webkit-transition: opacity 0.15s linear;*/
			/*transition: opacity 0.15s linear;	*/
		/*}*/
		/*.loading-center.loading{*/
			/*display: flex !important;	*/
			/*flex-direction: row;*/
			/*flex-wrap: nowrap;*/
			/*align-content: center;*/
			/*justify-content: center;*/
			/*align-items: center;*/
		/*}*/
		/*.loading-center .box-img{ position: relative; z-index: 810; }*/
		/*.loading-center .box-img img{ height: 75px !important; }*/



	/* FOOTER */
		footer{}


		.loading {
			display: flex;
			justify-content: center;
		}
		.loading div {
			width: 1rem;
			height: 1rem;
			margin: 2rem 0.3rem;
			background: #7912fb;
			border-radius: 50%;
			-webkit-animation: 0.9s bounce infinite alternate;
				  animation: 0.9s bounce infinite alternate;
		}
		.loading div:nth-child(2) {
			-webkit-animation-delay: 0.3s;
				  animation-delay: 0.3s;
		}
		.loading div:nth-child(3) {
			-webkit-animation-delay: 0.6s;
				  animation-delay: 0.6s;
		}

		@-webkit-keyframes bounce {
		  to {
			opacity: 0.3;
			transform: translate3d(0, -1rem, 0);
		  }
		}

		@keyframes bounce {
		  to {
			opacity: 0.3;
			transform: translate3d(0, -1rem, 0);
		  }
		}
		.donut {
		  width: 2rem;
		  height: 2rem;
		  margin: 2rem;
		  border-radius: 50%;
		  border: 0.3rem solid rgba(151, 159, 208, 0.3);
		  border-top-color: #979fd0;
		  -webkit-animation: 1.5s spin infinite linear;
				  animation: 1.5s spin infinite linear;
		}
		.donut.multi {
		  border-bottom-color: #979fd0;
		}

		@-webkit-keyframes spin {
		  to {
			transform: rotate(360deg);
		  }
		}

		@keyframes spin {
		  to {
			transform: rotate(360deg);
		  }
		}
		.ripple {
		  width: 2rem;
		  height: 2rem;
		  margin: 2rem;
		  border-radius: 50%;
		  border: 0.3rem solid #979fd0;
		  transform: translate(50%);
		  -webkit-animation: 1s ripple ease-out infinite;
				  animation: 1s ripple ease-out infinite;
		}

		@-webkit-keyframes ripple {
		  from {
			transform: scale(0);
			opacity: 1;
		  }
		  to {
			transform: scale(1);
			opacity: 0;
		  }
		}

		@keyframes ripple {
		  from {
			transform: scale(0);
			opacity: 1;
		  }
		  to {
			transform: scale(1);
			opacity: 0;
		  }
		}
		.multi-ripple {
		  width: 2.6rem;
		  height: 2.6rem;
		  margin: 2rem;
		}
		.multi-ripple div {
		  position: absolute;
		  width: 2rem;
		  height: 2rem;
		  border-radius: 50%;
		  border: 0.3rem solid #979fd0;
		  -webkit-animation: 1.5s ripple infinite;
				  animation: 1.5s ripple infinite;
		}
		.multi-ripple div:nth-child(2) {
		  -webkit-animation-delay: 0.5s;
				  animation-delay: 0.5s;
		}

		.fancy-spinner {
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  width: 5rem;
		  height: 5rem;
		}
		.fancy-spinner div {
		  position: absolute;
		  width: 4rem;
		  height: 4rem;
		  border-radius: 50%;
		}
		.fancy-spinner div.ring {
		  border-width: 0.5rem;
		  border-style: solid;
		  border-color: transparent;
		  -webkit-animation: 2s fancy infinite alternate;
				  animation: 2s fancy infinite alternate;
		}
		.fancy-spinner div.ring:nth-child(1) {
		  border-left-color: #979fd0;
		  border-right-color: #979fd0;
		}
		.fancy-spinner div.ring:nth-child(2) {
		  border-top-color: #979fd0;
		  border-bottom-color: #979fd0;
		  -webkit-animation-delay: 1s;
				  animation-delay: 1s;
		}
		.fancy-spinner div.dot {
		  width: 1rem;
		  height: 1rem;
		  background: #979fd0;
		}

		@-webkit-keyframes fancy {
		  to {
			transform: rotate(360deg) scale(0.5);
		  }
		}

		@keyframes fancy {
		  to {
			transform: rotate(360deg) scale(0.5);
		  }
		}
