@font-face {
    font-family: 'ECSquareSansProRegular';
    src: url('ecsquaresanspro-regular-web.eot.jpg');
    src: url('ecsquaresanspro-regular-web.eotd41d.jpg?#iefix') format('embedded-opentype'),
         url('ecsquaresanspro-regular-web.woff.jpg') format('woff'),
         url('ecsquaresanspro-regular-web.ttf.jpg') format('truetype'),
         url('ecsquaresanspro-regular-web.svg.jpg#ECSquareSansProRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ECSquareSansProMedium';
    src: url('ecsquaresanspro-medium-web.eot.jpg');
    src: url('ecsquaresanspro-medium-web.eotd41d.jpg?#iefix') format('embedded-opentype'),
         url('ecsquaresanspro-medium-web.woff.jpg') format('woff'),
         url('ecsquaresanspro-medium-web.ttf.jpg') format('truetype'),
         url('ecsquaresanspro-medium-web.svg.jpg#ecsquaresanspro-medium-web') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ECSquareSansProLight';
    src: url('ecsquaresanspro-light-web.eot.jpg');
    src: url('ecsquaresanspro-light-web.eotd41d.jpg?#iefix') format('embedded-opentype'),
         url('ecsquaresanspro-light-web.woff.jpg') format('woff'),
         url('ecsquaresanspro-light-web.ttf.jpg') format('truetype'),
         url('ecsquaresanspro-light-web.svg.jpg#ECSquareSansProRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ECSquareSansProBold';

    src: url('ecsquaresanspro-bold-web.eot.jpg');
    src: url('ecsquaresanspro-bold-web.eotd41d.jpg?#iefix') format('embedded-opentype'),
         url('ecsquaresanspro-bold-web.woff.jpg') format('woff'),
         url('ecsquaresanspro-bold-web.ttf.jpg') format('truetype'),
         url('ecsquaresanspro-bold-web.svg.jpg#ECSquareSansProRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/************************************END TYPOGRAPHY**************************************/

/*.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    display: inline-block;
    margin-left: -4px;
    vertical-align: middle;
}*/

body, html{
    font:normal 16px ECSquareSansProLight;
    background-color:#fff;
    margin:0px;
    padding:0px;
    color:white;
    height: 100%;
    width:100%;

}


/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

.no-js {
	padding-top: 106px;
}

.loading {
	background: url('http://ec.europa.eu/newsroom/just/news-overview.cfm') no-repeat center center;
}

h1,h2,h3,h4,p,strong{
    margin:0px;
    padding:0px;
}
li {
	list-style:none inside;
}

/* VERTICAL CENTERING */
.table {
	display:table;
	width:100%;
	height:100%;
}

.table-row {
	display:table-row;
}

.table-cell {
	display:table-cell;
	vertical-align:middle;
	width:100%;
	height:100%;
}

/* sound player */
.play-sound {
    background: transparent url("../images/pause.png") no-repeat scroll 50% 50%;
	background-size: auto 100%;
    top: 100%;
    cursor: pointer;
    height: 30px;
	margin-top:18px;
    position: absolute;
    right: 0;
    width: 41px;
    z-index: 9999;
}
.nav-twin .play-sound {
	display:none;
	position:static;
	width:auto;
	background-size:auto 100%;
	background-position:calc(100% - 12px) 50%;
}
.play-sound.off {
    background-image: url("../images/play.png");
}

/* SLIDE 1 */
#slide-1 {
	/*height:calc(100vh - 287px);*/
	min-height: 482px;
	padding-bottom:0;
}

#slide-1 .binary-wrapper {
	position:absolute;
	left:0;
	right:0;
	top:124px;
}

#slide-1 .binarybg {
    opacity: 0.6;
    top: 50px;
}
#slide-1 .binarybg2 {
    opacity: 0.6;
    top: 82px;
}
#slide-1 .binarybg3 {
    opacity: 0.6;
    top: 108px;
}

#slide-1 .hsContainer {
	background: #fff;
	position:relative;
	height:100%;
}

#slide-1 .hsContent {
	padding:60px 0;
	background-color:rgba(158,215,242,.7);
	position:relative;
	height:100%;
}
#slide-1 .inner {
    padding-top: 12px;
}

h1 {
    color: white;
    font: 147px/134px ECSquareSansProMedium;
    padding: 10px 4px 48px;
    text-align: center;
}
h2 {
	color:#0081b7;
    font:normal 51px ECSquareSansProMedium;
	text-align:right;
}


h3 {
    color: #fff;
    font:normal 60px/60px ECSquareSansProMedium;
	text-align:left;
	background-color:transparent;
	position:relative;
	margin:0 0 40px;
}

h4 {
    color: #003652;
    font:normal 40px/40px ECSquareSansProMedium;
    text-align:left;
    position:relative;
    padding:12px 18px;
    margin:0 0 32px;
	display:inline-block;
}

#slide-1 .intro {
	text-align:left;
    color: #001652;
    font:normal 24px ECSquareSansProMedium;
	text-shadow:1px 0 0px #fff;
	
	padding:10px 69px 0 23px;
}

/* END SLIDE 0 */
.js section {
	
}

.loaded section,
.no-js section {
	opacity: 1;
	-webkit-transition: opacity 300ms ease-out;
	-moz-transition: opacity 300ms ease-out;
	transition: opacity 300ms ease-out;
}
main {
    display: block;
    position: absolute;
	z-index:10;
    top: 131px;
    width: 100%;
}
.has-menu-fixed main {
	padding-top:98px;
}
section{
    padding:0;
    margin:0;
}
.bcg {
	background-position: center center;
	background-repeat: no-repeat;
	height: 100%;
    width:100%;
    overflow-x:hidden;
}
strong{
    font-family:ECSquareSansProBold;
    font-weight:normal;
}
a, a:visited, a:hover, a:link{
    color:white;
}


.txt-right{
    text-align:right;
}
.txt-left{
    text-align:left;
}
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
img {
    vertical-align: middle;
}

.inner {
    margin: 0 auto;
    position: relative;
    width: 1068px;
	box-sizing:content-box;
}

@media screen and (max-width:1068px) {
	.inner {
		width:auto;
	}
	nav .container {
		width:auto;
	}
}

section .container {
	padding-top:72px;
	padding-bottom:72px;
}

section .inner-content {
	position:relative;
}

/* CIRCLES */
.circle {
    margin: 0 auto;
    position:relative;
}
.circle strong {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    margin-top: -20px;
    line-height: 40px;
    font: 38px/40px ECSquareSansProRegular;
}
/* next style is only for IE8
   you may include it as a separate stylesheet
   included within IE8 conditional comments
*/
.static-circle {
    background: url(../../../../../../../i.imgur.com/0vPwcbx.png) center no-repeat;
}
#entry-header {
    height: 200px;
    position: absolute;
    width: 100%;
    z-index:15;
}
#entry-header .inner {
    background-color: white;
    height: 189px;
    width:100%;
}

#entry-header .h1{
    background:transparent url("../images/hd/ec-logo_en.png") no-repeat scroll 100% center;
    background-size:100% auto;
    background-position-x:100%;
    background-position-y:center;
    display:block;
    width:450px;
    height:88px;
    left: 0;
    position: absolute;
    right: 0;
    margin: 0 auto;
    top: 0px;
    margin-top:30px;
}

