/*
Theme Name: Trocellen Main site
Description: Trocellen Main site template
Author: Usernet
Author URI: http://www.usernet.hu/
Version: 1.0
*/

/*
	Font: 
	font-family: 'Open Sans', sans-serif;
*/
div.checkbox div{ background: url("img/checkbox.png"); width: 21px; height: 20px; position: absolute; top: 2px;right: 2px; display: none; }

#main-content-page { position: relative;}
#main-content-page .vector { position: absolute; top: -100px; right: 0px; z-index: 10000; max-height: 100%; overflow: hidden; }
#main-content-page .vector.history{ top: 0px; }
#main-content-page #main article h1{ color: #174d65; }
 

/* Video popup */
.video-layer{ position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; background: rgba(0, 0, 0, 0.8); z-index: 1000000; opacity: 0; visibility: hidden; }
#video-popup{  
	position: fixed; top: 50%; left: 50%; visibility: hidden; opacity: 0; transition: 1s opacity; -webkit-transition: 1s opacity; 
	width: 860px; height: 480px; transform: translate(-50%,-50%); z-index: 10000000; border: 2px solid #ccc; 
}
#video-popup #close { position: absolute; top: -29px; right: -26px; background: url(img/icons/icon_close.png) no-repeat; width: 24px; height: 24px; cursor: pointer; }						   
#video-popup video{ height: 100%; width: 100%; background: none;}


/* Slider */
#slider .slide-layer{ width: auto; }
#slider .slide-layer h2{ text-transform: uppercase; }
#slider .slide-layer h2,
#slider .slide-layer p{ color: #006a86;  } 
#slider .slide-layer.layer1 { padding: 0px 0px 0px 530px; }
#slider .slide-layer.layer1 p{ padding: 0px 0px 0px 200px; }
#slider .slide-layer.layer2{ top: 10%; padding: 0px 0px 0px 200px; }


/* Industries */
#industries{ background:url(img/home_industries_bg.jpg) no-repeat right; height: 694px; }
#industries.subpage{ background: #f4f5f5; }
#industries .left{ width: 45%; margin: 0% 5% 0% 0%; }
#industries .icons{ padding: 12px 140px 50px; display: flex; align-items: center; cursor:pointer; position:relative;   }
#industries .icons h3.mobile{ display: none; font-size: 14px; text-transform: uppercase; color: #4c4c4c; width: 100%;}
#industries .icons .industry-icon{ width: 96px; height: 96px; transition: 0.25s all; -webkit-transition: 0.25s all; }

#industries .icons .industry-icon.automotive{ background:url(img/icons/home_automotive.png) no-repeat center center ; }
#industries .icons .industry-icon.automotive.hover,
#industries .icons li.active .industry-icon.automotive,
#industries .icons .industry-icon.automotive:hover{ background:url(img/icons/home_automotive_hover.png) no-repeat center center;  }

#industries .icons .industry-icon.insulation{ background:url(img/icons/home_insulation.png) no-repeat center center;  }
#industries .icons .industry-icon.insulation.hover,
#industries .icons li.active .industry-icon.insulation,
#industries .icons .industry-icon.insulation:hover{ background:url(img/icons/home_insulation_hover.png) no-repeat center center;  }

#industries .icons .industry-icon.sport{ background:url(img/icons/home_sport.png) no-repeat center center ; }
#industries .icons .industry-icon.sport.hover,
#industries .icons li.active .industry-icon.sport,
#industries .icons .industry-icon.sport:hover{ background:url(img/icons/home_sport_hover.png) no-repeat center center;  }

#industries .icons .industry-icon.progame{ background:url(img/icons/home_progame.png) no-repeat center center ; }
#industries .icons .industry-icon.progame.hover,
#industries .icons li.active .industry-icon.progame,
#industries .icons .industry-icon.progame:hover{ background:url(img/icons/home_progame_hover.png) no-repeat center center;  }

#industries .icons .industry-icon.adhesive{ background:url(img/icons/home_adhesive.png) no-repeat center center ; }
#industries .icons .industry-icon.adhesive.hover,
#industries .icons li.active .industry-icon.adhesive,
#industries .icons .industry-icon.adhesive:hover{ background:url(img/icons/home_adhesive_hover.png) no-repeat center center;  }

