* 
{
  box-sizing: border-box;
}

#slick-slide-control00 
{
  visibility: hidden;
}

html, body 
{
  height: 100%;
	padding: 0px;
	margin: 0px;
	background: #C6E2E9;
  font-family: 'Lora', serif;
}

h1, h2, h3, h4, h5, h6
{
  font-family: 'Bebas Neue', serif;
  color: #444;
  margin: 5px;
}

a
{
  text-decoration: none;
  color: inherit;
}

.banner-image 
{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  height: auto;
}

.download
{
    text-decoration: underline blue;
    color: blue;
}

.centered
{
    display: inline-block; 
    align-items: center; 
    justify-content: center;
    text-align: center;
    margin: auto;
    padding-top: 40%;
}

.bottom 
{
  content:'';
  display: block;
  clear: both;
  position: relative;
  margin-bottom: 20px;
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  float: left;
  margin: 10px;
  overflow: hidden;
  display: inline-block;
  align-content: center;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card:hover .flip-card-alt {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  transform: rotateX(0deg);
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: pink;
  color: red;
}

/* Style the back side */
.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

.flip-card-alt {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  transform: rotateX(0deg);
  background-color: lightgreen;
  color: black;
}

.clearfix:after
{
  content:'';
  display: block;
  clear: both;
}

.btn 
{
  padding: .5rem 1rem;
  background: whitesmoke;
  color: #696969;
  border: 1px solid transparent;
  border-radius: .25em;
  font-size: 1.08em;
  font-family: 'Lora', serif;
}

.btn-big 
{
  padding: .7rem 1.3rem;
  line-height: 1.3rem;
}

.btn:hover
{
  color: black !important;
  background: #008A8F !important;
}

.comment-section-wrapper
{
  padding: 20px 50px;
  font-size: 1.1em;
  border-radius: 5px;
  padding-top: 10px;
  width: 67%;
  float: left;
}

.comment-textarea
{
  width: 100%;
  height: 50px;
  float: left;
  margin-bottom: 7px;
}

.comment-box
{
  border: solid 3px lightgray;
  background: whitesmoke;
  margin: 5px;
  text-indent: 5px;
}


.text-input
{
  padding: .7rem 1rem;
  display: block;
  width: 100%;
  border-radius: 5px;
  border: 1px solid #e0e0e0;
  outline: none;
  color: #444;
  line-height: 1.5rem;
  font-family: 'Lora', serif;
  font-size: 1.2em;
}

.msg 
{
  width: 100%;
  margin: 5px auto;
  padding: 8px;
  border-radius: 5px;
  list-style: none;
}

.success
{
  color: darkgreen;
  border: 1px solid green;
  background: lightgreen;
}

.error 
{
  color: darkred;
  border: 1px solid red;
  background: pink;
}

/* NAVBAR */
header 
{
	background: #008489;
	height: 70px;
}

header * 
{
	color: white;
}

header 
{
  position: relative;
}

header .logo 
{
	float: left;
  height: inherit;
  margin-left: 2em;
}

header .logo-text 
{
  margin: 8px;
  font-family: 'Bebas Neue';
}

.logo-text span
{
  color: orange;
  text-decoration: none;
}

header .logo-text a
{
  text-decoration: none;
}

header ul 
{
	float: right;
  margin: 0px;
  padding: 0px;
  list-style: none;
}

header ul li 
{
  float: left;
  position: relative;
}

header ul li a
{
  display: block;
  padding: 23px;
  font-size: 1.1em;
  text-decoration: none;
}

header ul li a:hover 
{
  background: #006064;
  transition: 0.5s;
}

header ul li ul 
{
  position: absolute;
  top: 69px;
  right: 0px;
  width: 180px;
  display: none;
  z-index: 800;
}

header ul li:hover ul
{
  display: block;
}

header ul li ul li 
{
  width: 100%;
} 

header ul li ul li ul:hover
{
  display: block;
}

header ul li ul li a 
{
  padding: 10px;
  background: white;
  color: #444;
}

header ul li ul li a.logout 
{
  color: red;
} 

header ul li ul li a:hover 
{
  background: #006064;
}

header .menu-toggle 
{
	display: none;
}

i .fa-chevron-down 
{
  font-size: .8em;
}

.page-wrapper 
{
  min-height: 100%;
}

.page-wrapper a:hover
{
  color: #006064;
}

/* POST SLIDER */

.post-slider 
{
  position: relative;
}

.post-slider .slider-title 
{
  text-align: center;
  margin: 30px auto;
}

.post-slider .next 
{
  position: absolute;
  top: 50%;
  right: 30px;
  font-size: 2em;
  color: #006669;
  cursor: pointer;
}

.post-slider .prev 
{
  position: absolute;
  top: 50%;
  left: 30px;
  font-size: 2em;
  color: #006669;
  cursor: pointer;
}

.post-slider .post-wrapper 
{
  padding: 0px 10px;
  width: 84%;
  height: 350px;
  margin: 0px auto;
  overflow: hidden;
}

.post-slider .post-wrapper .post
{
  margin: 0px 10px;
  height: 330px;
  width: 300px;
  display: inline-block;
  background: #6DB3C5;
  border-radius: 5px;
  box-shadow: 1rem 1rem 1rem -1rem #a0a0a033;
  border: 1px solid #1D4049;
}

.post-slider .post-wrapper .post .post-info
{
  height: 130px;
  padding: 5px 5px;
}

.post-sub
{
  font-size: 0.9em;
  font-family: Arial, sans-serif;
  padding-left: 3px;
}

.post-slider .post-wrapper .post .slider-image
{
  width: 100%;
  height: 200px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

/* CONTENT */
.content 
{
  width: 90%;
  margin: 30px auto 30px;
}

.content .main-content 
{
  width: 70%;
  float: left;
}

.content .main-content.about 
{
  width: 100%;
  border: 8px solid #408DA0;
  text-align: center;
  background: #50A4B9;
  padding: 30px;
  align-content: center;

} 

.content .main-content .cards
{
  padding-bottom: 10px;
  width: 100%;
  overflow: auto;
  display: inline-block;
  
} 

.content .main-content.single
{
  background: whitesmoke;
  padding: 20px 50px;
  font-size: 1.1em;
  border-radius: 5px;
}

.content .main-content .recent-post-title
{
  margin: 20px;
}

.content .main-content.single .post-title 
{
  text-align: center;
  margin: 40px;
}

.content .main-content .post
{
  position: relative;
  width: 95%;
  height: 270px;
  margin: 20px auto;
  border-radius: 5px;
  background: #6DB3C5;
  border: 1px solid #1D4049;
}

.content .popular .post 
{
  border-top: 1px solid green;
  margin-top: 10px;
  padding-top: 10px;
}

.content .popular .post img 
{
  height: 60px;
  width: 60px;
  float: left;
  margin-right: 10px;
}

.content .main-content .post .read-more
{
  position: absolute;
  bottom: 10px;
  right: 10px;
  border: 1px solid #008489;
  border-radius: 0px;
  color: #008489;
}

.content .main-content .post .read-more:hover
{
  background: #008489;
  color: white !important;
  transition: .25s;
}

.content .main-content .post .post-preview
{
  padding: 10px;
  width: 60%;
  float: right;

}

.content .main-content .post .post-image
{
  width: 40%;
  height: 100%;
  float: left;
  border: 2px solid #1D4049;
}

.content .sidebar
{
  width: 30%;
  float: right;
  
}

.content .sidebar.single
{
  padding: 0px 10px;
}

.insta-feed
{
  display: block;
  margin-bottom: 5px;
}

.content .sidebar .section
{
  background: #FF7547;
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.content .sidebar .section.search
{
  margin-top: 80px;
  border: 2px solid #1D4049;
}

.content .sidebar .section .section-title
{
  margin: 10px 0px 10px 0px;
}

.content .sidebar .section.topics
{
  border: 2px solid #1D4049;
}

.content .sidebar .section.topics ul
{
  margin: 0px;
  padding: 0px;
  list-style: none;
  border-top: 1px solid #e0e0e0;
}

.content .sidebar .section.topics ul li a 
{
  display: block;
  padding: 15px 0px 15px 0px;
  border-bottom: 1px solid #e0e0e0;
  transition: all 0.3s;
}

.content .sidebar .section.topics ul li a:hover
{
  padding-left: 15px;
  transition: all 0.3s;
}

/* AUTH PAGES */
.auth-content
{
  width: 45%;
  margin: 50px auto;
  padding: 20px;
  background: white;
  border-radius: 5px;
}

.auth-content .form-title
{
  text-align: center;
}

.auth-content form div
{
  margin-bottom: 10px;

}

.auth-content form p
{
  text-align: center;
}

.auth-content form p a 
{
  text-decoration: underline;
}


/* FOOTER */
.footer 
{
  background: #004F52;
  color: #d3d3d3;
  height:400px;
  position: relative;
  bottom: 0px;
}

.footer .footer-content
{
  height: 370px;
  display: flex;
}

.footer .footer-content .footer-section
{
  flex: 1;
  padding: 25px;
}

.footer .footer-content h1, 
.footer .footer-content h2 
{
  color: white;
}

.footer .footer-content .about .contact span 
{
  display: block;
  font-size: 1.1em;
  margin-bottom: 8px;
}

.footer .footer-content .about .socials a
{
  border: 1px solid gray;
  width: 45px;
  height: 41px;
  padding-top: 5px;
  margin-right: 5px;
  text-align: center;
  display: inline-block;
  font-size: 1.3em;
  border-radius: 5px;
  transition: all .7s;
}

.footer .footer-content .about .socials a:hover
{
  border: 1px solid white;
  color: white;
  transition: all .7s;
}

.footer .footer-content .contact-form .contact-input
{
  background: #C6E2E9;
  color: #bebdbd;
  margin-bottom: 10px;
  line-height: 1.5em;
  padding: .9rem 1.4rem;
  border: none;
}

.footer .footer-content .contact-form .contact-input:focus
{
  background: #8AC2D0;
}

.footer .footer-content .contact-form .contact-btn
{
  float: right;
  font-size: 1.1em;
  font-family: 'Lora', Serif;
}

.footer .footer-bottom
{
  background: #003B3D;
  color: #D2C6CA;
  height: 30px;
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0px;
  left: 0px;
  padding-top: 5px;
}



/* MEDIA QUERIES */
@media only screen and (max-width: 860px) 
{

    header ul 
    {
      width: 100%;
      background: #0E94A0;
      max-height: 0px;
      overflow: hidden;
    }

    .showing
    {
      max-height: 100em;
    }

    header ul li 
    {
      width: 100%;
    }

    header ul li ul 
    {
      position: static;
      width: 100%;
      background: inherit;
    } 

    header ul li ul li a 
    {
      padding: 10px;
      padding-left: 50px;
      background: #0E94A0;
      color: white;
    }

    header ul li ul li a.logout 
    {
      padding-left: 50px;
      background: #0E94A0;
      color: red;
    } 

    header ul li ul li a.logout:hover
    {
      background: #006064;
    }

    header .menu-toggle 
    {
      position: absolute;
      display: block;
      right: 20px;
      top: 20px;
      font-size: 1.9em;
    }

    header .logo 
    {
      margin-left: 2em;
    }

    .post-slider 
    {
      position: initial;
    }

  }

  @media only screen and (max-width: 715px) 
  {

    .content 
    {
      width: 100%;
    }

    .auth-content
    {
      width: 60%;
    }

  }


  @media only screen and (max-width: 643px) 
  {

    .auth-content
    {
      width: 80%;
    }

    .main-content-wrapper
    {
      padding: 10px;
    }

    .content .main-content.single
    {
      padding: 10px 20px;
    }

    .content .main-content
    {
      width: 100%;
      padding: 10px;
    }

    .content .main-content .post
    {
      width: 100%;
    }

    .content .sidebar
    {
      width: 100%;
      padding: 10px;
    }

    .content .sidebar .section.search
    {
      margin-top: 30px;
    }

     .footer 
    {
      height: auto;
    }

    .footer .footer-content 
    {
      height: auto;
      flex-direction: column;
    }

    .footer .footer-content .contact-form
    {
      padding-bottom: 90px;
    }

    .footer .footer-content .contact-form .contact-btn
    {
      width: 100%;
    }

  }

  @media only screen and (max-width: 494px)
  {

     .content .main-content .post
    {
      height: auto;

    }

    .content .main-content .post .post-image
    {
      width: 100%;
      height: auto;
    }

    .content .main-content .post .post-preview
    {
      width: 100%;
    }

    .content .main-content .post .read-more
    {
      position: static;
      display: block;
      width: 100%;
      text-align: center;
    }

    .post-slider .next
    {
      right: 10px;
    }

    .post-slider .prev
    {
      left: 10px;
    }

    .auth-content
    {
      width: 90%;
    }

  }