/* CSS Document for screens */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,700italic,300,700);


body {font-family: 'Open Sans', sans-serif; font-size:16px; font-weight:300; color:#555; margin:0; padding:0;}


#page{ max-width:1200px; margin:0 auto; position:relative;}

h1{margin: 0 0 1em0; font-size:2.8em; font-weight:700;}
h2{margin: 0 0 .5em 0; font-size:1.6em; font-weight:700; line-height:1.1em;}
h3{margin: 0 0 .5em 0; font-size:1.3em; font-weight:700;}
h4{margin: 0 0 1.5em 0; font-size:1em; font-weight:700;}

p {margin: 0 0 1em 0; }
a {color:#007eff;}
a:visited {color:#65b1ff;}
a.btn{font-size:1.2em; text-decoration:none; color:#fff; border:1px solid #fff; background-color:#b01634; padding:4px 15px; transition:background-color.5s;}
a.btn:hover { background-color:rgba(0,0,0,.3);}
/* header */
header{height: 400px; background: #ccc url(../images/banner_1200.jpg) no-repeat center bottom; position:relative;}

header a.logo{position:absolute; display:block; z-index:1; width:160px height: 5px;
background: url(../images/logo.svg) no-repeat 0 0; background-size:contain;
top:5px; left: 20px;}
/*header a.logo span{ display:none;}*/
header div.hero{ position:absolute; width:42%; top: 130px; left:55%; }
header div.hero h1 {line-height: 1em; margin: 0 0 30px 0; color:#fff;}

/* Section - All */
section{ padding:0 30px; }
section::after {content:''; display:block; clear:both; background-color:#ccc;}

/* section - Main */

section.main { margin-top:20px; margin-bottom:30px; padding:5px; background-color:#ebebeb;}
section.main aside {width: 47%; float: left; text-align: center;}
section.main .content {margin: 15px; background: no-repeat center top; background-size:400px 150px; padding-top:85px;}
section.main aside h3 { color:#000; text-decoration:none; text-align:center;}
section.main aside h3 a:hover{ text-decoration:underline;}

section.main .content.ILAE {
    background-size:contain; text-align:left;
	background-repeat:no-repeat;
			}

 section.main .content.IBE  {text-align:left; margin-left:20px;}
section.main  aside .content.IBE img { display:block; margin-bottom:5px;}

/* section - IEday */

<!-- section.IEday { background-color:#fff; padding-top:30px; padding-bottom: 30px; color:#000;}  -->
<!-- section.IEday article {padding: 0 20px 0 515px; background:url(../images/IED_logo.png) no-repeat 0 5px; min-height:220px; } -->


section.IEday  { background-color: #fff; position:relative;}
section.IEday  aside{ width:45%; float: left; margin-right: 10px;}
section.IEday  aside .content
{ padding: 30px 30px 20px 0;}
section.IEday  aside .content img { display:block; margin-bottom:15px; width:70%;}
section.IEday  aside .content h4{ margin-bottom: 0; color:#000;}
section.IEday  aside .content p{ margin-bottom: .5em; color:#000;}
section.IEday  aside .content a { display:inline-block; color: #fff; font-weight:400;}
section.IEday a.btn {font-size:1.2em; text-decoration:none; color:#fff; border:1px solid #fff; background-color:#c94188; padding:4px 15px; transition:background-color.5s;}
section.IEday a.btn:hover { background-color: rgba(0,0,0,.3); color:#fff;}
section.IEday a.btn:visited {font-size:1.2em; text-decoration:none; color:#fff; border:1px solid #fff; background-color:#c94188; padding:4px 15px; transition:background-color.5s;}


/* section - Contact */

section.contact { background-color: #3b3b3b; position:relative;}
section.contact aside{ width:30%; float: left; margin-right: 10px;}
section.contact aside .content
{ padding: 30px 30px 20px 0;}
section.contact aside .content img { display:block; margin-bottom:15px; width:70%;}
section.contact aside .content h4{ margin-bottom: 0; color:#fff;}
section.contact aside .content p{ margin-bottom: .5em; color:#fff;}
section.contact aside .content a { display:inline-block; color: #cc6633; font-weight:700;}

section.contact blockquote { margin:0; width:32%; color:#444; background-color:#fff; position:absolute; bottom:0; right:4%;}
section.contact blockquote p{ margin:30px 30px 20px 50px; }
section.contact blockquote p.quote { font-style:italic; font-size:1.2em; }
section.contact blockquote p.credit { color:#777; font-size: .9em; margin-top: 0; padding-left: 20px; line-height: 1.3em; position:relative;}
section.contact blockquote::before{ content:'\201c'; color:#d2bd65;
position:absolute; top:10px; left:8px; font-size:5em; font-family:serif;} 
section.contact blockquote p.quote::after { content:'\201d'; font-family:serif;} 
section.contact blockquote p.credit::before { content:'\2014'; position:absolute; top: -1px; left: 0;} 

/* section - nav */

nav {
	background-color:rgba(0,0,0,.65);
	position:absolute;
	top:0px; left:0px;
	padding:10px 0 0 0;
	width:100%;
	}
	
nav::after{ content:''; display:block; clear:both;}	
nav ul{ list-style:none; margin:0; padding:0px;}

nav ul li a{ display:inline-block; color:#fff; padding:10px 20px;
text-decoration:none;
width:125px;
position:relative;}

nav ul li a:visited { color:#fff;}

nav ul li a:hover { background-color:#6d0911;}
nav ul li a:hover > ul { display:block;}

nav ul ul { position:absolute; top:100%; background-color:#2b0306; display:none}

nav ul ul li { position:relative;}

nav ul ul ul { left:100%; top:0px;}

/* section - top level nav */
nav > ul {padding-right:50px;}
nav > ul > li { float:right;}
nav > ul > li > a { width:auto; padding: 10px 20px 15px 20px; }


/* section - footer */

footer { font-size:.8em; margin:40px; color:#999;}
footer .content { display:inline;}
footer a { margin-left: 30px; color:#777; }
footer a:visited { margin-left: 30px; color:#777; }
footer a:hover { margin-left: 30px; color:#000; }

/* section - meadia queries */

@media screen and (max-width:1000px) 
{ h1 { font-size:2.4em;}

header div.hero {left:56%;}
header div.hero h1 { margin-bottom:20px;}

section.IEday article { padding-left:400px; background-size:375px auto;}
}
@media screen and (max-width:825px) 
{
	h1 { font-size:2.2em;}
	header {height: 300px; background-image:url(../images/banner_825.jpg);}
	header div.hero h1 { top:120px; left:48px;}
	
	section.IEday article { padding-left:325px; background-size:300px auto;}

	
section.contact blockquote p.quote { font-size:1.1em; line-height:1.2em; }

section.contact blockquote p.credit { font-size:.85em;}
	}
	
	@media screen and (max-width:760px) 
{
	h1 { font-size:1.8em;}
	h2 { font-size:1.4em;}
	h3 { font-size:1.1em;}
	a.btn { font-size:1em;}
	/* header */
	header a.logo {width: 145px; height:20px; 
	header div.hero { top:140px; left:48%;}
/* Section Main*/	
	section.main { margin-top:10px; margin-bottom:10px;}
	section.main aside div.content { background-size:300px 100px; padding-top:60px;}
	
	/* Section IED */
	
	section.IEday aside div.content img { width:85%}
	
	/* navigation */
	nav { padding-top:80px; float:right}
	nav > ul {padding-left:10px;}

	}
	
	@media screen and (max-width:625px) 
{
	h1 { font-size:1em;}
	h3 { margin-bottom:0px;}
	a.btn { font-size:.9em;}
	/* header */
	header { height:208px; background-image:url(../images/banner_625.jpg); background-position:left top;}
	
		
/* Section Main*/	
	section.main aside { width:100%; float:none; text-align:left;}
	section.main aside div.content { 
	margin:8px 20px 8px 0; 
	padding:5px 0px 10px 85px;
	background-size: 150px 50px;
	background-position:20px 5px; }
	
	/* Section IED */
	
	section.IEday aside { width:100%; float:none; margin:0; position:relative;}
	section.IEday aside div.content { padding: 20px 20px 20px 150px;}
	section.IEday aside div.content p { font-size:.9em}
	section.IEday aside div.content img { 
	display:inline-block; 
	width:125px; 
	position:absolute; top:30px; left:0px}
	
	/* Section Contact */
	
	section.contact aside { width:100%; float:none; margin:0 20px 0 40px; position:relative;}
	section.contact aside div.content { padding:1px 0px 20px 0px;}
	section.contact aside div.content p { font-size:.9em; margin:0;}

	
	/* navigation */
	nav { position:static; width:auto; padding:20px 15px; background-color:#4b0a0c;}
	nav ul, 
	nav ul ul,
	nav ul ul ul{ display:block; position:static;
		}
		nav > ul { padding:0;}
		nav > ul > li { float:none; margin-top:25px;}
	nav ul li:hover { background:none;}
	nav ul li a { width:auto; display:block; margin:8px 10px; 
	padding:8px; 15px; border:1px solid rgba(255,255,255,.25);
}
nav ul li a:hover {background-color: rgba(255,255,255,.2);}

nav ul ul {background:none;}
nav ul ul li a { margin-left:30px;}
nav ul ul ul li a { margin-left:60px;}
	
	
/* footer */

footer div.content { display:block; margin-top:15px;}
footer div.content a { margin:0 20px 0 0;}
}

@media screen and (max-width: 425
{
	 header { height:142px; background-image: url(../images/banner_425.jpg);}
	 head a. logo { height:2px; background: rgba(0,0,0,.65) url(..images/epilepsy_small.svg)  no-repeat center center; background-size:126px 8px;}
	 header div.hero {width:100%; left:0px; top:46px; text-align:center;}
	 header div.hero h1 { font-size: 1em; margin-bottom: 10px;}
	 header div.hero a.btn { padding:2px 30px; font-size:.8em;}
	 header div.hero a.btn span {display:none;}
	 
	 /*Section Contact */
	 section.contact aside div.content { padding:140px 20px 20px 0px;}
	 section.contact aside div.content img {width:auto; top: 30px; height:100px;}
	 

	 /*Section footer */
	  footer::after { content::''; display:block; clear:both;}
	 footer div.content a { display:inline-block; margin: 0 0 10px 0; float:left; clear:both;}
	}