#entry-header .h1 span{
    left: -1000px;
    position: absolute;
    top: -10000px;
}
#entry-header #ec_logo{

}
.scroll-down {
    bottom: 16px;
    font-size: 20px;
    left: 0;
    margin: 0 auto;
    max-width: 1068px;
    opacity: 0.8;
    padding-left: 70px;
    position: fixed;
    right: 0;
    text-align: left;
    text-transform: uppercase;
    z-index: 4;
    display:none;
    /*width:1068px;*/
}
.loaded .scroll-down{
    display:block;

}
.scroll-down > span {
    display: block;
    font-family: arial;
    font-size: 18px;
    font-weight: lighter;
    line-height: 22px;
    margin-left: 52px;
    padding-top: 0;
    -ms-transform: scale(6, 0.7);
    -webkit-transform: scale(6, 0.7);
    transform: scale(6, 0.7);
    width: 10px;
}


nav {
	background-color:#003852;
    position:relative;
}

nav .container {
	position:relative;
}

.mobile-detected #navigation {
	display:none;
}

nav ul {
	margin:0;
	padding:0;
}

nav li {
	margin:0;
	padding:0 !important;
}

nav li a {
	display:table;
	height:98px;
	width:100%;
	padding:0 12px;
	text-align:center;	
	font:normal 24px ECSquareSansProMedium;
}

nav li a > span {
	display:table-row;
}

nav li a > span span {
	display:table-cell;
	vertical-align:middle;
	width:100%;	
}

nav li.why-data a {
	background-color:#003652;
}
nav li.why-rules a {
	background-color:#0080b7;
}
nav li.what a {
	background-color:#63c6ed;
}
nav li.cost a {
	background-color:#fff;
	color:#ef8407;
}
nav.fixed {
    background-color: #003852;
    height: 98px;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 999;
	box-shadow:0 0 13px -1px #003852;
}

.nav-twin {
	height:100%;
	position:relative;
	overflowx:hidden;
}

.nav-twin li {
	border: 1px solid #003852;
	border-top: 0;
}

/* END NAVIGATION */

/* Slide 1 */
#slide-1 .bcg {
	background-color:#003852;
}

#slide-1 h1 span {
    display: block;
    font-size: 22pt;
    margin-top: 5px;
}

#slide-1 .abstract {
    color: white;
    font-size: 20pt;
    font-weight: bold;
    left: 76px;
    position: absolute;
    text-align: left;
    top: 312px;
}

/* Slide 2 */
#slide-2 {
	overflow-y:hidden;
}

#slide-2 .inner, #slide-2 .hsContent, #slide-2 .hsContainer{
    min-height:751px;
    font-style:normal;
	padding-bottom:28px;
}

#slide-2 .bcg {
	background-color:#003852;
}

#slide-3 .binarybg4 {
	position:absolute;
	top:1300px;
	left:0;
	right:0;
	opacity:.5;
}

@media screen and (max-width:768px) {
	#slide-3 .binarybg4 {
		top:1600px;
	}	
}

#personal-data {
	padding:0;
	height:586px;
}

#personal-data > li {
	background:transparent url(../images/bg-grad-blue-transp.png) repeat-y 0 0;
	width:366px;
	text-align:left;
	
	font:normal 20px ECSquareSansProMedium;
	color:#66e6ed;
	margin:0 0 10px;	
}

#personal-data > li i {
	display:inline-block;
	width:110px;
	height:68px;
	background-color:transparent;
	background-position:50% 50%;
	background-repeat:no-repeat;
	
	vertical-align:middle;
	display:inline-block;

}

	#personal-data > li#name i {
		background-image: url(../images/id.png);
	}
	#personal-data > li#address i {
		background-image: url(../images/home.png);
	}
	#personal-data > li#localisation i {
		background-image: url(../images/location.png);
	}
	#personal-data > li#identifier i {
		background-image: url(../images/avatar.png);
	}
	#personal-data > li#health i {
		background-image: url(../images/heartbeat.png);
	}
	#personal-data > li#income i {
		background-image: url(../images/euro.png);
	}
	#personal-data > li#cultural i {
		background-image: url(../images/hands.png);
	}
	#personal-data > li#more i {
		background-image: url(../images/dot.png);
	}

#personal-data > li span {
	display: inline-block;
	max-width: 200px;
	vertical-align: middle;
}

#man {
	position:absolute;
	top:0;
	left:264px;
	z-index:5;
}

#slide-2 .data-title {
    font: 58px/50px ECSquareSansProMedium;

    margin-bottom: 28px;
    text-align: center;
}

#slide-2 .data-p {
	font:normal 36px ECSquareSansProRegular;
	color:#fff;
    text-align: center;
}

#slide-2 .process {
	color:#f68622;
}

#slide-2 .data-p strong {
	font:normal 36px ECSquareSansProBold;
}

.data-on {
	text-transform:uppercase;
	color:#005874;
}

.data-triangle {
	width:0;
	height:0;
	border:transparent 25px solid;
	border-top:#0080b7 22px solid;
	margin:6px auto -12px;
}

hr.sep {
	width:200px;
	margin:24px auto;
}

#slide-2 .inner-data {
	margin:0px;
	z-index:4;
}

/* Slide 3 */
#slide-3 {
	position:relative;
}

#slide-3 .bcg {
/*    height: 1834px;*/
    background-color: #0080b7;
}
#slide-3 h4 {
    color:#ef8407;
	background-color:rgba(0,99,141,1);
	display:inline-block;
}

#slide-3 h4.p-boom {
	display:block;
	text-align:center;
	background:none;
}

#slide-3 .p-boom {
    font:24px/25px ECSquareSansProRegular;
    color:#fff;
    text-align: left;
    padding: 0 8px;
}

#slide-3 .p-boom.bg-blue {
    background:#00638D;
    font:normal 30px/30px ECSquareSansProREgular;
    color:#ef8407;
    padding:12px 18px;
    margin:24px 0;
    text-align: center;
}



#slide-3 .p-boom-5 {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    text-align: center;
}

.rule-1 p {
    padding:0 54px 0 18px;
}

.rule-3 {
    margin-top:54px;
}


#slide-3 .visual {
    position:relative;
}

.p-boom.p-boom-2 {
    margin-left: 180px;
    padding-top: 20px;
}
.shield-blue{
    position:relative;
    width:150px;
    height:172px;
    background-color:#4ac8f5;
    color: #003852;
    text-align:center;
    float:left;
	overflow:hidden;
}
.shield-blue span {
    display: block;
    font-size: 24pt;
    padding-top: 20pt;
}
.shield-blue strong {
    display: block;
    font-family: ECSquareSansProLight;
    font-size: 30pt;
    padding-top: 0;
}
.shield-blue canvas{
    display:none;
}
.shield-blue .bg{
    background:transparent url('../images/shield-blue.png') no-repeat top left;
    width:150px;
    height:172px;
    position:absolute;
    z-index:2;
}
.shield-blue .valuebg{
    background-color: #003852;
    width: 100%;
    position:absolute;
    bottom:0px;
	height:50px;
}
.rule-2{
    position:relative;
}

#earth {
    position: relative;
    height:574px;
    background-size: 572px 578px;
}

#img-earth {
    position: absolute;
    top:50%;
    left:50%;
    margin-left:-243px;
    margin-top:-243px;
    height:491px;
    width: 486px;
    display:block;
    background: transparent url(../images/earth.png) 50% 50% no-repeat;
    background-size: 100% auto;
	z-index:1;
}

