/*============================================================
  Basic Styles
============================================================*/
/*@-webkit-keyframes MOVE-BG {
   from {
     -webkit-transform: translateX(0);
   }
   to {
     -webkit-transform: translateX(-187%);
   }
}*/
/* @ Background */
html{
	overflow-x: hidden;

}

body{
	background-color: #f5f8fa;
	color:#666;
	font-family: 'JetBrains Mono', monospace;
	/*font-family: 'IBM Plex Mono', monospace;*/
	font-weight: 400;
	padding:0px;
	margin:0px;
	overflow-x: hidden;

	}

.wrap {
	-webkit-overflow-scrolling: touch;
  	overflow-y: scroll;
	/*background: #fff;*/
	/* padding:40px auto; */
	margin:0px auto;
	width: 100%;
	overflow-x: hidden;

	/* align:center; */
}

.header {
	/* background-color: #D2CEC1; */
	padding:0px;
	width:100%;
	/* margin:20px; */
	background-color: #C0DAE0;
	/* border-radius: 8px; */
	/* height:640px; */
	padding-top:auto;
	padding-bottom:auto;
	overflow: hidden;
	/* background-image: url(../img/JDW_header.jpg); */
	/* top:-16px; */
}
.header-block{
		position: relative;
		top: 0px;
		left:75vw;
		width:80px;
		align-items: baseline;
		align-self:center;
}
.header-type{
		position: relative;
		top: 104px;
		left:140px;
		/* right:30vw; */
		width:80px;
		align-items: baseline;
		align-self:center;
		z-index:1000;
}
.header-grid{
		position: relative;
		top: 94px;
		left:40px;
		/* right:30vw; */
		width:80px;
		align-items: baseline;
		align-self:center;
}

.header-sparks{
		position: absolute;
		top: 84px;
		right:5vw;
		/* width:80px; */
		align-items: baseline;
		align-self:center;
}

.header-globe{
		position: relative;
		top: -250px;
		left:72vw;
		align-items: baseline;
		align-self:center;
		z-index: 0;

}
.header-waves{
		position: absolute;
		top: 214px;
		left:50vw;
		align-items: baseline;
		align-self:center;
		z-index: 0;
}

.header-block .header-waves .header-globe img{
		width:100%;
}

.hidden{
     opacity:0;
}
.visible{
     opacity:1;
}

.header-img img{
	width:100%;
	/* margin-bottom: 20px; */
}

.nav {
	font-family: 'JetBrains Mono', monospace;
	font-weight: 400;
	width:100%;
	height:48px;
	letter-spacing:2px;

	font-weight:bold;
	font-size:20px;
	/*border:2px;
	border-color:#444;
	border-top-style:none;
	border-right-style:none;
	border-bottom-style:solid;
	border-left-style:none;*/

	padding-top: 12px;
	padding-bottom: 12px;
	/* margin-top: 10px;
	margin-bottom: 10px; */
	z-index: 1;

}
.nav img {
 margin-top:10px;
 position: relative;
 top:1px;
}

.nav-fixed {
	padding-top:0px;
	position:absolute;
  z-index:2;

	/* background-color: #f5f8fa; */

}
.nav a:link{
	color:#0A3854;
	text-decoration:none;
	padding-left:30px;
	padding-right:30px;
	padding-top:12px;
	padding-bottom:12px;
	/* height: 48px; */
	align-items: center;
	/* background-color: #f5f8fa; */

}

.nav a:active{
	color:#0A3854;
	text-decoration:none;
}

.nav a:visited{
	color:#0A3854;
	text-decoration:none;
}

.nav a:hover{
	color:#000;
	text-decoration:underline;
}

.bottom-button{
	color: :#fff;
	color: #75d1f3;
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-weight:bold;
	font-size:16px;
	letter-spacing:2px;
	display:inline-block;

	margin-right:4%;

	width: 40%;
}
.bottom-button a:link{
	color: #75d1f3;

	width: 100%;

	border-style: solid;
	border-color: #75d1f3;


	display:block;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 15px;
	padding-bottom: 15px;

	text-decoration:none;

}
.bottom-button a:active{
	color: #fff;
	letter-spacing:2px;
	text-decoration:none;
	/*background-image: url(../img/cta-bg-up.jpg);*/

}
.bottom-button a:visited{
	color: #75d1f3;
	letter-spacing:2px;
	text-decoration:none;
	/*background-image: url(../img/cta-bg-down.jpg);*/
	border: 2px;
	border-color: #75d1f3;
}
.bottom-button a:hover{
	color: #000;
	border-style: solid;
	border-color: #000;
	letter-spacing:2px;
	text-decoration:none;
	/* background-color:#c5172e; */
	/* background: url(../img/wash-red-blue.jpg); */
}

