/* 
  ________________ Dave's Pool Care
  version: 1.0.2
  date: 7 Dec 2020
  ----------------
font-family: 'Nunito', sans-serif;
font-family: 'Roboto', sans-serif;
font-family: 'Roboto Condensed', sans-serif;
*/
.grid-container { max-width: 62.5rem; font-family: 'Nunito', sans-serif; }
body { color: #444; }
h1 { color: #50A3F5; font-size: 2rem; font-weight: bold;}
h2 { color: #50A3F5; font-size: 2rem; font-family: 'Roboto Condensed', sans-serif; font-weight: bold; margin-bottom: 2rem;}
p { font-size: 1.2rem; }
a { color: #50A3F5; text-decoration: none; }
.cta { font-size: 1.2em; font-weight: 800; }
.button { border-radius: 50rem; font-family: 'Roboto Condensed', sans-serif; font-size: 2rem; font-weight: bold;}
.phone-ico { background: transparent url(../../images/phone.svg) center center no-repeat; padding: 0.2rem 1.2rem 0.2rem 0.7rem; background-size: 1.5rem;}
section#hero .button { margin-top: 2rem; margin-bottom: 6rem; }
section {
	padding: 4rem 1rem;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
/*------------------------------------------------------ Header Navigation */
header { 
	padding-bottom: 50px;
	padding-top: 10px;
	background-color: #DDEDFD;
	background-size: 1400px 58px; 
	background-image: url(../../images/wedge-nav.svg), url(../../images/logo-bg.svg), linear-gradient(0deg, rgba(221,237,253,1) 0%, rgba(239,245,251,1) 35%, rgba(221,237,253,1) 100%);
	background-position: center bottom, 5% 10%, left top;
	background-repeat: no-repeat, no-repeat;
	background-size: 1400px 58px, 300px auto, 100% 100%;
}
.top-bar-left h1 {
	color: #1779ba;
	font-size: 2.2rem;
	font-family: 'Roboto Condensed', sans-serif;
	text-align: center;
}
.top-bar-right .menu {
	justify-content: center;
}
.top-bar, .top-bar ul {
    background-color: transparent;
}
nav .menu a {
    color: #707070;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.2rem;
    text-transform: uppercase;
    padding: 0.7rem 0.5rem;
}
nav .menu a:hover, nav .menu .active > a {
    color: #50A3F5;
    background: transparent;
}

section#hero {
	min-height: 50vw;
	background-image: url(../../images/wedge-hero.svg), url(../../images/David-Chin-portrait.jpg);
	background-position: center bottom, 110% bottom;
	background-repeat: no-repeat;
	background-size: 102% auto, 45% auto;
}

@keyframes fadeInOut {
  0% {
    opacity:1;
  }
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
.value-prop {
	position: relative;
	height: 10vw;
}
.value-prop p {
	position: absolute;
	top: 0; left: 0;
	opacity: 0;
	animation-name: fadeInOut;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 16s;
}

.value-prop p:nth-of-type(1) {
  animation-delay: 12s;
}
.value-prop p:nth-of-type(2) {
  animation-delay: 8s;
}
.value-prop p:nth-of-type(3) {
  animation-delay: 4s;
}
.value-prop p:nth-of-type(4) {
  animation-delay: 0;
}

/*------------------------------------------------------ About */
section#about {
	background: #EFF6FD url(../../images/wedge-hi.svg) no-repeat;
	padding-bottom: 12vw;
	background-size: 102% auto;
	background-position: center 101%;
}
/*------------------------------------------------------ Services */
section#services strong {
	color: #50A3F5;
	font-size: 1.4rem;
}
/*------------------------------------------------------ Contact */
section#contact {
	background-color: #DDEDFD;
	background-image: url(../../images/wedge-lo.svg), url(../../images/wedge-hi.svg);
	background-position: center top, center 101%;
	background-repeat: no-repeat, no-repeat;
	background-size: 102% auto, 110% auto;
	padding: 12vw 1rem;
}

label { font-weight: bold; color: #50A3F5; font-size: 1.2rem; font-family: 'Roboto Condensed', sans-serif;}
[type="text"], [type="password"], [type="date"], [type="datetime"], [type="datetime-local"], [type="month"], [type="week"], [type="email"], [type="number"], [type="search"], [type="tel"], [type="time"], [type="url"], [type="color"], 
textarea, select  { border-radius: 5px; color: #444; box-shadow: #50A3F5;}

.comThanks p {
	color: #50A3F5;
	font: bolder 2rem/1.2 'Roboto', sans-serif;
	margin-bottom: 3rem;
}
::placeholder { color: #777; }
#mail, #phone {
	height: 0;
    margin: 0;
    padding: 0;
}
/*------------------------------------------------------ Footer */
footer {
	padding: 1rem; 
}
#copyright,
#design {
	text-align: center;
	font-size: 1rem;
}
#copyright a {color: #444;}
#design a {color: #ccc;}
#copyright a:hover, #design a:hover { color: inherit; }
#copyright {
	margin-bottom: 3rem;
}

section#hero h3 {
	color: #50A3F5;
	font: bolder 1.3rem/1.2 'Roboto', sans-serif;
}
section#hero .hero-text-iam {
	color: #707070;
	font: bolder 1.4rem/1.2 'Roboto', sans-serif;
	margin-bottom: 0;
}
section#hero .value-prop p {
	color: #50A3F5;
	font: bolder 1.4rem/1.2 'Roboto', sans-serif;
	margin-bottom: 2rem;
}

	@media print, screen and (min-width: 40em) {/* 640px */
		header { 
			padding-bottom: 60px;
			padding-top: 40px; 
			background-position: center bottom, 5% 25%, left top; 
		}
		.top-bar-left h1 {
			margin-right: 2rem;
		}
		.top-bar-right .menu {
			justify-content: flex-end;
		}
		h2 { font-size: 3rem; }
		section#hero h3 {
			font-size: 3.2vw;
		}
		section#hero .hero-text-iam, section#hero .value-prop p {
			font-size: 3.8vw;
		}
		section#hero {
			min-height: 50vw;
			background-position: center bottom, 90% bottom;
			background-size: 102% auto, 40% auto;
		}
		#copyright{
			text-align: left;
			margin-bottom: 0rem;
		}
		#design {
			text-align: right;
		}
	}
	@media print, screen and (min-width: 57em) { /* 912px */
		.top-bar-left h1 {
			text-align: left;
			font-size: 3rem;
		}
		section#hero h3 {
			font-size: 2.5vw;
		}
		section#hero .hero-text-iam, section#hero .value-prop p {
			font-size: 3.2vw;
		}
	}
	@media print, screen and (min-width: 75em) { /* 1200px */
		header { background-position: center bottom, 20% 25%, left top; }
		section#hero {
			min-height: 47vh;
			background-image: url(../../images/wedge-hero.svg), url(../../images/David-Chin-portrait.jpg);
			background-position: center bottom, 80% bottom;
			background-repeat: no-repeat;
			padding: ;
			background-size: 102% auto, 500px auto;
		}
		section#hero h3 {
			font-size: 2vw;
		}
		section#hero .hero-text-iam, section#hero .value-prop p {
			font-size: 2.5vw;
		}
	}