/****************************colors********************************/
:root {
	--blue: #0086ff;
	--grey: #23282b;
	--grey2: #f3f3f3;
	--grey3: #888;
}

/****************************base stuff*********************************/
.kozepre {text-align: center;}
.balra {text-align: left;}
.jobbra {text-align: right;}
.justify {text-align: justify;}
.fel {vertical-align: top;}
.vkozepre {vertical-align: middle;}
.le {vertical-align: bottom;}
.floatl{float: left;}
.floatr{float: right;}
.lezar{clear: both;}
.auto{overflow: auto;}		
.relative{position: relative;}	 
		 
/********************************************************************/
body		{font-size: 1.4vw; line-height: 1.8em; font-family: sans-serif; font-family: 'Red Hat Display', sans-serif; max-width: 100%; overflow-x: hidden; margin: 0;}
h1,h2,h3,h4	{margin: 0; line-height: 1.2em; animation: 0.5s ease-out 0s 1 slideIn;}
h1 {font-size: 2.4em; margin-bottom: 0.5em;}
h1.centered {text-align: center; padding: 2em 0 0 0;}
h3.centered {text-align: center; padding: 0 0 1.1em 0;}
h2 {font-size: 1.6em; margin-bottom: 0.3em;}
h1.blue, h2.blue {color: var(--blue);}
h3 {font-size: 1.4em; margin: 0.5em 0;}
img {max-width: 100%; animation: 0.6s ease-out 0.5s 1 slideIn; animation-fill-mode: both;}
a {color: var(--blue);}
em {color: var(--blue); font-style: normal;}
p {animation: 0.6s ease-out 0s 1 fadeIn;}
.small-caps {font-variant: small-caps;}
.flex2, .flex3, .flex4 {display: flex; flex-wrap: wrap; justify-content: space-between;}
.flex2>div {flex: 0 0 50%;  box-sizing: border-box; padding-bottom: 1.5em;}
.flex3>div {flex: 0 0 33.3%;  box-sizing: border-box; padding-bottom: 1.5em;}
.flex4>div {flex: 0 0 25%;  box-sizing: border-box; padding-bottom: 1.5em;}