@media screen and (max-width: 768px) {
	#img-earth {
		position:static;
		margin:0 auto;
	}
}

#slide-3 .p-boom-3 {
  position: absolute;
  top:50%;
  left:0;
  margin-top: -54px;
  height:108px;
  width:50%;
  background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(22,168,210,1) 100%);
  background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(22,168,210,1) 100%);
  background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(22,168,210,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#16a8d2', endColorstr='#00ffffff',GradientType=1 );
  text-align:left;
  z-index:0;
}

#slide-3 .p-boom-3:before {
    content:"";
    display: inline-block;
    vertical-align: middle;
    height:100%;
}


#slide-3 .p-boom-3 span {
    display:inline-block;
    width:286px;
    text-align: center;
    margin:0;
    content:"";
    display: inline-block;
    vertical-align: middle;
}


#slide-3 .p-boom-4 {
  position: absolute;
  top:50%;
  right:0;
  margin-top: -54px;
  height:108px;
  width:50%;
  text-align: right;
 background: -moz-linear-gradient(left,  rgba(22,168,210,1) 0%, rgba(255,255,255,0) 100%);
  background: -webkit-linear-gradient(left,  rgba(22,168,210,1) 0%,rgba(255,255,255,0) 100%);
  background: linear-gradient(to right,  rgba(22,168,210,1) 0%,rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#16a8d2', endColorstr='#00ffffff',GradientType=1 );
  z-index:100:
}

#slide-3 .p-boom-4:before {
    content:"";
    display: inline-block;
    vertical-align: middle;
    height:100%;
}

#slide-3 .p-boom-4 span {
    display: inline-block;
    margin: 0;
    text-align: center;
    vertical-align: middle;
    width: 282px;
}

.millions {
    font-size:37.7pt;
	margin-top: 32px;
	padding: 42px 0;
	margin-right:auto;
	margin-left:auto;
}
#slide-3 .millions .p-boom{
    text-align:center;
}
.millions strong{
    font-weight:normal;
    font-family:ECSquareSansProLight;
}
.millions.blue{
    border-right: 1px dotted rgba(255,255,255,.5);
    color:#62C6ED;
}
.millions.orange {
    display: table;
    height: 149px;
    position: relative;
    width: 422px;
    color:#EF8407;
}
.millions .money-text {
    margin-top:148px;
}
.money-blue {
    background:transparent url('../images/euro-blue.png') no-repeat 0 0;
    background-size:100% auto;
    width:140px;
    height:140px;
                                     
    position:absolute;
}
.money-yellow{
    background:transparent url('../images/euro-yellow.png') no-repeat 0 0;
    background-size:100% auto;
    width:140px;
    height:140px;
    position:absolute;
}
.money-text{
    text-align:center;
}
.money-wrapper {
	position:relative;
	margin:0 auto;
}

.money-wrapper-blue {
	width:252px;
}

.money-wrapper-yellow {
	width:120px;
}


.money-18 {right:128px;}
.money-17 {right:112px;}
.money-16 {right:96px;}
.money-15 {right:80px;}
.money-14 {right:64px;}
.money-13 {right:48px;}
.money-12 {right:32px;}
.money-11 {right:16px;}
.money-10 {right:0px;}

.money-wrapper-yellow .money-1 {right:-144px;}
.money-wrapper-yellow .money-2 {right:-128px;}
.money-wrapper-yellow .money-3 {right:-112px;}
.money-wrapper-yellow .money-4 {right:-96px;}
.money-wrapper-yellow .money-5 {right:-80px;}
.money-wrapper-yellow .money-6 {right:-64px;}
.money-wrapper-yellow .money-7 {right:-48px;}
.money-wrapper-yellow .money-8 {right:-32px;}
.money-wrapper-yellow .money-9 {right:-16px;}

.binarybg {
    bottom: 379px;
    left: 0;
    z-index: 0;
}
.binarybg1 {
	background: transparent url("../images/01.png") repeat-x scroll 0 0;
	height:29px;
}
.binarybg2 {
    background: transparent url("../images/01.png") repeat-x scroll 0 -28px;
	height:30px;
}
.binarybg3 {
    background: transparent url("../images/01.png") repeat-x scroll 0 0;
	height:25px;
}
.binarybg4 {
    background: transparent url("../images/01.png") repeat-x scroll 0 0;
	height:110px;
}

.arrow-country {
    position:absolute;
	z-index:15;
}

.arrow-country div {
	position:relative;
	height:100%;	
}

.arrow-simple {
    width:216px;
    height:220px;
}

.arrow-simple div {
    background: transparent url(../images/arrow-simple.png) 0 0 no-repeat; 
    background-size: auto 100%;
}

.arrow-double {
    width:290px;
    height:70px;
}

.arrow-double div {
    background: transparent url(../images/arrow-double.png) 0 0 no-repeat; 
    background-size: auto 100%;
}

.arrow_1 { width:196px; height:200px; left: 23.64%;top: 12.89%; }
.arrow_2 { left: 38.18%;top: 37.91%;-ms-transform: rotate(-50deg);-webkit-transform: rotate(-50deg); transform: rotate(-50deg);width:199px; height:45px; }
.arrow_3 { left: 49.62%;top: 9.75%;-ms-transform: rotate(89deg);-webkit-transform: rotate(89deg); transform: rotate(89deg); }
.arrow_4 { height: 57px; width:257px; left: 53.5%;top: 19.23%;-ms-transform: rotate(-4deg);-webkit-transform: rotate(-4deg); transform: rotate(-4deg); }
.arrow_5 { height: 170px; width:170px; top: 41.11%; left:44.56%; -ms-transform: rotate3d(30, 21, 2, 196deg);-webkit-transform: rotate3d(30, 21, 2, 196deg); transform: rotate3d(30, 21, 2, 196deg); }
.arrow_6 { left: 48.97%; top: 52.09%;-ms-transform: rotate(178deg);-webkit-transform: rotate(178deg); transform: rotate(178deg);width:261px; }
.arrow_7 { height: 200px; top: 61.85%;left: 46.53%;-ms-transform: rotate3d(17, 21, 2, 188deg);-webkit-transform: rotate3d(17, 21, 2, 188deg); transform: rotate3d(17, 21, 2, 188deg); }
.arrow_8 { height: 190px; left: 38.55%; top: 65.85%;-ms-transform: rotate(222deg);-webkit-transform: rotate(222deg); transform: rotate(222deg); }
.arrow_9 { height: 176px; top: 58.36%;left: 24.39%;-ms-transform:rotate3d(0, 13, 2, 188deg);-webkit-transform: rotate3d(0, 13, 2, 188deg); transform: rotate3d(0, 13, 2, 188deg); }
.arrow_10 { height:46px; width:194px; left: 33.34%; top: 56.62%;-ms-transform: rotate(-50deg);-webkit-transform: rotate(-50deg); transform: rotate(-50deg); }
.arrow_11 { height: 67px;  width:274px; top: 72.82%; left: 11.26%;-ms-transform: rotate(169deg);-webkit-transform: rotate(169deg); transform: rotate(169deg); }

/* Slide 4 */
#slide-4 .bcg {
    background: #63c6ed;
}

