/* rack CSS */
/* Farben 

dark-blue     #002255 // 0,34,85
mid-blue      #0066FF
light-blue    #5599ff // 85,153,255
vl-blue       #eaf8ff

saffron       #ff8833 // 255,136,51
darkest grey  #3a3a3a //
dark grey     #5a5a5a // 132,132,132 
mid grey      #9a9a9a // 154,154,154 
              #bababa // 186,186,186 
light grey    #e0e0e0 // 224,224,224 
*/

/*--- std. HTML ---*/
body {
  font-family: 'Arial', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #0066FF;
  font-weight: 400;
  margin: 0 0 20px 0;
  padding: 0;
}

/*--- Navigation ---*/
.navbar {
  background-color: rgba(255, 255, 255, 0.65);
  height: 70px;
}

.navbar-brand {
  margin-top: 5px;
}

.navbar-light .navbar-nav .nav-link {
  color: #0066ff;
  font-weight: 600;
}

/* active oder hovered Link Farbe */
.navbar-light .nav-item.active .nav-link,
.navbar-light .nav-item:focus .nav-link,
.navbar-light .nav-item:hover .nav-link {
  color: #ff8833;
}

/*--- Sektionen ---*/
#home {
  min-height: 1px;
}

#rack {
  color: #0066FF;
  padding: 60px 0;
  min-height: 400px;
}

#portfolio {
  padding: 60px 0;
  min-height: 600px;
}

#contact {
  padding: 60px 0;
}

/*--- Home - Sektion  ---*/
.carousel-item {
  height: 109vh;
  min-height: 360px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.carousel-caption {
  padding-bottom: 135px;
}

.carousel-indicators {
  padding-bottom: 120px;
}

.display-4 {
  color: #0066ff;
  font-weight: 700;
  text-shadow: 0 0 5px #ff8833;
}

.lead {
  color: #0066ff;
  /* min-height: 60px; */
  background-color: rgba(255, 136, 51, 0.7);
  /* #eaf8ff */
  border: 2px solid #0066FF;
  border-radius: 5px;
  /* text-shadow: 0 0 10px white; */
  /* saffron       #ff8833 // 255,136,51 */
}

/*--- Portfolio - Sektion  ---*/
.box {
  margin: 10px 10px 10px 10px;
  width: 350px
}

.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;
  background-color: rgba(0, 34, 85, 0.3);
  /* besser mit 0.7 0.8 */

  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.hovereffect:hover .overlay {
  /* background-color: rgba(85,153,255,0.5); */
  background-color: rgba(255, 255, 255, 0.6);
}

.hovereffect img {
  display: block;
  position: relative;
}

.hovereffect h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 17px;
  padding: 10px;
  background: rgba(0, 34, 85, 0.9);
  -webkit-transform: translateY(45px);
  -ms-transform: translateY(45px);
  transform: translateY(45px);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.hovereffect:hover h2 {
  -webkit-transform: translateY(5px);
  -ms-transform: translateY(5px);
  transform: translateY(5px);
}

.hovereffect p {
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px;
  text-transform: none;
  color: #fff;
  border: 1px solid #fff;
  /* #5599ff */
  background-color: transparent;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  font-weight: normal;
  margin: -25px 10px 10px 10px;
  height: 235px;
  padding: 60px 30px 30px 30px;
}

.hovereffect:hover p {
  opacity: 1;
  color: #002255;
  /*#ff8833 */
  font-weight: 600;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.hovereffect p:hover {
  box-shadow: 0 0 5px #fff;
}

/*--- rack - Sektion  ---*/
.flex-item {
  margin: 20px 20px 20px 20px;
}

.round-img {
  width: 200px;
  width: 200px;
  border: 3px solid #0066FF;
  border-radius: 100%;
}

.rack-btn {
  text-transform: uppercase;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 28px;
  border-radius: 25px;
  transition: 0.5s;
  margin-top: 10px;
  border: 2px solid #0066FF;
  color: #0066FF;
}

.rack-btn:hover {
  color: white;
  background: #002255;
  border: 2px solid #002255;
  font-weight: 00;
  text-decoration: none;
}

/*--- Contact Section ---*/
#contact .contact-info {
  margin-bottom: 20px;
  text-align: center;
}

#contact .contact-info i {
  font-size: 48px;
  display: inline-block;
  margin-bottom: 10px;
  color: #0066FF;
}

#contact .contact-info address,
#contact .contact-info p {
  margin-bottom: 0;
  color: #000;
}

