@charset="UTF-8";
/*-- @media syntax:
@media not|only mediatype and (mediafeature and|or|not mediafeature) 
{
  CSS-Code;
}
*/

.example {
	padding: 20px;
	color: white;
}

/* @media RESPONSIVE SCREEN CSS */

/*-------------------------------------------------*/
/*-------------------------------------------------*/
/*1 Extra small devices (phones, 400px and down) */

@media only screen and (max-width: 449px) {
/*
.example {
	background:#FF0000;
}
*/
.hidden_aside {
	display: none;
	background-color:#EAEAEA;
}

.unhidden_aside {
	display:block;
	background-color: #00FFFF;
}

.pic-tiny {
	width:30%;
	height:auto;
}

.pic-small {
	width:47%;
	height:auto;
}


.pic-big {
	width:60%;
	height:auto;
}


.pic-huge {
	width:100%;
	height:auto;
}


.zoom_tiny:hover, 
.zoom_tiny:active {
    position:relative;
     width:30%;
    height:auto;
    display:block;
    z-index:999;
}

.zoom_small:hover,
.zoom_small:active {
    position:relative;
     width:47%;
    height:auto;
    display:block;
    z-index:999;
}



.zoom_big:hover, 
.zoom_big:active { 
    position:relative;
    width:70%;
    height:auto;
    display:block;
    z-index:999;
}


.zoom_huge:hover,
.zoom_huge:active {
    position:relative;
     width:100%;
    height:auto;
    display:block;
    z-index:999;
}

.zoom_aside:hover, 
.zoom_aside:active {
    position:relative;
    left:-150px;
     width:250%;
    height:auto;
    display:block;
    z-index:999;
}


.pic-tiny-aside {
	width:100%;
	height:auto;
}

.pic-small-aside {
	width:100%;
	height:auto;
}

.pic-big-aside {
	width:100%;
	height:auto;
}

.pic-huge-aside {
	width:100%;
	height:auto;
}



aside {
	display:block;
	float:right;
	width: 20%;
	height: auto;
	background-color: #F0F;
	border: thin solid #000;
	border-radius:10px;
	padding: 0%;
	text-align: center;
	vertical-align: top;	
	margin-top: 0%;
	margin-right: 1%;
	margin-bottom: 0%;
	margin-left: 1%;
	font-size:: 90%;
  font-weight:lighter;
}
}


/*-------------------------------------------------*/
/*-------------------------------------------------*/
/*2 Small devices 
landscape phones and portrait tablets, 
400px and up) */

@media only screen and (min-width: 450px) {

.example {
	background: #00FF00;/*light green*/
}


.hidden_aside {
	display: none;
	background-color: #EAEAEA;
}

.unhidden_aside {
	display: block;
	background-color: #00FFFF;
}

.pic-tiny {
	width: 30%;
	height:auto;
}

.pic-small {
	width: 47%;
	height:auto;
}

.pic-big {
	width: 40%;
	height:auto;
}




.pic-huge {
	width: 100%;
	height:auto;
}


.zoom_tiny:hover,
.zoom_tiny:active {
    position:relative;
     width:30%;
    height:auto;
    display:block;
    z-index:999;
}

.zoom_small:hover,
.zoom_small:active {
    position:relative;
     width:47%;
    height:auto;
    display:block;
    z-index:999;
}




.zoom_big:hover,
.zoom_big:hover {
    position:relative;
     width:65%;
    height:auto;
    display:block;
    z-index:999;
}


.zoom_huge:hover,
.zoom_huge:active {
    position:relative;
     width:100%;
    height:auto;
    display:block;
    z-index:999;
}

.zoom_aside:hover,
.zoom_aside:active {
    position:relative;
/*   top:-25px;*/
    left:-75px;
     width:150%;
    height:auto;
    display:block;
    z-index:999;
}


.pic-tiny-aside {
	width:100%;
	height:auto;
}

.pic-small-aside {
	width:100%;
	height:auto;
}

.pic-big-aside {
	width:100%;
	height:auto;
}

.pic-huge-aside {
	width:100%;
	height:auto;
}


aside {
	display:block;
	float:right;
	width: 25%;
	height: auto;
	background-color: #F0F;
	border: thin solid #000;
	border-radius:10px;
	padding: 1%;
	text-align: center;
	vertical-align: top;	
	margin-top: 0%;
	margin-right: 3%;
	margin-bottom: 0%;
	margin-left: 3%;
}
}

