/*
    Theme Name: MCGUFFMEDIA
    Theme URI: http://mcguffmedia.com
    Author: Mike McGuff
    Author URI: http://mcguffmedia.com
    Description: Custom theme for MCGUFFMEDIA
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Text Domain: MCGUFFMEDIA

    */

    /* Move down content because we have a fixed navbar that is 3.5rem tall */
    

:root {
  --primary-color: #0510f0;     /* bluebonnet */
  --secondary-color: #091540;   /* maastricht blue */
  --dark-blue: #020659;           /* dark blue */
  --red: #D72638;                 /* rose madder */
  --lightblue: #3F88C5;            /* tufts blue */
  --text-color: #c5bbec;  
}


    body, html {
      position: relative; 
       margin: 0;
      padding: 0;
                  }


    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    main,
    menu,
    nav,
    section,
    summary {
      display: block;
    }

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

p {
      font-family: 'Raleway', sans-serif;
}

.bigger {
  font-size: 1.2em;
}

 h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  }



a {
  color: var(--primary-color);
}

blockquote {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 40px;
    margin-right: 40px;
}

.wp-post-image {
  display: block;
    margin-left: auto;
    margin-right: auto;
}


 
  .wp-caption-text {
    text-align: center;
    font-style: italic;
    font-size: .8em;
  }

  .ccfic {
  font-style: italic;
   text-align: center;
   margin-bottom: 15px;
  }

    /* MENU */



.dropdown-menu {
    background-color:#efefef;
    padding-left: 1em;
}

    .site-title {
      color: #ee1010;
      font-size: .8em;
          }

    .site-title a:hover {
     color: white;
    }

    .menu-item {
      margin-right: 15px;

    }

    .navbar-nav {
     font-size: 1.4em;
    
      }

      .navbar-wrapper {
    position: absolute;
    padding-bottom: 20px;
     top: 15px;
    right: 0;
    left: 0;
    z-index: 20;
  }


#menu-header a:hover {
color: #ee1010;
  }

/* NAV SHRINK */

.navbar{
  position:fixed;
  top:0;
}

#Logo{
  transition: all 0.3s;
    padding: 10px;
}

.largeLogo {
  width: 300px;
}

.smallLogo {
  width: 200px;
}


/* NAV SCROLL */ 

  .navbar-fixed-top.scrolled {
  background-color: var(--primary-color); !important;
  transition: background-color 200ms linear;
}

.navbar-fixed-top.scrolled .nav-link {
  color:#ee1010;
}

.background-color-black-opac {
   background: rgba(0, 0, 0, 0.5);
}


  .background-color-trans {
     background-color:transparent;

                   }


 /* NAV SCROLL */ 

 

 
  .size-full {
  display: block;
      margin-left: auto;
      margin-right: auto;
      }

    /* unvisited link */
    .navbar-nav a:link {
        color: #ffffff;
          }

.menu-item {

}

.post_thumbnail {
  padding-bottom: 30px;
}

    /* mouse over link */
    #menu-menu-1 a:hover {
        color: #ee1010;

    }


    /* unvisited link */
    .navbar-nav a:visited {
        color: #ffffff;
    }
   
   /* MENU */

 
 
/* HERO */

 #hero {
     background: url("https://mcguffmedia.com/wp-content/themes/mcguffmedia/../../uploads/2020/06/mcguff-hero.jpg") no-repeat;
    background-position: center top;
  background-size: cover;
    position: relative;
padding-bottom: 30%;
              }
       
.hero-text {
  padding-top: 25vh;
  color: white;
}


  #hero h1 {
         font-size: 5rem;
         text-transform: uppercase;
         letter-spacing: 3px;
                       }

#hero h2 {
   font-size: 3rem;

}


  #hero h3 {
       font-size: 1.4rem;
         }


.city {
  width: 100vw;
    position: absolute;
    left: 0;
    bottom: 0;
}

.larger {
  font-size: 4rem;

}

/* Cursor */
.txt-type > .txt {
  border-right: 0.2rem solid #777;
}



/* PORTFOLIO */


#portfolio {
background-color: var(--red);
 background-position: center top;
  background-size: cover;
  padding-top: 5%;
  padding-bottom: 5%;
}


#portfolio h2 {
 font-size: 2.3rem;
  padding-bottom: 2%;
}



/* BIG NAMES */



#bignames {
   background: url("https://mcguffmedia.com/wp-content/themes/mcguffmedia/../../uploads/2020/06/shuttle-500.png") no-repeat;
    background-position: left top;
    background-size: auto 100%;

}


