@import url('https://fonts.googleapis.com/css?family=Coming+Soon');
@import url('https://fonts.googleapis.com/css?family=Gloria+Hallelujah');

@import url('https://fonts.googleapis.com/css?family=Merienda|Rancho');



*{
  box-sizing: border-box;
}

body{
	width: 100%;
	height: 100%;
	overflow-x: hidden;
}

html {
    width: 100%;
    height: 100%;
}

.head{
	/*display: table;
    align-content: center;*/

	height: 100%;
	width: 100%;
	background: url(../img/header1.png) no-repeat center right scroll;
	    -webkit-background-size: cover;
	    -moz-background-size: cover;
	    background-size: cover;
	    -o-background-size: cover;
	color: white;
    display: table;
    text-align: center;
      -webkit-user-select: none;  
	  -moz-user-select: none;    
	  -ms-user-select: none;      
	  user-select: none;

}

.headover{
	background: rgba(0, 0, 0, 0.80);
	height: 100%;
}

.head h1{
	top: 2em;
}

.middler{
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 10%;
}

/*.circle{
	border-radius: 50%;
	height: 300px;
	width: 300px;
	background: rgba(22, 177, 212, 1);
}*/

.circle > img{
	height: 70px;
	margin-top: 3em;
	margin-bottom: 1em;
}

.circle > h1{
	font-family: 'Merienda', cursive;

}

.head-para{
	font-family: 'Gloria Hallelujah', cursive;
	font-size: 4em;
}

.btn-outline-header {
	width: 8em;
  color: #ddd;
  background-image: none;
  background-color: transparent;
  border-color: #ddd;
}

.btn-outline-header:hover {
  color: #000;
  background-color: #fff;
  border-color: #ddd;
}


.icon-down{
	height: 5em;
	filter: invert(100%);
	opacity: 0.5;
	-webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

.icon-down:hover{
	/*height: 5em;
	filter: invert(100%);*/
	opacity: 1;
	height: 6em;
	
}

.affix {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.navbar-custom{
	line-height: 1 !important;
}

.nav-brand-sub{
	font-size: 14px;
}

.nav-brand-img{
	vertical-align: top;
	padding-top: 2 !important;
}

/* fixed to top styles */
/*.affix.navbar {
  background-color: #fff;
}*/
/*.affix.navbar .nav-item>a,
.affix.navbar .navbar-brand {
    color: #222;
}*/

section{
	font-family: 'Coming Soon', cursive;
	height: 100%;
}

.blackover{
	background: rgba(0, 0, 0, 0.61);
	height: 100%;
}

#about{
	width: 100%;
	position: relative;
}

#about p{
	padding-top: 1em;
	font-size: 30px;
}
#about > .container > .row{
	padding-top: 5em;
}

#about > .container > .row > .bg{
	padding-top: 2.2rem;
		background: rgba(236, 217, 4, 1);
	width: 500px;
	height: 70px;
	transform: skewY(-3deg);

}

#about2{
	/*position: relative;*/
	display: none;
	width: 100%;
	/*margin-top: 80px;*/
	height: 100%;
	margin-left: 200%;
	z-index: 999;
	background: #fff;
		-webkit-transition:background 1s;
		-moz-transition:background 1s;
		-o-transition:background 1s;
		transition:background 1s
}

#about2 p{
	/*padding-top: 1em;
	font-size: 14px;*/
	display: inline-block !important;
}

#about2 > .container > .row > .bg{
	padding-top: 2.2rem;
		background: rgba(236, 217, 4, 1);
	width: 500px;
	height: 70px;
	transform: skewY(-3deg);

}

.topbar{
	width: 100%;
	padding: 30px;
	height: 50px;
}

.team-member{
	height: 500px;
}

.pro-img{
	background: url(../img/mk1.jpg) no-repeat top center;
		-webkit-background-size: contain;
	    -moz-background-size: contain;
	    background-size: contain;
	    -o-background-size: contain;
	height: 200px;
	border-radius: 10px;
}

.pro-img1{
	background: url(../img/pro-pic.jpg) no-repeat top center;
		-webkit-background-size: contain;
	    -moz-background-size: contain;
	    background-size: contain;
	    -o-background-size: contain;
	height: 200px;
	border-radius: 10px;
}

.icon{
	font-size: 10px;
}

/*#about > .container > .row > .bg > .fg{

	border: rgba(236, 217, 4, 255) solid;
	width: 500px;
	height: 70px;
}*/

#class{
	position: relative;
	background: url(../img/class.jpeg) no-repeat center right scroll;
	    -webkit-background-size: cover;
	    -moz-background-size: cover;
	    background-size: cover;
	    -o-background-size: cover;
	    color: white;
}

#class p{
	padding-top: 1em;
	font-size: 30px;
}

#class > .blackover > .container > .row{
	padding-top: 5em;
}

#class > .blackover > .container > .row > .bg{
	padding-top: 2.2rem;
		background: rgba(0, 208, 240, 1);
	width: 500px;
	height: 70px;
	transform: skewY(-3deg);

}

#hunt{
	/*height: 100%;*/
	position: relative;
}

#hunt p{
	padding-top: 1em;
	font-size: 30px;
}

#hunt > .container > .row{
	padding-top: 5em;
}


#hunt > .container > .row > .bg{
	padding-top: 2.2rem;
		background: rgba(4, 122, 0, 1);
	width: 500px;
	height: 70px;
	transform: skewY(-3deg);

}

#coll{
	/*height: 100%;*/
	position: relative;
}

#coll p{
	padding-top: 1em;
	font-size: 30px;
}

#coll > .container > .row{
	padding-top: 5em;
}

#coll > .container > .row > .bg{
	padding-top: 2.2rem;
		background: rgba(236, 217, 4, 1);
	width: 500px;
	height: 70px;
	transform: skewY(-3deg);

}