@import "http://fonts.googleapis.com/css?family=Great+Vibes";
@import "http://fonts.googleapis.com/css?family=Playfair+Display";

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  height: 100%;
  overflow: hidden
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  font-family: Playfair Display;
}

.padding-bottom{
  padding-bottom: 80px;
}


/*NAV links*/
.social-link{
  margin-right: 12px;
}

.search-bar{
  margin-right: 14px;
}

.btn-neja-light{
  background-color: #D8F3DC;
  border-color: #D8F3DC;
}

.btn-neja{
  background-color: #95D5B2;
  color:#000;
}

.btn-neja-yellow{
  background-color: wheat;
  color:#000;
}


.btn-neja-dark{
  background-color: #2D6B43;
  color:#fff;
}


.greateVibes{
  font-family: Great Vibes;
  font-size: 40px;
}

nav a {
  font-family: Great Vibes;
  color: white;
  font-weight: 700;
  font-size: 35px;
}

.navbar-brand {
  font-size: 45px;
}
.navbar-brand:active, .navbar-brand:hover {
  color: #507158;
}

nav{
  transition-property: background-color;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

.nav-link:active, .nav-link:hover{
  color: #507158;
}

/*HEADER STUFF*/
h1 {
  font-size: 250%;
  font-family: Playfair Display;
}

.header h1 {
  margin-top: -20px
}
.header {
  text-align: center;
}

.header,
nav {
  font-size: 175%;
  color: #fff;
  text-shadow: 0 5px 5px #000;
}

.header {
  height: 45%;
  /*max-height: 60%;*/
  margin-bottom:26%; /* TODO FROM 18%*/
}

.logo{
  height: 605px;
  position:absolute;
  left: 0;
  right: 0;
  margin: auto;
  transform: translateX(-155px) translateY(-50px);
  /* bottom:-10px; */
}

.logo-circle {
  width: 490px;
  height: 490px;
  /* border: 25px solid #fff; */
  position:absolute;
  background-color: white;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 50%;
}

@media (max-width: 1230px) {
  .logo {
    height: 348px;
    transform: translateX(-74px) translateY(-26px);
  }
  .logo-circle {
    width: 310px;
    height: 310px;
    transform: translateY(106px);
  }
}

@media (max-width: 716px) {
  .logo {
    height: 306px;
    transform: translateX(-74px) translateY(-26px);
  }
  .logo-circle {
    width: 250px;
height: 250px;
transform: translateY(143px);
  }
}

#arrow
{
  /*position:absolute;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1000;
  bottom:-455px;*/
  margin-top:480px;
  color:#000;
  cursor: pointer;
}

.header-content {
  padding-top:15%;
}
/* MAIN STUFF */


p {
  font-size: 1.2em;
  line-height: 150%;
  color: #333
}

section {
  position: relative;
  /*padding: 20% 10%;*/
  width: 100%;
  box-sizing: border-box;
  background: 50% 50%/cover
}


/* FOR parallax scrolling*/
#title, .transparent-bg {
  background-image: url(/img/bg3.jpeg);
  background-attachment: fixed;
}


.fade-out {
  background-image : linear-gradient(to bottom, 
                    rgba(255,255,255, 0), 
                    rgba(255,255,255, 0.95) 95%);
}

.featured-posts {
  margin:30px;/*
  border:3px solid black;
  background-color: #fff;
  color:#000;*/
  margin-bottom: 200px; 
}

/* for margin around image in featured post */
.featured-posts img {
  margin: auto;
  width: 90%;
  padding-top: 5%;
}



/*  BLOG STUFF*/

.heading-separator {
   width: 100%; 
   text-align: center; 
   border-bottom: 5px solid #fff; 
   line-height: 0.1em;
   margin: 10px 0 20px; 
} 

.heading-separator span { 
    background:#fff; 
    padding:0 10px; 
}

.blog-header {
  min-height: 15%;
  margin-top:10%;
  background-color: white;

  /* For angled edge after header*/
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 55%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 55%);
}

.blog-title {
  font-size: 130px;
  color:#507158;
}

.blog-list {
  padding:20px 0 20px 0;
  /*padding:20% 0 60% 0;
  min-height:100%;*/
}

.blog-post {
  margin-bottom:20px;
  height:450px;
}

.blog-post:nth-of-type(even) {
  display:flex;
  flex-direction: row;
}

.blog-post:nth-of-type(odd) {
  display:flex;
  flex-direction: row-reverse;
}

.blog-post img {
  width:100%;
}

.flexed-div {
  display:flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.card-title{
  width:100%;
  background-color: wheat;
}
.cover-photo {
  height: 100%;
  width: 100%;
  background-repeat: no-repeat !important;
}
.blog-details {
  min-width: 30%;
  max-width: 50%;
}
/*  ARTICLE STUFF*/

.article-display {
  text-align: center;
  font-size: 175%;
  color: #fff;
  text-shadow: 0 5px 5px #000;
}

.article-header img {
  height:500px;
}

.centered-title {
  font-size: 80px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.header-image-settings-right {
  position: absolute;
  bottom: 8px;
  right: 25%;
}

.header-image-settings-left {
  position: absolute;
  bottom: 8px;
  left: 25%;
}

.article-content {
  padding-bottom:140px;
}


/* Footer stuff */
/* footer{
  background:wheat;
} */

.spacer{
  height:150px;
}

.rotated-div {
    transform: translateY(-230px);
    margin-bottom: -430px;
}


.footer-logo{
  left:60%;
  top:-35%;
  height:333px;
}

.center-align {
  margin: auto;
  width: 100%;
}

.copyright{
  margin-top:20px;
  font-size: 11px;
  text-align: center;
}