@charset "utf-8";

/*===========================
VARIA
===========================*/

body {}

.wpcc-container, .wpcc-container * { width:100%; margin:0; float:none; }
.no-scrolling { position:fixed; width:100%; }

.eqHWrap { display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; }


/*===========================
TYPO
===========================*/

h1, h2, h3, h4, h5, h6, a, label, [class*='button--'] { font-family:"Raleway", Helvetica, Arial, sans-serif; }
p, footer > div > nav > a, footer > div > div > a, .contact-info > a > div { font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; }

a, p, label, small { color:#333; }

h1 { font-size:calc(22px + 1.0vw); color:#840202; line-height:1; font-weight:900; text-transform:uppercase; }

h2 { font-size:calc(26px + 0.8vw); color:#fff; line-height:1.15; font-weight:900; }
h2 > small { font-size:20px; font-weight:600; text-transform:none; }

h3 { font-size:calc(26px + 1.6vw); color:#840202; line-height:1; font-weight:900; }

h4 { font-size:calc(18px + 0.4vw); color:#840202; font-weight:600; text-transform:uppercase; line-height:1.25; }
h4 > small { color:#333; }

h5 { font-size:calc(20px + 0.45vw); font-weight:400; color:#333; line-height:1.2; }
h1 + h5 { padding-top:10px; }

h6 { font-size:calc(16px + 0.45vw); font-weight:600; color:#333; line-height:1.2; }

p { font-size:calc(14px + 0.2vw); font-weight:400; line-height:1.4; }
p > b { font-weight:600; }

small { display:block; }


/*===========================
HEADER
===========================*/

header { z-index:99; position:fixed; top:0; left:0; width:100%; background:#fff; }

header > .wrapper { height:100px; width:96%; }
header > div > a { position:absolute; top:0; left:0; bottom:0; height:70px; margin:auto; z-index:99; }
header > div > a > img { height:70px; display:block; }

header > div > nav { position:fixed; top:0; left:0; bottom:0; right:0; z-index:98; background:#fff; text-align:center; display:flex; align-items:center; }
header > div > nav { transform:translateX(100%); -webkit-transform:translateX(100%); -moz-transform:translateX(100%); -o-transform:translateX(100%); -ms-transform:translateX(100%); }

header > div > nav > div { width:100%; }
header > div > nav > div > ul {}
header > div > nav > div > ul > li { display:block; }
header > div > nav > div > ul > li > a { display:block; font-size:calc(24px + 1.4vw); line-height:1.5; font-weight:900; }
header > div > nav > div > ul > li:not(.current) > a:hover { color:#840202; }
header > div > nav > div > ul > li:not(.current) > a:hover { -webkit-transform:translateY(-10px); -moz-transform:translateY(-10px); -o-transform:translateY(-10px); transform:translateY(-10px); }
header > div > nav > div > ul > li.current > a { color:#840202; }

header > div > nav > div > ul > li > ul { padding:10px 0; }
header > div > nav > div > ul > li > ul > li { display:block; }
header > div > nav > div > ul > li > ul > li > a { display:block; font-size:calc(16px + 0.9vw); font-weight:400; line-height:1.4; }
header > div > nav > div > ul > li > ul > li:not(.current) > a { cursor:pointer!important; }
header > div > nav > div > ul > li > ul > li:not(.current) > a:hover { color:#840202; }
header > div > nav > div > ul > li > ul > li.current > a { font-weight:900; }

header > div > nav > div > a { display:inline-block; vertical-align:top; margin:0 10px; background:#840202; display:none; }
header > div > nav > div > a:hover { -webkit-transform:translateY(-10px); -moz-transform:translateY(-10px); -o-transform:translateY(-10px); transform:translateY(-10px); }
header > div > nav > div > a > i { display:block; width:70px; height:70px; padding:20px; }
header > div > nav > div > a > i > svg { fill:#fff; height:30px; width:30px; }
header > div > nav > div > a > div { display:none; }


/*===========================
HEADLINE
===========================*/

.headline { position:relative; overflow:hidden; z-index:90; background:#f4f7f9; padding-top:100px; }

.headline--index {}
.headline--index:after { top:0; left:0; width:100%; height:100%; background:rgba(132,2,2,0.6); z-index:90; }

.headline > div { z-index:92; }
.headline > video { position:absolute; top:0; left:0; width:100%; height:100%; z-index:89; object-fit:cover; }
.headline__hero {}


/*===========================
PAGE
===========================*/

#page { padding-bottom:301px; overflow:hidden; }

main { z-index:91; position:relative; }


/*===========================
FOOTER
===========================*/

footer { width:100%; position:absolute; left:0; bottom:0; text-align:center; padding:55px 0 10px 0; z-index:97; background:#f4f7f9; }
footer a:hover { color:#840202; }
footer > div > nav { margin-bottom:40px; }
footer > div > nav > a > i { display:inline-block; padding:20px; margin-bottom:15px; background:#fff; }
footer > div > nav > a:hover > i {}
footer > div > nav > a > i { -webkit-transition:0.5s ease-out; -moz-transition:0.5s ease-out; -o-transition:0.5s ease-out; -ms-transition:0.5s ease-out; transition:0.5s ease-out; }
footer > div > nav > a > i > svg { fill:#840202; height:32px; width:32px; }
footer > div > nav > a > div { font-size:16px; line-height:32px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
footer > div > a, footer > div > p { margin:0; font-size:12px; font-weight:400; }
footer > div > a > svg { fill:#840202; height:16px; width:16px; margin:2px 3px 0 3px; }
footer > div > a > svg, footer > div > nav > a:hover > i > svg { -webkit-animation:throb 1.33s ease-in-out infinite; animation:throb 1.33s ease-in-out infinite; }
footer > div > a > img { display:inline-block; height:10px; }

footer > div > div { padding-bottom:20px; }
footer > div > div > a { display:inline-block; margin:0 10px; }

@-webkit-keyframes throb { 0%,100% { -webkit-transform:scale(1); } 50% { -webkit-transform:scale(.8); } }
@keyframes throb { 0%,100% { transform:scale(1); } 50% { transform:scale(.8); } }


/*===========================
ITEMS
===========================*/

.row-x { padding-left:2%; padding-right:2%; }
.row-y { padding-top:80px; padding-bottom:80px; }
.row-t { padding-top:80px; }
.row-b { padding-bottom:80px; }
.row-max { max-width:1000px; margin-left:auto; margin-right:auto; }
.y-center { display:flex; align-items:center; }

/* PARALINE */
.paraline { height:auto; position:relative; }
.parallax__container { clip:rect(0,auto,auto,0); height:100%; left:0; overflow:hidden; position:absolute; top:0; width:100%; background:#000; }
.parallax__container .parallax { background-position:top center; background-repeat:no-repeat; position:fixed; top:0; width:100%; height:100%!important; }
.parallax__container .parallax { -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); -webkit-transform-style:preserve-3d; transform-style:preserve-3d; }
.parallax__container .parallax { opacity:0.2; filter:alpha(opacity=20); -khtml-opacity:0.2; -moz-opacity:0.2; }
.paraline:after { top:0; left:0; width:100%; height:100%; z-index:2; background:rgba(41,98,125,0.8); }
.paraline > .wrapper { height:100%; z-index:4; }
.paraline > .wrapper h3 { color:#fff; }

/* CARD LIST */
.card-list {}
.card-list > li { text-align:center; position:relative; overflow:hidden; }
.card-list > li:not(:last-child):after { top:0; right:0; width:1px; height:100%; background:rgba(48,48,48,0.2); }
.card-list > li > i { display:inline-block; padding-bottom:40px; }
.card-list > li > i > svg { fill:#840202; height:100px; width:100px; }
.card-list > li > h2 { font-size:calc(24px + 0.2vw); text-transform:uppercase; line-height:1.2; color:#840202; }

/* CARD LIST 2 */
.card-list2 {}
.card-list2 > li { text-align:center; position:relative; margin-bottom:80px; }
.card-list2 > li:not(:nth-child(2)):not(:nth-child(4)):after { top:0; right:0; width:1px; height:100%; background:rgba(255,255,255,0.4); }
.card-list2 > li:not(:nth-child(3)):not(:nth-child(4)):before { bottom:-40px; left:40px; right:40px; width:auto; height:1px; background:rgba(255,255,255,0.4); }
.card-list2 > li > a { display:block; }
.card-list2 > li > a > i { display:inline-block; }
.card-list2 > li > a > i > svg { fill:#fff; height:100px; width:100px; }
.card-list2 > li > a > div { padding:0 10%; }
.card-list2 > li > a > div > p { margin:0; color:#fff; }
.card-list2 > li > a > h2 { padding:30px 2%; }

/* Services */
.services { max-width:760px; }
.services > li:not(:last-child) { margin-bottom:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,0.2); }
.services > li > a { position:relative; display:block; padding-left:140px; min-height:110px; }
.services > li > a > i { position:absolute; top:0; left:0; padding:25px; background:#fff; }
.services > li > a > i > svg { fill:#840202; height:60px; width:60px; }
.services > li > a > div {}
.services > li > a > div > p { margin:5px 0 0 0; color:#fff; }
.services > li > a > div > h4 { color:#fff; }

/* SITEMAP */
#htmlsitemap h2 { color:#840202; font-size:calc(18px + 0.25vw); }
.sitemap { padding:20px 0 40px 0; }
.sitemap:last-of-type { padding-bottom:0; }
.sitemap > li { display:block; border-bottom:1px solid rgba(48,48,48,0.1); }
.sitemap > li:last-child { border:0; }
.sitemap > li > a { display:block; padding:20px 0; font-size:calc(14px + 0.35vw); font-weight:400; color:#333; }
.sitemap > li > a:hover { color:#840202; }

/* OWL */
.owl-item { overflow:hidden; }
.owl-item > div { padding:15px 0; }
.owl-item > div > div { padding-top:60px; }

/* CONTENT LIST */
.contentlist { margin-bottom:-40px; }
.contentlist > div { background:#f4f7f9; margin-bottom:40px; }
.contentlist > div > a { display:block; }
.contentlist > div > a > div { padding:40px 4%; }
.contentlist > div > a > div > p { margin:20px 0 0 0; }
.contentlist > div > a > span { display:block; overflow:hidden; background:#000; }
.contentlist > div > a > span > img { display:block; width:100%; }
.contentlist > div > a > span > img { -webkit-transition:0.5s ease-out; -moz-transition:0.5s ease-out; -o-transition:0.5s ease-out; transition:0.5s ease-out; }
.contentlist > div > a:hover > span > img { -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); transform:scale(1.1); }
.contentlist > div > a:hover > span > img { opacity:0.8; filter:alpha(opacity=80); -khtml-opacity:0.8; -moz-opacity:0.8; }

/* * */
#maps { height:500px; height:40vh; width:100%; z-index:2; position:relative; }
#client h4 { padding-bottom:40px; }
#home, #skill { background:#f4f7f9; }

/* CONTENT */
.content {}
.content img:not(.floatimg) { display:block; width:70%; margin-left:auto; margin-right:auto; border:4px solid #f4f7f9; }
.content img + p, .content ul + p, .content p + img, .content ul + img, .content img + ul, .content ul + h4 { margin-top:40px; }
.content p:last-of-type { margin-bottom:0; }
.content h6 { color:#840202; padding:10px 0; }
.content h4 { padding-bottom:40px; }
.content p + h4 { padding-top:40px; }
.content ul {}
.content ul > li { display:block; position:relative; padding:20px; margin-bottom:2px; font-size:calc(14px + 0.2vw); font-weight:400; line-height:1.4; }
.content ul > li:nth-of-type(odd) { background:rgba(48,48,48,0.025); }
.content ul > li:before { top:0; bottom:0; left:0; width:4px; height:100%; background:#840202; }
.content ul > li > span { display:inline-block; background:#840202; padding:0 10px; margin-right:10px; color:#fff; font-weight:600; }
.content ul > li a:hover { color:#840202; }
.content img.floatimg { display:inline-block; float:left; width:240px; max-width:36%; margin-right:20px; margin-top:30px; border:4px solid #f4f7f9; }
.content .img--sm { width:40%; }

/* RECOMMENDER */
.recommender { max-width:760px; }
.recommender > li { display:block; border-bottom:2px solid #f4f7f9; }
.recommender > li:last-child { border:0; }
.recommender > li > a { display:block; padding:50px 0 50px 105px; position:relative; }
.recommender > li > a:hover {}
.recommender > li > a:hover > h6 { color:#840202; }
.recommender > li > a > h6 {}
.recommender > li > a > i { position:absolute; top:0; left:0; bottom:0; margin:auto; background:rgba(41,98,125,0.2); padding:20px; height:85px; }
.recommender > li > a > i > svg { fill:rgba(41,98,125,1.0); height:45px; width:45px; }

/* ABOUT */
.about-row { position:relative; }
.about-row > div { padding:0 4%; width:60%; margin-left:40%; position:relative; }
.about-row > div > p:last-of-type { margin-bottom:0; }
.about-row > span { position:absolute; left:0; top:0; bottom:0; width:40%; }
.about-row > span > img { display:block; width:100%; border:4px solid #fff; }

/* CONTACT */
.contact-info { padding:0 4%; }
.contact-info > a { padding:15px 0; border-bottom:1px solid #f4f7f9; }
.contact-info > a:last-child { border:0; }
.contact-info > a > i { display:inline-block; margin-right:15px; }
.contact-info > a > i > svg { fill:#840202; height:28px; width:28px; }
.contact-info > a:hover > i > svg { fill:#000; }
.contact-info > a > div { font-size:16px; font-weight:600; line-height:1.4; color:#333; }
.contact-info > a:hover > div { color:#840202; }

/*===========================
FORM
===========================*/

.form { padding:20px 4%; }
.form > ul { padding-bottom:20px; }
.form > ul > li { margin-bottom:20px; }
.form > ul > li > label { display:none; }
.form > h6 { text-align:center; }

input[type=text], textarea, [data-type="select"]:before { border:0; background:#f4f7f9; color:#333; }
[data-type="select"]:after { border-color:#840202 transparent transparent; }


/*===========================
BUTTONS
===========================*/

.button--primary { background:#840202; border-color:#840202; font-weight:600; }

.button--secondary { border-color:rgba(255,255,255,1.0); border-width:2px; background:rgba(255,255,255,0.2); font-weight:600; }
.button--secondary:hover { border-color:rgba(255,255,255,1.0); background:rgba(255,255,255,0.4); color:#fff; }

[class*='button--']:hover { -webkit-transform:translateY(-10%); -moz-transform:translateY(-10%); -o-transform:translateY(-10%); transform:translateY(-10%); }


/*===========================
MOBIL NAV
===========================*/

[data-action='nav-button'] { position:absolute; top:0; bottom:0; margin:auto; right:0; z-index:99; width:30px; height:20px; cursor:pointer; }
[data-action='nav-button'] span { position:absolute; left:0; height:2px; width:100%; background:#840202; }
[data-action='nav-button'].active span { background:#333; }
[data-action='nav-button'] span { -webkit-transition:.25s ease-in-out; -moz-transition:.25s ease-in-out; -o-transition:.25s ease-in-out; -ms-transition:.25s ease-in-out; transition:.25s ease-in-out; }
[data-action='nav-button'] span:nth-child(1) { top:0; }
[data-action='nav-button'] span:nth-child(2) { top:0; bottom:0; margin:auto; }
[data-action='nav-button'] span:nth-child(3) { bottom:0; width:40%; }
[data-action='nav-button']:hover span:nth-child(3) { width:100%; }
[data-action='nav-button'].active span:nth-child(1) { -webkit-transform:translateY(10px) translateY(-50%) rotate(45deg); -moz-transform:translateY(10px) translateY(-50%) rotate(45deg); -o-transform:translateY(10px) translateY(-50%) rotate(45deg); -ms-transform:translateY(10px) translateY(-50%) rotate(45deg); transform:translateY(10px) translateY(-50%) rotate(45deg); }
[data-action='nav-button'].active span:nth-child(2) { opacity:0; filter:alpha(opacity=0); -khtml-opacity:0; -moz-opacity:0; }
[data-action='nav-button'].active span:nth-child(3) { -webkit-transform:translateY(-10px) translateY(50%) rotate(-45deg); -moz-transform:translateY(-10px) translateY(50%) rotate(-45deg); -o-transform:translateY(-10px) translateY(50%) rotate(-45deg); -ms-transform:translateY(-10px) translateY(50%) rotate(-45deg); transform:translateY(-10px) translateY(50%) rotate(-45deg); width:100%; }

.open { transform:translateX(0); -webkit-transform:translateX(0); -moz-transform:translateX(0); -o-transform:translateX(0); -ms-transform:translateX(0); }


/*===========================
RESPONSIVE
===========================*/

@media (max-width: 1300px) {

header { padding-left:2%; padding-right:2%; }

}

@media (max-width: 768px) {

#page { padding-bottom:477px; }

.row-y { padding-top:40px; padding-bottom:40px; }
.row-t { padding-top:40px; }
.row-b { padding-bottom:40px; }

#skill > .row-y { padding:0; }

.card-list > li { padding:40px 0; }
.card-list > li > i { padding-bottom:20px; }
.card-list > li > i > svg { height:70px; width:70px; }
.card-list > li > h2 { font-size:20px; }
.card-list > li > h2 > small { font-size:16px; }
.card-list > li:not(:nth-child(3)):not(:nth-child(4)):before { bottom:0; left:40px; right:40px; width:auto; height:1px; background:rgba(48,48,48,0.2); }
.card-list > li:not(:nth-child(2)):not(:nth-child(4)):after { top:40px; bottom:40px; height:auto; }
.card-list > li:nth-child(2):after { width:0; }

.about-row > div { padding:0; width:100%; margin:0; }
.about-row > span { position:relative; display:block; width:100%; margin-bottom:40px; }

.contact-info { padding-top:40px; }

footer { padding:10px 0; }
footer > div > nav { padding:0 6%; }
footer > div > nav > a { text-align:left; padding:15px 0; border-bottom:1px solid #fff; }
footer > div > nav > a > i { padding:8px; margin:0 10px 0 0; }
footer > div > nav > a > i > svg { height:16px; width:16px; }
footer > div > nav > a > div { display:inline-block; font-size:14px; }


}

@media (max-width: 480px) {

header > .wrapper { height:60px; }
header > div > a, header > div > a > img { height:40px; }

header > div > nav, .headline { padding-top:60px; }
header > div > nav > div > ul { padding-bottom:30px; }
header > div > nav > div > ul > li > a { line-height:1.3; }
header > div > nav > div > a { margin:0 5px; }
header > div > nav > div > a > i { width:50px; height:50px; padding:12px; }
header > div > nav > div > a > i > svg { height:26px; width:26px; }

.parallax__container .parallax { top:0!important; height:100%!important; }

.services > li:not(:last-child) { margin-bottom:20px; padding-bottom:20px; }
.services > li > a { padding-left:110px; min-height:90px; }
.services > li > a > i { padding:20px; }
.services > li > a > i > svg { height:50px; width:50px; }

.content img:not(.floatimg) { width:100%; }

.recommender > li > a { padding:35px 0 35px 75px; }
.recommender > li > a > i { padding:15px; height:60px; }
.recommender > li > a > i > svg { height:30px; width:30px; }

h2 { font-size:22px; line-height:1.25; }

}

@media (max-width: 360px) {

footer > div > nav > a > div { font-size:12px; }

}


/*===========================
OWL
===========================*/

.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{display:block;clear:both;visibility:hidden;}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel button.owl-dot{background:0;color:inherit;border:0;padding:0;}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}

@-webkit-keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}
@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}

.owl-dots, .owl-nav { text-align:center; padding-top:40px; }
.owl-nav > button[type=button] { margin:0 20px; padding:11px; background:#840202; display:inline-block; border:0; }
.owl-nav > button[type=button] { border-radius:99rem; -moz-border-radius:99rem; -webkit-border-radius:99rem; -khtml-border-radius:99rem; -o-border-radius:99rem; }
.owl-nav > button[type=button]:not(.disabled):hover { background:#666; }
.owl-nav > button[type=button] > svg { fill:#fff; height:28px; width:28px; }
.owl-nav .disabled { opacity:.5; cursor:default; }

.owl-dot { display:inline-block; zoom:1; }
.owl-dot span { width:10px; height:10px; margin:0 7px; background:#D6D6D6; display:block; -webkit-backface-visibility:visible; transition:opacity .2s ease; border-radius:30px; }
.owl-dot.active span, .owl-dot:hover span { background:#840202; }