/* Home 1 ---------------------------------------------------- */
html, body {
  background-color: #bfbfbf; }

div.wrapfull {
  width: 100%;
  margin: 0px auto;
  text-align: center; }

div.wrap800 {
  width: 800px;
  margin: 0px auto; }

div.flexbox_row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start; }

div.flexbox_col {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start; }

div.flexcenter {
  justify-content: center;
  align-items: center;
  align-content: center; }

#wrap {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  resize: none;
  overflow: none; }

.wordbox {
  text-align: center;
  padding: 0px 10px 0px 10px;
  border-radius: 8px;
  border: 4px solid black;
  box-shadow: 10px 10px 0px black; }

#center {
  color: white;
  padding: 5px 20px 5px 20px;
  resize: none;
  overflow: none;
  text-align: center;
  border: 0px solid black;
  background-color: black; }

div.footercopyright {
  position: fixed;
  bottom: 0px;
  width: 100%;
  padding: 5px 10px 5px 10px;
  text-align: center;
  border-radius: 0px;
  background-color: black; }

div.imagebox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start; }

/* Art Display ------------------------------------------------ */
div.artfull {
  align-items: center;
  align-content: center; }

div.art {
  box-sizing: border-box;
  flex-basis: 65%;
  text-align: right; }

div.arttext {
  box-sizing: border-box;
  align-items: flex-start;
  align-content: flex-start;
  flex-basis: 35%;
  text-align: left; }

div.tagboxes {
  box-sizing: border-box;
  width: 600px;
  padding: 5px 10px 5px 10px; }

div.textbox {
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  border-radius: 20px; }

div.photobox {
  box-sizing: border-box;
  width: 100%;
  padding: 5px; }

div.phototextbox {
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  border-radius: 0px; }

/* Menu ------------------------------------------------ */
div.circle {
  display: inline-block;
  position: fixed;
  bottom: -100px;
  right: -100px;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background-color: #EB351B;
  z-index: 199; }

/*div.circle:hover
 * animation-name: circlegrow
 * animation-duration: 1s
 * animation-fill-mode: forwards */
@keyframes circlegrow {
  from {
    transform: scale(1, 1); }
  to {
    transform: scale(3, 3); } }
div.photomenu {
  position: fixed;
  top: 100px;
  right: 80px;
  width: 200px;
  text-align: right;
  opacity: 0;
  z-index: 200; }

div.circle2 {
  display: inline-block;
  position: fixed;
  bottom: -100px;
  left: -100px;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background-color: #F19F37;
  z-index: 299; }

div.menubarsred {
  display: block;
  position: fixed;
  bottom: 10px;
  left: 10px;
  height: 50px;
  width: 50px;
  background: url("../images/menu_bars_red.png") center center/50px 50px;
  z-index: 300; }

