* {margin: 0;padding: 0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}

body,html {margin-left: 0px; margin-right:0px; margin-top:0px; margin-bottom:0px; 
	padding-left: 0px; padding-right:0px; padding-top:0px; padding-bottom:0px; 
	font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 1em; font-style: normal; font-weight: normal;color: #333333; line-height: 1.6; text-align: center;
height: 100%;}

.cycle-slideshow { height: 100%; position: relative; z-index: 0; margin: 0 auto; }
.cycle-slideshow img { width: auto; height: 100%; margin: 0 auto; }
.cycle-pager { text-align: left; width: 100%; z-index: 500; position: absolute; bottom: 0px; left: 0px; overflow: hidden;}
.cycle-pager span {  font-family: arial; font-size: 50px; width: 16px; height: 16px;  display: inline-block; color: rgba(0,0,0,0.05); cursor: pointer;position: relative; left: 10px; }
.cycle-pager span.cycle-pager-active { color: rgba(0,0,0,0.1);}
.cycle-pager > * { cursor: pointer;}
#slideshow img { display: none }
#slideshow img.first { display: block }

a.menu {background: black;
	background: -moz-linear-gradient(top, #000000, #333333);
	background: -webkit-linear-gradient(top, #000000, #333333); 
	background: -ms-linear-gradient(top, #000000, #333333); 
	background: -o-linear-gradient(top, #000000, #333333);
   transition: background .3s ease-in-out;
   -moz-transition: background .3s ease-in-out;
   -webkit-transition: background .3s ease-in-out;}
#headermenumini {width: 100%; display: block; box-sizing: border-box;background: black;
	background: -moz-linear-gradient(top, #000000, #333333);
	background: -webkit-linear-gradient(top, #000000, #333333); 
	background: -ms-linear-gradient(top, #000000, #333333); 
	background: -o-linear-gradient(top, #000000, #333333);}
#headermenumini a {
	font-size: 1.2em;
	font-weight: normal;
	color: #ffffff;
	text-decoration: none;
	text-align: center;
	display: table;
	position: relative;
	padding: 10px;
width: 100%; box-sizing: border-box;
border-top: white 2px solid;
text-shadow: 0.05em 0.05em 0.05em #000;
   transition: background .3s ease-in-out;
   -moz-transition: background .3s ease-in-out;
   -webkit-transition: background .3s ease-in-out;
}
#headermenumini a:hover {
	background: black;
	background: -moz-linear-gradient(top, #333333, #666666);
	background: -webkit-linear-gradient(top, #333333, #666666); 
	background: -ms-linear-gradient(top, #333333, #666666); 
	background: -o-linear-gradient(top, #333333, #666666);
}
#headermenumini a.menu:hover {
	background: black;
	background: -moz-linear-gradient(top, #333333, #666666);
	background: -webkit-linear-gradient(top, #333333, #666666); 
	background: -ms-linear-gradient(top, #333333, #666666); 
	background: -o-linear-gradient(top, #333333, #666666);
}

img.grayscale {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
   transition: all .5s ease-in-out;
   -moz-transition: all .5s ease-in-out;
   -webkit-transition: all .5s ease-in-out;
}

img.grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}

.fadeout {
   opacity: 1;
   transition: opacity .5s ease-in-out;
   -moz-transition: opacity .5s ease-in-out;
   -webkit-transition: opacity .5s ease-in-out;

   }
   .fadeout:hover {
      opacity: 0.7;
      }

.flickout {
   opacity: 1;
   transition: opacity .2s ease-in-out;
   -moz-transition: opacity .2s ease-in-out;
   -webkit-transition: opacity .2s ease-in-out;

   }
   .flickout:hover {
      opacity: 0.5;
      }


.homebox {display: table-cell; vertical-align: top; background: black; padding: 20px; margin: 20px; color: white; width: 31%; box-sizing: border-box;
	background: black;
	background: -moz-linear-gradient(top, #000000, #333333);
	background: -webkit-linear-gradient(top, #000000, #333333); 
	background: -ms-linear-gradient(top, #000000, #333333); 
	background: -o-linear-gradient(top, #000000, #333333);
	}
#homeboxgap {display: table-cell; width: 30px;}
.pic {
  border: 10px solid #fff;  
  height: 100%; max-height: 100%;
  width: 100%; max-width: 100%;
  margin: 0px;
  overflow: hidden;
  position: relative;
  padding-bottom:0%;
  display: inline-block;
  margin-bottom: 20px;
  -webkit-box-shadow: 5px 5px 5px #111;
          box-shadow: 5px 5px 5px #111;  
}
.morph {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
 
.morph:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}
.text-box {
    position: absolute;    
    height: 100%;
    text-align: center; 
    width: 100%;
}
.text-box:before {
   content: '';
   display: inline-block;
   height: 100%;
   vertical-align: middle;
}


img {  border-style: none; display: inline-block;}
input { height: 26px; font-family: "Verdana","Meiryo","ＭＳ Pゴシック";}
select { height: 26px; font-family: "Verdana","Meiryo","ＭＳ Pゴシック";}
textarea { font-family: "Verdana","Meiryo","ＭＳ Pゴシック";}
ul { margin-left: 10px; padding-left: 10px; }
ol { margin-left: 20px; padding-left: 20px; }

a:link {  font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 1em; font-style: normal; font-weight: normal; color: #ff0000; text-decoration: none}
a:visited {  font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 1em; font-style: normal; font-weight: normal; color: #ff0000; text-decoration: none}
a:hover {  font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 1em; font-style: normal; font-weight: normal; color: #000000; text-decoration: none}
a:active {  font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 1em; font-style: normal; font-weight: normal; color: #ff0000; text-decoration: none}

a.footer:link {  font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 1em; font-style: normal; font-weight: normal; color: #ffffff; text-decoration: none}
a.footer:visited {  font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 1em; font-style: normal; font-weight: normal; color: #ffffff; text-decoration: none}
a.footer:hover {  font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 1em; font-style: normal; font-weight: normal; color: #ffffff; text-decoration: underline}
a.footer:active {  font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 1em; font-style: normal; font-weight: normal; color: #ffffff; text-decoration: none}

a.blackbutton:link {  display: inline-block; font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 1.6em; width: auto; min-width: 200px;  background: black;
	background: -moz-linear-gradient(top, #000000, #333333);
	background: -webkit-linear-gradient(top, #000000, #333333); 
	background: -ms-linear-gradient(top, #000000, #333333); 
	background: -o-linear-gradient(top, #000000, #333333); border-radius: 10px; border: 0; padding: 10px; padding-left: 30px; padding-right: 30px;  color: white; 
	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);-moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.5);-webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
   opacity: 1;
   transition: opacity .2s ease-in-out;
   -moz-transition: opacity .2s ease-in-out;
   -webkit-transition: opacity .2s ease-in-out;}
a.blackbutton:visited {  font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; color: white;}
a.blackbutton:hover {  font-family: "Verdana","Meiryo","ＭＳ Pゴシック";  color: white;text-decoration: none; opacity: 0.5;}
a.blackbutton:active {  font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; color: white; }


a.text-boxlink:link {  font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 3em; font-style: normal; font-weight: normal; color: #fff; text-decoration: none; text-shadow: 0px 0px 5px black,0px 0px 5px black;
   transition: all .2s ease-in-out;
   -moz-transition: all .2s ease-in-out;
   -webkit-transition: all .2s ease-in-out;
   display: inline-block; width: 98%; height:98%; padding-top: 35%;}
a.text-boxlink:visited {  font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 3em; font-style: normal; font-weight: normal; color: #fff; text-decoration: none}
a.text-boxlink:hover {  font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 3em; font-style: normal; font-weight: normal; color: #fff; text-decoration: none; text-shadow: 0px 0px 5px white,0px 0px 5px white,0px 0px 5px white;}
a.text-boxlink:active {  font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 3em; font-style: normal; font-weight: normal; color: #fff; text-decoration: none}

table.GREYcolour,table.GREY { border-style: solid; border-width: 1px; border-color: #cccccc}
td.GREYcolour,td.GREY { border-style: solid; border-width: 1px; border-color: #cccccc; padding: 3px;}

a.BLUEring, a.BLUEring:link, a.BLUEring:visited, a.BLUEring:active{ display:block;border:1px solid #333;}
a.BLUEring:hover { display:block; border:1px solid #ff0000;}

hr {color: #ccc; background-color: #ccc; border: 0px; height: 1px; width: 100%;}

input.big {font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 1.6em; width: auto; min-width: 200px; height: 50px; background: black;
	background: -moz-linear-gradient(top, #000000, #333333);
	background: -webkit-linear-gradient(top, #000000, #333333); 
	background: -ms-linear-gradient(top, #000000, #333333); 
	background: -o-linear-gradient(top, #000000, #333333); border-radius: 10px; border: 0; height: 50px; color: white; 
	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);-moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.5);-webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
   opacity: 1;
   transition: opacity .2s ease-in-out;
   -moz-transition: opacity .2s ease-in-out;
   -webkit-transition: opacity .2s ease-in-out;

   }
   input.big:hover {
      opacity: 0.5;
      }

h1 {background: black;
	background: -moz-linear-gradient(top, #000000, #333333);
	background: -webkit-linear-gradient(top, #000000, #333333); 
	background: -ms-linear-gradient(top, #000000, #333333); 
	background: -o-linear-gradient(top, #000000, #333333); padding: 10px; text-align: center; font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 2.4em; font-style: normal; font-weight: normal; color: #ffffff; text-decoration: none; text-shadow: 0.05em 0.05em 0.05em #000; margin-bottom: 20px;}
h2 { font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 6em; font-style: normal; font-weight: bold; color: rgba(240,240,240, 0.8); text-shadow: 1px 4px 6px #fff, 0 0 0 #000, 1px 4px 6px #fff; margin-bottom: 20px;}
h3 { font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 1.5em; font-style: normal; font-weight: bold; color: #000000; text-decoration: none}
b,strong { font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 1.1em; font-style: normal; font-weight: bold; color: #000000; text-decoration: none}
p,td,li { font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 1em; font-style: normal; font-weight: normal; color: #333333; text-decoration: none; line-height: 1.6;}
p.footer { font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 0.9em; font-style: normal; font-weight: normal; color: #ffffff; text-decoration: none}


/* LAYOUT DEFINITIONS */
#center {width: 80%; border-left: #0075ba 2px solid; border-right: #0075ba 2px solid; margin: 0 auto;}

#header {width: 100%; background: purple;}
#bodywrapper {width: 100%; display: table; min-height: 100%; height: 100%;}
#profile1 {font-size: 0.9em; display: table-cell; width: 15%; min-width: 300px; vertical-align: top; padding: 20px; color: white; box-sizing: border-box;
	background: black;
	background: -moz-linear-gradient(top, #000000, #333333);
	background: -webkit-linear-gradient(top, #000000, #333333); 
	background: -ms-linear-gradient(top, #000000, #333333); 
	background: -o-linear-gradient(top, #000000, #333333);
	}
	#profile1gap {display: table-cell; width: 2%; vertical-align: top;}
	#profile1 p {color: white;}
#profile2 {font-size: 0.9em; display: table-cell; width: 15%; min-width: 300px; vertical-align: top; padding: 20px; color: white; box-sizing: border-box;
	background: black;
	background: -moz-linear-gradient(top, #000000, #333333);
	background: -webkit-linear-gradient(top, #000000, #333333); 
	background: -ms-linear-gradient(top, #000000, #333333); 
	background: -o-linear-gradient(top, #000000, #333333);
	}
	#profile2gap {display: table-cell; width: 2%; vertical-align: top;}
	#profile2 p {color: white;}
#mobileprofile1,#mobileprofile2 {display:none;}
	#mobileprofile1 p,#mobileprofile2 p {color: white;}
section.mobile {display:none;}
#body {display: table-cell; vertical-align: top; width: 66%; text-align: center; border-left: white 3px solid; border-right: white 3px solid;}
#footer {width: 100%; background: #333333; clear:both;}
img.marginprofile {width: 100%; }
#left1mini {float:left;}
#right1mini {float:right;}
textarea { width: 400px; }
input { width: 400px; }
.extraverttext {font-size: 180%;}


/* TINYMCE IMAGE & VIDEO RESIZING*/
.youtube {width: 100%; height: auto; border: #cccccc 0px solid; box-sizing: border-box; }
@media screen and (max-width:1600px) { img.image1000 {width: 100%; height: auto;} object.image1000 {width: 100%; height: 100%;} .youtube {width: 80vw; height: 30vw; }}
@media screen and (max-width:1500px) { img.image900 {width: 100%; height: auto;} object.image900 {width: 100%; height: 100%;}}
@media screen and (max-width:1400px) { img.image800 {width: 100%; height: auto;} object.image800 {width: 100%; height: 100%;} }
@media screen and (max-width:1300px) { img.image700 {width: 100%; height: auto;} object.image700 {width: 100%; height: 100%;}}
@media screen and (max-width:1200px) { img.image600 {width: 100%; height: auto;} object.image600 {width: 100%; height: 100%;} .youtube {width: 80vw; height: 45vw; }}
@media screen and (max-width:600px) { img.image500 {width: 100%; height: auto;} object.image500 {width: 100%; height: 100%;}}
@media screen and (max-width:500px) { img.image400 {width: 100%; height: auto;} object.image400 {width: 100%; height: 100%;}}


/* MEDIUM VERSION REFINEMENTS */
@media screen and (max-width:1500px) { 
a.text-boxlink:link { font-size: 2.4em; }
}

@media screen and (max-width:1300px) { 
a.text-boxlink:link { font-size: 2em; }
#homeboxgap {width: 20px;}
.homebox {width: 32%;}
}

@media screen and (max-width:1200px) { 
a.text-boxlink:link { font-size: 1.7em; }
.homebox {padding: 10px; margin: 6px; font-size: 0.9em;}
.pic { margin-bottom: 10px;}
}

@media screen and (max-width:1100px) { 
.homebox {display: block; padding: 20px; margin: 0 auto; margin-bottom: 20px; font-size: 1em; width: 90%;}
}

@media screen and (max-width:900px) { 
#profile1 {display: none;}
#profile2 {display: none;}
#mobileprofile1,#mobileprofile2 {display: block; padding: 20px; color: white; box-sizing: border-box; margin-bottom: 20px;
	background: black;
	background: -moz-linear-gradient(top, #000000, #333333);
	background: -webkit-linear-gradient(top, #000000, #333333); 
	background: -ms-linear-gradient(top, #000000, #333333); 
	background: -o-linear-gradient(top, #000000, #333333);
	}
#profile1gap {border-left: black 5px solid;}
#profile2gap {border-right: black 5px solid;}
section.mobile {display:block;}
a.text-boxlink:link { font-size: 2em; }
}


/* SMALL VERSION REFINEMENTS */
@media screen and (max-width:700px) { 
.homebox {display: block; padding: 20px; margin: 0 auto; margin-bottom: 20px; font-size: 1em; width: 90%;}
h2 { font-size: 4em;}
}


/* VERY SMALL VERSION REFINEMENTS */
@media screen and (max-width:600px) { 
textarea { width: 300px; }
input { width: 300px; }
img.blogstretch {width: 100%; height: auto;}
img.logo {width: 100%; height: auto; max-height: auto;}
}

/* MOBILE VERSION REFINEMENTS */
@media screen and (max-width:480px) { 
#left2mini,#right2mini { font-size: 0.9em;}
img.marginprofile {width: 200px;}
#left1mini {float:none;}
#right1mini {float:none;}
textarea { width: 100%; }
input { width: 100%; }
h1 { font-size: 2.0em;}
h2 { font-size: 3em;}
a.blackbutton:link { padding: 10px; } 
.extraverttext {font-size: 120%;}
}

@media screen and (max-height:480px) { 
img.logo {width: auto; height: 100vh; max-height: 100vh;}
}

/* iPad glitch fix */
@media (width: 768px) { .pic { height: 100%; width: 100%;}}
@media (width: 1024px) {.pic { height: 330px; width: 100%;}}


/* PRINT VERSION REFINEMENTS */
@media print { 
#profile1,#profile2 {display: none;}
#mobileprofile1,#mobileprofile2 {display: block; padding: 20px; color: white; box-sizing: border-box; margin-bottom: 20px;}
#body {width: 100%;}
}


section {
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.module {
  width: 100%;
  min-height: 200px;
  background: transparent;
  position: relative;
  float: left;
  margin-right: 4%;
  margin-bottom: 4%;
  &:nth-child(even) {
    margin-right: 0;
  }
}

.come-in {
  transform: translateY(100px);
  opacity: 0;
  animation: come-in 2s ease forwards;
}
.come-in:nth-child(odd) {
  animation-duration: 2s;
}
.already-visible {
  transform: translateY(0);
  opacity: 1;
  animation: none;
}

@keyframes come-in {
  to { transform: translateY(0); opacity: 1; }
}