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


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

#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; }




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

/* Define mobile styles */
@media only screen
{ 
	h1 { font-size:2.0rem; font-weight:100; }
	h2 { font-size:1.6rem; }
	h3 { font-size:1.4rem; }
	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 { }
	article header { padding:32px 0 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; }
}