@charset "utf-8";
/* CSS Document */
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,700,800,300);
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*,html,body {
  scroll-behavior: smooth;
  font-family: poppins;
  transition: all 0.5s;
}
body {
	margin: 0;
	padding: 0;
	font-family: 'Open Sans','Helvetica Neue',Helvetica, sans-serif;
	line-height: 1.45;
	background-color:#000;
}
header {
	padding:0px 0 20px 0;
	text-align:center;
}
.heads {
  color: #FFFFFF;
	background-color:#000;
}
#webpawslogo {
	position:fixed;
	top:0;
	left:0;
	right:0;
	margin:0 auto;
	background-color:#000;
	width:100%;
	height:80px;
	z-index:100;
}
.wplogo {
	max-height:75px;
	height:auto;	
	margin:0 auto;
	border:none;
}
h1 {
  font-size:3rem;
  margin:0 0 16px 0;
  font-family: Arial, Helvetica, sans-serif;
}
h2#sl1 {margin-top:10px;}
h2 {
  font-weight: 300;
  font-size: 1.5rem;
  margin:0 0 16px 0;
}
h2.strapline  {
  color:#69F;
  max-width:650px;
  width:100%;
  margin:0 auto;
}
.ibstrap {
	max-width:650px;
	width:90%;
	margin:15px auto;
	color:#777;	
}
h2.strapline2  {
  color:#ACF;
}
h4.usa  {
  color:#6CF;
}
h3 {
  font-weight: 900;
  font-size: 1.65rem;
  margin: 8px 0 16px 0;
}
h4 {
  font-weight:100;
  font-size:1.0rem;
  margin:8px 0 16px 0;
  font-style:italic;
}
.xsmall {
  font-size:8px; /* 50% of the baseline */
}
.small {
  font-size:12px; /* 75% of the baseline */
}
.normal  {
  font-size:16px; /* 100% of the baseline */
}
.large {
  font-size:20px; /* 125% of the baseline */
}
.xlarge {
  font-size:26px; /* 150% of the baseline */
}
.exlarge {
  font-size:28px; /* 160% of the baseline */
}
.uexlarge {
  font-size:28px; /* 160% of the baseline */
  text-decoration:underline;
}
/* Adjust Font Size */
#ttld {
 height:130px;
 width:35px;
 background-color:#FFF;
 border-top-right-radius:10px;
 border-bottom-right-radius:10px;
 display:absolute;
 position:fixed;
 left:0;
 margin:0;
 top:65%;
 z-index:300;
}
#ld {
 height:40px;
 width:35px;
 display:block;
 text-align:center;
 margin:0;
 padding:0;
 border-top:1px solid #000;				
 border-right:1px solid #000;
 border-bottom:1px solid #000;
 border-top-right-radius:10px;
 /*background-color:rgb(255, 255, 255);*/
 z-index:350;
}
#l_dSwitch {
  display:block;
}
#Tt {
 height:95px;
 width:35px;
 display:block;
 text-align:center;
 left:0;
 margin:0;
 padding:5px 0 0 1px;
 background-color:#FFF;
 border-bottom-right-radius:10px;
 border-right:1px solid #000;
 border-bottom:1px solid #000;
}
#cfs span {
width:17px;
height:22px;
padding:11px 10px 11px 10px;
position:relative;
left:0px;
margin:3px 0 0 5px;
display:flex;
align-items:center;
justify-content:center;
border-radius:5px;
color:white;
background:grey;
}
#cfs span:first-child {
height:20px;
font-size:14px;
position:relative;
}
#cfs span:nth-child(2) {
width:13px;
height:20px;
font-size:16px;
position:relative;
}
#cfs span:nth-child(3) {
width:15px;
height:22px;
font-size:20px;
position:relative;
}
/*  START Dark/Light */	
*{
	margin:0 auto;
	padding:0px;
	box-sizing:border-box;
	font-family:'Poppins', sans-serif;
	transition:all 0.1s;
}
input[name=ld]{
	visibility: hidden;
}
label.labdtl{
	margin:5px 0 5px 2px;
	display:inline-block;
	position:absolute;
	left:0;
	top:5px;
	height:35px;
	width:25px;
	z-index:50;
}
label.labdtl::before{
	display:inline-block;
	margin:5px 0 5px 2px;
	vertical-align:middle;
}
input:checked + label.labdtl::before{
	display:inline-block;
	margin:5px 0 5px 6px;
	vertical-align:middle;
	font-weight:900;
	color:#FFF;
}
/*
#0a2458 dark blue
#ecc781 pale yellow
#e8808c light red/pink
*/
input:checked + label.labdtl{
  /*background-color:#ecc781;*/
  margin:5px 0 5px 2px;
  padding:0;
}

