/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}












/*
  ========================================
  Create some Default Styles
  ========================================
*/

body { 
  font: normal 100% "Times New Roman", Times, serif;
}

a {
  color: #000;

  -webkit-transition-property: color ;
     -moz-transition-property: color ;
       -o-transition-property: color ;
          transition-property: color ;
  -webkit-transition-duration: 1s ;
     -moz-transition-duration: 1s ;
       -o-transition-duration: 1s ;
          transition-duration: 1s ;

  text-decoration: underline;
}

a:hover {
  color: #f00;

  -webkit-transition-property: color ;
     -moz-transition-property: color ;
       -o-transition-property: color ;
          transition-property: color ;
  -webkit-transition-duration: 1s ;
     -moz-transition-duration: 1s ;
       -o-transition-duration: 1s ;
          transition-duration: 1s ;

  text-decoration: none;
}


table {
  border-collapse: collapse;
  border-spacing: 0 ;
  padding: 20px 30px;
}

th, 
td {
  border: 1px solid #333 ;
  padding: 10px 10px;
  text-align: center;
}

th{ 
  font-weight: bold;
}

footer {
  clear: both;
}


h1, h3, h5 {
  margin-bottom: 10px;
}

p {
  margin-bottom: 10px;
}

h2 {
  font-size: 24px;
  line-height: 44px;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 10px;
}

h4 {
  font-size: 18px;
  line-height: 28px;
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: bold;
}

em {
  font-weight: bold;
  text-decoration: italic;    
}

