/* Fonts Import*/
body {
 font-family: 'Open Sans', sans-serif;
 font-weight: 400;
 overflow: none;
}

h1, h2, h3, h4, h5, h6 {
 font-family: 'Archivo', sans-serif;
 font-weight: 500;
}

html{
	scroll-behavior: smooth;
}

/* Navbar*/

.navbar {
  margin-bottom: 0;
  border-radius: 0;
  overflow: none;
  background-color: #2f2f2f;
}
.navbar-inverse .navbar-brand{
	color:#FFFFFF;
	font-size:1.5em;
}
#myNavbar a{
	font-size:1.2em;
	color: #FFFFFF;
	border-bottom: 5px solid #2f2f2f;
	text-decoration: none;
}
#myNavbar a:hover{
	border-color: #226CE0;
	font-weight: bold;
	border-bottom: 5px solid #226CE0;
}
.navbar-inverse .navbar-nav>.active>a{
    border-bottom-color: #226CE0;
    background-color: #2f2f2f;
}

/*Carousel*/

.carousel-inner>.item>img{
	height: 550px;
	width: 100%;
}
.carousel-caption, blockquote{
	background-color: rgba(0,0,0,0.5);
	margin-bottom: 3%;
	border-radius: 10px;
	font-size:1.2em;
	left:0;
	width: 100%;
}
@media all and (max-width: 768px){
	.carousel-inner>.item>img{
		height: 300px;
	}
	.carousel-caption,blockquote{
		margin-bottom: 4%;
		padding: 0.5%;
		font-size: 0.9em;
	}
	h3{
		font-size: 1.4em;
	}
}



.featureSection , .genreSection, .register, .contact{
	text-align: center;
	width: 100%;
	padding: 3%;
	overflow: hidden;
}
.genreSection, .contact{background-color: #226CE0;}
.featureSection, .register{background-color: #FFFFFF;}

h1{
	margin-bottom: 3%;
}

/* Features */
.featureSection h1{color: #226CE0;}
.img-thumbnail{
	height:200px;
}
.card{
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	transition: 0.3s;
	float: left;
	cursor: pointer;
	height: 300px;
	color:#2f2f2f;
	font-size:1.3em;
	font-weight: bold;
	padding-bottom: 2%;
}
.card:hover{
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5);
}
@media all and (max-width: 768px){
	.card{
		margin:4% 0.5%;
		width: 100%;
		padding-bottom: 3%;
	}
}

/* Genre */
.genreSection h1{color:#FFFFFF;}
.collapsible {
  background-color: #FFFFFF;
  color: #226CE0;
  cursor: pointer;
  padding: 2%;
  font-weight: bold;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1.4em;
}
.collapsible:hover {
  color: #2f2f2f;
}
.collapsible:after {
  content: '\002B';
  color: #2f2f2f;
  font-weight: bold;
  float: right;
  margin-left: 1%;
}
.active:after {
  content: "\2212";
}
.content {
  padding: 0 2%;
  max-height: 0;
  background-color: #226CE0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color :#;
  font-size:1.3em;
  color:#FFFFFF;
  font-weight: bold;
}

/* Register */
.register{
  padding-bottom: 2%;
  font-size: 1.1em;
  color: #2f2f2f;
}
.register h1{color: #226CE0;}
.form-control:focus{
	border: 3px solid #2f2f2f;
	outline: none;
	box-shadow: none;
}
.btn-primary{
	background-color: #2f2f2f;
	color:#FFFFFF;
	font-size: 1.2em;
	border: none;
}
.btn-primary:hover{
	font-weight: bold;
	background-color: #2f2f2f;
}
@media all and (max-width: 768px){
	.btn-primary{
		width: 100%;
	}
}


/* Contact */
.contact{
	font-size: 1.3em;
	color:#FFFFFF;
	background-color: #226CE0;
}
.material-icons, .glyphicon-phone-alt{
	vertical-align: -5px;
}
.contact a, footer a{
	text-decoration: none;
	color:#FFFFFF;	
}
.contact a:hover, footer a:hover{
	color:#2f2f2f;
}

footer{
	background-color: #2f2f2f;
	color:#FFFFFF;
	font-weight: bold;
	font-size:1em;
	padding: 1% 0;
	text-align: center;
	left:0;
	bottom:0;
	width: 100%;
}

h1{font-size: 4em;}


/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: linear-gradient(#000,#111,#222);
  border-radius: 25px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(#222,#111,#000);
}