@import url('https://fonts.googleapis.com/css?family=Didact+Gothic|Luckiest+Guy');

/*
font-family: 'Luckiest Guy', cursive;
font-family: 'Didact Gothic', sans-serif;
font-family: 'Poiret One', cursive;
font-family: 'Julius Sans One', sans-serif;
font-family: 'Rubik Mono One', sans-serif;
*/

* {
	font-family: 'Didact Gothic', sans-serif;
}

.display-1,
h2 {
	font-family: 'Luckiest Guy', cursive;
}

h2{
	font-size:30px;
	color: #250059;
}

h3 {
	font-size: 20px;
}


.display-3{
	font-size:50px;
}


#title {
	background: url(../img/bgtile.png);
	background-position: center right;
	background-size: cover;
}

.nav-link {
	background: rgba(255, 255, 255, .75);
	margin-left: 5px;
	color: #5C00C5;
	border: 1px solid #fff;
}

.nav-link:hover,
.nav-pills .show > .nav-link {
	background: #5C00C5;
	margin-left: 5px;
	color: #fff;
	border: 1px solid #fff;
}

@keyframes p2o {
	0% {
		color: #5C00C5;
	}

	100% {
		color: #FFDB45;
	}
}

#title {
	height: 400px;
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #5C00C5;
}

#title h1 {
	color: #FFDB45;
	font-size: 60px;
	animation: p2o 2s linear 1;
	/*	transform: perspective( 153px) rotateY(-10deg);*/
}

#title p {
	max-width: 850px;
	/*	margin:0px auto;*/
	font-size: 20px;
}

#crosshatch1,
#crosshatch2,
#star,
#crackle,
#building,
#title svg {
	position: absolute;
	right: 0px;
	top: 0px;
}

@keyframes slidefromleft {
	0% {
		right: 100%;
	}

	100% {
		right: 0%;
	}
}

#crosshatch1 {
	animation: slidefromleft .25s ease-in 1;
}

@keyframes slidefromtop {
	0% {
		top: -100%;
	}
	50% {
		top: -100%;
	}


	100% {
		top: 0%;
	}
}

#crosshatch2 {
	animation: slidefromtop .75s ease-in 1;
}

@keyframes slidefrombottom2 {
	0% {
		top: 100%;
	}

	50% {
		top: 100%;
	}

	100% {
		top: 0%;
	}
}

#building {
	animation: slidefrombottom2 .75s ease-in 1;
}

@keyframes slidefromright {
	0% {
		right: -1000px;
	}

	70% {
		right: -1000px;
	}

	100% {
		right: -300px;
	}
}

#title #star {
	animation: slidefromright 1s ease-in 1;
	right: -300px;
	top: -200px;
}

@keyframes rotate {
	0% {
		transform: rotateZ(0);
	}

	100% {
		transform: rotateZ(360deg);
	}
}

#starrotate {
	animation: rotate 60s linear infinite;
}

@keyframes slidefrombottom {
	0% {
		opacity: 0;
	}

	80% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

#crackle {
	animation: slidefrombottom 1.5s ease-in 1;
}

a {
	color: #5C00C5;
}

.btn-primary {
	background: #5C00C5;
	border: none;
}

.btn-primary:hover {
	background: #7700E6;
}

.btn, .nav-pills .nav-link, .navbar-toggler{
	border-radius: 0;
}

#sidebar ul {
	/*	list-style: none;*/
	padding-left: 20px;
}

#cattitle {
	color: #FFCE00;
}

/*
#sidebar li:before{
	content:'_';
}
*/

.formcat ul{
	list-style: none;
	margin:.125em;
	padding-left:.75em;
}

.fa-star {
	color: #FFCE00;
}

.bg-primary {
	background-color: #5C00C5 !important;
}

.abelogo {
	max-width: 100px;
	margin: 0 auto;
}

.abelogo svg {
	width: 100%;
}

.abelogo path {
	fill: #fff;
}

@media only screen and (max-width:1060px) {
	#title {
		background-position: center left;
		background-size: cover;
	}

	#crosshatch1,
	#crosshatch2,
	#star,
	#crackle,
	#building,
	#title svg {
		position: absolute;
		right: auto;
		top: 0px;
		left: 0px;
	}

	#star{
		right: 0px;
		left:auto;
	}

}

@media only screen and (max-width:840px) {
	#title {
		height: 500px;
	}
	.cimg{
		padding-bottom:20px!important;
	}
}



@media only screen and (max-width:560px) {
	#title {
		height: 400px;
	}

	#title h1 {
		font-size: 40px;
	}

	#title p {
		font-size: 14px;
	}

}