/*
Theme Name: Borja's Site
Author: Borja Moya
Version: 1.0
*/
@import url('css/typography.css');



/* 
      style.css
                */

body {font-family: 'Helvetica', sans-serif; background-color: #121212; color: #fff; padding-bottom: 70px;}

h2, h4 {color: #fff; font-weight: normal;}

a {color: #0056b3;}
a:hover {text-decoration: none;}

p {color: #aaaaaa;}
li {color: #aaaaaa;}

/* paragraph main body text dark */
.main-body-p { font-size: 1.1rem; letter-spacing: 0.7px;}

hr {border-color: #fff;}

.margin-top {margin-top: 100px;}
.margin-top-half {margin-top: 50px;}
.margin-top-150 {margin-top: 150px;}
.margin-bottom-half {margin-bottom: 50px;}
.margin-center img {margin-left: auto; margin-right: auto;}
/*
  sidebar - navbar
           */
    /* logo */

    .logo-bmstudios-about-page {font-family: monospace; font-size: 24px;}

    .logo-bm {margin-left: 30px !important;}

    /* The icon of the menu */
    .menu-hamburger {margin-left: 15px;cursor: pointer;position: relative; z-index: 1;}
    .menu-hamburger a {color: #fff;}
    /* The side navigation menu */
    .sidenav {
     height: 100%; /* 100% Full-height */
     width: 0; /* 0 width - change this with JavaScript */
     position: fixed; /* Stay in place */
     z-index: 2; /* Stay on top */
     top: 0; /* Stay at the top */
     left: 0;
     background-color: #f9f9f9; /* Black*/
     overflow-x: hidden; /* Disable horizontal scroll */
     padding-top: 97px; /* Place content 60px from the top */
     transition: 0.3s; /* 0.5 second transition effect to slide in the sidenav */
    }

    .menu-hamburger img {margin-top: 5px !important;}
    .logo-bm-sidebar {position: absolute;; margin-top: -51px; margin-left: 80px; }
    .logo-bm-sidebar img {max-height:40px;}

    /* The navigation menu links */
    .sidenav a {
     padding: 8px 8px 8px 32px;
     text-decoration: none;
     font-size: 16px;
     color: #000;
     display: block;
     transition: 0.3s;
    }

    /* When you mouse over the navigation links, change their color */
    .sidenav a:hover {
     color: #000000;
    }

    /* Position and style the close button (top right corner) */
    .sidenav .closebtn {
     position: absolute;
     top: 17px;
     left: -13px;
     font-size: 35px;
     color: #000000;
    }

    .links-sidebar {
      margin-top: 70px;
      padding-left: 30px;
      text-transform: uppercase;font-weight: bold;font-family: monospace;
    }

    /* Style page content - use this if you want to push the page content to the right when you open the side navigation */
    /* #main {
     transition: margin-left .5s;
     padding: 20px;
    } */

    /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
    @media screen and (max-height: 450px) {
     .sidenav {padding-top: 15px;}
     .sidenav a {font-size: 18px;}
    }


    /* social media links */
    .social-links-sidebar {margin-left: -10px;    position: absolute;
    height: 100px;
    bottom: 0;
    width: 100%; margin-bottom: 30px;}

    .social-links-sidebar li {list-style-type: none; display: inline-block; margin-right: -14px; margin-bottom: -20px;}
    .email-link-sidebar a {color: #999; font-size: 14px;margin-left: 40px;}
    .legal-text-sidebar {color: #999;margin-left: 72px; font-size: 10px;font-family:monospace;letter-spacing:.175; margin-top: -15px;}
    .legal-text-sidebar a {color: #999;font-size: 10px;font-family:monospace;letter-spacing:.175; margin-left: -30px;}



    /*
      END sidebar
               */

/* HOME PAGE */

.bm-navbar {margin-top: 30px;}
.bm-navbar img {margin-top: -10px;}


h2 .Hero-highlight{font-family:monospace;font-size:16px;letter-spacing:3px;display:block;line-height:1.2;margin-bottom:12px}
@media screen and (max-width: 750px) {h2 .Hero-highlight{margin-left: -168px; font-size: 12px;;}}

h2 .Hero-playButton {
  position:absolute;
  top:100%;
  left:0;
  width:60px;
  height:40px;
  margin-top:20px;
  text-align:center;
  line-height:43px;
  font-size:15px;
  text-indent:3px;
  background:#fff;
  color:#121212
}


@media screen and (max-width: 750px) { .carousel-inner { height: 600px; width: auto;}}

.title-video-carousel {font-size: 48px; text-transform: uppercase; color: #fff; font-weight: bold;}
@media screen and (max-width: 750px) {.title-video-carousel {font-size: 30px;}}
.title-video-carousel:hover {text-decoration: none;}



.carousel { margin-top: -76px; margin-bottom: 100px;}
@media screen and (min-width: 1700px) {.home-carousel-text {margin-left: 200px !important; margin-bottom: 90px !important; max-width: 500px;}}
@media screen and (max-width: 1700px) {.home-carousel-text {margin-left: 185px !important; margin-bottom: 70px !important;max-width: 500px;}}
@media screen and (max-width: 1500px) {.home-carousel-text {margin-left: 138px !important;margin-bottom: 30px;max-width: 500px;}}
@media screen and (max-width: 1200px) {.home-carousel-text {margin-left: 100px !important;margin-bottom: 15px;max-width: 500px;}}
@media screen and (max-width: 750px) {.home-carousel-text {margin-left: 120px !important;margin-bottom: -205px !important;}}

.home-carousel-text a {
  font-size: 44px;
  letter-spacing: 3px;
  line-height: 0.9em;
  -webkit-text-stroke: 1.5px white;
}
@media screen and (max-width: 750px) {.home-carousel-text a {position: relative; font-size: 24px; margin-left: -170px; text-align: left !important;}}
@media screen and (max-width: 750px) {.home-carousel-text {margin-top: 80px;}}


.home-carousel-text a:hover {color: #f9f9f9;}

.title-video-carousel img {width: 120px; position: absolute; margin-left: -150px;margin-top: -10px;}
@media screen and (max-width: 750px) {.title-video-carousel img {width: 60px; position: absolute;; margin-left: 0px;margin-top: 55px;}}


.carousel-caption {text-align: left;margin-top: -100px}
.video-home {width: 100%;}
.secondary-title-home {margin-top: 50px; margin-bottom: 40px;}
.video-card-home {margin-bottom: 30px;}
@media screen and (max-width: 1200px) {.video-card-home {margin-bottom: 60px;}}

    /* home page articles */
    .article-section-home {margin-top: 120px; margin-bottom: 680px;}
    /* @media screen and (max-width: 760px) {.article-section-home img {height: 400px; max-width: initial; overflow: hidden;} } */
    .article-section-home h2 { font-family: monospace; text-transform: uppercase; font-size: 36px; position: absolute;margin-top: 0px;}
    @media screen and (min-width: 1150px) {.article-section-home h2 {margin-left: 250px !important; max-width: 700px;} }
    @media screen and (min-width: 900px) {.article-section-home h2 {margin-left: 100px; max-width: 700px;} }
    @media screen and (max-width: 750px) {.article-section-home h2 {margin-left: -75px; max-width: 700px; font-size: 24px;} }
    .article-section-home h3 { font-family: monospace; text-transform: uppercase; font-size: 21px; position: absolute;margin-top: 8px;}
    @media screen and (max-width: 1150px) {.article-section-home h3 {position: fixed; margin-left: -9999px;}}

    .mail-form-home {margin-top: 100px; text-align: left;}
    .mail-form-home input {background-color: transparent; padding-top: 0px; padding-bottom: 0px; font-size: 12px; border-radius: 0px; max-width: 300px; display: inline-block; border-color: #555;}
    .btn-mail-form-home {background-color: #555 !important; color: #999;}

    .home-side-links h5 {margin-top: 25px; color: #777; text-transform: uppercase; font-size: 16px;}
    .home-side-links {text-align: left;}
    .home-side-links a {font-size: 14px; color: #f3f3f3; text-decoration: none;}
    .home-side-links a:hover {text-decoration: underline;}

/* MAIN DESIGN PAGES */
  .main-layout {margin-top: 110px; margin-bottom: 100px;}
  .main-layout h1 {position: relative; z-index: 2;
    text-transform: uppercase;
    transform: scale(1, 1.5);
    -webkit-transform: scale(1, 1.2); /* Safari and Chrome */
    -moz-transform: scale(1, 1.2); /* Firefox */
    -ms-transform: scale(1, 1.2); /* IE 9+ */
    -o-transform: scale(1, 1.2); /* Opera */
    letter-spacing: 7px;
    padding-bottom: 10px;
  }


  .main-layout-subtitle {font-size: 32px; padding-top: 30px; padding-bottom: 30px; letter-spacing: 1px;line-height: 44px;}
  .main-layout-column {padding-top: 90px; padding-left: 30px;}

  @media screen and (min-width: 1200px) { .main-layout-content{ padding-right: 70px;}}

  .card-home {margin-top: 25px;}
  .main-title-card {color: #fff; font-weight: bold; font-size: 20px;}
  .subtitle-time-card {color: #777;}


/* about page */

  .mail-form-about {margin-top: -80px;}

  .hr-about-page {max-width: 200px; margin-left:0; margin-top: 25px; margin-bottom: 25px; border-color: #888; border-width: thin;}


/* Post Page */
  .margin-container-post {margin-top: 700px;}

  .video-post-page {position: relative;margin-top: -825px !important; padding-bottom: 54%; /* 16:9 */padding-top: 25px;	height: 0;}
  @media screen and (max-width: 1200px) { .margin-container-post {margin-top: 630px;} .video-post-page {margin-top: -760px !important;} }
  @media screen and (max-width: 990px) { .margin-container-post {margin-top: 480px;} .video-post-page {margin-top: -600px !important;} }
  @media screen and (max-width: 770px) { .margin-container-post {margin-top: 360px;} .video-post-page {margin-top: -500px !important;} }
  @media screen and (max-width: 600px) { .margin-container-post {margin-top: 370px;} .video-post-page {margin-top: -500px !important;} }
  @media screen and (max-width: 500px) { .margin-container-post {margin-top: 300px;} .video-post-page {margin-top: -450px !important;} }
  @media screen and (max-width: 400px) { .margin-container-post {margin-top: 220px;} .video-post-page {margin-top: -395px !important;} }

  @media screen and (min-width: 770px) {   .container-post {margin-left: 240px;} }

  .first-p-post {margin-top: 210px;}
  .video-post-page iframe {
    position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  }
  .post-title {
    font-weight: normal;
    text-align: center;
    font-size: 98px;
    letter-spacing: 5px;
    color: #fff;
    text-transform: uppercase;
    margin-top: 120px;
  }


  .blog-post-content p, li {font-size: 19px; color: #fff;}
  .blog-post-content h2 {color: #fff; margin-bottom: 0px;}
  .social-links-post {padding-left: 0px;}
  .social-links-post li {list-style-type: none; display: inline-block; margin-right: 30px;}
  .social-links-post a {color: #999;}

/* podcast page */

  .podcast-bttns h5 {color: #777; text-transform: uppercase; font-size: 14px;}


/* bbw page */
.hr-bbw-page {max-width: 200px; margin-left:0; margin-top: 25px; margin-bottom: 25px; border-color: #888; border-width: thin; margin-left: auto;margin-right: auto;}


.h3-secondary-title {
  margin-top: 28px;
  position: relative; z-index: 2;
  text-transform: uppercase;
  transform: scale(1, 1.5);
  -webkit-transform: scale(1, 1.2); /* Safari and Chrome */
  -moz-transform: scale(1, 1.2); /* Firefox */
  -ms-transform: scale(1, 1.2); /* IE 9+ */
  -o-transform: scale(1, 1.2); /* Opera */
  letter-spacing: 7px;
  padding-bottom: 10px;}

.skill-highlight {color: #f9f9f9; font-style: italic;}

  @media screen and (min-width: 650px) {
    .four-hundred-width {max-width: 400px; float: right;}

  }

  @media screen and (max-width: 1500px) {.bbw-carousel-text {margin-left: 298px !important;margin-bottom: 30px;max-width: 500px;}}
  @media screen and (max-width: 1200px) {.bbw-carousel-text {margin-left: 100px !important;margin-bottom: 15px;max-width: 500px;}}
  @media screen and (max-width: 750px) {.bbw-carousel-text {margin-left: 120px !important;margin-bottom: -205px !important;}}

  .bbw-carousel-text a {
    font-size: 44px;
    letter-spacing: 3px;
    line-height: 0.9em;
    -webkit-text-stroke: 1.5px white;
  }
  @media screen and (max-width: 750px) {.bbw-carousel-text a {position: relative; font-size: 24px; margin-left: -170px; text-align: left !important;}}
  @media screen and (max-width: 750px) {.bbw-carousel-text {margin-top: 80px;}}


  .bbw-carousel-text a:hover {color: #f9f9f9;}

  .title-bbw-carousel {font-size: 48px; color: #fff;
    position: relative; z-index: 2;
      text-transform: uppercase;
      transform: scale(1, 1.5);
      -webkit-transform: scale(1, 1.2); /* Safari and Chrome */
      -moz-transform: scale(1, 1.2); /* Firefox */
      -ms-transform: scale(1, 1.2); /* IE 9+ */
      -o-transform: scale(1, 1.2); /* Opera */
      letter-spacing: 7px;
      padding-bottom: 10px;
  }
  @media screen and (max-width: 750px) {.title-bbw-carousel {font-size: 30px;}}
  .title-bbw-carousel:hover {text-decoration: none;}

  .bbw-main-layout p {margin-bottom: 0px;}

  @media screen and (max-width: 750px) {.first-title-bbw {margin-top: -180px;}}

/* Additionals */

  @media screen and (min-width: 650px) { .width-reduced {max-width: 600px; margin-left: auto; margin-right: auto;} }

  .container-article {padding-right: 15px; padding-left: 15px;}
  .container-article p { padding-top: 10px; padding-bottom: 10px;}
  .container-article h3 {font-weight: bold;}
  @media (min-width: 620px) {
    .container-article {
      max-width: 601px;
      width: 100%;
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;

    }
  }

  
  .blog-post-content {max-width: 800px; margin-left: auto; margin-right: auto;padding-right: 15px; padding-left: 15px;}
  @media screen and (max-width: 820px) { .blog-post-content {padding-left: 10px; padding-right: 10px;}}