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


/* START GLOBAL____________________________________________________________________________________________________________________ */

/* PAGE GLOBAL !!! */

/* 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;
	/* 
	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,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;
}

/* 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 {
  text-align: center;
 }

.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;
}

p {
font-size: 16px;	
}

/* 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;
*/ 

/* 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;
}

/* 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: 7s;
    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;}
	75% {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*/