/* ############ FONTS ############ */

@font-face {
    font-family: '3dsCondensedLight';
    src: url('../fonts/3dsCondensedLight.eot');
    src: url('../fonts/3dsCondensedLight.eot') format('embedded-opentype'),
         url('../fonts/3dsCondensedLight.woff2') format('woff2'),
         url('../fonts/3dsCondensedLight.woff') format('woff'),
         url('../fonts/3dsCondensedLight.ttf') format('truetype'),
         url('../fonts/3dsCondensedLight.svg#3dsCondensedLight') format('svg');
}

@font-face {
    font-family: '3dsCondensedRegular';
    src: url('../fonts/3dsCondensedRegular.eot');
    src: url('../fonts/3dsCondensedRegular.eot') format('embedded-opentype'),
         url('../fonts/3dsCondensedRegular.woff2') format('woff2'),
         url('../fonts/3dsCondensedRegular.woff') format('woff'),
         url('../fonts/3dsCondensedRegular.ttf') format('truetype'),
         url('../fonts/3dsCondensedRegular.svg#3dsCondensedRegular') format('svg');
}

@font-face {
    font-family: '3dsLight';
    src: url('../fonts/3dsLight.eot');
    src: url('../fonts/3dsLight.eot') format('embedded-opentype'),
         url('../fonts/3dsLight.woff2') format('woff2'),
         url('../fonts/3dsLight.woff') format('woff'),
         url('../fonts/3dsLight.ttf') format('truetype'),
         url('../fonts/3dsLight.svg#3dsLight') format('svg');
}

@font-face {
    font-family: '3dsRegular';
    src: url('../fonts/3dsRegular.eot');
    src: url('../fonts/3dsRegular.eot') format('embedded-opentype'),
         url('../fonts/3dsRegular.woff2') format('woff2'),
         url('../fonts/3dsRegular.woff') format('woff'),
         url('../fonts/3dsRegular.ttf') format('truetype'),
         url('../fonts/3dsRegular.svg#3dsRegular') format('svg');
}

@font-face {
    font-family: '3dsSemiBold';
    src: url('../fonts/3dsSemiBold.eot');
    src: url('../fonts/3dsSemiBold.eot') format('embedded-opentype'),
         url('../fonts/3dsSemiBold.woff2') format('woff2'),
         url('../fonts/3dsSemiBold.woff') format('woff'),
         url('../fonts/3dsSemiBold.ttf') format('truetype'),
         url('../fonts/3dsSemiBold.svg#3dsSemiBold') format('svg');
}



/* ############ GLOBAL ############ */
html {
  scroll-behavior: smooth;
}

html, body {
	height: 100%;
	font: normal 10px/1.2 arial,sans-serif;
	color: #006798;
	cursor: default;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: '3dsLight';
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
}

body {
	background: #ffffff;
}

* {
	box-sizing: border-box;
}

a {
	text-decoration: none;
	color: #006798;
}

a:hover{
	color: #006798;
	opacity:0.7;
}

p.bold, b, strong {
	font-weight: normal;
	font-family: '3dsRegular';
}

p {
	font-family: '3dsLight';
    display: block;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-size:2rem;
    margin-bottom: 2.25rem;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
    -webkit-margin-before: 0.0em;
    -webkit-margin-after: 0.0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-family: '3dsSemiBold';
}

img {
	max-width: 100%;
	vertical-align: bottom;
}

ol, ul, li {
	list-style: none;
}

ul, menu, dir, li {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
}

.desktop{
	display:block !important;
}
.mobile {
	display: none !important;
}

.visible {
	-webkit-transition: all 1s;
    transition: all 1s;
	opacity: 1 !important;
}

.clearfix:after{
	display:table;
	clear:both;
	content:"";	
}

.container-fluid{
	padding-left:0px;
	padding-right:0px;
}

.container{
	padding-left:90px;
	padding-right:90px;
	max-width:1350px;
	margin:0 auto;
	width:100%;
}


/* Header */
.header{
	padding-top:2.5rem;
	padding-bottom:8rem;
	padding-left:90px;
	padding-right:90px;
}
.header img.logo{
	width:15rem;
}