#slide-4 .inner {
	background:transparent url(../images/finger-print-blue.png) 50% 335px no-repeat;
}

#slide-4 .inner-inner {
        margin-top:45px;
}
#slide-4 h4 {
    margin-top:64px;
	position:relative;
	background-color:#b3E0F6;
}
#slide-4 h4.h4-1 {
    margin-top:0;
}
.slide4-p, .slide4-li {
    font:normal 30px ECSquareSansProRegular;
    color:#003652;
}

.keep-records-wrapper {
    background: transparent url(../images/cloud-networking-blue.png) 200px 131px no-repeat;
}

.keep-records-wrapper .slide4-p {
    font:normal 30px ECSquareSansProRegular;
}

.questions {
    padding:0 0;
    margin:32px auto 18px;
    display:table;
}

.questions > li {
    background-color:#007FB5;
    color:#fff;
    padding:12px 145px 12px 24px;
    margin:0 0 6px;
    position: relative;
    font-size: 20px;
}

.yes, .no {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:121px;
    line-height:54px;
    padding:0 0 0 30px;
}

.yes:before, .no:before {
	content:"";
	display:inline-block;
	vertical-align:middle;
	height:100%;
}

.yes span, .no span {
	display:inline-block;
	vertical-align:middle;
}

.yes {
    background: #ef830a url(../images/circle-people-blue.png) 72px 50% no-repeat;
	background-size:39px auto;
}

.no {
    background: #003652 none;
}

.question-triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 23px 0 23px 10px;
    border-color: transparent transparent transparent #0080b7;

    margin-top: -24px;
    position: absolute;

    top: 50%;
    left:0;
}
.slide4-p-1 {
    text-align:center;
	margin:0 auto 32px;
}

.sme-types-wrapper {
    margin:0 0 96px;
    padding:0;
}

.sme-types {
    padding: 0;
    z-index: 2;
	width: 515px;
	margin: 0 auto;
}

.sme-types > li {
    color:#ef8407;
    background:transparent url(../images/server-rack-blue.png) 0 0 no-repeat;
    margin:0 0 12px;
    height:66px;
    width: 512px;
    padding:0 142px 0 47px;
    font:normal 24px/24px ECSquareSansProBold;
    background-size:100% auto;
	position:relative;
}

.lock {
    background: transparent url("../images/lock-blue.png") no-repeat scroll 50% 50% / 86px 112px;
    height: 112px;
    position: absolute;
    right: -60px;
    top: 0;
    width: 86px;
    z-index: 4;
}

.connectors {
	text-align:center;
	width:512px;
	margin:0 auto;
}

.connector {
	display:inline-block;
    background-color: transparent;
    background-repeat: no-repeat;
}

.connector-left {
    height:22px;
    background-image:url(../images/servers-rack-connect-left-blue.png);
	width:89px;
	vertical-align:14px;
	margin-right:6px;
}

.connector-central {
    width:50px;
    height:84px;
    background-image:url(../images/servers-rack-connector-blue.png);
    z-index:0;
	
}

.connector-right {
    height:22px;
    background-image:url(../images/servers-rack-connect-right-blue.png);
	width:89px;
	vertical-align:14px;
	margin-left:6px;
 }

.records-data-wrapper {
    margin:36px 0 120px;
}

.records-data {
    padding:0;
    margin:0;
    background: transparent;
}
.records-data img {
    left: 16px;
    position: absolute;
    top: 50%;
	margin-top:-13px;
    z-index: 2;
}
.records-data > li {
    background-color: rgba(0,128,183,.5);
    margin: 0 0 12px;
    padding:6px 18px 6px 54px;
    font:normal 24px ECSquareSansProBold;
    color:#fff;
    position: relative;
    border-radius: 23px;
}

.records-data .i-circle {
    width:27px;
    height:27px;
    border-radius: 50%;
    position: absolute;
    top:50%;
    margin:-13.5px 0 0;
    left:10px;
    background-color:#63c6ed; 
}

.inner-circles {
    margin:27px 0;
}

.item-circle {
	position:relative;
	border-radius:50%;
	width:436px;
	height:436px;
	margin:0 auto;
}

.inner-circle {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	cursor: default;
}

.inner-inner-circle {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.inner-inner-circle > div {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-position: center center;
	-webkit-transition: all 0.4s linear;
	-moz-transition: all 0.4s linear;
	-o-transition: all 0.4s linear;
	-ms-transition: all 0.4s linear;
	transition: all 0.4s linear;
	-webkit-transform-origin: 50% 0%;
	-moz-transform-origin: 50% 0%;
	-o-transform-origin: 50% 0%;
	-ms-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
}

.item-circle .circle-front {
	background-color: #0080b7;
	border:20px solid #003652;
	border-radius:200px;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-position: center center;
	-webkit-transition: all 0.4s linear;
	-moz-	: all 0.4s linear;
	-o-transition: all 0.4s linear;
	-ms-transition: all 0.4s linear;
	transition: all 0.4s linear;
	-webkit-transform-origin: 50% 0%;
	-moz-transform-origin: 50% 0%;
	-o-transform-origin: 50% 0%;
	-ms-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
}

.click-me {
	position:absolute;
	top:21px;
	left:123px;
	width:80%;
	height:80%;
	background: transparent url(../images/click-me.png) 50% 50% no-repeat;
	background-size:auto 100%;
	opacity:.24 !important;
}

.mobile-not-detected .click-me {
	display:none;
}

.mobile-not-detected .inner-inner-circle:hover .circle-front,
.inner-inner-circle.hovered .circle-front {
	-webkit-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
	-moz-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
	-o-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
	-ms-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
	transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
	opacity: 0;
}

.inner-inner-circle .circle-back {
	background-color: #003652;
	border:10px solid #004b6e;
	border-radius:50%;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;

	background-position: center center;
	box-shadow:0 0 0 0 #28b3df;
	
	transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
	transition: all 0.4s linear;
	transform-origin: 50% 0%;
	opacity: 0;
}

.mobile-not-detected .inner-inner-circle:hover .circle-back,
.inner-inner-circle.hovered .circle-back {
	-webkit-transform: rotate3d(1,0,0,0deg);
	-moz-transform: rotate3d(1,0,0,0deg);
	-o-transform: rotate3d(1,0,0,0deg);
	-ms-transform: rotate3d(1,0,0,0deg);
	transform: rotate3d(1,0,0,0deg);
	opacity: 1;
	box-shadow:0 0 0 20px rgba(0,128,183,.5);
}

.item-circle .circle-head {
    font: 34px ECSquareSansProMedium;
    margin: 0 14px;
    text-align:center;
}

.item-circle .circle-head:before,
.item-circle .circle-back p:first-child:before {
    content:"";
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    display:block;
    margin:0 auto 6px;
}

.item-circle .circle-head:before {
    width:104px;
    height:104px;
    background-size: 100% auto;
    margin-bottom:24px;
}

.item-circle .circle-back p:first-child:before {
    width:60px;
    height:60px;
    background-size: 100% auto;
    margin-bottom:12px;
	margin-top:-12px;
}
   
.item-circle-1 .circle-head:before,
.item-circle-1 .circle-back p:first-child:before {
    background-image:url(../images/discussions-orange.png);
}

.item-circle-2 .circle-head:before,
.item-circle-2 .circle-back p:first-child:before {
    background-image:url(../images/hand-orange.png);
}

.item-circle-3 .circle-head:before,
.item-circle-3 .circle-back p:first-child:before {
    background-image:url(../images/unlock-orange.png);
}

.item-circle-4 .circle-head:before,
.item-circle-4 .circle-back p:first-child:before {
    background-image:url(../images/warning-orange.png);
}

.item-circle-5 .circle-head:before,
.item-circle-5 .circle-back p:first-child:before {
    background-image:url(../images/eraser-orange.png);
}

.item-circle-6 .circle-head:before,
.item-circle-6 .circle-back p:first-child:before {
    background-image:url(../images/circle-people-orange.png);
}

.item-circle-7 .circle-head:before,
.item-circle-7 .circle-back p:first-child:before {
    background-image:url(../images/mailing-orange.png);
}

.item-circle-8 .circle-head:before,
.item-circle-8 .circle-back p:first-child:before {
    background-image:url(../images/shield-orange.png);
}

.item-circle-9 .circle-head:before,
.item-circle-9 .circle-back p:first-child:before {
     background-image:url(../images/earth-orange.png);
}

.item-circle .circle-back p {
    font: 22px ECSquareSansProRegular;
    margin: 0 8px 12px;
    padding: 0 20px;
    text-align: center;
}

.item-circle .circle-back ul {
    margin:0 auto;
    width:300px;
}

.item-circle .circle-back li {
    list-style: disc outside;
    text-align: left;
    font-size: 18px;
}

.warning-p {
    display:inline-block;
    vertical-align: middle;
    background: transparent url(../images/slippery-blue.png) 50% 9px no-repeat;
    background-size: 66% auto;
    width:76px;
    height: 76px;
    margin:0 9px 0 0;
}

.high-risks {
    padding:0;
    margin:54px auto 0;
}

.high-risks > li {
    background: transparent url(../images/circle-blue-shadow.png) 50% 100% no-repeat;
    background-size: 188px auto;
    padding:0 0 12px 0;
    text-align: center;
    margin: 18px auto;
    position: relative;
}

.warning {
    position: absolute;
    background: #EF8407 url(../images/slippery-white.png) 50% 9px no-repeat;
    background-size: 66% auto;
    width:66px;
    height: 66px;
    border:2px solid #fff;
    border-radius: 50%;
    top:-12px;
    left:12px;
}

.high-risks > li p {
    text-align: center;
    margin: 0 auto;
    background-color: #003852;
    width:242px;
    height:242px;
    border-radius: 50%;
    font:normal 22px/22px ECSquareSansProRegular;
    text-align: center;
    color:#fff;
	position:relative;
}

.high-risks > li p:before {
    content:'';
    display: inline-block;
    vertical-align: middle;
    height:100%;
}

.high-risks > li span {
    display: inline-block;
  padding: 8px 8px 4px;
    vertical-align: middle;
}





/* SLIDE 5 */
#slide-5 h2 {
    font:normal 60px ECSquareSansProMedium;
    text-align: left;
    color:#ef8407;
    margin:0 0 18px;
}