#ld svg {
  width:85%;
  height:auto;
  margin-left:3px;
}
#ld svg path.dtl {
  transition:.2s ease;
  fill:#0a2458;
}

/* Start Tool Code */
.tool {
	z-index:101;
	position:absolute;
	background-color:#ecc781;
	top:50%;
	right:0;
	width:180px;
	text-align:center;
	padding:4px 8px;
	line-height:112%;
	transition:.3s;
	color:#000;
	font-weight:900;
	font-size:16px;
	font-family:Decimal-Bold,sans-serif;
	border:none;
}
#thc.tool {
  transform:translate(-197px,-60%);
}
#thc.tool span, #tlfs.tool span{
  font-size:16px;
  font-family:Decimal-Bold,sans-serif;
  padding:4px 8px;
  line-height:112%;
}
#tlfs.tool {
  transform:translate(-197px,0%);
}

.left-arrow {
  border-left:1px solid #ecc781;
}
.left-arrow.changed:after { 
/* this selector is more specific, so it takes precedence over the other :after */
  border-right:10px solid #0a2458;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
}
.left-arrow:after {
	content:'';
	position:absolute;
	left:0;
	top:30%;
	margin:0;
	margin-left:-10px;
	width:0;
	height:0;
	border-right:10px solid #ecc781;
	border-top:8px solid transparent;
	border-bottom:8px solid transparent;
}

.dark{
	background-color:black;
	color:white;
	width:100%;
}
/*  END Dark/Light */	

/*  Regular Nav 	*/
.topnav {
	margin:0 auto;
	margin-top:80px;
	max-width:1024px;
	width:100%;
	height:auto;
}
nav{
	width:100%;
	height:auto;
	background-color:#000;
	line-height:30px;
	margin:0 auto;
}
nav ul.m {
	margin-right:10px;
	background-color:none;
	display:flex;
  	justify-content:center;
}
nav #services, nav #about, nav #games {
	display:none;
	background-color:none;
}
nav ul ul li {
   display:block;
   width:175px;
   line-height:45px;
   border:1px solid #ccc;
   padding:0;
   background-color:none;
}
nav ul ul {
   display:block;
   width:175px;
   background-color:none;
   overflow:visible;
}
nav ul ul li:first-child{
	/*margin-top:10px;*/
}
nav ul.m li{
	list-style-type:none;
	display:inline-block;
	transition:0.4s;
	font-size:16px;
	font-weight:900;
	background-color:none;
}
nav ul.m li:hover{
	/*background-color:#2196f3;*/
}
nav ul.m li a{
	text-decoration:none;
	color:#fff;
	padding:6px;
	width:100%;
	display:inline-block;
}
nav ul.m li a:hover{
	color:#000;
	background-color:#2196f3;
	transition-delay:0.1s;
}
nav ul.m ul li a{
	text-decoration:none;
	color:#fff;
	padding:0;
	margin:0;
	display:inline-block;
	width:100%;
	text-align:center;
}
nav ul.m ul li a:hover{
	color:#000;
	background:#2196f3;
	box-shadow:none;
	transition-delay:0.1s;
}
#mobilenav {
	margin:15px auto 25px auto;
	max-width:450px;
}
.mobileNavButton {
	display:none;
}
/*  End Regular Nav */


/* subtle zoom to attention and then back */
.pop-outin {
  animation: 7s anim-popoutin ease 1;
  animation-delay:3s;
}

@keyframes anim-popoutin {
  0% {
	color: green;
	transform: scale(0);
	opacity: 0;
	text-shadow: 0 0 0 rgba(255, 255, 255, 255);
  }
  25% {
	color:#ACF;
	transform: scale(1.5);
	opacity: 1;
	text-shadow: 3px 10px 5px rgba(170, 204, 255, 0.5);
  }
  50% {
	color:#ACF;
	transform: scale(1);
	opacity: 1;
	text-shadow: 1px 0 0 rgba(170, 204, 255, 0);
  }
  100% {
	/* animate nothing to add pause at the end of animation */
	transform: scale(1);
	opacity: 1;
	text-shadow: 1px 0 0 rgba(170, 204, 255, 0);
  }
}

a.btn {
	 animation:shake 0.8s;
	 animation-delay:7s;
	 text-decoration:none;
}