/* SERVICES */

#services-top {
  background-color: var(--lightblue);
  padding-top: 2%;
  padding-bottom: 2%;
}

#services-top h2 {
  padding-top: 5%;
}


#services {
      background: url("https://mcguffmedia.com/wp-content/themes/mcguffmedia/../../uploads/2020/06/mcguff-armscrossed-servicesdiv-blank4.png") no-repeat;
      background-color: var(--lightblue);
    background-position: center top;
  background-size: cover;
padding-top: 10%;
padding-bottom: 10%;
}

#services h4 {
 font-style: oblique;
 color: gold;
}


#services p {
  color: white;
  font-size: 1.2rem;
}

#services a {
color: #f0e105;
}

.text-block {
  position: relative;
  bottom: 20px;
  background-color: black;
  color: white;
  width: 90%;
   background: -webkit-linear-gradient(left,rgba(29, 44, 84,1),rgba(29, 44, 84,.6)); /*Safari 5.1-6*/
    background: -o-linear-gradient(right,rgba(29, 44, 84,1),rgba(29, 44, 84,.6)); /*Opera 11.1-12*/
    background: -moz-linear-gradient(right,rgba(29, 44, 84,1),rgba(29, 44, 84,.6)); /*Fx 3.6-15*/
    background: linear-gradient(to right, rgba(29, 44, 84,1), rgba(29, 44, 84,.6)); /*Standard*/
}   


.background-text {
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.9) 35%, rgba(0,212,255,0.04243704317664565) 100%);
padding-top: 3%;
 font-size: 1.2em;
}

.background-text-opposite {
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(0,212,255,0.04243704317664565) 0%, rgba(0,0,0,.9) 100%, rgba(0,0,0,.9) 35%);
padding-top: 3%;
 font-size: 1.2em;
}



.background-text h2 {
  font-size: 3rem;
   text-shadow:2px 2px 10px black;
 }




/* VIDEO */

#video-intro {
      background-color: var(--secondary-color);

}

.photo-container {
  position: relative;
  width: 100%;
}


.photo-image {
    display: block;
  background-size: cover;
    width:50vw;
}


.text-container {
color: white;
padding-top: 5%;
padding-bottom: 5%;
font-size: 1.25rem;
}


.videocontainer {
  position: relative;
  width: 100%;
 }

.videoimage {
  display: block;
  background-size: cover;
    width:33vw;
}


.overlay1 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0.5;
  transition: .3s ease;
  background-color: red;
}



.overlay2 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0.5;
  transition: .3s ease;
  background-color: yellow;
}


.overlay3 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0.5;
  transition: .3s ease;
  background-color: blue;
}

.videocontainer:hover .overlay  {
  opacity: 1;
}

.video-description {
  color: white;
  font-size: 1.8em;
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}






/* KLOL */

#klol {
background: url("https://mcguffmedia.com/wp-content/themes/mcguffmedia/../../uploads/2020/06/klol_collage.jpg") rgba(36, 55, 70, 1) no-repeat;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 75%, 100% 100%, 100% 100%, 100% 85%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 75%, 100% 100%, 100% 100%, 100% 85%, 0 100%);
    background-position: center top;
  background-size: cover;
    position: relative;
padding-top: 10%;
padding-bottom: 10%;
margin-bottom: -7%;
}

.background-text-klol {
background: rgb(215,38,56);
background: linear-gradient(90deg, rgba(215,38,56,1) 0%, rgba(215,38,56,1) 35%, rgba(215,38,56,0.04525560224089631) 100%);
padding-top: 3%;
 font-size: 1.2em;
}

/* alz */

#alz {
  background: url("https://mcguffmedia.com/wp-content/themes/mcguffmedia/../../uploads/2020/06/alz-1500.jpg") no-repeat;
    background-position: center top;
-webkit-clip-path: polygon(0 16%, 100% 0, 100% 75%, 100% 100%, 100% 100%, 100% 100%, 0 100%);
clip-path: polygon(0 16%, 100% 0, 100% 75%, 100% 100%, 100% 100%, 100% 100%, 0 100%);
    background-blend-mode: multiply;
      background-size: cover;
    position: relative;
  padding-top: 10%;
  padding-bottom: 10%;
}