.slide5-p, .slide5-li {
    font:normal 24px ECSquareSansProRegular;
    color:#003652;
}

.cost-visual {
    height:454px;
    position: relative;
    margin:54px 0;
}
.cost-visual .col-left {
    display: block;
    height: 300px;
}
.cost-visual .col-right{

}

/*.cost-visual .row,
.cost-visual [class^='col'] {
   height:100%;
    position: relative;
}*/

/*.cost-visual [class^='col'] {
  padding:0 30px;
}*/

.cost-hr {
    position:absolute;
    left:0;
    right:0;
    height:1px;
    background-color: #bae3f6;
    border:0;
}

.hr-1 {top:28px;}
.hr-2 {top:67px;}
.hr-3 {top:107px;}
.hr-4 {top:147px;}
.hr-5 {top:187px;}

.cost-title {
    color:#003652;
    font:normal 30px ECSquareSansProMedium;
    position: absolute;
    top:208px;
    left: 15px;
    right:15px;
    text-align: center;
    display:block;
}
#warning {
    height:39px;
    background: transparent url(../images/warning-full-orange.png) 50% 50% no-repeat;
    background-size: auto 39px;
    position:absolute;
    top:148px;
    left:0;
    right:0;

}

#finger {
    height:78px;
    background: transparent url(../images/finger-pointing.png) 50% 50% no-repeat;
    background-size: auto 78px;
    position:absolute;
    top:109px;
    left:0;
    right:0;

}

#stop {
    height:119px;
    background: transparent url(../images/stop.png) 50% 50% no-repeat;
    background-size: auto 119px;
    position:absolute;
    top:68px;
    left:0;
    right:0;

}

#notes {
    height:158px;
    width:100%;
    width:162px;
    background: #ef8407 url(../images/bank-notes.png) 50% 62px no-repeat;
    background-size: 132px 83px;
    position:absolute;
    top:29px;
    left:50%;
	margin-left:-81px;
    right:0;
    
}

.cost-visual-right {
    background: transparent url(../images/gradient-blue-white.png) 0 0 repeat-y;
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
	height:452px;


}
#hamburger {
	display:none;}
	
@media screen and (max-width:1024px) {
    
	
    #navigation {
		display:none;
	}
	main {
		top: 139px;
		padding-top:0 !important; /* >< fixed menu*/
	}

	#hamburger {
		display:block;}

	#entry-header .h1 {
		width:220px;
		height:220px;
	}
	
	.cost-visual-right {
		position:static;
	}
}

.cost-title {
    font:22px/22px ECSquareSansProMedium;
}

.square-blue {
    position: absolute;
	width:100%;
    width:162px;
    height:158px;
    background-color: #003652;
    top:266px;
    right:0;
    left:50%;
	margin-left:-81px;
    text-align: center;
}

.square-blue:before {
    content:"";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.square-blue p {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    font:normal 20px/20px ECSquareSansProBold;
    color:#ef8407;
    padding: 0 4px;
}

.or {
    top:324px;
    position: absolute;
    right:0;
    left:0;
}

.square-blue .figures {
    color:#fff;
    font-size:36px;
    line-height:36px; 
}

.processing {
	background-color:#007fb5;
	padding:0 20px 0 135px;
	position:relative;
	min-height:120px;
	margin:54px 0 0;
}

.processing-inner {
	position:absolute;
	height:100%;
}

.processing-inner:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
.processing .middle-inner {
    display: inline-block;
   vertical-align: middle;
    width: calc(100% - 9px);
    text-align: left;
}


.processing .warning {
	background: #fff url(../images/warning-full-orange.png) 50% 40% no-repeat;
	background-size:70% auto;
	width:100px;
	height:100px;
	border-radius:50%;
	position:absolute;
	top:50%;
	left:-126px;
	margin-top:-50px;
}

.processing h3 {
	font:normal 30px ECSquareSansProRegular;
	margin:0;
    text-align:left;
}
.processing p {
	font:20px/20px ECSquareSansProLight;
	margin:0;
}

/* END SLIDE 5 */





/*  FOOTER */
#footer {
    padding:60px 0 0;
    background: #fff repeat-x 59% 0;
}

#footer .bcg {
    background:  #9fd9f3;
}

#footer .inner {
    background-color: #9fd9f3;
}

.footer-a {
    margin:18px 0 36px;
    text-align: center;
}