/* Title-section */
.title-section{
	max-width:2000px;
	margin:0 auto;
	padding-left:90px;
	padding-right:90px;
	padding-bottom:6rem;
}
.title-section h1 {
	font-size:5.7rem;
	margin-bottom:1.5rem;
	line-height: 1;
}
.title-section h3 {
	font-size:2.4rem;
	font-family: '3dsRegular';
	margin-bottom:3rem;
}
.title-section .nav{
	padding-top:0.4rem;
}
.title-section .nav > li > a {
    position: relative;
    display: block;
    padding: 0px 0px 0.7rem 0px;
    font-size:1.8rem;
    font-family: '3dsSemiBold';    
}
.title-section .nav > li > a:focus, 
.title-section .nav > li > a:hover {
    text-decoration: underline;
    background-color: transparent;
    opacity:1;
}

/* Hero */
.hero{
	padding-left:90px;
}
.hero .hero-surround{
	background-color:#f7f7f7;
	padding-right:90px;
}
.hero .hero-surround .hero-inner{
	max-width:1421px;
	margin:0 auto;
}
.hero .hero-surround .hero-inner img.hero{
	width:100%;
	max-width:100%;
}

/* Section general */
.section{
	padding-top:8.5rem;
	padding-bottom:8.5rem;
}
.continue-the-conversation.section{
    padding-bottom: 16rem;
}
.section h2.section-title{
	font-size:3.6rem;
    font-family: '3dsSemiBold'; 
    padding-right: 1.5rem;
}
.section h5.case-study{
	font-size:2.4rem;
	font-family: '3dsRegular';
    padding-right: 1.5rem;
    text-decoration:underline;
    text-transform:uppercase;
    margin-bottom:1rem;
}
.section .rhs p:last-child{
	margin-bottom:0;
}
.section .rhs ul{
	margin-bottom:2.5rem;
	padding-left: 2rem;
}
.section .rhs ul li{
	display: list-item;
    list-style-type: disc;
	font-family: '3dsLight';
    font-size:2rem;
    margin-bottom: 1.25rem;
}
.section-break{
	width:100%;
	padding-right:0px;
}
.section-break .inner{
	background-color:#006798;
	height:0.4rem;
	width:calc(100% - ((100% - 1170px) / 2));
}

.row.title-image{
	padding-top:6.5rem;
}
.row.title-image img{
	width:100%;
}
.row.title-image .videoWrapper{
	position: relative;
  	padding-bottom: 56.25%; /* 16:9 */
  	height: 0;
}
.row.title-image .videoWrapper.squarish {
    position: relative;
    padding-bottom: 81.3635%;
    height: 0;
}
.row.title-image .videoWrapper iframe{
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	border: none;
}
.row.title-image video {
  width: 100%;
  height: auto;
}
.row.title-image h4.image-title{
	font-size:2.4rem;
    font-family: '3dsCondensedLight';
    border-top:0.4rem solid #006798;
    padding-top:1rem;
    padding-right: 1.5rem;
    margin-bottom: 3rem;
}
.row.title-image h4.recommended{
	font-size:3rem;
	font-family: '3dsCondensedRegular';
    border-top:0.4rem solid #006798;
    padding-top:1rem;
    padding-right: 1.5rem;
}
.row.title-image h4.recommended-title{
	font-size:2.4rem;
    font-family: '3dsCondensedLight';
    padding-top:1rem;
    padding-right: 1.5rem;
    margin-bottom: 3rem;
}
a.email{
    font-family: '3dsRegular';
}
a.email:hover{
	opacity: 1;
	text-decoration: underline;
}

/* Intro */
/* Virtual twin */

