/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Bree+Serif);

body {
    background: #00796B;
    font-size:22px;
    line-height: 32px;
    color: #ffffff;
    word-wrap:break-word !important;
    font-family: 'Open Sans', sans-serif;
    }


h1 {
    font-size: 60px;
    text-align: center;
    color: #FFF;
}   

h3 {
    font-size: 30px;
    text-align: center;
    color: #FFF;
}

h1 {margin-top: 100px;
    text-align:center;
    font-size:60px;
    font-family: 'Bree Serif', 'serif';
    }

p {
    text-align: center;
}

#animated-example {
  margin:100px auto;
  width:400px;
    -webkit-box-shadow: 0 8px 6px -6px black;
       -moz-box-shadow: 0 8px 6px -6px black;
            box-shadow: 0 8px 6px -6px black;
            text-align: center;
            padding: 80px;
  }


.animated { 
  -webkit-animation-name: bounceIn;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: 10;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
  
  animation-name: bounceIn;
  animation-duration: 4s;
  animation-iteration-count: 10;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
} 

/*
 * Animation for webkit
*/
@-webkit-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
    40% {-webkit-transform: translateY(-30px);} 
    60% {-webkit-transform: translateY(-15px);} 
} 
  
@keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
    40% {transform: translateY(-30px);} 
    60% {transform: translateY(-15px);} 
} 
  
/*
 * Adding the animation to our element
*/
.bounce { 
    -webkit-animation-name: bounce; 
    animation-name: bounce; 
}


/*
 * FadeIn animation
*/
  
@-webkit-keyframes fadeIn { 
    0% {opacity: 0;} 
    100% {opacity: 1;} 
} 
@keyframes fadeIn { 
    0% {opacity: 0;} 
    100% {opacity: 1;} 
} 
.fadeIn { 
    -webkit-animation-name: fadeIn; 
    animation-name: fadeIn; 
}
  
/*
 * FadeOut animation
*/
  
@-webkit-keyframes fadeOut { 
    0% {opacity: 1;} 
    100% {opacity: 0;} 
} 
@keyframes fadeOut{ 
    0% {opacity: 1;} 
    100% {opacity: 0;} 
} 
.fadeOut { 
    -webkit-animation-name: fadeOut; 
    animation-name: fadeOut; 
}


/*
 * Pulse animation
*/
  
@-webkit-keyframes pulse { 
    0% { -webkit-transform: scale(1); } 
    50% { -webkit-transform: scale(1.1); } 
    100% { -webkit-transform: scale(1); } 
} 
@keyframes pulse { 
    0% { transform: scale(1); } 
    50% { transform: scale(1.1); } 
    100% { transform: scale(1); } 
} 
.pulse { 
    -webkit-animation-name: pulse; 
    animation-name: pulse; 
}

/*
 * Flash animation
*/
  
@-webkit-keyframes flash { 
    0%, 50%, 100% {opacity: 1;} 
    25%, 75% {opacity: 0;} 
} 
@keyframes flash { 
    0%, 50%, 100% {opacity: 1;} 
    25%, 75% {opacity: 0;} 
} 
.flash { 
    -webkit-animation-name: flash; 
    animation-name: flash; 
}


/*
 * Shake animation
*/
  
@-webkit-keyframes shake { 
    0%, 100% {-webkit-transform: translateX(0);} 
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-30px);} 
    20%, 40%, 60%, 80% {-webkit-transform: translateX(30px);} 
} 
@keyframes shake { 
    0%, 100% {transform: translateX(0);} 
    10%, 30%, 50%, 70%, 90% {transform: translateX(-30px);} 
    20%, 40%, 60%, 80% {transform: translateX(30px);} 
} 
.shake { 
    -webkit-animation-name: shake; 
    animation-name: shake; 
}

@media (min-width: 768px) {
	
	#container {
		max-width: 750px;
		margin: 50px auto;
	}

}