@font-face {
    font-family: 'Ageo Personal Use';
    src: url('//cdn.codecoda.com/css/fonts/AgeoPersonalUse-ExtraBold.woff2') format('woff2'),
	    url('//cdn.codecoda.com/css/fonts/AgeoPersonalUse-ExtraBold.otf')  format('truetype'),
        url('//cdn.codecoda.com/css/fonts/AgeoPersonalUse-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Ageo Personal Use';
    src: url('//cdn.codecoda.com/css/fonts/AgeoPersonalUse-Bold.woff2') format('woff2'),
	 	url('//cdn.codecoda.com/css/fonts/AgeoPersonalUse-Bold.otf')  format('truetype'),
        url('//cdn.codecoda.com/css/fonts/AgeoPersonalUse-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Ageo Personal Use';
    src: url('//cdn.codecoda.com/css/fonts/AgeoPersonalUse-Thin.woff2') format('woff2'),
	    url('//cdn.codecoda.com/css/fonts/AgeoPersonalUse-Thin.otf') format('truetype'),
        url('//cdn.codecoda.com/css/fonts/AgeoPersonalUse-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}


/* Add here all your CSS customizations */
.slider-big-font {
	font-size:71px;
	line-height:100px;
}

.top-bar {
	position:static;
}

.top-bar .colorful{
	height:3px;
	left:0;
	position:fixed;
	top:0;
	width:100%;
	z-index:4
}
.colorful{
	background:#8E8F90;
	height:5px;
	overflow:hidden;
}
.colorful .color{
	float:left;
	height:5px;
	width:10%
}
.colorful .color.blue0{
	background:#1736ba
}
.colorful .color.blue1{
	background: #005B93; //#0165b1;
	width:10%
}
.colorful .color.blue2{
	background: #0F98C5; //#1c81a5
}
.colorful .color.blue3{
	background:#40BDED; //#009CDF
}
.colorful .color.green{
	background:#02BFB1; //#00B2FF
}
.colorful .color.yellow{
	background:#6EDB6E; //#79D7FF
}
.colorful .color.orange{
	background: #33C460; //#ACE6FF
}
.colorful .color.pink1{
	background:#FCF349; //#E7E7E7
}
.colorful .color.pink2{
	background:#FBB04C; //#BDBFBF
}
.colorful .color.purple{
	background:#FF2257; //#8E8F90;
	width:20%
}

/*

#colorCycle { 
animation-name: homeCycle; 
animation-duration:12s; 
animation-direction:alternate; 
animation-iteration-count:infinite; 

-webkit-animation-name: homeCycle; 
-webkit-animation-duration:12s; 
-webkit-animation-direction:alternate; 
-webkit-animation-iteration-count:infinite; }	

@keyframes homeCycle 
{
0% {color:#1736ba;} 
10% {color:#0165b1;} 
20% {color:#1c81a5;} 
30% {color:#009CDF;}
40% {color:#00B2FF;}
50% {color:#79D7FF;}
60% {color:#ACE6FF;}
70% {color:#E7E7E7;}
80% {color:#BDBFBF;}
90% {color:#8E8F90;} 
} 

@-webkit-keyframes homeCycle 
{ 
0% {color:#1736ba;} 
10% {color:#0165b1;} 
20% {color:#1c81a5;} 
30% {color:#009CDF;}
40% {color:#00B2FF;}
50% {color:#79D7FF;}
60% {color:#ACE6FF;}
70% {color:#E7E7E7;}
80% {color:#BDBFBF;}
90% {color:#8E8F90;} 
}   
*/
/* Books */
@media screen and (max-width: 780px) {
	#booksModal {
		display: none!important;
	}
}

@media screen and (max-width: 980px) {
	#book1 {
		display: none!important;
	}

	#book2 {
		display: none!important;
	}
}