/*-------------------------------------------------*/
/*-------------------------------------------------*/
/*3 Medium devices 
landscape tablets and small laptop, 
768px and up */
@media only screen and (min-width: 768px) {

.example {
	background: #0CF;/*light blue*/
}



.hidden_aside {
	display: none;
	background-color: #EAEAEA;
}

.unhidden_aside {
	display: block;
	background-color: #00FFFF;
}

.pic-tiny {
	width: 24%;
	height:auto;
}

.pic-small {
	width: 30%;
	height:auto;
}

.pic-big {
	width: 30%;/*47*/
	height:auto;
}

.pic-huge {
	width: 30%;/*80*/
	height:auto;
}




.zoom_tiny:hover,
.zoom_tiny:hover {
    position:relative;
     width:45%;
    height:auto;
    display:block;
    z-index:999;
}

.zoom_small:hover,
.zoom_small:hover {
    position:relative;
     width:60%;
    height:auto;
    display:block;
    z-index:999;
}


.zoom_big:hover,
.zoom_big:hover {
    position:relative;
     width:70%;
    height:auto;
    display:block;
    z-index:999;
}


.zoom_huge:hover,
.zoom_huge:hover {
    position:relative;
     width:100%;
    height:auto;
    display:block;
    z-index:999;
}


.zoom_aside:hover,
.zoom_aside:hover {
    position:relative;
/*   top:-25px;*/
    left:-110px;
     width:200%;
    height:auto;
    display:block;
    z-index:999;
}


.pic-tiny-aside {
	width:100%;
	height:auto;
}

.pic-small-aside {
	width:100%;
	height:auto;
}

.pic-big-aside {
	width:100%;
	height:auto;
}

.pic-huge-aside {
	width:100%;
	height:auto;
}


aside {
	display:block;
	float:right;
	width: 15%;
	height: auto;
	
	background-color: #F0F;/*light blue*/
	border: thin solid #000;
	border-radius:10px;
	padding: 1%;
	text-align: center;
	vertical-align: top;
	margin-top: 0%;
	margin-right: 3%;
	margin-bottom: 0%;
	margin-left: 3%;
}
}

/*-------------------------------------------------*/
/*-------------------------------------------------*/
/*4 Large devices 
15 inch laptops and desktops, 
1200px and up */
@media only screen and (min-width: 1200px) {

.example {
	background: orange;
}


.hidden_aside {
	display: none;
	background-color: #EAEAEA;
}

.unhidden_aside {
	display: block;
	background-color: #00FFFF;
}

.pic-tiny {
	width: 8%;
	height:auto;
}

.pic-small {
	width: 16%;
	height:auto;
}

.pic-big {
	width: 32%;
	height:auto;
}

.pic-huge {
	width: 75%;
	height:auto;
}



.zoom_tiny:hover {
    position:relative;
     width:15%;
    height:auto;
    display:block;
    z-index:999;
}

.zoom_small:hover {
    position:relative;
     width:32%;
    height:auto;
    display:block;
    z-index:999;
}


.zoom_big:hover {
    position:relative;
     width:75%;
    height:auto;
    display:block;
    z-index:999;
}


.zoom_huge:hover {
    position:relative;
     width:90%;
    height:auto;
    display:block;
    z-index:999;
}


.zoom_aside:hover {
    position:relative;
/*   top:-25px;*/
    left:-110px;
     width:200%;
    height:auto;
    display:block;
    z-index:999;
}


.pic-tiny-aside {
	width:100%;
	height:auto;
}

.pic-small-aside {
	width:45%;
	height:auto;
}

.pic-big-aside {
	width:45%;
	height:auto;
}

.pic-huge-aside {
	width:45%;
	height:auto;
}


aside {
	display:block;
  float:right;
	width: 15%;
	height: auto;
	background-color: #F0F;
	border: thin solid #000;
	border-radius:10px;
	padding: 1%;
	text-align: center;
	vertical-align: top;	
	margin-top: 0%;
	margin-right: 3%;
	margin-bottom: 0%;
	margin-left: 3%;
}
}

/*-------------------------------------------------*/
/*-------------------------------------------------*/

/*5 Larger devices 
over 15 inch laptops and desktops
1600px and up */

