/* COLORS
/ Green = #2ecc71 (background)
/ Text Gray = #5C5266 (text)
/ Red = #e74c3c
/ Grayish blue = #bdc3c7
/ Blue = #3498db (for links)
*/

body {
  margin: 0;
}

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,500,700);

.container{
  font-family: 'Roboto', sans-serif; font-weight: 300;
}

h1 {font-size: 2.2em;}
h2 {font-size: 2em;}
h3 {font-size: 1.8em;}
h4 {font-size: 1.6em;}
h5 {font-size: 1.4em;}
h6 {font-size: 1.2em;}

.nav,
.main,
.header,
.social,
.footer,
{
  margin: auto;
  text-align: center;
}

.hide {
  display: none;
}

.header {
  color: #fff ;
  font-size: 3em;
  font-weight: 700;
  letter-spacing: .312em;
  padding: 3em 0;
  text-align: center;
  text-transform: uppercase;
}

.header p {
  font-size: 26px;
}

.top-bar {
  background-color: #2ecc71;
  color: #fff ;
  font-weight: 500;
  margin: auto;
  text-align: center;
  text-transform: uppercase;
}

.nav, .nav a {
  color: #fff;
  text-align: center;
  text-decoration: none;
}

.navButton {
  background-color: #2ecc71;
  color: #fff;
  display: inline-block;
  padding: 1.6em 1.6em;
  position: relative;
  text-align: left;
  text-decoration: none;
  transition-property: background-color, color;
  transition-duration: .6s;
  transition-timing-function: ease-out;
 }

.navButton:hover {
  color: #060; /*#34495e*/
  background-color:#27ae60;
  position: relative;
  text-shadow:0px 1px #2ecc71;
  transition-property: background-color, color;
  transition-duration: .6s;
  transition-timing-function: ease-out;
}

.fadeIn {
  animation-name: fadeIn;
  -webkit-animation-name: fadeIn;
  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  visibility: visible !important;
}

.content {
  color: #5C5266;
  font-family: 'Roboto', sans-serif; font-weight: 300;
  line-height: normal; /*30px*/
  margin: auto;
  max-width: 620px;
  padding: 2.6em; /*35px*/
  text-align: center;
  width: auto;
}

.post .sub-heading {
  text-align: left;
}

.main {
  color: #5C5266;
  font-size: 2.2em;
  text-align: center;
}

.comp {
  background: none;
  color: #3498db;
  text-decoration: none;
  -webkit-transition: background 0.4s ease;
  -moz-transition: background 0.4s ease;
  -ms-transition: background 0.4s ease;
  -o-transition: background 0.4s ease;
  transition: background 0.4s ease;
  padding: 0 .1em;
}

.comp:hover {
  background: #2ecc71;
  color: #fff;
}

.main > p:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.main > p {
  margin: auto;
  margin-bottom: 1em;
}

.important-text {
  border-bottom: 1px dashed #999;
  color: #2ecc71;
}

.post {
  border-bottom: 1px dotted rgb(227, 227, 227);
}

.post p {
  line-height: 30px;
  margin-bottom: 24px;
  text-align: left;
}

.post a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid #ccc;
}

.post a:hover {
  border-bottom: 1px solid #2ecc71;
  color: #2ecc71;
}

.post .quote {
  font-size: 160%;
  line-height: 400%;
  text-align: center;
}

.post .end-quote {
  font-size: 160%;
  line-height: 200%;
  text-align: center;
}

.post .annotation {
  font-size: .6em !important;
}

.social {
  margin-top: 2em;
}

.social > p {
  color: #5C5266;
  font-size: 1.4em;
  text-align: center;
  margin-bottom: 1em;
}

.social > a {
  color: #3498db;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  margin: auto;
  margin: 1.4em;
}

.social > a:hover {
  border-bottom: dotted 1px #2ecc71;
  color: #2ecc71;
}

.social > a:visited {
  border-bottom: dotted 1px #e74c3c;
  color: #e74c3c;
}

.footer {
  border-top: 1px solid rgb(227, 227, 227);
  color: #5C5266;
  line-height: 30px;
  margin: auto;
  max-width: 620px;
  padding: 1.4em;
  text-align: center;
  width: auto;
}

.heart {
  color: #e74c3c;
  font-size: 1.2em;
  margin: 3px;
}