#industries .icons .industry-icon.footwear{ background:url(img/icons/home_footwear.png) no-repeat center center ; }
#industries .icons .industry-icon.footwear.hover,
#industries .icons li.active .industry-icon.footwear,
#industries .icons .industry-icon.footwear:hover{ background:url(img/icons/home_footwear_hover.png) no-repeat center center;  }

#industries .icons .industry-icon.packaging{ background:url(img/icons/home_packaging.png) no-repeat center center ; }
#industries .icons .industry-icon.packaging.hover,
#industries .icons li.active .industry-icon.packaging,
#industries .icons .industry-icon.packaging:hover{ background:url(img/icons/home_packaging_hover.png) no-repeat center center;  }

#industries .icons .industry-icon.solution{ background:url(img/icons/home_solution.png) no-repeat center center ; }
#industries .icons .industry-icon.solution.hover,
#industries .icons li.active .industry-icon.solution,
#industries .icons .industry-icon.solution:hover{ background:url(img/icons/home_solution_hover.png) no-repeat center center;  }

#industries .icons .industry-icon.industrial{ background:url(img/icons/home_industrial.png) no-repeat center center ; }
#industries .icons .industry-icon.industrial.hover,
#industries .icons li.active .industry-icon.industrial,
#industries .icons .industry-icon.industrial:hover{ background:url(img/icons/home_industrial_hover.png) no-repeat center center;  }

#industries .icons ul li{ display: block; float: left; height:100px; }
#industries .icons ul li.active > .body,
#industries .icons ul li:hover > .body{ display: flex;  }
#industries .icons ul li .body{ position: absolute; top: 100px; display: none; left: 80px; width: 1000px; padding: 50px 0px 0px; cursor: default; }
#industries .icons ul li .body .left{ width: 450px; }
#industries .icons ul li .body .right{ width: 550px; }
#industries .icons ul li .body h2,
#industries .icons ul li .body h2 a{ font-size: 28px; color: #a02881; font-weight: 600; line-height: 36px; margin: 0px 0px 30px; }
#industries .icons ul li .body h3{ font-size: 22px; color: #646464; font-weight: 600; line-height: 28px; margin: 0px 0px 30px; }
#industries .icons ul li .body h2.automotive a{ color: #243a54; }
#industries .icons ul li .body h2.insulation a{ color: #529e3c; }
#industries .icons ul li .body h2.sport a{ color: #a02881; }
#industries .icons ul li .body h3 span.shockpad{ color: #8bb941; }
#industries .icons ul li .body h3 span.tatami{ color: #d10429; }
#industries .icons ul li .body h2.progame a{ color: #95c12b; }
#industries .icons ul li .body h2.adhesive a{ color: #00987a; }
#industries .icons ul li .body h2.footwear a{ color: #00a5b4; }
#industries .icons ul li .body h2.packaging a{ color: #843b3c; }
#industries .icons ul li .body h2.solution a{ color: #007ec3; }
#industries .icons ul li .body h2.industrial a{ color: #d86c52; }
#industries .icons ul li .body p{ color: #646464; font-size: 18px; line-height: 28px; margin: 0px 0px 15px; }
#industries .image{ position: relative ; }
#industries .image .mask{ width: 511px; height: 511px; overflow: hidden; /* border-radius: 50%; */ position: relative; z-index: 60000;}
#industries .image .mask img{ max-width: none; height: 100%; }
#industries .image .circle{ width: 259px; height: 259px; position: absolute; left: 23px; top: -17px; border-radius: 50%; }
#industries .image .circle.automotive{ background: #243a54; }
#industries .image .circle.insulation{ background: #529e3c; }
#industries .image .circle.sport{ background: #a02881; }
#industries .image .circle.progame{ background: #95c12b; }
#industries .image .circle.adhesive{ background: #00987a; }
#industries .image .circle.footwear{ background: #00a5b4; }
#industries .image .circle.packaging{ background: #843b3c; }
#industries .image .circle.solution{ background: #007ec3; }
#industries .image .circle.industrial{ background: #d86c52; }
#industries .image a.more{ position: absolute; bottom: 35px; right: 30px; z-index: 70000; }


