/* 
 Theme Name:     Kern Design Studio
 Author:         Kern Design Studio
 Author URI:     Tommy Kern
 Template:       Divi
 Version:        2.7.8
 Description:   Child Theme for Kern Design Studio
 Wordpress Version: 4.5.3
*/ 


/* ----------- PUT YOUR CUSTOM CSS BELOW THIS LINE -- DO NOT EDIT ABOVE THIS LINE --------------------------- */ 

/*-----Shutter-----*/
.ds-hover-1 {
    display: inline-block;
	position: relative;
	margin: 0px;
	overflow: hidden;
	background: #000;
}
.ds-hover-1 img {
	display: block;
	max-width: 100%;
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}
.ds-hover-1:hover img {
	opacity: 0.5;
}
.ds-hover-1::after {
	content: attr(ds-title);
	position: absolute;
	height: 12%;
	color: #fff;
    z-index: 1;
	top: 0;
	width: 90%;
	background: rgba(0,0,0,0.5);
	font-weight: 300;
	font-size: 40px;
	text-transform: uppercase;
	padding: 5%;
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);
    -webkit-transition: -webkit-transform 0.3s ease-in-out; 
	-moz-transition: -moz-transform 0.3s ease-in-out; 
	transition: transform 0.3s ease-in-out; 
}
.ds-hover-1::before {
	content: attr(ds-desc);
	position: absolute;
	height: 100%;
	color: #fff;
	z-index: 1;
	top: 27%;
	width: initial;
	background: rgba(255,102,0,0.5);
	font-size: 16px;
	padding: 2% 5% 5% 5%;
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);
	transform: translateY(100%);
    -webkit-transition: -webkit-transform 0.3s ease-in-out; 
	-moz-transition: -moz-transform 0.3s ease-in-out; 
	transition: transform 0.3s ease-in-out; 
}
.ds-hover-1:hover::after,
.ds-hover-1:hover::before {
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	transform: translateY(0%);
}




/*-----Fade Effect-----*/
.ds-hover-3 {
	display: inline-block;
	position: relative;
	
}
.ds-hover-3 img {
	display: block;
	max-width: 100%;
}
.ds-hover-3::before,
.ds-hover-3::after {
	opacity: 0;
	position: absolute;
	width: 90%;
	color: #fff;
	padding: 5%;
	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	transition: opacity 0.3s;
}
.ds-hover-3::before {
	content: attr(ds-title);
	top: 0;
	height: 10%;
	background: rgba(0,0,0,0.5);
	font-size: 40px;
	text-transform: uppercase;
	font-weight: 300;
}
.ds-hover-3::after {
	content: attr(ds-desc);
	top: 25%;
	height: 60%;
	width: initial;
	background: rgba(255,102,0,0.5);
	font-size: 16px;
	text-align: right;
}
.ds-hover-3:hover::before,
.ds-hover-3:hover::after {
	opacity: 1;
}

/*-----Hover Effect-----*/
.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

.hovereffect .overlay {
  position: absolute;
  overflow: hidden;
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
  border-bottom: 1px solid #FFF;
  border-top: 1px solid #FFF;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale(0,1);
  -ms-transform: scale(0,1);
  transform: scale(0,1);
}

.hovereffect:hover .overlay {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.hovereffect img {
  display: block;
  position: relative;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}

.hovereffect:hover img {
  filter: url('data:image/svg+xml;charset=utf-8,#filter');
  filter: brightness(0.3);
  -webkit-filter: brightness(0.3);
}

.hovereffect h2 {
  text-transform: capitalize;
  text-align: center;
  position: relative;
  font-size: 20px;
  background-color: transparent;
  color: #FFF;
  padding: 1em 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,-100%,0);
  transform: translate3d(0,-100%,0);
}

.hovereffect a, hovereffect p {
  color: #FFF;
  padding: 1em 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,100%,0);
  transform: translate3d(0,100%,0);
}

.hovereffect:hover a, .hovereffect:hover p, .hovereffect:hover h2 {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}




/*-----Blurb Sonar-----*/
.et_pb_blurb_content:hover {
   cursor: pointer !important;
}
.sonarEffect .et-pb-icon {
   border-radius: 100%;
   position: relative;
}
.sonarEffect .et-pb-icon:after {
   position: absolute;
   width: 100%;
   height: 100%;
   border-radius: 100%;
   content:'';
   -webkit-box-sizing: content-box;
   -moz-box-sizing: content-box;
   box-sizing: content-box;
}
.sonarEffect .et-pb-icon:after {
   top: 0;
   left: 0;
}
.sonarEffect .et-pb-icon:hover {
   color: #fff;
}
.sonarEffect .et_pb_blurb_content:hover .et-pb-icon:after {
   -webkit-animation: sonarEffect 1.3s ease-out 75ms;
   -moz-animation: sonarEffect 1.3s ease-out 75ms;
   animation: sonarEffect 1.3s ease-out 75ms;
}
@-webkit-keyframes sonarEffect {
   0% {
       opacity: 0.3;
   }
   40% {
       opacity: 0.5;
       box-shadow: 0 0 0 2px rgba(53,186,242, 0.1), 0 0 10px 10px #7b7f81, 0 0 0 10px rgba(255, 255, 255, 0.5);
   }
   100% {
       box-shadow: 0 0 0 2px rgba(53,186,242, 0.1), 0 0 10px 10px #7b7f81, 0 0 0 10px rgba(255, 255, 255, 0.5);
       -webkit-transform: scale(1.5);
       opacity: 0;
   }
}
@-moz-keyframes sonarEffect {
   0% {
       opacity: 0.3;
   }
   40% {
       opacity: 0.5;
       box-shadow: 0 0 0 2px rgba(53,186,242, 0.1), 0 0 10px 10px #7b7f81, 0 0 0 10px rgba(255, 255, 255, 0.5);
   }
   100% {
       box-shadow: 0 0 0 2px rgba(53,186,242, 0.1), 0 0 10px 10px #7b7f81, 0 0 0 10px rgba(255, 255, 255, 0.5);
       -moz-transform: scale(1.5);
       opacity: 0;
   }
}
@keyframes sonarEffect {
   0% {
       opacity: 0.3;
   }
   40% {
       opacity: 0.5;
       box-shadow: 0 0 0 2px rgba(53,186,242, 0.1), 0 0 10px 10px #7b7f81, 0 0 0 10px rgba(255, 255, 255, 0.5);
   }
   100% {
       box-shadow: 0 0 0 2px rgba(53,186,242, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5);
       transform: scale(1.5);
       opacity: 0;
   }
}