body {
	background: #081729;
	margin-left: 1%;
	margin-right: 1%;
	min-height: 1800px;
}
	
body::before {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background: linear-gradient(#f00, #f0f);
	clip-path:circle(30% at right 70%);
}

body::after {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background: linear-gradient(#2196f3, #e91e63);
	clip-path:circle(20% at 10% 10%);
}
/*
.navbar-header {height:80px;}
*/
h1, h2, h3 {font-family: 'Righteous', cursive;}

h2 {text-align: left;}

p {padding-bottom:0}

.introsection {
	background: #081729;
	padding: 12% 12% 5%;
	margin-bottom: -3em;		  
}

			
.introsection h3 {
  font-family: 'Open Sans Condensed', sans-serif;
  letter-spacing: 2px;
  color: #fff;
  font-size: 18px;
  
}

/* ====
 LIVE SITES TEXT LIST SECTION
======== */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap');

:root {
  --colorBlack: #0D0D0D;
  --colorWhite: #F2F2F2;
  --colorTealA: rgb(31, 191, 175);
  --colorTealB: rgb(82, 209, 222);
  --colorTealC: #0C5952;
  --colorTealD: rgb(82, 209, 220);
  --colorOrange: #fe7a50;
  --colorGrey: rgba(57, 62, 65, 0.5);  
}


#list-header {
    width: 100%;
}
#list-header span {
  font-size: 2rem;
  display: block;
  position: relative;
  text-align: center;
  color: var(--colorOrange);
  padding: 0.5rem;
  margin-bottom: 30px;
  border-top: 1px solid var(--colorTealB);
  border-bottom: 1px solid var(--colorTealB);
  z-index:12;
}
.dcrp {
    background: #081729;
    color: var(--colorWhite);
    padding: 0 1.5rem;
    margin: auto;
}
.header-row {
  padding: 1.5rem 1rem;
}
.dcrp-header {
  text-align: center;
}
.dcrp-body {
  max-width: 1100px;
  
}
.dcrp-body > div {
  padding: 0.75rem 1rem;
}
div.row {
  margin-bottom: 2vh;
  margin-top: 2vh;
}
 .dcrp a { 
text-decoration: none;
  font-weight: 700;
  cursor: pointer;
  transition: color 350ms linear;
   color: var(--colorTealA);
}
 .dcrp a:active,  .dcrp a:hover {
  color: var(--colorWhite);
  text-decoration: none;
}
.dcrp ul {
  list-style: none; /* Remove list bullets */
  padding: 0;
  margin: 0;
}
.dcrp ul li {
  padding-left: 16px;
}

.dcrp ul li:before {
  content: ' ★ ';
  padding-right: 8px;
}


.dcrp-body .highlight span {
   padding: 0.75rem;
   border: 2px solid var(--colorTealB);
   background-color: var(--colorGrey);
   display: block;
  margin: auto;
   position: relative;
}

.dcrp-body .highlight {
  position: relative;
  font-size: 1rem;
  margin: auto;
  text-align: center;
  max-width: 100%;
}

.dcrp-body .spacer span {
  display: block;
  margin-top: 2vh;
  margin-bottom: 2vh;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 2px;
  border-color: var(--colorTealB);
  width: 75%;
} 

.dcrp-body h3 {
  font-size: 1.25rem;
  padding: 0.5rem;
}

.section-header {
  border-left: 1px solid var(--colorTealA);
  border-top: 1px solid var(--colorTealB);
}

/* Quote border-corners only */

.pull-quote {
  display:block;
  margin-bottom: 20px;
  width: 417.14px;
  float: right;
  margin-right: 80px;
  margin-left: 20px;
  padding: 50px 44px;
  position: relative;
  }
  
.pull-quote::before, .pull-quote::after {
    border-color: #88365b;
	display: inline-block;
	width: 50px;
	height: 50px;
	border-width: 21.74px;
	content: "";
	position: absolute;
}
.pull-quote::before {
 border-style: solid none none solid;
    left: -50px;
    top: -20px;
}
.pull-quote::after {
 border-style: none solid solid none;
	right: 0;
	bottom: 0;
}
/* ==== END LIVE SITES LIST =====*/

#morphcards {
	position:relative;
	z-index: 1;
}