/* NEWS */

 #news {
  background: url("https://mcguffmedia.com/wp-content/themes/mcguffmedia/../../uploads/2019/10/IMG_9794FAith.jpg") no-repeat;
   background-color: black;
     background-position: center top;
  background-size: cover;
  padding-top: 5%;
  padding-bottom: 25%;
    }


.news-box {
background: rgba(192, 192, 192, 1.0);
 padding: 20px;
 padding-bottom: 20px; 

  }

#news li {
  list-style-type: none;
}

#news p {
  font-size: 1.2em;
}

#news i {
  font-size: 0.8em;
  background-color: #a40000;
  padding: 3px;
}




div#post-grid-133.post-grid.grid {
  background-color: #ffc300;
}

#hero2 {
  height: 30vh;
       background-attachment: fixed;
      background-image: url("https://mcguffmedia.com/wp-content/themes/mcguffmedia/../../uploads/2020/06/mcguff-armscrossed-servicesdiv-2.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
       }

/* ANIMATE */

/* 
<div class="box rotate"></div>
<div class="box scale"></div>
<div class="box translate"></div>
  */

  .box {
      transition: 2s;
  }

  .rotate.triggeredCSS3    {transform : rotate(360deg); }
.scale.triggeredCSS3     {transform : scale(0.8); }
.translate.triggeredCSS3 {transform: translateX(2rem); }
.translate2.triggeredCSS3 {transform: translateX(-2rem); }

  /* VIDEO wrapper */

  .videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
  }
  .videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* VIDEO wrapper */


    .bluegradient {
    position: relative;
    background: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(1, rgba(022,55,102,0.0)), /* Top */
            color-stop(0, rgba(022,55,102,1.0)) /* Bottom */
     );
    }







          



    .background {
      background: #cc0005; /* For browsers that do not support gradients */
      background: -webkit-linear-gradient(left,rgba(0,0,0,1),rgba(0,0,0,0)); /*Safari 5.1-6*/
      background: -o-linear-gradient(right,rgba(0,0,0,1),rgba(0,0,0,0)); /*Opera 11.1-12*/
      background: -moz-linear-gradient(right,rgba(0,0,0,1),rgba(0,0,0,0)); /*Fx 3.6-15*/
      background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0)); /*Standard*/
      padding-bottom: 30px;
    }

    /* Featurettes */

  .featurette-divider {
    margin: 3rem 0; /* Space out the Bootstrap <hr> more */
  }

  /* Thin out the marketing headings */
  .featurette-heading {
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.05rem;
  }





/* Carousel */


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

#bignames {
  background-color: var(--secondary-color);
  padding-top: 3%;
  padding-bottom: 3%;
}

.bignames-caption {
  background-color: var(--secondary-color);
}


/* Carousel base class */
.carousel {
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  background-color: #777;
  padding-bottom: 50%;
  background-color: transparent;
}

.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;

}



    /* BLOG */

  .blog-main {
      padding-top: 10%;
        padding-bottom: 10%;
       } 

     .blog-post {
      padding-top: 10px;
       } 

     .blog-sidebar {
        padding-top: 10%;
        padding-bottom: 10%;
     }

    .panel-body {
      width: 100%;
      background-color: #003882;
    }

     .item.video {
    width: 100%;
     }

    .page-title {
    padding-top: 10px;
 
  
    }


 .screen-reader-text {
      font-weight: bold;
  text-transform: uppercase;
}

.screen-reader-text label {
  color: white;

}

    .blog-post-title {
      padding-top: 10px;
                }



     .search-title {
      padding-top: 100px;
     }


  h3.widget-title {
  color: white;
   background-color: #a40000;
   margin: 2px;
   padding: 5px;
   
  }

  .recent-posts-widget-with-thumbnails {
      padding-left: 5px;
      padding-right: 5px;
      padding-bottom: 5px;
      border: 1px solid;
  }


    /* BLOG */

    /* YOUTUBE VIDEO GRID SHOWCASE */

     #video_grid_1_emd_video-view .thumbnail {
    width: 300px;
     }

     #video_grid_1_emd_video-view .panel-footer {
    width: 300px;
     }


    /* YOUTUBE VIDEO GRID SHOWCASE */

    main {
   padding-bottom: 50px;
}

.no-content {
padding-top: 100px;
 font-weight: bold;

}

#emd-primary {
    padding-top: 50%;
}

.sfsi_socialwpr {
  padding-bottom: 40px;
}


.feedburner-credit {
display: none;
}


