/* text styles*/

article p{text-align:justify; text-justify:distribute; text-indent:2em; padding: 0.5em 5%;}
article{font-family: source_sans_proregular, tahoma, georgia, sans-serif; color:#333;}

/* gallery stuff */
/* article style for gallery photos */
article.galleryphoto{margin: 0 auto; text-align:center; margin-top:7%; width:70%;}
.galleryphoto img{-webkit-box-shadow:0.3em 0.3em 0.6em rgba(120,120,120,0.7); /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */ -moz-box-shadow: 0.3em 0.3em 0.6em rgba(120,120,120,0.7);  /* Firefox 3.5 - 3.6 */ box-shadow: 0.3em 0.3em 0.6em rgba(120,120,120,0.7), -0.05em -0.05em 0.2em rgba(120,120,120,0.3); }
article.galleryphoto h1{font-family:Chunkfive, tahoma, sans-serif; font-size:1.2em; margin:0 auto; text-align:center;}
article.galleryphoto h2{font-family:gandhi_serifitalic, georgia, sans-serif; margin:0 auto; text-align:center; font-size:1.2em; font-weight:normal;}


/* gallery picture arrow styles */
.leftarrow{float:left; font-size:3em; text-decoration:none; color: rgba(120,120,120,0.8); margin-top:25%;}
.rightarrow{float:right; font-size:3em; text-decoration:none; color: rgba(120,120,120,0.8); margin-top:25%;}
.leftarrow a, .rightarrow a:hover{text-shadow:0 0 0.1em rgba(120, 120, 12, 0.5),0 0 0.1em rgba(255, 255, 255, 0.7);}
.leftarrow a:hover{transform:translate(-10px 0);}

/* centering gallery picture */
.centeringdevice{display: -moz-box; display: -ms-flexbox; display:flex; flex-direction:row; align-items:center; justify-content:space-around;}
.centeringdevice img{width:80%; margin:0 auto;}
.highpic{width:77%; margin:0 auto;}

/* for bottom nav balance on certain pages, especially gallery entrance pages */
.spaceabove{margin-top: 2%;}

/* responsive stuff for galleryphoto */
@media screen and (max-width:480px) and (orientation:portrait) {
article.galleryphoto{width:95%; margin-top:25%;}
.centeringdevice img{width:65%;}
}
@media screen and (min-width:768px) and (orientation:portrait) {
article.galleryphoto{width:90%;}
.centeringdevice img{width:65%;}
}
@media screen and (max-width:768px) and (orientation:landscape) {
article.galleryphoto{margin-top:15%; width:90%;}
.centeringdevice img{width:65%;}
}

@media screen and (max-width:248px) and (orientation:portrait) {
article.galleryphoto{margin-top:33%;}
.galleryphoto p{font-size:0.8em;}
}
/* gallery entrance page styles */

header.entrance{margin-top:3%;}
.entrance h1{font-family:Chunkfive, tahoma, sans-serif; font-size:1.2em; margin:0 auto; text-align:center;}
.entrance + h2{font-family:gandhi_serifitalic, georgia, sans-serif; margin:0 auto; text-align:center; font-size:1em; }
/* gallery high and wide effects */
.high{margin:0 5%; text-align:center;}
.wide{margin:0 5%; text-align:center;}
.high{margin-top:5%;}
.wide span, .high span{margin:1%; position:relative;}
.wide img, .high img{box-shadow: 0.1em 0.1em 0.3em rgba(125,125,125,0.9), -0.1em 0.1em 0.3em rgba(125,125,125,0.6);  margin: 0.5% 0; position:relative;}
.wide a, .high a{position:relative;}
.wide img{width:20%;}
.high img{width:15%;}
.wide img:hover{z-index: 5; -webkit-transform: scale(2.11); -moz-transform: scale(2.11); transform: scale(2.11); -webkit-transition: all 2s cubic-bezier(0.42,0,0.58,1); /** Chrome & Safari **/ -moz-transition: all 2s cubic-bezier(0.42,0,0.58,1); /** Firefox **/ -o-transition: all 2s cubic-bezier(0.42,0,0.58,1); /** Opera **/ transition: all 1.8s cubic-bezier(0.42,0,0.58,1);}
.high img:hover{z-index: 5; -webkit-transform: scale(2.11); -moz-transform: scale(2.11); transform: scale(2.11); -webkit-transition: all 2s cubic-bezier(0.42,0,0.58,1); /** Chrome & Safari **/ -moz-transition: all 2s cubic-bezier(0.42,0,0.58,1); /** Firefox **/ -o-transition: all 2s cubic-bezier(0.42,0,0.58,1); /** Opera **/ transition: all 1.8s cubic-bezier(0.42,0,0.58,1);}

/* style for gallery headers */
header.lowmargin{margin-top: 2%; margin-bottom:0;}

/* .icon {text-decoration:none; font-size:2em; color:rgba(81,81,81,0.9);} */
/* lists */

article ul li{padding-top:1em;}
article li{text-align:justify; text-justify:distribute;}
ul{list-style-type:none;}
ol.upper-roman {list-style-type:upper-roman;}
ol.upper-latin {list-style-type:upper-latin;}

/* inner list styles */

.inner2em li{margin-left:2em;}
.inner2em{margin-top:3%;}
.innerHorizontal li{display:inline; margin:0 2em; 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%;}

/* general styles for listed explanation */

.shurui{margin:0 1em; font-size:1em; font-weight:bold; color:#555;}
.yoyaku{padding:0 1em; font-family:gandhi_serifitalic, tahoma, sans-serif; font-size: 1em;}
.setsumei{font-family:source_sans_proregular, tahoma, sans-serif; font-size:1em;}
.shokai{font-family:CaviarDreamsRegular, tahoma, sans-serif; font-size: 1em; margin-right:2em;}

/* Centered list in columns where columns collapse gracefully for small screens */
.columns{margin: 0 7%; display:flex; justify-content: flex-start; flex-wrap:wrap;}
.columns ul li{}
.columns ul{list-style-type:none; list-style:none; text-align:left; position:relative; font-size:1em; float:left; margin:0 1em;}
.columns ul li{margin:0; padding:0;}
.columns ul img{float:left; width:30%; margin:5% 2% 0 0;}
.marginbottom{margin-bottom:3%;}

/* 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 */
.points li:first-letter, .points li::first-letter{float:left; font-family:redressedregular, serif; padding:0 0.3em 0 0; font-size:300%; }

/* to add header like emphasis to an li element */
.emphasis{font-size:1em; font-weight:bold;}

/* headers */

h1{margin:0 auto; font-family:Chunkfive, sans-serif; padding:1em 1em; font-size:2em; color:#555; color:rgba(120,120,120,0.9);}
h2{font-family: devroye_scosfregular, geneva, sans-serif; color:#444; font-size:1.4em; margin-left:5%;}
h3{font-size:1.05em; font-weight:normal; text-align:left; padding-left:2em; margin:0.8em 0;}
h4{color:#444; margin:0; margin-left:1em; margin-top:1em;  font-size:1.1em; font-weight:bold;}3
h5{margin: 0.3em 0 0.5em 1em; font-weight:normal; font-size: 0.95em; color:#333;}

/* asides */

.shortaside{float:right; width:20%; background-color: rgba(220, 220, 210, 0.5); margin:1.1em 0 1.1em 2em; font-size: 1em; font-family:gandhi_serifitalic, georgia, serif; padding:1.1em; border-radius: 11% 0 0 9%; line-height:1.4em; }

/* image floats and effects */

.imgfr{float:right; margin:0 5% 7% 7%;}
.floatright{float:right; margin:0 5% 1% 7%;}
.imgshadow{-webkit-box-shadow:0.3em 0.3em 0.6em rgba(120,120,120,0.7); /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */ -moz-box-shadow: 0.3em 0.3em 0.6em rgba(120,120,120,0.7);  /* Firefox 3.5 - 3.6 */ box-shadow: 0.3em 0.3em 0.6em rgba(120,120,120,0.7), -0.05em -0.05em 0.2em rgba(120,120,120,0.3); }
.floatright p{text-indent:0; padding:0.7em 0;}
.floatleft{float:left; margin:0 5% 3% 5%;}
.floatleft p{text-indent:0; padding:0.7em 0;}

/* quotes */

.quote{font-family:gandhi_serifitalic, tahoma, sans-serif; font-size:0.95em; color:#333;}

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

/* styles for nav */

/* nav positioning */
nav{text-align:center; margin:0; padding:0; position:relative;}
nav ul{position:absolute; width:96%;}
nav li{position:relative;}
header{margin:0; padding:0; margin-top:7%;}

/* nav alignment adjustment */

/* outer styles */
nav.outer{margin: auto 25%;}
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; align-items: center; justify-content:space-around; flex-wrap: wrap; flex-direction: row; flex: 0 1 auto;}
/* 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;}


/* inner styles */
ul.inner{opacity:0; visibility:hidden; left: -9999px; _margin: 0; /*IE6 only*/ background: #c89187; background: rgba(200,145,135,0.9); width:240%; text-align:left; padding: 1.1em 1em; line-height:1.4em; font-family: source_sans_proregular, tahomna, sans-serif; font-size:1em; -webkit-border-radius: 1.1em; -khtml-border-radius: 1.1em; -moz-border-radius: 1.1em; border-radius: 1.1em; -moz-box-shadow: 0.5em 0.5em 0.7em 0.1em  rgba(230, 240, 220, 0.7); -khtml-box-shadow: 0.5em 0.5em 0.7em 0.1em rgba(230, 240, 220, 0.7); -webkit-box-shadow: 0.5em 0.5em 0.7em 0.1em rgba(230, 240, 220, 0.7); box-shadow: 0.5em 0.5em 0.7em 0.1em rgba(230, 240, 220, 0.7); border: ridge #fff 0.15em;}
ul.inner li{padding:0.1em 0;}
ul.inner a{padding: 0.5em 0.5em; margin: 0 0.7em; vertical-align: middle; display:block;}
ul.inner a:hover{border-radius: 2em; background-color:#876b62; background-color: rgba(135,105,100,0.7); box-shadow: 0 0 1em 1.5em rgba(255,255,255,0.4);}

/* assorted list styles */

.norm{font-family:source_sans_proregular, tahoma, sans-serif; font-size:1em; line-height:1.5em;}

/* text styles */

.strong{font-weight:bold; font-variant:small-caps;}

/* transitions */
ul.inner  {-moz-transition: opacity 1.1s;-ms-transition: opacity 1.1s; -o-transition: opacity 1.1s; transition: opacity 1.1s;}
/* emerge to visibility */
nav li:hover > ul {opacity: 1; visibility: visible; margin: 0; left:-90%; margin-top:-0.4em;  z-index:-1}


/* bottom icon links */
.navBase{font-family:emojiicons; font-size: 2em; margin:0 auto; display:inline; }
.navBase li{display:inline-block; float:none; position:relative; white-space:nowrap; text-align:center; padding: 0 0.7em;}
.navBase 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;}
.navBase a{color:rgba(120,120,120,0.9); text-decoration:none;}
.navBase 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);}

/* navBase responsive adjustments */
@media screen and (max-width:480px){
.navBase{display:flex; justify-content:center; font-size:1.3em;}
}

/* spaced around inline flex list */

.flexspaced{display:inline;  display: -moz-box; display: -ms-flexbox; display:flexbox; display:flex; display:inline-flex; flex-direction:row; flex-wrap:wrap; flex-flow: row wrap; justify-content:space-around; align-items:center;}

/* fixing the footing */

footer{ padding:0.5em 0;}

/* clearing */
.clear{clear: both;}
footer{clear:both;}

/* assorted fixes */

html {
    position: relative;
    min-height: 100%;
}

.Site {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.Site-content {
  flex: 1;
  width: 100%;
  padding: 1.5em;

  -ms-flex-preferred-size: auto;

  @include breakpoint("large") {
    padding-top: 2em;
  }
}

/* floating stuff */

.iconfloatleft{float:left; text-decoration:none; margin: 1% 2% 0 0;}

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

/* Responsive adjustments */

@media screen and (max-width: 767px) and (orientation : portrait){

}