/* .pg-divider, -tick, -line, -skinny Creates a horizontal divider line  */
.pg-divider{padding:25px 0px;text-align:center}
.pg-divider-line{width:100px;height:1px}
.pg-divider-line,
.pg-divider-tick{display:inline-block;background-color:#d5d5d5;vertical-align:middle}
.pg-divider-tick{width:1px;height:9px;margin:0px 3px}
.pg-divider-line,
.pg-divider-tick{display:inline-block;background-color:#d5d5d5;vertical-align:middle}
.pg-skinny{width:100%;max-width:600px;margin-left:auto;margin-right:auto}
@media screen and (min-width: 1400px) {
	.pg-skinny {max-width:720px}
} 

h2.title {
    text-shadow: -5px 5px 0px #04eded, -10px 10px 0px #01cccc, -15px 15px 0px #00bdbd;
    font-size: 30px;
    color: #fff;
	margin-bottom: 0.8em;
}

.card-row {
	display: flex;
	flex-wrap:nowrap;
	justify-content:space-between;
	/* height:550px; */
	max-width: 1400px;
	margin: auto;
}

.card-row .card-one-wrap,
.card-row .card-two-wrap,
.card-row .card-three-wrap {
	height: 622px;
}

.card-row .card-one-wrap,
.card-row .card-two-wrap,
.card-row .card-three-wrap,
.card-row .card {
   display:flex;
   overflow: hidden;
   position:relative;
}

.card-row .card {
	width: 400px;
	height: 230px;
	box-shadow: 0 20px 50px rgba(0,0,0,0.5);
	border-radius: 15px;
	background: rgba(255, 255,255, 0.1);
	justify-content: center;
	align-items: center;
	border-top: 1px solid rgba(255,255,255,0.5);
	border-left: 1px solid rgba(255,255,255,0.5);
	backdrop-filter: blur(5px);
}

.card.card-one {align-self:flex-start; margin-top:30px;}
.card.card-two {align-self: flex-start; margin-top:90px;}
.card.card-three { margin-top:150px;}

/*==== hover effect for image in card =====*/

.card-row .card .content,
.card-row .card .sub-content {
	text-align: center;
}

.card-row .card .content {
	transform: translateY(140px);
	opacity:0;
	transition: 0.5s;
	opacity:1;
}

.card-row .card img.sub-content {
	transform: translateY(100px);
	opacity:0;
	transition: 0.5s; 
}

.card-row .card:hover .content {
	transform: translateY(-100px);
	opacity:1;
}

.card-row .card:hover .sub-content {
	transform: translateY(-9px);
	opacity:1;
}

.card-row .card .content img.image,
.card-row .card .sub-content img.image {
	width:400px;
	object-fit:cover;
}

.card-row .card .content img.image{
	margin-bottom: 8px;
}

/*=====Text accompanying each card =====*/

.hovertext {
	position:absolute; 
	z-index:10; 
	border:none;
}

.hovertext-one{
	top:210px; 
	left:70px;
	width: 360px;	
}

.hovertext-two {
	top:268px; 
	left:112px; 	
}

.hovertext-three {
	top: 330px; 
	left: 80px; 
	width: 360px;
}

.hovertext h2,
.hovertext h3,
.hovertext p {
	position: relative;
	right: 50px;
	text-align: center;
	text-shadow: 0 -.5px .3px #04040c;
	font-weight: 300;
	opacity:0;
	transition: 0.8s;
}

.hovertext h2 {
	font-size: 2em;
	color: #f26c36;
	pointer-events:none;
	margin-bottom: -20px;
	background-color: rgba(255,255,255,.2);
	border-radius: 20px;
}

.hovertext h3,
.hovertext p {
	color:#a6a3a3;
}

.hovertext h3 {
	font-size: 1.3em;
	margin-top: 1.3em;
}
.hovertext p {
	font-size: 1.1em;
	font-family: Helvetica, sans-serif;
}

.hovertext a {
	position: relative;
	display: inline-block;
	padding: 6px 20px;
	background: #fff;
	color: #3d3a3a;
	border-radius: 20px;
	text-decoration: none;
	font-weight: 500;
	opacity: 0;
	transition: 0.8s;
	margin-top: 8px;
}

.hovertext a:hover {
	box-shadow: 2px 1px 4px rgba(199, 46, 154, 0.8), 0 1px 4px rgba(199, 46, 46, 0.8);
}

.card-one-wrap:hover > .hovertext h2,
.card-one-wrap:hover > .hovertext h3,
.card-one-wrap:hover > .hovertext p,
.card-one-wrap:hover > .hovertext a,
.card-two-wrap:hover > .hovertext h2,
.card-two-wrap:hover > .hovertext h3,
.card-two-wrap:hover > .hovertext p,
.card-two-wrap:hover > .hovertext a,
.card-three-wrap:hover > .hovertext h2,
.card-three-wrap:hover > .hovertext h3,
.card-three-wrap:hover > .hovertext p,
.card-three-wrap:hover > .hovertext a {
	transform: translateY(0px);
	opacity:1;
}

/* Footer CONTACT MODAL */
/* SnapHost container */
#contact {
	background-color: #E1FA9A; 
	z-index:15;
}

#myform {margin-right: 9em;}

.contactbox {
	border-style: solid; 
    color:white; 
	border-width: 1px; 
	padding: 6px; 
	width:10%; 
	height: auto; 
	margin:auto;
	text-align:center;

} 

.contactbox:hover,
a .contactbox:hover {
  background-color: #ccc !important;
   text-decoration:none;
}



.contactbox:hover h4  {
   color: #942424 !important;
   text-decoration:none;
}

.contact-panel {
	text-align:center; 
	background-color: #942424; 
	padding:20px 80px; 
	margin:-14px 0;
}
 
.contact-panel p{ text-align: center; }
.contact-panel a {color: white;}


/* Contact footer item icons and styling */
.contactme:before{content:"\f007"}
.envelope:before{content:"\f0e0"}
.phone:before{content:"\f095"}

/*
============= MEDIA QUERIES ==================
*/

@media screen and (min-width:1500px){ 
	body {height:2500px}
}

@media screen and (max-width: 1579px){.contactbox{width:60%; margin-bottom: 22px;}}
@media screen and (max-width:1403px) {.contactbox{width: 40%; margin-bottom: 22px;}}

@media screen and (max-width:1286px){
	.card-row .card .content {
		transform: translateY(142px);
	}
	.card-row .card:hover .sub-content {
		transform: translateY(0);
	}
	.hovertext-one, .hovertext-three {
		width:360px;
	}
}

@media screen and (min-width:1100px) and (max-width:2000px){
	#nail03 {margin: 2em -5em 0 7em;}
}

@media screen and (max-width:1060px){

	.introsection {
		padding:35% 8% 5%;
	}
	
	.card-row	{
		 display:block;
		 margin-bottom:650px;
		 height:500px;
	}
 
	.card-row .card-one-wrap,
	.card-row .card-two-wrap,
	.card-row .card-three-wrap,
	.card-row .card {
		 display:block;
		 margin-top:50px;
	}
	
	.card-row .card-one-wrap,
	.card-row .card-two-wrap,
	.card-row .card-three-wrap {
		height:350px;
	}
	
	.card-row .card {
		margin: 50px auto auto;
	}
	
	.card-row .card .content {
		transform: translateY(0);
	}
	.card-row .card:hover .content	{
		transform: translateY(-260px);
	}
	.card-row .card:hover .sub-content	{
		transform: translateY(0);
	}
	
	.hovertext	{
		margin-left: 50%;
		transform:translate(-67%,0);
		width: 321px;
		padding-left: 90px;
	}
	
	
	.card-two-wrap:hover,
	.card-two-wrap:hover .hovertext,
	.card-three-wrap:hover,
	.card-three-wrap:hover .hovertext {
		background-color:rgba(21, 41, 73, 0.83);
		padding-bottom: 15px;
	}
	
	.card-one-wrap:hover,
	.card-one-wrap:hover .hovertext {
		background-color:rgba(21, 41, 73, 0.83);
		padding-bottom: 35px;
	}
	
	.card-row .card .content img.image{
		margin-top: 0;
	}
	
	.card-row .card .content img.image.hvma {
		margin-top: -8px;
	}
	
	.card-one-wrap:hover .hovertext h2,
	.card-two-wrap:hover .hovertext h2,
	.card-three-wrap:hover .hovertext h2 {background-color:none;}
	
	.hovertext-one {
		top:0;
		left: 3.8em;
	}
	
	.hovertext-two {
		top: 0;
		left: 54px;
	}
	
	.hovertext-three {
		top: 0;
		left: 54px;
	}
	
	.hovertext p {line-height: 1.1;}
	
	.hovertext h2 {margin-bottom:0}

}
	
	@media screen and (min-width: 1031px){
	.mobile-footer{display:none;}
	footer {	
		margin: 100px -1% 0;
		}
}
	
@media screen and (max-width:1030px) {
		.desktop-footer{display:none;}
}

@media screen and (max-width:900px){
	.card-row { flex-wrap:wrap;}
	.card-row .card {
		max-width: 400px;
	}
	.card-row .card:hover {
		height:250px;
	}
}

@media screen and (max-width: 500px){
	
	.introsection {
		padding: 35% 2% 5%;
	}
	
	h2 {
		font-size:32px; 
		margin-left:8px; 
		margin-bottom: 2em; 
  }
  
  .contact-panel {padding: 16px 8px;}	
  	.contactbox{margin-left: 2em; border:none;}
}

@media screen and (max-width: 250px){
	.mobile-footer {text-align: left;}
	.contact-panel {padding: 16px 8px;}	
}