/* @override 
	http://thetoptheband.com/index/clemensknieper.css
	http://www.clemensknieper.com/clemensknieper.css */

/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */


body {

  color: #5a5a5a;
  
  
}

.background {
	width: 100%;
	height: 110%;
	position: fixed;
	opacity: 0;
	z-index:-1;
}

.black {
	width: 100%;
	height: 100%;
	position: fixed;
	opacity: 1;
	display: none;
	z-index:1;
	pointer-events: none;
	background-color: #000000;
}

.mobile-break {
		display: block;
	}

.container {
	width: 100%;
}


.login-link {
	text-align: right;
	margin-right: 10px;
	margin-top: 10px;
	right: 10px;
	top: 10px;
	position: absolute;
}


.background-image {
	width:100%;
	position: absolute;
	opacity: .5;
	bottom: 0;
	left: 0;
		   	animation: bg-fade 2s ease-in;
	   }
}

.chevron::before {
	border-style: solid;
	border-width: 0.12em 0.12em 0 0;
	content: '';
	display: inline-block;
	height: 0.5em;
	position: relative;
	top: -.16em;
	transform: rotate(-45deg);
	vertical-align: center;
	width: 0.5em;
}

.chevron.right:before {
	left: 0;
	transform: rotate(45deg);
}


/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

#navigation.navbar-default .navbar-brand {
    color: rgba(119, 119, 119, 1);
}
#navigation.navbar-default {
	font: 15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;

	background-color: rgba(255, 255, 255, 0);    border-width: 0px;
    border-radius: 0px;
	margin-top: 50px;
	letter-spacing: .2px;
	position: absolute;
	width: 100%;
}


.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
  
}



.navbar .navbar-collapse {
  text-align: center;
}

#navigation.navbar-default .navbar-nav>li{
	padding-right: 25px;
	padding-left: 25px;
}
#navigation.navbar-default .navbar-nav>li>a {
    color: rgba(119, 119, 119, 1);
}
#navigation.navbar-default .navbar-nav>li>a:hover,
#navigation.navbar-default .navbar-nav>li>a:focus {
    color: rgba(51, 51, 51, 1);
}
#navigation.navbar-default .navbar-nav>.active>a,
#navigation.navbar-default .navbar-nav>.active>a:hover,
#navigation.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(85, 85, 85, 1);
}
#navigation.navbar-default .navbar-toggle {
}
#navigation.navbar-default .navbar-toggle:hover,
#navigation.navbar-default .navbar-toggle:focus {
}
#navigation.navbar-default .navbar-toggle .icon-bar {
}
#navigation.navbar-default .navbar-toggle:hover .icon-bar,
#navigation.navbar-default .navbar-toggle:focus .icon-bar {
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */


.item img{

width: auto;

max-height: 800px!important;

}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

.carousel-control {
	background-image: none!important;
	
	
}

.carousel-inner > .item {

}

.carousel-inner > .item > .video, img {
position: absolute;
  top: 50%;
  
  left: 50%;
  max-width: 98%!important;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  max-height: 800px!important;
	
}

.carousel-inner .item img {
}


.latest {
	position: relative;
	transition: color .7s ease-in-out;
	   -moz-transition: color .7s ease-in-out;
	   -webkit-transition: color .7s ease-in-out;
	   z-index:5
}

.whiteText {
	color: #ffffff!important;
}

.whiteBg {

	background-color: #ffffff!important;
}

#otherCarousel img {
	
	max-width: 800px!important;
}


/* Declare heights because of positioning of img element */
.carousel .item {
  height: 100%;
z-index:2;
  
}

.carousel {
	margin-bottom: 75px;
}




.glyphicon-chevron-left, .glyphicon-chevron-right  {
  display:block;
	color: #ffffff;
	text-shadow: 0 0 0;
	font-size: 20pt!important;
	opacity: 1;
	padding-top: 8px;
	pointer-events: all;
}
.carousel-control .glyphicon-chevron-left:before {
  margin-left:0;
  
  
}

.carousel-control-container {
	position: fixed;
	height: 100%;
	width: 100%;
	pointer-events: none;
	z-index: 4;
	display: none;
	opacity: 1;
	transition: opacity .7s ease-in-out;
	   -moz-transition: opacity .7s ease-in-out;
	   -webkit-transition: opacity .7s ease-in-out;
	
}