.password-input {
		margin-top: 10px;
		display: none;
		float:left;/* Hide password input initially */
		margin-top: 5px;
		margin-bottom:10px;
		left:0px;
		top:20px;

}
.error-message {
		color: red;
		display: none;
		margin-top: 10px;
}
/* Ensure a consistent look when focusing on the input */
input[type="password"] {
		padding: 5px;
		margin-top: 5px;
		margin-bottom:10px;
		left:10px;
		top:10px;
		postion:relative;
		height: 36px;
}
.password-input{
	left:20px;
	position:relative;
	flex-direction: row;
	flex-flow: row;
}
#error{
	left:24px;
	top:36px;
	position:relative;

}
#passwordSection{
		left:10px;
		top:-10px;
		position:relative;
}

#password{
		left:20px;
		top:36px;
		position:relative;
}
#viewWorkButton {
	cursor: pointer;
	color: #75d1f3;
	border-style: solid;
	border-color: #75d1f3;
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-weight:bold;
	font-size:16px;
	letter-spacing:2px;
	text-decoration:none;
	/*background: url(../img/cta-bg-down.jpg);*/
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 15px;
	padding-bottom: 15px;

}

.cta-button{
	color: :#fff;
	float: left;
	/*width: 50%;*/
	display:block;
	margin-top: 35px;
	/* background-color:#ececec; */

}

.cta-button a:link{
	color: #75d1f3;
	border-style: solid;
	border-color: #75d1f3;
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-weight:bold;
	font-size:16px;
	letter-spacing:2px;
	text-decoration:none;
	/*background: url(../img/cta-bg-down.jpg);*/
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 15px;
	padding-bottom: 15px;
	/* border-radius: 8px; */


}
.cta-button a:active{
	color: #fff;
	letter-spacing:2px;
	text-decoration:none;
	/*background-image: url(../img/cta-bg-up.jpg);*/

}
.cta-button a:visited{
	color: #75d1f3;
	letter-spacing:2px;
	text-decoration:none;
	/*background-image: url(../img/cta-bg-down.jpg);*/
	border: 2px;
	border-color: #75d1f3;
	border-radius: 24px;
}
.cta-button a:hover{
	color: #000;
	border-style: solid;
	border-color: #000;
	letter-spacing:2px;
	text-decoration:none;
	/*background-color:#c5172e;*/
	/* background: url(../img/wash-red-white6.jpg); */
}

.poptrox-overlay {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  -webkit-overflow-scrolling: touch !important;
  overflow-y: scroll !important;
}

.poptrox-overlay iframe {
  height: 100%;
  width: 100%;
}
#artgallery {
   line-height:0;
   -webkit-column-count:5; /* split it into 5 columns */
	 -webkit-row-gap:5px; /* give it a 5px gap between columns */
	 -webkit-column-gap:5px; /* give it a 5px gap between columns */
   -moz-column-count:5;
	 -moz-row-gap:5px;
   -moz-column-gap:5px;
   column-count:5;
   column-gap:5px;
	 row-gap:16px;
}
#artgallery img {
   width: 100% !important;
   height: auto !important;
   margin-bottom:5px; /* to match column gap */
}
.content {
	/*background-color:#eef3f7;*/
	padding:10px;
	margin-left:20px;
	margin-bottom:2px;
	margin-right:20px;
	font-color:#000;
	font-family: 'JetBrains Mono', monospace;
	font-weight: 400;
	width:80%;

}

.content h1{
	font-family: 'JetBrains Mono', monospace;
	text-align:center;
	color:#000;
	font-size:18px;
	font-weight:bold;

}
.content h1 a:link{
	color:#fff;
	text-decoration:none;
}
.content h1 a:visited{
	color:#fff;
	text-decoration:none;
}
.content h1 a:active{
	color:#fff;
	text-decoration:none;
}
.content h1 a:hover{
	color:#000;
	text-decoration:none;
}
.content h2{
	position: relative;
	/*top:-40px;*/
	text-align:left;
	color:#212121;
	/*background-color: #000;*/
	font-family: 'JetBrains Mono', monospace;
	font-size:64px;
	font-weight:bold;
	letter-spacing:0px;
	line-height: 70px;
	font-weight: 700;
	margin-bottom:24px;
	margin-top:0px;
}
.content h3{
	text-align:center;
	color:#666;
	font-size:14px;
	line-height:6px;
	font-weight:bold;
	padding-top:0px;
	letter-spacing:2px;
	font-weight: 400;

}
.content h4{
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	text-align:left;
	color:#999;
	font-size:12px;
	line-height:14px;
	letter-spacing:2px;
}

