/*!
 * Start Bootstrap - 1 Col Portfolio (http://startbootstrap.com/)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */

body {
   margin:0;
    padding: 0;
    border: 0;
    outline: 0;
	opacity: 1;
	background-color: black;
}

li{
	cursor: default;
}

ul>li>a{
	color: white !important;
}

img {
	width:100%;
}

video::-internal-media-controls-overlay-cast-button {
    display: none;
}

video{
	cursor: pointer;
}

/* header*/
.navbar-toggle .icon-bar:nth-of-type(2) {
	  top: 1px;
}

.navbar-toggle .icon-bar:nth-of-type(3) {
  	top: 2px;
}

.navbar-toggle .icon-bar {
	  position: relative;
	  transition: all 500ms ease-in-out;
}

.navbar-toggle.active .icon-bar:nth-of-type(1) {
	  top: 6px;
	  transform: rotate(45deg);
}

.navbar-toggle.active .icon-bar:nth-of-type(2) {
	  background-color: transparent;
}

.navbar-toggle.active .icon-bar:nth-of-type(3) {
	  top: -6px;
	  transform: rotate(-45deg);
}


/*
.navbar-inverse .navbar-toggle {
  border-color:transparent;
    background-color: #f9d12a !important;
}
*/
.navbar-inverse {
	padding-top:20px;
}

.nav>li>a {
	padding:0;
}

.navbar-nav {
    float: right;
}


.navbar-default {
    background-color: transparent;
    border-color: transparent;
	top:40px;
}


.navbar-default .navbar-toggle {
    border-color:transparent;
}


/*
.navbar-default .navbar-toggle .icon-bar {
    background-color:#595959 ;
}
*/

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color:transparent;
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: transparent; 
}


 .navbar-brand>img {
    display: block;
    width: 20%;
}



/*scroll reveal
*/

.hideme
{
    opacity:0;
}


@keyframes fade-in {
    from {opacity: 0; transform: scale(.97,.97)}
    to {opacity: 1;}
}
.fade-in-element {
  animation: fade-in 1.1s;
}

.scroll-indicator {	
	position:inherit;
	align-items: center;
	left: 45%;
	font-size: 50px;
	color: whitesmoke;
	opacity: .25;
	
	-webkit-animation: bounce 1s infinite; 
	animation: bounce 3s infinite;
}



@keyframes bounce {
  from {
    transform: translateY(30px);
  }
  to {
    transform: translateY(45px);
  }
}
@-webkit-keyframes bounce {
  from {
    transform: translateY(30px);
  }
  to {
    transform: translateY(45px);
  }
}


/*typography*/

h1{
	font-family: 'maiola', serif;
	font-size:50px;
	margin:0;
	color: whitesmoke;
}



h1.about-me{
	
font-size: 85px;
padding-top:50px;
}

h1#koko {
	color:#f38e72;
	text-align:center;
	margin:7%;
	font-size:65px;
}

h2 {
	
	font-family: 'lato';
	font-weight: 300;
	color: whitesmoke;
}

h2 a{
	color: gray;
}

h3 {
	font-family: 'lato';
	font-size:12px;
	color: whitesmoke;
	line-height:1.8em;
	text-transform: uppercase;
    letter-spacing: 3px;
}

.bold {
	font-weight:600;
}


p{
	color: whitesmoke;
	text-align: center;
}


a {
	color: whitesmoke;
	opacity:1;
}

a:hover{
	color: white;
opacity:.5;
-webkit-transition-delay: .7s ease;
}

a:visited{
	color: gray;
}

.p-contact
{
	font-family: "maiola";
	font-size:25px;
}

a.underline{
	text-decoration: underline!important;
}

/*navigation*/


#top-menu {
	
    margin: auto;
    padding: 0;
	
}


#top-menu li a {
	font-family: 'Lato';
    font-size: 12px;
	color: whitesmoke;
	display: block;
	float:right;
	margin:30px;
	line-height:1.8em;
	text-transform: uppercase;
    letter-spacing: 3px;
	padding-bottom:4px;
}


