/* RESET CSS 
========================================*/
@charset "utf-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
body { line-height: 1; }
ol, ul { list-style: none; }
table { border-collapse:collapse; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
abbr,acronym { border:0; }


/* GENERAL 
========================================*/

html { height: 100%; }
body { color: #333333; /*display: table;*/ font-family: 'Roboto Light', Arial, Helvetica, sans-serif; font-size: 14px; height: 100%; width: 100%; }

section h1 { color: #02a7df; font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif; font-size: 42px; font-weight: 300; line-height: 56px; margin: 40px 0; }
section.home h1 { color: #FFFFFF; margin: 0; }
section h2 { color: #02a7df; font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif; font-size: 32px; font-weight: 300; line-height: 26px; margin: 0px 0px; }
section h3 { font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif; font-size: 20px; font-weight: 300; line-height: 26px; margin: 0px 0px; }
section h3 strong { color: #646464; font-weight: 500; }
section h4 { color: #02a7df; font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif; font-size: 18px; font-weight: 500; line-height: 26px; margin: 5px 0px; }

section p { line-height: 24px; margin: 0 0 10px 0; }
section p strong { font-weight: 700; }
section a { color: #02a7df; font-weight: 500; text-decoration: none; }
section a:hover { text-decoration: underline; }
section p.legal { color: #999; font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif; font-size: 11px; line-height: 14px; text-align: justify; }

section ul, section ol { margin: 15px 40px; }
section ul li, section ol li { list-style-type: disc; line-height: 20px; margin: 8px 0; }

.divide0	{width:100%; overflow: hidden; height:0px;}
.divide5	{width:100%; overflow: hidden; height:5px;}
.divide10	{width:100%; overflow: hidden; height:10px;}
.divide20	{width:100%; overflow: hidden; height:20px;}
.divide40	{width:100%; overflow: hidden; height:40px;}
.divide100	{width:100%; overflow: hidden; height:100px;}

.text-right { text-align: right; }

.btn.home { float: left; margin: 0 30px 20px 0; }
.btn.home img { width: 200px; }

.div-bg-blue { background-color: #02a7df; color: #FFFFFF; padding: 30px 200px 30px 30px; }
.icon-user { background-image: url('../img/icon-user.png'); background-position: right 50px top 30px;; background-repeat: no-repeat; }

.column { display: none; left: 10px; position: absolute; top: 10px; width: 300px; z-index: 9999; }

@media only screen and (max-width: 750px) {
	.column { display: block; }
}

@media only screen and (max-width: 750px) {
	section h1 { line-height: 48px; }
	.divide40	{ height:20px;}
	.div-bg-blue { padding: 20px; }
	.icon-user { background-image: none; }
}


/* NAV 
========================================*/

nav { background-color: #333333; display: block; float: left; height: 100%; position: fixed; width: 200px; }

nav .logo { box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.1); height: 88px; margin: 50px 0 55px 30px; transition-duration: 0.2s; transition-timing-function: ease-out; width: 88px; }
nav .logo:hover { box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.5); }

nav .financiedby { box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.1); height: 140px;}

nav ul.menu { color: #FFFFFF; font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 300; margin: 0 0 0 30px; text-transform: uppercase; }
nav ul.menu li { margin: 0 0 24px 0; transition-duration: 0.2s; transition-timing-function: ease-out; }
nav ul.menu li.active { border-left: 2px solid #951723; padding: 0 0 0 10px; }
nav ul.menu li:hover { padding: 0 0 0 12px; }
nav ul.menu li a { color: #FFFFFF; text-decoration: none; }

nav ul.social { margin: 50px 0 0 30px; }
nav ul.social li { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); display: inline-table; list-style-type: none; margin: 0 8px 0 0; transition-duration: 0.2s; transition-timing-function: ease-out; vertical-align: middle; }
nav ul.social li:hover { -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); }

nav footer { color: #ccc; font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 300; display: block; position: absolute; bottom: 0; margin: 8px; }
nav footer a { color: #FFF; line-height: 14px; text-decoration: none; }
nav footer a:hover { text-decoration: undeline; }

@media only screen and (max-width: 750px) {
	nav { float: none; height: 100px; position: relative; width: 100%; text-align: center; }
	nav .logo { margin: 5px 0; }
	nav ul.menu { display: none; }
	nav ul.social { display: none; }
	nav footer { display: none; }
}


/* SECTION 
========================================*/

section { color: #333333; min-height: 100%; margin: 0 0 0 200px; overflow: hidden; }
section.home { background-color: #02a7df; color: #FFFFFF; padding: 40px 0 0 0; }
section.home p { width: 450px; }

@media only screen and (max-width: 750px) {
	section { margin: 0; }
	section.home { padding: 0; }
	section.home p { width: auto; }
}

section article { background-image: url('../img/003.png'); background-position: right top 5px; background-repeat: no-repeat; margin: 0 50px; overflow: hidden; width: 690px; }
section iframe.video  { height: 320px; width: 569px; }

@media only screen and (max-width: 990px) {
	section article { width: auto; }
	section iframe.video { width: 100%; }
}

@media only screen and (max-width: 750px) {
	section article { background-image: none; margin: 20px 5%; }	
}

section form .row { margin: 30px 0; overflow: hidden; width: 100%; }
section form .row .col-md-6 { display: block; float: left; margin: 0 5% 0 0; width: 45%; }
section form .row .col-md-12 { margin: 0 5% 0 0; }
section form .row label span { display: block; font-size: 12px; margin: 0 0 5px 0; text-transform: uppercase; }
section form .row label input, 
section form .row label textarea { border: none; border-bottom: 1px solid #02a7df; color: #646464; font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 300; line-height: 20px; outline: 0; padding: 8px; width: 100% !important; }
section form .row input[type="submit"] { background-color: #02a7df; border: none; color: #FFFFFF; cursor: pointer; font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif; font-size: 16px; margin: 0 2.5% 0 0; padding: 8px 25px; text-transform: uppercase; }
section form .row input[type="submit"]:hover { background-color: #00699b; }

@media only screen and (max-width: 750px) {
	section form .row { margin: 0; }
	section form .row .col-md-6, 
	section form .row .col-md-12 { margin: 20px 0; width: 100%; }
	section form .row input[type="submit"] { margin: 0 0 20px 0; }
}

section .spectroscopy img, 
section .kinitc img,
section .micelle img, 
section .docking img { float: right; margin: 10px 0 0 0; width: 100px; }
section .spectroscopy p, 
section .kinitc p,
section .micelle p, 
section .docking p { float: left; width: 550px; }

@media only screen and (max-width: 990px) {
	section .spectroscopy img, 
	section .kinitc img,
	section .micelle img { float: none; }
	section .spectroscopy p, 
	section .kinitc p,
	section .micelle p { float: none; width: auto; }
}

::-webkit-input-placeholder { color: #CCC; font-style: italic; }
:-moz-placeholder { color: #CCC; font-style: italic; } /* Firefox 18- */ 
::-moz-placeholder { color: #CCC; font-style: italic;  } /* Firefox 19+ */
:-ms-input-placeholder {  color: #CCC; font-style: italic; }


/* FOOTER 
========================================*/

footer { display: none; }

@media only screen and (max-width: 750px) {
	footer { background-color: #333333; color: #FFF; display: block; line-height: 20px; padding: 15px 0; text-align: center; }	
	footer a { color: #FFF; text-decoration: none; }
	footer ul li { display: inline-block; margin: 0 5px; }
}