/* CONTENTS (sections): GLOBAL / IMAGE  / ELEMENT / FONT / GALLERYS / ANIMATION / OTHER */


/* START GLOBAL____________________________________________________________________________________________________________________ */

/* PAGE GLOBAL !!! */

/* Center Vertically and Horizontally 
.deadCenterDM{
    display: flex;
    justify-content: center;
    align-items: center;
}*/

/* MARQUEE */
.marquee {
  height: 25px;
  width: 800px;
  overflow: hidden;
  position: relative;
}

.marquee div {
  display: block;
  width: 200%;
  height: 30px;
  position: absolute;
  overflow: hidden;
  animation: marquee 15s linear infinite;
}

.marquee span {
    width: 50%;
	float: left;
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}

/* Use on element (p, h1 etc.) */
.dmCenterElement2 {
    margin: 0;   /* should already be margin:0 by global (above) */
    /*background: yellow; /* Optional, shows content width */
    position: absolute;	/* is positioned relative to the nearest positioned ancestor(instead of positioned relative to the viewport, like fixed).*/
	left: 50%; /* move the element halfway across the container */
	margin-right: -50%; /* see below */
	transform: translate(-50%, -0%) /* horizontal, vertical */
		/* The 'margin-right: -50%' is needed to compensate the 'left: 50%'. The 'left' rule reduces the available width for the element by 50%. The renderer will thus try to make lines that are no longer than half the width of the container. By saying that the right margin of the element is further to the right by that same amount, the maximum line length is again the same as the container's width. */
}


/* END MARQUEE */


.dmBG {
background-color: gray; 
/* linear-gradient(to bottom right, rgba(255,255,255,.5), rgba(255,255,255,.5)); */
}

/* Prevents pages from "rocking" on mobile devices*/
html {
/*max-width: 95%; */
  max-width: 95vmax; 
}

.vmax {
	max-width: 100vmax;
}

body { 
	/* background-image: url('BG-forest5.gif'); */
	width: 100%;
    height: auto;
	margin: 0;
    padding: 0;
	font-size: 14px; 
/* 	min-height: 2000px; */
    padding-top: 0px;
	/* background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,255,0,.3), rgba(0,0,255,.3)); */
	/* 
	padding-top was 70px
	background-size: cover;
	font-family: 'Eagle Lake', cursive; */
}

/*  MARGIN, PADDING, Box-sizing BOOTSTRAP DEFEAT !!!
for h,p,img,row,container Elements, class="noboxDM" */

h1,h2,h3,h4,h5,h6 {
box-sizing: content-box;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-left: 0px;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

p {font-size: 18px;}
	
p,img, .noboxDM {
    padding-right: 0px;
    padding-left: 0px;
	margin-left: 0px;
	margin-right: 0px;
	box-sizing: content-box;
	display: inline;
}	

.container {
    padding-right: 0px;
    padding-left: 0px;
	margin-left: 0px;
	margin-right: 0px;
	box-sizing: content-box;
	display: inline;
}

.row {
    padding-right: 0px;
    padding-left: 0px;
	margin-left: 0px;
	margin-right: 0px;
	box-sizing: content-box;
	display: inline;
}
 	
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
padding-right: 0px;
    padding-left: 0px;
	margin-left: 0px;
	margin-right: 0px;
	box-sizing: content-box;
	display: inline;
}	

/* ____________________________________________________________________________________________________________________ */
/* TABLES / BOOTSTRAP DEFEAT !!!

  /* bootstrap default adds a border */
 .table th, .table td { 
     border-top: none !important; 
 }
 
/* vertical-align for Tables / FLEX NOT SUPPORTED IN ALL MODERN BROWSERS!!! */
.vertical-align {
  display: flex;
  flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: top; 
  justify-content: center; /* Optional, to align inner items 
                              horizontally inside the column */
}

/* END GLOBAL____________________________________________________________________________________________________________________ */


/* START IMAGE____________________________________________________________________________________________________________________ */

/* TEXT OVER IMAGE */
.caption {
        width:60%;
        position: absolute;
		top: 1px;
		right: 25px;
		box-sizing: content-box;
		line-height: 1.2;
		padding-top: 0px;
        padding-bottom: 0px;
		}
/* TEXT OVER IMAGE */

/* Center Image */
.imgDM5 {
 /*    display: block; */
    margin: auto;
    width: 50%;
}