/* BENEFITS */
/*.benefits-carousel{
	padding-left:15px;
	padding-right:15px;
}*/
.benefits-carousel{
	margin-top:5.5rem;
}
.benefits-carousel .slick-list {
	margin-left:-15px;
	/*margin-right:-15px;*/
} 
.benefits-carousel .slick-track {
    display: flex;
} 
.benefits-carousel .slick-track .slick-slide.benefit {
    height: auto;
    background-color:green;
    margin-left: 15px;
} 
.benefits-carousel .slick-track .slick-slide.benefit .row{
	margin-left:0;
	margin-right:0;
	display:flex;
	flex-wrap: wrap;
	position: relative;
} 
.benefits-carousel .slick-track .slick-slide.benefit .row{
	height:100%;
}
.benefits-carousel .slick-track .slick-slide.benefit .lhs,
.benefits-carousel .slick-track .slick-slide.benefit .rhs{
    /*height: 100%;*/
} 
.benefits-carousel .slick-track .slick-slide.benefit .lhs{
	background-color:#006798;
	padding:4rem 3.5rem;
	width:34.19%;
}
.benefits-carousel .slick-track .slick-slide.benefit .lhs p{
	color:#ffffff;
}
.benefits-carousel .slick-track .slick-slide.benefit .lhs p.benefit-counter{
	font-family: '3dsRegular';
	font-size:1.6rem;
	text-transform: uppercase;
	border-bottom:0.2rem solid #ffffff;
	display:inline-block;
	line-height: 1.18;
}
.benefits-carousel .slick-track .slick-slide.benefit .lhs p.benefit-counter span{
	font-family: '3dsCondensedRegular';
	font-size:4.8rem;
}
.benefits-carousel .slick-track .slick-slide.benefit .lhs p.title{
	font-family: '3dsCondensedRegular';
	font-size:2.4rem;
    line-height: 1.1;
    margin-bottom:1.2rem;
}
.benefits-carousel .slick-track .slick-slide.benefit .lhs p.description{
	font-size:1.8rem;
}
.benefits-carousel .slick-track .slick-slide.benefit .rhs{
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	width:65.81%;
}
.benefits-carousel .slick-track .slick-slide.benefit1 .rhs{
	background-image:url('../images/benefits-slider/benefit1.jpg');
}
.benefits-carousel .slick-track .slick-slide.benefit2 .rhs{
	background-image:url('../images/benefits-slider/benefit2.jpg');
}
.benefits-carousel .slick-track .slick-slide.benefit3 .rhs{
	background-image:url('../images/benefits-slider/benefit3.jpg');
}
.benefits-carousel .slick-track .slick-slide.benefit4 .rhs{
	background-image:url('../images/benefits-slider/benefit4.jpg');
}
.benefits-carousel .slick-track .slick-slide.benefit5 .rhs{
	background-image:url('../images/benefits-slider/benefit5.jpg');
}
.benefits-carousel .slick-track .slick-slide.benefit6 .rhs{
	background-image:url('../images/benefits-slider/benefit6.jpg');
}

/* Virtual twin poll */ 
.virtual-twin-poll{
	margin-top: 6rem;
	margin-bottom: 1.5rem;
	background-color: #f2f6f9;
}
.virtual-twin-poll .poll-title{
	font-family: '3dsCondensedLight';
	font-size: 2.4rem;
	color: #ffffff; 
	background-color: #006798;
	padding: 0.5rem 15px;
	text-align: center;
	text-transform: uppercase;
	z-index: 10;
	position: relative;
}
.virtual-twin-poll .question{
	font-family: '3dsSemiBold';
	font-size: 2rem;
	color: #006798; 
	padding: 3.5rem 15px;
	text-align: center;
	z-index: 10;
    position: relative;
}
.virtual-twin-poll .question .inner{
	width: 100%;
	max-width: 46rem;
	margin: 0 auto;
}
.virtual-twin-poll .answer{
	font-family: '3dsCondensedLight';
	font-size: 2rem;
	color: #006798; 
	background-color: #c9dbe6;
	padding: 0.25rem 15px;
	text-align: center;
	margin-bottom: 1rem;
}
.virtual-twin-poll .answer.active,
.virtual-twin-poll .answer:hover{
	color: #ffffff; 
	background-color: #006798;
}
.virtual-twin-poll .submit{
	font-family: '3dsRegular';
	font-size: 2rem;
	color: #ffffff; 
	background-color: #006798;
	padding: 2rem 15px;
	text-align: center;
	text-transform: uppercase;
	margin-top: 4rem;
}
.virtual-twin-poll .submit:hover{
	opacity: 1;
	text-decoration: underline;
}
.results-section{
	display: block;
    background-color: #f2f6f9;
    width: 100%;
    margin-top: -12rem;
}
.results-section #piechart{
	background-color: #f2f6f9;
	width: 100%;
    min-height: 750px;
}
@media only screen and (max-width: 767px){
	.results-section #piechart{
	    min-height: 80vh;
	}
}
.results-section .legend{
	background-color: #f2f6f9;
	width: 100%;
	padding: 0 30px 30px 30px;
	z-index: 10;
	position: relative;
	margin-top: -5rem;
}
.results-section .legend .inner{
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
}
.results-section .legend .inner span{
	display: flex;
	margin-bottom: 2rem;
}
.results-section .legend .inner p{
	display: inline-block;
	margin-right: 4rem;
}
.results-section .legend .inner p.key5{
	display: inline-block;
	margin-right: 0rem;
	width: calc(100% - 4rem);
}
.results-section .legend .inner .square{
	width: 3rem;
	height: 3rem;
	display: inline-block;
	position: relative;
	top: -0.3rem;
	margin-right: 1rem;
}
.results-section .legend .inner .square1{
	background-color: #fe6383;
}
.results-section .legend .inner .square2{
	background-color: #ff9f40;
}
.results-section .legend .inner .square3{
	background-color: #ffcc56;
}
.results-section .legend .inner .square4{
	background-color: #4cc0c0;
}
.results-section .legend .inner .square5{
	background-color: #36a2eb;
}

