$cubic: cubic-bezier(0.77,0,.175,1);
$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);

$contestIconBox: 30px;
$contestIconSVG: 15px;



body {
	background: $white;
    font-family: $text;
    color: $black;
    font-size: $f16;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
	text-rendering: geometricPrecision;
    scroll-behavior: smooth;
    &.on-mobile {
        user-select: none;
    }
    & > svg { display: none; }
}

*::-webkit-scrollbar { width: 10px; background: transparent; }
*::-webkit-scrollbar-thumb { border-radius: 10px; background: $black; }

*,
*:focus {
	outline: none; box-sizing: border-box;
	-webkit-tap-highlight-color: transparent !important;
	outline-color: transparent !important;
	-webkit-focus-ring-color: transparent !important;
}
a {
    &:hover { text-decoration: none; }
}
figure { margin: 0; }
img { border: 0 !important; }

.one { @include size(100%); }
.two { @include size(calc(100% / 2)); }
.three { @include size(calc(100% / 3)); }
.four { @include size(calc(100% / 4)); }
.five { @include size(calc(100% / 5)); }
.six { @include size(calc(100% / 6)); }
.seven { @include size(calc(100% / 7)); }
.eight { @include size(calc(100% / 8)); }
.nine { @include size(calc(100% / 9)); }
.ten { @include size(calc(100% / 10)); }
.eleven { @include size(calc(100% / 11)); }
.twelve { @include size(calc(100% / 12)); }

.section {
	display: block;
	@include size(100%, auto);
}

.main-title {
	font-weight: $bold;
	font-family: $title;
	color: $red;
	&.white { color: $white; }
	&.black { color: $black; }
	&.center {
		width: 100%;
		text-align: center;
		margin-bottom: 40px;
	}
}
h2.main-title { font-size: 3em; }
h3.main-title { font-size: 2.6em; }
h4.main-title { font-size: 2em; }

.btn-primary {
	background: $red;
	font-weight: $bold;
	font-family: $title;
	text-transform: uppercase;
	font-size: $f12 !important;
	border-radius: 24px;
	border: 0;
	padding: 10px 23px;
	&:hover {
		background: $black;
		color: $white;
	}
	&.long {
		padding: 10px 40px;
	}
	&.grey {
		background: $black;
		&:hover { background: $red; }
	}
	&.fb { background: $fb; }
	&.google { background: $google; }
	&.tw { background: $tw; }
}

.btn:hover,
.btn:focus {
	box-shadow: none !important;
}

.breadcrumb {
	display: block;
	background: transparent;
	height: auto;
	font-size: $f12;
	color: $black;
	padding: 0;
	a { color: $black; }
}

.full-block-image {
	padding: 12vh 0;
}

.action--square {
	display: flex;
	@extend %flexCenterCenter;
	@include size($contestIconBox,$contestIconBox);
	.icon {
		@include size($contestIconSVG,$contestIconSVG);
		fill: $white;
	}
	&.red { background: $red; }
	&.grey { background: $black; }

}

.dropdown-custom {
	.dropdown {
		&-menu {
			width: 100%;
			background: $grey;
			border-radius: 0;
			border: 0;
			.dropdown-item {
				font-weight: $bold;
				margin: 4px 0;
				&.active {
					background: transparent;
					color: $red;
				}
				&:hover {
					background: transparent;
					color: $red;
				}
			}
		}
		&-toggle {
			display: flex;
			width: 100%;
			align-items: center;
			border: 1px solid $grey;
			background: $white;
			position: relative;
			padding-right: 40px;
			font-weight: $fBlack;
			font-size: 1.1em;
			color: $red;
			margin-right: 20px;
			@extend %arrowClose;
			border-radius: 0;
			box-shadow: 0;
			&:before,
			&:after {
				left: auto;
				right: 5px;
				background: $red;
				border: 0;
				border-radius: 6px;
				@include size(10px,3px);
			}
			&:after { right: 10px; }
			.drop-label {
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
				&:focus {
					-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
				}
			}
		}
	}
	&.show {
		.dropdown-toggle {
			background: $white;
			color: $black;
			box-shadow: 0;
			&:focus {
				border: 0;
				box-shadow: 0;
			}
			.drop-label {
				-webkit-tap-highlight-color: transparent !important;
				&:focus {
					-webkit-tap-highlight-color: transparent !important;
				}
			}
		}
	}
}

.pagination-box {
	display: flex;
	@extend %flexCenterEnd;
	.pagination {
		height: 30px;
		margin-bottom: 0;
		border: 0;
		.page-item {
			border: 0;
			height: 100%;
			.page-link {
				display: flex;
				@extend %flexCenterCenter;
				background: transparent;
				color: rgba($black,0.8);
				height: 100%;
				line-height: 1em;
				padding: 0 15px;
				border: 0;
			}
			&.controls {
				display: block;
				height: 100%;
				.page-link {
					display: block;
					@include size(100%,100%);
					position: relative;
					@extend %arrowClose;
					&:before,
					&:after {
						background: $red;
						@include size(10px,3px);
						border-radius: 6px;
					}
					&[aria-label="Previous"] {
						&:before { margin-top: -3px; }
						&:after { margin-top: 3px; }
					}
					&[aria-label="Next"] {
						&:before { margin-top: 3px; }
						&:after { margin-top: -3px; }
					}
				}
			}
			&.active {
				.page-link {
					background: transparent;
					color: $red;
				}
			}
		}
	}
}


.tag {
	float: left;
	display: block;
	font-weight: $fBlack;
	font-size: $f14;
	color: $red;
	background: $white;
	background-clip: padding-box;
	height: 35px;
	line-height: 27px;
	border-top: 3px solid $red;
	border-left: 3px solid $red;
	border-bottom: 3px solid $red;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	padding: 0 20px 0 20px;
	margin: 5px 30px 5px 0;
	position: relative;
	&:before,
	&:after {
		content: '';
		position: absolute;
		top: 50%;
		right: 1px;
		display: block;
		background: $red;
		@include size(31px,31px);
		border-radius: 10px;
		z-index: -1;
		transform: translate(50%,-51%) rotate(45deg) scale(0.97);
	}
	&:after {
		background: $white;
		@include size(25px,25px);
		border-radius: 7px;
	}
}