body{
	letter-spacing: 1.8px;
	font-family: 'Poppins', sans-serif;
	background: #1a1a1a;
}

b{
	font-weight: 800;
	color: #ffffff;
}

.orange{
	color: #cc6600 !important;
}

a:hover{
	text-decoration: none;
}

.btn{
	border-radius: 0;
}

.btn-dark{
	background: #1a1a1a;	
}

.btn-dark:hover{
	color: #cc6600 !important;
}

.btn-light{
	color: #1a1a1a !important;
}

h1{
	font-size: 1.8em;
	text-transform: uppercase;
	margin-top: 50px;
}

.headline-tb{
	font-size: 1.8em;
	text-transform: uppercase;
	margin-top: 50px;
	text-align: center;
	color: #ffffff;
	margin-bottom: 50px;
}

.legal h1, .legal h2, .legal h3, .legal h4, .legal h5, .legal h6 {
	font-size: 1.2em;
	margin-top: 50px;
}


.legal p{
	font-size: 0.8em;
	margin-bottom: 25px;
}

.legal a{
	font-size: 0.8em;
	color: #ffffff;
}

h1, h2, h3, h4, h5, h6{
	font-size: 1.8em;
	text-transform: uppercase;
	margin-bottom: 25px;
	color: #ffffff;
}

.ctp{
	color: #cc6600;
	text-transform: uppercase;
}

.lead{
	font-size: 1em;
}

.question{
	color: #cc6600;
	font-weight: 800;
}

.bg-dark {
    background-color: #1a1a1a !important;
}

.logo{
	margin: 0 0 50px 0;
	max-width: 220px;
	width: 100%;
}

.navbar-brand img{
	max-height: 56px;
	height: 100%;
}

.nav-item{
	text-transform: uppercase;
	font-size: 0.68em;
}

.note-hl{
	font-weight: bold;
	font-size: 1.2em;
	color: #ffffff;
	padding: 10px;
	text-align: center;
	border-bottom: 2px dotted #ffffff;
}

.modal{
	z-index: 999999;
}

.modal a{
	color: #ffffff;
}

.modal a:hover{
	color: #1a1a1a;
}


.modal-content {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #cc6600;
    background-clip: padding-box;
    border-radius: 0;
    outline: 0;
	padding: 10px 20px;
	text-align: justify;
}

.modal-header {
    padding: 15px;
    border-bottom: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
	height: 50px;
}

.modal-footer {
    border-top: 2px dotted #1a1a1a;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
}
 
.tabs label {
  order: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: ffffff;
  font-weight: bold;
  transition: background ease 0.3s;
  padding: 10px 25px;
  max-width: 80px;
}

.tabs a {
  color: #666666;
}
 
.tabs .tab {
  order: 9;
  flex-grow: 1;
  width: 100%;
  height: 100%;
  display: none;
  padding: 1rem;
  background: #fff;
  padding: 20px;
  border: 2px solid black;
}
 
.tabs input[type="radio"] {
  display: none;
}
 
.tabs input[type="radio"]:checked + label {
  background: #000000;
  color: #ffffff;
}
 
.tabs input[type="radio"]:checked + label + .tab {
  display: block;
}
 

section {
  padding: 80px 0;
}


section.pricing {
  background: #1a1a1a;
}

.card{
	background: rgb(26,26,26);
	background: linear-gradient(320deg, rgba(26,26,26,1) 0%, rgba(51,51,51,1) 100%);
	height: auto;
	padding: 25px;
	animation: textshadow 8s infinite alternate;
}