.footer-head {
    font:normal 45px ECSquareSansProRegular;
    color:#fff;
    margin:72px auto 0;
    text-align: center;
}

.footer-a.even {
    text-align: left;
    padding-left:20px;
}

.footer-a.odd {
    text-align: right;
    padding-right:20px;
}

.footer-a.odd {
    border-right:2px solid #0983a4;
    margin-right:-15px;
}

 .footer-a a {
    font:normal 20px ECSquareSansProMedium;
    color:#0080b7;
    margin-left:-10px;
    text-decoration: underline;
 }


#footer .small {
    font:normal 24px ECSquareSansProRegular;
    color:#003652;
    text-align: center;
    font-weight: bold;
}

#footer .indirizzo {
    font:normal 16px ECSquareSansProRegular;
    color:#003652;
    text-align: center;
    font-weight: bold;
}

#footer .contatti {
    font:normal 16px ECSquareSansProRegular;
    color:#ffffff;
    text-align: center;
    margin-top:10px;
    margin-bottom:30px;
}

.footer-logo {
	background-color: #0a71b3;
	font: italic 15px ECSquareSansProRegular;
	color: #fff;
	width: 128px;
	height: 85px;
	text-align: center;
	margin: 48px auto 0;
	padding: 6px 6px 42px;
	display: none;
}

/* Slidebar */
#hamburger{
	background-color:rgba(255,255,255,0.8);
	height:45px;
	padding:2px 5px;
	position:fixed;
	right:20px;
	top:35px;
	width:45px;
	z-index:50;
}
#hamburger span{
	background:#537783;
	display:block;
	height:6px;
	margin:6px 0;
}

/* >= 768 */
@media screen and (max-width:768px) {
	
	h3 {
		text-align:center;
	}
	
	.nav-twin li {
		height:12.5vh;
	}
	
	.nav-twin li a {
		height:100%;
	}
		
	/* SLIDE 1 */	
	#slide-1 {
		height:calc(100vh - 139px);
	}
	
	#slide-1 h1 {
		text-align:center;
		font-size:100px;
		line-height:110px;
		margin-bottom:48px;
	}
	
	#slide-1 h2 {
		text-align:center;
		margin-bottom:48px;
	}
	
	#slide-1 h2 br {
		display:none;
	}
	
	#slide-1 .intro {
		padding:0;
		text-align:center;
        font-size: 20px;
	}
	
	/* SLIDE 2 */
	#personal-data {
		height:auto;
		margin-bottom:90px;
	}
	
	#slide-2 .inner, #slide-2 .hsContent, #slide-2 .hsContainer {
		min-height:unset;
		padding-bottom:0;
	}
	#personal-data {
		margin-bottom:0;
	}
	
	#personal-data > li {
		width:auto;
		background: -moz-linear-gradient(left,  rgba(0,97,136,1) 0%, rgba(255,255,255,0) 100%);
		background: -webkit-linear-gradient(left,  rgba(0,97,136,1) 0%,rgba(255,255,255,0) 100%);
		background: linear-gradient(to right,  rgba(0,97,136,1) 0%,rgba(255,255,255,0) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006188', endColorstr='#00ffffff',GradientType=1 );
	}
	

	#man {
		width:180px;
		top:auto;
		bottom:0;
	}
	
	#slide-2 .data-title {
        font-size: 38px;
        line-height: 38px;
	}
	
	#slide-2 .data-p {
		font-size:24px;
		line-height:36px;
	}

	#slide-2 .data-p strong {
		display:block;
		font-size:30px;
		line-height:36px;
	}
	
	/* SLIDE 3 */
	.shield-blue {
		margin:36px auto;
		float:none;
	}
	
	.p-boom.p-boom-2 {
		margin-left:0;
	}
	
	#slide-3 .p-boom-3 {
		position:relative;
		top:0;
		left:0;
		z-index:2;
		margin:0 auto -6px;
		height:auto;
		width:auto;
		text-align:center;
	}
	
	#slide-3 .p-boom-3 span {
		padding:12px;
		width:auto;
	}
	
	#slide-3 .p-boom-4 {
		position:static;
		height:auto;
		width:auto;
		margin-top:0;
		top:auto;
		right:0;
		bottom:0;
		left:0;
		z-index:5;
		text-align:center;
	}
	
	#slide-3 .p-boom-4 span {
		padding:12px;
		width:auto;
	}
	
	.millions {
		margin-top:0;
	}
	
	.millions.blue {
		border0;
	}
	
	.millions.orange {
		padding-bottom:0;
	}

	.yes, .no {
		padding-left:24px;
	}
	
	.yes {
	    background-position-x: 64px;
	}
	
	
	/* SLIDE-5 */
	#slide-5 h2 {
		font-size:40px;
		line-height:40px;
		margin:0 0 36px;
	}
	.keep-records-wrapper {
		background-size:100% auto;
		background-position:0 60px;
	}
	.slide5-p, .slide5-li {
		font-size:24px;
		line-height:24px;
	}
	.cost-title {
		font-size:24px;
	}
	
	.cost-visual-right .cost-title {
		margin-left:0;
		left:30px;
		right:0;
		/*width:100%;*/
	}
	
	.cost-visual [class^="col"] {
		padding:0 15px;
	}
	
	.cost-visual-right {
		padding-right:30px;
	}
	.cost-visual-right {
		margin:0 -15px;
		padding:0 15px;
	}
	.cost-visual-right 
	.cost-title {
		left: 50%;
		width: 162px;
		margin-left: -81px;
	}

	
}

[data-animation] {
	opacity:0;
}

.animation-end[data-animation] {
	opacity:1;
}

/* overwritten class for specific languages */

html[lang = "bg"] #entry-header .h1 {
    background-image: url("../images/hd/ec-logo_bg.png");
}
html[lang = "cs"] #entry-header .h1 {
    background-image: url("../images/hd/ec-logo_cs.png");
}
html[lang = "da"] #entry-header .h1 {
    background-image:url("../images/hd/ec-logo_da.png");
}
html[lang = "de"] #entry-header .h1 {
     background-image:url("../images/hd/ec-logo_de.png");
}
html[lang = "el"] #entry-header .h1 {
    background-image: url("../images/hd/ec-logo_el.png");
}
html[lang = "es"] #entry-header .h1 {
    background-image: url("../images/hd/ec-logo_es.png");
}
html[lang = "et"] #entry-header .h1 {
    background-image: url("../images/hd/ec-logo_et.png");
}
html[lang = "fi"] #entry-header .h1 {
    background-image: url("../images/hd/ec-logo_fi.png");
}
html[lang = "fr"] #entry-header .h1 {
    background-image: url("../images/hd/ec-logo_fr.png");
}
html[lang = "hr"] #entry-header .h1 {
    background-image: url("../images/hd/ec-logo_hr.png");
}
html[lang = "hu"] #entry-header .h1 {
    background-image: url("../images/hd/ec-logo_hu.png");
}
html[lang = "it"] #entry-header .h1 {
    background-image: url("../images/hd/ec-logo_it.png");
}
html[lang = "lt"] #entry-header .h1 {
    background-image: url("../images/hd/ec-logo_lt.png");
}
html[lang = "lv"] #entry-header .h1 {
    background-image: url("../images/hd/ec-logo_lv.png");
}
html[lang = "mt"] #entry-header .h1 {
    background-image: url("../images/hd/ec-logo_mt.png");
}
html[lang = "nl"] #entry-header .h1 {
    background-image: url("../images/hd/ec-logo_nl.png");
}
html[lang = "pl"] #entry-header .h1 {
    background-image: url("../images/hd/ec-logo_pl.png");
}
html[lang = "pt"] #entry-header .h1 {
    background-image: url("../images/hd/ec-logo_pt.png");
}
html[lang = "ro"] #entry-header .h1 {
    background-image: url("../images/hd/ec-logo_ro.png");
}
html[lang = "sk"] #entry-header .h1 {
    background-image: url("../images/hd/ec-logo_sk.png");
}
html[lang = "sl"] #entry-header .h1 {
    background-image: url("../images/hd/ec-logo_sl.png");
}
html[lang = "sv"] #entry-header .h1 {
    background-image: url("../images/hd/ec-logo_sv.png");
}


