@import url(https://fonts.googleapis.com/css?family=Lustria|Amatic+SC|Open+Sans|Roboto:300|Lato|Yanone+Kaffeesatz);
/*From http://www.localfont.com/ */
/* @font-face {
  font-family: 'Lustria';
  font-weight: 400;
  font-style: normal;
  src: url('fonts/Lustria-regular/Lustria-regular.eot');
  src: url('fonts/Lustria-regular/Lustria-regular.eot?#iefix') format('embedded-opentype'),
       local('Lustria'),
       local('Lustria-regular'),
       url('fonts/Lustria-regular/Lustria-regular.woff2') format('woff2'),
       url('fonts/Lustria-regular/Lustria-regular.woff') format('woff'),
       url('fonts/Lustria-regular/Lustria-regular.ttf') format('truetype'),
       url('fonts/Lustria-regular/Lustria-regular.svg#Lustria') format('svg');
}

@font-face {
  font-family: 'Amatic SC';
  font-weight: 400;
  font-style: normal;
  src: url('fonts/Amatic-SC-regular/Amatic-SC-regular.eot');
  src: url('fonts/Amatic-SC-regular/Amatic-SC-regular.eot?#iefix') format('embedded-opentype'),
       local('Amatic SC Regular'),
       local('Amatic-SC-regular'),
       url('fonts/Amatic-SC-regular/Amatic-SC-regular.woff2') format('woff2'),
       url('fonts/Amatic-SC-regular/Amatic-SC-regular.woff') format('woff'),
       url('fonts/Amatic-SC-regular/Amatic-SC-regular.ttf') format('truetype'),
       url('fonts/Amatic-SC-regular/Amatic-SC-regular.svg#AmaticSC') format('svg');
} */

/* Good choices for title: */

/*Amatic SC , 400%*/
/*Yeseva+One, 300%*/
/*Boogaloo, 400% (not so good)*/

/* Good choices for text: */
/* Lustria */
body {
  width: 700px;
  margin: auto;
  margin-top: 0px;
  /* font-family:georgia,serif; */
  font-family: 'Lustria', serif;
  font-weight: Normal;
  color: #4b4b4b;
  font-size: 95%;
  text-align: justify;
  line-height: 170%;

}

.alignleft {
  float: left;
}

.alignright {
  float: right;
}


h1 {
  font-family: "Amatic SC", cursive;
  font-size: 400%;
  text-align: center;
  color: #ae0029;
  line-height: 1;
  display: block;
  font-weight: bold
}

#Yanone {
  font-family: 'Yanone Kaffeesatz', sans-serif;
  font-size: 300%;
  line-height: 1.2
}

h2 {
  font-size: 130%;
  text-align: center
}

h3 {
  font-size: 100%;
  text-align: left;
  color: #4b4b4b
}

h6 {
  font-size: 60%;
  text-align: center
}

a:link {
  color: #4b4b4b;
}

/* unvisited link */
a:visited {
  color: #4b4b4b;
}

/* visited link */
a:hover {
  color: #ae0029;
}

/* mouse over link */

text.modelNames {
  font-size: 100%;
  font-weight: Bold;
  /* color:#ae0029; */
  /* text-decoration: underline */
}


text.gray {
  /* gray text */
  color: #969696;
}

text.programVersion {
  font-size: 85%;
}

text.creditsTitles {
  font-size: 85%;
  line-height: 150%;
}

text.code {
  font-size: 100%;
  font-family: Consolas, courier;
  /* font-family:courier; */
  /* color:#355087; */
  font-weight: Normal;
}

text.programName {
  font-size: 100%;
  font-family: 'Open Sans', sans-serif;
  /* font-family:courier; */
  /* color:#355087; */
  font-weight: Normal;
}


img.links {
  /* vertical-align: middle; */
  vertical-align: -15%;
}

#end {
  line-height: 120%;
  font-size: 100%;
  color: #969696;
  text-align: center;
}

div.textBox {
  font-size: 100%;
  line-height: 170%;
  background-color: #f2f2f2;
  width: 600px;
  border: 0px #4b4b4b;
  padding: 30px;
  margin: auto;
}

