﻿.scaledxxs {
	transform: scale(0.1);
}

.scaledxs {
	transform: scale(0.2);
}

.scaledmd {
	transform: scale(0.3);
}

.scaled {
	transform: scale(0.4);
}

.scaledlgs {
	transform: scale(0.7);
}

.scaledlg {
	transform: scale(0.8);
}



.speech-bubble {
	position: relative;
	background: black;
	border-radius: .4em;
	border: 2px solid white;
	border-color: black;
	width: 240px;
	height: 140px;
	margin-left: 20px;
	margin-right: 20px;
	z-index: 999999999;
	text-align: center;
	opacity: 0.85;
}

a.nounderline {
	text-decoration: none;
	text-transform: none;
}

/* Criando o triângulo */

.speech-bubble.active:after,
.speech-bubble.active:before {
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 15px solid black;
	bottom: -15px;
	content: '';
	left: 50%;
	margin-left: -15px;
	position: absolute;
	transition: all 0.2s ease;
}

/* Criando a borda do triângulo */

.speech-bubble.active:before {
	border-left: 18px solid transparent;
	border-right: 18px solid transparent;
	border-top: 18px solid;
	border-top-color: inherit;
	bottom: -18px;
	margin-left: -18px;
}

.loader1,
.loader1:before,
.loader1:after {
	background: #ffffff;
	-webkit-animation: load1 1s infinite ease-in-out;
	animation: load1 1s infinite ease-in-out;
	width: 1em;
	height: 4em;
}

.loader1 {
	color: #ffffff;
	text-indent: -9999em;
	margin: 88px auto;
	position: relative;
	font-size: 11px;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

	.loader1:before,
	.loader1:after {
		position: absolute;
		top: 0;
		content: '';
	}

	.loader1:before {
		left: -1.5em;
		-webkit-animation-delay: -0.32s;
		animation-delay: -0.32s;
	}

	.loader1:after {
		left: 1.5em;
	}

@-webkit-keyframes load1 {
	0%, 80%, 100% {
		box-shadow: 0 0;
		height: 4em;
	}

	40% {
		box-shadow: 0 -2em;
		height: 5em;
	}
}

@keyframes load1 {
	0%, 80%, 100% {
		box-shadow: 0 0;
		height: 4em;
	}

	40% {
		box-shadow: 0 -2em;
		height: 5em;
	}
}

.loader2,
.loader2:before,
.loader2:after {
	border-radius: 50%;
	width: 2.5em;
	height: 2.5em;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation: load7 1.8s infinite ease-in-out;
	animation: load7 1.8s infinite ease-in-out;
}

.loader2 {
	color: #ffffff;
	font-size: 10px;
	margin: 80px auto;
	position: relative;
	text-indent: -9999em;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

	.loader2:before,
	.loader2:after {
		content: '';
		position: absolute;
		top: 0;
	}

	.loader2:before {
		left: -3.5em;
		-webkit-animation-delay: -0.32s;
		animation-delay: -0.32s;
	}

	.loader2:after {
		left: 3.5em;
	}

@-webkit-keyframes load7 {
	0%, 80%, 100% {
		box-shadow: 0 2.5em 0 -1.3em;
	}

	40% {
		box-shadow: 0 2.5em 0 0;
	}
}

@keyframes load7 {
	0%, 80%, 100% {
		box-shadow: 0 2.5em 0 -1.3em;
	}

	40% {
		box-shadow: 0 2.5em 0 0;
	}
}


#loader5 {
	display: flex;
	width: 35em;
	height: 100vh;
	margin-left: 40%;
}

#blocks {
	top: 0;
}

#caption {
	padding-left: 0.5em;
	margin: auto;
	font-size: 2.5em;
}

.b {
	background: #d5fff7;
	border: 0.3em solid #89f2f2;
	width: 4.5em;
	height: 4.5em;
	border-radius: 0.5em;
	margin: 1em;
	position: relative;
	animation-duration: 1.2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

#b1 {
	animation-name: b1;
}

#b2 {
	animation-name: b2;
	margin-left: 7.25em;
}

#b3 {
	animation-name: b3;
	margin-top: -6em;
}

#b4 {
	animation-name: b4;
	margin-left: 7.25em;
}

@keyframes b1 {
	0% {
		left: 0em;
		transform: rotate(0deg);
	}

	50% {
		left: 6.25em;
		bottom: 0em;
		transform: rotate(90deg);
	}

	100% {
		left: 6.25em;
		bottom: -6.125em;
		transform: rotate(90deg);
	}
}

@keyframes b2 {
	50% {
		bottom: 0em;
	}

	100% {
		bottom: -6.125em;
	}
}

@keyframes b3 {
	50% {
		top: 0em;
	}

	100% {
		top: -6.125em;
	}
}

@keyframes b4 {
	0% {
		left: 0em;
		transform: rotate(0deg);
	}

	50% {
		left: -6.25em;
		top: 0em;
		transform: rotate(90deg);
	}

	100% {
		left: -6.25em;
		top: -6.125em;
		transform: rotate(90deg);
	}
}

@media(max-width: 400px) {
	#loader5 {
		width: 100%
	}

	#caption {
		display: none;
	}
}

.switch {
	position: relative;
	display: inline-block;
	width: 54px;
	height: 24px;
}

	.switch input {
		opacity: 0;
		width: 0;
		height: 0;
	}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

	.slider:before {
		position: absolute;
		content: "";
		height: 16px;
		width: 20px;
		left: 4px;
		bottom: 4px;
		background-color: white;
		-webkit-transition: .4s;
		transition: .4s;
	}

	*.input {
		border-radius: 0px;
	}

.* {
	border-radius: 0px !important;
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

.card .card-header {
	border-radius: 0px;
}

.modal-content .modal-header {
	border-radius: 0px;
}

.modal-dialog {
	border-radius: 0px;
}

.modal {
	border-radius: 0px;
}

input:checked + .slider {
	background-color: #2196F3;
}

input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}

input[type=checkbox] {
	/* Double-sized Checkboxes */
	-ms-transform: scale(1.5); /* IE */
	-moz-transform: scale(1.5); /* FF */
	-webkit-transform: scale(1.5); /* Safari and Chrome */
	-o-transform: scale(1.5); /* Opera */
	padding: 10px;
}

/* Rounded sliders */
.slider.round {
	border-radius: 24px;
}

	.slider.round:before {
		border-radius: 50%;
	}

a.linkDark:link {
	color: dodgerblue;
}

/* visited link */
a.linkDark:visited {
	color: dodgerblue;
}

/* mouse over link */
a.linkDark:hover {
	color: #0099AB;
}

/* selected link */
a.linkDark:active {
	color: red;
}

iframe {
	max-width: 100%;
}