@media only screen and (min-width: 1600px) {

.example {
	background: pink;
}


.hidden_aside {
	display: none;
	background-color: #EAEAEA;
}

.unhidden_aside {
	display: block;
	background-color: #00FFFF;
}


.pic-tiny {
	width: 5%;
	height:auto;
}

.pic-small {
	width: 10%;
	height:auto;
}

.pic-big {
	width: 25%;
	height:auto;
}

.pic-huge {
	width: 45%;
	height:auto;
}

.pic-tiny-aside {
	width:100%;
	height:auto;
}

.pic-small-aside {
	width:100%;
	height:auto;
}

.pic-big-aside {
	width:100%;
	height:auto;
}

.pic-huge-aside {
	width:100%;
	height:auto;
}

.zoom_tiny:hover {
    position:relative;
     width:10%;
    height:auto;
    display:block;
    z-index:999;
}

.zoom_small:hover {
    position:relative;
     width:20%;
    height:auto;
    display:block;
    z-index:999;
}


.zoom_big:hover {
    position:relative;
     width:80%;
    height:auto;
    display:block;
    z-index:999;
}

.zoom_huge:hover {
    position:relative;
     width:75%;
    height:auto;
    display:block;
    z-index:999;
}

.zoom_aside:hover {
    position:relative;
/*   top:-25px;*/
    left:-100px;
    width:200%;
    height:auto;
    display:block;
    z-index:999;
}

aside {
	display:block;
	float:right;
	width: 10%;
	height: auto;
	background-color: #F0F;
	border: thin solid #000;
	border-radius:10px;
	padding: 1%;
	text-align: center;
	vertical-align: top;	
	margin-top: 0%;
	margin-right: 3%;
	margin-bottom: 0%;
	margin-left: 3%;
}
}


/*-------------------------------------------------*/
/*-------------------------------------------------*/

/* START STANDARD HTML TAGS */



a:link {
	color:blue;
}

a:visited {
	color:purple;
}

a:hover {
	color:orange;
}

a:focus {
	color:green;
}

a:active {
	color:red;
}


/* see div below
div {
	position:relative;
	border: medium solid #00F;
	font-size: 100%;
	color:#000000
	background-color:#00FFFF;/*Aqua Blue*//*
  bottom: auto;
	padding: 1%;
	}
*/


div, header, address, article, footer, nav, section {
	color: #000;
	background-color:#00FFFF;/*Aqua Blue*/
	clip: rect(auto,auto,auto,auto);
/*background-color: pink;pink
	margin: .5%;
	padding: 1%;
	border-radius:10px;
	border: medium solid #FF0;
*/
}


body {
	color: #000;
	background-color:#00FFFF;/*coral*/
	font-size: 100%;
	font-weight:lighter;
	clip: rect(auto,auto,auto,auto);
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	margin: .5%;
	padding:.5%;
	border:2px solid #000000;
	border-radius:10px;
}

br {}

img {
	/*opacity: 1;
	z-index: -1;		
	display: inline-block;
	position: relative;
	background:none;
	background-position: center;
	margin: 1%;
	border: thin solid #00F;
	box-sizing:border-box;	

	padding: 1px;
	min-width: 20%;	
	max-width: 90%;
	width: 200px;
	float:left;
	*/
	}

#image_round {
	display:block;
	border-radius:100%;
	/*	
	border:thick;
	background-color: red;
	background-image: url('logo.png');
	background-position: center;
	*/
}


figure {
	background-color: #CCC;
	padding: 0px;
	color: #000000;
	float: none;
	border: thin solid #000;
	height: auto;
	width: auto;
	margin-top: 0%;
	margin-right: 2%;
	margin-bottom: 0%;
	margin-left: 0%;
}


#gaming {
	width:45;
}

/*Paragraphs*/
p {}

/*LISTS*/
ul {}
li {}
ol {}

.letters_blue {
	color:#00FFFF;
}
	



span.dropt {
	border-bottom: thin dotted;
	background: #ffeedd;
}

span.dropt:hover {
	text-decoration: none;
	background: #ffffff;
	z-index: 6;
}

span.dropt span {
	position: absolute;
	left: -9999px;
	margin: 20px 0 0 0px;
	padding: 3px 3px 3px 3px;
	border-style:solid;
	border-color:black;
	border-width:1px;
	z-index: 6;
}

span.dropt:hover span {
	left: 2%;
	background: #ffffff;
}

span.dropt span {
	position: absolute;
	left: -9999px;
	margin: 4px 0 0 0px;
	padding: 3px 3px 3px 3px;
	border-style:solid;
	border-color:black;
	border-width:1px;
}