div.menubarsredrotate {
  animation-name: rotatemenu;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

div.menubarsredrotateback {
  animation-name: rotatemenuback;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

@keyframes rotatemenu {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }
@keyframes rotatemenuback {
  from {
    transform: rotate(360deg); }
  to {
    transform: rotate(0deg); } }
div.menubuttons {
  display: inline-block;
  position: fixed;
  bottom: -100px;
  height: 80px;
  width: 150px;
  border-radius: 5px;
  z-index: 301;
  transform: rotate(0deg); }

div.menubut1 {
  left: 110px; }

div.menubut2 {
  left: 210px; }

div.menubut3 {
  left: 310px; }

div.menubut4 {
  left: 410px; }

div.mb1anim {
  animation-name: butanim;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

div.mb1animback {
  animation-name: butanimback;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

@keyframes butanim {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(-80deg); } }
@keyframes butanimback {
  from {
    transform: rotate(-80deg); }
  to {
    transform: rotate(0deg); } }
/* Breaks, Floats, Etc. --------------------------------------- */
div.break10 {
  width: 100%;
  height: 10px;
  margin: 0px auto; }

div.break20 {
  width: 100%;
  height: 20px;
  margin: 0px auto; }

div.break50 {
  width: 100%;
  height: 50px;
  margin: 0px auto; }

div.endcolumn {
  clear: both; }

/* Admin ------------------------------------------------ */
div.editwrap {
  position: absolute;
  top: 0px;
  left: 50%;
  width: 1200px;
  margin-left: -600px;
  z-index: 200; }

div.editbox {
  justify-content: center;
  padding: 20px;
  text-align: center; }

div.uploadtextbox {
  padding: 10px;
  text-align: left; }

/* Forms ------------------------------------------------ */
div.formleft {
  box-sizing: border-box;
  flex-basis: 18%;
  margin: 5px;
  text-align: right; }

div.formright {
  box-sizing: border-box;
  flex-basis: 78%;
  margin: 5px;
  text-align: left; }

.formfieldstylebig {
  height: 35px;
  border: 0px solid #000000;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-weight: normal;
  padding: 2px;
  padding-top: 3px;
  padding-left: 6px;
  border-radius: 0px;
  resize: none; }

.formtextarea {
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: normal;
  padding: 5px;
  border-radius: 0px;
  outline: none;
  box-shadow: none;
  border: 0px; }

.formdropbig {
  height: 40px;
  color: white;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  font-size: 30px;
  font-weight: normal;
  text-align: left;
  padding: 0px 5px 0px 5px;
  text-indent: 0px;
  border-radius: 10px;
  border: 0px;
  background-color: black; }

.form_mg {
  margin: 2px 0px 2px 0px; }

/* Backgrounds ------------------------------------------------ */
div.bgyellow, .bgyellow {
  background-color: #F19F37; }

.bgred_but, .bgred_but:link, .bgred_but:active {
  background-color: #EB351B; }

.bgred_but:hover {
  cursor: pointer;
  background-color: black; }

.bgred {
  background-color: #EB351B; }

.bgblack {
  background-color: black; }

.bgorange {
  background-color: #F19F37; }

.bggreymedlight {
  background-color: #bfbfbf; }

.bggreymed {
  background-color: #808080; }

.bggreymeddark {
  background-color: #333333; }

.bggreydark {
  background-color: #1a1a1a; }

.bgblackover {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.75;
  z-index: 199; }

/* Text ------------------------------------------------------- */
.gill {
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  text-decoration: none; }

.mystery {
  font-family: mystery-quest;
  text-decoration: none;
  font-style: normal;
  font-weight: 400; }

.jolly {
  font-family: jolly-lodger;
  text-decoration: none;
  font-style: normal;
  font-weight: 400; }

.play {
  font-family: play;
  text-decoration: none;
  font-style: normal;
  font-weight: 400; }

.text10 {
  font-size: 14px; }

.text20 {
  font-size: 20px; }

.text30 {
  font-size: 30px; }

.text40 {
  font-size: 40px; }

.text50 {
  font-size: 50px; }

.text60 {
  font-size: 60px; }

.text90 {
  font-size: 90px; }

.textblack {
  color: black; }

.textblackred {
  color: black; }

.textblackred:hover {
  color: #EB351B;
  cursor: pointer; }

.textwhite {
  color: white; }

.textgraylight {
  color: #B0B0B0; }

.textred {
  color: #EB351B; }

.bold {
  font-weight: bold; }

.underlinenone, .underlinenone:hover, .underlinenone:link, .underlinenone:active {
  text-decoration: none; }

/* Buttons ------------------------------------------------------- */
a.buttonbig {
  box-sizing: border-box;
  padding: 5px;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  color: black;
  text-align: center;
  border: 2px Solid black;
  border-radius: 4px;
  background-color: #EB351B; }

a.buttonbig:hover {
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  cursor: pointer;
  border: 2px Solid black;
  color: #EB351B;
  background-color: black; }

.bbshadowred {
  box-shadow: 10px 10px 0px black; }

.bbshadowred:hover {
  box-shadow: 10px 10px 0px #EB351B; }

.bbshadoworange {
  box-shadow: 10px 10px 0px black; }

.bbshadoworange:hover {
  box-shadow: 10px 10px 0px #F19F37; }

.buttonbig {
  padding: 5px;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  color: black;
  text-align: center;
  border: 2px Solid black;
  border-radius: 4px;
  background-color: #EB351B; }

.buttonbig:hover {
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  cursor: pointer;
  border: 2px Solid black;
  color: #EB351B;
  background-color: black; }

a.bborange, .bborange {
  color: black;
  background-color: #F19F37; }

a.bborange:hover, .bborange:hover {
  color: #F19F37;
  background-color: black; }

a.bbreverse, .bbreverse {
  color: #EB351B;
  background-color: black; }

a.bbreverse:hover, .bbreverse:hover {
  color: black;
  background-color: #EB351B; }

a.buttonpad, .buttonpad {
  padding: 0px 25px 0px 25px; }

a.butm, .butm {
  margin: 8px 0px 8px 8px; }

/* Animation ------------------------------------------------------- */
#projbox {
  display: block;
  width: 200px;
  height: 200px;
  margin: 3px;
  background-color: #F19F37;
  animation-name: boxfadeon;
  animation-duration: 2s; }

#artbox {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 5px; }

/*	animation-name: boxfadeon
 * animation-duration: 1s */
#artbox img {
  width: auto; }

div.fadeon1 {
  animation-name: boxfadeon;
  animation-duration: 0.5s; }

#overlay {
  display: block;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  margin: 0px;
  background-color: #F19F37;
  z-index: 99;
  animation-name: boxfadeoff;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

@keyframes boxfadeon {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@keyframes boxfadeoff {
  from {
    opacity: 1;
    z-index: 99; }
  to {
    opacity: 0;
    display: none;
    z-index: -5; } }
/* Media Phone Portrait -------------------------------------------------------------------------------------- */
@media all and (orientation: portrait) {
  div.wrap800 {
    width: 100%; }

  div.artfull {
    align-items: flex-start;
    align-content: flex-start; }

  div.art {
    box-sizing: border-box;
    width: 100%;
    flex-basis: auto;
    text-align: center; }

  div.arttext {
    box-sizing: border-box;
    width: 100%;
    align-items: center;
    align-content: center;
    flex-basis: auto;
    text-align: center; }

  #artbox {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 5px;
    animation-name: boxfadeon;
    animation-duration: 0.5s; }

  #artbox img {
    width: 95%; }

  /* Menu Buttons ------------------------------------------------------- */
  div.circle2 {
    display: inline-block;
    position: fixed;
    bottom: -150px;
    left: -150px;
    height: 300px;
    width: 300px;
    border-radius: 50%;
    background-color: #F19F37;
    z-index: 299; }

  div.menubarsred {
    display: block;
    position: fixed;
    bottom: 10px;
    left: 10px;
    height: 100px;
    width: 100px;
    background: url("../images/menu_bars_red.png") center center/100px 100px;
    z-index: 300; }

  div.menubut1 {
    left: 140px; }

  div.menubut2 {
    left: 260px; }

  div.menubut3 {
    left: 380px; }

  div.menubut4 {
    left: 500px; }

  /* Text ------------------------------------------------------- */
  .text10 {
    font-size: 14px; }

  .text20 {
    font-size: 30px; }

  .text30 {
    font-size: 40px; }

  .text40 {
    font-size: 60px; } }