/* declaration of fonts */

/* 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; margin:2%; min-width:80%;}
/* general article styles for style and tech pages */

article{position:relative; float:left; width:70%; line-height:1.3em;}
article p{text-align:justify; text-justify:distribute; line-height:1.3em;}

/* 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%; padding-left:0.3em; padding-right:0.3em; padding-left:0.3rem; padding-right:0.3rem;}
/* 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;}
/* .fLine{padding:1em 0 0.5em 0;} */
.fLine{padding-top:2em;}
p.fLine:first-line{font-weight:bold; text-transform:capitalize; font-variant:small-caps;}
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: "SaginawMedium", cursive; font-size:2.5em; font-weight:normal; padding-left:2em;}
#iwii{z-index:-1; padding:0;  margin-top:-56px;}
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;}

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

/* general styles for listed explanation */

.shurui{font-size:1em; font-weight:bold; color:#555;}
.yoyaku{font-family:CaviarDreamsItalic, tahoma, sans-serif; font-weight:700; font-size: 0.9em;}
.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%;}

/* lists with header and floated picture or number */

.points{list-style-type: none; margin:0 5%;}
.points li img{float:left; margin: 3% 0 0 0;}

/* to add first-letter styles */

/* first letter, line, and some text-transform styles */

.first{text-indent:0;}
.first:first-letter, .first::first-letter{color:rgba(111,111,111,0.9); float:left; font-family:redressedregular, serif; padding:0 0.1em 0 0;font-size:400%; margin:0 0 0 0;}
.first:first-line, .first::first-line{text-transform:uppercase;}
.firstwords{text-transform: uppercase;}

.points li:first-letter, .points li::first-letter{float:left; font-family:redressedregular, serif; padding:0 0.3em 0 0; font-size:300%; }

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

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

/* various hover effects */

*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.onhover a {
	position: relative;
	display: inline-block;
	outline: none;
	font-weight:bold;
	text-decoration: none;
	text-transform: uppercase;
	/* letter-spacing: 1px; */
	/* text-shadow: 0 0 0.2em rgba(100,100,100,0.3); */
}

nav a:hover,
nav a:focus {
	outline: none;
}

/* circle effect on hover */

.circle-hover a::before,
.circle-hover a::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100px;
	height: 100px;
	border: 2px solid rgba(0,0,0,0.1);
	border-radius: 50%;
	content: '';
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
	transform: translateX(-50%) translateY(-50%) scale(0.2);
}

.circle-hover a::after {
	width: 90px;
	height: 90px;
	border-width: 6px;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
	transform: translateX(-50%) translateY(-50%) scale(0.8);
}

.circle-hover a:hover::before,
.circle-hover a:hover::after,
.circle-hover a:focus::before,
.circle-hover a:focus::after {
	opacity: 1;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(1);
	-moz-transform: translateX(-50%) translateY(-50%) scale(1);
	transform: translateX(-50%) translateY(-50%) scale(1);
}

/* dots on hover */

.dots a {
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

.dots a::before {
	position: absolute;
	top: 33%;
	left: 50%;
	color: transparent;
	content: '•';
	text-shadow: 0 0 transparent;
	font-size: 1.2em;
	-webkit-transition: text-shadow 0.3s, color 0.3s;
	-moz-transition: text-shadow 0.3s, color 0.3s;
	transition: text-shadow 0.3s, color 0.3s;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	transform: translateX(-50%);
	pointer-events: none;
}

.dots a:hover::before,
.dots a:focus::before {
	color: #333;
	text-shadow: 0.8em 0 #333, -0.8em 0 #333;
}

.dots a:hover,
.dots a:focus {
	color:#333;
}

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

/* clearing */

.clear{clear:both;}

/* various divs */

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

/* mobile */

/* iPhone to 4  */
@media screen and (max-width: 480px) {
.shurui{margin:0;margin-right:0;}
.yoyaku{padding:0; padding-right:0; padding-left:0;}
#tori{top:3em;}
}

/* iPhone4, iPhone5, iPod Touch with Retina Display, excluding iPad retina and Nexus */

@media screen{

}

/*  various mobile browsers */
@media screen and (max-width: 700px) and orientation:portrait{

nav li{margin:0 1.5%;}
}

@media screen and (min-width:1440px){
article{;}
}