.carousel-indicators {
	position: relative;
	bottom: 0;
}

.carousel-nav {
	display: inline-block;
	width: 100%;
	position: relative;
	padding-left: 50px;
	padding-right: 50px;
	margin-bottom: 20px;
	margin-top: 20px;
}

.carousel-indicators li {
    background-color: rgba(255, 255, 255, 0.5);
	color: #929292;
	border-style: none;
	
	
	
}
.carousel-indicators .active {
    background-color: #ffffff;
    border-style: none;
    width: 10px;
    height: 10px;
    margin: 1px;
    
}

.moreprojects {
	text-align: center;
	font-weight: 500!important;
	text-transform: uppercase;
	color: #000000;
	position: relative;
	font: 20px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	padding-bottom: 60px;
	padding-top: 120px;
}

.moreprojects a {
	color: #000000;
}

.container {
	padding-left: 0!important;
	padding-right: 0!important;
}



/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 20px;
  text-align: center;
}
.marketing h2 {
  font-weight: normal;
}
.marketing .col-lg-4 p {
  margin-right: 10px;
  margin-left: 10px;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 80px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}


/* About ME
------------------------- */
.about {
	
	
	position: relative;
	width: 70%;
	padding-top: 60px;
	padding-bottom: 40px;
}

/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
}
.site-wrapper-inner {
  display: table-cell;
  vertical-align: top;
}
.cover-container {
  margin-right: auto;
  margin-left: auto;
}

/* Top
------------------------- */

.top {
	position: absolute;
}

.top-box {
	position: relative;
	top: 50%;
	text-align: center;
}

.title-box {
	text-align: center;
	padding: 105px;
}

.overline {
	width: 100%;
	font-style: italic;
}


h1 {
	font-family: 'Open Sans';
	font-weight: 100;
	font-size: 30pt;
	letter-spacing: px;
}

.highlight {
	color: #a5a5a5;
	font-size: 24px;
}

h3 {
	font: 30pt/42px 'Open Sans', sans-serif;
	font-weight: 100;
	letter-spacing: 1px;
	text-transform: uppercase;
}



h2 {
	font-family: 'Open Sans', sans-serif;	font-size: 12pt;
	
	text-transform: uppercase;
	letter-spacing: 1px;
}

.name {
	padding-top: 0;
	margin-bottom: -6px;
}

.hireme-button {
	margin-top: 50px;
	letter-spacing: 2px;
	font-weight: 800;
	text-transform: uppercase;
	font: 17px "Helvetica Neue Bold", Arial, Helvetica, Geneva, sans-serif;
	text-align: center;
}

.getintouch {
	
	margin-top: -50px;
	margin-bottom: 250px;
	z-index: 2;
	position: relative;
}


.small {
    
    max-width:600px;
    text-align:center;
    margin-left: auto;
    margin-right:auto;
}