html[lang = "lt"] .sme-types > li {
    font: 19px/24px ECSquareSansProBold;
}

html[lang = "bg"] .cost-title{
   font: 22px/22px ECSquareSansProMedium;
}
html[lang = "bg"] .high-risks > li p {
    font: 20px ECSquareSansProRegular;
}

html[lang = "da"] .sme-types > li {
    font: 20px/24px ECSquareSansProBold;
}

html[lang = "da"] .records-data > li {
    font: 22px ECSquareSansProBold;
}
html[lang = "da"] .high-risks > li p {
    font: 20px ECSquareSansProRegular;
}
html[lang = "da"] .cost-title{
   font: 26px ECSquareSansProMedium;
}

html[lang = "el"] .sme-types > li {
    font: 20px/24px ECSquareSansProBold;
}
html[lang = "el"] .records-data > li {
    font: 22px ECSquareSansProBold;
}
html[lang = "el"] .high-risks > li p {
    font: 19px ECSquareSansProRegular;
}
html[lang = "el"] .cost-title{
   font: 26px ECSquareSansProMedium;
}

html[lang = "es"] .sme-types > li {
    font: 18px/20px ECSquareSansProBold;
}
html[lang = "es"] .records-data > li {
    font: 22px ECSquareSansProBold;
}
html[lang = "es"] .high-risks > li p {
    font: 19px ECSquareSansProRegular;
}
html[lang = "es"] .cost-title{
   font: 26px ECSquareSansProMedium;
}
html[lang = "et"] .sme-types > li {
    font: 18px/20px ECSquareSansProBold;
}
html[lang = "et"] .cost-title{
   font: 26px ECSquareSansProMedium;
}
html[lang = "fi"] .sme-types > li {
    font:21px/21px ECSquareSansProBold;
}
html[lang = "fi"] .cost-title{
   font: 24px ECSquareSansProMedium;
}

html[lang = "hu"] .cost-title{
   font: 24px ECSquareSansProMedium;
}
html[lang = "nl"] #slide-1 h1 {
    color: white;
    font: 62px/110px ECSquareSansProMedium;
}
html[lang = "nl"] .sme-types > li {
    font: 20px/24px ECSquareSansProBold;
}
html[lang = "nl"] .records-data > li {
    font: 22px ECSquareSansProBold;
}
html[lang = "nl"] .high-risks > li p {
    font: 19px ECSquareSansProRegular;
}
html[lang = "nl"] .cost-title{
   font: 24px ECSquareSansProMedium;
}
html[lang = "pt"] .sme-types > li {
    font:19px/20px ECSquareSansProBold;
}
html[lang = "pt"] .high-risks > li p {
    font: 19px ECSquareSansProRegular;
}
html[lang = "ro"] .high-risks > li p {
    font: 19px ECSquareSansProRegular;
}
html[lang = "sk"] .sme-types > li {
    font:19px/20px ECSquareSansProBold;
}
html[lang = "sl"] .sme-types > li {
    font:19px/20px ECSquareSansProBold;
}
html[lang = "sl"] .cost-title{
   font: 24px/24px ECSquareSansProMedium;
}
html[lang = "de"] .sme-types > li {
    font: 19px/24px ECSquareSansProBold;
}
html[lang = "de"] .high-risks > li p {
    font: 19px ECSquareSansProRegular;
}
html[lang = "de"] .cost-title{
   font: 20px/20px ECSquareSansProMedium;
}
html[lang = "de"] .square-blue p{
   font: 20px/20px ECSquareSansProMedium;
}
html[lang = "fr"] .sme-types > li {
    font:19px/20px ECSquareSansProBold;
}
html[lang = "fr"] .high-risks > li p {
    font: 19px ECSquareSansProRegular;
}
html[lang = "fr"] .cost-title{
   font: 20px/20px ECSquareSansProMedium;
}
html[lang = "it"] .sme-types > li {
    font: 19px/24px ECSquareSansProBold;
}
html[lang = "it"] .high-risks > li p {
    font: 19px ECSquareSansProRegular;
}
html[lang = "it"] .cost-title{
   font: 24px/24px ECSquareSansProMedium;
}
html[lang = "lv"] .sme-types > li {
    font: 19px/24px ECSquareSansProBold;
}
html[lang = "lv"] .cost-title{
   font: 24px/24px ECSquareSansProMedium;
}
html[lang = "mt"] .high-risks > li p {
    font: 19px ECSquareSansProRegular;
}
html[lang = "mt"] .cost-title{
   font: 24px/24px ECSquareSansProMedium;
}
html[lang = "pl"] .sme-types > li {
    font: 19px/24px ECSquareSansProBold;
}
html[lang = "pl"] .high-risks > li p {
    font: 19px ECSquareSansProRegular;
}
html[lang = "pl"] .cost-title{
   font: 24px/24px ECSquareSansProMedium;
}