div.textBoxWarning {
  font-size: 100%;
  line-height: 170%;
  background-color: #ffe5e5;
  width: 600px;
  border: 3px solid #ae0029;
  padding: 30px;
  margin: auto;
}

div.extraComments {
  vertical-align: middle;
  width: 100%;
  border: 1px solid gray;
}

text.ecTitle {
  font-size: 110%;
  font-weight: Bold;
}


.aligncenter {
  text-align: center;
}



/* ++++++++++++++++++++++++++++++++++++++++ NAVIGATION BAR ++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++ NAVIGATION BAR ++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++ NAVIGATION BAR ++++++++++++++++++++++++++++++++++++++++ */

.topnav {
  margin-left: -50px;

  /*min-width: 100%; */
  overflow: hidden;
  display: flex;
  background-color: rgb(255, 255, 255);
  font-family: Lustria, Arial, Helvetica, sans-serif;
  font-weight: normal;
  text-align: center;
  width: 800px;
  border: 0px;
  border-bottom: 0px;
  border-top: 0px;
  border-style: solid;
  border-color: #d6d6d644;
}

.topnav a {
  flex-grow: 1;
  float: left;
  color: #2e2e2e;
  text-align: center;
  padding: 8px 16px;
  text-decoration: none;
  font-size: 110%;
}

.topnav a:hover {
  background-color: #4b4b4b;
  color: white;
}

.topnav a.active {
  background-color: #ae0029;
  color: white;
}



















html {
  overflow-y: scroll;
  overflow-x: hidden;
}




.w1050 {
  left: 175px;
  margin-left: -175px;
}

.full-width {
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: calc(100vw - 10px);
  position: relative;
  right: 50%;
  width: 100vw;
}


/* ++++++++++++++++++++++++++++++++++++++++ TABLES ++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++ TABLES ++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++ TABLES ++++++++++++++++++++++++++++++++++++++++ */

.red-gray-table {
  font-family: 'Lustria', serif;
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}

.red-gray-table td,
.red-gray-table th {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

.red-gray-table caption {
  /* background-color: #ae0029; */
  font-weight: bold;
  color: #ae0029;
}

.red-gray-table tr:nth-child(even) {
  background-color: #f2f2f2;
}

.red-gray-table tr:hover {
  background-color: #ddd;
}

.red-gray-table th {
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: #ae0029;
  color: white;
}

.card {
  /*
  margin-right:   -40px;
   margin-left:   -40px;
  */
  margin-right: -0px;
  margin-left: -0px;
  padding: 30px;


  border-color: #d6d6d69a;
  cursor: pointer;
  border-radius: 0px;
  border-width: 5px;
  border-style: solid;
  box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05);

  background-color: rgba(0, 0, 0, 0.05);
  border-width: 0px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, .05), 0 0 6px rgba(0, 0, 0, .05);
  box-shadow: 0 0 25px rgba(0, 0, 0, .15);
  margin-bottom: 20px;
  margin-top: 30px;
}

.card:hover {
  padding-left: 25px;
  padding-right: 25px;
  border-width: 5px;
  border-top: 0px;
  border-bottom: 0px;
  border-style: solid;
  border-color: #ae0029;


  /*
   background-color: #ae00291c;
  background-color: #4b4b4b;
  margin:-0px;
  color:white;
  */

}

/* ++++++++++++++++++++++++++++++++++++++++ Rotate image animation ++++++++++++++++++++++++++++++++++++++++ */

.rotateImageAnimation{

  position: relative;
  text-align: center;
  -webkit-transition: -webkit-transform 0.8s;
  
  }
  
  .rotateImageAnimation:hover{
    -webkit-transform: rotate(-180deg) translateZ(0);
    }


/* ++++++++++++++++++++++++++++++++++++++++ Swap images (for SimTeEx) ++++++++++++++++++++++++++++++++++++++++ */



.image-swap-container {
  position: relative;
  margin: auto;
  width: 400px;

}

.hover-image:hover {
  opacity: 1;
}

.hover-image {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-out;
}