/*---------------------------------------------------------------------------------

 Theme Name:   Riverview United Church Child Theme
 Theme URI:    https://riverviewunited.org
 Description:  
 Author:       Lisa Missenda
 Author URI:   https://whitehartinsight.com
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

------------------------------ ADDITIONAL CSS HERE ------------------------------*/

h1{font-family: 'Handlee', cursive;}
h2{font-family: 'Handlee', cursive;}
h3{font-family: 'Open Sans', sans-serif;}
p{font-family: 'Open Sans', sans-serif;}
h1.worshipannouncement{font-family: 'Open Sans', sans-serif;text-align:center;color:#fffffc;}
a.worshipannouncement{cursor: -webkit-grab; cursor: grab;}
#divi-sticky-header {
	top: 0;
    width: 100%;
	z-index: 99 !important;
	margin:0px auto;
	background-color:#21374A;
}
#pagetitle{font-size:2em; line-height:1.2em; margin-top:60px;margin-bottom:10px;}
#titlelogo{margin-top:-100px!important;padding-bottom:60px;}
div.numberbox{padding:5% 5% 5% 5%; background-color:#21374A; color:#ffffff;font-size:1.2em;}
p.numberboxtext{padding:5% 2%; font-family: 'Open Sans', sans-serif;}
h2.sidebartitles{font-family: 'Open Sans', sans-serif; font-weight:900; font-size:2em;}
.et_pb_blurb_position_left .et_pb_main_blurb_image { width: 300px !important; }
.et_pb_blurb_position_left .et-pb-icon { font-size: 300px !important; }
#sticker{background-color:#ffffff;}
.et_pb_blurb_0.et_pb_blurb .et_pb_module_header, .et_pb_blurb_0.et_pb_blurb .et_pb_module_header a {
	padding-top: 88px !important;
	line-height: 1.3em !important;}

.readmorebtn{border:solid 2px #ffffff;background-color:transparent; color:#ffffff;font-size:1.6em;}
.readmorebtn:hover{border:solid 2px #21374A; background-color: rgba(211, 213, 212, 0.5);}
p.pastormessagetext{color:#ffffff; font-size:1.6em;}
h2.pastormessagetitle{color:#ffffff; font-size:3em; line-height:1.3em;}
h2.ministrysectiontitle{font-size:3em; text-align:center;}
h2.connecttitle{font-size:3em; color:#ffffff; text-align:center;}
/*---------------------animated border-------------------*/
.header {
  position:relative;
  background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);
  color:#21374A;
}
.inner-header {
  height:15vh;
  width:100%;
  margin: 0;
  padding: 0;
}
.flex { /*Flexbox for containers*/
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.waves {
  position:relative;
  width: 100%;
  height:15vh;
  margin-bottom:-7px; /*Fix for safari gap*/
  min-height:100px;
  max-height:150px;
}

/* Animation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height:40px;
    min-height:40px;
  }
  .content {
    height:30vh;
  }
  h1 {
    font-size:24px;
  }
}
/*-------------drip section------------------------*/
#ripple {
  background-color: #21374a;
  overflow: hidden;
}

.droptext{color:#D3D5D4; text-align:center; font-size:3em;}

div #ripple2 {
  margin: 175px auto;
}

.drop {
  position: relative;
	width: 20px;
	height: 20px;
  top: -30px;
  margin: 0 auto;
	background: #FFF;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
  -moz-animation-name: drip;
  -webkit-animation-name: drip;
  animation-name: drip;
  -moz-animation-timing-function: cubic-bezier(1,0,.91,.19);
  -webkit-animation-timing-function: cubic-bezier(1,0,.91,.19);
  animation-timing-function: cubic-bezier(1,0,.91,.19);
  -moz-animation-duration: 2s;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.drop:before {
  content: "";
  position: absolute;
  width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 30px solid rgba(255,255,255,1);
  top: -22px;
}

.wave {
  position: relative;
  opacity: 0;
  top: 0;
	width: 2px;
	height: 1px;
  border: #FFF 7px solid;
	-moz-border-radius: 300px / 150px;
	-webkit-border-radius: 300px / 150px;
	border-radius: 300px / 150px;
  -moz-animation-name: ripple;
  -webkit-animation-name: ripple;
  animation-name: ripple;
  -moz-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -moz-animation-duration: 2s;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.wave:after {
  content: "";
  position: absolute;
  opacity: 0;
  top: -5px;
  left: -5px;
	width: 2px;
	height: 1px;
  border: #FFF 5px solid;
	-moz-border-radius: 300px / 150px;
	-webkit-border-radius: 300px / 150px;
	border-radius: 300px / 150px;
  -moz-animation-name: ripple-2;
  -webkit-animation-name: ripple-2;
  animation-name: ripple-2;
  -moz-animation-duration: 2s;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@keyframes ripple {
    from {
      opacity: 1;
    }
    to {
      width: 600px;
      height: 300px;
      border-width: 1px;
      top: -100px;
      opacity: 0;
    }
}

@keyframes ripple-2 {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
  100% {
    width: 200px;
    height: 100px;
    border-width: 1px;
    top: 100px;
    left: 200px;
  }
}

@keyframes drip {
    to {
      top: 180px;
    }
}
/*-------Make Columns equal-----------*/
.flex-row-wrapper {
 display: flex;
}
 
.flex-row-wrapper .et_pb_column {
 display: flex;
 flex-direction: column;
 padding: 20px;
 justify-content: space-between;
	background-color:#9DB5B2;
}

@media screen and (max-width: 981px) {
  .flex-row-wrapper  { 
   flex-direction:column;
}
}

.usp-title{ font-size: 0; }
.usp-title:before { content: "First Initial of Your Name"; font-size: 16px; padding-bottom:0px; }
.wp-uspcontent-media-buttons{display: none;}
/* Large screens (1405px upwards) */
@media only screen and ( min-width: 1405px ) { 
	#homeheader{background-size:100% 100%;}
}
 
/* Laptops and desktops (1100-1405px) */
@media only screen and ( min-width: 1100px ) and ( max-width: 1405px) { 
    /* your css goes here */
}
 
/* Tablets in landscape mode (981-1100px) */
@media only screen and ( min-width: 981px ) and ( max-width: 1100px ) { 
    .et_pb_blurb_0.et_pb_blurb .et_pb_module_header, .et_pb_blurb_0.et_pb_blurb .et_pb_module_header a {
    padding-top: 0px !important;
		margin-top:-100px;
    line-height: 1.3em !important;}
}
 
/* Tablets in portrait mode (768-980px) */
@media only screen and ( min-width: 768px ) and ( max-width: 980px ) {
    /* your css goes here */
}
 
/* Smartphones in landscape mode (480-768px) */
@media only screen and ( min-width: 480px ) and ( max-width: 767px ) {
	.et_pb_section{background-color:transparent;}
}
 
/* Smartphones in portrait mode (0-479px) */
@media only screen and ( max-width: 479px ) {
.et_pb_section{background-color:transparent;}
}