@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

a{font-family: 'Roboto Condensed', sans-serif; font-size: 18pt;}

h1 {
  font-family: 'Roboto Condensed', sans-serif;
  margin: 0;
  padding: 0 0 15px 0;
}

h2 {
  font-family: 'Roboto Condensed', sans-serif;
  margin: 0;
  padding: 0 0 15px 0;
  text-align: center;
  text-decoration: bold;
}

@media (min-width: 350px) {
  h1 {font-size: 3.25em;}
  img{height: 40px;}
  p{font-size: 10px;}
  h2{font-size: 17px;}
}

@media (min-width: 400px) {
  h1 {font-size: 3.25em;}
  img{height: 45px;}
  p{font-size: 15px;}
  h2{font-size: 17px;}
}
@media (min-width: 440px) {
   h1 {font-size: 3.5em;}
  img {height: 100px;}
  p{font-size: 16px;}
  h2{font-size: 18px;}
}
@media (min-width: 500px) {
   h1 {font-size: 3.75em;}
  img{height: 125px;}
  p{font-size: 16px;}
  h2{font-size: 19px;}
}
@media (min-width: 630px) {
   h1 {font-size: 5em;}
  img{height: 150px;}
  p{font-size: 20px;}
  h2{font-size: 24px;}
}
@media (min-width: 768px) {
   h1 {
    font-size: 5em;
    padding-bottom: 30px;
  }
  img{height: 175px;}
  p{font-size: 22px;}
  h2{font-size: 26px;}
}
@media (min-width: 1200px) {
  h1 {font-size: 8em;}
  img{height: 250px;}
  p{font-size: 24px;}
  h2{font-size: 28px;}
}

p{
  
  font-family: 'Roboto Condensed', sans-serif;
}

h3{
  text-align: center;
  font-size: 30px;
  font-family: 'Roboto Condensed', sans-serif;
}

footer{
  padding: 20px;
  background-color: #e0e0e0;
  font-family: 'Roboto Condensed', sans-serif;
}

@keyframes dimImg{
  from {opacity: 1;
  filter: alpha(opacity=100);}
  to {opacity: 0.4;
  filter: alpha(opacity=50);}
}

@keyframes revealText{
  from {opacity: 0.4;
  filter: alpha(opacity=50);}
  to {opacity: 1;
  filter: alpha(opacity=100);}
}

.pictureContainer{
  float: right; 
  position: relative;
}

.pictureContainer a{
  opacity: 0;
  position: absolute;
  text-align: center;
  top: 5px;
  left: 5px;
}


.pictureContainer:hover img{
 
  animation-name: dimImg;
  animation-duration: 1s;
  opacity: 0.4;
  filter: alpha(opacity=50);
}

.pictureContainer:hover a{
  animation-name: revealText;
  animation-duration: 1s;
  opacity: 1;
}

.canvasText{
  margin: 0px;
  display: inline-block;

  text-align: left;
}

#c1, #c2, #c3{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.button{
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
  background-color: white;
  color: black;
  border: 2px solid #555555;
  float: right;
}

.button:hover {
  background-color: #555555;
  color: white;
}