/*
Theme Name: Keegan Wilcox Director
Theme URI: https://keeganwilcox.com/
Description: Keegan Wilcox Director Exclusive Theme
Version: 1.0
Author: Taisuke Inui
Author URI: https://samurai-web-works.com/
*/

/* wordpress blog */
img.alignright { display: block; margin: 0 0 0 auto; }

img.alignleft { display: block; margin: 0 auto 0 0; }

img.aligncenter { display: block; margin: 0 auto; }

a:hover img.hoverImg{opacity:0.6;}

.flex-box {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.flex-height {display: flex; align-items: center;}

.flex-box {
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
 align-items: center; /* 縦方向中央揃え */
 -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
 justify-content: center; /* 横方向中央揃え */
 height:100%;
}

.container {max-width: 1230px;}

@media screen and (max-width: 1199px){
.container {max-width: 100%;}
}

.img-center{display:block; margin-left:auto; margin-right:auto;}

.img-opacity{opacity:.7;}

.no-padding{padding-left:0; padding-right:0;}

html{font-size:17px;}

body{font-family: 'Nunito Sans', sans-serif; line-height:1.6rem; color:#fff; background:#232323;}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family: 'Nunito Sans', sans-serif; font-weight:bold; letter-spacing:2px;}

.bg-white{color:#232323;}

.bg-black{background:#000;}

.sec-padding-180px{padding:180px 0;}

.sec-padding-180px-120px{padding:180px 0 120px;}

.sec-padding-120px{padding:120px 0;}

.sec-padding-60px{padding:60px 0;}

.sec-padding-70px{padding:70px 0;}

.sec-padding-80px{padding:80px 0;}

.sec-padding-90px{padding:90px 0;}

.sec-padding-90px-45px{padding:90px 0 45px;}

.mb-2rem{margin-bottom:2rem;}

.mb-10px{margin-bottom:10px !important;}

.mb-15px{margin-bottom:15px !important;}

.mb-20px{margin-bottom:20px !important;}

.mb-30px{margin-bottom:30px !important;}

.mb-35px{margin-bottom:35px !important;}

.mb-40px{margin-bottom:40px !important;}

.mb-45px{margin-bottom:45px !important;}

.mb-50px{margin-bottom:50px !important;}

.mb-60px{margin-bottom:60px !important;}

.mb-70px{margin-bottom:70px !important;}

.mb-80px{margin-bottom:80px !important;}

.mb-90px{margin-bottom:90px !important;}

.mb-100px{margin-bottom:100px !important;}

.mb-110px{margin-bottom:110px !important;}

.mb-120px{margin-bottom:120px !important;}

.mb-130px{margin-bottom:130px !important;}

.mb-140px{margin-bottom:140px !important;}

.mb-160px{margin-bottom:160px !important;}

.mb-180px{margin-bottom:180px !important;}

.pt-30px{padding-top:30px !important;}

.pt-35px{padding-top:35px !important;}

.pt-40px{padding-top:40px !important;}

.pt-60px{padding-top:60px !important;}

.pt-100px{padding-top:100px !important;}

.pt-150px{padding-top:150px !important;}

.pb-30px{padding-bottom:30px !important;}

.pb-35px{padding-bottom:35px !important;}

.pb-40px{padding-bottom:40px !important;}

.pb-50px{padding-bottom:50px !important;}

.pb-60px{padding-bottom:60px !important;}

.pb-100px{padding-bottom:100px !important;}

.pb-150px{padding-bottom:150px !important;}

@media screen and (max-width:767px){
 .mb-md-12px{margin-bottom:12px !important;}
 
 .mb-md-50px{margin-bottom:50px !important;}
}

/* nav */
.logo-header{width:80px;}

.navbar{padding:1rem;}

.nav-link{padding:0;}

.navbar-expand-lg .navbar-nav .nav-link{padding-left:0; padding-right:0; margin-left:.8rem; margin-right:.8rem;}

.navbar-dark .navbar-nav .show>.nav-link, .navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .nav-link.active{color:#f09728; padding-bottom:4px; border-bottom:3px solid #f09728;}

.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus{color:#f09728; padding-bottom:4px; border-bottom:3px solid #f09728;}

.navbar-dark .navbar-nav .nav-link{color:#fff;}

@media screen and (max-width:991px){
 .navbar{text-align:center;}
 
 .navbar-dark .navbar-nav .show>.nav-link, .navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .nav-link.active{padding-bottom:0; border:none;}

 .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus{padding-bottom:0; border:none;}
 
 .nav-item{margin-bottom:13px;}
 
 .nav-item:last-child{margin-bottom:0;}
}

@media screen and (max-width:767px){
 .navbar{padding:.5rem 1rem;}
 
 .logo-header{width:50px;}
}

/* footer */
footer{padding:50px 0;}

footer i{font-size:1.5rem;}

footer a, footer a:hover, footer a:focus{color:#fff;}

footer a:hover{opacity:.6;}

footer .text-warning{color:#f09728 !important;}

footer h5:after{content:''; border-bottom:4px solid #fec24c; display:block; width:25px; padding-top:12px;}

footer .slash{color:#fec24c !important;}

#footer-bg-home{background:url('/wp-content/themes/keeganwilcox/images/bg-index-contact.jpg') top center no-repeat; background-size:cover;}

#footer-bg-about{background:url('/wp-content/themes/keeganwilcox/images/bg-page-about-footer.jpg') top center no-repeat; background-size:cover; padding-top:670px;}

#footer-bg-gallery{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#353130+0,040405+100 */
background: #353130; /* Old browsers */
background: -moz-linear-gradient(top,  #353130 0%, #040405 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #353130 0%,#040405 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #353130 0%,#040405 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353130', endColorstr='#040405',GradientType=0 ); /* IE6-9 */
padding:170px 0 80px;}

#footer-bg-contact{background:url('/wp-content/themes/keeganwilcox/images/bg-page-contact.jpg') top center no-repeat; background-size:cover; position: relative; min-height: 90vh;}

#footer-bottom{position: absolute; bottom: 0;}

/* index */
#main-content .container-fluid{padding-left:40px; padding-right:40px;}

#main-content .col-lg-8, #main-content .col-md-12{padding-left:7.5px; padding-right:7.5px;}

.logo-hero-image{width:500px;}

.portfolio-box h2{font-size:1.45rem; border-bottom:6px solid #f09628; padding-bottom:6px;}

.hover-box {
  background: rgba(160, 107, 0, 0.4);
  bottom: 0;
  color: white;
  font-size: 1rem;
  left: 7.5px;
  opacity: 0;
  overflow: hidden;
  padding: 2rem;
  position: absolute;
  text-align: center;
  top: 0;
  right: 7.5px;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}

.hover-box:hover {opacity: 1;}

.hover-box h2{margin-bottom:0;}

section{background:#232323;}

section.no-bg-color{background:rgba(0,0,0,.5);}

.text-warning{color:#fec24d !important;}

.yellow-border:after{content:''; border-bottom:4px solid #f09628; display:block; margin-left:auto; margin-right:auto; width:24%; padding-top:17px;}

.yellow-border-short:after{content:''; border-bottom:4px solid #fec24c; display:block; margin-left:auto; margin-right:auto; width:6%; padding-top:17px;}

.logo-welcome{position:absolute; left:-216px; width:550px;}

.index-about-paragraph{margin-top:190px;}

.bg-about{background:url('/wp-content/themes/keeganwilcox/images/bg-index-about.jpg') top center no-repeat; background-size:cover;}

@media screen and (max-width:991px){
 .portfolio-box h2{font-size:1.5rem;}
  
 .logo-welcome{position:static;}
 
 .index-about-paragraph{margin-top:40px;}
 
 .img-60per-md{width:60%;}
}

@media screen and (max-width:767px){
 .logo-hero-image{width:70%;}
 
 .bg-about{background:url('/wp-content/themes/keeganwilcox/images/bg-index-about.jpg') top left no-repeat; background-size:cover;}
}

/* page */
#page-head-gallery{padding:180px 0; background:url('/wp-content/themes/keeganwilcox/images/bg-page-gallery.jpg') center center no-repeat; background-size:cover;}

#page-head-gallery h1{color:rgba(255, 190, 63, .7); text-align:center; font-size:4rem;}

@media screen and (max-width:767px){
 #page-head-gallery{background-position:top right;}
 
 #page-head-gallery h1{font-size:2.5rem;}
}

.main-bg-galley{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#232323+0,353130+100 */
background: #232323; /* Old browsers */
background: -moz-linear-gradient(top,  #232323 0%, #353130 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #232323 0%,#353130 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #232323 0%,#353130 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#232323', endColorstr='#353130',GradientType=0 ); /* IE6-9 */
}

#page-about-bg-top{background:url('/wp-content/themes/keeganwilcox/images/bg-page-about-top.jpg') center center no-repeat;}

#page-about-bg-bottom{background:url('/wp-content/themes/keeganwilcox/images/bg-page-about-bottom.png') center center no-repeat;}

.img-about02{width:730px;}

@media screen and (max-width:1519px){
 .img-about02{width:650px;}
}

@media screen and (max-width:1359px){
 .img-about02{width:580px;}
}

@media screen and (max-width:1224px){
 .img-about02{width:530px;}
}

@media screen and (max-width:1049px){
 .img-about02{max-width:100%; height:auto;}
}

.sec-padding-60px-about{padding:60px 0;}

.sec-padding-60px-35px{padding:60px 0 35px;}

@media screen and (max-width:767px){
.sec-padding-60px-about{padding:60px 0 0;}
	
.sec-padding-60px-35px{padding:0 0 35px;}
}

/* video background */
.vimeo-wrapper {
   top: 0;
   left: 0;
   width: 100%;
   height:775px;
   overflow: hidden;
   position:relative;
}
.vimeo-wrapper iframe {
   width: 100%;
   height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
   min-height: 85vh;
   min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   position: fixed;
   z-index:-999;
}

.vimeo-wrapper-overlay {
background: #232323;
opacity: 0;
position: absolute;
left: 0;
top: 0;
right: 0;
z-index: auto;
width: 100%;
height: 100%;
} 

.vimeo-wrapper .text-area{position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  margin: auto;
  text-align:center;
  z-index:1000;
  /*text-shadow:0 0 10px #000, 0 0 20px #000;*/
  width:100%;
}

.vimeo-wrapper h1{font-size:5.5rem; font-family: 'Raleway', sans-serif; text-transform:uppercase;}

.vimeo-wrapper h2{font-family: 'Raleway', sans-serif;}

.vimeo-wrapper .arrow {
  text-align: center;
  position:absolute;
  bottom:25px;
  text-align:center;
  width:100%;
  z-index:2;
}

.vimeo-wrapper .bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

.blink{
	text-decoration: blink;
	-webkit-animation-name: blinker;
	-webkit-animation-duration: 1.2s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-direction: alternate;
}

.vimeo-wrapper a, .vimeo-wrapper a:hover, .vimeo-wrapper a:focus{color:#fff;}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-5px);
  }
}

@-webkit-keyframes blinker {
  from {opacity: 1.0;}
  to {opacity: 0.5;}
}

@media screen and (max-width:767px){
 .vimeo-wrapper{height:550px;}
 
 .vimeo-wrapper h1{font-size:2.5rem;}
}

.gradient-bg-overlay{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#232323+0,232323+100&0+0,1+100 */
background: -moz-linear-gradient(top,  rgba(35,35,35,0) 0%, rgba(35,35,35,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(35,35,35,0) 0%,rgba(35,35,35,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(35,35,35,0) 0%,rgba(35,35,35,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00232323', endColorstr='#232323',GradientType=0 ); /* IE6-9 */
height:150px; width:100%; position:absolute; top:-150px; z-index:1000;
}

.gradient-bg-overlay-about{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#232323+0,232323+100&0+0,1+100 */
background: -moz-linear-gradient(top,  rgba(35,35,35,1) 0%, rgba(35,35,35,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(35,35,35,1) 0%,rgba(35,35,35,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(35,35,35,1) 0%,rgba(35,35,35,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00232323', endColorstr='#232323',GradientType=0 ); /* IE6-9 */
height:150px; width:100%; position:absolute; top:0; z-index:1000;
}

/* video pop up */
.mfp-fade.mfp-bg {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out; 
	-moz-transition: all 0.15s ease-out; 
	transition: all 0.15s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
	opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
	opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out; 
	-moz-transition: all 0.15s ease-out; 
	transition: all 0.15s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
}

ul.clients-logo {
  text-align: center;
  margin-bottom:0;
}
ul.clients-logo li {
  display: inline-block;
  vertical-align: middle;
}
ul.clients-logo li a {
  display: block;
}
ul.clients-logo {
  font-size: 0;
  padding-left:0;
}
ul.clients-logo li {
  margin-left:1.25rem; margin-right:1.25rem; margin-bottom:1.5rem;
}
ul.clients-logo li img {
  max-height: 100px;
  width: auto;
}

@media screen and (max-width:1829px){
 ul.clients-logo li img {max-height: 90px;}
}

@media screen and (max-width:1699px){
 ul.clients-logo li img {max-height: 80px;}
}

@media screen and (max-width:1599px){
 ul.clients-logo li img {max-height: 70px;}
}

@media screen and (max-width:1449px){
 ul.clients-logo li img {max-height: 60px;}
}

/* btn */
.btn{padding:.5rem 2em; border-radius:0;}

.btn-outline-light:hover, .btn-outline-light:focus{background-color:#f09628; border-color:#f09628; color:#fff;}

@media screen and (max-width:767px){
 .btn-sm-center{text-align:center;}
}

/* page */
#page-contact hr{border-top:1px solid #777;}

/* Back to Top */
#return-to-top {
    z-index:1000;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(240, 150, 40, 0.5);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top i {
    z-index:1200;
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
    top: 5px;
}