.margined {margin: 4em auto; width: 80%;}
.padded {padding: 2em;}
a.butt {background: var(--blue); color: #FFF; border: 2px solid var(--blue); padding: 0.6em 2.7em 0.6em 2em; border-radius: 0.5em; text-decoration: none; font-weight: bold; font-size: 1em; display: inline-block; position: relative; margin-top: 1.5em;}
a.butt:after {content: ">"; font-size: 1.6em; position: absolute; right: 0.6em;}
a.butt2 {color: var(--blue); border: 3px solid var(--blue); padding: 0.8em 5em; border-radius: 0.5em; text-decoration: none; font-weight: bold; font-size: 1em; display: inline-block; position: relative; margin: 1.5em;}
a.butt2.selected {background: var(--blue); color: #FFF;}
a.butt3 {background: var(--blue); color: #FFF; padding: 0.8em 3.5em; border-radius: 0.5em; text-decoration: none; font-weight: bold; font-size: 1em; display: inline-block; position: relative; margin: 1.5em 0;}
div.rounded {display: inline-block; border-radius: 1em; overflow: hidden; line-height: 0;}

.content {margin-bottom: 5em;}
.wrap {max-width: 1400px; margin: 0 auto; position: relative; padding: 0 2em;}
#all {margin: 0 auto; margin-top: 4em;}
#sticky {left: 0; position: fixed; z-index: 200; width: 100%; height: 10%; top: 0; background: #FFF; opacity: 0.97; animation: 0.5s ease-out 0s 1 slideDown;}
#sticky .wrap { background-color: #FFF;}
#logo { margin-top: 0.5em; display: inline-block; width: 8em;}
#logo img {width: 100%;}
#mainmenu {display: inline-block; float: right; font-weight: bold;}
#mainmenu li {display: inline-block; padding: 0 0.9em;}
#mainmenu li a {text-decoration: none; }
#mainmenu li:last-child a {background: var(--blue); color: #FFF; font-size: 0.8em; padding: 0.4em 1.5em; border-radius: 0.2em; margin-left: 1em;}

p.big {font-size: 1.4em; line-height: 1.6em;}
p.small {font-size: 1em; max-width: 40em; line-height: 1.9em;}
p.bold {font-weight: bold;}
p.blockquote {position: relative;}
p.blockquote:before {content: open-quote; position: absolute; color: var(--blue); font-size: 30em; right: 95%; top: 6rem; z-index: -1; font-family: arial; }
p.blockquote:after {content: close-quote; position: absolute; color: var(--blue); font-size: 35em; left: 100%; bottom: -0.38em; z-index: -1; font-family: arial; opacity: 0.1; margin-left: -8rem;}

/*home*/
#home .content {margin-bottom: 0;}
#home section.dark {background: var(--grey); color: #FFF;}
#home .section1 {padding: 6em 2em 0 0;}
#home .section2 {padding-top: 5em;}
#home .section3 {max-width: 60em; margin: 2em auto 0 auto;}
#home .section3 img {display: inline-block; max-width: 22em; margin: 0 2em;}
#home .section3 p {display: inline-block; max-width: 25em;}
#home .section4 {max-width: 70em; margin: 0 auto; text-align: center; margin-top: 3em; justify-content: center;}
#home .section4.flex3>div {padding-bottom: 1em;}
#home .section4 .bg {background: #23282c; margin: 1.5em; padding: 2em; min-height: 31em; border: 4px solid var(--blue); border-radius: 0.5em;}
#home .section4 .sl {background: #23282c; margin: 1.5em; padding: 2em; min-height: 13em; border: 4px solid var(--blue); border-radius: 0.5em;}
#home .section4 .sl .kep {width: 100%;}
#home .section4 .kep {width: 12em; height: 12em; background-size: cover; display: inline-block; border-radius: 0.5em; box-shadow: 0 0 0.5em #222;}
#home .section4 .title1 {font-weight: bold; font-size: 1.4em; margin: 0.5em 0;}
#home .section4 .title2 {color: var(--blue); text-transform: uppercase; font-weight: bold; font-size: 1.2em;}
#home section.dark a.butt3 {width: 40%;}
#home .section5 {font-weight: bold; position: relative;}
#home .section5>div {padding: 1.5em 5% 0 15%;  display: none;}
#home .section5>div.current {display: block;}
#home .section5>div:before {content: open-quote; position: absolute; color: var(--blue); font-size: 10em; left: -1rem; top: 0.3em; z-index: -1; font-family: arial;}
#home .section5>div:after {content: close-quote; position: absolute; color: var(--grey2); font-size: 25em; right: 0; bottom: -0.4em; z-index: -1; font-family: arial;}
#home .icons {padding-left: 2em;}
#home .icons a {display: inline-block; background-repeat: no-repeat; background-position: center; width: 4.5em; height: 2.8em; margin: 0 0 3.0em 3.5em; background-size: 100%;}
.producttodiscuss {background: var(--blue); padding: 4em 0 3em 0;}
.producttodiscuss h2 {position: relative; text-align: center; color: #FFF; font-size: 2.2em; margin-bottom: 1em;}
.producttodiscuss a.butt3 {width: 30%; background: var(--grey2); color: var(--blue);}

/******************blog****************/
#blog .flex2>div {background-size: cover; background-position: center; height: 22em; margin-bottom: 5em; border-radius: 1em; position: relative;}
#blog .flex2>div:nth-of-type(1) {flex: 0 0 57%;}
#blog .flex2>div:nth-of-type(2) {flex: 0 0 34%;}
#blog .flex2 .text {background: rgba(0,0,0,0.5); position: absolute; bottom: 0; border-radius: 1em; color: #FFF; padding: 1em;}
#blog .flex3>div {background-size: cover; background-position: center; flex: 0 0 27%; margin-bottom: 2em;}
#blog .flex3 .kep {background-size: cover; background-position: center; height: 10em; border-radius: 1em; position: relative;}
#blog .flex2 a { position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
#blog a {text-decoration: none; color: #000;}
#blog .caption {background: rgba(255,255,255,0.5); display: inline-block; padding: 0.5em 1em; border-radius: 0 1em 1em 0; position: absolute; top: 2em; color: #FFF; text-transform: uppercase; font-size: 0.8em; letter-spacing: 0.2em;}
#blog .title {font-weight: bold; margin-top: 1em;}
#blog .intro {font-size: 0.9em; line-height: 1.3em;}

#all.page-contact {margin: 0;}
#contact {position: relative; padding: 0em 0; animation: 0.6s ease-out 0s 1 zoomIn;}
#contact .content {margin-top: 0;}
#all.noscroll {overflow: hidden; height: 50vh;}
#contact .contact {padding: 0 5%;}
#contact .office {border-radius: 1em; display: inline-block; width: 100%; height: 20em; overflow: hidden; position: relative; margin-bottom: 1em; max-width: 30em;}
#contact .office iframe {width: 100%; height: 20em; }
#contact .office .title {position: absolute; bottom: 0; right: 0; left: 0; background: rgba(0,0,0,0.8); color: #FFF; padding: 1.5em 2.5em; font-size: 0.8em; border-radius: 1em;}
#contact .office .title span {display: block; font-weight: bold; font-size: 1.6em;}
#contact .form {background: var(--blue); color: #FFF; padding: 3em 10%; position: relative;}
#contact h1 span {display: block; font-size: 0.5em; line-height: 1em;}
#contact form .block {padding: 0.7em 0;}
#contact form label {font-size: 1.4em; font-weight: bold;}
#contact form input[type="text"] {border: 1px solid #FFF; border-width: 0 0 1px 0; background: none; margin: 0.5em 0; font-weight: bold; line-height: 1.6em;}
#contact form input[type="text"]:focus {border-width: 0 0 1px 0; background: #3ba2ff;}
#contact form input::placeholder {color: #FFF; opacity: 0.5;}
#contact form a.next,  #contact form input.next{background: #FFF; color: var(--blue); text-decoration: none; padding: 0.5em 2em; border-radius: 0.5em; font-weight: bold; margin: 1em 0; display: inline-block; border: none;}
#contact .form2 {position: fixed; width: 100%; top: 0; left: 0; bottom: 0; right: 0; background: var(--blue); padding: 5em 5%; z-index: 100; box-sizing: border-box; display: none; overflow: auto;}
#contact .close {position: absolute; right: 1em; top: 1em; display: block; color: var(--blue); background: var(--grey2); border-radius: 50%; width: 1.5em; height: 1.5em; text-decoration: none; text-align: center; font-weight: bold; font-size: 1.3em; line-height: 1.5em;}
#contact .form2 .close {position: fixed;}
#contact form .flex2 .short {flex: 0 0 33.3%;}
#contact form .flex2 .wide {flex: 0 0 66.6%;}
#contact form .flex2 .wide input[type="text"] {width: 20em;}
#contact form .flex3 {justify-content: left;}
#contact .form2 label>em {font-weight: normal; font-size: 0.7em; color: #FFF;}
#contact form label.error {display: none !important;}
#contact form input.error {background: #FF7B7BC4;}
/*custom radio*/
label.radio {display: block; position: relative; padding-left: 35px; cursor: pointer;  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-weight: normal !important; font-size: 1em !important;}
label.radio input {position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
label.radio .checkmark {position: absolute; top: 5px; left: 5px; height: 15px; width: 15px; border-radius: 50%; border: 1px solid #FFF;}
label.radio:hover input ~ .checkmark {background-color: #FFF;}
label.radio input:checked ~ .checkmark {background-color: #FFF;}
label.radio .checkmark:after {content: "✔"; position: absolute; display: none; color: var(--blue); top: 0; left: 0; width: 15px; height: 15px; border-radius: 50%; background: white; line-height: 1em; font-size: 0.8em; text-align: center;}
label.radio input:checked ~ .checkmark:after {display: block;}

/*product page***/
#products .content {margin-bottom: 0; background: url('../../img/page/product_undervideo_big.png') no-repeat; background-size: 40em 40em; background-position: 85% 48em;}
#products .tabs>div{box-shadow: 0 0 0.5em #CCC; border-radius: 1em; text-align: center; padding-top: 2em; cursor: pointer; overflow: hidden; flex: 0 0 22%; margin-bottom: 2em;}
#products .tabs img {width: 100%; opacity: 0.8;}
#products .tabs>div.selected img {opacity: 1;}
#products .tabs div.title {font-weight: bold; font-size: 1.6em; padding: 2em 0 0.8em 0; position: relative; transition: all 0.5s;}
#products .tabs div.title:after {content: ""; position: absolute; background: var(--grey2); height: 1em; width: 100%; bottom: -1.5em; left: 0; transition: all 0.5s;}
#products .tabs a {text-decoration: none; color: #000;}
#products .tabs>div.selected>div,#products .tabs>div.selected>a>div {color: var(--blue);}
#products .tabs>div.selected>div:after, #products .tabs>div.selected>a>div:after {background: var(--blue);}
#products .pages section {display: none;}
#products .pages section:nth-of-type(1) {display: block;}
#products .pages p {text-align: center; max-width: 48em; margin: 0 auto 2em auto;}
#products .videobg {background: url('../../img/page/product_undervideo_big.png') no-repeat; overflow: auto; background-size: 25em 25em; background-position: 13% 0;}
#products .video {margin: 0 auto; max-width: 720px; border-radius: 1em; overflow: hidden;}
#products .video iframe {width: 100%; height: 400px;}
#products .icons  { justify-content: left; }
#products .icons>div {flex: 0 0 31%; position: relative; border: 4px solid var(--blue); border-radius: 0.5em; padding: 2.5em 2.5em 2em 2.5em; margin: 1em 0;min-height:32em;}
#products .icons>div.wide {flex: 0 0 65%;}
#products .icons>div:nth-of-type(3n+2) {margin: 1em 3%;}
#products .icons>div img {width: 35%; margin-bottom: 0.5em;}
#products .icons>div p {margin: 0; padding: 0 0 1em 0; font-size: 1em; text-align: left; line-height: 1.6em;}
#products .icons>div.blue {background: var(--blue); color: white; min-height: 0em;}
#products .grey {background: var(--grey2); padding: 2em 0; margin-top: 5em;}
#products .grey div {padding: 0 5%;}
#products .grey img {width: 100%;}
#products .grey .text {padding-top: 3em;}
#products #home .product2, #products #home .product3, #products #home .product4 {display: none;}
#products .supported {background: var(--grey2); text-align: center; padding-bottom: 3em;}
#products .supported h2 {text-align: center; color: #000; padding: 1.5em 0 0.5em 0; font-size: 2.5em;}
#products .supported img {width: 8em; margin: 2em;}

/***portfolio***/
#products .content .portfolio {margin-bottom: 0; background: none;}
#products .portfolio .tabs {max-width: 70em; margin: 0 auto;}
#products .portfolio .tabs>div {flex: 0 0 29%; padding-top: 0;}
#products .portfolio .tabs .img {height: 15em; background: #FFF 0 0 no-repeat; background-size: cover; border-radius: 1em; opacity: 0.5; transition: all 0.5s;}
#products .portfolio .tabs>div.selected .img {opacity: 1;}
#products .portfolio .tabs .title {padding-top: 1em;}
#products .portfolio .video {margin-top: 5em;}
#products .portfolio .flex2 {justify-content: space-evenly; align-items: center;}
#products .portfolio .hasab .flex2 {justify-content: center; align-items: center;}
#products .portfolio .flex2>div {flex: 0 0 41%; margin: 2em 0;}
#products .portfolio .hasab .flex2>div {flex: 0 0 32%; margin: 2em 1.3em;}
#products .portfolio .flex2 .blue {background: var(--blue); border-radius: 1em; min-height: 30em;}
#products .portfolio .case {font-size: 0.9em; border: 4px solid var(--blue); border-radius: 1em;}
#products .portfolio .flex2.case .blue {min-height: 20em;}
#products .portfolio .flex2.case p {text-align: left;}
#products .portfolio .makers {font-size: 0.9em; background: var(--grey2); margin-top: 12em;}
#products .portfolio .makers .img {position: relative; height: 20em;}
#products .portfolio .makers img {position: absolute; left: 0; top: -10em; width: 90%;}
#products .portfolio .icons {max-width: 70em; margin: 0 auto;}
#products .portfolio .icons p.title {text-align: center; padding-top: 1em; font-weight: bold;}
#products .portfolio .icons p:before {content: ">"; position: absolute; margin-left: -1em; color: var(--blue);}
#products .portfolio .icons p.title:before {display: none;}
#products .portfolio .icons span {background: var(--blue); color: #FFF; display: block; margin: 0 auto; padding: 1em; border-radius: 50%; width: 2rem; height: 2rem; line-height: 2rem; text-align: center; font-weight: bold; font-size: 1.2em;}
#products p.blockquote {margin-top: 5em;}
#products .blockquotetitle {max-width: 10em; margin: 0 auto; font-size: 0.8em; line-height: 1.4em;}

/***company****/
#company section.bg {padding: 3em 0 2em 0; background: url('../../img/page/whoweare_bg.png') 20% 10% no-repeat; background-size: 50%;}
#company section.bg2 {background-position: 70% 10%;}
#company section.flex2 .text {margin-top: 3em; line-height: 1.6em;}
#company section.mission .text {padding-top: 5em;}
#company .statistics>div {background: url('../../img/page/whoweare_statistic_dblue.png') no-repeat; background-size: 100%; padding: 1em; padding-bottom: 28%; position: relative; }
#company .statistics>div:nth-of-type(2n) {background-image: url('../../img/page/whoweare_statistic_lblue.png');}
#company .statistics>div span {position: absolute; left: 10%; top: 35%; width: 80%; display: inline-block; color: #FFF; font-weight: bold; font-size: 1.2em; line-height: 1.4em; text-align: center;}
#company .statistics>div span.row2 {top: 37%;}
#company .content {margin-bottom: 0;}
#company .core {background: var(--grey2); margin-top: 3em; padding: 3em 0; font-size: 0.9em;}
#company .core .flex2 {justify-content: space-around;}
#company .core .flex2>div {flex: 0 0 40%;}
#company .core .jobbra>div {color: var(--grey3); font-weight: bold; font-size: 1.3em; padding: 0.8em 2em 0.8em 0; position: relative; cursor: pointer; transition: all 0.5s;}
#company .core .jobbra>div.selected {color: black;}
#company .core .jobbra>div:after {content: "<"; position: absolute; color: #000; border: 3px solid var(--blue); border-radius: 50%; width: 1.6em; height: 1.6em; text-align: center; line-height: 1.6em; font-size: 0.8em; right: 0; transition: all 0.5s;}
#company .core .jobbra>div.selected:after {background: var(--blue); color: #FFF;}
#company .core .jobbra>div.selected span { font-size: 1.2em;}
#company .core .text>div {display: none;}
#company .core .text>div:nth-of-type(1) {display: block;}
#company .work {background: var(--grey); color: #FFF;}
#company .work h1 {text-align: center; padding: 1.5em 0;}
#company .work .flex2 {justify-content: space-evenly;}
#company .work .flex2>div {padding: 0 5% 5% 5%; border-left: 5px solid var(--blue); flex: 0 0 40%; position: relative;}
#company .work .flex2>div:before {content: attr(data-n); left: -1.3em; top: -0.5em; font-size: 1.4em; font-weight: bold; position: absolute; border: 5px solid var(--blue); border-radius: 50%; width: 2em; height: 2em; line-height: 2em; text-align: center; background: var(--grey);}
#company .work .flex2>div:nth-of-type(3n) {border: none;}
#company .trophy {text-align: center; background: url('../../img/page/whoweare_bg.png') no-repeat center; background-size: 70%; padding: 2em 0; margin-top: 4em;}
#company .trophy .title {color: #0086ff66; font-size: 1.2em; font-weight: bold;}
#company .trophy .image {width: 20vw; height: 20vw; background-color: #FFF; background-repeat: no-repeat; background-position: center; background-size: 70%; margin: 0 auto; box-shadow: 0 0 1em #0086ff66; border-radius: 1em; margin: 1em 0; display: inline-block;}
#company .trophy .text {color: var(--blue); font-weight: bold; font-size: 0.9em; padding: 0 1em;}
#company .meet p {margin: 0 auto; text-align: center;}
#company .meet .flex3	{text-align: center; margin-top: 3em; justify-content: left;}
#company .meet .flex3>div {border: 4px solid var(--blue); border-radius: 1em; flex: 0 0 25%; padding: 1.5em 2.5em !important; margin: 0 4% 3em 4%; background: #FFF;}
#company .meet .flex3 .image {width: 8em; height: 8em; background: #FFF no-repeat center; display: inline-block; border-radius: 1em;}
#company .meet .flex3 .name {color: var(--blue); font-weight: bold;}
#company .meet .flex3 .title {color: var(--grey3);}
#company .meet .flex3 .desc {font-size: 0.7em; text-align: left; line-height: 1.5em; padding-top: 1em;}
#company .career {background: var(--grey2); text-align: center; padding: 4em 0;}
#company .meet.career .flex3 {justify-content: center;}
#company .career img {width: 5em; margin: 1em 0;}
#company .career .flex3 .title {font-weight: bold; color: #000;}
#company .career .flex3 .butt3 {display: block; margin: 2em 0; padding: 0.6em 0;}
#company .strategic>div {padding: 2em 1.5em 1em 1.5em;}
#company .strategic .badge_hu {position: absolute; top: 8em; left: -6em; width: 33%; height: 33%;}
#company .strategic .badge_en {position: absolute; top: 8em; left: -6em; width: 33%; height: 33%;}
#company .experience .badge2 {position: absolute; top: -16%; left: -12%; width: 25%; height: 25%;}
#company .zspace {background: var(--grey2); text-align: center;}
#company .zspace img {width: 20em;}
#company .zspace2 {background: var(--grey); color: #FFF; padding: 8em 0;}
#company .zspace2 p {margin: 0 auto; padding: 0; max-width: 28em; font-size: 0.8em; font-weight: bold; position: relative;}
#company .zspace2 p:before {content: open-quote; font-size: 20em; font-weight: bold; color: var(--blue); position: absolute; right: 100%; top: 3rem; font-family:Arial;}
#company .zspace2 p:after {content: close-quote; font-size: 35em; font-weight: bold; color: #393e41; position: absolute; left: 100%; top: 170%; font-family:Arial;}
#company .experience {background: white;}
#company .experience .flex2 {max-width: 47em;}
#company .experience .flex2>div {flex: 0 0 40%;}
/*#company .experience .flex2 .image {width: 22em; height: 12em; background: #FFF center no-repeat; background-size: 101%; border: 3px solid var(--blue); border-radius: 0.5em;}*/
#company .experience .flex2 .expVideo {width: 22em; /*height: 12em; background: #FFF center no-repeat; background-size: 101%; border: 3px solid var(--blue);*/ border-radius: 0.5em;}
#company .experience .flex2 .title {text-align: center; font-size: 1.2em; font-weight: bold; padding: 1em;}
#company .videobg {background: url('../../img/page/product_undervideo_big.png') no-repeat; overflow: auto; background-size: 25em 25em; background-position: 13% 0;}
#company .video {margin: 0 auto; max-width: 720px; border-radius: 1em; overflow: hidden;}
#company .video iframe {width: 100%; height: 400px;}

/*consultation*/
form.blue {background: var(--blue); color: #FFF;}
form.blue input[type="text"] {border: 1px solid #FFF; border-width: 0 0 1px 0; background: none; margin: 0.5em 0; line-height: 1.6em; width: 17em;}
form.blue input[type="text"]:focus {border-width: 0 0 1px 0; background: #3ba2ff;}
form.blue input::placeholder {color: #FFF; opacity: 0.5;}
form.blue input[type="submit"] {background: #FFF; color: var(--blue); display: block; padding: 1.2em; border: none; border-radius: 0.2em; font-weight: bold; font-size: 0.9em; width: 100%;}
form.blue label.error {display: none !important;}
form.blue input.error {background: #FF7B7BC4;}
#all.page-consultancy {margin-top: 0;}
#consultation .black {background: #000;}
#consultation .wrap.bg {padding: 5em 0 2em 0; background: #000 url('../../img/page/consultancy.jpg') no-repeat; background-size: 100%;}
#consultation .content {max-width: 1000px; margin: 0 auto;}
#consultation section.flex2 {margin-bottom: 3em;}
#consultation form.blue {display: inline-block; padding: 2em 3em 2em 3em; border-radius: 1em; box-shadow: 0 0 2em #00000088; position: relative; margin: 5em 0 3em 0; animation: 0.5s ease-out 0s 1 slideIn; min-height: 15em;}
#consultation form.blue img {position: absolute; top: -6em; width: 10em; left: 6em; background-color: #0086ff; border: 14px solid #0086FF; border-radius: 14px;}
#consultation form.blue label {font-weight: bold;}
#consultation p.blue {color: var(--blue); font-weight: bold; line-height: 1.6em; font-size: 1.1em; margin-top: 2em;}
#consultation .list {margin-top: 3em;}
#consultation .list>div {position: relative; box-shadow: 0 0 1em #DDD; margin: 1em 0; border-radius: 1em; padding: 0 5%; background: #FFF;}
#consultation .list>div img {width: 10%; display: inline-block; float: left;margin-top: 1.5em;}
#consultation .list>div p {display: inline-block; line-height: 1.4em; width: 85%; padding: 0 0 0 5%; font-size: 1em;}
#consultation .trainerbg {background: #F4F4F4; position: relative; padding-bottom: 5em;}
#consultation .trainerbg:before {content: ''; background: #F4F4F4; position: absolute; left: 0; top: -9em; right: 0; bottom: 0; z-index: -1;}
#consultation .trainer {box-shadow: 0 0 1em #00000022; margin: 5em auto 0 auto; border-radius: 1em; padding: 3em 4em; background: #FFF;}
#consultation .numbered {position: relative; margin-left: 1em; line-height: 1.4em;}
#consultation .numbered:before {content: attr(order) ","; left: -1.2em; top: 0; position: absolute; color: var(--blue); font-weight: bold;}
#consultation ul li {list-style: none; position: relative; font-size: 1.1em;}
#consultation ul li::before {content: "\2022"; color: var(--blue); font-size: 1.5em; display: inline-block; position: absolute; right: 101%; top: 4%;}
#consultation .footer {text-align: center; background: url('../../img/page/consultancy _footer.jpg'); padding: 3em 0;}
#consultation .footer h2 {color: #FFF; margin: 1.5em 0 0.8em 0;}
#consultation a.book {background: #FFF; color: var(--blue); display: inline-block; padding: 0.5em 1.2em; border: none; border-radius: 0.2em; font-weight: bold; font-size: 0.9em; text-decoration: none;}

#virtualreality {background: url('../../img/page/virtual_reality.png') 0 0 no-repeat; background-size: 100%;}
#virtualreality>div {max-width: 700px; margin: 0 auto; padding: 5em 0;}
#virtualreality .flex2>div {margin: 2em 0; flex: 0 0 48%; text-align: center; line-height: 1.4; position: relative; box-shadow: 0 0 1em #00000033; border-radius: 0.5em; background: #FFF;}
#virtualreality .img {background-size: 100%; background-repeat: no-repeat; min-height: 14em; border-radius: 0.5em; margin-bottom: 1em;}
#virtualreality .butt3, #virtualreality p {display: block; margin: 1em 1em;}
#virtualreality p	{min-height: 12em;}

/******************* cookie **********************/
#cookie-background {position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); width: 62%; max-width: 1440px; margin-left: auto; margin-right: auto; background-color: var(--blue); border-radius: 16px; padding: 23px 32px; box-shadow: 0px 4px 16px #00000029;}
#cookie-background table {width:100%}
#cookie-background .cookie-msg {text-align: left; color: white; font: normal bold 20px/28px "Red Hat Display"; padding-left: 10px; padding-right: 10px;}
#cookie-background td img {display: inline-block; text-align: center; vertical-align: middle; height: 100%; padding-right: 10px}
#cookie-background a {color: #23282b; text-decoration: none;}
#cookie-background .cookie-button {text-align: right; font: normal bold 20px/28px "Red Hat Display"; white-space: nowrap;}
#cookie-background a.btn-aceptar {padding: 16px 49px; border-radius: 5px; background-color: white; color: var(--blue); font-size: 18px; text-decoration: none; text-align: right}

/*********************footer*********************/
footer {background: var(--grey); color: #FFF; padding: 2em 7em; font-weight: bold;font-size: 0.9em;}
footer .flex2 div {flex: 0 0 40%;}
footer div.bg {background: url('../../img/page/footer_bg.png') no-repeat; background-size: 60%;}
footer div.bordered {border-bottom: 1px solid #FFF; padding-bottom: 1em; margin-bottom: 1em;}
footer nav {position: relative; padding: 5em 2em 0 0;}
footer nav a {color: #FFF; text-decoration:none; display: inline-block; padding: 0.4em 0; width: 30%; white-space: nowrap;}
.social a {display: inline-block; margin: 0.3em 1.5em 0 0; width: 1.8em;}
.social a img {width: 100%;}
footer .logo {width: 10em; margin: 1.5em 0 0.3em 0;}
footer .copy {color: #888; font-weight: normal; font-size: 0.8em; line-height: 1.1em;}
footer .copy.white {color: #FFF;}
footer input[type="text"] {width: 60%; border: none; border-radius: 0.5em; line-height: 2em; padding: 0.8em 1em; color: var(--blue); margin: 1em 0;}
footer input[type="submit"] {background: var(--blue); color: #FFF; padding: 1em 1.5em; border-radius: 0.5em; text-decoration: none; font-weight: bold; font-size: 1.1em; display: inline-block; position: relative; border: none; margin-left: 1em; position: relative; top: 2px;}

/*****************StickyLanguage********************/
.language {position: fixed; z-index: 200; min-width: 95px; min-height: 47px; width: 5%; height: 5%; top: 10px; right: 10px; background: #0085fe; opacity: 0.97; border-color: #012f5e; border-radius: 40px; animation: 0.5s ease-out 0s 1 slideDown;}
.flag {position: absolute; top: 1px; left: 0px; width: 41px;}

/**********************responsive*******************/
@media screen and (min-width: 1400px) {
	body {
		font-size: 18px;
	}
}
@media screen and (max-width: 1400px) {
	#cookie-background td img {display: none}
}


@media all and (max-width: 600px){
	body	{font-size: 4vw;}
	img {max-width: 100% !important;}
	.flex2,.flex3, .flex4 {display: block;}
	.flex2>div,.flex3>div,.flex4>div {padding-bottom: 0;}
	p.blockquote:before {font-size: 2em; top: 0; left: 0;}
	p.blockquote:after {font-size: 2em; margin-left: 0;}
	.margined { margin: 1em auto;  width: 100%;}
	.padded {padding: 1em 0;}

	/*****************StickyLanguage********************/
	.language {position: fixed; z-index: 200; min-width: 95px; min-height: 47px; width: 15%; height: 5%; top: 10px; right: 10%; background: #0085fe; opacity: 0.97; border-color: #012f5e; border-radius: 40px; animation: 0.5s ease-out 0s 1 slideDown;}
	.flag {position: absolute; top: 1px; left: 0px; width: 41px;}

	#home .section1 {padding: 1em;}
	#home .section2 {margin: 1em;}
	#home .section3 img {margin: 0;}
	#home .section4 .bg {margin: 0; min-height: 0;}
	#home .icons {margin-top: 5em; padding: 0; text-align: center;}
	#home .icons a {margin: 2em 0.8em; }
	#products .content {background: none; padding: 0 0 0 0;}
	#products h1.centered {padding: 1em 0; font-size: 2.2em;}
	#products .tabs {display: table; table-layout: fixed; border-spacing: 10px; position: fixed; top: 10%; padding: 0; width: 100%; left: 0; background: #FFF; border-top: 1px solid var(--grey2); z-index: 100; box-shadow: 0 1em 1em var(--grey2); animation: 0.5s ease-out 0s 1 slideIn;}
	#products .tabs > div {display: table-cell; padding-top: 0; vertical-align: middle; position: relative; line-height: 2em; margin: 0; width: 100%; border-radius: 0; box-shadow: none; border-bottom: 0.8rem solid var(--grey2);}
	#products .tabs > div.selected {border-bottom: 0.8rem solid var(--blue);}
	#products .tabs div.title, #products .portfolio .tabs .title {padding: 0; font-size: 1.1em;}
	#products .tabs div.title:after, #products .tabs>div.selected>div:after, #products .tabs>div.selected>a>div:after {display: none;}
	#products .tabs img {display: none; }
	#products .tabs .img {display: none;}
	#products .portfolio .tabs .img {width: 3em; height: 2.8em; position: absolute; left: 1em; top: 0.1em; border-radius: 0.5em;}
	#products .portfolio h1.centered {padding: 0;}
	#products p.blockquote {margin-top: 1em;}
	#products .videobg {background: none;}
	#products .video iframe {height: 14em;}
	#products .icons > div{min-height: 0;}
	#products .icons > div:nth-of-type(3n+2) {margin: 1em 0;}
	#products .portfolio .case {padding: 1em;}
	#products .supported img {width: 5em;}
	#products .portfolio .makers .img {height: 10em;}
	#company section.bg {padding: 1em 0 1em 0;}
	#company .strategic .badge_hu {position: absolute; left: -0.9em; width: 50%;}
	#company .strategic .badge_en {position: absolute; top: 18%; left: -0.9em; width: 50%;}
	#company .experience .badge2 {position: absolute; top: -25em; left: 72%; width: 33%;}
	#company .zspace2 p:before {font-size: 2em; top: 0;}
	#company .zspace2 p:after {font-size: 2em; bottom: 0; top: auto;}
	#company section.mission .text {padding-top: 0;}
	#company section.flex2 .text {margin-top: 0;}
	#company .statistics {width: 50%; margin: 0 auto;}
	#company .statistics > div{padding-bottom: 105%; font-size: 0.8em; }
	#company .experience .flex2 .image {width: auto; height: 11.2em;}
	#company .videobg {background: none;}
	#company .video iframe {height: 14em;}
	#company .trophy .image {margin: 0; background-size: 100%;}
	#company .trophy .text {line-height: 1.2em;}
	#company .work .flex2 > div {padding-left: 10%;}
	#company .work .flex2 > div:nth-of-type(3n) {border-left: 5px solid var(--blue);}
	#contact .contact {margin-top: 3em;}
	#cookie-background th:not(:first-child) { display: none; }
	#cookie-background td img {display: none}
	#cookie-background td, th { display: block;}
	#cookie-background .cookie-button {width: 100%; padding-top: 20px;}
	#cookie-background .cookie-msg {padding: 0;}
	#cookie-background td[data-th]:before  {content: attr(data-th);}
	footer {padding: 2em 1em;}
	footer div.bg {background: none;}
	footer input[type="text"] {width: 92%;}
	footer nav {padding: 0;}
}

/*keyframes*/
@keyframes slideDown {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slideIn {
  0% {
    transform: translateX(-1rem);
	opacity: 0;
  }
  100% {
    transform: translateX(0);
	opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
	opacity: 0;
  }
  100% {
	opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
	opacity: 0;
	transform: scale(0.9); 
  }
  50% {
	opacity: 0.3;
	transform: scale(1); 
  }
  100% {
	opacity: 1;
	transform: scale(1); 
  }
}

/* FROM libs */
.card-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.card-carousel>div {
  text-align: center;
  width: 25vw;
  position: relative;
  z-index: 1;
  -webkit-transform: scale(0.6) translateY(-2rem);
  transform: scale(0.6) translateY(-2rem);
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
  transition: 1s;
}

.card-carousel>div.active {
  z-index: 3;
  -webkit-transform: scale(1) translateY(0) translateX(0);
  transform: scale(1) translateY(0) translateX(0);
  opacity: 1;
  pointer-events: auto;
  transition: 1s;
}

.card-carousel>div .title, .card-carousel>div .text {opacity: 0; transition: opacity 0.5s;}
.card-carousel>div.active .title, .card-carousel>div.active .text {opacity: 1;}

.card-carousel>div.prev, .card-carousel>div.next {
  z-index: 2;
  -webkit-transform: scale(0.7) translateY(-0rem) translateX(0);
  transform: scale(0.7) translateY(-0rem) translateX(0);
  opacity: 0.6;
  pointer-events: auto;
  transition: 1s;
}
#card-carousel {position: relative; padding-bottom: 2em; max-width: 100%;}
#card-carousel .back, #card-carousel .forward {font-size: 5em; color: #0086ff; position: absolute; top: 40%; left: 0; display: block; cursor: pointer;}
#card-carousel .forward {left: auto; right: 0;}
#card-carousel .controls {position: absolute; bottom: 0; text-align: center; width: 100%;}
#card-carousel .controls span {color: #0086ff; display: inline-block; margin: 2px; transform: rotate(90deg); opacity: 0.5;}
#card-carousel .controls span.active {opacity: 1;}

@media all and (max-width: 600px){
	#card-carousel {font-size: 1em;}
	.card-carousel>div {width: 50vw; font-size: 0.7em;}
}