/* padding and border will not increase box size with this */
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* ----- general ----- */
html {
    position: relative;
    height: 100%;
    width: 100%;
}

body {
	position: relative;
    width: 100%;
    margin: 0px;
    background-color: white;
}

b {
    font-weight: bold;
	}

/* ----- divs ----- */

#container {
	position: relative;
	margin: auto;
	max-width: 1000px;
    /*background-color: blue;*/
	}

#inner_container {
	position: relative;
	margin: 20px;
}

#header {
	position: relative;
	height: 90px;
	border-style:none none solid none;
	border-bottom-color:#ff6600;
	/*background-color: red;*/
	}
	
#logo {
	position: realative;
	top: 0px;
	left: 0px;
	}
	
#navbar {
	position: absolute;
	top: 40px;
	right: 0px;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size: 28px;
	}

.text_center {
	position: relative;
	margin: 0px auto 0px auto;
	max-width: 700px;
	}

.science_graphic {
	position: relative;
	margin: 0px auto 0px;
	max-width: 700px;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif;
	}

.art_graphic {
	position: relative;
	margin: -40px auto 0px;
	max-width: 700px;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif;
	}
	
.home_graphic {
	position: relative;
	margin: 50px auto 10px;
	max-width: 1000px;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif;
	}

td.pub {
	vertical-align: middle;
	text-align: center;
	padding: 8px;
	}
	
#footer {
	position: relative;
	height: 50px;
	top: 50px;
	border-style:solid none none none;
	border-top-color:#ff6600;
	/*background-color: red;*/
	}
	
/* ----- fonts ----- */

h1 {font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size: 28px;
}
	
h2 {font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size: 22px; color:#ff6600;
}

h3 {font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size: 16px; color:#ff6600;
}

h4 {font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size: 1px; line-height:1%;
}

hlogo {font: normal 400% 'Folks', arial, sans-serif;
  		border-bottom: 0;
 		text-transform: none;
  		margin: 0;
}

p {font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size: 16px; line-height:150%; text-align: justify; font-weight: 300;
}

/* ----- h_logo------ */

hlogo, hlogo a, hlogo a:hover { 
  padding: 0;
  color: #000;
  text-decoration: none;
}

hlogo a .jmib_colour { 
  color:  #ff6600;
}

hlogo a:hover .jmib_colour { 
  color: #000;
}

/* ----- link_styles------ */

a.bgchange:hover {
	color:#ff6600;
	}

a.underline:hover {
	text-decoration:underline;
	}	

a:link, a:visited {
	color: black;
	text-decoration: none;
	}

/*-----for_SVG-----*/

.bgchangeSVGblue:hover {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif;
	fill:#ff6600; font-size: 13px;
}

.bgchangeSVGbluebig:hover {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif;
	fill:#ff6600; font-size: 37px;
}

.bgchangeSVGwhite:hover {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif;
	fill:#FFFFFF; font-size: 80px;
}

/*-----for_GALLERY-----*/

.gallery {
    position: relative;
    max-width: 700px;
    margin:auto;
	}


ul {
    width:700px;
    background:#ccc;
    float:left;
    padding: 0px 0px 12px;
	margin-top: 5px;
	list-style: none outside none;
	}

ul li {
	margin: 2.5% 0px 0px 2.5%;
    width:30%;
    float:left;
    position:relative; /* Needed for z-indexing later */
	}

ul li img {
    max-width:100%;
    border:2px solid #ff6600;
	}

.gal-1 li {
	-moz-transition: all 0.6s ease;
	-webkit-transition: all 0.6s ease;
	-ms-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;  
    opacity:1;
}

.gal-1 li:hover {
	-moz-transform:scale(2);
	-webkit-transform:scale(2);
	-o-transform:scale(2);
	-ms-transform:scale(2);
    transform:scale(2);
    opacity:1;
    z-index:2;
	}

@font-face {
	font-family: 'Folks';
	src: url('fonts/Folks-Regular.eot'); /* IE9 Compat Modes */
	src: url('fonts/Folks-Regular.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
	src: url('fonts/Folks-Regular.woff') format('woff'); /* Modern Browsers */
	src: url('fonts/Folks-Regular.ttf')  format('truetype'); /* Safari, Android, iOS */
	
	font-family: 'HelveticaNeue';
	src: url('fonts/HelveticaNeue.ttf')  format('truetype'); /* Safari, Android, iOS */
	}