@keyframes textshadow {
	0%   { text-shadow: 1px 1px 0px #000 }
	10%   { text-shadow: 3px 3px 2px #000 }
	20%  { text-shadow: 9px 10px 6px #000 }
	40%  { text-shadow: 10px 15px 6px #000 }
	60%  { text-shadow: 0px 10px 4px #000 }
	80%  { text-shadow: -10px 8px 3px #000 }
	100%  { text-shadow: 1px 5px 1px #000 }
}


.card h2, .card h3, .card h4{
	text-transform: uppercase;
	font-size: 1.8em;
	color: #ffffff;
	text-align: center;
	letter-spacing: 2px;
	line-height: 1em;
	margin-bottom: 350px;
}

.card h2 small, .card h3 small, .card h4 small{
	font-size: 0.5em;
	color: #cc6600;
	letter-spacing: 6px;
}

.pricing .card {
  border: none;
  border-radius: 0;
  transition: all 0.25s;
  box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
}

.pricing hr {
  margin: 1.5rem 0;
}

.pricing .card-title {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  letter-spacing: .1rem;
  font-weight: bold;
}


.pricing ul li {
  margin-bottom: 1rem;
}

.pricing .text-muted {
  opacity: 0.7;
}

.pricing .btn {
  font-size: 80%;
  border-radius: 5rem;
  letter-spacing: .1rem;
  font-weight: bold;
  padding: 1rem;
  opacity: 0.7;
  transition: all 0.2s;
}


.video-editing{
	background: url(../img/jp-video-editing.jpg) no-repeat center center;

}

.video-production{
	background: url(../img/jp-video-production.jpg) no-repeat center center;

}

.animation-vfx{
	background: url(../img/jp-animation-vfx.jpg) no-repeat center center;

}


.video-editing, .video-production, .animation-vfx{
	-webkit-background-size: 100%;
	-moz-background-size: 100%;
	-o-background-size: 100%;
	background-size: 100%;
}

.card-footer{
	color: #ffffff;
	display: inline-block;
	position: absolute;
	bottom: 0;
	left: 0;
	border: 0;
	text-align: center;
}


#whatido{
	color: #c0c0c0;
	text-align: justify;
	padding-top: 120px;
}

#about{
	background: url(../img/jp-about-bg.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	color: #c0c0c0;
	text-align: justify;
}

#services{
	background: url(../img/bg-grain.png);
}


#contact{
	background: #cc6600;
	color: #1a1a1a;
}

#contact a{
	background: #1a1a1a;
	color: #ffffff;
	padding: 10px 20px;
	margin-top: 15px;
	display: inline-block;
}

#contact a:hover{
	background: #ffffff;
	color: #cc6600;
}

.social-nav{
	text-align: center;
	width: 100%;
	display: inline-block;
	margin-top: 50px;
}

.social-nav a{
	background: #cc6600 !important;
	color: #1a1a1a !important;
}

.social-nav a:hover{
	background: #cc6600 !important;
	color: #ffffff !important;
}

.social-nav img:hover{
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}

.footer-nav{
	color: #666666;
	font-size: 0.8em;
	padding-top: 20px;
}

.footer-nav a{
	color: #666666;
}

.footer-nav a:hover{
	color: #ffffff;
}

/* Hover Effects on Card */

@media (min-width: 992px) {
  .pricing .card:hover {
    margin-top: -.25rem;
    margin-bottom: .25rem;
    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);
  }
  .pricing .card:hover .btn {
    opacity: 1;
  }
}

/* Clients */

.client-row{
	text-align: center;
	display: flex;
    justify-content: center;
}

.client{
	border: 2px solid #ffffff;
	display: block;
}

.aurubis {
	background: url(../img/clients/aurubis-h.jpg) no-repeat top left;
	-webkit-background-size: cover;
    -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
	height: 169px;
	max-width: 300px;
	display: block;
}
.aurubis img {
	-webkit-transition: all ease 2s;
	-moz-transition: all ease 2s;
	-o-transition: all ease 2s;
	-ms-transition: all ease 2s;
	transition: all ease 2s;

}

.aurubis img:hover {
	opacity: 0;
}

.bayer {
	background: url(../img/clients/bayer-h.jpg) no-repeat top left;
	-webkit-background-size: cover;
    -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
	height: 169px;
	max-width: 300px;
	display: block;
}
.bayer img {
	-webkit-transition: all ease 2s;
	-moz-transition: all ease 2s;
	-o-transition: all ease 2s;
	-ms-transition: all ease 2s;
	transition: all ease 2s;

}

.bayer img:hover {
	opacity: 0;
}

.bbraun {
	background: url(../img/clients/bbraun-h.jpg) no-repeat top left;
	-webkit-background-size: cover;
    -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
	height: 169px;
	max-width: 300px;
	display: block;
}
.bbraun img {
	-webkit-transition: all ease 2s;
	-moz-transition: all ease 2s;
	-o-transition: all ease 2s;
	-ms-transition: all ease 2s;
	transition: all ease 2s;

}

.bbraun img:hover {
	opacity: 0;
}

.benteler {
	background: url(../img/clients/benteler-h.jpg) no-repeat top left;
	-webkit-background-size: cover;
    -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
	height: 169px;
	max-width: 300px;
	display: block;
}
.benteler img {
	-webkit-transition: all ease 2s;
	-moz-transition: all ease 2s;
	-o-transition: all ease 2s;
	-ms-transition: all ease 2s;
	transition: all ease 2s;

}

.benteler img:hover {
	opacity: 0;
}

.bilfinger {
	background: url(../img/clients/bilfinger-h.jpg) no-repeat top left;
	-webkit-background-size: cover;
    -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
	height: 169px;
	max-width: 300px;
	display: block;
}
.bilfinger img {
	-webkit-transition: all ease 2s;
	-moz-transition: all ease 2s;
	-o-transition: all ease 2s;
	-ms-transition: all ease 2s;
	transition: all ease 2s;

}

.bilfinger img:hover {
	opacity: 0;
}

.bmbf {
	background: url(../img/clients/bmbf-h.jpg) no-repeat top left;
	-webkit-background-size: cover;
    -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
	height: 169px;
	max-width: 300px;
	display: block;
}
.bmbf img {
	-webkit-transition: all ease 2s;
	-moz-transition: all ease 2s;
	-o-transition: all ease 2s;
	-ms-transition: all ease 2s;
	transition: all ease 2s;

}

.bmbf img:hover {
	opacity: 0;
}

.jp-th {
	opacity: 0.5;
}

.jp-th:hover {
	opacity: 1.0;
}