@keyframes shake{
	 0%{
	   transform: translateX(0);
	   transform: translateY(0);
	 }
	 13%{
	   transform: translateY(15px);
	 }	 
	 25%{
	   transform: translateX(25px);
	 }
	 33%{
	   transform: translateY(-15px);
	 }	 
	 50%{
	   transform: translateX(-25px);
	 }
	 63%{
	   transform: translateY(15px);
	 }	
	 75%{
	   transform: translateX(25px);
	 }	  
	 100%{
	   transform: translateX(0);
	   transform: translateY(0);
	 }
}
/*
@keyframes shake {
  0%   { transform: translate(1px, 1px) rotate(0deg); }
  10%  { transform: translate(-1px, -2px) rotate(-1deg); }
  20%  { transform: translate(-3px, 0px) rotate(1deg); }
  30%  { transform: translate(3px, 2px) rotate(0deg); }
  40%  { transform: translate(1px, -1px) rotate(1deg); }
  50%  { transform: translate(-1px, 2px) rotate(-1deg); }
  60%  { transform: translate(-3px, 1px) rotate(0deg); }
  70%  { transform: translate(3px, 1px) rotate(-1deg); }
  80%  { transform: translate(-1px, -1px) rotate(1deg); }
  90%  { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
*/
            .awards .box { 
                max-width:840px; 
                margin:50px auto; 
                display:table; 
            } 
            .awards .box .box-row { 
                display:table-row; 
            } 
            .awards .box .box-cell { 
                display:table-cell; 
                width:33%; 
                padding:10px; 
            } 
            .awards .box .box-cell-2 { 
                display:table-cell; 
                width:70%;  
				padding:10px;
            }						
            .awards .box .box-cell.box1 { 
                color:white; 
				/*display:flex;
				justify-content: center;*/
            } 
            .awards .box .box-cell.box2 { 
                text-align:center;
				justify-content:center;
            } 
            .awards .box .box-cell.box3 { 
				/*justify-content:center; 
				display:flex;*/
            }
			.awards .box img {border:1px solid black;}
.thumbnail { 
top:-50px; 
left:-35px; 
display:block; 
z-index:999; 
cursor: pointer; 
-webkit-transition-property: all; 
-webkit-transition-duration: 0.3s; 
-webkit-transition-timing-function: ease; 
} 

/*change the number below to scale to the appropriate size*/ 
.thumbnail:hover { 
transform: scale(3); 
}			
.btn {
	display:inline-block;
	/*display:table;*/
	justify-content: center;
	color: white;
	font-weight: 500;
	font-size: 1.5rem;
	background: #191970;
	border: none;
	border-radius: 5px;
	padding: 12px 16px;
	cursor: pointer;
	border:2px green solid;
	width:250px;
	margin:15px auto;
}
.btn:hover {
	background: #468486;
}
/* start for services.php */
#main {
	position:relative; /* container positioning */
	display:block;
	top:0px;
	text-align:left; /* to realign text */
	padding: 0px 20px 5px 20px;
	margin:0 auto;
	max-width:1024px;
	width:100%;
}
#main h2 {
	position:relative; /* container positioning */
	top:15px;
	text-align:left;
	display:block;	
}
#main font {
	font-size:smaller;
	font-style:italic;
}
#main ul {
	max-width:1024px;
	width:100%;
	text-align:center;
	margin:0 auto;
}
#main li {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:small;
	color:#FFF;
	margin:0;
	list-style:outside;
	list-style-type:disc;
	/*list-style-position:outside;*/
	vertical-align:text-top;
	padding:0 0 0 15px;
	text-align:left;
}
/* end for services.php */

section {
	text-align:center;
	padding:40px 0;
}
.container { 
	margin:0 auto;
	padding:0 5px;
	max-width:100%;
}
.LeftAlign { 
	text-align:left;
}
.logo {
	/*margin-top:-60px;*/
	padding:0;
}
.bylines {
	color: #FFFFFF;
	background-color:#22338B;
	margin:0 auto;
	opacity: 0.95;
	background-image:url('https://www.webpaws.com/images/simpleTechnologyWebPaws.webp');
	background-repeat: no-repeat;
	background-position:0 0;
	background-size: cover;
}
.byline {
	width:100%;
	display:inline-block;
	font-size:1rem;
	max-width:1024px;
	width:100%;			
}
ul.toplist {
	max-width:350px;
	width:90%;
	padding-top:3px;
	text-align:left;
	list-style:none;
	margin:0 auto; 
}
code { 
	margin:15px auto;
	display:inline-block;
	color:#8AC6F8;  /*68A4D6; 4682B4; B0C4DE;*/
}