.content p{
	text-align:left;
	color:#000;
	font-size:14px;
	line-height:20px;
	letter-spacing:2px;
	font-color:#000;
	font-family: 'Poppins', sans-serif;
	/*font-family: 'IBM Plex Mono', monospace;*/

	font-weight: 300;
}

.content img{
	border:none;
	border-radius: 12px;
}

.tooltip{
	width:600px;
	text-align:left;
	background-color:#000;
	font-size:14px;
	line-height:20px;
	letter-spacing:2px;
	font-family: 'Poppins', sans-serif;
	border-radius: 24px;
	padding:24px;
	padding-left:36px;

}

.tooltip p{
	text-align:left;
	color:#fff;
	/*font-family: 'IBM Plex Mono', monospace;*/

	font-weight: 300;
}


.column-left{
	position: relative;
	top:0px;
	width:30%;
	float:left;
}
.column-left img{
	width:100%;
	float:left;
}
.column-center{
	position: relative;
	top:0px;
	width:30%;
	float:left;
	margin-left:5%;
}
.column-center img{
	width:100%;
	float:left;
}

.column-right{
	position: relative;
	top:0px;

	width:30%;
	float:right;
}
.column-right img{
	width:100%;
	float:left;
}
.column-center-text{
	position: relative;
	/*left:0px;*/
	display:inline-block;
	padding:0%;

	/* background-image: url(../img/wash-2line.png); */
	/* background-repeat: no-repeat;
	background-size: 410px 410px;
	background-position: 150px 35px; */

}
.row0{
	z-index: 0;
	margin:20px;
	display:inline-block;

}
.row{
	z-index: 0;
	margin:20px;
	display:inline-block;
}
.bottom-row{
	z-index: 0;
	display:block;
	width:90%;
}

.row-header-text{
	text-align: left;
	width:45vw;
	/* padding-bottom:100px; */
	padding-top:60px;
	padding-left:14%;
	color:#0A3854;
	line-height:48px;
}

.row-left-text{
	position: relative;
  /*left:10px;*/
	align:right;
	display:inline-block;
	float:left;
  padding-right:5%;
	width:35%;

	/* background-image: url(../img/wash-2line.png);
	background-repeat: no-repeat;
	background-size: 410px 410px;
	background-position: 35px -300px; */

}
.row-left-text a:link{
	color:#c5172e;
}
.row-left-text a:visited{
	color:#c5172e;
}
.row-left-text a:active{
	color:#c5172e;
}
.row-left-text a:hover{
	color:#c5172e;
}

.row-left-text1 a:link{
	color:#c5172e;
}
.row-left-text1 a:visited{
	color:#c5172e;
}
.row-left-text1 a:active{
	color:#c5172e;
}
.row-left-text1 a:hover{
	color:#c5172e;
}

.row-right-image{
	/* background-color:#fff; */
	display:inline-block;
	float:right;
	padding:0%;
	width:60%;
}
.row-right-image img{
	align:right;
	width:100%;
	border-style: solid;
	border: 20px;
}
.row-right-vertimage{
	background-color:#fff;
	display:inline-block;
	float:right;
	padding:0%;
	width:40%;
}
.row-right-vertimage img{
	align:left;
	width:100%;
	border-style: solid;
	border: 20px;
}
.row-right-text{
	position: relative;
	left:-50px;
	display:inline-block;
	float:right;
	padding:0%;
	width:35%;

	/* background-image: url(../img/wash-2line.png);
	background-repeat: no-repeat;
	background-size: 410px 410px;
	background-position: 0px -300px; */

}


.row-left-text h2{
	left:-8px;
	top:10px;
	position:relative;
}
.row-left-text p{
	left:-4px;
	position:relative;
}
.row-right-text h2{
	margin-left:44px;
	top:10px;
	position:relative;
}
.row-right-text p{
	margin-left:47px;
	position:relative;
}
.row-right-text1{
	position: relative;
	display:inline-block;
	float:right;
	padding:0%;
	width:35%;

}
.row-left-image{
	display:inline-block;
	float:left;
	padding-right:5%;
	width:60%;
}
.row-left-image img{
	align:right;
	width:100%;
	border-style: solid;
	border: 20px;
}
.hover-image{
	z-index:-50;
	position: absolute;
	top:610px;
	left:5%;
}
.hover-image2{
	z-index:-100;
	position: absolute;
	top:680px;
	left:-50px;
}

