/****************************colors********************************/
:root {
	--blue: #0086ff;
	--blue2: #0086ff78;
	--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}
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 1.1em 0;}
h2 {font-size: 2em; margin-bottom: 0.3em;}
h2.centered {text-align: center; padding: 1em 0 1.1em 0;}
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;}
sup {color: black}
hr {width: 100%; border: 1px solid rgba(187,187,187,0.64)}
nav span {color: black;}
.small-caps {font-variant: small-caps;}
.flex2, .flex3, .flex4 {display: flex; flex-wrap: wrap; }
.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;}
button.butt3 {background: var(--blue); border: none; 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-top: 5em; 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%; 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 {height: 100%; display: flex; flex-direction: column; justify-content: space-between; margin: 0 1.5em; padding: 0 2em; min-height: 48em; 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 {margin-top: 20%; width: 12em; height: 12em; background-size: cover; display: inline-block; border-radius: 0.5em; box-shadow: 0 0 0.5em #222;}
#home .section4 .title1 {color: var(--blue); font-weight: bold; font-size: 1.4em; margin: 0.5em 0;}
#home .section4 .leoshape {height: 100%; display: flex; flex-direction: column; justify-content: space-between; margin: 0 1.5em; padding: 0 2em; min-height: 30em; border: 4px solid var(--blue); border-radius: 0.5em;}
#home .section4 .leoshape .kep {margin: 20% auto 0 auto; width: 12em; height: 12em; background-size: cover; display: inline-block; border-radius: 0.5em; box-shadow: 0 0 0.5em #222;}
#home .section4 .leoshape .title1 {color: black; font-weight: bold; font-size: 1.4em; margin: 0.5em 0;}
#home .section4 .whoweare {height: 100%; display: flex; flex-direction: column; justify-content: space-around; margin: 0 1.5em; padding: 0 2em;}
#home .section4 .whoweare .title1 {color: black; font-weight: bold; font-size: 1.4em; margin: 0.5em 0;}
#home .section4 .whoweare p {margin: 0;}
#home .section4 .service {height: 100%; display: flex; flex-direction: column; justify-content: space-between; margin: 0.5em 1.5em; padding: 0 2em; min-height: 30em;}
#home .section4 .service .title1 {color: black; font-weight: bold; font-size: 1.4em; margin: 0.5em 0;}
#home .section4 .service .title2 {color: black; font-weight: normal; font-size: 1.2em; margin: 0.5em 0;}
#home .section4 .service p {margin: 0.5em 0;}
#home .section4 .title2 {text-transform: uppercase; font-weight: bold; font-size: 1.2em;}
#home .section4 .kozepre {position: relative; bottom: 0; }
#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%;}
#home .meet p {margin: 0 auto; text-align: center;}
#home .meet .flex3	{text-align: center; margin-top: 3em; justify-content: left;}
#home .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;}
#home .meet .flex3 .image {width: 8em; height: 8em; background: #FFF no-repeat center; display: inline-block; border-radius: 1em;}
#home .meet .flex3 .name {color: var(--blue); font-weight: bold;}
#home .meet .flex3 .title {color: var(--grey3);}
#home .meet .flex3 .desc {font-size: 0.7em; text-align: left; line-height: 1.5em; padding-top: 1em;}
.contactus {background: #e8e8e8; text-align: center; padding: 2em 0;}
.contact .contactus {background: none;}
.contactus .flex3 {justify-content: center;}
.contactus svg {fill: #0a90eb}
.contactus img {width: 2em; height: 2em; margin: 1em 0; fill: var(--blue);}
.contactus p {margin:auto}
.contactus a {text-decoration:none; color: black;}
.contactus .flex3 .title {font-weight: bold; color: #000;}
.contactus .flex3 .butt3 {display: block; margin: 2em 0; padding: 0.6em 0;}
.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 p {position: relative; text-align: center; color: #FFF; font-size: 1em; margin-bottom: 1em;}
.producttodiscuss a.butt3 {width: 10%; background: var(--grey2); color: var(--blue);}
.producttodiscuss a.butt3.shapelabbutton {width: 15%; background: var(--grey2); color: var(--blue);}
.multiedittools {background: var(--blue); padding: 4em 0 3em 0; color: white;}
.multiedittools .tools {border: white 4px solid; border-radius: 1em; padding: 0 2em; margin: 0 auto; flex: 0 0 45%;}
.multiedittools h2 {position: relative; text-align: center; font-size: 2.2em; margin-bottom: 1em;}
.multiedittools h3 {position: relative; text-align: center; font-size: 2.4em; margin-bottom: 1em;}
.multiedittools p {position: relative; text-align: center; font-size: 1em; margin-bottom: 1em;}
.multiedittools a.butt3 {width: 33%; background: var(--grey2); color: var(--blue);}
.multiedittools a.butt3.shapelabbutton {width: 15%; background: var(--grey2); color: var(--blue);}
.usages .usage {border: white 3px solid; border-radius: 1em; padding: 1em 0.4em; margin: 0 1em; flex: 0 0 15%}
.usages .flex4 {justify-content: center;}
.usages img {width: 10em; margin-bottom: 0.7em; border-radius: 1em;}
.usages a.butt3 {width: 10em !important; padding: 0.8em 1em;}
.usages h2 {font-size: 1.3em; margin-bottom: 0}

/******************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 3%;}
#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 5%; 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 {justify-content: space-evenly;}
#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 .icons .blue p {max-width: 100%; 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; margin: 3em 0}
#products .video {margin: 0 auto; max-width: 720px; border-radius: 1em; overflow: hidden;}
#products .video iframe {width: 100%; height: 400px;}
#products .shapelab {margin: 0 auto; max-width: 1066px; border-radius: 1em; overflow: hidden;}
#products .shapelab iframe {width: 100%; height: 600px;}
#products #shapelablink .butt3 {width: 50%;}
#products .icons>div {flex: 0 0 31%; position: relative; border: 4px solid var(--blue); border-radius: 0.5em; padding: 1em; margin: 1em 0; font-size: 14px;}
#products .icons>div.wide {flex: 0 0 100%;}
#products .icons>div:nth-of-type(3n+2) {margin: 1em 3%;}
#products .icons>div img {width: 35%; height: 5em; float: left;}
#products .icons>div p {margin: 0; padding: 1em 0 0 0; font-size: 1em; text-align: left; line-height: 1.6em;}
#products .icons>div li {line-height: 1.4em;}
#products .icons>div h4 {padding-left: 10px; width: 100%; height: 5em; vertical-align: middle; display: table-cell; margin: 0 auto;}
#products #benefits>div { min-height: 0;}
#products .icons>div.blue {background: var(--blue); color: white; min-height: 0em;}
#products .icons>div.blue p {padding: 0; margin-bottom: 0;}
#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 .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: 0 2em;}
#products .prodintro {padding-top: 5em;}
#products .prodintro img {display:block; margin: auto; width: 32em;}
#products .blueleftright {margin: 0 auto 4em auto;}
#products .blueleftright>div { display: block; margin: auto; text-align: center; padding: 0 2em}
#products .flex2 .margined .blueleftright>div { display: block; margin: auto; text-align: center; padding: 0 2em}
#products .greyleftright {margin: 0 auto 4em auto;}
#products .greyleftright>div { display: block; text-align: center; padding: 5em 2em; margin: auto;}
#products .greyleftright .kozepre>img {max-width: 75% !important; background: none; border-radius: 2em;}
#products .greyleftright .kozepre { display: block; margin: auto; text-align: center; padding: 0}

/***portfolio***/
#products .content .portfolio {margin-bottom: 0; background: none;}
#products .portfolio-list {text-align: center; background: url('../../img/page/whoweare_bg.png') no-repeat center; background-size: 70%; padding: 2em 0; margin-top: 4em;}
#products .portfolio-list .title {color: #0086ff66; font-size: 1.2em; font-weight: bold;}
#products .portfolio-list .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;}
#products .portfolio-list .text {color: var(--blue); font-weight: bold; font-size: 0.9em; padding: 0 1em;}
#products .portfolio-list .even {	left: 192px; }
#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 #videodental {margin-top: 0 !important; margin-bottom: 2em !important;}
#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 .strategic>div {padding: 2em 1.5em 1em 1.5em;}
#products .quote {background: var(--grey); color: #FFF; padding: 8em 0;}
#products .quote p {margin: 0 auto; padding: 0; max-width: 50em; font-size: 1em; position: relative; text-align: center}
#products .quote p:before {content: open-quote; font-size: 20em; font-weight: bold; color: var(--blue); position: absolute; right: 100%; top: 3rem; font-family:Arial;}
#products .quote p:after {content: close-quote; font-size: 35em; font-weight: bold; color: #393e41; position: absolute; left: 100%; top: 170%; font-family:Arial;}
#products p.blockquote {margin-top: 5em;}
#products .blockquotetitle {max-width: 10em; margin: 0 auto; font-size: 0.8em; line-height: 1.4em;}

#products .strategic>div {padding: 2em 1.5em 1em 1.5em;}
#products .strategic .badge {position: absolute; top: 8em; left: -6em; width: 33%; height: 30%;}
#products .strategic .badge2 {position: absolute; top: -2%; left: 30%; height: 40%;}
#products .zspace {background: var(--grey2); text-align: center;}
#products .zspace img {width: 20em;}
#products .zspace2 {background: var(--grey); color: #FFF; padding: 8em 0;}
#products .zspace2 p {margin: 0 auto; padding: 0; max-width: 28em; font-size: 0.8em; font-weight: bold; position: relative;}
#products .zspace2 p:before {content: open-quote; font-size: 20em; font-weight: bold; color: var(--blue); position: absolute; right: 100%; top: 3rem; font-family:Arial;}
#products .zspace2 p:after {content: close-quote; font-size: 35em; font-weight: bold; color: #393e41; position: absolute; left: 100%; top: 170%; font-family:Arial;}
#products .experience {background: white;}
/*#products .experience .flex2 {max-width: 47em;}*/
/*#products .experience .flex2>div {flex: 0 0 40%;}*/
#products .experience .image {width: 22em; height: 12em; background: #FFF center no-repeat; background-size: 101%; border: 3px solid var(--blue); border-radius: 0.5em;}
#products .experience .expVideoDiv .title {text-align: center;}
#products .experience .expVideo {width: 22em; border-radius: 0.5em; display: block; margin: auto;}
#products .greyleftright .expVideo {width: 29em; border-radius: 0.5em; display: block;}
/*#products .experience .dental-expVideoDiv {justify-content: center;}*/
#products .experience .dental-expVideoDiv .expVideo {width: 33em; border-radius: 0.5em;}
#products .experience .title {text-align: center; font-size: 1.2em; font-weight: bold; padding: 1em;}
#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;}

.modal { display: none; position: fixed; z-index: 1; padding-top: 5em; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(255, 255, 255, 1); }
.modal #fullClose1 { position: fixed; z-index: -2; padding-top: 5em; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; }
.modal #fullClose2 { position: fixed; z-index: 3; padding-top: 5em; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; }
.modal .kozepre {max-width: 65%; margin: auto;}
.modal .section4 .modalleoshape {height: 100%; display: flex; flex-direction: column; margin: 0 1.5em; padding: 0; min-height: 30em; border: 4px solid var(--blue); border-radius: 0.5em;}
.modal .section4 .modalleoshape li {text-align: left;}
.modal .section4 .modalleoshape ol {margin-bottom: 0;}
#home .section4 .modalleoshape .title1 {color: black; font-weight: bold; font-size: 1.4em; margin: 0.5em 0 0 0; padding: 0 1em;}
#home #myModal1 .section4 {margin-top: 0;}
/*.modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; width: 90%; max-width: 1200px; }*/
.close { color: black; position: absolute; top: 9%; right: 10%; font-size: 50px; font-weight: bold;}
.close:hover, .close:focus { color: #999; text-decoration: none; cursor: pointer;}

/***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 .flex2, .flex3, .flex4 {display: flex; flex-wrap: wrap; justify-content: space-between;}
#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;}

/*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;}

.carrier-padding {padding-top: 1em;}

/******************* 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: 5em 7em; font-weight: bold;font-size: 0.9em;}
footer .flex2 div {flex: 0 0 40%;}
footer .flex3 div {flex: 0 0 30%;}
footer .flex3 #leo-description .copy {max-width: 70%}
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.2em 0; width: 33%; 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;}

/*********************contactus*********************/
.contactus {background: #e8e8e8; text-align: center; padding: 2em 0;}
.contactus {background: none;}
.contactus .flex3 {justify-content: center;}
.contactus svg {fill: #0a90eb}
.contactus img {width: 2em; height: 2em; margin: 1em 0; fill: var(--blue);}
.contactus p {margin:auto}
.contactus a {text-decoration:none; color: black;}
.contactus .flex3 .title {font-weight: bold; color: #000;}
.contactus .flex3 .butt3 {display: block; margin: 2em 0; padding: 0.6em 0;}

/**********************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){
	html {overflow-x: hidden}
	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;}
	a.butt3 {padding: 0.8em 0; width: 100%}
	button.butt3 {padding: 0.8em 0; width: 100%}
	.butt3.download {text-align: center}

	#mainmenu {display: block; float: none; font-weight: bold; max-height: 0; overflow: hidden; transition: all 0.5s;}
	#mainmenu.show {max-height: 20em;}
	#mainmenu li {display: block; padding: 0.3em 0.9em;}
	#mainmenu li a, #mainmenu li:last-child a {text-decoration: none; margin: 0; font-size: 1.2em;}
	#mobilemenu {background: url('../../img/page/menu.svg') 100% 0 no-repeat; background-size: 2em; width: 2em; height: 2em; display: block; float: right; margin: 0.5em;}
	#mainmenu li:last-child {margin-top: 1em;}

	.producttodiscuss a.butt3.shapelabbutton {width: 60%;}
	.producttodiscuss a.butt3 {width: 60%;}
	.producttodiscuss p {padding: 0 5%;}
	.producttodiscuss h2 {padding: 0 5%;}

	.modal {background-color: rgba(255, 255, 255, 1); }
	.modal .section4 { margin-bottom: 5em !important; }
	.modal .section4 .modalleoshape { min-height: 0; }
	.close { color: black; position: fixed; top: 15%; right: 10%; font-size: 50px; font-weight: bold;}

	#home .section1 {padding: 1em;}
	#home .section2 {margin: 1em;}
	#home .section3 img {margin: 0;}
	#home .section4 .bg {margin: 0; min-height: 0;}
	#home .section4 .leoshape {margin: 0; padding: 2em; min-height: 0; border: 4px solid var(--blue); border-radius: 0.5em;}
	#home .section4 .leoshape .kep {margin: auto;}
	#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 .portfolio-list .even {	left: 12%; }
	#products .tabs {display: table; table-layout: fixed; border-spacing: 10px; position: fixed; top: 4.5%; 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 .quote {padding: 5em 0;}
	#products .quote p {font-size: 1.1em; padding: 0 5%;}
	#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;}
	#products .portfolio #videodental {margin-top: 0 !important; margin-bottom: 2em !important;}
	#products .experience .dental-expVideoDiv .expVideo { width: 22em; border-radius: 0.5em;}
	#products .greyleftright .expVideo {width: 17em;}
	#products .experience .flex2 .image {width: auto; height: 11.2em;}
	#products .videobg {background: none;}
	#products .video iframe {height: 14em;}
	#company section.bg {padding: 1em 0 1em 0;}
	#company .strategic .badge {position: absolute; top: -0.5em; left: -0.9em; width: 50%; height: 50%;}
	#company .strategic .badge2 {position: absolute; top: -24%; left: 68%; height: 35%; z-index: 100;}
	#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 .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); 
  }
}

.flex2>.tender-container{
	padding-bottom: 0;
}

.tender-container .tender-title { 
	font-size:11px; 
	line-height: 1em;
}

.main.wrap>.flex2.tender-flex{
	max-width: none;

	padding-left: 2em;
}

.main.wrap{
	margin: 0px;
	display: flex;
	flex-direction: column;
	max-width: none;
	padding: 0px; 
}

.main.wrap>.flex2{
	max-width: 1400px;
}

.main.wrap>.flex2.section2{
	max-width: 1400px;
	padding: 0 2em;
	margin: 0 auto;
}

.main.wrap>.margined{
	max-width: 1400px;
	padding: 0 2em;
	margin: 0 auto;
	width: calc(100% - 4em);
}

.main.wrap>.flex2>.tender-flex-container{
	
	flex: 0 0 70%;
	order: 1;
	display: flex;
	flex-direction: row;
	max-width: 1400px;
}

.main.wrap>.flex2.mobile>.tender-flex-container{
	order: 2;
	flex: 0 0 100%;
	order: 1;
	display: flex;
	flex-direction: column;
	max-width: 1400px; 	
}

.main.wrap>.flex2.mobile>.tender-container{
	order: 1;
	flex-direction: column;	
}

.main.wrap>.flex2>.tender-flex-container>.kozepre{
	order: 1;
	flex: 0 0 50%;
	display: flex;
	justify-content: center;
}

.main.wrap>.flex2>.tender-flex-container>.section1{
	order: 1;
	flex: 0 0 50%;
}

.main.wrap>.flex2.mobile>.tender-flex-container>.kozepre{
	order: 1;
}

.main.wrap>.flex2.mobile>.tender-flex-container>.section1{
	order: 2;
}

.main.wrap>.flex2>.tender-container{
	flex: 0 0 300px;
	padding-top: 3em;
	order: 0;
}

@media screen and (max-width: 1050px) {
	.flex2.tender-flex{
		padding: 0 2em;
	}

	.main.wrap>.flex2>.tender-flex-container{
		flex: 0 0 100%;
		order: 2;
	}

	.main.wrap>.flex2>.tender-container{
		order: 1;
	}

	.tender-container{
		display: flex;
		flex-direction: row;
	}

	.main.wrap>.flex2>.tender-container{
		flex: none;
		justify-content: center;
	}

	.main.wrap>.flex2>.tender-container>.kozepre{
		flex: 0 0 32%;
		display: flex;
		flex-direction: column;
		justify-content: end;
	}

	.main.wrap>.flex2.tender-flex{
		justify-content: center;
	}
}

@media screen and (max-width: 720px) {
	.main.wrap>.flex2>.tender-container{
		flex: 0 0 100%;
	}

	.main.wrap>.flex2>.tender-container>.kozepre{
		flex: 0 0 50%;
	}
} 

@media screen and (max-width: 600px) {
	.main.wrap>.flex2>.tender-flex-container{
		flex-direction: column;
	}

	.tender-container{
		flex-direction: column;
	}

	.main.wrap>.flex2>.tender-flex-container>.kozepre{
		order: 1;
	}

	.main.wrap>.flex2>.tender-flex-container>.section1{
		order: 2;
	}
}
  
a.link-without-text-decoration:hover, a.link-without-text-decoration:visited,  a.link-without-text-decoration:link, a.link-without-text-decoration:active{
	text-decoration: none;
	color: initial;
}

.career-container{
	display: flex;
	flex-wrap: wrap;
	margin: 1.5em;
	justify-content: center;
	gap: 3em;
}

.career-container .position-card{
	background: #23282c;
	padding: 2em;
	height: 150px;
	width: 237px;
	border: 4px solid var(--blue);
	border-radius: 0.5em;
	cursor: pointer;
}

.career-container .position-card>div{
	color: #FFF
}