/*
* BOX <3
*/
*, *:after, *:before { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }



/* Fonts */
@font-face { font-family: 'open_sanslight'; 
	src: url('../fonts/opensans/light.eot'); 
	src: url('../fonts/opensans/light.eot?#iefix') format('embedded-opentype'), 
	url('../fonts/opensans/light.woff2') format('woff2'),
	url('../fonts/opensans/light.woff') format('woff'), 
	url('../fonts/opensans/light.ttf') format('truetype'); 
}

/*
@font-face { font-family: 'open_sansregular'; src: url('../fonts/opensans/regular.eot'); src: url('../fonts/opensans/regular.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans/regular.woff') format('woff'), url('../fonts/opensans/regular.ttf') format('truetype'), font-weight: normal; font-style: normal; }
@font-face { font-family: 'open_sanssemibold'; src: url('../fonts/opensans/semibold.eot'); src: url('../fonts/opensans/semibold.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans/semibold.woff') format('woff'), url('../fonts/opensans/semibold.ttf') format('truetype'), font-weight: normal; font-style: normal; }
*/

/* Headings */
h2 { font-weight:bold; }


/* Misc */
::-moz-selection { background-color: #c5eeff; }
::selection { background-color: #c5eeff; }

/* 
* BASIC
*/
img { border:0; }
video, canvas { vertical-align:top; }
html, body { margin:0; height:100%; font-family:'open_sanslight', Calibri, sans-serif; font-size:120%; }
body { min-width:320px; }

/*
* FORMS
*/
input[type="text"], textarea { background:white; border:1px solid rgba(0,0,0,.3); padding:1em; margin-bottom:0.6em; width:90%; font-family:'open_sanslight', Calibri, sans-serif; font-size:100%;  }

/* Form Validation Responses */
.response { padding:20px; border-radius:10px; margin-bottom:25px; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; display:none; opacity:0; }
.success { background:#d1e9fc; }
.failed { background:#ffdddd; }

/* Remove the wierd yellow on autofill in webkit */
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; }

/* Hide placeholder text on focus */
textarea:focus::-webkit-input-placeholder, input:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder , input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
textarea:focus::-moz-placeholder, input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
textarea:focus:-ms-input-placeholder , input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

/* 
* GRID PATTERN
*/
.row::after { content:""; clear:both; display:table; }
[class*="col-"] { float:left; width:100%; }
.col-1 { width:8.33%; }
.col-2 { width:16.66%; }
.col-3 { width:25%; }
.col-4 { width:33.33%; }
.col-5 { width:41.66%; }
.col-6 { width:50%; }
.col-7 { width:58.33%; }
.col-8 { width:66.66%; }
.col-9 { width:75%; }
.col-10 { width:83.33%; }
.col-11 { width:91.66%; }
.col-12 { width:100%; }

/*
* ALIGN
*/
.al { text-align:left; }
.ac { text-align:center; }
.ar { text-align:right; }

/*
* TEXT STYLES & LINK
*/
a { text-decoration:none; color:#0071bc; }
h2, h3, h4 { margin:0; }
p { margin:0; }

ul { text-align:left; margin:0; padding:0 1em; color:black; }
/*ul li { margin:0 1em 0.6em; }*/
li span, p { color:rgba(0,0,0,.6); }
p.sub { color:black; font-weight:bold; padding-top:1em; }
.small { font-size:80%; }
.big { font-size:120%; }

/*
* BTNS
*/
.btn { border:0; font-size:100%; cursor:pointer; display:inline-block; margin:0em 0em 0.5em 0em; padding:0.4em 1em; border-radius:0.3em; color:white !important; text-shadow:none !important;  }
.btn:hover { opacity:0.8; }
.blue { background:#0071bc; }
.black { background:black; }
.bluesec { background:#004f83;  }
.green { background:#39b54a;  }
.hp { background:#D4145A; }
.grey { background:#666666;  }
.white { background:white !important; color:#0071bc !important; font-weight:bold; }
.holo { background:transparent; border:1px solid white; border-radius:1.2em; margin:0 0 0.5em 0 !important; font-weight:normal !important; }

.roundedbtn { padding:0.4em 0.8em; border-radius:1.2em; background:rgba(255,255,255,.8); }
.bcol { border:2px solid #0071bc; color:#0071bc; }
.wcol { border:2px solid white; color:white; }

/*
* MISC
*/
hr { margin:2em 0px 2em; border:0; border-bottom:1px solid rgba(255,255,255,.1); border-top:1px solid rgba(0,0,0,.2); }

/*
* INNER GLOBAL
*/

#intro, .inner { max-width:1500px; margin:0 auto; }

/* 
* HEADER 
*/
#header { border-bottom:3px solid rgba(0,0,0,.15); }
#header .inner { min-height:190px; position:relative; }

/*
* HEADER LINKS
*/
#clink { position:absolute; right:5%; top:30px; }
#clink a { display:inline-block; margin-left:1em; color:black; text-shadow: 0px 0px 3px white; }
#clink img { display:inline-block; vertical-align:middle; margin-right:0.2em; opacity:.3; }

/*
* MENU
*/
#menu { position:absolute; bottom:-3px; left:5%; /*width:92.6%; background:rgba(255, 255, 255,.6);*/ }
#menu ul { list-style:none; margin:0; padding:0; }
#menu li { display:inline-block; text-align:left; min-width:95px; margin-right:1em; }
#menu a { display:block; padding:0.4em 0em; color:black; font-size:120%; font-weight:bold; border-bottom:3px solid rgba(0,0,0,0); }
#menu a:hover { border-bottom:3px solid rgba(0,0,0,.2); }
#menu a.active { color:#0071bc; border-bottom:3px solid #0071bc; }

/*
* LOGO
*/
#logo { position:relative; left:5%; top:35px; max-width:100px; display:block; }
#logo img { width:100%; display:block; }



/*
* VIDEO
*/
#vbg { background:white; width:57%; height:100%; position:absolute; left:42%; top:0px; }

/*
.kpi #vbg { background:white url('../gfx/background3.png') 0% 0% no-repeat; }
.custom #vbg { background:white url('../gfx/background2.png') 0% 0% no-repeat; }
.different #vbg, .other #vbg, .home #vbg { background:white url('../gfx/background1.png') 0% 0% no-repeat; }
*/

#vholder { position:absolute; top:102px;  width:45%; right:4%; max-width:680px; }
#vholder video { width:100%; }
#screen { width:100%; position:relative; }
#screen-video { position:absolute; top:6.2%; left:5.1%; width:89.6%; height:62.2%; border-radius:0.2em; overflow:hidden; text-align:center; }
#screen-video img { width:100%; }

#mobile { width:26%; position:absolute; bottom:2%; right: -2%; }
#mobile-hand { bottom:-3.3%; position:absolute; width:43%; left:-10.8%; }
#mobile-hand img { width:100%; vertical-align:top; }
#mobile-video { position:absolute; left:-4.1%; width:14.4%; height:38.7%; border-radius:0.2em; overflow:hidden; bottom:19.9% !important; }

.pb { position:absolute; bottom:0; width:100%; height:20%; background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.3)); }
.track { position:absolute; bottom:0; width:100%; height:8%; background:rgba(255,255,255,.4); }
#progbar { background:white; transition: width 3s; width:0%; height:100%; }

.bullets li { margin-bottom:1em; }

/*.home #vholder { right:8%; }*/
/*.home #screen-video { left:0%; }*/
.home #mobile { overflow:hidden; }
.home #mobile-hand { left:auto; right:-22.2%; }
.home #mobile { left:auto; right:-6%; }
.home #mobile-video { left:auto; right:-0.5%; }

#mobile { bottom:16%; }
#iostop { width:100%; height:100%; }
#iostop img { width:75%; display:block; margin-top:-1px; margin-left:20%; vertical-align:top; height:auto; }

.kpi #mobile { bottom:-15%; width:33%; }

/*
* INTRO
*/
.bwrapper { background-image: linear-gradient(to bottom, rgba(0,0,0,.1), white); }
#intro .inner { max-width:700px; margin:0; padding:110px 0% 110px 5%; width:43%; }

/*
* BANNER
*/

#banner { max-width:1500px; margin:0 auto; }
#banner .inner { padding:110px 5% 5%; }
#banner p {  }
#banner h2 { color:#0071bc; }

/*
* SUBMENU
*/
#submenu { max-width:1500px; margin:0 auto; }
#submenu .inner { padding:0px 5%; }
#submenu ul { list-style-type:none; margin:0; padding:0; position:absolute; }
#submenu ul li { font-size:13px; text-transform:uppercase; font-weight:bold; display:inline-block; margin-right:1.3em; }
#submenu ul li a { color:rgba(0,0,0,.3); padding:1.3em 0em; display:block; }
#submenu ul li a.active { color:#0071bc; }

/*
* CONTENT
*/
#content { max-width:1500px; margin:0 auto; /*max-width:1500px; margin:0 auto; */ }
#content .inner { padding:0px 5% 110px; }

/* 
* FEATURES & BENEFITS
*/
#features, #benefits { max-width:1500px; margin:0 auto; overflow:hidden; }
#features .inner, #benefits .inner { padding:5% 5% 0%; }
/*#features h2, #benefits h2 { margin:2.2em 0 2.2em; color:black; border-bottom:3px solid black; }*/

#benefits p.sub { color:#0071bc; }

/* 
* EXAMPLES 
*/
#examples { max-width:1500px; margin:0 auto; text-align:center; }
#examples .inner { padding:5% 5% 5%; width:100%;  }
.examples #examples .inner { padding:0% 5% 5%; }
#examples h2 { color:#0071bc; }
.hunderline { width:60px; margin-bottom:1em; }

/*
* CLIENTS
*/
#clients { background:rgba(0,0,0,.05); border-top:1px solid rgba(0,0,0,.05); text-align:center; padding:5% 0px; }
#clients .inner { text-align:center; max-width:1400px; margin:0 auto; padding:0% 40px; }
#clients .thumb { display:inline-block; min-width:140px; height:80px; background-size:110px !important; }

/* Flex Grid */
.flex-grid { display:flex; flex-flow:row wrap; justify-content:space-between; }

.thumb p { margin:0 0 1em; }

/* 3 Col */
.flex-grid .col { flex: 0 0 26%; margin-bottom:4em; position:relative; }

#customs { padding:2em 0 0; }
#customs .flex-grid .col { flex: 0 0 47%; margin-bottom:2em; padding:0 0em; }

.feat .col { flex: 0 0 47%; }
.feat .thumb { background:rgba(0,0,0,.05); padding:2em; }

/* 4 Col */
#examples .flex-grid .col { margin-bottom:2em; flex: 0 0 22%; }
/*.examples #examples .flex-grid .col { flex:0 0 25%; margin:0; }*/

.kpi #benefits .flex-grid .col { flex: 0 0 22%; }

#examples .flex-grid .thumb { border:1px solid rgba(0,0,0,.15); box-shadow:0 0 1em rgba(0,0,0,.2); }
#examples .flex-grid .thumb img { width:100%; max-width:239px; }

.flex-grid .thumb img { width:100%; height:auto; vertical-align:top; display:block; margin:0 auto; }

#customs .flex-grid .thumb { background:white; border:1px solid rgba(0,0,0,.2); margin:0em 0em; }
#customs .flex-grid .thumb img { /*max-width:320px;*/ }

.examples #examples .flex-grid .thumb,
.home #examples .flex-grid .thumb { background:white; padding:1em; }
.kpi #examples .flex-grid .thumb img { max-width:100% !important; }

.thumb { border-radius: 0.5em;  overflow: hidden; }

#benefits .flex-grid .thumb { background:rgba(0,113,188,.1); }
/*.wbg { background:white !important; }*/
.different #benefits .flex-grid .thumb,
#features .flex-grid .thumb { background:rgba(0,0,0,.05); }

.feata img, .featb img, .featc img  { width:100%; max-height:auto !important; }


/*
* FOOTER
*/
#footer { max-width:1500px; margin:0 auto; }
#footer .inner { position:relative; color:rgba(255,255,255,.5); /**/ padding:3% 5% 2%; }

#footer .active,
#footer .active p, 
#footer .active a { color:white !important; }

#footer .bar { width:100%; background:rgba(255,255,255,.2); height:2px; margin:0.4em 0em; }
#footer .active .bar {  background:white !important; }

#footer a, 
#footer p { color:rgba(255,255,255,.5); }

#footer ul { list-style:none; margin:0; padding:0; }
#footer ul li { padding-right:2em; }
#footer ul li p { font-size:70%; margin-bottom:2em; }
#footer a:hover { color:rgba(255,255,255,.8); }
#footer a:hover .bar { background:rgba(255,255,255,.4); }
#footer a:hover p { color:rgba(255,255,255,.8); }

#footer ul.sub { margin-top:0.6em; }
#footer ul.sub li { padding-right:0; font-size:90%; }

.social a { display:inline-block; width:40px; height:40px; }
.social img { max-width:40px; opacity:.5; }
.social a:hover img { opacity:.8; }

.padr { padding-right:20%; }

/* Cookie consent */
#myCookieConsent { z-index:999; min-height:20px; padding:1em 2em 0em; background: rgba(0,0,0,0.6); overflow:hidden; position:fixed; color:#FFF; bottom:0px; right:0; left:0; text-align:left; display:none; }	
#myCookieConsent div { padding:0em 0 1em; }
#myCookieConsent a { color:white; text-decoration:underline; }
#myCookieConsent a:hover { text-decoration:none; }
#myCookieConsent a#cookieButton { display:inline-block; color:white; background:#0071bc; text-decoration:none; cursor:pointer; float:right; margin-bottom:1em; }

/*
* MEDIA BIG DESKTOP
*/
@media screen and (max-width:1600px) {

	/* Video changes */
	#vbg { left:40% !important; width:60% !important; }

	.home #mobile-hand { left:auto; right:-8.2%; }
	.home #mobile { left:auto; right:8%; }
	.home #mobile-video { left:auto; right:13.6%; }
}

/*
* MEDIA SMALL DESKTOP
*/
@media screen and (max-width:1400px) {

	/* Reduce the overall em */
	body {  font-size:110%; }

	/* Menu */
	#menu { left:5% !important; }

	/* Intro */
	#intro .inner { padding:80px 0% 80px 5%;  }
	#banner .inner { padding:80px 5% 5%; }

}

/*
* MEDIA TABLET
*/
@media screen and (max-width:960px) {

	/* Reduce the overall em */
	body {  font-size:85%; }



	/* Video changes 
	#vholder { position:relative; min-width:220px; top:35px; min-width:240px; left:0% !important; right: auto !important; margin:0 auto; }
	#vbg { width:100% !important; height:60% !important; left:0% !important; top:80px !important; background:white url('../gfx/background3.png') 50% 0% no-repeat !important; }
	*/

	/* Logo 
	#logo { top:18px; left:5%; max-width:90px; }
	*/

	
	/*#header .inner { height:auto !important; max-height:39vw !important; min-height:220px; }*/
	/*#header .inner { min-height:500px; }*/
	#header .inner { padding-bottom:6em; }
	
	/* Intro 
	#intro .inner { padding:40px 0% 0px 0%; text-align:center; left:auto !important; width:80%; margin:0 auto; }
	#intro h2 { margin:0 auto; max-width:400px; }
	*/

	#intro .inner { padding-bottom:0 !important; }

	/* Header Links */
	#clink { top:25px; right:5%; }

	/* Menu */
	/*#menu { left:50% !important; margin-left:-145px; }*/
	#menu li { min-width:55px; }

	#submenu ul li { font-size:11px; }
	

	/* Clients */
	#clientlogos .col-3 { width:50% !important; }

	/* Change felx to 2 column */	
	.flex-grid .col { flex: 0 0 45%; margin:0 0 3em; }

	.kpi #benefits .flex-grid .col { flex: 0 0 45%; }
	
	#examples .flex-grid .col { flex: 0 0 45%; }


	.fullwtab { width:50% !important; }

	/* 
	#features .inner, #benefits .inner { padding:40px 8% 0%; }
	#content .inner, #examples .inner { padding:40px 8% 5%; }
	#footer .inner { padding:40px 8%; }
	*/

	#content .inner { padding:5% 5% 5%; }
	
	/*#footer .inner { padding:40px 8%; }*/


}

/*
* MEDIA MOBILE BIG
*/
@media screen and (max-width:620px) {

	.feat .col { flex: 0 0 100%; }

	#footer .inner { padding:5% 5% 2%; }

	.fullwtab { width:100% !important; }

	#submenu .inner { text-align:center; background:rgba(0,0,0,.05); }
	#submenu ul { position:relative; text-align:center; }

	/* Reduce the overall em 
	body { font-size:75%; }
	*/

	#clients .thumb { min-width:110px; height:50px; background-size:90px !important; }

	.nopad { padding:0 !important; }
	.mobcenter { text-align:center; }

	#header .inner { min-height:140px; padding-bottom:6em; }

	#banner .inner { padding:40px 5% 0; text-align:center; }

	input, textarea { text-align:center; }
	/*
	#banner .inner { padding-top:40px; text-align:center; }*/

	#customs .flex-grid .col { flex: 0 0 100%; margin:0 0 2em; }

	/* Menu */
	#menu { left:50% !important; margin-left:-145px; }
	#menu li { min-width:80px; text-align:center; }

	/* Menu text 
	#menu a { font-size:160% !important; }*/
	
	/* Logo */
	#logo { top:18px; max-width:90px; }
	

	/* Video changes */
	#vholder { position:relative; min-width:220px; top:35px; min-width:240px; left:0% !important; right: auto !important; margin:0 auto; }
	#vbg { width:100% !important; height:62% !important; left:0% !important; top:100px !important; background-position:4% 65% !important; }

	.different #vbg, .other #vbg { display:none; }
	
	/* Intro */
	/*#intro .inner { padding:40px 0% 20px 0%; text-align:center; left:auto !important; width:80%; margin:0 auto; }*/
	#intro .inner { padding:40px 10% 20px 10%; text-align:center; /*left:auto !important;*/ width:100%; margin:0 auto; }
	/*#intro h2 { margin:0 auto; max-width:400px; }*/
	

	/* Hide elements */
	.nomob { display:none !important; }

	.col { text-align:center; }
	#content .inner { text-align:center; }


	
	/* Make it mobile friendly */
	#footer { text-align:center; }
	#footer ul { text-align:center !important; }
	#footer li { padding:0 !important; }
	.bar { display:none; }

	.fullw { width:100% !important; padding-bottom:18px; }
	.halfw { width:50% !important; padding-bottom:18px; }

	.ar { text-align:center !important; }

}

/*
* MEDIA MOBILE SMALL
*/
@media screen and (max-width:390px) {
	#menu a { font-size:120% !important; }	
	#vbg { background:none !important; }
	.flex-grid { display:block;  }
}