.hide {display: none;}
.show {display: block;}
html, body {
  height: 100%;
}
body {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 400;
  color: #383838;
}
body {
    background: #f3f5f5 url(../img/gradient-bg-lt.jpg) 50% 0 repeat-y !important;
}

a {
	color: #0096d6;
	text-decoration:none;
	/* border-bottom: 1px dotted ! important; */
}
a:hover {
	color: #000000;
	/* border: none ! important; */
	border-bottom: 1px dotted ! important;
}

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

#bg {background-color: #ffffff;}

.container {
	padding-left: 15vw;
	padding-right: 15vw;
}
.container-wide {
	padding-left: 12vw;
	padding-right: 12vw;
}
.container-right {
	padding-left: 15vw;
	padding-right: 12vw;
}
.responsive-image {
	max-width: 100%;
	height: auto;
}
#hero {
	padding-top: 5vw;
	padding-bottom: 4vw;
	text-align: center;
}
.h1 {
	font-family: Georgia, serif;
	font-size: 40px; 
}
.fade {color: #a4a4a4;}
.strike {
	text-decoration-line: line-through;
	-webkit-text-decoration-line: line-through;
    text-decoration-color: red;
    -webkit-text-decoration-color: red;
}
.section {
	padding-top: 4vw;
}
.layer-right {
	display: grid;
	grid-template-columns: 2.1fr 1fr;
}
.layer-left {
	display: grid;
	grid-template-columns: 1fr 2.1fr;
}
.text-left {
	padding-top: 1vw;
	padding-right: 1vw;
	border: 0px solid #000000;
}
.text-right {
	padding-top: 1vw;
	padding-left: 4vw;
	border: 0px solid #000000;
}
.image-right {
	display: flex;
	justify-content: center;
	border: 0px solid #000000;
}
.image-left {
	display: flex;
	justify-content: center;
	border: 0px solid #000000;
}
.eyebrow {
	font-size: 14px; 
	font-weight: 700;
	text-transform: uppercase;
}
.title {
	font-family: Georgia, serif;
	font-size: 30px;
	color: #998675;
	padding-top: 1vw;
	padding-bottom: .6vw;
}
.main-copy {
	font-size: 18px;
}	
.regular-italic {
	font-style: italic;
}
.regular-bold {
	font-weight: 700;
}
#first-principles img {
	max-width: 187px ! important;
	max-height: 226px ! important;
}
#inspiration img {
	max-width: 286px;
	max-height: 422px;
}
#audience-matters .section {
	padding-top: 6vw;
}
#audience-matters img {
	padding-top: 2vw;
	max-width: 300px;
	max-height: 268px;
}
#audience-matters .text-left {
	padding-right: 3vw;
}
#brand img {
	max-width: 308px;
	max-height: 288px;
}
.bullet-callout {
	margin-top: 2vw;
	background-color: #f7f6f4;
	border-radius: 60px;
	padding-top: 34px;
	padding-bottom: 20px;
	padding-left:50px;
	padding-right:50px;
}
.bullet-title {
	font-family: Georgia, serif;
	font-size: 20px;
	color: #48b1e1;
}
.bullet-desc {
	font-size: 15px;
	padding-top:6px;
	padding-bottom:24px;
}
#footer {}
.footer {
	width: 100%;
	min-height: 200px;
	margin-top: 12vw;
	background-color: #f7f6f4;
	border: 1px solid #f7f6f4;
	padding-bottom: 4vw;
}
#frank-circle {
	width: 217px;
	height: 217px;
	background: url(../img/frank-circle-sm.png); 
	background-size: cover;
	background-repeat: none;
	margin-left: auto;
	margin-right: auto;
	margin-top: -110px ! important;
	z-index: 1;
	border: 0px solid #000000;
}
#footer-title {
	text-align: center;
}
.footer-title {
	font-family: Georgia, serif;
	font-size: 28px;
	color: #48b1e1;
	text-align: center;
	padding-left: 2vw;
	border: 0px solid #000000;
}
.trademark {
	font-family: 'Nunito Sans', sans-serif;
  	font-weight: 400;
  	font-size:18px;
  	vertical-align: super;
}
.footer-tagline {
	font-family: 'Nunito Sans', sans-serif;
  	font-weight: 700;
  	font-size: 14px;
  	text-align: center;
  	text-transform: uppercase;
  	color: #000000;
  	padding-top: 10px;
  	padding-left: 1vw;
}
button.wbtn {
  border-radius: 36px;
  color:#383838;
  background-color:#ffffff;
  font-size:16px;
  border:1px solid #dfdce2;
  cursor:pointer;
  padding: 10px 30px ! important;
}
button.wbtn:hover {
	color: #48b1e1;
	border:1px solid #48b1e1;
}
#footer-btns {
	display: grid;
	grid-template-columns: 30vw 30vw;
	padding-left: 20vw;
	padding-right: 20vw;
	margin-top: 4vw;
}
#btn1 {
	display: flex;
	justify-content: center;
	border: 0px solid #000000;
}
#btn2 {
	display: flex;
	justify-content: center;
	border: 0px solid #000000;
}

@media (max-width: 840px) {
#hero {
	padding-left: 4vw;
	padding-right: 4vw;
	padding-top: 8vw;
	padding-bottom: 4vw;
}
.section {
	padding-top: 12vw;
}
.layer-right {
	display: grid;
	grid-template-columns: 1fr;
}
.layer-right :nth-child(1) { order: 2; }
.layer-right :nth-child(2) { order: 1; }

.layer-left {
	display: grid;
	grid-template-columns: 1fr;
}
#footer-btns {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 20px;
	padding-left: 20vw;
	padding-right: 20vw;
	margin-top: 4vw;
}
.footer {
	margin-top: 30vw;
}
}