/*
Theme Name: Fairstyle 2017
Author: Alan Brown
Author URI: https://www.alanbrown.com
Version: 1.0
*/
/* --------------------------- VARIABLES --------------------------- */
/* --------------------------- SASS MIXINS --------------------------- */
/* --------------------------- CONTENT HELPER CLASSES --------------------------- */
.alignright, .allgnlleft, .aligncenter, .alignnone { max-width: 100%; height: auto; }
.alignright img, .allgnlleft img, .aligncenter img, .alignnone img { max-width: 100%; height: auto; }
.alignright .wp-caption-text, .allgnlleft .wp-caption-text, .aligncenter .wp-caption-text, .alignnone .wp-caption-text { font-size: 0.85rem; opacity: 0.5; }

@media (min-width: 576px) { .alignright img, .allgnlleft img, .aligncenter img { width: auto; }
  .alignright { float: right; margin: 10px 0 10px 10px; }
  .alignleft { float: left; margin: 10px 10px 10px; } }
/* --------------------------- GENERAL --------------------------- */
html { background: black; background-image: url(/wp-content/themes/fairstyle-2017/img/bg.png); background-repeat: repeat; background-position: top center; max-width: 100%; }

body { font-family: "Arimo", sans-serif; background: -moz-linear-gradient(left, black 0%, transparent 30%, transparent 50%, transparent 70%, black 100%); background: -webkit-linear-gradient(left, black 0%, transparent 30%, transparent 50%, transparent 70%, black 100%); background: linear-gradient(to right, black 0%, transparent 30%, transparent 50%, transparent 70%, black 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); color: white; font-size: 14px; position: relative; }

h1, h2, h3, h4, h5, h6 { font-family: "Pacifico", cursive; font-weight: 400; }

a { color: #1e8f88; text-decoration: none; }
a:hover, a:focus { color: #15c2b7; }

.fancybox-bg { background: black; }

.fancybox-is-open .fancybox-bg { opacity: 0.95; }

/* --------------------------- BOOMTASTIC --------------------------- */
.boomtastic { height: 0; padding-bottom: 35%; text-align: center; position: relative; }
.boomtastic .logo { position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: none; width: 150vw; }
.boomtastic .logo2 { display: none; }
.boomtastic .overlay { position: absolute; background: url(/wp-content/themes/fairstyle-2017/img/diag.png) repeat center; height: 100%; width: 100%; top: 0; left: 0; opacity: 0.2; }
.boomtastic .vid-box { position: absolute; height: 100%; width: 100%; overflow: hidden; }
.boomtastic video { position: absolute; height: 100%; width: 100%; object-fit: cover; left: 0; top: 0; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); -webkit-transform: scale(1.05); transform: scale(1.05); }
.boomtastic .hero-footer { display: none; }

@media (min-width: 768px) { .boomtastic { height: 30vh; padding-bottom: 0; } }
.home .boomtastic { height: 100vh; padding-bottom: 0; margin-bottom: 50px; }
.home .boomtastic .logo2 { position: sticky; position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; width: auto; max-width: 80%; height: auto; display: block; margin: auto; top: 20%; margin-bottom: 60px; padding-left: 2%; left: 0; z-index: 99; }
.home .boomtastic .logo { display: none; }
.home .boomtastic .hero-footer { position: absolute; display: block; bottom: 25px; width: 90%; left: 0; right: 0; margin: 0 auto; text-align: center; }
.home .boomtastic .hero-footer span { font-size: 36px; color: black; transition: 0.25s; width: auto; }
.home .boomtastic .hero-footer span:hover, .home .boomtastic .hero-footer span:focus { -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); text-decoration: none; }

@media (min-width: 768px) { .home .boomtastic .logo { max-width: 600px; } }
/* --------------------------- CAP --------------------------- */
.cap { background: rgba(0, 0, 0, 0.9); width: 100%; padding: 20px 0 20px; z-index: 10; }
.cap .logo { display: none; }
.cap .members { padding: 0; list-style: none; display: inline-block; margin-bottom: 0; }
.cap .members li { display: inline-block; padding: 0 6px 0 0; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; }
.cap .members li a { color: #1e8f88; transition: 0.25s; }
.cap .members li a:hover, .cap .members li a:focus { color: #15c2b7; text-decoration: none; }
.cap .members li.white a { color: white; }
.cap .members li.white a:hover, .cap .members li.white a:focus { color: #15c2b7; }
.cap .social-icons { text-align: right; position: relative; }
.cap .social-icons a { text-decoration: none; }

@media (min-width: 576px) { .cap { position: sticky; top: 0; }
  .cap .logo { width: 120px; margin-right: 15px; display: inline-block; } }
/* --------------------------- FEED --------------------------- */
.home-txt { text-align: center; margin-bottom: 25px; border: 1px solid rgba(255, 255, 255, 0.25); padding: 20px 20px 10px 20px; }

.grid { margin-top: 30px; margin-left: -10px; margin-right: -10px; }

.grid-sizer { width: calc(100% - 30px); margin: 0 15px; }

.grid-item { width: calc(100% - 30px); margin: 0 15px 30px; }
.grid-item img { max-width: 100%; height: auto; display: block; margin: auto; }

@media (min-width: 768px) { .grid-sizer { width: calc(50% - 30px); }
  .grid-item { width: calc(50% - 30px); }
  .grid-item.landscape { width: calc(100% - 30px); } }
@media (min-width: 992px) { .grid-sizer { width: calc(33.33% - 30px); }
  .grid-item { width: calc(33.33% - 30px); }
  .grid-item.landscape { width: calc(66.66% - 30px); } }
.post-nav { margin-top: 30px; margin-bottom: 20px; }
.post-nav a { display: inline-block; background: transparent; padding: 10px 15px; color: #1e8f88; letter-spacing: 1px; text-transform: uppercase; font-size: 12px; border: 1px solid #1e8f88; transition: 0.25s; }
.post-nav a:hover, .post-nav a:focus { background: #1e8f88; color: black; text-decoration: none; }
.post-nav .text-right { text-align: right; }

/* --------------------------- FOOTER --------------------------- */
footer { font-size: 12px; margin-top: 40px; padding: 30px 0; background: rgba(0, 0, 0, 0.5); border-top: 1px solid rgba(30, 143, 136, 0.2); }
footer .right { text-align: right; }