@font-face {
    font-family: 'Gill Sans Nova';
    src:  url('gillsansnova-webfont.woff2') format('woff2'),
         url('gillsansnova-webfont.woff') format('woff');
    src: local("Gill Sans Nova"), url('../fonts/gillsansnova.TTF'); 
    font-weight: normal;
    font-style: normal;
  } 

  @font-face { 
    font-family: Bahnschrift SemiBold; 
      src: url('../fonts/bahnschrift.eot') ;
      src: local("Bahnschrift SemiBold"), url('../fonts/bahnschrift');
  } 

@font-face { 
    font-family: Constania; 
      src: url('../fonts/constan.eot') ;
      src: local("Constania"), url('../fonts/constan');
  } 
  
  html { 
    height: 100%;}
  
  * { 
    margin: 0; 
    padding: 0;}
  
  /* tell the browser to render HTML 5 elements as block */
  article, aside, figure, footer, header, hgroup, nav, section { 
    display:block;}
  
  body { 
    font: normal 'Gill Sans Nova', sans-serif;}
  
  p { 
    padding: 0 0 0 0;
    line-height: 1.5em;}
  
  img { 
    border: 0;
    margin: 10px 10px 10px 10px}
  
  h1, h5, h6 { 
    font: BOLD 150% 'Constantia', arial, sans-serif;
    margin: 0; 
    padding: 0;}
  
  h2 { 
    font: bold 120% 'Gill Sans Nova', arial, sans-serif;
    margin: 0; 
    padding: 0;}
  
  h3 {
    font: normal 90% 'Gill Sans Nova', arial, sans-serif;
    margin: 0; 
    padding: 0;
    text-decoration: underline;}
  
  h4 { 
    font: normal 100% 'Gill Sans Nova', arial, sans-serif;
    margin: 0; 
    padding: 0;
    text-decoration: underline;}
  
  h5, h6 { 
    font: italic 95% 'Gill Sans Nova', arial, sans-serif;
    margin: 0; 
    padding: 0;}
  
  h7 { 
    font: BOLD 130% 'Constantia', arial, sans-serif;
    margin: 0; 
    padding: 0;
    text-align: center;}
  
  a, a:hover { 
    outline: none;
    text-decoration: none;}
  
  a:hover { 
    text-decoration: none;}
  
  ul { 
    margin: 2px 0 22px 17px;}
  
  ul li { 
    list-style-type: circle;
    margin: 0 0 0 0; 
    padding: 0 0 4px 5px;}
  
  ol { 
    margin: 8px 0 22px 20px;}
  
  ol li { 
    margin: 0 0 11px 0;}
  
  #main, #header, #logo, #menubar, #site_content, #project_list, #o_chart, #footer, #pict, #CrossFade { 
    margin-left: auto; 
    margin-right: auto;}
  
  #main { 
    width: 100%;
    margin: 20px auto}
  
  header { 
    width: 900px;
    height: 178px;
    }
  
  #logo { 
    width: 900px;
    float: left;
    height: 150px;
    background: transparent;
    margin: 0 0 0 0;
    padding: 10px 0 0 0;}
  
  #pict { 
    width: 120px;
    float: left;
    height: 100px;
    background: transparent;
    padding: 6px 20 20 100px;}
   
  #logo h1 { 
    font: normal 100% 'Gill Sans Nova', arial, sans-serif;
    padding: 45px 0 0 17px;}
  
  #logo h1 a:hover { 
    text-decoration: none;}
  
  #site_content { 
    width: 980px;
    overflow: hidden;
    margin: 4px 0 0 4px;
    padding: 0;}

  #project_list { 
    width: 980px;
    overflow: hidden;
    margin: 4px 0 0 0;
    padding: 10px;}
  
  #left_content {
    font: normal 100% 'Gill Sans Nova', sans-serif; 
    float: left;
    text-align: justify;
    width: 450px;
    padding: 20px 0 10px 25px;
    margin: 0;}
     

  #left_content ul { 
  margin: 2px 0 22px 0;}
  
  #left_content ul li { 
    font: normal 90% 'Gill Sans Nova', sans-serif;
    list-style-type: disc;
    position: relative;
    margin: 0 0 0 16px; 
    padding: 2px 0 2px 15px;
    line-height: 1.15em;}
  
  #right_content { 
    font: normal 100% 'Gill Sans Nova', sans-serif; 
    float: left;
    text-align: justify;
    width: 450px;
    padding: 20px 0 10px 25px;
    margin: 0;}
  
  #right_content2 { 
    font: normal 100% 'Gill Sans Nova', sans-serif; 
    float: left;
    text-align: justify;
    width: 450px;
    padding: 0 0 10px 25px;
    margin: 0;}

  #right_content_cu { 
    font: normal 100% 'Gill Sans Nova', sans-serif; 
    float: left;
    text-align: left;
    width: 450px;
    padding: 20px 0 10px 25px;
    margin: 0;}
    
  #right_content ul li { 
    font: normal 90% 'Gill Sans Nova', sans-serif;
    list-style-type: disc;
    position: relative;
    margin: 0 0 0 0; 
    padding: 2px 0 2px 15px;
    line-height: 1.15em;}
  #right_content img { 
    float: left;
    width: 450px;}
  
  footer { 
    font: normal 70% "Gill Sans Nova", sans-serif;
    padding: 10px 0 5px 0;
    text-align: right; 
    position: relative;
    background: transparent;
    width: 980px;}
    
  footer p { 
    padding: 0 0 10px 0;}
  
  footer a, footer a:hover {
    text-decoration: none;}
   
    /* styling for the slideshow on the homepage */
  ul.slideshow {
    width: 980px;
    height: 510px;
    overflow: hidden;
    position: relative;
    text-align: center;
    margin: 0;
    padding: 0;}
    
  ul.slideshow li {
    position: absolute;
    margin: 0;
    padding: 0;
    left: 0;
    right: 0;
    text-align: center;
    list-style: none;}
   
  ul.slideshow li.show {
    z-index: 980;}
   
  ul img {
    border: none;}
   
  /* form styling */
  .form_settings { 
    margin: 0;}
  
  .form_settings p { 
    padding: 0 0 10px 0;}
  
  .form_settings span { 
    padding: 5px 0; 
    float: left; 
    width: 170px; 
    text-align: left;}
    
  .form_settings input, .form_settings textarea { 
    padding: 4px; 
    width: 252px; 
    font: 100% 'trebuchet ms', 'Gill Sans Nova', sans-serif;
    border: 0;
    border-bottom: 1px solid; 
    background: transparent;}
    
  .form_settings .submit { 
    font: 170% 'Constantia', 'Gill Sans Nova', sans-serif; 
    border: 0; 
    width: 100px; 
    margin: 0 0 0 162px; 
    height: 33px;
    padding: 2px 0 3px 0;
    cursor: pointer; 
    border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;}
  
  .form_settings textarea, .form_settings select { 
    font: 100% 'trebuchet ms', arial, sans-serif; 
    border: 1px solid; 
    border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    width: 250px;
    overflow: auto;}
  
  .form_settings select { 
    width: 304px;}
  
  .form_settings .checkbox { 
    margin: 4px 0; 
    padding: 0; 
    width: 14px;
    border: 0;
    background: none;}
  
  /* styling for the blog page */
  #blog_container h4 {
    font: normal 200% 'Gill Sans Nova', arial, sans-serif;
    margin: 0 0 15px 0;
    padding: 5px 0;}
  
  #blog_container h4.select {
    width: 475px;}
  
  .blog {
    background: url(../images/calendar.png) no-repeat;
    width: 54px;
    height: 46px;
    float: left;
    margin: 0 15px 0 0;}
  
  .blog h2 {
    font: bold 90% arial, sans-serif;
    text-shadow: none;
    text-align: center;
    margin: 0;
    padding: 4px 0 0 0;}
    
  .blog h3 {
    font: 140% arial, sans-serif;
    text-shadow: none;
    margin: 0;
    text-align: center;
    padding: -10px 0 0 0;}
    
  #blog_text {
    padding: 20px;
    overflow: auto;
    height: 100%;}
  
  #blog_text h1 {
    font: normal 190% 'Gill Sans Nova', arial, sans-serif;;
    margin: 0 0 15px 0;
    padding: 5px 0;}
  
  /* stylesheet for sooperFish by www.sooperthemes.com -- author: jurriaan roelofs */
  html body ul.sf-menu ul,html body ul.sf-menu ul li { 
    width: 180px;}
  
  html body ul.sf-menu ul ul { 
    margin: 10px 0 0 100px;}

  #___gcse_0 {
    float:right;
    width: 400px;
    padding: 10px 100px 10px 10px;
  }
  
  ul.sf-menu,ul.sf-menu * { 
    margin: 4px 0 0 4px;
    padding: 10px 10px 0 0;}
    
  ul.sf-menu { 
    display: block;
    float:left;
    position: relative;}
    
  ul.sf-menu li { 
    display: block;
    margin: 0 4px 0 0;
    list-style: none;
    text-align: center;
    float:left;
    position: relative;}
    
  ul.sf-menu li:hover { 
    visibility: inherit; /* fixes IE7 'sticky bug' */ }
  
  ul.sf-menu a { 
    display: block;
    position: relative;}

  ul.sf-menu2 { 
    display: block;
    float:left;
    position: relative;}
      
  ul.sf-menu2 li { 
    display: block;
    margin: 0 4px 0 0;
    list-style: none;
    text-align: center;
    float:left;
    position: relative;}
      
  ul.sf-menu2 li:hover { 
    visibility: inherit; /* fixes IE7 'sticky bug' */ }
 
  ul.sf-menu2 a { 
    display: block;
    position: relative;}

  ul.sf-menu ul { 
    position: absolute;
    left: 0;
    width: 300px; 
    top: auto;
    left: -999999px;}
    
  ul.sf-menu ul a { 
    zoom: 1; /* IE6/7 fix */ }
  
  ul.sf-menu ul li { 
    float: left; /* Must always be floated otherwise there will be a rogue 1px margin-bottom in IE6/7 */
    width: 250px;}
    
  ul.sf-menu ul ul { 
    top: 0;
    margin: 0 0 0 0;}
  
  ul.sf-menu li:hover ul,ul.sf-menu li:focus ul,ul.sf-menu li.sf-hover ul, 
  ul.sf-menu ul li:hover ul,ul.sf-menu ul li:focus ul,ul.sf-menu ul li.sf-hover ul,
  ul.sf-menu ul ul li:hover ul,ul.sf-menu ul ul li:focus ul,ul.sf-menu ul ul li.sf-hover ul,
  ul.sf-menu ul ul ul li:hover ul,ul.sf-menu ul ul ul li:focus ul,ul.sf-menu ul ul ul li.sf-hover ul { 
    left: auto;}
    
  ul.sf-menu li:hover ul ul,ul.sf-menu li:focus ul ul,ul.sf-menu li.sf-hover ul ul,
  ul.sf-menu ul li:hover ul ul,ul.sf-menu ul li:focus ul ul,ul.sf-menu ul li.sf-hover ul ul,
  ul.sf-menu ul ul li:hover ul ul,ul.sf-menu ul ul li:focus ul ul,ul.sf-menu ul ul li.sf-hover ul ul,
  ul.sf-menu ul ul ul li:hover ul ul,ul.sf-menu ul ul ul li:focus ul ul,ul.sf-menu ul ul ul li.sf-hover ul ul { 
    left: -999999px;}
  
  /* theming the menu */
  nav { 
    margin: 1px 4px 0 auto;
    float: left;
    text-align: justify;
    padding: 0 0 0 0;
    }
    
  ul#nav { 
    margin: 0 4px 0 0;
    padding: 10px 10px 10px 10px;
    }
    
  
  ul#nav li a {
    font: normal 80% 'Constantia', sans-serif;
    text-decoration: none;
    outline: none;
    text-align: justify;
    z-index: 20;
    display: block;
    float: left;
    ;
    height: 20px;
    padding:10px 10px 10px 10px;
    position: static;
    overflow: hidden;}
 
  ul#nav2 li a {
    font: normal 80% 'Constantia', sans-serif;
    text-decoration: none;
    outline: none;
    text-align: justify;
    z-index: 20;
    display: block;
    float: left;
    ;
    height: 20px;
    padding:10px 10px 10px 10px;
    position: static;
    overflow: hidden;}
    
  ul#nav ul { 
    margin-top: 61px;
       padding-bottom: 0;}

    .intro {
      position: relative;
      margin: 10px;
      padding: 10px 14px;
      cursor: pointer;
      color: #fff;
      font-size: 2em;
      max-width: 980px;
    }
    .intro h1 {
      margin-bottom: 0.5em;
      line-height: 1;
      font-weight: 100;
    }
    #CrossFade {
      background: #fff;
      display: -webkit-box;
      display: -ms-flexbox;
         -webkit-box-align: end;
          -ms-flex-align: end;
              align-items: flex-end;
      height: 650px;
      position: relative;
    }
    #CrossFade img {
      position: absolute;
      min-width: 100%;
      min-height: 100%;
      height: auto;
      background: #000;
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
      opacity: 0;
      -webkit-animation: CrossFade 18s infinite;
              animation: CrossFade 18s infinite;
    }
    #CrossFade img:nth-child(3) {
      -webkit-animation-delay: 6s;
              animation-delay: 6s;
    }
    #CrossFade img:nth-child(2) {
      -webkit-animation-delay: 12s;
              animation-delay: 12s;
    }
    #CrossFade img:nth-child(1) {
      -webkit-animation-delay: 18s;
              animation-delay: 18s;
    }
    
    @-webkit-keyframes CrossFade {
      25% {
        opacity: 1;
        -webkit-transform: scale(1) rotate(0);
                transform: scale(1) rotate(0);
      }
      40% {
        opacity: 0;
      }
    }
    @keyframes CrossFade {
      25% {
        opacity: 1;
        -webkit-transform: scale(1) rotate(0);
                transform: scale(1) rotate(0);
      }
      40% {
        opacity: 0;
      }
    }