/* News */ 
#news{ background: #072e43; height: 630px; max-width: 1920px; margin: 0 auto; }
#news .nav{ width: 23px; height: 41px; top: 50%; transform:translateX(-50%); position: absolute; cursor: pointer; }
#news .prev{ background:  url(img/icons/icon_news_prev.png) no-repeat; left: 0px; display: none; }
#news .next{ background:  url(img/icons/icon_news_next.png) no-repeat; right: 0px; } 
#news .center{ position: relative; height: 100%; }
#news h2{ color: #fff; font-size: 28px; font-weight: 600; padding: 35px 0px 0px; }
#news .body{ padding: 50px 80px 0px; }
#news .body .image{ width: 400px; height: 400px;  overflow: hidden; position: absolute; left: 50%;  transform: translateX(-50%);}
#news .body .image .thumb{ height: 100%; width: 100%; border-radius: 50%; overflow: hidden; }
#news .body .image img{ height: 100%; max-width: none; -webkit-filter: blur(2px); filter: blur(2px) }
#news .body .image_3{ z-index: 50000; width: auto; height: auto;    }
#news .body .image_3 .thumb{ width: 400px; height: 400px; border-radius: 50%; overflow: hidden;  }
#news .body .image_3 .thumb img{-webkit-filter: blur(0px); filter: blur(0px); }
#news .body .image_3 a.more{ position: absolute; bottom: 10px; right: 20px; }
#news .body .image_2{ left: 14.5%; transform: perspective(500px) translate3d(0px,0px,-150px); opacity: 0.9 }
#news .body .image_1{ left: 0%; transform: perspective(500px) translate3d(0px,0px,-300px);  opacity: 0.5; }
#news .body .image_1 img{ -webkit-filter: blur(4px); filter: blur(4px) }
#news .body .image_4{ left: 52%; transform: perspective(500px) translate3d(0px,0px,-150px); z-index: 40000; opacity: 0.9 }
#news .body .image_5{ left: 66%; transform: perspective(500px) translate3d(0px,0px,-300px); z-index: 30000; opacity: 0.5; }
#news .body .image_5 img{-webkit-filter: blur(4px); filter: blur(4px) }
#news .text{ display:none; position: absolute; bottom: 50px;  right: 100px; max-width: 360px; transition: 0.5s all; -webkit-transition: 0.5s all;}
#news .text.show{ display: block; }
#news .text p{ color: #fff; font-size: 18px; line-height: 28px; }


/* Video */
#video{ background:url(img/home_video_bg.jpg) no-repeat center; height: 630px; position: relative; }
#video .play{ width: 88px; height: 88px; background:url(img/icons/icon_play.png) no-repeat; position: absolute; left: 50%; top: 75%; transform:translate(-50%,-50%); cursor: pointer;}