/* Use with class img-responsive to limit image size reduction (avoids images too small on smaller media) */
.responDM {
/* 
	min-width: 100%;
 */
	max-width: 160px;
	height: auto;
}

/* START resizes text over image (black font linkDM5)  */

@media only screen and (min-width: 100px) {
      a.linkDM5 { 
	  font-size: 65%;
	 }  
}

@media only screen and (min-width: 400px) {
      a.linkDM5 { font-size: 90%;
	  /* line-height: 1; */
   }
}   
@media only screen and (min-width: 700px) {
      a.linkDM5 { font-size: 100%; 
   }     
}

@media only screen and (min-width: 1000px) {
      a.linkDM5 { font-size: 130%; 
   }     
}
/* END resizes text over image */   




/* START ELEMENT____________________________________________________________________________________________________________________ */

/* CUSTOM hr*/
/* hr blue, thicker */
hr.bluehrDM {color: #4876FF; 
	height: 1px; 
	background-color: #4876FF;
	margin: 2px 0;
}

/* hr black, thicker, width 80% */
hr.bluehrDM3 {
	color: #000000; 
	height: 2px; 
	background-color: #000000;
	width: 25%; 
}


/* CUSTOM hr*/
/* hr black, even thicker */
hr.bluehrDM2 {color: #000000; 
	height: 3px; 
	background-color: #000000;
	margin: 3px 0;
	}

	
hr.redhrDM {color: #ff0000;
	height: 4px; 
	background-color: #ff0000;
	margin: 2px 0;
}

/* Float to the right */
.flr {float: right;}
/* float element left */
.l{display: block; padding-top: 0px; padding-bottom: 0px; float: left;}
/* float element right */
.r{display: block; padding-top: 0px; padding-bottom: 0px; float: right;}


/* Position an element up 25px) */
.posDM {
  position: relative;
  top: -25px;
  left: 0px;
}

/* CENTER(s)  */

.center {
  text-align: center;
}


.centerAll {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%) 
}

/* Use on <div> */
.dmCenterDiv {
	height: 4em; /* size as desired */
    position: relative; 
	}

	/* Use on element (p, h1 etc.) */
.dmCenterElement {
    margin: 0;   /* should already be margin:0 by global (above) */
    background: yellow; /* Optional, shows content width */
    position: absolute;	/* is positioned relative to the nearest positioned ancestor(instead of positioned relative to the viewport, like fixed).*/
	top: 50%; /* Place it halfway down the container with 'top: 50%'. (50% of the height of the container.) */
	left: 50%; /* move the element halfway across the container */
	margin-right: -50%; /* see below */
	transform: translate(-50%, -50%) /* horizontal, vertical */
		/* The 'margin-right: -50%' is needed to compensate the 'left: 50%'. The 'left' rule reduces the available width for the element by 50%. The renderer will thus try to make lines that are no longer than half the width of the container. By saying that the right margin of the element is further to the right by that same amount, the maximum line length is again the same as the container's width. */
}	



.grayDM {
background-color: #D8D8D8 ;
}

.greenDM {
background-color: #FAEBD7;	
}


.padDM {
    padding-right: 5px;
    padding-left: 5px;
}

 /* FULL / MAX Width */
.fullWidth {
	width: 100%;
}

.maxWDM {
max-width: 100%;
}

.maxWDM2 {
max-width: 100vw;
}

.maxWDM3 {
font-size: 5vw;
}

/* END ELEMENT____________________________________________________________________________________________________________________ */


 
  

  /* START FONTS____________________________________________________________________________________________________________________ */  
  
  /* FONT LINKS (Footer FONT links)*/

  
  
  /* black text no underline */
a.tn {
	color: #000000;
	text-decoration: none;
	}  
  
a.ft {
    color: #654321;
    text-decoration: none;
} 
  /* Black Font Links, forced back-ground color white*/
a.linkDM3 {
    text-decoration: none;
	color: #000000;
	line-height: 1.2;
	box-sizing: content-box;
	background-color: #ffffff;
} 

a.linkDM5 {
    text-decoration: none;
	color: #000000;
	line-height: 1.2;
	box-sizing: content-box;
	background-color: #ffffff;
} 

  /* Red Font links BOLD, Eagle Lake, forced back-ground color white*/  
a.linkDM2 {
    text-decoration: none;
	color: #ff0000; 
	font-weight: bold;
	font-family: 'Eagle Lake', cursive;
	line-height: .9;
	background-color: #ffffff;
	box-sizing: content-box;
}   
  
  /* FONTS (Not Links)*/

