/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# SCSS Variables
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
	## Posts and pages
	## Asides
	## Comments
    ## Footer
# Media
	## Captions
	## Galleries
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# SCSS Variables
--------------------------------------------------------------*/
$primary: #2196F3;
$primary-dark: #1976D2;
$primary-light: #BBDEFB;
$white: #ffffff;
$accent: #8BC34A;
$primary-text: #212121;
$secondary-text: #727272;
$divider: #B6B6B6;
$light-gray: #F5F5F5;

$h1: 34px;
$h2: 24px;
$h3: 20px;
$h4: 16px;
$h5: 12px;
$p: 14px;

$fw1: 300;
$fw2: 400;
$fw3: 600;
/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6, p {
    color: $primary-text;
}
h1 {
    font-size: $h1;
}
h2 {
    color: $primary-text;
    font-size: $h2;
}
h3 {
    font-size: $h3;
}
h4 {
    font-size: $h4;
}
h5 {
    font-size: $h5;
}
p {
    font-size: $p;
}
@media (max-width: 767px) {
    h1 {
        font-size: $h2;
    }
    h2 {
        font-size: $h3;
    }
    h3 {
        font-size: $h4;
    }
}
/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
a {
    transition: all .2s ease-in-out;
}
.row {
    margin-bottom: 50px;
}
.card {
    width: 100%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    -o-box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    -ms-box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.mdi {
    font-size: 26px;
}
.form-group.is-focused .form-control {
      border: 0;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#2196f3), to(#2196f3)), -webkit-gradient(linear, left top, left bottom, from(#D2D2D2), to(#D2D2D2));
      background-image: -webkit-linear-gradient(#2196f3, #2196f3), -webkit-linear-gradient(#D2D2D2, #D2D2D2);
      background-image: -o-linear-gradient(#2196f3, #2196f3), -o-linear-gradient(#D2D2D2, #D2D2D2);
      background-image: linear-gradient(#2196f3, #2196f3), linear-gradient(#D2D2D2, #D2D2D2);
}
a.btn {
    display: inline-block;
}
button.btn:focus,
button.btn:active {
    outline: none;
}
.btn:not(.btn-raised).btn-primary {
    color: $white;
    text-shadow: none;
}
header img {
    width: 100%;
    margin-top: 60px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    margin-bottom: -60px;
}
.site-branding {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
}
.site-title {
    margin-top: 150px;
    font-weight: 600;
    font-size: $h1;
    color: $primary-text;
    text-align: center;
    text-transform: capitalize;
    padding: 10px;
    line-height: 1.8em;
}
.site-description {
    text-align: center;
    color: $secondary-text;
    font-size: $h3;
    padding: 15px;
}
::-webkit-input-placeholder {
    color: $secondary-text !important;
}
:-moz-placeholder {
    color: $secondary-text !important;
}
::-moz-placeholder {
    color: $secondary-text !important;
}
:-ms-input-placeholder {
    color: $secondary-text !important;
}
@media (min-width: 992px) {
    .container {
        max-width: 1400px;
        width: 100%;
    }
}
@media (max-width: 767px) {
    .site-title {
        font-size: $h1;
        margin-top: 80px;
    }
    .site-description {
        font-size: $h3;
    }
}
@media (max-width: 580px) {
    .site-title {
        font-size: $h2;
        margin-top: 60px;
    }
    .site-description {
        font-size: $h4;
    }
}
/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
.navbar.navbar-default {
    background-color: $white;
    height: 60px;
}
.box-shadow {
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
     -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.site-logo {
    display: inline-block;
    float: left;
}
.site-logo a {
    display: inline-block;
}
.site-logo img {
    height: 50px;
    margin-top: 5px;
}
.navbar-collapse {
    display: inline-block;
    float: left;
    background-color: transparent;
    border: none;
}
.navbar-header {
    width: 100%;
}
.navbar .navbar-form .form-control, .navbar .navbar-form .form-group .form-control {
    color: $primary-text;
    margin-top: -12px;
}
.navbar .navbar-nav>li>a {
    font-weight: 400;
    color: $secondary-text;
    cursor: pointer;
    transition: all .2s ease-in-out;
}
.navbar .navbar-nav>li>a:focus, .navbar .navbar-nav>li>a:hover {
    text-decoration: none;
    color: $primary-text;
}
nav #searchform {
    float: right;
}
#searchform button {
    background-color: transparent;
    border: none;
    color: $secondary-text;
    padding: 0px;
    box-shadow: none;
    text-shadow: none;
    display: inline;
    vertical-align: middle;
}
i.mdi.mdi-magnify {
    padding: 10px;
    margin-top: -9px;
    border-radius: 50%;
    transition: all .2s ease-in-out;
}
.navbar .dropdown-menu, .navbar.navbar-default .dropdown-menu {
    margin-top: 39px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}
.navbar.navbar-default .dropdown-menu li>a {
    color: $secondary-text;
    font-size: $p;
}
.navbar.navbar-default .dropdown-menu li>a:hover {
    color: $primary-text;
    background-color: inherit;
}
.navbar .dropdown-menu li>a:focus, .navbar .dropdown-menu li>a:hover, .navbar.navbar-default .dropdown-menu li>a:focus, .navbar.navbar-default .dropdown-menu li>a:hover {
    color: $secondary-text;
    background-color: #eee;
}
.navbar .navbar-toggle, .navbar .navbar-toggle:hover, .navbar .navbar-toggle:active, .navbar .navbar-toggle:focus {
    margin-right: 15px;
    margin-top: 8px;
    border-radius: 50%;
    padding: 2px;
    outline: none;
    width: 45px;
    height: 45px;
    min-width: inherit;
    background-color: $primary;
    box-shadow: none;
    float: left;
    transition: all .2s ease-in-out;
}
.navbar-toggle .material-icons {
    color: $white;
    text-shadow: none;
}
@media (max-width: 1199px) {
    .navbar .navbar-nav>li>a {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .navbar .navbar-form {
        margin-top: 16px;
    }
}
@media (min-width: 768px) {
    .navbar-collapse {
        width: auto !important;
    }
}
@media (max-width: 767px) {
    .site-logo img {
        height: 45px;
        margin-top: 8px;
    }
    nav #searchform {
        display: none;
    }
    .navbar-collapse {
        margin-top: 0px;
        box-shadow: 1px 3px 6px -3px rgba(0,0,0,0.35);
    -webkit-box-shadow: 1px 3px 6px -3px rgba(0,0,0,0.35);
    -moz-box-shadow: 1px 3px 6px -3px rgba(0,0,0,0.35);
    -o-box-shadow: 1px 3px 6px -3px rgba(0,0,0,0.35);
    -ms-box-shadow: 1px 3px 6px -3px rgba(0,0,0,0.35);
    }
    .navbar-collapse {
        display: none;
    }
    .collapse.width {
        -webkit-transition: width 0.35s ease-in-out;
        -moz-transition: width 0.35s ease-in-out;
        -o-transition: width 0.35s ease-in-out;
        transition: width 0.35s ease-in-out;
    }
    .navbar-collapse.in {
        background-color: rgba(0,0,0,.7);
        width: 100%;
        height: 10000%;
        margin-left: -15px;
        position: absolute;
        top: 60px;
        padding: 0px;
    }
    .main-navigation ul  {
        display: block;
        position: absolute;
        background-color: $light-gray;
        max-width: 350px;
        margin-top: 0px;
        width: 90%;
        height: 100%;
        padding-left: 10px;
        padding-top: 10px;
            box-shadow: 5px 0px 5px -2px rgba(0,0,0,0.35);
        -webkit-box-shadow: 5px 0px 5px -2px rgba(0,0,0,0.35);
        -moz-box-shadow: 5px 0px 5px -2px rgba(0,0,0,0.35);
        -o-box-shadow: 5px 0px 5px -2px rgba(0,0,0,0.35);
        -ms-box-shadow: 5px 0px 5px -2px rgba(0,0,0,0.35);
    }
    .navbar-collapse.in ul li {
        float: none;
    }
    .navbar-collapse.in ul li a {
        padding: 14px;
        padding-left: 10px;
    }
    .navbar .dropdown-menu, .navbar.navbar-default .dropdown-menu {
        margin-top: 0px;
    }
    .main-navigation ul ul {
        position: relative;
        float: none;
        left: 0;
        top: 0;
        box-shadow: none;
    }
}

/*--------------------------------------------------------------
# Hamburger Menu
--------------------------------------------------------------*/
.material-design-hamburger button {
    display: block;
    border: none;
    background: none;
    outline: 0;
    padding: 10px;
    padding-top: 22px;
    padding-bottom: 20px;
    width: 45px;
    height: 45px;
    margin-top: -2px;
    margin-left: -2px;
}

.material-design-hamburger__icon {
  padding: 3rem 1rem;
  cursor: pointer;
}

.material-design-hamburger__layer {
  display: block;
  width: 25px;
  height: 3px;
  background: $white;
  position: relative;
  animation-duration: 300ms;
  animation-timing-function: ease-in-out;
  transition: all .2s ease-in-out;
}

.material-design-hamburger__layer:before, .material-design-hamburger__layer:after {
  display: block;
  width: inherit;
  height: 3px;
  margin: 2px 0px;
  position: absolute;
  background: inherit;
  left: 0;
  content: '';
  animation-duration: 300ms;
  animation-timing-function: ease-in-out;
}

.material-design-hamburger__layer:before {
  bottom: 175%;
}

.material-design-hamburger__layer:after {
  top: 175%;
}

.material-design-hamburger__icon--to-arrow {
  animation-name: material-design-hamburger__icon--slide;
  animation-fill-mode: forwards;
}

.material-design-hamburger__icon--to-arrow:before {
  animation-name: material-design-hamburger__icon--slide-before;
  animation-fill-mode: forwards;
}

.material-design-hamburger__icon--to-arrow:after {
  animation-name: material-design-hamburger__icon--slide-after;
  animation-fill-mode: forwards;
}

.material-design-hamburger__icon--from-arrow {
  animation-name: material-design-hamburger__icon--slide-from;
}

.material-design-hamburger__icon--from-arrow:before {
  animation-name: material-design-hamburger__icon--slide-before-from;
}

.material-design-hamburger__icon--from-arrow:after {
  animation-name: material-design-hamburger__icon--slide-after-from;
}

@keyframes material-design-hamburger__icon--slide {
  0% {
  }
  100% {
    transform: rotate(180deg);
  }
}

@keyframes material-design-hamburger__icon--slide-before {
  0% {
  }
  100% {
    transform: rotate(45deg);
    margin: 3% 37%;
    width: 75%;
  }
}

@keyframes material-design-hamburger__icon--slide-after {
  0% {
  }
  100% {
    transform: rotate(-45deg);
    margin: 3% 37%;
    width: 75%;
  }
}

@keyframes material-design-hamburger__icon--slide-from {
  0% {
    transform: rotate(-180deg);
  }
  100% {
  }
}

@keyframes material-design-hamburger__icon--slide-before-from {
  0% {
    transform: rotate(45deg);
    margin: 3% 37%;
    width: 75%;
  }
  100% {
  }
}

@keyframes material-design-hamburger__icon--slide-after-from {
  0% {
    transform: rotate(-45deg);
    margin: 3% 37%;
    width: 75%;
  }
  100% {
  }
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
#content {
    max-width: 1400px;
    margin: auto;
    margin-top: 15px;
    margin-bottom: 15px;
}
.single #content, .page #content, .blog #content {
    margin-top: 80px;
}

/*--------------------------------------------------------------
# Posts and pages
--------------------------------------------------------------*/
.search #main {
    padding: 15px;
}
img.wp-post-image {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}
.page img.wp-post-image {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    margin-bottom: 15px;
    margin-top: -20px;
}
h1.entry-title {
    margin-top: 20px;
    text-align: left;
    font-size: $h1;
    padding: 20px; 
}
h2.entry-title {
    margin-top: 20px;
    text-align: left;
    padding: 20px;
}
h2.entry-title a {
    color: $primary-text;
}
h2.entry-title a:hover, h2.entry-title a:active, h2.entry-title a:focus {
    color: $primary-text;
    text-decoration: none;
}
.entry-meta {
    text-align: left;
    padding: 0px 20px;
}
.entry-summary, .entry-content {
    padding: 20px;
    padding-top: 10px;
    color: $secondary-text;
    text-align: left;
    font-weight: $fw2;
    margin-top: 0px;
}
.entry-footer {
    text-align: left;
    padding: 0px 20px;
    padding-bottom: 20px;
}
.moretext {
    display: none;
}
.post-navigation {
    margin-top: 0px;
    padding-top: 0px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.post-navigation .mdi {
    display: inline;
    padding: 10px;
}
.nav-previous {
    background-color: $accent;
    text-align: center;
}
.nav-previous a, .nav-next a {
    display: block;
    padding: 20px;
    font-size: $h4;
    color: $white;
    font-weight: $fw2;
}
.nav-previous a {
    text-align: left;
}
.nav-next {
    background-color: $primary-dark;
    text-align: right;
}
.nav-previous a:hover, .nav-previous a:active, .nav-previous a:focus, .nav-next a:hover, .nav-next a:active, .nav-next a:focus {
    color: $white;
    text-decoration: none;
}
h3#reply-title {
    text-align: left;
    padding: 15px;
}
form#commentform {
    text-align: left;
    padding: 15px;
}
#landing,
#landing-two {
    margin-top: -40px;
}
#landing header.entry-header,
#landing-two header.entry-header {
    background-size: cover;
    background-position: bottom;
    height: 500px;
}
#landing h1.entry-title,
#landing-two h1.entry-title {
    margin-top: 20px;
    text-align: center;
    padding: 20px;
    padding-top: 50px;
}
@media (max-width: 767px) {
    h1.entry-title {
        font-size: $h2;
    }
    h2.entry-title {
        
    }
}
/*--------------------------------------------------------------
# 404
--------------------------------------------------------------*/
section.card.error-404.not-found {
    margin-top: 60px;
    padding: 15px;
}
/*--------------------------------------------------------------
# Asides
--------------------------------------------------------------*/
aside#secondary section {
    text-align: left;
    padding: 0px 15px;
    width: 100%;
    float: left;
    display: inline-block;
}
aside#secondary section h2.widget-title {
    text-align: left;
    margin-top: 0px;
    margin-bottom: 5px;
}
aside#secondary section ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}
aside#secondary section ul li {
    margin: 12px 0px;
}
aside#secondary section ul li a {
    padding: 6px;
    padding-left: 0px;
    font-size: $p;
}
aside#secondary .navbar-form {
    padding-left: 0px;
}
@media (max-width: 767px) {
    aside#secondary section {
        margin-top: 15px;
    }
    aside#secondary .navbar-form {
        padding-left: 15px;
    }
    #searchform button {
        display: none;
    }
    aside#secondary section h2.widget-title {
        font-size: $h3;
    }
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
footer {
    color: #727272;
}
footer.site-footer {
    background-color: $primary-text;
}
footer h2 {
    color: $secondary-text;
    margin: 10px 0px 2px;
    padding: 6px;
}
footer .menu-nav-bar-container {
    float: none;
}
footer ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
footer ul li {
    padding: 6px;
}
footer ul li a {
    color: $secondary-text;
    padding: 6px;
}
footer ul li a:hover {
    color: $white;
    text-decoration: none;
}
footer .site-info {
    padding: 18px;
    background-color: #151515;
    color: $secondary-text;
}
@media (max-width: 767px) {
    footer h2 {
        text-align: left;
        font-size: $h3;
    }
    footer ul, .textwidget {
        text-align: left;
        margin-bottom: 20px;
    }
    footer ul li {
        padding-left: 0px;
    }
}