#contact .contact-info h3 {
  font-size: 18px;
  margin-bottom: 15px;
  font-weight: bold;
  text-transform: uppercase;
  color: #999;
}

#contact .contact-info a {
  color: #000;
}

#contact .contact-info a:hover {
  color: #ff8833;
  text-decoration: none;
}

#contact .contact-address,
#contact .contact-phone,
#contact .contact-email {
  margin-bottom: 20px;
}

#contact .form #sendmessage {
  color: #18d26e;
  border: 1px solid #18d26e;
  display: none;
  text-align: center;
  padding: 15px;
  font-weight: 600;
  margin-bottom: 15px;
}

#contact .form #errormessage {
  color: red;
  display: none;
  border: 1px solid red;
  text-align: center;
  padding: 15px;
  font-weight: 600;
  margin-bottom: 15px;
}

#contact .form #sendmessage.show,
#contact .form #errormessage.show,
#contact .form .show {
  display: block;
}

#contact .form .validation {
  color: red;
  display: none;
  margin: 0 0 20px;
  font-weight: 400;
  font-size: 13px;
}

#contact .form input,
#contact .form textarea {
  color: #002255;
  padding: 10px 14px;
  border-radius: 0;
  box-shadow: none;
  font-size: 15px;
}

#contact .form button[type="submit"] {
  background: #0066FF;
  border: 0;
  padding: 10px 30px;
  border-radius: 25px;
  color: white;
  transition: 0.4s;
  cursor: pointer;
}

#contact .form button[type="submit"]:hover {
  background: #002255;
}

/*--- Footer ---*/
#footer {
  background: #002255;
  padding: 0 0 30px 0;
  color: #fff;
  font-size: 14px;
}

#footer .copyright {
  text-align: center;
  padding-top: 20px;
}

#footer .credits {
  text-align: center;
  font-size: 13px;
  color: #ddd;
}

#footer.credits a:link,
#footer .credits a:visited {
  text-decoration: none;
  color: white;
}

#footer .credits a:hover {
  text-decoration: none;
  color: #9a9a9a;
  /* #e0e0e0 */
}

/*--- Modal ---*/
h5 {
  color: #0066FF;
}

.modal-dialog {
  margin-top: 75px;
  max-width: 85%;
}

.modal-content {
  color: #002255;
  background-color: rgba(255, 255, 255, .8) !important;
  border: 2px solid #0066FF;
}

.modal-header {
  margin: 55px;
  color: #9a9a9a;
  border-bottom: 0px;
}

.modal-body {
  margin: 0px 55px 55px 55px;
}

.close {
  color: #0066FF;
  font-size: 32px;
  font-weight: normal;
  line-height: 0.5rem;
  opacity: 1;
}

.close:hover {
  color: #ff8833;
  text-decoration: none;
}

button.close {
  border: 2px solid #0066FF;
  cursor: pointer;
  height: 54px;
  width: 54px;
  border-radius: 27px;
}

button.close:hover {
  border: 2px solid #ff8833;
  text-shadow: none;
}

/*--- Cookies ---*/
/* 
 * Bootstrap Cookie Alert by Wruczek
 * https://github.com/Wruczek/Bootstrap-Cookie-Alert
 * Released under MIT license

  dark-blue     #002255 // 0,34,85
  mid-blue      #0066FF

  saffron       #ff8833 // 255,136,51
  light grey    #e0e0e0 // 224,224,224 
 */

.cookiealert {
  position: fixed;
  /* bottom: 0; */
  top: 10px;
  left: 0;
  width: 100%;
  margin: 0 !important;
  z-index: 1000000;
  opacity: 0;
  border-radius: 0;
  transform: translateY(100%);
  /* transition: all 500ms ease-out; */
  color: #0066FF;
  /* background-color: rgba(58, 58, 58, .9) !important; */
  background-color: rgba(255, 136, 51, .95) !important;
}

.cookiealert.show {
  opacity: 1;
  transform: translateY(0%);
  transition-delay: 1000ms;
}

.cookiealert a {
  color: #0066FF;
  text-decoration: none;
}

.cookiealert .acceptcookies {
  margin-left: 20px;
  vertical-align: baseline;
}

.cookiealert button {
  background-color: rgba(0, 0, 0, .7) !important;
  border-color: #0066FF;
}

.cookiealert button:hover {
  background-color: rgba(0, 0, 0, .8) !important;
  border-color: #0066FF;
}