/* WEB SAFE FONTS  
font-family: "Times New Roman", Times, serif;
Georgia, serif
"Palatino Linotype", "Book Antiqua", Palatino, serif
"Comic Sans MS", cursive, sans-serif
________________
font-style: italic;
font-style: oblique;
font-size: 40px;
*/ 


 /* SPACE for text small <br> use as child of <p>*/
.dmftSpace {
    font-size: 1px;
}


/* FONT default is border-box / 16px Black */	
.fontDM16 {
	font-size: 16px;
	color: #000000;
	line-height: 100%;
    margin-top: -25px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
	box-sizing: content-box;
	display: inline;
    -webkit-margin-before: -25em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px; 
	text-align: center;
}	

    /* italic*/
.italicDM {
    font-style: italic;
}

 /* LINE-HEIGHT for text */
.dmDM2 {
    line-height: 100%;
}
 
/* Red , Bold*/
.redDM2 {
	color: #ff0000;
}

/*Blue*/
.blueDM {
	color: #0000ff;
}


/* Black */
.blackDM2 {
    color: #000000; font-weight: normal; 
}

/* gray background */ 
.gray {
	background-color: #d3d3d3 ; 
} 

/* white background */
.whiteBGDM {
background-color: #ffffff;
 }
 
.typeDMfont {
font-family: "Courier New", Courier, monospace; 
font-weight: 700;
}

/* END FONTS____________________________________________________________________________________________________________________ */ 


	
/* GALLERYS ____________________________________________________________________________________________________________________ */	
/* START CAROUSEL */
/* Carousel Custom Control of Caption Center */
/* .carousel-inner { text-align: center; }
 */
/* Carousel Custom Control Image Sizing*/
/* height and width MAY BE auto  OR max-width and max-height*/
.carousel .item > img { display: inline-block;
  width: auto;
  max-height: 600px;
}
/* END CAROUSEL */





/* ANIMATION ____________________________________________________________________________________________________________________ */	

/* BEGIN LOGO */
.nobr { white-space: nowrap; }
 