/* Innovations */
.round-image-section{  margin: -28px 0px 0px 0px; z-index: 800000; position: relative; background:url(img/home_innovations_bg.jpg) no-repeat right; } 
.round-image-section .body{ display: flex; align-items: center; }
.round-image-section .body .right{ padding: 0px 0px 0px 80px; }
.round-image-section .body h2{ color: #206980; font-size: 28px; font-weight: 600; margin: 0px 0px 25px; }
.round-image-section .body p{ color: #646464; font-size: 18px; color: #646464; max-width: 440px; line-height: 28px; }
.round-image-section .image{ position: relative; max-width: 455px;}
.round-image-section a.more{ position: absolute; bottom: 60px; right: 20px; }


/* Protect */
#protect{ background:url(img/home_protecting_bg.jpg) no-repeat center; height: 630px; margin: -29px 0px 0px; padding: 160px 0px 0px 80px; }
#protect .body{ max-width: 500px; }
#protect .body h2{ font-size: 28px; color: #fff; font-weight: 600; margin: 0px 0px 30px; }
#protect .body p{ font-size: 18px; color: #ffffff; line-height: 28px; }
#protect .body a.more{ margin: 90px 0px 0px; }


/* Innovation News */
#innovation-news{ background:url(img/home_innovation_news_bg.jpg) no-repeat center; height: 630px; padding: 160px 0px 0px 80px; }
#innovation-news .body h2{ font-size: 28px; color: #fff; font-weight: 600; margin: 0px 0px 30px; }
#innovation-news .body p{ font-size: 18px; color: #ffffff; line-height: 28px; }
#innovation-news .body a.more{ margin: 90px 0px 0px; }


/* Energy */
#energy{ background:url(img/home_energy_bg.jpg) right no-repeat; }


/* Furukawa */
#furukawa{ background:url(img/home_furukawa_bg.jpg) no-repeat center; height: 375px; display: flex;  align-items: center; margin: -29px 0px 0px 0px; }
#furukawa h2{ color: #fff; font-size: 36px; font-weight: 600; display: flex; align-items: center; }
#furukawa a.more{ display: inline-block; margin: 0px 0px 0px 25px; }
#furukawa p{ color: #fff; font-size: 20px; line-height: 26px; margin: 20px 0px 0px; }


/* Career page */
#cat-desc{ background-color: #d7e1e6; padding: 60px 0px;  }
#cat-desc .body{ padding: 0px 120px 0px 80px; }
#cat-desc h1{ font-size: 28px; color: #396984; font-weight: 600; margin: 0px 0px 5px }
#cat-desc p{ font-size: 18px; color: #646464; line-height: 28px; margin: 20px 0px; }
#positions{ padding: 40px 0px 0px; background: url(img/career_bg.jpg) no-repeat right;  background-size:contain;}
#positions h2{ font-size: 28px; color: #396984; font-weight: 600; padding: 0px 0px 0px 80px; }
#positions .post:first-child{ margin: 0px; }
#positions .post{ margin: 30px 0px; cursor: pointer; }
#positions .post span{ background: url(img/icons/icon_plus.png) no-repeat left; width: 47px; height: 47px; display: block; float: left; margin: 7px 0px 0px }
#positions .post.open span{ background: url(img/icons/icon_minus.png) no-repeat left; }
#positions .post h3{ font-size: 22px; font-weight: 600; color: #396984; background: #f1f4f6; padding: 20px 0px 20px 56px; margin: 0px 0px 20px 24px; }
#positions .post .text{ max-height: 0px; overflow: hidden; padding: 0px 0px 0px 80px; }
#positions .post.open .text{ max-height: 1000px; }
#positions .post p,
#positions .post ul,
#positions .post ol{  font-size: 18px; color: #646464; line-height: 28px; margin: 10px 0px;  }
#positions .post ul,
#positions .post ol{ margin: 0px 0px 0px 40px; }


/* Locations page */
.location-page{ position: relative; }
.location-page .vector{ position: absolute; top: 0px; right: 0px; z-index: 10000; max-height: 100%; overflow: hidden;}
.location-page .title .center{ position:relative; display: flex; height: 135px; align-items: center; } 
.location-page .title h1{ font-size: 28px; font-weight: 600; color: #396984;  }
.location-page .contact{ position: absolute; top: -70px; right: 80px; z-index: 120000;}
.location-page .contact .contact-button{ 
	display: flex; width: 139px; height: 139px; background: url(img/contact_button_bg.png) no-repeat; align-items: center; justify-content: center; color: #fff;
	font-size: 17px; text-transform: uppercase; font-weight: 700;
}
.location-page article{ padding: 50px 0px; max-width: 640px; margin: 0 auto; }
.location-page article h2{ color: #396984; font-size: 28px; font-weight: 600; margin: 0px 0px 30px; }
.location-page article p{ color: #646464; font-size: 18px; line-height: 28px; }
.location-page article td{ border-bottom: 1px solid #b4b4b4; padding: 50px 0px;}
.location-page article tr.nopadding td{ padding: 0px 0px 50px; }
.location-page article td img.alignright{ float: right;}
.location-page article tr.noborder td{ border: none; }
#location-map{ position: relative; z-index:100000; }


/* Subpage */
#main-image{ position: relative; z-index: 110000; }
#main-image.sub{ overflow: hidden; }
#main-image.sub img{ /*max-width: none; height: auto; */}
#main-image .slide-layer{  position: absolute; }
#main-image .slide-layer .button{ display: inline-block; font-size: 21px; padding: 15px 74px; border-radius: 30px; text-transform: uppercase; }
#main-image .slide-layer .button.white { color: #2e6d87; background: #fff; }
#main-image .slide-layer.layer2{ bottom: 4%; top: auto; text-align: center; margin: 0 auto; right: 0px; left: 0px; width: 720px; }
#main-image .slide-layer.layer2 span{ 
	padding: 0px; font-size: 40px;  font-style:italic; text-transform: lowercase;  vertical-align: bottom; font-family: 'Dancing Script', cursive; border-bottom: 1px solid #fff; font-weight: 400;
    display: inline-flex; align-items: center;  height: 50px;
}
#main-image .slide-layer.layer2 .button{ margin: 70px 0px; }
#main-image .slide-layer.layer2 .button:hover{ background: #396984; color: #fff; }
#main-image .slide-layer h2{ color: #fff; font-size: 40px; font-weight: 400; line-height: 40px; text-transform: uppercase; }
#main-image .slide-layer h2 strong{ padding: 0px; font-weight: 600; padding: 0px 0px 0px 100px; }
#main-image .slide-layer p{ color: #707070; font-size: 18px; line-height: 28px; margin: 30px 0px; float: none; }

.sub-page h1,
.sub-page h2,
.sub-page h3{ color: #396984; font-size: 28px; font-weight: 600; margin: 0px 0px 30px; }
.sub-page h2{ margin: 30px 0px 10px; line-height: 28px;}
.sub-page h2 + p{ margin: 0px; }
.sub-page h3{ font-size: 16px; margin: 20px 0px 10px; }
.sub-page h3+p{ margin: 0px; }
.sub-page p{ margin: 20px 0px; }
.sub-page p,
.sub-page ul,
.sub-page ol{ color: #646464; font-size: 18px; line-height: 28px; }
.sub-page a{ font-size: 18px; line-height: 28px; }
.sub-page a:hover{ text-decoration: underline; }
.sub-page ul,
.sub-page ol{ margin: 20px 0px 20px 40px;}
.sub-page img.alignleft{ float: left; margin: 0px 10px 10px 0px; }

.sub-page .center{ max-width: 840px; }
.sub-page #excerpt{ background: #d7e1e6; padding: 40px 0px; }
.sub-page #excerpt.history{ height: 322px; }
.sub-page article{ padding: 50px 0px; }
.sub-page article table td{ padding: 10px 0px; border-bottom: 1px solid #b4b4b4; }
.sub-page article table tr:last-child td{ border-bottom: none; }



/* Logo page */
.logos{ display: flex; flex-wrap: wrap; }
.logos img{ margin: 10px 10px 0px 0px; }


/* History */
.history h2{ font-size: 22px; }
.sub-page.history .center{ max-width: 1040px; }
.sub-page article.history{ padding: 50px 0px 190px; height: 620px; }
.history .year{ display: none; max-width: 440px; }
.history .year:first-child{ display: block; }
.history .label{ position: absolute; color: #000000; font-size: 28px; font-weight: 300; z-index: 140000; cursor: pointer; }
.history .label.active,
.history .label:hover{ color: #216980; }
.history .label.active span{ background:url(img/history_circle_hover.png) no-repeat left; }
.history .label span{ position: absolute; right: -10px; background:url(img/history_circle.png) no-repeat left; width: 26px; height: 26px; bottom: -35px; }
.history .label:hover span{ background:url(img/history_circle_hover.png) no-repeat left; }
.history .label.year2000{ right: 790px; bottom: 180px; }
.history .label.year2005{ right: 684px; bottom: 260px; }
.history .label.year2006-2010{ right: 571px; bottom: 357px; }
.history .label.year2011{ right: 477px; bottom: 447px; }
.history .label.year2014{ right: 402px; bottom: 530px; }


/* Map */
#map{ background:url(img/home_map_bg.jpg) no-repeat center; height: 630px; display: flex; align-items: center;}
#map p,
#map p a{ color: #fff; font-size: 20px; line-height: 26px; }
#map .body{ display: flex; padding: 0px 20px 0px 80px; }
#map .body .col1{ width: 60%; padding: 0px 50px 0px 0px; }
#map .body .col1 p{ margin: 0px 0px 20px; }
#map .body .col1 h2{ color: #fff; font-size: 28px; font-weight: 600; margin: 0px 0px 25px; }
#map .body .col2,
#map .body .col3{ width: 20%; }
#map .body .col2 p,
#map .body .col3 p,
#map .body .col3 p{ background:url(img/icons/icon_marker.png) no-repeat left; padding: 8px 0px 0px 40px; height: 45px;  align-items: center; margin: 0px 0px 10px; }
#map .body .col3 p span{ font-size: 11px; display: block; width: 100%; }


/* Contact form */
form#contact-form { background: #dfecf0; }
form#contact-form label{ color: #396984; }
form#contact-form .input-item hr{ background: #396984; }
form#contact-form input[type="submit"]{ background: #396984; }
form#contact-form input[type="submit"]:hover { background: #174d65; }


/* Footer */
footer #footer-top nav > ul > li:first-child{ display: none; }
footer #footer-top nav > ul > li > ul.sub-menu li ul.sub-menu.active{ display: block; padding: 10px 0px 0px 20px; }
footer #footer-top nav > ul > li > ul.sub-menu li ul.sub-menu a:hover{ text-decoration: underline; }