.btn-round-lg {
	background: linear-gradient(270deg, #ff8e16 0%, #fe005c 100%) #f91952;
	background-size: 400% 400%;
	border-style: none;
	border-radius: 46px;
	padding: 20px 66px;
	-webkit-animation: btn-glow 15s ease infinite;
	-moz-animation: btn-glow 15s ease infinite;
	animation: btn-glow 15s ease infinite;
	font-size: 15px;
}

.hiremefor {
}

.getintouch-button {
	letter-spacing: 2px;
	font-weight: 800;
	text-transform: uppercase;
	font: 17px "Helvetica Neue Bold", Arial, Helvetica, Geneva, sans-serif;
	text-align: center;
	padding-top: 130px;
	background-position: 0px 0px;
		background-repeat: repeat-x;
	
		animation: animatedBackground 40s linear infinite;
}




@-webkit-keyframes btn-glow {
    0%{background-position:-50% 50%}
    50%{background-position:50% 50%}
    100%{background-position:-50% 50%}
}
@-moz-keyframes btn-glow {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes btn-glow { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
	
.paragraph {
	font: 16pt "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	text-align: center;
	padding-top: 10px;
	font-style: italic;
	font-weight: 300;
};



footer {
		text-align: center;
		position: relative;
		padding: 30px 0 60px;
		width: 100%;
}

@-webkit-keyframes bg-fade {
    0%{opacity: 0}
    100%{opacity: .5}
}
@-moz-keyframes bg-fade {
    0%{opacity: 0}
    100%{opacity: .5}
}
@keyframes bg-fade { 
   0%{opacity: 0}
   100%{opacity: .5}
}






/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 768px) {
  /* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 20px;
  }
  .navbar-wrapper .container {
  }
  .navbar-wrapper .navbar {
    padding-right: 0;
    padding-left: 0;
  }

  /* The navbar becomes detached from the top, so we round the corners */
  .navbar-wrapper .navbar {
    border-radius: 4px;
  }

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 992px) {
  .featurette-heading {
    margin-top: 120px;
  }
}

@media (max-width: 768px) {


  
  .carousel-control {
  	display: none;  }
  	
  	.about {
  		
  		width: 87%;
  		
  	}
  	
  
  	
  	h1 {
  		font-family: 'Open Sans';
  		font-weight: 100;
  		font-size: 28pt;
  		letter-spacing: px;
  	}
  	
  	h3 
  	
  	{
  		font: 24pt/42px 'Open Sans', sans-serif;
  		font-weight: 100;
  		letter-spacing: 1px;
  		text-transform: uppercase;
  	}
  	
  	
  	
  	
  	.btn-round-lg {
  		background: linear-gradient(270deg, #ff8e16 0%, #fe005c 100%) #f91952;
  		background-size: 400% 400%;
  		border-style: none;
  		border-radius: 46px;
  		padding: 18px 62px;
  		-webkit-animation: btn-glow 15s ease infinite;
  		-moz-animation: btn-glow 15s ease infinite;
  		animation: btn-glow 15s ease infinite;
  		font-size: 15px;
  	}
  	
  	.getintouch {
  		
  		margin-top: 0px;
  	}
  	
  	#otherCarousel img {
  		
  		max-width: 300px!important;
  	}
  	
  	#uiCarousel video, img {
  			
  		}
  	
  	.title-box {
  		text-align: center;
  		padding: 0px;
  	}
  	
  	.carousel-inner > .item {
  	
  	
  	
  	}
  	
  	.small img{
  		position:relative;
  		width: 100%!important;
  	}
  	
  
  	
  	.hiremefor {
  		float: none;
  	}
  	
  	.highlight {
  		font-size: 14pt;
  	}
  	
  	.paragraph{
  		line-height: 31px;
  	}
  	
  	h2 {
  		font-size: 10pt;
  		padding-bottom: 50px;
  	}
  	
  	.name h2 {
  		padding-bottom: 0;
  		font-size: 14pt;
  	}
  	
  	.carousel {
  		padding-bottom: 30px;
  		
  	}
  	
  	
  	
  
  	
  	.navbar-header {
  	  display: none!important;
  	}
  	
  	.background-image {
  		width:768px;
  		position: absolute;
  		bottom:30px;
  		left: -100px;
  	}
  	
  	
  	
  	
  
}

/*
 * Globals
 */

/* Links */
a,
a:focus,
a:hover {
	color: #000;
	text-decoration: none;
}

/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
  background-color: #fff;
  border: 1px solid #fff;
}


/*
 * Base structure
 */


html,
body {
  height: 100%;
  width: 100%;
  color: #000000;
  text-align: center;
  
}

/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
}
.site-wrapper-inner {
  display: table-cell;
  vertical-align: top;
}
.cover-container {
  margin-right: auto;
  margin-left: auto;
}

/* Padding for spacing */
.inner {
  padding: 30px;
}

  /* Start the vertical centering */
  .site-wrapper-inner {
    vertical-align: middle;
  }
  /* Handle the widths */
  .masthead,
  .mastfoot,
  .cover-container {
    width: 100%; /* Must be percentage or pixels for horizontal alignment */
  }
  
  /* Start the vertical centering */
  .site-wrapper-inner {
    vertical-align: middle;
  }
  /* Handle the widths */
  .masthead,
  .mastfoot,
  .cover-container {
    width: 100%; /* Must be percentage or pixels for horizontal alignment */
  }




@media (min-width: 768px) {
  .masthead-brand {
    float: left;
  }
  .masthead-nav {
    float: right;
  }
}


/*
 * Cover
 */

.cover {
  padding: 0 20px;
}
.cover .btn-lg {
  padding: 10px 20px;
  font-weight: bold;
}




/*
 * Affix and center
 */


@media (min-width: 992px) {
  .masthead,
  .mastfoot,
  .cover-container {
    width: 700px;
  }
}