span.dropt:hover span {
	margin: 20px 0 0 170px;
	background: #ffffff;
	z-index:6;
}

span.imgswap:hover img {
	visibility:hidden;
}

span.imgswap {
	background-image:url("/photosr.us/css/bottom-image.jpg");
	background-repeat: no-repeat;
	display:block;
}


video {

	max-width:75%;
  height: auto;
}


#Video_Device_Options {
	width: 70%;
}

.auto-size {
	width:auto;
}



.background_grey {
	background-color:#CCC;
}

.background_yellow {
	background-color: #FF0;
}

.background_green {
	background-color:#00FF00;
}

.background_green_dark {
	background-color:#339900;
	color:#FFF;
}


.background_black {
	background-color:#000000;
	color:#FFF;
}

.background_white {
	background-color:#FFFFFF;
	color:#000000;
}

.background_aqua-blue {
	background-color:#0FF;
}

.background_grey_dark {
	background-color: #666;
	color: white;
}

.background_grey_light {
	background-color: #EAEAEA;
		}

.background_red {
	background-color: red;
	color: white;
}


.background_blue {
	background-color: blue;
	color: white;
}


.button {
	background-color:#FF0;
	border:thin;
	color: #000;
	padding: 15px 32px;
	text-align: left;
	text-decoration: none;
	display: inline-block;
	margin: 4px 2px;
	cursor: pointer;
}


.container {
	position: relative;
	background:none;
	z-index: 0;
}

.copyright-black {
	position: absolute;
	/*position in last postion relative*/
	left: 2%;
	bottom: 3%;
	text-align:center;
	font-size: 10px;
	color:#000000;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	background:none;
	z-index: 0;
}

.copyright-white {
	position: absolute;
	/*position in last postion relative*/
	left: 2%;
	bottom: 3%;
	text-align:center;
	font-size: 10px;
	color:#FFFFFF;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	background:none;
  z-index: 0;
}



/*css classes ONLY*/
.dropv, .dropv ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.dropv a {
	display: inline;
	width: 170px;
}

.dropv li {
	float: left;
	padding: 0px 8px 2px 0px;
}

/* all list items */
.dropv li ul {
	position: absolute;
	background: #993399;
	padding: 0px 0px 0px 4px;
	width: 170px;
	left: -9999px;
}

/* second-level lists */
.dropv li:hover ul {
	left: auto;
}

/* nest list under hovered list items */
.dropv li ul li a {
	color: #ffffff;
	text-decoration: none;
	display: block;
}

.dropv li ul li a:hover {
	color: yellow;
	background:#663399;
}


.font_uppercase {
	text-transform: uppercase;
}

.font_lowercase {
	text-transform: lowercase;
}

.font_capitalize {
	text-transform: capitalize;
}


.font_small {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 75%;
	color: #000;
	font-weight: lighter;
}

.font_blinking {
	background-color: #FFFFFF;
	
	color: #000;
	text-decoration: blink;
}



.h1_properties {
	font-size: 120%;
	font-weight: bold;
}

.h2_properties {
	font-weight: bold;
	font-size: 130%;
}

.h3_properties {
	font-weight: bold;
	font-size: 130%;
}

/*display ALL borders of all boxes
* {
	border:thin solid rgba(150 150 150 0.1);
	}
*/


.hidden {
	display: none;
	background-color: #EAEAEA;
}

.hidden2 {
	display: none;
	background-color: #EAEAEA;
}

.menu_font_size {
	font-size: 12px;
}

.unhidden {
	display: block;
	background-color: #00FFFF;
}

.unhidden2 {
	display: block;
	background-color: #00FFFF;
}
/*END GENERAL HTML SECTION*/





/*BEGIN Hoverable Dropdown Menu*/

.dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown-content 
 {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
	background-color: #ddd;
	}

.dropdown:hover 
.dropdown-content {
	display: block;
	}

.dropdown:hover 
.dropbtn {
	background-color: #3e8e41;
	}

/*END Hoverable Dropdown Menu*/



/* "Mouse Hover" fix for moble devices 
As long as the 
:active selector 
is called AFTER the 
:hover selector
you can remedy "no curser hover" on cell phone (according to w3schools)
user must "touch" the "top" of photo to equivicate "hover" effect. 
EXAMPLE:

 .info-slide:hover, 
 .info-slide:active
 {
   height:300px;
 }
END HOVER FIX NOTATION */



/*TopNav with DropDown*/
/*
.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}
*/