/* styles for nav */


/* nav alignment adjustment */

/* outer styles */
nav{display:flex;align-items:center;}
nav ul{width:100%;}
nav.outer{display:inline; display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; justify-content:space-between; flex-wrap: wrap; flex-direction: row;}
nav ul.outer{list-style-type:none; list-style:none; text-align:center; line-height:2em; margin:1em 2%; padding:0;}
nav li.outer{font-family: LeagueGothicRegular, tahoma, georgia, sans-serif; font-size:1.3em;   z-index:3; border: ridge #fff 0.15em; border-radius:0.3em; padding: 0.3em;}
nav li.outer{display:inline; display: -moz-box; display: -ms-flexbox; display: flex; justify-content:space-around; flex-wrap: wrap; flex-direction: row;}
/* background etc */
nav li.outer{background-color:#fff; background-color: rgba(255,255,255,0.7);}
nav li.outer a{color:#555; text-decoration:none; border:0;}
/* sample blending effects for future */
/* nav li.outer {width: 200px; height: 200px; padding-top: 65px; text-align: center; border-radius: 100px; margin: 10px;  blend-mode: color-burn ;} */
nav li.outer:hover{background-color:#555; color:#fff;}
nav li.outer:hover a{color:#fff;}
nav li.outer a:hover{color:#fff;}
/* to expand text only */
nav li.outer a:hover{-webkit-transform: scale(1.11); -moz-transform: scale(1.11); transform: scale(1.11);}
/* adjustments */
nav:before, nav:after {content: ""; display: table;}
nav:after {clear: both;}

/* define outer flex */
ul.outer{display:flex; justify-content:center;}


/* Various hover effects */

/* floating shadow */

.float-shadow {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.float-shadow:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
/* W3C */
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform, opacity;
transition-property: transform, opacity;
}
.float-shadow:hover, .float-shadow:focus, .float-shadow:active {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
/* move the element up by 5px */
}
.float-shadow:hover:before, .float-shadow:focus:before, .float-shadow:active:before {
opacity: 1;
-webkit-transform: translateY(5px);
transform: translateY(5px);
/* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}


#navBase li{display:inline; float:none; position:relative; white-space:nowrap; text-align:center;}
#navBase ul{list-style-type:none; text-align:center; line-height:3em; padding:1% 2% 2% 2%; min-width:80%;}
#navBase li{background: rgba(255,255,255,0.9); padding:0.3em; margin:1%; border-radius:11%;}

/* #InnerLinks li{display:inline; float:none; position:relative; white-space:nowrap; text-align:center;}
#InnerLinks ul{list-style-type:none; text-align:center;  line-height:3em; margin: 1% 2%; width:100%;}
#InnerLinks li{background: rgba(255,255,255,0.9); padding:0.3em; margin:1%; border-radius:11%;}
#InnerLinks{text-align:center;} */

/* general article styles for style and tech pages */

article{position:relative;}
article{background: rgba(255,255,255,0.8); padding:1.5em 2em 1.5em 3em; margin:0 3%; border-radius:3%;}
article p{text-align:justify; text-justify:distribute;}
article p{font-family:source_sans_proregular, tahoma, sans-serif; line-height:1.4em; font-size:95%; text-indent: 3em;}

/* setting width between columns */

article{
    -webkit-column-gap: 5em; /* Chrome, Safari, Opera */
    -moz-column-gap: 5em; /* Firefox */
    column-gap: 5em;}

/* general aside element settings */

aside{position:relative; float:right; width:22%; }
aside{padding:0; margin:0 2%; margin-top:5%; z-index:1;}
aside p{font-family: "source_sans_proitalic", tahoma, sans-serif; font-size:0.95em; color:#fff; padding:0 1em 1em 1em; line-height:1.4em; text-indent:1.4em; text-align:justify; text-justify:distribute;}
aside a{color:#f60; border-radius:11%;}
/* was f3e49f*/
aside a:hover {color:#ffffff; background:#f60; font-weight:normal; text-decoration:none; border:0;}
aside{-moz-box-shadow:inset 0 0 5px rgba(136,136,136,0.7); -webkit-box-shadow: inset 0 0 5px rgba(136,136,136,0.7);
box-shadow: inset 0 0 5px rgba(136,136,136,0.7); border-radius: 11px;}

/* footer structure */
footer{width:100%; margin:0;}

/* various divs and others */
.navandheader{background-image: url('../img/rainbowflat.jpg');  background-size:100% auto; background-position: 0% 0%; background-repeat:no-repeat; background-attachment: scroll;}
 .navandheader h1{margin:1em 0 0.1em 0; padding-bottom:0.3em;}

/* paragraph structure */

.fLine{padding:1em 0 0.5em 0;}
.fLine p:first-line{font-size:100%; font-weight:bold; text-indent:0;}

/* text styles */

.first3{font-size:1.1em; font-family: gandhi_serifitalic, serif;}
.innerLinks{font-family:BloklettersBalpenBalpen, geneva, tahoma, sans-serif; font-size:0.9em;}
#InnerLinks{font-family:BloklettersBalpenBalpen, geneva, tahoma, sans-serif; font-size:0.9em;}

/* headers */

h1{font-family: "SaginawMedium", cursive; font-size:2.5em; margin:0.5em; margin-bottom: -0.4em; padding-left:2em; font-weight:normal;}
h2{font-family: gandhi_serifitalic, BloklettersBalpenBalpen, serif; font-size:1.2em; font-weight:normal; text-align:left; padding-left:4em; margin:0.8em 0; line-height:2em;}
h3{font-family: gandhi_serifitalic, BloklettersBalpenBalpen, serif; font-size:1.05em; font-weight:normal; text-align:left; padding-left:2em; margin:0.8em 0;}
h4{color:#444; font-family: source_sans_proregular, tahoma, sans-serif; margin:0; margin-left:1em; margin-top:1em;  font-size:1em; font-weight:bold;}
h5{margin: 0.3em 0 0.5em 1em; font-weight:normal; font-family:gandhi_serifitalic, tahoma, sans-serif; font-size: 0.95em; color:#333;}
#iwii{z-index:-1; padding:0;  margin-top:-56px;}

/* general styles for listed explanation */

.shurui{margin:0 1em; font-size:1em; font-weight:bold; color:#555;}
.yoyaku{padding:0 1em; font-family:CaviarDreamsItalic, tahoma, sans-serif; font-size: 0.9em; font-weight:bold;}
.setsumei{font-family:source_sans_proregular, tahoma, sans-serif; font-size:1em;}

/* general listed styles */

article ul li{padding-top:1em;}
article li{text-align:justify; text-justify:distribute;}

.inner2em li{margin-left:2em;}
.inner2em{margin-top:3%;}
.inner2em{font-family:source_sans_proregular, tahoma, sans-serif; text-indent: 1em; line-height:1.2em;}

.innerHorizontal li{display:inline; margin:0 2em 0 4em; float:none; position:relative; white-space:nowrap; text-align:center; padding:0;}
.innerHorizontal ul{list-style-type:none; text-align:center; line-height:3em; margin:1%; min-width:80%;}

.innerDef dt{color:#444; font-family: source_sans_proregular, tahoma, sans-serif; margin:1em 0 1em 1em;   font-size:1em; font-weight:bold;}
.innerDef dd{margin: 0.1em 0 0.1em 3em; font-weight:normal; font-family:gandhi_serifitalic, tahoma, sans-serif; font-size: 0.95em; color:#333;}

/* headers, outlines */
.outlineheader{color: #fff; background-color:#9e9e9e; background-color:rgba(150,150,150,0.6); padding:0.3em; border-radius:11%;}

/* misc divs */
#footnote{margin: 0 11%; font-family: GartonMedium, cursive;}

/* various rounded effects */

.shape1{background: rgba(255,255,255,0.8); padding:2em; padding-left:3em; margin:11px; margin-left:33px;
    border-radius: 30px 10px; -moz-box-shadow: 0 0 5px 5px rgba(230,230,230,0.5); -webkit-box-shadow: 0 0 5px 5px rgba(230,230,230,0.5); box-shadow: 0 0 5px 5px rgba(230,230,230,0.5);}
.shape2{background: rgba(255,255,255,0.8); padding:2em; padding-left:3em; margin:11px; margin-left:33px;
    border-radius: 10px 30px; -moz-box-shadow: 0 0 5px 5px rgba(230,230,230,0.5); -webkit-box-shadow: 0 0 5px 5px rgba(230,230,230,0.5); box-shadow: 0 0 5px 5px rgba(230,230,230,0.5);}
.shape3{background: rgba(255,255,255,0.8); padding:2em; padding-left:3em; margin:11px; margin-left:33px;
    border-radius: 3%; -moz-box-shadow: 0 0 5px 5px rgba(230,230,230,0.5); -webkit-box-shadow: 0 0 5px 5px rgba(230,230,230,0.5); box-shadow: 0 0 5px 5px rgba(230,230,230,0.5);}
.Infoshape{background: rgba(255,255,255,0.85); padding:2em; padding-left:3em; margin:3%;
    border-radius: 11%; -moz-box-shadow: 0 0 5px 5px rgba(230,230,230,0.5); -webkit-box-shadow: 0 0 5px 5px rgba(230,230,230,0.5); box-shadow: 0 0 5px 5px rgba(230,230,230,0.5);}
.bordershadowonly{border-radius: 11%; -moz-box-shadow: 3px 3px 11px 21px rgba(250,250,250,0.4); -webkit-box-shadow: 0 0 11px 11px rgba(250,250,250,0.5); box-shadow: 3px 3px 11px 21px rgba(250,250,250,0.4);}

.all-four-rounded{
	-webkit-border-radius: 33px;
	-khtml-border-radius: 33px;	
	-moz-border-radius: 33px;
	border-radius: 33px;
	}
.top-right-rounded{
	-webkit-border-top-right-radius: 10px;
	-khtml-border-radius-topright: 10px;	
	-moz-border-radius-topright: 10px;
	border-top-right-radius: 10px;
	}
.bottom-left-rounded{
	-webkit-border-bottom-left-radius: 10px;
	-khtml-border-radius-bottomleft: 10px;	
	-moz-border-radius-bottomleft: 10px;
	border-bottom-left-radius: 10px;
	}
.bottom-right-rounded{
	-webkit-border-bottom-right-radius: 10px;
	-khtml-border-radius-bottomright: 10px;	
	-moz-border-radius-bottomright: 10px;
	border-bottom-right-radius: 10px;
	}
.bottom-right-rounded{
	-webkit-border-bottom-right-radius: 10px;
	-khtml-border-radius-bottomright: 10px;	
	-moz-border-radius-bottomright: 10px;
	border-bottom-right-radius: 10px;
	}
.shadow{    -moz-box-shadow: 5px -5px 5px #e6e6e6;
    -khtml-box-shadow: 5px -5px 5px #e6e6e6;
    -webkit-box-shadow: 5px -5px 5px #e6e6e6;
    box-shadow: 5px -5px 5px #e6e6e6;}
.bottom-rounded-shadow{
    -webkit-border-radius: 10px;
	-khtml-border-radius: 10px;	
	-moz-border-radius: 10px;
	border-radius: 10px;
    -moz-box-shadow: 5px 5px 7px 1px rgba(230, 230, 230, 0.5);
    -khtml-box-shadow: 5px 5px 7px 1px rgba(230, 230, 230, 0.5);
    -webkit-box-shadow: 5px 5px 7px 1px rgba(230, 230, 230, 0.5);
    box-shadow: 5px 5px 7px 1px rgba(230, 230, 230, 0.5);}

/* clearing */

.clear{clear:both; margin:0; padding:0;}

/* various divs */

#tori{position:absolute; top:3em; left:0;}
#pueo{position:relative; margin-left:37%; margin-top:-101px;}

/* for varient on links to inner pages */

/* historical bottom icon links */
/*  .navIcons{text-align:center; font-size: 1em; margin:0 auto; display:inline; }
.navIcons li{display:inline-block; float:none; position:relative; white-space:nowrap; text-align:center; padding: 0 0.7em;}
.navIcons ul{position: relative; list-style-type:none; text-align:center; line-height:3em; margin:0 auto; min-width:80%; display: -moz-box; display: -ms-flexbox; display:flex; flex-direction:row; align-items:center; justify-content:center;}
.navIcons a{color:rgba(120,120,120,0.9); text-decoration:none;}
.navIcons a:hover{ color:rgba(255,255,255,0.9)  text-shadow:0 0 0.1em rgba(120, 120, 120, 0.5),0 0 0.1em rgba(255, 255, 255, 0.7);}  */

.navIcons{text-align:center; width:100%; display:inline-block; margin-top:1em; margin-bottom:1em;}
.navIcons ul{display: inline;}
.navIcons li{display: inline; margin:0 0.8em;}
.navIcons li a span{outline:none;}
/* icon styles */
a.icon{color: rgb(100, 100, 100); text-decoration:none; font-size:1.5em; font-size:1.5rem;}
.icon a{text-decoration:none;}

.innerLinks{background-color: rgba(130, 130, 130, 0.8); padding: 2em 0; width:100%; text-align:center; margin:0;}
.innerLinks ul{display:inline-block; display:inline-flex; justify-content:center; flex-wrap: wrap; flex-direction: row;}
.innerLinks li{padding:0.3em; white-space:nowrap;}
.innerLinks li a{text-decoration:none; color:#fff;}
.innerLinks li a:visited{color:rgba(230, 230, 230, 0.7);}

/* Tooltip container */
.TT {
    visibility:visible;
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.TTtext {
    /* width: 120px; */
	width:2.4em;
	height:2.4em;
    background-color: rgba(160, 160, 160, 0.8);
    color: #fff;
    text-align: center;
    padding: 0.3em;
	line-height: 2.4em;
    border-radius: /* 0.3em */ 50%;
    font-family: LeagueGothicRegular, tahoma, georgia, sans-serif;
	/* border: solid rgba(220, 220, 220, 0.8) 0.2em; */
	/* border: ridge #fff 0.15em; */
	outline: none;
	pointer-events: none;
    font-size:0.75em;
    font-size: 1.1rem;
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
    bottom: 50%;
    /* left: 0.1em; */
	right:-0.6em;
    /* margin-left:  -60px; */
    opacity: 0;
    transition: opacity 1.5s;
	box-shadow: 0px 3px 8px rgba(0,0,0,0.1); 
	/* -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out; */
	transition: all 0.6s ease-in-out;
}

/* Show the tooltip text when you mouse over the tooltip container */
 .TT:hover .TTtext {
    opacity: 1;
	bottom: 100%;
/*	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1); */
	transform: scale(1);
}
.TT .TTtext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
}

/* Bracket effect */
.brackets a::before,
.brackets a::after {
	display: inline-block;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	-moz-transition: -moz-transform 0.3s, opacity 0.2s;
	transition: transform 0.3s, opacity 0.2s;
}

.brackets a::before {
	margin-right: 0.7em;
	content: '[';
	-webkit-transform: translateX(20px);
	-moz-transform: translateX(20px);
	transform: translateX(20px);
}

.brackets a::after {
	margin-left: 0.7em;
	content: ']';
	-webkit-transform: translateX(-20px);
	-moz-transform: translateX(-20px);
	transform: translateX(-20px);
}

.brackets a:hover::before,
.brackets a:hover::after,
.brackets a:focus::before,
.brackets a:focus::after {
	opacity: 1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transform: translateX(0px);
}

/* For grayscale effects in insight pages */

article a{font-weight:bold; color:#000;}
article a:visited{color:#777;}
article a:hover{color:#fff; background: #555; border-radius: 0.2em;}

/* box shadow effects */

.box-shadow-1
{
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.box-shadow-1:before, .box-shadow-1:after
{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.box-shadow-1:after
{
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}
.box-shadow-2{position:relative;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;
}
.box-shadow-2:before, .box-shadow-2:after{
  position:absolute;
  content:"";
  top:100px;bottom:5px;left:30px;right:30px;
  z-index:-1;
  box-shadow:0 0 40px 13px #486685;
  border-radius:100px/20px; 
}
.box-shadow-3{margin: 0 auto; border-radius: 0.2em; background: rgba(255,255,255,0.8); margin-bottom: 1em; box-shadow:
    inset 0 7em 10em -5em rgba(255,255,255,0.6),
    0 -0.3em 0.5em 0.1em rgba(100,100,100,0.8),
    0 0.3em 0.5em -0.2em rgba(100,100,100,1),
    0 1em 2em -0.75em rgba(100,100,100,0.75),
    0 1em 3em -0.5em rgba(100,100,100,0.5),
    0 3em 3em -0.25em rgba(100,100,100,0.2),
    0 0 3em 0.1em rgba(100,100,100,0.2);}
    
/* responsive */

/* iPhone to 4 non-retina */
@media screen and (device-width: 480px) {
#tori{top:3em;}
nav li{margin:0 1%; line-height:2em;}
}

/* iPhone4 iPod Touch with Retina Display */

@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
nav li{margin:0 1%;}
nav li{margin:0 1%;}
nav ul{line-height:4em;}
}

/* adjust columns */


@media screen and (min-width: 1201px) {
article{
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    margin:0 7%;}
}
@media screen and (min-width:760px) and (max-width: 1200px){
article{
/*    -webkit-column-count: 2; 
    -moz-column-count: 2; 
    column-count: 2;
*/    
   margin:0 7%; }
}

/* Specific screen sizes */

@media only screen  and (min-width : 1440px) and {
.overview{width:80%;}
}

/* Large screens ----------- */
@media only screen  and (min-width : 1281px) and (max-width:1440px){.overview{width:90%;}
}

/* Large screens ----------- */
@media only screen  and (min-width : 1200px) and (max-width:1280px){
}