/*!
 * Start Bootstrap - Landing Page v5.0.1 (https://startbootstrap.com/template-overviews/landing-page)
 * Copyright 2013-2018 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-landing-page/blob/master/LICENSE)
 */

/* roboto-condensed-300 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-condensed-v19-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-condensed-v19-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v19-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v19-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v19-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v19-latin-300.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-300italic - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/roboto-condensed-v19-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-condensed-v19-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v19-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v19-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v19-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v19-latin-300italic.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-regular - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-condensed-v19-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-condensed-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v19-latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}


body {
  font-family: 'Roboto Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-color: #fff;
  font-size: 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Roboto Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
}

a { color: #777777}
a:hover { color: #333333}

small {
	font-size: 50%;
}

.bg-transparent {
  background-color: rgba(150, 150, 230, 0.3) !important; 	
}

.navbar-brand img{
	display: block;   
   position: absolute;
   top: .5rem;
}

.navbar-nav {
	margin-top: 0rem;
	height: 70px;
}

.btn-secondary {
	background: #dddddd;
	color: #555555;
	border-color: #bbbbbb;
	text-shadow: none;
}

.btn-info {
	font-size: 1.2rem;
	background-color: #444444;
	border-color: #222222;
}

.btn-info:hover {
	background-color: #999999;
	color: #333333;
	border-color: #555555;
}

.btn-primary {
	display: block;
	background-color: rgba(255,255,255, 0.1);
	border-color: rgba(255,255,255, 0.3);
	font-size: 2.5rem;
	margin-bottom: 1rem;
}

.btn-primary:hover {
	background-color: rgba(255,255,255, 0.5);
	border-color: rgba(255,255,255, 0.9);
	color: #000000;
}
	
.logo_container {
	position: absolute;
	left: 25px;
	bottom: 25px;
	right: 25px;
}

header {
   background-image: url(../img/graffiti_header01.jpg);
   background-size: cover;
   background-position: bottom;	
   height: 100vh;
   overflow: hidden;
}
	
header.masthead {
  position: relative;
}

.header_container {
	height: 100vh;
	flex-direction: column;
}

.zitat {
  font-size: 1.5rem;
  font-style: italic;
  margin-bottom: 1.5rem;
  color: #555;
}

.zitat span {
	font-size: 1rem;
	font-weight: 100;
}

.portfolio {
	font-size: 2rem;
}

.buttons {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
}
.button {
	position: absolute;
	width: 22vh;
	height: 22vh;
}

.b_webdesign {top: 1vh; right: 47vh}
.b_printdesign {top: 1vh; right: 24vh}
.b_logodesign {top: 1vh; right: 1vh}
.b_service {top: 24vh; right: 24vh}
.b_aboutme {top: 24vh; right: 1vh}
.b_contact {top: 47vh; right: 1vh}


.button img {
	transition: all 0.5s ease;
	border:solid 2px rgba(255, 255, 255, 1);
	border-radius: 12px;
}
.button img:hover {
    border:solid 8px rgba(255, 255, 255, 1);
}

.showcase-title {
   margin-top: 2.7rem;
   margin-left: 3rem;
}

.showcase .showcase-img-right {
  min-height: 0;  
  height: 20rem;
  background-size: contain, contain, cover;
  background-position: 15px top, 15px bottom, 15px center;
  background-repeat: no-repeat;
}

.showcase .showcase-img-left {
  min-height: 0;  
  height: 20rem;
  background-size: contain, contain, cover;
  background-position: right 15px top, right 15px bottom, right 15px center;
  background-repeat: no-repeat;
}

.showcase h1 {
	border-bottom: solid 1px #ccc;
	margin-bottom: 1.3rem;
    text-shadow: 0 -2px #eeeeee, 2px 0 #eeeeee, 0 2px #eeeeee, -2px 0 #eeeeee;
	font-size: 2rem;
}

  .showcase .showcase-text {
    padding: 1.5rem;
  }

.top_section {
	padding-top: 90px;
	background-color: #777;
	color: #ffffff;
	text-shadow:1px 1px 2px #000000;
}

.top_section_impressum {
	padding-top: 70px;
}

.contact_section {
	background-color: #D27328;
}

.printdesign_section img {
	box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.4) 0px 10px 10px;
}

.printdesign_captions {
	display: block;
	position: absolute;
	bottom: 40%;
	left: 1.5rem;
	border:solid 1px #fff;
	border-width: 1px 0;
	background: rgba(255,255,255, 0.7);
	padding: 10px;
	text-align: center;
	width: calc(100% - 3rem);
	transform:skew(0deg,-10deg);
	font-size: 1.2rem;
	color: #333;
}

.printdesign_captions img{
	box-shadow: none;
}

a.printdesign_captions:hover {
	background: rgba(255,255,255, 9);
	text-decoration: none;
} 

.c_dark {
	border:solid 1px #555;
	border-width: 1px 0;
	background: rgba(64,64,64, 0.7);
	color: #ddd;
}

a.c_dark:hover {
	background: rgba(64,64,64, 0.9);
	text-decoration: none;
	color: #fff;
}

.card {
	padding: 7px;
	border:solid 3px #999;
	border-radius: 1.2em;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.4) 0px 10px 10px;
	background: #ffffff; 
}

.card-img-top {
	margin: 12px 0;
	border: solid 1px #666;
}

.portfolio_title img {
	border-radius: 25px;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.4) 0px 10px 10px;
}

.card-body {
  position: absolute;
  bottom: -30px;
  right: -2rem;
  background-color: rgba(255,255,255,0.9);
  color: #222;
  width:70%;
  border: solid 1px #000;
  border-radius: 15px;
  font-size: 0.95rem;
  box-shadow:2px 2px 5px rgba(0,0,0,0.6);
}

.btn-portfolio {
	display: block;
	background: linear-gradient(0deg, rgba(43,82,119,1) 0%, rgba(118,149,177,1) 100%);
	border-color: #7695B1;
	color: #fff;
	box-shadow: inset 0px 1px 0px rgba(255,255,255,.5),0px 1px 3px rgba(0,0,0,0.3);
	text-shadow: 1px 1px 1px #000;
}

.btn-portfolio:hover {
	background: linear-gradient(0deg, rgba(118,149,177,1) 0%, rgba(43,82,119,1) 100%);
	border-color: #284C6E;
	color: #fff;
}

.ingo-service {
	background-image: url(../img/ingoservice_section.jpg);
	background-size: cover;
	background-position: left center;
}

.vfi {
	background-image: url(../img/vfi_section.jpg);
	background-size: cover;
	background-position: right center;
}

.fds {
	background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(114,183,245,1) 100%);
}

.white_content {
	color: #111;
	background-color: rgba(255,255,255,0.6);
	padding: 1rem;
	border:solid 1px #fff;
	border-radius: 15px;
}

  .white_back {
	background-color: rgba(255,255,255,0);
	padding: 0;
	border: none;
	border-radius: none;
	}

@media (max-width: 988px) {

  .vfi, .ingo-service {
		background-position: center;
  }
}

@media (max-width: 768px) {
  .white_back {
	color: #111;
	background-color: rgba(255,255,255,0.6);
	padding: 1rem;
	border-radius: 15px;
	}
}


@media (min-width: 988px) {

  header.masthead h1 {font-size: 3rem}
  
   .showcase .showcase-img-right,
   .showcase .showcase-img-left {
    min-height: 30rem;
   }
}

@media (min-width: 768px) {
  .showcase .showcase-text {
    padding: 3rem;
  }

@media (orientation: portrait) {
	.button {
	position: absolute;
	width: 32vw;
	height: 32vw;
	}

	.b_webdesign {top: 1vw; right: 67vw}
	.b_printdesign {top: 1vw; right: 34vw}
	.b_logodesign {top: 1vw; right: 1vw}
	.b_service {top: 34vw; right: 67vw}
	.b_aboutme {top: 34vw; right: 1vw}
	.b_contact {top: 67vw; right: 1vw}
}

.features-icons {
  padding-top: 7rem;
  padding-bottom: 7rem;
}

.features-icons .features-icons-item {
  max-width: 20rem;
}

.features-icons .features-icons-item .features-icons-icon {
  height: 7rem;
}

.features-icons .features-icons-item .features-icons-icon i {
  font-size: 4.5rem;
}

.features-icons .features-icons-item:hover .features-icons-icon i {
  font-size: 5rem;
}

.testimonials {
  padding-top: 7rem;
  padding-bottom: 7rem;
}

.testimonials .testimonial-item {
  max-width: 18rem;
}

.testimonials .testimonial-item img {
  max-width: 12rem;
  -webkit-box-shadow: 0px 5px 5px 0px #adb5bd;
  box-shadow: 0px 5px 5px 0px #adb5bd;
}

.call-to-action {
  position: relative;
  background-color: #343a40;
  background: url("../img/bg-masthead.jpg") no-repeat center center;
  background-size: cover;
  padding-top: 7rem;
  padding-bottom: 7rem;
}

.call-to-action .overlay {
  position: absolute;
  background-color: #212529;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0.3;
}

footer.footer {
  padding-top: 4rem;
  padding-bottom: 4rem;
}