/*
Theme Name: selfmastery-tb
Theme URI: http://underscores.me/
Author: Timothy Blake
Author URI: https://www.timothyblake.com
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: selfmastery
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

selfmastery-tb is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------*/

body{
    overflow-x: hidden;
}

.container{
    max-width: 1440px;
}

a, img, li {
  transition: all .5s ease;
}

.hero{
    height: 750px;
    background:  linear-gradient(180deg, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.20) 100%, rgba(0,0,0,0.40) 100%), url(Images/self-mastery-hero-image.jpg) center;
    background-size: cover;
    background-attachment: fixed;
}

.hero-about{
  height: 90vh;
  background:  linear-gradient(180deg, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.60) 100%, rgba(0,0,0,0.60) 100%), url(https://images.unsplash.com/photo-1533537124921-db3248c9fa93?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80) bottom;
  background-size: cover;
  background-attachment: fixed;
}


.hero-contact{
  height: 90vh;
  background:  linear-gradient(180deg, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.60) 100%, rgba(0,0,0,0.60) 100%), url(https://images.unsplash.com/photo-1596879857570-7b6b9018bcb6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80) bottom;
  background-size: cover;
  background-attachment: fixed;
}





.hero-blog{
  height: 750px;
  background:  linear-gradient(180deg, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.60) 100%, rgba(0,0,0,0.60) 100%), url(https://images.unsplash.com/photo-1501116518234-f32f28802bd1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1248&q=80) bottom;
  background-size: cover;
  background-attachment: fixed;
}



.hero-blog--list{
  height: 750px;
  background:  linear-gradient(180deg, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.60) 100%, rgba(0,0,0,0.60) 100%), url(https://images.unsplash.com/photo-1501116518234-f32f28802bd1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1248&q=80) bottom;
  background-size: cover;
  background-attachment: fixed;
}




.hero h1, .hero-blog h1, .hero-about h1{
    font-size: 70px;
}

h1, h2, h3, h4, h5{
    font-family: 'Playfair Display', serif;
}

.slick-dots {
  bottom: -35px;
}

.slick-prev {
  left: 20px;
  z-index: 9;
}

.slick-next {
right: 50px;
z-index: 9;
}

.slick-next:before, .slick-prev:before {
font-family: slick;
font-size: 50px;
line-height: 1;
opacity: .75;
/* color: #96c3cb; */
color: #242424;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.article-excerpt h3{
    font-size: 32px;

}

.rounded{
    border-radius: 5px!important;
}

.hdr-2{
    font-size: 50px;
}

p,li{
    font-family: 'Roboto Mono', monospace;
}

.primary-button{
  background: #73AFBA;
  padding: 20px 50px;
  display: inline-block;
  text-decoration: none;
  color: #f7f7f9!important;
  border-radius: 5px;

}

.mininav-height{
height: 420px!important;
}

.mininav-height--icon{
position: absolute;
right: 0;
top: 0;
margin: 15px;
}

.featured h3{
font-size: 38px;
}

.hero-photography{
  background:linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.70) 100%, rgba(0,0,0,0.70) 100%), url(Images/phoography-hero.jpg) center;
background-size: cover;
}

.featured-blog{
background:linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.20) 100%, rgba(0,0,0,0.20) 100%), url(https://images.unsplash.com/photo-1500989145603-8e7ef71d639e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1355&q=80) center;
background-size: cover;
}

.featured-photography{
background:linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.20) 100%, rgba(0,0,0,0.20) 100%), url(https://images.unsplash.com/photo-1533537124921-db3248c9fa93?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80) center;
background-size: cover;
}

.featured-content{
background:linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.20) 100%, rgba(0,0,0,0.20) 100%), url(https://images.unsplash.com/photo-1501116518234-f32f28802bd1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1248&q=80) center;
background-size: cover;
}

.bg-gray-panel{
background:#f7f7f9 ;
}