.logo {
/* background-color: #ff0000;  
background: linear-gradient(red, yellow); /* Standard syntax 
background: radial-gradient(red 5%, yellow 15%, blue 60%); /* Standard syntax
background: radial-gradient(#B0C4DE 50%, #5993E5 50%); /* Standard syntax */
border-radius: 100px;
background: radial-gradient(circle, #4876FF 45%, #5993E5, #FF9999); /* Standard syntax */
font-family: "Book Antiqua", serif;
color: white;
 }

/* Start logo2*/
.logo2 {
    animation-name: twoDM;
    animation-duration: 10s;
    animation-delay: 0s;
	visibility: visible;
	animation-iteration-count: 10;
	animation-fill-mode: forward;
	z-index: 2;
 }
 @keyframes twoDM {
	0% {transform:scale(1,0); position: relative; left:0px; top:0px; visibility: hidden;}
	5% {transform:scale(1,1); position: relative; left:0px; top:0px; visibility: visible;}
	25% {transform:scale(1,1); position: relative; left:0px; top:0px; visibility: visible;}
	100% {transform: visibility: visible;}
	/* 100% {transform: translate(1em,-300em);}  -left +right, -down +up */
	}
/* END logo2 */ 

/* END LOGO */ 
 
 
/* _______________________________________________________________________________________________________________ */
 
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
EXPERIMENTING with vw / vh 

1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger

EXAMPLEs:
h1 {font-size: 5.9vw;}
h2 {font-size: 3.0vh;}
p {font-size: 2vmin;}

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 
 */

/* @media font h2 & .ballDM resize for "Words" and "Ball"
Bootstrap reference:
xs 768px
sm 768 to 992px
md 992px to 1200px
lg 1200px and up  */
 

 /* Media screen queiries to define h2 / underline (square div) always 2/1 ratio  */ 
 @media only screen and (min-width: 1px) and (max-width: 500px)
{
h1 {font-size:28px;}	
h2 {font-size:18px;}
h3 {font-size:16px;}
}


/* 
@media only screen and (min-width: 1px) and (max-width: 500px){
.tabDM {font-size:.4em;}
}
 @media only screen and (min-width: 501px) and (max-width: 992px) {
h2 {font-size:1.1em;}
} 
@media only screen and (min-width: 501px) and (max-width: 992px) {
.tabDM {font-size:.4em;}
}


@media only screen and (min-width: 992px) and (max-width: 1200px) 
{
h2 {font-size:2vw;}
.underlineDM {font-size:1vw;}
} 

@media only screen and (min-width: 992px) and (max-width: 3000px) 
{
h2 {font-size:2vw;}
.underlineDM {font-size:1vw;}
}

	/* -left +right, -up +down
 
 /* _________________________________________________________________________ */

 
 
 /* Animation 1 "simple" */
.rightNOT {position: relative; left: 0em; } /* word  (left is right), */
.rightNOTA {position: relative; left: 1.3em; } /* line (left is right) */
.indentNOT {visibility: hidden; animation-name: indentOne; animation-duration: 3s; animation-delay: 0s; animation-fill-mode: forwards;}
@keyframes indentOne 
  {
  0%   { opacity: 0; visibility: visible;}
  100% { opacity: 1; visibility: visible;}	
  } 
.underlineDM {width: .35em; height:.1em; background-color: red;
	animation-name: underlineDM1; animation-duration: 3s; animation-delay: 1s;
	visibility: hidden; animation-fill-mode: forwards; }
@keyframes underlineDM1 
	{
	0% {opacity:0; visibility: visible; transform: scaleX(1);}
	05% {opacity:.1; transform: scaleX(1);}
	50% {opacity:1; transform: scaleX(8);}
	100% {opacity:1; visibility: visible; transform: scaleX(8);}
	}	

	
/* Animation 2 "elegant" */
/* ROCKING PROBLEM IS THIS CODE: transform: translate(6.5em,4em); !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.rightA {position: relative; left: 4em;}/* word  (left is right), */
.rightAA {position: relative; left: 5.5em;}/* line (left is right) */
.indentA {visibility: hidden; animation-name: indentAA; animation-duration: 3s; animation-delay: 1s;  animation-fill-mode: forwards; }
@keyframes indentAA
  {
  0%   { opacity: 0; visibility: visible;}
  100% { opacity: 1; visibility: visible;}	
  }  
.underlineDMA {width: .4em;  height:.1em; background-color: red; 
	animation-name: underlineDMAA; animation-duration: 3s;  animation-delay: 2s;
	visibility: hidden; animation-fill-mode: forwards; }
@keyframes underlineDMAA
	{
	0% {opacity:0; visibility: visible; transform: scaleX(1);}
	05% {opacity:.1; transform: scaleX(1);}
	50% {opacity:1; transform: scaleX(8);}
	100% {opacity:1; visibility: visible; transform: scaleX(8);}
	} 
 /* End Animation 2 */

 

/* Animation 3 "efficent" */
.rightB {position: relative; left: 8em; } /* word  (left is right), */
.rightBB {position: relative; left: 9.5em; } /* line (left is right) */
.indentB {visibility: hidden; animation-name: indentBB; animation-duration: 3s; animation-delay: 2s; animation-fill-mode: forwards;}
@keyframes indentBB
  {
  0%   { opacity: 0; visibility: visible;}
  100% { opacity: 1; visibility: visible;}	
  }
.underlineDMB {width: .4em;  height:.1em; background-color: red; 
	animation-name: underlineDMBB; animation-duration: 3s;  animation-delay: 3s;
	visibility: hidden; animation-fill-mode: forwards; }
@keyframes underlineDMBB
	{
	0% {opacity:0; visibility: visible; transform: scaleX(1);}
	05% {opacity:0; transform: scaleX(1);}
	50% {opacity:1; transform: scaleX(8);}
	100% {opacity:1; visibility: visible; transform: scaleX(8);}
	}
  
  
/* Animation 4 "websites" */
.rightC {position: relative; left: 12em; } /* word  (left is right), */
.rightCC {position: relative; left: 13.75em; } /* line (left is right) */
.indentC {visibility: hidden; animation-name: indentCC; animation-duration: 3s; animation-delay: 3s; animation-fill-mode: forwards;}
@keyframes indentCC
  {
  0%   { opacity: 0; visibility: visible;}
  100% { opacity: 1; visibility: visible;}	
  }  
.underlineDMC {width: .45em;  height:.1em; background-color: red; 
	animation-name: underlineDMCC; animation-duration: 3s;  animation-delay: 4s;
	visibility: hidden; animation-fill-mode: forwards; }
@keyframes underlineDMCC
	{
	0% {opacity:0; visibility: visible; transform: scaleX(1);}
	05% {opacity:0; transform: scaleX(1);}
	50% {opacity:1; transform: scaleX(8);}
	100% {opacity:1; visibility: visible; transform: scaleX(8);}
	}
 /* END Words */

 
 /* Javascript Screen / Time Report */
.pJSDM {position: relative; left: 1em; top: 1em;} /* (left is right), */
.pJSDMA {visibility: hidden; animation-name: pJSDMAA; animation-duration: 3s; animation-delay: 4s; animation-fill-mode: forwards;}
@keyframes pJSDMAA
  {
  0%   { opacity: 0; visibility: visible;}
  100% { opacity: 1; visibility: visible;}	
  }  
 
/* BEGIN Projects */
.nobr { white-space: nowrap; }
 
.projects {
/* background-color: #ff0000;  
background: linear-gradient(red, yellow); /* Standard syntax 
background: radial-gradient(red 5%, yellow 15%, blue 60%); /* Standard syntax
background: radial-gradient(#B0C4DE 50%, #5993E5 50%); /* Standard syntax */
border-radius: 100px;
background: radial-gradient(circle, #FF9999 45%, #5993E5, #4876FF); /* Standard syntax */
/* 
background: radial-gradient(circle, #4876FF 45%, #5993E5, #FF9999); /* Standard syntax */
color: white;
 }

/* Start projects2*/
.projectsA {
    animation-name: projectsAA;
    animation-duration: 2s;
    animation-delay: 0s;
    transform: scale(.7,.7);
	visibility: visible;
	animation-iteration-count: 1;
	animation-fill-mode: forward;
	z-index: 2;
 }
 @keyframes projectsAA {
	0% {transform:scale(.1,0); position: relative; left:0px; top:0px; visibility: hidden;}
	60% {transform:scale(.1,0); position: relative; left:0px; top:0px; visibility: hidden;}
	95% {transform:scale(.7,.7); position: relative; left:0px; top:0px; visibility: visible;}
	100% {transform: scale(.7,.7); position: relative; left:0px; top:0px; visibility: visible;}
	
	
	/* 100% {transform: translate(1em,-300em);}  -left +right, -down +up */
	}
/* END projectsA */ 


/* Start projectsB (remaining headers)*/

.projectsB {
/* background-color: #ff0000;  
background: linear-gradient(red, yellow); /* Standard syntax 
background: radial-gradient(red 5%, yellow 15%, blue 60%); /* Standard syntax
background: radial-gradient(#B0C4DE 50%, #5993E5 50%); /* Standard syntax */
border-radius: 100px;
background: radial-gradient(circle, #FF9999 45%, #5993E5, #4876FF); /* Standard syntax */
/* 
background: radial-gradient(circle, #4876FF 45%, #5993E5, #FF9999); /* Standard syntax */
color: white;
 }

.projectsBB {
    animation-name: projectsBBB;
    animation-duration: 7s;
    animation-delay: 0s;
    transform: scale(.7,.7);
	visibility: visible;
	animation-iteration-count: 1;
	animation-fill-mode: forward;
	z-index: 2;
 }
 @keyframes projectsBBB {
	0% {transform:scale(.1,0); position: relative; left:0px; top:0px; visibility: hidden;}
	5% {transform:scale(.1,0); position: relative; left:0px; top:0px; visibility: hidden;}
	25% {transform:scale(.7,.7); position: relative; left:0px; top:0px; visibility: visible;}
	100% {transform: scale(.7,.7); position: relative; left:0px; top:0px; visibility: visible;}
	
	
	/* 100% {transform: translate(1em,-300em);}  -left +right, -down +up */
	}
/* END projectsBB */ 
/* END projects */ 


/* START Modal Dialog Link*/


.modalDialog {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	/* 
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	 */
	transition: opacity 400ms;
	pointer-events: none;
}

.modalDialog:target {
	opacity:1;
	pointer-events: auto;
}

.modalDialog > div {
	width: 250px;
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	background: #fff;
	/* 
	background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);*/
}


.close {
	opacity:1;
	/* was background: #606061; */
	background: #d3d3d3;
	/* was color: #FFFFFF; */
	color: #FF0000;
	line-height: 25px;
	position: absolute;
	/* was right: -12px; */
	right: -0.1px;
	text-align: center;
	/* was top: -10px; */
	top: -0.1px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	/* 
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	 */
	/* was box-shadow: 1px 1px 3px #000;
	box-shadow: 10px 10px 10px #000;
	*/
}

.close:hover { background: #00d9ff; }





/* CLOSE Modal Dialog Link*/