@charset "utf-8";
/* CSS Document */

.narrow-content {
	width: 100%;

	&--800 {
		max-width: 800px;
	}
}

.centered-block {
	margin-left: auto;
	margin-right: auto;
}

.text-center {
	text-align: center;
}

.full {
	width: 100%;
}

.half {
	width: 50%;
}

.third {
	width: 33.333%;
}

.two-third {
	width: 66.666%;
}

.fourth {
	width: 25%;
}

.flex {
	display: flex;
}
.flex-wrap {
	flex-wrap:wrap;
	display: flex;
}
.flex-center {
	justify-content:center;
}
.flex-between {
	justify-content:space-between;
}
.flex-around {
	justify-content:space-around;
}
.flex-col {
	flex-direction: column;
}
.flex-col-rev {
	flex-direction: column-reverse;
}

.mob-wrap {
	flex-wrap: wrap;
}

.column-reverse {
	flex-direction:row-reverse;
}
.type-animation {
	position: relative; 
}
.type-animation:after {
	content: "|";
	display: inline-block;
	visibility: visible;
	color: $color-blue;
	position: absolute;
	top: 10px;
	left: 102%;
	animation: cursor-animation 1s infinite;
}
@keyframes cursor-animation {
0%, 100% {
  opacity: 0;
}
50% {
  opacity: 1;
}
}

// COLORS
.color-blue {
	color: $color-blue;
}
.color-dark-blue {
	color: $color-dark-blue;
}
.color-light-blue {
	color: $color-light-blue; 
}
.color-purple {
	color: $color-purple;
}
.color-light-purple {
	color: $color-light-purple; 
}
.color-pink {
	color: $color-pink;
}
.color-green {
	color: $color-green;
}
.color-orange {
	color: $color-orange;
}
.color-yellow {
	color: $color-yellow;
}

.bg-blue {
	background: $color-blue;
}
.bg-dark-blue {
		background: #E702B4; 
}
.bg-light-blue {
	background: #E702B4; 
}
.bg-dark-navy {
    background: #16142D;
}
.bg-purple {
	background: $color-purple;
}
.bg-light-purple {
	background: $color-light-purple;
}
.bg-pink {
	background: $color-pink;
}
.bg-green {
	background: $color-green;
}
.bg-orange {
	background: $color-orange;
}
.bg-yellow {
	background: $color-yellow;
}
.bg-gray {
	background: $color-gray;
}

.border-blue {
	border-color: $color-blue !important;
}
.border-dark-blue {
	border-color: $color-dark-blue !important;  
}
.border-light-blue {
	border-color: $color-light-blue !important; 
}
.border-dark-navy {
	border-color: $color-dark-navy !important;  
}
.border-purple {
	border-color: $color-purple !important;
}
.border-light-purple {
	border-color: $color-light-purple !important;
}
.border-pink {
	border-color: $color-pink !important;
}
.border-green {
	border-color: $color-green !important;
}
.border-orange {
	border-color: $color-orange !important;
}
.border-yellow {
	border-color: $color-yellow !important;
}
.border-gray {
	border-color: $color-gray !important;
}


@include bp(desktop) {
	.mob-wrap {
		flex-wrap: nowrap;
	}
}