.b-type5__gradient {
background: transparent;
background: -webkit-gradient(linear,left top,left bottom,from(hsla(0,0%,100%,0)),to(#242424));
background: linear-gradient(
180deg
,hsla(0,0%,100%,0),#242424);
}

.post-styling h2,  .post-styling h3, .post-styling ul, .post-styling p  {
max-width: 70%;
margin: 0 auto ;

}

.post-styling h2, .post-styling h3{
padding-bottom: 15px;
}

.post-styling h2{
font-size: 40px;
}

.post-styling img{
padding: 30px 0;

}

.post-styling  p {
padding-bottom: 20px;
}




.related--post{
min-height: 400px;
}

p{
color:#878C91 ;
font-size: 16px;
}


/*CONTACT FORM */

#contact-form{

}


#contact-form input, #contact-form textarea{
BACKGROUND: transparent;
border: white solid 2px;
margin: 30px 0;
padding: 20px;
color: #fff;
}



a,
a:visited,
a:hover,
a:active {
color: inherit;
text-decoration: none;
}
/* h1 {
font-family: 'Pacifico', cursive;
font-weight: 400;
font-size: 3em;
text-align: center;
} */
.outer-menu {
position: fixed;
top: 10vh;
left: 0;
z-index: 1;
}
.outer-menu .checkbox-toggle {
position: absolute;
top: 0;
left: 0;
z-index: 2;
cursor: pointer;
width: 60px;
height: 60px;
opacity: 0;
}
.outer-menu .checkbox-toggle:checked + .hamburger > div {
transform: rotate(135deg);
}
.outer-menu .checkbox-toggle:checked + .hamburger > div:before,
.outer-menu .checkbox-toggle:checked + .hamburger > div:after {
top: 0;
transform: rotate(90deg);
}
.outer-menu .checkbox-toggle:checked + .hamburger > div:after {
opacity: 0;
}
.outer-menu .checkbox-toggle:checked ~ .menu {
pointer-events: auto;
visibility: visible;
}
.outer-menu .checkbox-toggle:checked ~ .menu > div {
transform: scale(1);
transition-duration: 0.75s;
}
.outer-menu .checkbox-toggle:checked ~ .menu > div > div {
opacity: 1;
transition: opacity 0.4s ease 0.4s;
}
.outer-menu .checkbox-toggle:hover + .hamburger {
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}
.outer-menu .checkbox-toggle:checked:hover + .hamburger > div {
transform: rotate(225deg);
}
.outer-menu .hamburger {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 60px;
height: 60px;
padding: 0.5em 1em;
background: rgba(115, 175, 186, 0.75); 
border-radius: 0 0.12em 0.12em 0;
cursor: pointer;
transition: box-shadow 0.4s ease;
-webkit-backface-visibility: hidden;
      backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.outer-menu .hamburger > div {
position: relative;
flex: none;
width: 100%;
height: 2px;
background: #FEFEFE;
transition: all 0.4s ease;
display: flex;
align-items: center;
justify-content: center;
}
.outer-menu .hamburger > div:before,
.outer-menu .hamburger > div:after {
content: '';
position: absolute;
z-index: 1;
top: -10px;
left: 0;
width: 100%;
height: 2px;
background: inherit;
transition: all 0.4s ease;
}
.outer-menu .hamburger > div:after {
top: 10px;
}
.outer-menu .menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
visibility: hidden;
overflow: hidden;
-webkit-backface-visibility: hidden;
      backface-visibility: hidden;
outline: 1px solid transparent;
display: flex;
align-items: center;
justify-content: center;
}
.outer-menu .menu > div {
width: 200vw;
height: 200vw;
color: #FEFEFE;
background: rgb(0 49 99 / 97%);
border-radius: 50%;
transition: all 0.4s ease;
flex: none;
transform: scale(0);
-webkit-backface-visibility: hidden;
      backface-visibility: hidden;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.outer-menu .menu > div > div {
text-align: center;
max-width: 90vw;
max-height: 100vh;
opacity: 0;
transition: opacity 0.4s ease;
overflow-y: auto;
flex: none;
display: flex;
align-items: center;
justify-content: center;
}
.outer-menu .menu > div > div > ul {
list-style: none;
padding: 0 1em;
margin: 0;
display: block;
max-height: 100vh;
}
.outer-menu .menu > div > div > ul > li {
padding: 0;
margin: 1em;
font-size: 24px;
display: block;
}
.outer-menu .menu > div > div > ul > li > a {
position: relative;
display: inline;
cursor: pointer;
transition: color 0.4s ease;
}
.outer-menu .menu > div > div > ul > li > a:hover {
color: #e5e5e5;
}
.outer-menu .menu > div > div > ul > li > a:hover:after {
width: 100%;
}
.outer-menu .menu > div > div > ul > li > a:after {
content: '';
position: absolute;
z-index: 1;
bottom: -0.15em;
left: 0;
width: 0;
height: 2px;
background: #e5e5e5;
transition: width 0.4s ease;
}

/*HAMBURGER MENU END */

/*-------------------------------------
        DOWN ARROW CSS
-------------------------------------*/

.arrow {
position: absolute;
bottom: 100px;
left: 50%;
margin-left: -16px;
}


.bounce {
  -webkit-animation-name: bounce;
  -moz-animation-name: bounce;
  -o-animation-name: bounce;
  animation-name: bounce;
}
.animated{-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;

          animation-iteration-count: infinite;
      -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;

animation-fill-mode:both;
-webkit-animation-duration:2s;
-moz-animation-duration:2s;
-ms-animation-duration:2s;
-o-animation-duration:2s;
animation-duration:2s;
}


@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}	40% {-webkit-transform: translateY(-30px);}
  60% {-webkit-transform: translateY(-15px);}
}

@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
  40% {-moz-transform: translateY(-30px);}
  60% {-moz-transform: translateY(-15px);}
}

@-o-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
  40% {-o-transform: translateY(-30px);}
  60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(-30px);}
  60% {transform: translateY(-15px);}
}

/*------------------------- PAGINATION ------------------------------ */
.navigation {
  margin: 0 auto;
  width: 100%;
  text-align: center;
  display: block;
  padding-top: 20px;
}

.navigation {
  margin: 0 auto;
}

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
  color: #fff;
  text-decoration:none;
  font-size: 14px;
  margin-right: 5px;
}

.navigation li {
  display: inline;
  margin-right: 5px;
}

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
/*    background-color: #6FB7E9;*/
  background-color: #8c9196;
  border-radius: 3px;
  cursor: pointer;
  padding: 12px;
  padding: 0.75rem;
}

.navigation li a:hover,
.navigation li.active a {
  background-color: #73afba;
}

/*------------------------- TABLET ------------------------------ */


@media only (min-width: 768px) and (max-width: 991.98px) { 
body{ display: none;}
}


/*------------------------- MOBILE ------------------------------ */

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

.hero h1, .hero-blog h1, .hero-about h1{font-size: 38px;}
.hdr-2{font-size: 38px;}
.hero-blog--list{height: 600px;}
.arrow { bottom: 30px;}
.hero-blog--list h1{font-size: 40px;}
.hero-contact{min-height: 1200px;}

#blog h2{font-size: 32px;}
.post-styling h2, .post-styling h3, .post-styling ul, .post-styling p{max-width: 85%; }

}