#top-menu li a:hover {
color: white
}



	
a,:visited {
  text-decoration: none!important;
  position: relative;
    -webkit-transition: 0.7s ease;
	padding-bottom:10px;
	
}

a.nav-link:after, a.nav-link:visited:after {
  content: '';
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  background:#5E5E5E;
  -webkit-transition: 0.7s ease;

}
a:hover:after, a:visited:hover:after {
  width: 100%;
}



/*divides*/

.small-divide {
    width: 14px;
    height: 2px;
    margin: 20px 0 26px 0;
    background:#5E5E5E;
}



.vert-divide {
    width: 70px;
    height: 3px;
    margin: auto;
    background:#5E5E5E;
	transform: rotate(90deg)
}




	

/*container-fluid overide*/
.container-fluid {
	padding-right: 4%!important;
    padding-left: 4%!important;
	margin:auto;
	max-width:1700px;
}




/*about container*/
.about{
	margin-top:7%;
	margin-bottom:4%;
	background-color: black;
}

li {
	float:left;
	padding-right:15px;
}

ul.social-links {
padding:0;
}




/*detail intro container*/

.detail-intro {
	
	margin-top:5%;
}





/*home hover*/

.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  padding: 50px 20px;
}

.hovereffect img {
  display: block;
  position: relative;
  max-width: none;
  width: calc(100% + 20px);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.hovereffect:hover img {
  opacity: 0;
  filter: alpha(opacity=40);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}


 .hovereffect h2 {
  color: #000;
  opacity: 0;
  filter: alpha(opacity=0);
  left: 0;
  position: absolute;
  text-align: center;
  top: 40%;
  width: 100%;
  font-size: 23px;
font-family:'lato';
text-transform:uppercase;
letter-spacing: 3px;
}


 .hovereffect:hover h2 {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}





 .hovereffect h3 {
  color: #000;
  opacity: 0;
  filter: alpha(opacity=0);
  left: 0;
  position: absolute;
  text-align: center;
  top: 48%;
  width: 100%;
}


 .hovereffect:hover h3 {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

/*mobile caption*/

.mobile-caption h2 {
	visibility: hidden;
	
}





/*borders*/

.yellow {
	background:#f2bb27;
	color:#f2bb27;
}

.red {
	background:#ef413d;
	color:#ef413d;
}


.orange {
	background:#f67d58;
	color:#f67d58;
}


.blue {
	background:#48b6af;
	color:#48b6af;
}


.peach {
	background:#f3ede4;
	color:#f3ede4;
}

.purple {
	background:#a40285;
	 color:#a40285;
}

.charcoal {
	 background:#5E5E5E;
	 color:#5E5E5E;
	
}


.pink {background:#f38e72;
	 color:#f38e72;	
}


.navy {
	background:#000a16;
	 color:#000a16;
	
}


/*BORDER-home*/
.border {
	 outline: solid 5px black;
	 padding:20px;
	
}
.top {
    height: 5px;
    width: 100%;
    top: 0;
    position: fixed;
    z-index: 9999;
}


.right {
    width: 5px;
    height: 100%;
    right: 0;
    bottom: 0;
    top: 0;
    position: fixed;
    z-index: 9999;
}

.bottom {
    height: 5px;
    width: 100%;
    bottom: 0;
    position: fixed;
    z-index: 9999;
} 

.left {
    width: 5px;
    height: 100%;
    left: 0;
    bottom: 0;
    top: 0;
    position: fixed;
    z-index: 9999;
}

.left {
    float: left;
}

.right {
    float: right;
}



.center{
	margin:auto;
	display:inline-block;
	text-align:center;
}



/*button effect*/

.btn.active {                
	display: none;		
}

.btn span:nth-of-type(1)  {            	
	display: none;
}
.btn span:last-child  {            	
	display: block;		
}

.btn.active  span:nth-of-type(1)  {            	
	display: block;		
}
.btn.active span:last-child  {            	
	display: none;	

}


a.button {
	
font-family: 'lato', serif;
font-size: 15px;
 color:white;	
	
}



.backnext {
	width:35%; 
	padding:15px;
	margin:auto;
	margin-top:3%;
	margin-bottom:3%;
	text-align:center
}


h1.intro {
font-family: 'Lato';
	font-size: 65px;
	font-weight: 500;
	color: whitesmoke;
	text-align:left;
}




/*spacing*/

.padding {
	
	padding-top:50px;
	padding-bottom:50px;
}

.margin {
	
	margin-top:13%;
	margin-bottom:13%;
}


.no-marg {
	
	margin:0;
	padding:0;
}


/*
contact page*/

.contact {
	width:60%;
	margin:auto;
	text-align:center;
}





/*
 FOOTER */
.footer {
	background:transparent;
	height: auto;
	padding-bottom: 30px;
	position: relative;
	width: 100%;
	left: 0;
	bottom: 0;
	color: whitesmoke;
	text-align: center;

}
ul {
    list-style-type: none;
    align-content: center;
    justify-content: center;
    display: flex;
}
	

 li{
	 display: inline-block
 }
 .verticalLine {
	 border-left: solid thin whitesmoke;
	 margin-left: 20px;
	 margin-right: 20px;
 }



	
	/*
 FOOTER */



/*BREAKPOINTS!!!
	*/

/*tablet*/

@media 
	only screen and (min-width: 1200px) {
		
		.row>.embed-responsive-16by9{
	padding-bottom: 25% !important;
}
}

@media 
only screen and (min-width: 996px) {
	.hideOnDesktop {
		 display:none;
	 }

}


@media 
only screen and (max-width: 996px) {
	.hideOnMobile {
		 display:none;
	 }
	
}


/*mobile*/

@media 
 only screen and (max-width: 768px) {
	 
/*hover effects*/	 
	 
.hovereffect a, .hovereffect h2 {
 display:none;
 
}
	 
	/*  mobile navigation*/
	 
	.navbar-default {
    background-color: transparent;
    border-color: transparent;
	top:10px;
}
	 
	
	nav li {
    width: 100% !important;
	padding:0;
	}
	 
	.navbar-brand {
		float: none;
		height: 50px;
		padding: 15px 15px;
		font-size: 18px;
		line-height: 20px;
	}
	 
	 .navbar-brand>img {
    display: block;
    width: 36%;
    padding-left: 15px;
}
	 
	 
	 .navbar-toggle {
		 margin-top:25px;
	 }
	 

	 
	 #top-menu {
    top: 10px;
    right: 5px;
	width:100%;
	margin-bottom:50px;
	 }
	 
	 
	 #top-menu li a { 
	font-size: 11px;
	margin:15px;
	text-align:center;
	float:none;
	 }
	 
	 
	  /*mobile spacing*/
	 
	 
	.padding {
    padding-top: 10px;
    padding-bottom: 10px;
}
	 
	 
 	.container-fluid {
	padding-right: 5%!important;
    padding-left: 5%!important;
	margin:auto;
}	 
.verticalLine {
	border-left: solid thin whitesmoke;
	margin-left: 10px;
	margin-right: 10px;
}
li {
	float:left;
	padding-right:5px;
}

.mobileHide {
		display: none;
}

ul{
	padding-left: 0px !important;
}
	 .col-md-3{
		 padding-bottom: 25% !important;
	 }
	 
	/* type*/
	 
	 .mobile-caption h2 {
	visibility: visible;
	font-size:20px;
	text-align:center;
	padding:20px;
	margin:auto;
}

	 
	 
	 h1.intro{
	font-size: 30px;
	}
	 
	 .p-contact {
	text-align:center;
		 
	 }
	 
	 h1.about-me {
		 text-align:center;
		 padding-top:0;
	 }
	 
h2{
	font-size: 15pt;
}
	 
	 
	 
ul.social-links {
    padding: 0;
    text-align: center;
}
	
.small-divide #center-mobile {
		 margin:auto!important;
}
.hideOnMobile {
		 display:none;
	 }
	 
}