/* Solid border */
hr {
  margin: 0;
}


.left{
  float:left;
}

.justify{
  float:justify;
}

div#captioned-gallery 
{   max-width: 960px;
    width: 100%;
    overflow: hidden;
}

div#captioned-gallery figure { margin: 0; }

div#captioned-gallery figure.slider {
	position: relative;
	width: 500%;
  font-size:0;
	animation: 25s slidy infinite; 
}

div#captioned-gallery figure.slider figure { 
	width: 20%;
	height: auto;
	display: inline-block;
  text-align:left;
	position: inherit; 
}

div#captioned-gallery figure.slider img {
	width: 95%;
	height: auto;
  float:left;
  z-index: 1;
}

div#captioned-gallery figure.slider figure figcaption {
	position: absolute;
	bottom: 0;
	background: rgba(0,0,0,0.3);
  font: normal 100% 'Constantia', sans-serif;
	color: #ffffff;
	font-size:1rem;
	padding: 1rem;
  z-index: 9999;
  margin: 10px;
}

@keyframes slidy { 
	0%  { left: 0%; }
	18% { left: 0%; }
	22% { left: -100%; }
	38% { left: -100%; }
	42% { left: -200%; }
	58% { left: -200%; } 
	62% { left: -300%; } 
	78% { left: -300%; } 
	82% { left: -400%; } 
	99% { left: -400%; } 
	100% { left: -500%; } 
}