.hover-image3{
	z-index:-100;
	width:60px;
	position: absolute;
	top:-100px;
	left:100px;
}
.border {
	border:0px;
	border-color:#bbb;
	border-top-style:none;
	border-right-style:none;
	border-bottom-style:solid;
	border-left-style:none;
	margin:80px;
}
.border2 {
	border:1px;
	border-color:#eee;
	border-top-style:none;
	border-right-style:none;
	border-bottom-style:solid;
	border-left-style:none;
	margin:20px;
}
.border3 {
	border:1px;
	/* border-color:#75d1f3; */
	border-color:#000;
	border-top-style:none;
	border-right-style:none;
	border-bottom-style:solid;
	border-left-style:none;
	margin:20px;
}
.footer{
	padding-left:25px;
	padding-right:25px;
	height:65px;
}
.footer a:link{
	color:#d13719;
}
.footer a:visited{
	color:#c5172e;
}
.footer a:active{
	color:#c5172e;
}
.footer a:hover{
	color:#75d1f3;
}
.row-footer-left{
	display:inline-block;
	float:left;
	padding-right:5%;
	width:85%;
}
.row-footer-right{
	display:inline-block;
	float:right;
	width:10%;
}
.row-footer-right img{
	align:right;
	top:8px;
	left:8px;
	position:relative;
}


/*============================================================
  Custom Styles - add and override styles below.
============================================================*/

@media (min-width:1300px) {
	.wrap{
		align:center;
	}
	.content {
		width:90%;
	}
	.header {
		width:100%;
		overflow: hidden;
	}
	.nav{
		width:100%;
	}
	.header-sparks{
		right:4vw;
	}
	.header-globe{
		position: relative;
		top: -150px;
		/* left:80vw; */
		width:260px;
		align-items: baseline;
		align-self:center;
	}
	.header-globe svg{
			width:100%;
	}
	.header-block{
			position: relative;
			top: -4px;
			/* left:80vw; */
			width:120px;
			align-items: baseline;
			align-self:center;
	}
	.header-block svg{
			width:100%;
	}

	/*.row-left{
		display:inline-block;
		float:left;
		padding-top:0px;
		padding-right:5%;
		width:45%;
	}
	.row-right{
		display:inline-block;
		float:right;
		padding-right:0px;;
		width:50%;
	}*/
}
@media (max-width:1300px) {

	.row-header-text{
		width:80vw;
		padding-left:48px;
	}

	.hover-image {
		visibility:0;
		top:1050px;
	}
	.header-sparks{
		right:3vw;
	}

	.header-block{
			position: relative;
			top: -4px;
			left:72vw;
	}
	.header-globe{
			position: relative;
			top: -150px;
			/* left:70vw; */
	}
	.header-waves{
			position: absolute;
			top: 224px;
			left:70vw;
			align-items: baseline;
			align-self:center;
			z-index: 0;
	}

	.header-block img{
			width:100%;
	}

	.hover-image2 {
		visibility:0;
		top:1300px;
	}
	.bottom-button{
		width: 90%;
		margin-bottom:10px;
	}
	.content {
		width:90%;
	}


	.header-img {
		width:100%;
		padding:0px;
		margin-top:20px;
	}
	.header-img img{
		width:100%;
		padding: 0px;
		margin: 0px;
		margin-bottom: 0px;
	}

	.nav{
		z-index:10000;
		margin-top: 10px;
		margin-bottom: 30px;
		font-size:34px;
		width:100%;
	}


	.row-left-text{
		display:inline-block;
		float:none;
		padding-top:10px;
		padding-right:0px;
		left:15px;

		background-position: 15px -315px;
		width:100%;
		vertical-align: middle;
	}

	.row-left-text a:link{
		color:#c5172e;
	}
	.row-left-text a:visited{
		color:#000;
	}
	.row-left-text a:active{
		color:#000;
	}
	.row-left-text a:hover{
		color:#000;
	}
	.row-right-text{
		display:inline-block;
		float:none;
		padding-top:10px;
		padding-right:0px;;
		background-position: 0px -315px;
		width:100%;
		vertical-align: middle;
	}
	.row-right-image{
		display:inline-block;
		float:none;
		padding-right:0px;;
		width:100%;
	}
	.row-left-image{
		display:inline-block;
		float:none;
		padding-right:0px;;
		width:100%;
	}
	.row-right-text1{
		display:inline-block;
		float:none;
		padding-top:10px;
		padding-right:0px;;
		width:100%;
		vertical-align: middle;
	}

}