@media screen and (max-width:640px) {
	/*Nav*/
	nav li a {
		font-size:16px;
	}
	#hamburger {
		top:6px;
		right:6px;
	}
	/*Header*/
	#entry-header {
		height:auto;
	}
	#entry-header .h1 {
		width:160px;
		height:160px;
	}
	/*Digits*/
	.binarybg1 {
		background: transparent url("../images/01.png") repeat-x scroll 0 0;
		height: 16px;
		background-size: auto 60px;
	}
	.binarybg2 {
		background: transparent url("../images/01.png") repeat-x scroll 0 -21px;
		height: 32px;
		background-size: auto 80px;
	}
	.binarybg3 {
		background: transparent url("../images/01.png") repeat-x scroll 0 -2px;
		height: 16px;
		background-size: auto 60px;
	}
	#slide-1 .binary-wrapper {
		top:69px;
	}
	/*General*/
	main {
		top:104px;
	}
	section .container {
		padding:36px 0;
	}
	h3 {
		font-size:40px;
		line-height:40px;
		margin:0 0 36px;
	}
	/*Slide 1*/
	#slide-1 {
		height:auto;
		min-height:unset;
	}
	#slide-1 .hsContent {
		padding:48px 12px 24px;
		min-height:calc(100vh - 104px);
	}
	#slide-1 h1 {
		font-size:48px !important;
		line-height:48px !important;
		margin:0 auto 24px;
		padding:0;
	}
	html[lang = "nl"] #slide-1 h1 {
		font-size:34px !important;
	}
	#slide-1 h2 {
		font-size:30px !important;
		line-height:30px !important;
		margin:0 auto 24px;
	}
	#slide-1 .intro {
		font-size:18px;
	}
	
	/*Slide 2*/
	#personal-data > li {
		font-size:14px;
	}
	#personal-data > li i {
		background-size:auto 30px;
		width:50px;
		height:42px;
	}
	#slide-2 .data-title {
		font-size:20px;
		line-height:24px;
		margin-bottom:12px;
	}
	#slide-2 .data-p,
	#slide-2 .data-p strong {
		font-size:20px;
		line-height:24px;
		margin-top:12px;
	}
	#slide-2 .process {
		margin: 0 0 12px;
		display: inline-block;
	}
	.data-triangle {
		border-width:12px;
	}
	hr.sep {
		margin-top:12px;
		margin-bottom:12px;
		opacity:.5;
	}
	#man {
		left:210px;
		width:120px;
	}
	
	/* Slide 3 */
	#slide-3 .binarybg4 {
		height:60px;
		top:auto;
		bottom:0;
		background-size:auto 100%;
	}	
	
	#slide-3 h4 {
		font-size:24px;
		line-height:24px;
		padding-top:12px;
		padding-tobottom:12px;
		margin-bottom:16px;
	}
	#slide-3 .p-boom {
		font-size:20px;
		line-height:20px;
	}
	#slide-3 #earth {
		height:auto;
	}
	#slide-3 #img-earth {
		width:330px;
		height:460px;
		margin:-24px auto;
	}
	.arrow-simple {
		width:96px;
		height:98px;
	}
	.arrow-double {
		width:129px;
		height:31px;
	}
	.arrow_1 { top: 144px;
		left: 94px;
		z-index:
	}
	.arrow_3 {
		top:150px;
	}
	.arrow_4 {
		left: 192px;
		top: 153px;
	}
	.arrow_7 {
		top: 334pxpx;
	}
	.arrow_8 {
		top: 347pxpx;
	}
	.arrow_11 {
		top: 375px;
		left: 46px;
	}
	.millions.orange {
		width:253px;
	}	
	.money-blue,.money-yellow {
		width:70px;
		height:70px;
	}
	.money-18 {right:123px;}
	.money-17 {right:113px;}
	.money-16 {right:103px;}
	.money-15 {right:93px;}
	.money-14 {right:83px;}
	.money-13 {right:73px;}
	.money-12 {right:63px;}
	.money-11 {right:53px;}
	.money-10 {right:43px;}
	
	.money-wrapper-yellow .money-1 {right:-47px;}
	.money-wrapper-yellow .money-2 {right:-37px;}
	.money-wrapper-yellow .money-3 {right:-27px;}
	.money-wrapper-yellow .money-4 {right:-17px;}
	.money-wrapper-yellow .money-5 {right:-7px;}
	.money-wrapper-yellow .money-6 {right:3px;}
	.money-wrapper-yellow .money-7 {right:13px;}
	.money-wrapper-yellow .money-8 {right:23px;}
	.money-wrapper-yellow .money-9 {right:33px;}

	
	.millions .money-text {
		margin-top:92px;
	}
	
	#slide-3 .p-boom.bg-blue {
		font-size: 24px;
		line-height: 24px;
		padding-top:12px;
		padding-bottom:12px;
	}
	
	/*#Slide 4*/
	#slide-4 h4.h4-1 {
		font-size:26px;
		line-height:26px;
	}
	
	#slide-4 .inner-inner {
		margin-top:0;
	}
	
	.item-circle {
		width:326px;
		height:326px;
	}
	
	.item-circle .circle-head {
		font-size:24px;
	}
	
	.item-circle .circle-back p {
		font-size:14px;
	}
	
	.item-circle .circle-back p:first-child::before {
		width:30px;
		height:30px;
	}
	
	.item-circle .circle-back li {
		font-size:12px;
	}
	
	.item-circle .circle-back p br {
		display:none;
	}
	
	#slide-4 h4 {
		font-size:24px;
		line-height:24px;
		margin:32px 0 16px;
	}
	
	.slide4-p {
		font-size:24px;
		line-height:24px;
		padding-right:18px;
		padding-left:18px;
	}
	
	.processing {
		padding:18px;
	}
	.processing-inner {
		position:static;
	}
		
	.processing .warning {
		position:static;
		display:block;
		margin:0 auto;
	}
	
	.processing h3,
	.processing p {
		text-align:center;
		margin:12px auto;
	}
	
	.questions > li {
		padding:12px 12px 0;
		text-align:center;
	}
	
	.yes,.no {
		display:block;
		position:relative;
		padding:0;
		margin-top:12px;
		margin-right:-12px;
		margin-left:-12px;
		width:auto;
		text-align:center;
		background-position:calc(50% - 42px) 50%;
	}
	.sme-types-wrapper {
		margin:0 0 24px;
	}
	.sme-types {
		width:622px;
	}
	.sme-types > li {
		width:auto;
		height:72px;
		padding:0 18px;
		margin:12px 18px;
		font-size:16px !important;
		line-height:16px !important;
	}
	.sme-types > li > span > span > span {
		text-shadow:1px 1px 0px #000;
	}
	.records-data > li {
		font-size:20px !important;
		line-height:20px !important;
		margin-right:18px;
		margin-left:18px;
	}
	.lock {
		height:63px;
		width:56px;
		background-size:auto 100%;
		right:-27px;
		top:7;
	}
	.connectors {
		width:auto;
	}
	.connector-central {
	    width: 34px;
	    height: 57px;
		background-size:auto 100%;
	}
	.connector-left,
	.connector-right {
    	height: 15px;
	    width: 64px;
		background-size:auto 100%;
		vertical-align:10px;
		margin:0;
	}
	.keep-records-wrapper .slide4-p {
		font-size:24px;
		line-height:24px;
	}
	
	/*Slide 5*/
	#slide-5 .container {
		padding-right:18px;
		padding-left:18px;
	}
	.cost-title {
		font-size:16px !important;
		line-height:16px !important;
	}
	
	/*Footer*/
	footer .container {
		padding-top:36px;
	}
	.footer-head {
		margin-top:0;
		font-size:36px;
		line-height:36px;
	}
	.footer-a {
		text-align:center !important;
		margin:0 !important;
		padding:24px 0 !important;
	}
	.footer-a a {
		display:block;
		text-align:center;
		margin:0 !important;
	}
	.footer-a.odd {
		border-right: 0;
		border-bottom: 1px solid #0983a4;
		margin-right: -15px;
	}
}
	

@media screen and (max-width:480px) {
	/*General*/
	[lang = 'nl'] #slide-1 h1 {
		font-size:36px !important;
		line-height:36px !important;
	}
	[lang = 'nl'] #slide-1 h2 {
		font-size:24px !important;
		line-height:24px !important;
	}
	#man {
		left:120px;
		width:120px;
	}
	/*Slide 2*/
	#personal-data > li span {
		max-width:88px;
	}
	/*Slide 5*/
	.sme-types {
		width:342px;
	}
	.sme-types > li {
		height:38px;
	}
	#notes,.square-blue {
		width:100%;
		left:0;
		margin-left:0;
	}
	.cost-visual-right 
	.cost-title {
		left: 0;
		width: auto;
		margin-left: 0;
	}
	#stop {
		background-size: 100% auto;
		background-position: 50% 100%;
	}

}

@media screen and (orientation: landscape) {
	h3 br {
		display:none;
	}
}