small {
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

i {
  text-decoration: italic;  
}


/*
  ========================================
  Ordinary Bullet and Numbered Lists
  ========================================
*/


.bulletlist ul {
  padding: 0 0 20px 40px;
}
.bulletlist li {
  list-style-type: disc;
}


.decimallist ol {
  padding: 0 0 20px 40px;
}

.decimallist li {
  list-style-type: decimal;
}












/*
  ========================================
  Navigation Bar
  ========================================
*/


.navigation ul {
  font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0cm;
  padding: 0 0 10px 0;
  text-transform: uppercase;
  text-align: center;
}
.navigation li {
  display: inline-block;
  line-height: 40px;
}
.navigation a {
  background: #395870;
  background: linear-gradient(#49708f, #293f50);
  border-right: 1px solid rgba(0, 0, 0, .3);
  color: #fff;
  padding: 12px 50px;

  -webkit-transition-property: background , color , padding;
     -moz-transition-property: background , color , padding;
       -o-transition-property: background , color , padding;
          transition-property: background , color , padding;
  -webkit-transition-duration: 1s , 1s , 1s ;
     -moz-transition-duration: 1s , 1s , 1s ;
       -o-transition-duration: 1s , 1s , 1s ;
          transition-duration: 1s , 1s , 1s ;
  -webkit-transition-delay: 0s , 1s , 0s ;
     -moz-transition-delay: 0s , 1s , 0s ;
       -o-transition-delay: 0s , 1s , 0s ;
          transition-delay: 0s , 1s , 0s ;
  -webkit-transition-timing-function: ease-in , linear , ease-in ;
     -moz-transition-timing-function: ease-in , linear, ease-in ;
       -o-transition-timing-function: ease-in , linear , ease-in ;
          transition-timing-function: ease-in , linear , ease-in ;



  text-decoration: none;
}
.navigation a:hover {
  background: #f00;
  box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3);
  padding: 12px 50px;

  color: #000;

  -webkit-transition-property: background , color ;
     -moz-transition-property: background , color ;
       -o-transition-property: background , color ;
          transition-property: background , color ;
  -webkit-transition-duration: 1s , 1s ;
     -moz-transition-duration: 1s , 1s ;
       -o-transition-duration: 1s , 1s ;
          transition-duration: 1s , 1s ;
  -webkit-transition-delay: 0s , 1s ;
     -moz-transition-delay: 0s , 1s ;
       -o-transition-delay: 0s , 1s ;
          transition-delay: 0s , 1s ;
  -webkit-transition-timing-function: ease-in , linear ;
     -moz-transition-timing-function: ease-in , linear ;
       -o-transition-timing-function: ease-in , linear ;
          transition-timing-function: ease-in , linear ;


}

.navigation li:first-child a {
  border-radius: 4px 0 0 4px;
}
.navigation li:last-child a {
  border-right: 0;
  border-radius: 0 4px 4px 0;
}

















/*
  ========================================
  Link Buttons
  ========================================
*/

.button ,
.failbutton ,
.crashbutton ,
.explosionbutton ,
.firebutton {
  font: bold 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0cm;
  text-align: center;
  display: inline-block;
  line-height: 40px;
}

/* Button presses, letters Invert */

.button a {
  background: #395870;
  background: linear-gradient(#49708f, #293f50);
  border-right: 1px solid rgba(0, 0, 0, .3);
  border-radius: 6px;
  color: #fff;
  padding: 8px 20px;


  text-decoration: none;

  -webkit-transition-property: color ;
     -moz-transition-property: color ;
       -o-transition-property: color ;
          transition-property: color ;
  -webkit-transition-duration: 0s ;
     -moz-transition-duration: 0s ;
       -o-transition-duration: 0s ;
          transition-duration: 0s ;
  -webkit-transition-delay: 0s ;
     -moz-transition-delay: 0s ;
       -o-transition-delay: 0s ;
          transition-delay: 0s ;
}

.button a:hover {
  box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3);
  padding: 8px 20px;

  color: #CCC;

  -webkit-transition-property: color ;
     -moz-transition-property: color ;
       -o-transition-property: color ;
          transition-property: color ;
  -webkit-transition-duration: 0s ;
     -moz-transition-duration: 0s ;
       -o-transition-duration: 0s ;
          transition-duration: 0s ;
  -webkit-transition-delay: 0s ;
     -moz-transition-delay: 0s ;
       -o-transition-delay: 0s ;
          transition-delay: 0s ;

}


/* Button catches fire, chars letters */

.firebutton a {
  background: #395870;
  background: linear-gradient(#49708f, #293f50);
  border-right: 1px solid rgba(0, 0, 0, .3);
  border-radius: 6px;
  color: #fff;
  padding: 8px 20px;

  -webkit-transition-property: background , color , padding;
     -moz-transition-property: background , color , padding;
       -o-transition-property: background , color , padding;
          transition-property: background , color , padding;
  -webkit-transition-duration: 1s , 1s , 0.5s , 0.5s , 0.5s , 0.5s;
     -moz-transition-duration: 1s , 1s , 0.5s , 0.5s , 0.5s , 0.5s;
       -o-transition-duration: 1s , 1s , 0.5s , 0.5s , 0.5s , 0.5s;
          transition-duration: 1s , 1s , 0.5s , 0.5s , 0.5s , 0.5s;
  -webkit-transition-delay: 0s , 0.5s , 0s , 0s , 0s , 0s ;
     -moz-transition-delay: 0s , 0.5s , 0s , 0s , 0s , 0s ;
       -o-transition-delay: 0s , 0.5s , 0s , 0s , 0s , 0s ;
          transition-delay: 0s , 0.5s , 0s , 0s , 0s , 0s ;
  -webkit-transition-timing-function: ease-in , linear , ease-in ;
     -moz-transition-timing-function: ease-in , linear, ease-in ;
       -o-transition-timing-function: ease-in , linear , ease-in ;
          transition-timing-function: ease-in , linear , ease-in ;



  text-decoration: none;
}

.firebutton a:hover {
  background: #f00;
  box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3);
  padding: 10px 30px;

  color: #000;

  -webkit-transition-property: background , color , padding ;
     -moz-transition-property: background , color , padding ;
       -o-transition-property: background , color , padding ;
          transition-property: background , color , padding ;
  -webkit-transition-duration: 2s , 3s , 0.5s ;
     -moz-transition-duration: 2s , 3s , 0.5s ;
       -o-transition-duration: 2s , 3s , 0.5s ;
          transition-duration: 2s , 3s , 0.5s ;
  -webkit-transition-delay: 0s , 0.5s , 0s ;
     -moz-transition-delay: 0s , 0.5s , 0s ;
       -o-transition-delay: 0s , 0.5s , 0s ;
          transition-delay: 0s , 0.5s , 0s ;
  -webkit-transition-timing-function: ease-in , linear , ease-in ;
  -webkit-transition-timing-function: ease-in , linear , ease-in ;
     -moz-transition-timing-function: ease-in , linear , ease-in ;
       -o-transition-timing-function: ease-in , linear , ease-in ; 
          transition-timing-function: ease-in , linear , ease-in ;
}


/* Explostion button swells large and then re-collapses */

.explosionbutton a {
  background: #395870;
  background: linear-gradient(#49708f, #293f50);
  border-right: 1px solid rgba(0, 0, 0, .3);
  border-radius: 6px;
  color: #fff;
  padding: 8px 20px;

  -webkit-transition-property: background , color , padding;
     -moz-transition-property: background , color , padding;
       -o-transition-property: background , color , padding;
          transition-property: background , color , padding;
  -webkit-transition-duration: 1s , 1s , 0.5s , 0.5s , 0.5s , 0.5s;
     -moz-transition-duration: 1s , 1s , 0.5s , 0.5s , 0.5s , 0.5s;
       -o-transition-duration: 1s , 1s , 0.5s , 0.5s , 0.5s , 0.5s;
          transition-duration: 1s , 1s , 0.5s , 0.5s , 0.5s , 0.5s;
  -webkit-transition-delay: 0s , 0.5s , 0s , 0s , 0s , 0s ;
     -moz-transition-delay: 0s , 0.5s , 0s , 0s , 0s , 0s ;
       -o-transition-delay: 0s , 0.5s , 0s , 0s , 0s , 0s ;
          transition-delay: 0s , 0.5s , 0s , 0s , 0s , 0s ;
  -webkit-transition-timing-function: linear , linear , ease-in ;
     -moz-transition-timing-function: linear , linear , ease-in ;
       -o-transition-timing-function: linear , linear , ease-in ;
          transition-timing-function: linear , linear , ease-in ;



  text-decoration: none;
}

.explosionbutton a:hover {
  background: #f00;
  box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3);
  padding: 16px 25px;

  color: #CCC;

  -webkit-transition-property: background , color , padding ;
     -moz-transition-property: background , color , padding ;
       -o-transition-property: background , color , padding ;
          transition-property: background , color , padding ;
  -webkit-transition-duration: 1s , 2s , 0.5s ;
     -moz-transition-duration: 1s , 2s , 0.5s ;
       -o-transition-duration: 1s , 2s , 0.5s ;
          transition-duration: 1s , 2s , 0.5s ;
  -webkit-transition-delay: 0.2s , 0.5s , 0s ;
     -moz-transition-delay: 0.2s , 0.5s , 0s ;
       -o-transition-delay: 0.2s , 0.5s , 0s ;
          transition-delay: 0.2s , 0.5s , 0s ;
  -webkit-transition-timing-function: linear , ease-in , cubic-bezier(0.33 , 3.0 , 0.91 , 3.0 ) ;
  -webkit-transition-timing-function: linear , ease-in , cubic-bezier(0.33 , 3.0 , 0.91 , 3.0 ) ;
     -moz-transition-timing-function: linear , ease-in , cubic-bezier(0.33 , 3.0 , 0.91 , 3.0 ) ;
       -o-transition-timing-function: linear , ease-in , cubic-bezier(0.33 , 3.0 , 0.91 , 3.0 ) ; 
          transition-timing-function: linear , ease-in , cubic-bezier(0.33 , 3.0 , 0.91 , 3.0 ) ;
}




/* Crash button has assymmetric padding, crashes to the other side */

.crashbutton a {
  background: #395870;
  background: linear-gradient(#49708f, #293f50);
  border-right: 1px solid rgba(0, 0, 0, .3);
  border-radius: 6px;
  color: #fff;
  padding: 8px 20px 8px 20px;

  -webkit-transition-property: padding-right , padding-left ;
     -moz-transition-property: padding-right , padding-left ;
       -o-transition-property: padding-right , padding-left ;
          transition-property: padding-right , padding-left ;
  -webkit-transition-duration: 2s , 2s ;
     -moz-transition-duration: 2s , 2s ;
       -o-transition-duration: 2s , 2s ;
          transition-duration: 2s , 2s ;
  -webkit-transition-delay: 0.5s , 0.5s ;
     -moz-transition-delay: 0.5s , 0.5s ;
       -o-transition-delay: 0.5s , 0.5s ;
          transition-delay: 0.5s , 0.5s ;
  -webkit-transition-timing-function: ease , ease ;
     -moz-transition-timing-function: ease , ease ;
       -o-transition-timing-function: ease , ease ;
          transition-timing-function: ease , ease ;



  text-decoration: none;
}

.crashbutton a:hover {
  background: #395870;
  background: linear-gradient(#49708f, #293f50);
  border-right: 1px solid rgba(0, 0, 0, .3);
  border-radius: 6px;
  color: #fff;
  padding: 8px 40px 8px 0px;

  -webkit-transition-property: padding-right , padding-left ;
     -moz-transition-property: padding-right , padding-left ;
       -o-transition-property: padding-right , padding-left ;
          transition-property: padding-right , padding-left ;
  -webkit-transition-duration: 0.1s , 0.1s ;
     -moz-transition-duration: 0.1s , 0.1s ;
       -o-transition-duration: 0.1s , 0.1s ;
          transition-duration: 0.1s , 0.1s ;
  -webkit-transition-delay: 0s , 0s ;
     -moz-transition-delay: 0s , 0s ;
       -o-transition-delay: 0s , 0s ;
          transition-delay: 0s , 0s ;
  -webkit-transition-timing-function: linear , linear ;
     -moz-transition-timing-function: linear , linear ;
       -o-transition-timing-function: linear , linear ;
          transition-timing-function: linear , linear ;

  text-decoration: underline;
}






/* Fail button has assymmetric padding, crashes to the other side */

.failbutton a {
  background: #395870;
  background: linear-gradient(#49708f, #293f50);
  border-right: 1px solid rgba(0, 0, 0, .3);
  border-radius: 6px;
  color: #fff;
  padding: 8px 20px 8px 20px;
  position: relative;
  top: 0px;

  -webkit-transition-property: padding-top , padding-bottom , top ;
     -moz-transition-property: padding-top , padding-bottom , top ;
       -o-transition-property: padding-top , padding-bottom , top ;
          transition-property: padding-top , padding-bottom , top ;
  -webkit-transition-duration: 2s , 2s , 2s ;
     -moz-transition-duration: 2s , 2s , 2s ;
       -o-transition-duration: 2s , 2s , 2s ;
          transition-duration: 2s , 2s , 2s ;
  -webkit-transition-delay: 0.5s , 0.5s , 0.5s ;
     -moz-transition-delay: 0.5s , 0.5s , 0.5s ;
       -o-transition-delay: 0.5s , 0.5s , 0.5s ;
          transition-delay: 0.5s , 0.5s , 0.5s ;
  -webkit-transition-timing-function: ease , ease , ease ;
     -moz-transition-timing-function: ease , ease , ease ;
       -o-transition-timing-function: ease , ease , ease ;
          transition-timing-function: ease , ease , ease ;



  text-decoration: none;
}

.failbutton a:hover {
  background: #395870;
  background: linear-gradient(#49708f, #293f50);
  border-right: 1px solid rgba(0, 0, 0, .3);
  border-radius: 6px;
  color: #fff;
  padding: 16px 20px 0px 20px;
  position: relative;
  top: 8px;

  -webkit-transition-property: padding-top , padding-bottom , top ;
     -moz-transition-property: padding-top , padding-bottom , top ;
       -o-transition-property: padding-top , padding-bottom , top ;
          transition-property: padding-top , padding-bottom , top ;
  -webkit-transition-duration: 0.1s , 0.1s , 0.1s ;
     -moz-transition-duration: 0.1s , 0.1s , 0.1s ;
       -o-transition-duration: 0.1s , 0.1s , 0.1s ;
          transition-duration: 0.1s , 0.1s , 0.1s ;
  -webkit-transition-delay: 0s , 0s , 0s ;
     -moz-transition-delay: 0s , 0s , 0s ;
       -o-transition-delay: 0s , 0s , 0s ;
          transition-delay: 0s , 0s , 0s ;
  -webkit-transition-timing-function: ease-in , ease-in , ease-in ;
     -moz-transition-timing-function: ease-in , ease-in , ease-in ;
       -o-transition-timing-function: ease-in , ease-in , ease-in ;
          transition-timing-function: ease-in , ease-in , ease-in ;

}














/*
  ========================================
  Display Hidden Content
  ========================================
*/


.hover-headline {
  margin-left: 20px;
}

.hover-expand {
  display: none;
  margin-left: 20px;
  padding: 20px 0;
}


.hover-visible {
  display: block;
  visibility: hidden;
  margin-left: 20px;
  padding: 20px 0;

}

.hover-larger {
  display: block;
  visibility: hidden;
  margin-left: 20px;
  margin-bottom: 0px;
  padding: 0;
  font-size: 16px;
  line-height: 0px;
  color: #ccc; 
  -webkit-transition-property: visibility , font-size , line-height , margin-bottom , color ;
     -moz-transition-property: visibility , font-size , line-height , margin-bottom , color ;
       -o-transition-property: visibility , font-size , line-height , margin-bottom , color ;
          transition-property: visibility , font-size , line-height , margin-bottom , color ;
  -webkit-transition-duration: 2s , 2s , 2s , 2s , 2s ;
     -moz-transition-duration: 2s , 2s , 2s , 2s , 2s ;
       -o-transition-duration: 2s , 2s , 2s , 2s , 2s ;
          transition-duration: 2s , 2s , 2s , 2s , 2s ;
  -webkit-transition-delay: 0.25s , 0.25s , 0.25s , 0.25s , 0.25s ;
     -moz-transition-delay: 0.25s , 0.25s , 0.25s , 0.25s , 0.25s ;
       -o-transition-delay: 0.25s , 0.25s , 0.25s , 0.25s , 0.25s ;
          transition-delay: 0.25s , 0.25s , 0.25s , 0.25s , 0.25s ;
  -webkit-transition-timing-function: ease , ease , ease , ease , ease ;
     -moz-transition-timing-function: ease , ease , ease , ease , ease ;
       -o-transition-timing-function: ease , ease , ease , ease , ease ;
          transition-timing-function: ease , ease , ease , ease , ease ;
}

.hover-larger h2 {
  display: block;
  visibility: hidden;
  margin-left: 20px;
  padding: 0;
  font-size: 24px;
  line-height: 0px;
  color: #ccc; 
  -webkit-transition-property: visibility , font-size , line-height , color ;
     -moz-transition-property: visibility , font-size , line-height , color ;
       -o-transition-property: visibility , font-size , line-height , color ;
          transition-property: visibility , font-size , line-height , color ;
  -webkit-transition-duration: 2s , 2s , 2s , 2s ;
     -moz-transition-duration: 2s , 2s , 2s , 2s ;
       -o-transition-duration: 2s , 2s , 2s , 2s ;
          transition-duration: 2s , 2s , 2s , 2s ;
  -webkit-transition-delay: 0.25s , 0.25s , 0.25s , 0.25s ;
     -moz-transition-delay: 0.25s , 0.25s , 0.25s , 0.25s ;
       -o-transition-delay: 0.25s , 0.25s , 0.25s , 0.25s ;
          transition-delay: 0.25s , 0.25s , 0.25s , 0.25s ;
  -webkit-transition-timing-function: ease , ease , ease , ease ;
     -moz-transition-timing-function: ease , ease , ease , ease ;
       -o-transition-timing-function: ease , ease , ease , ease ;
          transition-timing-function: ease , ease , ease , ease ;
}


.hover-headline:hover .hover-expand {
  display: block;
  margin-left: 20px;
  padding: 20px 0;
}

.hover-headline:hover .hover-visible {
  display: block;
  visibility: visible;
  margin-left: 20px;
  padding: 20px 0;
}

.hover-headline:hover .hover-larger {
  display: block;
  visibility: visible;
  margin-left: 20px;
  margin-bottom: 20px;
  padding: 0;
  font-size: 16px;
  line-height: 24px;
  color: #000; 
  -webkit-transition-property: visibility , font-size , line-height , margin-bottom , color ;
     -moz-transition-property: visibility , font-size , line-height , margin-bottom , color ;
       -o-transition-property: visibility , font-size , line-height , margin-bottom , color ;
          transition-property: visibility , font-size , line-height , margin-bottom , color ;
  -webkit-transition-duration: 2s , 2s , 2s , 2s , 2s ;
     -moz-transition-duration: 2s , 2s , 2s , 2s , 2s ;
       -o-transition-duration: 2s , 2s , 2s , 2s , 2s ;
          transition-duration: 2s , 2s , 2s , 2s , 2s ;
  -webkit-transition-delay: 0.25s , 0.25s , 0.25s , 0.25s , 0.25s ;
     -moz-transition-delay: 0.25s , 0.25s , 0.25s , 0.25s , 0.25s ;
       -o-transition-delay: 0.25s , 0.25s , 0.25s , 0.25s , 0.25s ;
          transition-delay: 0.25s , 0.25s , 0.25s , 0.25s , 0.25s ;
  -webkit-transition-timing-function: ease , ease , ease , ease , ease ;
     -moz-transition-timing-function: ease , ease , ease , ease , ease ;
       -o-transition-timing-function: ease , ease , ease , ease , ease ;
          transition-timing-function: ease , ease , ease , ease , ease ;
}

.hover-headline:hover .hover-larger h2 {
  display: block;
  visibility: visible;
  margin-left: 20px;
  padding: 20px 0;
  font-size: 24px;
  line-height: 44px;
  color: #000; 
  -webkit-transition-property: visibility , font-size , line-height , color ;
     -moz-transition-property: visibility , font-size , line-height , color ;
       -o-transition-property: visibility , font-size , line-height , color ;
          transition-property: visibility , font-size , line-height , color ;
  -webkit-transition-duration: 2s , 2s , 2s , 2s ;
     -moz-transition-duration: 2s , 2s , 2s , 2s ;
       -o-transition-duration: 2s , 2s , 2s , 2s ;
          transition-duration: 2s , 2s , 2s , 2s ;
  -webkit-transition-delay: 0.25s , 0.25s , 0.25s , 0.25s ;
     -moz-transition-delay: 0.25s , 0.25s , 0.25s , 0.25s ;
       -o-transition-delay: 0.25s , 0.25s , 0.25s , 0.25s ;
          transition-delay: 0.25s , 0.25s , 0.25s , 0.25s ;
  -webkit-transition-timing-function: ease , ease , ease , ease ;
     -moz-transition-timing-function: ease , ease , ease , ease ;
       -o-transition-timing-function: ease , ease , ease , ease ;
          transition-timing-function: ease , ease , ease , ease ;
}








/*
  ========================================
  Styles for the page types
  ========================================
*/

.main {
  padding: 10px 80px 10px 80px;
  font-size: 20px;
  line-height: 32px;
}

.main b {
  font-weight: bold;
}



/*
  =============================================
  top4: about, expertise, publications, contact
  =============================================
*/

.top4 {
  padding: 22px 80px 66px 80px;
  font-size: 16px;
  line-height: 24px;
}

.top4 b {
  font-weight: bold;
}




/*
  ========================================
  Styles for various type of text
  ========================================
*/


.titles {
  padding: 20px 0 20px 0;
  font-weight: bold;
}


.titlequestion {
  padding: 20px 0 20px 0;
  font-weight: bold;
  font-style: italic;
}



.byline {
  text-align: right;
}


.motto {
  padding: 0;
  font-weight: bold;
  font-style: italic;
  clear: both;
}


.smaller {
  font-size: 16px;
  line-height: 20px;
}

/*
  ========================================
  After Notes
  ========================================
*/

.afternote {
  font-style: italic;
  padding: 2em 50px 0 50px;
}




/*
  ========================================
  Contact Info Style
  ========================================
*/


.contact-info ul {
  margin: 20px;
  padding: 0;
  text-align: center; 
  font-size: 20px;
  line-height: 44px;
}

.contact-info li {
  display: block;
}

.contact-info b {
  font-weight: bold;
}















/*
  =============================================
   Blocks and containers
  =============================================
*/

.logo {
  text-align: center;
  padding: 0 0 0 0;
} 

.container {
  margin: 0 auto;
  width: 900px;
}

.makecenter {
  text-align: center;
}



/* 
  =============================================
  Attempt to center narrow paragraphs of text
  =============================================
*/

.blockcenter250 {
  margin: 0 auto;
  width: 250px;
}

.blockcenter300 {
  margin: 0 auto;
  width: 300px;
}

.blockcenter350 {
  margin: 0 auto;
  width: 350px;
}

.blockcenter400 {
  margin: 0 auto;
  width: 400px;
}

.blockcenter450 {
  margin: 0 auto;
  width: 450px;
}

.blockcenter500 {
  margin: 0 auto;
  width: 500px;
}

.blockcenter600 {
  margin: 0 auto;
  width: 600px;
}

.blockcenter650 {
  margin: 0 auto;
  width: 650px;
}

.blockcenter900 {
  margin: 0 auto;
  width: 900px;
}

.setoff {
  padding: 20px 0 25px 0;
}





/*
  =============================================
  Two, Three and Four Columns
  =============================================
*/

.fourcolumns ,
.threecolumns ,
.two55columns ,
.two46columns ,
.two64columns {
  clear: both;
  width: 100%;
}

.fourcolumns ,
.threecolumns ,
.two55columns ,
.two46columns ,
.two64columns:before {
  content: "" ;
  display: table ;
}

.fourcolumns ,
.threecolumns ,
.two55columns ,
.two46columns ,
.two64columns:after {
  clear: both ;
  width: 100% ;
}



.two64columns section {
  float: left ;
  width: 60% ;
  vertical-align:top;
}

.two64columns aside {
  float: right ;
  text-align: center;
  width: 40% ;
  vertical-align:top;
}



.two46columns section {
  float: left ;
  width: 40% ;
  vertical-align:top;
}

.two46columns aside {
  float: right ;
  text-align: left;
  width: 60% ;
  vertical-align:top;
}


.two55columns section {
  display: inline-block ;
  margin: 0 1%;
  width: 48% ;
  vertical-align:top;
}

.threecolumns section {
  display: inline-block ;
  margin: 0 1% 0 0;
  width: 32% ;
  vertical-align:top;
}

.fourcolumns section {
  display: inline-block ;
  margin: 0 1% 0 0;
  width: 24% ;
  vertical-align:top;
}



footer {
  clear: both;
}













/*
  =============================================
  Slideshow
  =============================================
*/

.css-slideshow {
   position: relative ;
   max-width: 495px ;
   height: 370px ;
   border: 5px  solid #000 ;
   border-radius: 4px ;
   margin: .5em auto .5em auto ;
}
.css-slideshow figure {
   margin: 0;
   position: absolute;
}
.css-slideshow figcaption {
   position: absolute;
   top: 0;
   color: #fff;
   background: rgba(0,0,0, .3);
   font-size: .8em;
   padding: 8px 12px;
   -webkit-transition: opacity .5s;
      -moz-transition: opacity .5s;
        -o-transition: opacity .5s;
           transition: opacity .5s;
   opacity: 0;
}
.css-slideshow:hover figure figcaption{
   -webkit-transition: opacity .5s;
      -moz-transition: opacity .5s;
        -o-transition: opacity .5s;
           transition: opacity .5s;
   opacity: 1;
}
.css-slideshow figure {
   opacity: 0;
}

@-webkit-keyframes xfade8 {
   0%{
      -webkit-filter: alpha(opacity=100);
      opacity: 1;
      z-index: 2;
   }
   10.5% {
      -webkit-filter: alpha(opacity=100);
      opacity:1;
      z-index: 2;
   }
   12.5%{
      -webkit-filter: alpha(opacity=0);
      opacity: 0;
      z-index: 1;
   }
   98% {
      -webkit-filter: alpha(opacity=0);
      opacity:0;
      z-index: 1;
   }
   100% {
      -webkit-filter: alpha(opacity=100);
      opacity:1;
      z-index: 2;
   }
}

@-moz-keyframes xfade8 {
   0%{
      -moz-filter: alpha(opacity=100);
      opacity: 1;
      z-index: 2;
   }
   10.5% {
      -moz-filter: alpha(opacity=100);
      opacity:1;
      z-index: 2;
   }
   12.5%{
      -moz-filter: alpha(opacity=0);
      opacity: 0;
      z-index: 1;
   }
   98% {
      -moz-filter: alpha(opacity=0);
      opacity:0;
      z-index: 1;
   }
   100% {
      -moz-filter: alpha(opacity=100);
      opacity:1;
      z-index: 2;
   }
}

@-ms-keyframes xfade8 {
   0%{
      -ms-filter: alpha(opacity=100);
      opacity: 1;
      z-index: 2;
   }
   10.5% {
      -ms-filter: alpha(opacity=100);
      opacity:1;
      z-index: 2;
   }
   12.5%{
      -ms-filter: alpha(opacity=0);
      opacity: 0;
      z-index: 1;
   }
   98% {
      -ms-filter: alpha(opacity=0);
      opacity:0;
      z-index: 1;
   }
   100% {
      -ms-filter: alpha(opacity=100);
      opacity:1;
      z-index: 2;
   }
}


@-o-keyframes xfade8 {
   0%{
      -o-filter: alpha(opacity=100);
      opacity: 1;
      z-index: 2;
   }
   10.5% {
      -o-filter: alpha(opacity=100);
      opacity:1;
      z-index: 2;
   }
   12.5%{
      -o-filter: alpha(opacity=0);
      opacity: 0;
      z-index: 1;
   }
   98% {
      -o-filter: alpha(opacity=0);
      opacity:0;
      z-index: 1;
   }
   100% {
      -o-filter: alpha(opacity=100);
      opacity:1;
      z-index: 2;
   }
}

@keyframes xfade8 {
   0%{
      filter: alpha(opacity=100);
      opacity: 1;
      z-index: 2;
   }
   10.5% {
      filter: alpha(opacity=100);
      opacity:1;
      z-index: 2;
   }
   12.5%{
      filter: alpha(opacity=0);
      opacity: 0;
      z-index: 1;
   }
   98% {
      filter: alpha(opacity=0);
      opacity:0;
      z-index: 1;
   }
   100% {
      filter: alpha(opacity=100);
      opacity:1;
      z-index: 2;
   }
}


figure:nth-child(1) {
   -webkit-animation: xfade8 48s 42s infinite;
   -moz-animation: xfade8 48s 42s infinite;
   -ms-animation: xfade8 48s 42s infinite;
   -o-animation: xfade8 48s 42s infinite;
   animation: xfade8 48s 42s infinite;
}
figure:nth-child(2) {
   -webkit-animation: xfade8 48s 36s infinite;
   -moz-animation: xfade8 48s 36s infinite;
   -ms-animation: xfade8 48s 36s infinite;
   -o-animation: xfade8 48s 36s infinite;
   animation: xfade8 48s 36s infinite;
}
figure:nth-child(3) {
   -webkit-animation: xfade8 48s 30s infinite;
   -moz-animation: xfade8 48s 30s infinite;
   -ms-animation: xfade8 48s 30s infinite;
   -o-animation: xfade8 48s 30s infinite;
   animation: xfade8 48s 30s infinite;
}
figure:nth-child(4) {
   -webkit-animation: xfade8 48s 24s infinite;
   -moz-animation: xfade8 48s 24s infinite;
   -ms-animation: xfade8 48s 24s infinite;
   -o-animation: xfade8 48s 24s infinite;
   animation: xfade8 48s 24s infinite;
}
figure:nth-child(5) {
   -webkit-animation: xfade8 48s 18s infinite;
   -moz-animation: xfade8 48s 18s infinite;
   -ms-animation: xfade8 48s 18s infinite;
   -o-animation: xfade8 48s 18s infinite;
   animation: xfade8 48s 18s infinite;
}
figure:nth-child(6) {
   -webkit-animation: xfade8 48s 12s infinite;
   -moz-animation: xfade8 48s 12s infinite;
   -ms-animation: xfade8 48s 12s infinite;
   -o-animation: xfade8 48s 12s infinite;
   animation: xfade8 48s 12s infinite;
}
figure:nth-child(7) {
   -webkit-animation: xfade8 48s 6s infinite;
   -moz-animation: xfade8 48s 6s infinite;
   -ms-animation: xfade8 48s 6s infinite;
   -o-animation: xfade8 48s 6s infinite;
   animation: xfade8 48s 6s infinite;
}
figure:nth-child(8) {
   -webkit-animation: xfade8 48s 0s infinite;
   -moz-animation: xfade8 48s 0s infinite;
   -ms-animation: xfade8 48s 0s infinite;
   -o-animation: xfade8 48s 0s infinite;
   animation: xfade8 48s 0s infinite;
}


/*
  =============================================
  .box - test animations
  =============================================

#box {
  -webkit-animation: NAME-YOUR-ANIMATION 5s infinite;  Safari 4+ 
  -moz-animation:    NAME-YOUR-ANIMATION 5s infinite;  Fx 5+ 
  -ms-animation:     NAME-YOUR-ANIMATION 5s infinite;  
  -o-animation:      NAME-YOUR-ANIMATION 5s infinite;  Opera 12+ 
  animation:         NAME-YOUR-ANIMATION 5s infinite;  IE 10+, Fx 29+ 
}

*/


@-webkit-keyframes rotate {
    from { 
        -webkit-transform-origin: 100% 100%;
        -webkit-transform: rotate(0deg); 
    }
    to { 
        -webkit-transform-origin: 100% 100%;
        -webkit-transform: rotate(360deg); 
    }
}
@keyframes rotate {
    from { 
        transform-origin: 100% 100%;
        transform: rotate(0deg); 
    }
    to { 
        transform-origin: 100% 100%;
        transform: rotate(360deg); 
    }
}



@-webkit-keyframes slide {
    from { 
        -webkit-transform-origin: 100% 100%;
        -webkit-transform: rotate(0deg); 
    }
    to { 
        -webkit-transform-origin: 100% 100%;
        -webkit-transform: rotate(10deg); 
    }
}

@-moz-keyframes slide {
    from { 
        -moz-transform-origin: 100% 100%;
        -moz-transform: rotate(0deg); 
    }
    to { 
        -moz-transform-origin: 100% 100%;
        -moz-transform: rotate(10deg); 
    }
}

@-ms-keyframes slide {
    from { 
        -ms-transform-origin: 100% 100%;
        -ms-transform: rotate(0deg); 
    }
    to { 
        -ms-transform-origin: 100% 100%;
        -ms-transform: rotate(10deg); 
    }
}

@-o-keyframes slide {
    from { 
        -o-transform-origin: 100% 100%;
        -o-transform: rotate(0deg); 
    }
    to { 
        -o-transform-origin: 100% 100%;
        -o-transform: rotate(10deg); 
    }
}

@keyframes slide {
    from { 
        transform-origin: 100% 100%;
        transform: rotate(0deg); 
    }
    to { 
        transform-origin: 100% 100%;
        transform: rotate(10deg); 
    }
}

  /*  -webkit-transform-origin: 100% 100%;
      -webkit-transform: rotate(45deg);
        -ms-transform-origin: 100% 100%;
        -ms-transform: rotate(45deg);
            transform-origin: 100% 100%;
            transform: rotate(45deg); */

.box {
  width: 50px;
  height: 200px;
  background-color: #666;
  position: absolute;
  -webkit-animation: slide 10s linear 0s 2;
     -moz-animation: slide 10s linear 0s 2;
      -ms-animation: slide 10s linear 0s 2;
       -o-animation: slide 10s linear 0s 2;
          animation: slide 10s linear 0s 2;
}