/******************************/
/*
/* REFERENCES
/* Branding Blue: #211546
/* Branding Red:  #fc4236
/* Button Call To Action: #55C1E3
/*
/******************************/



/******************************/
/* GENERAL                    */
/******************************/
html
{
	font-family:'Roboto', 'Helvetica Neue', 'Segoe', 'Segoe UI', sans-serif;
	font-size:0.9em;
	font-weight:normal;
	line-height:2em; 
}
html, body
{
	height:100%; 
}
body 
{
	background:#fff;
	background-size:cover;
	color:#707070; 
}
body.no-scroll 
{
	overflow:hidden;
}

h1, h2, h3, h4, h5, h6
{
	margin:0 0 0.5em;
	line-height:1.2em;
	font-family:'Roboto', 'Helvetica Neue', 'Segoe', 'Segoe UI', sans-serif;
	font-weight:normal;
}

p { line-height:2em; margin-bottom:1em; }
em { font-style:italic; }
strong { font-weight:bold; }

ul { list-style:none; margin:0; padding:0; }
ol { list-style:none; margin:0; padding:0; }
li { margin:0; padding:0; }

a { color:#55C1E3; text-decoration:none; transition:all 600ms ease; }
a:active,
a:focus,
a:hover { color:#211546; transition:all 300ms ease; }

button,
a.button { box-sizing:border-box; display:inline-block; text-align:center; border:solid 1px #707070; color:#707070; background-color:transparent; transition:all 600ms ease; cursor:pointer; }
button:hover,
a.button:hover { transition:all 300ms ease; background-color:#707070; color:#fff; }

button.call-to-action,
a.button.call-to-action { border-color:#55C1E3; background-color:#55C1E3; color:#fff; }
button.call-to-action:hover,
a.button.call-to-action:hover { border-color:#211546; background-color:#211546; color:#fff; }

p a:hover { background:#213f54; transition:all 600ms ease; }

a.target { font-size:0; display:none; }

form { text-align:left; }
form label { display:block; margin-bottom:1em; }
form label span { display:block; font-size:0.8rem; margin-bottom:0.25em; }
form input { display:block; width:100%; height:48px; border:solid 1px #ccc; }
form textarea { display:block; width:100%; height:160px; border:solid 1px #ccc; text-align:left; line-height:2em; resize:vertical; }

input,
textarea { box-sizing:border-box; font-size:1rem; color:#707070; padding:0.5em 1em; }
input:focus,
textarea:focus {  outline:none; }

*[data-photo]::after { content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-position:50%; background-repeat:no-repeat; background-size:cover; z-index:-1; transition:all 600ms ease; }

::-webkit-input-placeholder { color:#ccc; }
:-moz-placeholder { color:#ccc; }
::-moz-placeholder { color:#ccc; }
:-ms-input-placeholder { color:#ccc; }

.content[data-photo]::after { display:none; }
.content { margin:0 auto; display:block; }
.content.center { text-align:center; }

.columns { position:relative; display:block; text-align:justify; font-size:0; }
.columns:after { content:''; display:inline-block; width:100%; }
.columns > .column { display:inline-block; width:45%; vertical-align:top; }

#popup-shim { position:fixed; top:0; left:0; right:0; bottom:0; z-index:300; background:rgba(0,0,0,0.8); }
#popup { position:fixed; top:0; left:0; right:0; bottom:0; z-index:310; opacity:0; transition:all 800ms ease; }
#popup > button.close { position:absolute; top:0; right:0; width:48px; height:48px; padding:0; margin:0; border:none; border-radius:0; opacity:0.4; background:#000 url('../img/popup-close.svg') no-repeat center; background-size:cover; cursor:pointer; transition:all 600ms ease; }
#popup > button.close:hover { opacity:0.6; transition:all 300ms ease; }

#container { position:relative; width:100%; overflow:hidden; }

#header { position:fixed; top:0; left:0; right:0; z-index:100; transition:box-shadow 300ms ease; animation:fade-in 600ms ease 1; }
#header > div { position:relative; }

#header.scrolltop { box-shadow:none; transition:box-shadow 600ms ease; }

#branding { background:url('../img/logo.svg') no-repeat center; background-size:contain; font-size:0; }
#branding a { display:block; width:100%; height:100%; }

#main-nav-toggle, 
#main-nav-toggle:focus,
#main-nav-toggle:hover,
#main-nav-toggle:active { z-index:10; border:none; border-radius:0; outline:none; padding:0; margin:0; font-size:0; cursor:pointer; transition:background-color 300ms ease; }

#main-nav { font-size:0; overflow:visible; }
#main-nav ul { z-index:11; }
#main-nav li { position:relative; display:inline-block; line-height:42px; font-size:1rem; cursor:pointer; }
#main-nav li.active { }
#main-nav span,
#main-nav a { box-sizing:border-box; display:block; height:100%; line-height:42px; padding:0 20px; border:solid 1px rgba(255,255,255,0); text-transform:uppercase; color:#707070; transition:all 600ms ease; }
#main-nav span:hover,
#main-nav a:hover { transition:all 300ms ease; text-decoration:none; color:#000; }
#main-nav a.button { border-color:#707070; }
#main-nav a.button:hover { background-color:#707070; color:#fff; }
#main-nav button.call-to-action,
#main-nav a.button.call-to-action { border-color:#55C1E3; background-color:#55C1E3; color:#fff; }


#main-nav li.dropdown { }
#main-nav li.dropdown::before { content:''; display:block; position:absolute; top:16px; right:10px; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:4px solid #707070; transition:all 300ms ease; }
#main-nav li.dropdown:hover::before { transform:translateY(4px); transition:all 300ms ease; }
#main-nav li.active { }
#main-nav li.active::before { transform:translateY(10px); opacity:0; }

#main-nav-site { }
#main-nav-monitoring { } 


#main { position:relative; display:block; animation:fade-in 1s ease 1; }
#main > section:first-child { padding-top:122px; } 

section { position:relative; z-index:10; background-color:#fff; background-size:cover; background-repeat:no-repeat; background-position:center; }

/* Default: Flex Support */
section { box-sizing:border-box; display:flex; align-items:center; justify-content:center; }
section .content { position:relative; align-self:center; flex-grow:1; }
section.full { min-height:100vh; }

/* TODO: Non Flex Browsers */
/*
section { padding:160px 40px; }
section .content { margin:0 auto; }
section.full { padding:220px 0; }
*/

section.dark { background-color:#707070; }
section.blue { background-color:#211546; }

section .content::before { content:''; display:none; background-repeat:no-repeat; background-size:contain; }
section .content .text-block { position:relative; }
section .content.center .text-block { display:inline-block; }

section.dark .content * { color:#fff; }

section.dark .content button,
section.dark .content a.button { border-color:#fff; color:#fff; }
section.dark .content button:hover,
section.dark .content a.button:hover { background-color:#fff; color:#707070; }
section.dark .content button.call-to-action,
section.dark .content a.button.call-to-action { border-color:#55C1E3; }
section.dark .content button.call-to-action:hover,
section.dark .content a.button.call-to-action:hover { border-color:#fff; }


section .content h1 { position:relative; }
section .content h1 + hr { display:block; border:none; background:#707070; color:#707070; height:2px; line-height:2px; }
section.dark .content h1 + hr { background-color:#fff; }
section .content.center h1 + hr { }
section .content p { margin-bottom:0.5em; line-height:1.5em; }
section .content ul { }
section .content li { }


article { }
article header { text-align:center; background:#dfdfdf; }
article h1 { margin:0; }
article h2 { margin-top:1em; margin-bottom:0.5em; }
article h3 { margin-top:1em; margin-bottom:0.5em; }
article h4 { margin-top:1em; margin-bottom:0.5em; }
article ul { list-style:disc; margin-bottom:0.5em; }
article li { margin-left:1.5em; margin-bottom:0.5em; line-height:2em; }
article li h4 { margin-bottom:0; }
article .content { }
article .content hr { display:block; border:none; height:0; line-height:0; border-top:dotted 1px #ccc; }


#footer { position:relative; z-index:10; background:#484848; }
#footer .top { position:absolute; width:100%; overflow:visible; height:1px; background:#ccc; z-index:10; }
#footer .top a { display:block; background:#ccc url('../img/back-to-top.svg') no-repeat 50% 50%; border-radius:50%; font-size:0; transition:all 400ms ease; }

#footer nav { display:block; font-size:1rem; text-align:center; }
#footer nav a { color:#898989; text-align:left; display:block; line-height:28px; border-bottom:solid 1px #898989; }
#footer nav a:hover { color:#fff; }
#footer nav > ul { display:block; }
#footer nav > ul > li { }
#footer nav > ul > li ~ li { }
#footer nav ul ul { }
#footer nav li { }
#footer nav li li { display:block; }
#footer nav li li a { border-bottom:none; line-height:24px; }

#legal { display:block; color:#898989; font-size:0.65em; line-height:16px; padding:8px 40px; text-align:center; text-transform:uppercase; background:rgba(0,0,0,0.0); border-top:solid 1px rgba(255,255,255,0.03); }
#legal > div { margin:0 auto; max-width:1400px; }
#legal a { color:#fff; }
#legal a:hover { text-decoration:underline; }

#version { }
#policies { display:none; }

#projectgrey { color:#464646; text-align:center; display:none; }
#projectgrey a { color:#464646; transition:all 600ms ease; }
#projectgrey a:hover { color:#fff; text-decoration:none; transition:all 300ms ease; }



#container .platform-win,
#container .platform-mac,
#container .platform-ios,
#container .platform-android,
#container .platform-linux,
#container .platform-unknown { display:none; }

#container.platform-win .platform-win,
#container.platform-mac .platform-mac,
#container.platform-ios .platform-ios,
#container.platform-android .platform-android,
#container.platform-linux .platform-linux,
#container.platform-unknown .platform-unknown { display:block; display:unset; }



/******************************/
/* SMALL SCREENS              */
/******************************/

/* Define mobile styles */
@media only screen
{ 
	h1 { font-size:2rem; }
	h2 { font-size:2.4rem; }
	h3 { font-size:1.6rem; }
	h4 { font-size:1.2rem; }

	button,
	a.button { font-size:0.85rem; height:40px; line-height:40px; padding:0 8px; border-radius:2px; }

	#header { padding:0; height:48px; z-index:100; background:#211546; }
	#header > div { height:42px; }
	
	#branding { margin-left:56px; background:url('../img/logo-mobile.svg') no-repeat 4px 12px; background-size:auto 20px; width:80px; height:48px; }

	#main-nav-toggle { z-index:10; position:absolute; top:0; left:0; width:56px; height:48px; border:none; border-radius:0; background:url('../img/menu.svg') no-repeat center; background-size:contain; }
	
	#container.menu-active { }
		#container.menu-active #main-nav { transform:translateX(240px); box-shadow:3px 0 12px 9px rgba(0,0,0,0.4); transition:transform 240ms ease; }
		#container.menu-active #header::before { content:''; position:fixed; z-index:190; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,0.6); transition:background 240ms ease; }

	#main-nav { z-index:200; position:fixed; left:-240px; top:0; bottom:0; width:240px; background:#fff; transition:transform 240ms ease; overflow-y:scroll; }
		#main-nav ul { z-index:11; }
		#main-nav li { position:relative; display:block; line-height:42px; font-size:0.85rem; cursor:pointer; }
		#main-nav li.active { }
		#main-nav span,
		#main-nav a { box-sizing:border-box; display:block; height:100%; line-height:42px; padding:0 20px; border:solid 1px rgba(255,255,255,0); text-transform:uppercase; color:#707070; transition:all 600ms ease; }
		#main-nav span:hover,
		#main-nav a:hover { transition:all 300ms ease; text-decoration:none; color:#000; }
		#main-nav a.button { border-color:#707070; }
		#main-nav a.button:hover { background-color:#707070; color:#fff; }

	#main-nav > div { background:#211546; padding:32px 0 16px; }
		#main-nav > div a { display:block; height:32px; background:url('../img/logo-mobile.svg') no-repeat 50% 50%; background-size:contain; font-size:0; }

	#main-nav li.dropdown { }
		#main-nav li.dropdown ul,
		#main-nav li.dropdown li,
		#main-nav li.dropdown li a { display:block; }
		
		#main-nav li.dropdown ul { display:block; padding:0; max-height:0; overflow:hidden; transition:max-height 600ms ease; }
		#main-nav li.dropdown.active { background:#efefef; }
		#main-nav li.dropdown.active ul { transition:max-height 240ms ease; padding-bottom:16px; }
		#main-nav li.dropdown.products.active ul { max-height:84px; }
		#main-nav li.dropdown.about.active ul { max-height:210px; }

		#main-nav li.dropdown li { padding-left:20px; height:38px; line-height:38px; }
		#main-nav li.dropdown li::before { content:''; display:block; position:absolute; top:16px; left:24px; width:0; height:0; border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:4px solid #707070; transition:all 300ms ease; }


	#main-nav-site { display:block;	padding:16px 0; }

	#main-nav-monitoring { display:block; padding:32px 16px; border-top:solid 1px #efefef; }
		#main-nav-monitoring li { display:none; }
		#main-nav-monitoring .mobile { display:block; margin-top:16px; }

	#main > section:first-child { padding-top:8px; } 
	section { }
	section .content { padding:40px 0; }
	section .content::before { height:50vh; margin:0 16px; background-size:contain; }
	section .content .text-block { padding:16px; }
	section .content.center .text-block { }

	section.dark .content * { color:#fff; }

	section .content .buttons { display:flex; align-items:center; justify-content:center; }
	section .content button,
	section .content a.button { max-width:220px; position:relative; align-self:center; flex-grow:1; }
	section .content button ~ button,
	section .content a.button ~ a.button { margin-left:16px; }

	section .content h1 { margin-bottom:10px; }
	section .content h1 + hr { height:1px; display:inline-block; width:240px; margin-bottom:20px; }
	section .content p,
	section .content ol,
	section .content ul,
	section .content li { font-size:1rem; }

	article { padding-top:48px; }
	article header { padding:32px 0; }
	article h1 { margin:0; }
	article .content { padding:32px 16px; }
	article .content hr { margin:64px 0; }

	article img { max-width:100%; }

	#footer nav { padding:40px; }
	#footer nav a { font-weight:400; color:#fff; display:inline-block; width:100px; text-align:center; }
	#footer nav a:hover { }
	#footer nav > ul { }
	#footer nav > ul > li { }
	#footer nav > ul > li ~ li { margin-top:16px; }
	#footer nav ul ul { margin-top:4px; }
	#footer nav li { }
	#footer nav li li { }
	#footer nav li li a { font-weight:300; color:#898989; width:auto; }
}
@media only screen and (orientation:portrait) { }
@media only screen and (orientation:landscape) { }

/* max-width 640px, mobile-only styles, use when QAing mobile issues */
@media only screen and (max-width:40em) { }


/******************************/
/* MEDIUM SCREENS             */
/******************************/

/* min-width 641px, medium screens */
@media only screen and (min-width:40.063em) 
{ 
	#footer nav { padding:40px 0; }
	#footer nav a { text-align:left; display:block; }
	#footer nav a:hover { }
	#footer nav > ul { display:inline-block; }
	#footer nav > ul > li { margin-left:0; }
	#footer nav > ul > li ~ li { margin-top:0; margin-left:36px; }
	#footer nav ul ul { margin-top:4px; }
	#footer nav li { display:inline-block; vertical-align:top; }
	#footer nav li li { display:block; }
	#footer nav li li a { border-bottom:none; line-height:24px; }
}
@media only screen and (min-width:40.063em) and (orientation:portrait) { }
@media only screen and (min-width:40.063em) and (orientation:landscape) { }

/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
@media only screen and (min-width:40.063em) and (max-width:64em) { }



/******************************/
/* LARGE SCREENS              */
/******************************/

/* min-width 1025px, large screens */
@media only screen and (min-width:64.063em) 
{ 
	h1 { font-size:3.8rem; }
	h2 { font-size:2.4rem; }
	h3 { font-size:1.6rem; }
	h4 { font-size:1.2rem; }

	button,
	a.button { font-size:1rem; height:48px; line-height:48px; padding:0 16px; border-radius:2px; }

	#header { padding:40px; height:42px; z-index:100; background:rgba(255,255,255,0.8); box-shadow:0 3px 3px 1px rgba(0,0,0,0.3); }
	#header > div { position:relative; margin:0 auto; max-width:1600px; height:42px; }
	
	#branding { margin-left:0; position:absolute; z-index:1; background:url('../img/logo.svg') no-repeat center; background-size:contain; font-size:0; width:150px; height:42px; }
	#branding a { display:block; width:100%; height:100%; }

	#main-nav-toggle { display:none; }

	#main-nav { position:static; width:auto; background:none; box-shadow:none; overflow:visible; }
	#main-nav ul { display:block; }
	#main-nav li { position:relative; display:inline-block; height:42px; line-height:42px; font-size:1rem; cursor:pointer; }
	#main-nav li.active { }
	#main-nav span,
	#main-nav a { box-sizing:border-box; display:block; height:100%; line-height:42px; padding:0 20px; border:solid 1px rgba(255,255,255,0); text-transform:uppercase; color:#707070; transition:all 600ms ease; }
	#main-nav span:hover,
	#main-nav a:hover { transition:all 300ms ease; text-decoration:none; color:#000; }
	#main-nav a.button { border-color:#707070; }
	#main-nav a.button:hover { background-color:#707070; color:#fff; }

	#main-nav > div { display:none; }

	#main-nav li.dropdown { }
	#main-nav li.dropdown::before { content:''; display:block; position:absolute; top:16px; right:10px; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:4px solid #707070; transition:all 300ms ease; }
	#main-nav li.dropdown:hover::before { transform:translateY(4px); transition:all 300ms ease; }
	#main-nav li.active { }
	#main-nav li.active::before { transform:translateY(10px); opacity:0; }

		#main-nav li.dropdown ul,
		#main-nav li.dropdown li,
		#main-nav li.dropdown li a { display:block; }
		
		#main-nav li.dropdown li,
		#main-nav li.dropdown li a { height:32px; line-height:32px; font-size:0.8rem; }

		#main-nav li.dropdown ul { max-height:none; display:none; opacity:0; transform:translateY(0); position:absolute; top:32px; left:21px; width:180px; padding:8px 0; background:#fff; overflow:visible; border-radius:0 4px 4px 4px; box-shadow:3px 3px 3px rgba(0,0,0,0.15); border:solid 1px #ccc; transition:opacity 600ms ease, transform 600ms ease; }
		#main-nav li.dropdown.active { background:none; }
		#main-nav li.dropdown.active ul { opacity:1; padding:8px 0; transform:translateY(8px); transition:opacity 300ms ease, transform 300ms ease; }
			#main-nav li.dropdown.products.active ul { max-height:none; }
			#main-nav li.dropdown.about.active ul { max-height:none; }
		#main-nav li.dropdown ul::before { content:''; display:block; position:absolute; margin-top:-6px; margin-left:-1px; top:0; left:0; width:8px; height:6px; background:url('../img/dropdown-callout-arrow.png') no-repeat 0 0; }
		#main-nav li.dropdown li a { line-height:36px; }

		#main-nav li.dropdown li { padding:0; height:auto; line-height:38px; }
		#main-nav li.dropdown li::before { content:none; }

	#main-nav-site { position:absolute; left:180px; padding:0; margin:0; }
	#main-nav-monitoring { display:block; float:right; text-align:right; padding:0; margin:0; border:none; } 
		#main-nav-monitoring li { display:inline-block; }
		#main-nav-monitoring .mobile { display:none; }


	#main > section:first-child { padding-top:122px; } 
	section { padding:0 40px; min-height:600px; }
	section .content { max-width:1080px; padding:160px 0; }
	section.full { min-height:100vh; }

	section .content::before { content:''; display:none; position:absolute; width:50%; height:auto; top:10%; bottom:10%; background-repeat:no-repeat; background-size:contain; background-position:100% 50%; }
	section .content .text-block { position:relative; max-width:640px; }
	section .content.center .text-block { display:inline-block; }

	section.dark .content * { color:#fff; }

	section .content .buttons { display:block; }
	section .content button,
	section .content a.button { width:200px; max-width:220px; }
	section .content button ~ button,
	section .content a.button ~ a.button { margin-left:30px; }

	section .content h1 { margin-bottom:60px; position:relative; }
	section .content h1 + hr { display:block; position:absolute; margin:-30px 0 0; border:none; background:#707070; color:#707070; height:2px; line-height:2px; width:400px;  }
	section.dark .content h1 + hr { background-color:#fff; }
	section .content.center h1 + hr { left:50%; margin-left:-200px; }
	section .content p { font-size:2rem; margin-bottom:0.5em; line-height:1.5em; }
	section .content ol { font-size:1.4rem; }
	section .content ul { font-size:1.4rem; }
	section .content li { font-size:1.4rem; }

	article { padding-top:122px; }
	article header { padding:80px 40px; }
	article h1 { margin:0; }
	article .content { max-width:1080px; padding:80px 40px; }
	article .content hr { margin:80px 0; }

}
@media only screen and (min-width:64.063em) and (orientation:portrait) { }
@media only screen and (min-width:64.063em) and (orientation:landscape) { }

/* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
@media only screen and (min-width:64.063em) and (max-width:90em) { }



/******************************/
/* XLARGE SCREENS             */
/******************************/

/* min-width 1441px, xlarge screens */
@media only screen and (min-width:90.063em) { }
@media only screen and (min-width:90.063em) and (orientation:portrait) { }
@media only screen and (min-width:90.063em) and (orientation:landscape) { }

/* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
@media only screen and (min-width:90.063em) and (max-width:120em) { }



/******************************/
/* XXLARGE SCREENS            */
/******************************/

/* min-width 1921px, xxlarge screens */
@media only screen and (min-width:120.063em) { }






/******************************/
/* ANIMATIONS                 */
/******************************/

@keyframes fade-in
{
	0% { opacity:0; }
	100% { opacity:1; }
}

@keyframes fade-out
{
	0% { opacity:1; }
	100% { opacity:0; }
}

@-webkit-keyframes slideshow
{
	0% { opacity:1; -webkit-transform:translate3d(0, 10%, 0) scale(1.2); }
	50% { opacity:1; }
	55% { opacity:0; -webkit-transform:translate3d(0, -10%, 0) scale(1.1); }
	100% { opacity:0; }
}

@-moz-keyframes slideshow 
{
	0% { opacity:1; -moz-transform:translate3d(0, 10%, 0) scale(1.2); }
	50% { opacity:1; }
	55% { opacity:0; -moz-transform:translate3d(0, -10%, 0) scale(1.1); }
	100% { opacity:0; }
}

@keyframes slideshow
{
	0% { opacity:1; transform:translate3d(0, 10%, 0) scale(1.2); }
	50% { opacity:1; }
	55% { opacity:0; transform:translate3d(0, -10%, 0) scale(1.1); }
	100% { opacity:0; }
}