.alignwide,
.alignfull {
  margin: 32px calc(50% - 50vw);
  max-width: 100vw;
  width: 100vw;
}



         /* FOOTER */   
   




    footer {
         background: url("https://mcguffmedia.com/wp-content/themes/mcguffmedia/../../uploads/2020/06/city.png") no-repeat;
      background-position: bottom;
        background-size: contain;
          color: white;
   margin-top: -90px;
    padding-top: 10%;
        padding-bottom: 35rem;
    }





.bg-footer {
     background-color: var(--dark-blue);
}


  footer a {
    color: white;
    font-size: 1.2em;
    margin-top: -50px;
  }

footer a:hover {
   color: #f7d117;
 }


footer li {
}

footer h3.widget-title {
  background-color: var(--dark-blue);
    border-bottom:1px solid #ffffff;
    padding-bottom:1px;
    color:white;
}





footer .widget_recent_entries {
padding: 0 20px 0 20px;
}

footer .widget_recent_entries li {
  list-style-type: disc;
  color: white;
}

#footer-darker {
  }


.fa {
  padding: 0.7rem;
}

#footer-bottom {
padding-top: 3rem;
}

    /* footer */

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







 /* ----------- PHONE ----------- */

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */



/* Portrait */
@media (max-device-width : 500px) {

.largeLogo {
  width: 140px;
}

.smallLogo {
  width: 120px;
}



 #hero {
     background: url("https://mcguffmedia.com/wp-content/themes/mcguffmedia/../../uploads/2020/06/pixel-1-1.png") no-repeat;
    background-position: center top;
  background-size: contain;
    position: relative;
    background-color: var(--primary-color)
              }

.larger {
  font-size: 2rem;
}


#portfolio .scale {
max-width: 80%;
}


#portfolio img {
margin: 20px;
}



#bignames {
     background: url("https://mcguffmedia.com/wp-content/themes/mcguffmedia/../../uploads/2020/06/pixel-1-1.png") no-repeat;
      background-color: var(--secondary-color);
        background-size: contain;
        padding-top: 10%;
  padding-bottom: 20%;
}


.carousel-inner {
padding-top: 15rem;
}

#services-top h4 {
  font-size: 1.25rem;

}


#services {
   background: url("https://mcguffmedia.com/wp-content/themes/mcguffmedia/../../uploads/2020/06/pixel-1-1.png") no-repeat;
      background-color: var(--lightblue);
        background-size: contain;
}




.photo-image {
  background-size: cover;
    width:100vw;
}


.videoimage {
  display: block;
  background-size: cover;
    width:100vw;
}



#hero h1 {
  font-size: 3em;
}

.background-text h2 {
  font-size: 2rem;
}

#klol {
margin-bottom: -15%;
}

#alz {
  padding-top: 40%;
    padding-bottom: 30%;
}


.translate.triggeredCSS3 {transform: translateX(0rem); }
.translate2.triggeredCSS3 {transform: translateX(0rem); }

}






/* Smartphones (landscape) ----------- */
/* Landscape */
@media only screen 
  and (min-device-width: 500px) 
  and (max-device-width: 900px)
  and (orientation: landscape) {

.largeLogo {
  width: 140px;
}

.smallLogo {
  width: 120px;
}

#hero h1 {
  font-size: 1.8rem;
}

#hero p {

}

.larger {
  font-size: 1.4rem;
}


#portfolio {
  padding-top: 20%;
  padding-bottom: 20%;
}

#portfolio h2 {
font-size: 2rem;
}

.port-image {
  margin-left: 5rem;
}


#bignames {
     background: url("https://mcguffmedia.com/wp-content/themes/mcguffmedia/../../uploads/2020/06/pixel-1-1.png") no-repeat;
      background-color: var(--secondary-color);
        background-size: contain;
        padding-top: 10%;
  padding-bottom: 20%;
}




.carousel-inner {
padding-top: 40%;
}


#services {
   background: url("https://mcguffmedia.com/wp-content/themes/mcguffmedia/../../uploads/2020/06/pixel-1-1.png") no-repeat;
      background-color: var(--lightblue);
        background-size: contain;
}


.photo-image {
  background-size: cover;
    width:100vw;
}


.videoimage {
  display: block;
  background-size: cover;
    width:100vw;
}

#alz {
  padding-top: 20%;
}


#hero2 {
  height: 40vh;
}

}



  /* iPads (portrait) ----------- */
  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

.largeLogo {
  width: 140px;
}

.smallLogo {
  width: 120px;
}



.larger {
  font-size: 2rem;
}


