body {

}



p {

}



.container {

    margin-top: 5%;

}



.credo,

.grants,

.contact {

    color: #018;

    font-size: 1.7rem;

}



.title {

    background-color: #F8FFF8;

    padding-bottom: 2%;

    padding-top: 2%;

    margin-bottom: 2%;

}



.subtitle {

    background-color: #60B0E8;

    color: white;

    padding: 0.7rem;

}



.history {

    background-color: darkblue;

    color: white;

    font-size: 1.7rem;

    padding: 0.1rem 0.7rem 0.1rem 0.7rem;

    margin-bottom: 0.5rem;

}



p.centered {

    display: block;

    text-align: center;

}



img.centered {

    display: block;

    margin-left: auto;

    margin-right: auto;

    max-width: 100%;

}



li {

    font-size: 1.2rem;

}



label {

    display: inline-block;

    font: 1em sans-serif;

}



input,

textarea {

    font: 1em sans-serif;

    width: 100%;



    /* To harmonize the look & feel of text field border */

    border: 1px solid #559;

}



input:focus, textarea:focus {

    /* To give a little highlight on active elements */

    border-color: #000;

}



img.dropped {

    align-content: center;

}



@media (min-width: 400px) {

    .right-if-two-col {

        text-align: left;

    }

}



@media (min-width: 550px) {

    .right-if-two-col {

        text-align: right;

    }

}



.tail {

    margin-top: 1rem;

}



/* Image cross-fader: everything below this point.

    

    See http://css3.bradshawenterprises.com/cfimg/ 



    For "n" images You must define:

a=presentation time for one image

b=duration for cross fading

Total animation-duration is of course t=(a+b)*n



animation-delay = t/n or = a+b



Percentage for keyframes:



1    0%

2    a/t*100%

3    (a+b)/t*100% = 1/n*100%

4    100%-(b/t*100%)

5    100%



*/

@-webkit-keyframes shfFadeInOut {

 0% {

   opacity:1;

 }

 12.5% {

   opacity:1;

 }

 25% {

   opacity:0;

 }

 87.5% {

   opacity:0;

 }

 100% {

   opacity:1;

 }

}



@-moz-keyframes shfFadeInOut {

 0% {

   opacity:1;

 }

 12.5% {

   opacity:1;

 }

 25% {

   opacity:0;

 }

 87.5% {

   opacity:0;

 }

 100% {

   opacity:1;

 }

}



@-o-keyframes shfFadeInOut {

 0% {

   opacity:1;

 }

 12.5% {

   opacity:1;

 }

 25% {

   opacity:0;

 }

 87.5% {

   opacity:0;

 }

 100% {

   opacity:1;

 }

}



@keyframes shfFadeInOut {

 0% {

   opacity:1;

 }

 12.5% {

   opacity:1;

 }

 25% {

   opacity:0;

 }

 87.5% {

   opacity:0;

 }

 100% {

   opacity:1;

 }

}



#image-rotate {

  position:relative;

  height:250px;

  width:400px;

  margin:0 auto;

  max-width: 100%;

  max-height: 100%;

}

#image-rotate img {

  position:absolute;

  left:0;

}



#image-rotate img {

  -webkit-animation-name: shfFadeInOut;

  -webkit-animation-timing-function: ease-in-out;

  -webkit-animation-iteration-count: infinite;

  -webkit-animation-duration: 12s;



  -moz-animation-name: shfFadeInOut;

  -moz-animation-timing-function: ease-in-out;

  -moz-animation-iteration-count: infinite;

  -moz-animation-duration: 12s;



  -o-animation-name: shfFadeInOut;

  -o-animation-timing-function: ease-in-out;

  -o-animation-iteration-count: infinite;

  -o-animation-duration: 12s;



  animation-name: shfFadeInOut;

  animation-timing-function: ease-in-out;

  animation-iteration-count: infinite;

  animation-duration: 12s;

}

#image-rotate img:nth-of-type(1) {

  -webkit-animation-delay: 9s;

  -moz-animation-delay: 9s;

  -o-animation-delay: 9s;

  animation-delay: 9s;

}

#image-rotate img:nth-of-type(2) {

  -webkit-animation-delay: 6s;

  -moz-animation-delay: 6s;

  -o-animation-delay: 6s;

  animation-delay: 6s;

}

#image-rotate img:nth-of-type(3) {

  -webkit-animation-delay: 3s;

  -moz-animation-delay: 3s;

  -o-animation-delay: 3s;

  animation-delay: 3s;

}

#image-rotate img:nth-of-type(4) {

  -webkit-animation-delay: 0;

  -moz-animation-delay: 0;

  -o-animation-delay: 0;

  animation-delay: 0;

}