.features {
	background-color:#4169E1;/*483DD5;*/
	color:#FFF;
	max-width:100%;
}
.feature {
	max-width:225px;
	width:100%;
	width:32%;
	display:inline-block;
	font-size:1rem;
	margin-bottom:15px;
}
.feature i {
	width:100%;
	display:block;
	font-size:2.5rem;
	max-width:225px;
	margin:0 auto;
	text-align:center;
}
.feature p {
	width:100%;
	display:block;
	max-width:225px;
	text-align:center;
}
.feature p a {
	color:#FFF;
	text-decoration:none;
}

.program {
	color: #FFFFFF;
	background-color:#22338B;
	margin:0 auto;
	opacity: 0.95;
  	background-image: url('https://www.webpaws.com/images/vector_web.webp');
  	background-repeat: no-repeat;
  	background-position:0 0;
 	background-size: cover;
	display: flex;
  	justify-content: center;
}
.programs ul {
	width:700px;
	max-width:90%;
	margin:7px auto;
}
.programs ul li {
	width:100%;
	text-align:left;
	padding-left:0px;
}

.quote {
	background-color:#06F;
	color:#000000;
	/*
	background:#4682B4;
	color:#FFFFFF;
	*/
}
blockquote {
	padding:0 20px;
}
blockquote.container {
	margin:0 auto;
	text-align:center;
	max-width:950px;
	width:100%;
}
blockquote p {
	margin:0 0 5px 0;
	font-size:1.5rem;
}
blockquote cite {
	font-size:1rem;
	font-style:italic;
	margin-bottom:15px;
	display:inline-block;
}  
blockquote cite:before {
	content:'–';
	margin-right:5px;
}

footer {
	padding: 32px 0;
	text-align: center;
	font-size: 0.75rem;
}
.foote {
	background: #000;
	color: #868686;
}
#foot ul {
	margin:0 auto 15px auto;
	padding: 0;
	list-style: none;
	display:flex;
  	justify-content:center;
  	max-width:400px;
}
footer li {
	display:inline-block;
	float:left;
}
footer li a {
	padding: 6px;
	font-size: 0.875rem;
	text-decoration: none;
	color: #c3c3c3;
}
footer li a:hover {
	color: white;
}
footer p {
	display:block;
	clear:both;
}

.submenu {
	left: 50%;
	transform: translate(-50%, 0);
	text-align:center;
	position: absolute;
	background-color: #549DA0;
	min-width: 160px;
	border-radius: 5px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	display: none;
}
.submenu a {
	color: white;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}
.submenu a:hover {
	background-color: #468486;
}