#portfolio img {
margin-left: 20%;
}


#bignames {
     background: url("https://mcguffmedia.com/wp-content/themes/mcguffmedia/../../uploads/2020/06/pixel-1-1.png") no-repeat;
      background-color: var(--secondary-color);
        background-size: contain;
        padding-top: 10%;
  padding-bottom: 20%;
}


.carousel-inner {
padding-top: 15rem;
}

#services-top h4 {
  font-size: 1.25rem;

}


#services {
   background: url("https://mcguffmedia.com/wp-content/themes/mcguffmedia/../../uploads/2020/06/pixel-1-1.png") no-repeat;
      background-color: var(--lightblue);
        background-size: contain;

}


.photo-image {
  background-size: cover;
    width:100vw;
}


.videoimage {
  display: block;
  background-size: cover;
    width:100vw;
}



#hero h1 {
  font-size: 3em;
}

.background-text h2 {
  font-size: 2rem;
}

#klol {
margin-bottom: -15%;
}

#alz {
  padding-top: 40%;
    padding-bottom: 30%;
}

.translate.triggeredCSS3 {transform: translateX(0rem); }
.translate2.triggeredCSS3 {transform: translateX(0rem); }


}

/* iPads (landscape) ----------- */
  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

#hero h1 {
font-size: 3rem;
}


.larger {
  font-size: 2rem;
}



.carousel-inner {
padding-top: 15rem;
}

.translate.triggeredCSS3 {transform: translateX(0rem); }
.translate2.triggeredCSS3 {transform: translateX(0rem); }

.text-container {

padding-top: 2%;
padding-bottom: 2%;
font-size: 1rem;
}



}





.wpcf7 .screen-reader-response{position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;padding:0;border:0;word-wrap:normal!important;word-break:normal!important}.wpcf7 .hidden-fields-container{display:none}.wpcf7 form .wpcf7-response-output{margin:2em .5em 1em;padding:.2em 1em;border:2px solid #00a0d2}.wpcf7 form.init .wpcf7-response-output,.wpcf7 form.resetting .wpcf7-response-output,.wpcf7 form.submitting .wpcf7-response-output{display:none}.wpcf7 form.sent .wpcf7-response-output{border-color:#46b450}.wpcf7 form.failed .wpcf7-response-output,.wpcf7 form.aborted .wpcf7-response-output{border-color:#dc3232}.wpcf7 form.spam .wpcf7-response-output{border-color:#f56e28}.wpcf7 form.invalid .wpcf7-response-output,.wpcf7 form.unaccepted .wpcf7-response-output,.wpcf7 form.payment-required .wpcf7-response-output{border-color:#ffb900}.wpcf7-form-control-wrap{position:relative}.wpcf7-not-valid-tip{color:#dc3232;font-size:1em;font-weight:400;display:block}.use-floating-validation-tip .wpcf7-not-valid-tip{position:relative;top:-2ex;left:1em;z-index:100;border:1px solid #dc3232;background:#fff;padding:.2em .8em;width:24em}.wpcf7-list-item{display:inline-block;margin:0 0 0 1em}.wpcf7-list-item-label::before,.wpcf7-list-item-label::after{content:" "}.wpcf7-spinner{visibility:hidden;display:inline-block;background-color:#23282d;opacity:.75;width:24px;height:24px;border:none;border-radius:100%;padding:0;margin:0 24px;position:relative}form.submitting .wpcf7-spinner{visibility:visible}.wpcf7-spinner::before{content:'';position:absolute;background-color:#fbfbfc;top:4px;left:4px;width:6px;height:6px;border:none;border-radius:100%;transform-origin:8px 8px;animation-name:spin;animation-duration:1e3ms;animation-timing-function:linear;animation-iteration-count:infinite}@media(prefers-reduced-motion:reduce){.wpcf7-spinner::before{animation-name:blink;animation-duration:2e3ms}}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes blink{from{opacity:0}50%{opacity:1}to{opacity:0}}.wpcf7 [inert]{opacity:.5}.wpcf7 input[type=file]{cursor:pointer}.wpcf7 input[type=file]:disabled{cursor:default}.wpcf7 .wpcf7-submit:disabled{cursor:not-allowed}.wpcf7 input[type=url],.wpcf7 input[type=email],.wpcf7 input[type=tel]{direction:ltr}.wpcf7-reflection>output{display:list-item;list-style:none}.wpcf7-reflection>output[hidden]{display:none}