@media only screen and (max-width: 767px){
	.results-section .legend .inner span{
		width: 100%;
	}
	.results-section .legend{
		padding: 0 15px 15px 15px;
	}
}




/* MEDIA QUERIES */

@media only screen and (max-width: 1350px) {

	.section-break .inner {
	    width: calc(100% - 90px);
	}

}

@media only screen and (max-width: 1199px) {
	
	.header,
	.title-section,
	.container{
		padding-left:60px;
		padding-right:60px;
	}
	.hero{
		padding-left:60px;
	}
	.hero .hero-surround{
		padding-right:60px;
	}
	.section-break .inner {
	    width: calc(100% - 60px);
	}
	
}

@media only screen and (max-width: 991px) {
		
	html, body {
		font: normal 9.5px/1.2 arial,sans-serif;
	}
	
	.header,
	.title-section,
	.container{
		padding-left:30px;
		padding-right:30px;
	}	
	.hero{
		padding-left:30px;
	}
	.hero .hero-surround{
		padding-right:30px;
	}
	.section-break .inner {
	    width: calc(100% - 30px);
	}

	.title-section .nav > li > a {
	    padding: 0.4rem 0.5rem 0.4rem 0.5rem;
	    font-size: 1.6rem;
	    font-family: '3dsRegular';
	    line-height: 1;
	    background-color: #f2f6f9;
	}
	.title-section .nav > li:nth-child(odd) > a {
	    background-color: #c9dbe6;
	}
	.title-section .nav > li > a:hover {
	    background-color: #ffffff;
	}
	.section h2.section-title {
	    margin-bottom: 2rem;
	     padding-right: 0rem; 
	}

	.benefits-carousel .slick-track .slick-slide.benefit .lhs{
		width:40%;
	}
	.benefits-carousel .slick-track .slick-slide.benefit .rhs{
		width:60%;
	}
	
}


@media only screen and (max-width: 767px) {
	
	html, body {
		font: normal 9px/1.2 arial,sans-serif;
	}

	.desktop{
		display:none !important;
	}
	.mobile {
		display: block !important;
	}

	.header,
	.title-section,
	.container{
		padding-left:15px;
		padding-right:15px;
	}	
	.hero{
		padding-left:15px;
	}
	.hero .hero-surround{
		padding-right:15px;
	}
	.section-break .inner {
	    width: calc(100% - 15px);
	}

	.title-section h1 {
	    font-size: 4rem;
	    margin-bottom: 1.5rem;
	    line-height: 1;
	}
	.section h2.section-title {
	    font-size: 3rem;
	}




	.benefits-carousel .slick-track .slick-slide.benefit .lhs{
		width:100%;
		padding-bottom: 50%;
	}
	.benefits-carousel .slick-track .slick-slide.benefit .rhs{
		width: 100%;
	    height: 0;
	    padding-bottom: 49%;
	    position: absolute;
	    bottom: 0;
	}
	.slick-prev {
	    left: auto;
	    right: 70px;
	}
	.slick-next {
	    left: auto;
	    right: 30px;
	}
	
}

@media only screen and (max-width: 600px) {
	
	
}

@media only screen and (max-width: 500px) {
	
	
	
}


@media only screen and (max-width: 400px) {
	
	
	
	
	
}