@charset "utf-8";
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: auto; }
/* CSS Document */
body {line-height: 1.5em;font-size: 0.9375rem;font-size: 100%;font-family: 'Noto Sans SC', sans-serif; font-weight: 300;
background-color: #b70021;z-index: -1;
}

h1 { font-size: 2.75em; font-weight: 600; color: #fff; text-align: center; background: url(../images/h1-de.png) no-repeat center bottom; }
h2 { font-size: 1em; font-weight: 600; color: #fff; text-align: center; }
h3 { font-size: 2.5em; font-weight: 600; color: #cc6666; }
h4, h5, h6 { font-size: 1.125em; font-weight: 600; color: #fff2d1; }
h1, h2, h3, h4, h5, h6, p { display: block; width: 70%; margin: 3% auto; word-break: break-all; }
h1, h2, h3, h4, h5, h6 { line-height: 1.5em }
p { color: #777; line-height: 1.5em; font-weight: 300 }
a { text-decoration: none; -moz-transition: color 0.25s ease, opacity 0.25s ease; -o-transition: color 0.25s ease, opacity 0.25s ease; -webkit-transition: color 0.25s ease, opacity 0.25s ease; transition: color 0.25s ease, opacity 0.25s ease }
img { max-width: 100%; height: auto; vertical-align: bottom; }
a img { border: none; }
article { word-wrap: break-word; word-break: break-all; }
.wrapper { width: 100%; max-width: 1100px; margin: 0 auto; vertical-align: top; }
/* button --- */
.button { padding: 1em 2em; width: 100%; display: inline-block; zoom: 1; vertical-align: baseline; border: none; margin: 0 auto; outline: none; cursor: pointer; text-align: center; text-decoration: none; font-family: 'Noto Sans SC', sans-serif; }
.button:hover { text-decoration: none; }
.button:active { position: relative; top: 1px; }
.bigrounded { -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; }
.medium { font-size: 1.1em !important; padding: .5em 3em; width: 35%; margin: 0px 2%; }
.small { font-size: .9em !important; padding: 8px 18px; width: 50%; }
.black { background: #000; color: #5D7C89; margin-right: 15px; margin-bottom: 15px; padding: 5px 20px; font-size: 14px; line-height: 28px; border-radius: 30px; }
.black:hover { color: #fff; font-weight: 300; }
/* white */
.btn-white { color: #fff; border: solid 1px rgba(255,255,255,1); -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; }
.btn-white:hover { opacity: .5; }
.btn-white:active { color: #9a692d; background: #fff; }
.btn-red { color: #fff; border: solid 1px #c71633; background-color: #c71633; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; text-transform: capitalize; }
.btn-red:hover { opacity: .5; }
.btn-red:active { color: #9a692d; background: #fff; }
main { margin: 0px; padding: 10px 0px 0 0; background-color: #b70021; }
.product { width: 96%;  display: block; margin:140px auto auto auto; }
.project-1 { width: 25%; float: left; min-height: 640px;  overflow:hidden; }
.project-2 { width: 25%; float: left; min-height: 640px; padding: 0 10px 0px 10px; background-color: #212f36; }
.project-2 figure{position: relative;display: inline-block;overflow: hidden;margin: 0px;width: 100%;min-height: 500px;}
.project-2 figure img{position: relative;display: block;max-width: 100%;opacity: 1;transform: translateY(+40%);}
.project-2 figure figcaption{position: absolute;top: 200px;left: 0;width: 100%;height: auto; margin: 0 auto;text-align: center;}
.project-2 figure figcaption h2{font-size: 2em;word-spacing: -0.15em;font-weight: 600;}

.project { width: 50%; float: left; min-height: 640px; margin: auto; vertical-align: top; background:#fff; }
.project-1 figure { position: relative; display: inline-block; overflow: hidden; margin: 0px; width: 100%; min-height: 640px; background: #fff; text-align: center; cursor: pointer; }
.project-1 figure img {display: block; max-width: 100%; opacity: 1;transform: translateY(+40%); }
.project-1 figure figcaption { padding:0; color: #fff; text-transform: uppercase; font-size: 1.5em; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.project-1 figure figcaption, .project-1 figure figcaption > a { position: absolute;top: 215px;left: 0;width: 100%;height: auto;margin: 0 auto;text-align: center; }
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.project-1 figure figcaption > a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; }
.project-1 figure h2 { word-spacing: -0.15em; font-weight: 600; }
.project-1 figure h2.solution_title { color: #000; text-align: center;width:100%;margin: 0 auto 20px auto; }
.project-1 figure p.caption { margin: 4% auto; color: #000; text-align: center; font-weight: 600; }
.project-1 figure p {  font-size: 68.5%; }
.project-2 p { margin: 4% auto 8% auto; font-size: 1em; color: #FFF; word-break: break-all; }
.grid { position: relative; margin: 0 auto; padding: 1em 0 4em; max-width: 1000px; list-style: none; text-align: center; }
/* Common style */
.grid figure { position: relative; overflow: hidden; margin: 10px auto; min-width: 550px; max-width: 550px; max-height: 500px; width: 100%; background: transform; text-align: center; cursor: pointer; }
.grid figure img { position: relative; display: block;  max-width: 100%; opacity: 1; }
.grid figure figcaption { padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.grid figure figcaption::before, .grid figure figcaption::after { pointer-events: none; }
.grid figure figcaption, .grid figure figcaption > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; }
.grid figure h2 { word-spacing: -0.15em; font-weight: 300; }
.grid figure h2 span { font-weight: 600; }
.grid figure h2, .grid figure p { margin: 0; }
.grid figure p { letter-spacing: 1px; font-size: 68.5%; }
.project .slick-prev:before, .project .slick-next:before{color: #838381 !important;}
/*---------------*/
/***** Julia *****/
/*---------------*/

figure.effect-julia { background: transform; }
figure.effect-julia img { max-width: none;  -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, transform 1s; -webkit-backface-visibility: hidden; backface-visibility: hidden; margin: 5em auto 10em auto;}
figure.effect-julia figcaption { text-align: left; }
figure.effect-julia h2, figure.effect-julia p { position: absolute; bottom: 0; left: 80px; padding: 30px 0px; }
figure.effect-julia h2 { font-size: 1.9em; font-weight: 600; color: #000;  }
figure.effect-julia p { position: absolute; bottom: 0; padding: 30px; display: inline-block; margin: 0 0 0.25em; padding: 0.4em 1em;  color: #a6001e; text-transform: none; font-weight: 300; font-size: 75%; text-align: center; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(-500px, 0, 0); transform: translate3d(-500px, 0, 0); }
figure.effect-julia p:first-child { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; }
figure.effect-julia:hover p:first-child { -webkit-transition-delay: 0s; transition-delay: 0s; }
figure.effect-julia:hover img { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); }
figure.effect-julia:hover p { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }


/*---------------path*/
.path {
	width:100%; display: block;   
 	background-color: #F4F4F4; 
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF4F4F4', endColorstr='#FFFFFFFF');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(48%, #f4f4f4),color-stop(100%, #ffffff));
    background-image: -moz-linear-gradient(top, #f4f4f4 48%,#ffffff 100%);
    background-image: -webkit-linear-gradient(top, #f4f4f4 48%,#ffffff 100%);
    background-image: linear-gradient(to bottom, #f4f4f4 48%,#ffffff 100%);
    box-sizing: border-box;
    padding:.8rem 6%;}
.path ul { display: block; margin: 0 auto; padding: 0px; width: 95%; max-width:1000px; text-align: left; }
.path li { padding: 0px 20px 0px 0px; width: auto; display: inline-block; list-style: outside none none; font-size: 15px; font-weight: 300; color: #BB0000; background: url(../images/arrow-w.png) no-repeat right 4px; background-size: 24px; }
.path li a { color: #546073; text-decoration: none; }
.path li a:hover { color: #BB0000; }
.path li:last-child { background: none; }


 @media (max-width: 1680px) {
    .project-2 figure img{transform: translateY(+70%);}
    .project-1 figure img{transform: translateY(+70%);}
}
@media (max-width: 1440px) {
.small {width:80%; }
.project-2 figure img{transform: translateY(+100%);}	
.project-1 figure img{transform: translateY(+100%);}	
}
@media (max-width: 1280px) {
h1, h2, h3, h4, h5, h6, p { display: block; width:90%; margin: 3% auto; word-break: break-all; }
figure.effect-julia h2, figure.effect-julia p{left:20px;}
}
 @media (max-width: 1024px) {
 figure.effect-julia { margin-top:50px;}
.project-1 figure figcaption { padding: 1em; font-size:130%;}
.product {  width: 98%;}
.project-1 { width: 50%; height:600px;  overflow:hidden; }
.project-1 figure img, .project-2 figure img{transform: translateY(+40%); margin: 0 auto;}
.project-2 { width: 50%; float: left; height:600px;   }
.project { width:100%; float: left; height:600px;   }
figure.effect-julia img { max-width: none;  }
figure.effect-julia h2 { position: absolute; bottom:40px;  padding: 30px 0px; font-size: 1.3em;  }
figure.effect-julia p { position: absolute; bottom: 0;  left: -100px; }

.small { width: 80%; }
h3 { font-size: 1.8em;}

 }

 @media (max-width: 990px) {
.project-1 figure figcaption{padding: 0;}
 }
 @media (max-width: 768px) {
main{ padding-top:78px;}
figure.effect-julia { margin-top:50px;}
.grid figure figcaption, .grid figure figcaption > a{left:0;margin: 0 auto;}
.product { margin-top:0;}
.project-1 { width:40%;  min-height:200px !important;  overflow:hidden; }
.project-2 { width:60%; float: left;  min-height:200px!important;   }
.project { width:100%; float: left; height:600px;   }
.project-1 figure figcaption {  margin:15px 0 0 0;}
.wrapper { width:98%;   margin: 0 auto; }
.row .columns { float: none; text-align: center; padding: 10px; }
.row .columns-right { float: none; }
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { width: 98%; }
.col-3{ text-align:left !important;}
.project-2 figure img{transform: translateY(+30%);}
}

@media (max-width: 568px) {
.project { width:100%;  height: auto!important; margin-top:-5vh; float: none;  display:block;   }
.project-1 { width:100%; float: none; height: auto !important; display:block;   overflow:hidden;background: #fff; }
.project-2 { width:100%; margin-bottom:0px; float: none; height: auto!important; display:block;  }
.project-2 p { padding-bottom:50px;}
.project-1 figure img{transform:unset; margin: 0 auto;}
.project-2 figure img{margin: 0 auto;}
.project-1 figure figcaption, .project-1 figure figcaption > a{top: 130px;}
figure.effect-julia p{left:0;}
.project-1 figure { min-height: 400px;}
.grid figure{max-width:unset;min-width:unset;}
}
@media (max-width: 480px) {
figure.effect-julia{margin-left:0;}
}
@media (max-width: 420px) {
h1, h2, h3, h4, h5, h6, p { width:90%;}
.project-1 figure {min-height:360px; padding-bottom:5vh; }
figure.effect-julia {  margin-top:100px; margin-bottom:0px; }
figure.effect-julia img {  -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, transform 1s; -webkit-backface-visibility: hidden; backface-visibility: hidden;margin: 0 auto; }
.project figure {min-height:360px; }
.project { width:100%; padding:2vh 0px; min-height:auto; float: none;  display:block;   }	
.project-1 figure img{transform:unset;}
.project-1 figure figcaption{margin: 0;}
.grid figure figcaption, .grid figure figcaption > a{left:15px;}
}

@media (max-width: 320px) {
   .project figure {min-height:400px; }
   figure.effect-julia h2, figure.effect-julia p{left:0;}
}