@media screen and (max-width: 975px) {
	.feature {
		width: 100%;
		max-width:975px;
		text-align: left;
		margin: 0 auto 10px auto;
		font-size: 1rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.feature i {
		width:40%;
		display:inline-block;
		font-size:2.5rem;
		margin-right:15px;
		text-align:right;
		max-width:390px;
		padding-right:7px;
	}
	.feature p {
		width:60%;
		display:inline-block;
		text-align:left;
		max-width:585px;
		padding-left:7px;
	}
}

@media screen and (max-width: 900px) {
	h2 {
		padding:5px 15px;
	}
}

@media screen and (max-width: 480px) {
   .wplogo {
	   margin:15px auto 0 auto;
   }
   h2 {
	   padding:5px 15px;
   }   

	/* Mobile Nav  */
	nav{
		width:100%;
		height:auto;
		background-color:none;
		line-height:auto;
		margin:0 auto;
	}
	nav ul{
		float:none;
		margin-right:inherit;
		margin:0 auto;
	}
	nav #services, nav #about, nav #games {
		display:none;
	}
  nav ul.m li{
	list-style-type:none;
	display:block;
	transition:0.4s;
	font-size:16px;
	font-weight:900;
	background-color:none;
	max-width:400px;
	width:100%;
	margin:0 auto;
  }
	nav ul li{
		list-style-type:none;
		display:block;
		transition:0.4s;
		font-size:inherit;
		font-weight:inherit;
		max-width:400px;
	    width:100%;
		margin:0 auto;
	}
	nav ul li:hover{
		background-color:inherit;
		font-weight:900;
	}
	nav ul li a{
		text-decoration:none;
		color:#fff;
		padding:6px;
	}
	nav ul li a:hover{
		color:#000;
		background:#2196f3;
		box-shadow:none;
		transition-delay:0.1s;
	}
	nav ul ul{
	  max-width:400px;
	  width:100%;
	  margin:0 auto;
    }
	#mobilenav {
	  display:none;
	}
	ul#mobilenav {
		list-style:none;
		margin-bottom:25px;
	}
	ul#mobilenav li ul li {
		max-width:400px;
	  width:100%;
	  border:1px solid #1D3557;
	}
	ul#mobilenav li ul li a{
	/* border:1px solid #1D3557; */
	border:none;
	color:#000;
		background-color:#5D94FF; /* 71CFE9 41B9E1 #A8DADC light green */ /*4169E1*/
	}
	.fa-caret-down {
	  display:inline-block;
	  float:right;
	}
	.icon {
	  background: black;
	  display: inline-block;
	  position: absolute;
	  right: 7px;
	  top: 9px;
	}
	.topnav a {
	  color: #000;
	  padding: 14px 16px;
	  text-decoration: none;
	  font-size: 17px;
	  display: block;
	  border:1px solid #1D3557; /* 083BD6 457B9D */
	  background-color:#4169E1;/*lighter blue*/
	}
	.topnav a:hover {
	  background-color: #ddd;
	  color: black;
	}
	/* End Mobile Nav */
	   
	/* Hamburger Nav */
	.mobileNavButton{
	  -webkit-tap-highlight-color: rgba(0,0,0,0);
	  -webkit-tap-highlight-color: transparent;
	  display:flex;
	  align-items:center;
	  justify-content:center;
	  flex-direction:column;
	  cursor:pointer;
	  background-color:#36F;
	  width:33px;
	  height:33px;
	  border-radius:10px;
	  margin-top:15px;
	}
	.mobileNavButton span{
		background-color:#007;
		box-shadow:0px 0px 10px 0px rgba(240,128,128,0.3);
		width:17px;
		height:4px;
		border-radius:4px;
		margin:1px 0px;
		transition:margin 0.4s cubic-bezier(.79,.21,.06,.81),transform 0.4s cubic-bezier(.79,.21,.06,.81);
		color:#FFF;
	}
	.mobileNavButton span:nth-child(2){
		transform-origin:50% 50%;
	}
	.active .mobileNavButton span{
		margin:-2px;
	}
	.active .mobileNavButton span:nth-child(1){
		transform:rotate(-45deg);
	}
	.active .mobileNavButton span:nth-child(2){
		transform:scale(0);
	}
	.active .mobileNavButton span:nth-child(3){
		transform:rotate(45deg);
	}
	/* End Hamburger Nav */

	.btn {
		display: block;
		font-size: 1.25rem;
		max-width:275px;
		margin:5px auto;
	}
	h1 {
		font-size: 2.5rem;
		margin:-15px 0 8px 0;
	}
	h2 {
		font-size: 1.125rem;
	}
	.ibstrap {
	  max-width:225px;
  }
	section {
		padding: 25px 0 15px 0;
	} 
		.feature {
		width: 100%;
		max-width:480px;
		text-align: left;
		margin: 0 0 10px 0;
		font-size: 1rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.feature i {
		width:40%;
		display:inline-block;
		font-size:2.5rem;
		margin-right:15px;
		text-align:right;
		max-width:65px;
	}
	.feature p {
		width:60%;
		display:inline-block;
		text-align:left;
		max-width:210px;
	}
	.feature span {
		width: 15%;
		min-width: 60px;
		margin-right: 20px;
	}
	.quote {
		padding: 30px 0;
	}
	blockquote p {
		font-size: 1.125rem;
	}
	blockquote cite {
		font-size: 0.875rem;
	}
	.programs ul {
		width:100%;
		max-width:425px;
		margin:7px 17px 7px 10px;
		padding-left:10px;
	}
	.programs ul li {
		width:100%;
		max-width:400px;
		text-align:left;
		padding-left:0px;
	}	
	footer {
		padding: 30px 0 10px 0;
	}
	footer li {
		display:block;
		margin:5px auto;
	}
	.submenu {
		width: 1
0%;
		position: relative;
	}
}  
@media screen and (max-width: 415px) {
	.wplogo {
		max-height:none;
		max-width:300px;
		width:90%;
		margin-right:80px;
	}
}
@media screen and (max-width: 330px) {
	.wplogo {
		max-height:none;
		max-width:300px;
		width:90%;
		margin-right:auto;
	}
	.mobileNavButton{
		top:48px;
		left:50%;
		right:50%;
	}
	h2.strapline af  {
	  margin-top:15px;
	}	
}