/**
 * Theme Name:     Fotograf
 * Author:         89 Studio
 * Template:       bootstrap-basic4
 * Text Domain:	   fotograf
 * Description:    Strona dla fotografa
 */


body h1, body h2, body h3, body h4, body h5, body h6, body p, body a, body span, body ul li {
  font-family: "Spectral", serif;
  font-weight: 400;
  font-style: normal;
}

img {max-width: 100%; height: inherit}



header.page-header {margin: 0; position: absolute; top: 0; left: 0; width: 100%; z-index: 99; padding-top: 20px; padding-bottom: 20px; background: rgb(0,0,0);
background: -moz-linear-gradient(180deg, rgba(0,0,0,0.5046393557422969) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.5046393557422969) 0%, rgba(0,0,0,0) 100%);
background: linear-gradient(180deg, rgba(0,0,0,0.5046393557422969) 0%, rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);}
header .container {position: relative;}
header .site-title {text-align: center; margin-top: 0; width: 280px; position: absolute; left: calc(50% - 140px); top: 0; z-index: 9}
header .site-title a {color: #fff; font-size: 24px; text-transform: uppercase;}
header .site-description small {color: #fff; font-family: "Spectral", serif; font-size: 16px; text-transform: uppercase; letter-spacing: 2px}


header.page-header ul#bb4-primary-menu {margin: 10px auto 0}
header.page-header ul#bb4-primary-menu li a {color: #fff; padding: 10px 25px; text-transform: uppercase; font-size: 14px; letter-spacing: 1px}
header.page-header ul#bb4-primary-menu li:nth-child(2) {margin-right: 340px}


.blog header.page-header {background: transparent}
.blog header .site-title a, .blog header .site-description small {color: #000}
.blog header.page-header ul#bb4-primary-menu li a {color: #000}
.page-template-blackmenupage header.page-header {background: transparent}
.page-template-blackmenupage header .site-title a, .page-template-blackmenupage header .site-description small {color: #000}
.page-template-blackmenupage header.page-header ul#bb4-primary-menu li a {color: #000}

.frontpage-slider {margin-bottom: 100px;}
.frontpage-slider .owl-nav {position: relative; margin: 0; width: 100%}
.frontpage-slider .owl-nav button span {color: #fff; font-size: 25px; margin: 0; padding: 20px; line-height: 20px; display: block}
.frontpage-slider .owl-nav button.owl-prev {position: absolute; left: 20px; bottom: 50vh}
.frontpage-slider .owl-nav button.owl-next {position: absolute; right: 20px; bottom: 50vh}



.frontpage-info {margin-bottom: 100px;}

.frontpage-blog .content-space {background-size: cover; background-position: center; margin-bottom: 100px}
.frontpage-blog a.post-title {color: #fff; width: 100%; text-align: center; padding: 300px 50px; display: block;}

.instagram-grid {display: flex; justify-content: center; position: relative; flex-wrap: wrap}
.instagram-item {width: 20%; height: 20vw; background-size: cover; background-position: center; background-repeat: no-repeat;}
.instagram-grid .instagram-link {position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; align-items: center; display: grid; color: #fff}




.page-header-banner {padding: 200px 50px 150px; text-align: center; color: #fff; background-size: cover; background-position: center; margin-bottom: 100px;}
.page-header-banner.default-banner {padding: 200px 50px 100px; text-align: center; color: #000;  margin-bottom: 0;}



body #main .post, body #main .page {border: none; padding: 0}

.nf-form-content input {background: #f5f5f5; border: none; line-height: 42px; padding: 0 20px}
.nf-form-content textarea {background: #f5f5f5; border: none;}

.blog .image img {margin-bottom: 40px}
.blog h2 {color: #000; text-align: center; font-size: 24px}
.blog a.more-btn {color: #000; width: 100%; text-align: center; margin-bottom: 50px; display: block;}

nav.pagination-nav-container {margin-bottom: 100px; text-align: center; width: 100%}

nav.pagination-nav-container .page-item .page-link {background-color: inherit; border: none; color: #000;}
nav.pagination-nav-container .page-item.active .page-link {background-color: inherit; border: none; color: #000; text-decoration: underline}


.single #main article {margin-bottom: 100px}


a.link-to-form {width: 100%; color: #000; text-align: center; display: block; margin-bottom: 100px; font-size: 24px}




footer#site-footer {background: #1c1c1c; color: #fff; padding-top: 50px; padding-bottom: 30px; border: none}
footer#site-footer .footer-widget {width: 100%; text-align: center;}
footer#site-footer ul {list-style-type: none; padding-left: 0; -ms-flex-pack: center !important;
    justify-content: center !important;}
footer#site-footer ul li {float: left;}
footer#site-footer ul li a {color: #fff}

#site-footer ul { display: flex;  justify-content: center; align-items: center;}
#site-footer ul li { margin: 0 15px; }

#site-footer ul li a {text-decoration: none; color: #fff; font-size: 16px; transition: color 0.3s ease-in-out; }



@media (max-width: 992px) {
  header .site-title {position: relative; width: 100%; left: 0}
  body .navbar {min-height: 0; padding: 0}

  button.navbar-toggler {position: absolute; top: -50px; right: 0; z-index: 99; }
  button.navbar-toggler span {display: block; flot: left; width: 30px; height: 2px; background: #fff; clear: both; margin: 10px}
  .blog button.navbar-toggler span, .page-template-blackmenupage button.navbar-toggler span {background: #000}
  body .navbar ul li {text-align: center;}
  .blog header.page-header ul#bb4-primary-menu, .page-template-blackmenupage header.page-header ul#bb4-primary-menu {background: #fff}
  header.page-header ul#bb4-primary-menu li:nth-child(2) {margin-right: 0}


  .page-header-banner {padding-top: 300px}
}




@media (max-width: 768px) {
  .instagram-grid {display:flex}
  .instagram-grid .instagram-item {width: 50%; height: 50vw}
  .instagram-grid .instagram-item:nth-child(5) {display: none}
}