html { height: 100%; overflow:auto; }

body{
  height: 100%;
  font-family: 'Cormorant Garamond', serif;
  background-color:#eee;
  color: #29809B;

}

.imgwork{
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.imgworkshow{
  width: 150px;
}

.viewer{
  display:block;
}

.purp g g polygon{
  fill: #935D7F;
}



p{

  font-size: 1.15em;
}

hr{
  border-color: #6CAFC4;
}

.dashed-hr{
  border-style: dashed;
}

.work-img{
  width:100%;
  max-width: 700px;

}

.shads{
  -webkit-box-shadow: -4px 4px 11px 3px rgba(0,0,0,0.14);
  -moz-box-shadow: -4px 4px 11px 3px rgba(0,0,0,0.14);
  box-shadow: -4px 4px 11px 3px rgba(0,0,0,0.14);
}

.tech{
  float: left;
  padding: 5px;
  background-color: #935D7F;
  color: white;
  margin:0px 5px 5px 0px;
  font-size: 0.9em;
}

.clearme{
  clear: both;
}

.hide_start{
  display: none;
}

.read_more{
  color: #935D7F;
  cursor: pointer;
}

.read_more:hover{
  color: #cc9bbb;
}


h1{
  font-weight: bold;
  font-size: 2.5em;
  color: #935D7F;

}

.cols{
  color: white;
}

.blueish{
  color: #77bfdb;
}

h2{
  font-weight: bold;
}

.bold-sub{
  font-weight: bold;

}

.italic-sub{
  font-style: italic;
}

.plain{
  font-weight: normal;
  font-style: normal;
}

#evolution{

  display:inline;
}

.show_text path{
  fill-opacity:0;
  animation-name: text_grower;
  animation-duration: 1s;
  transform-origin: 50% 50%;
}


#toplogo{
  position: fixed;
  top:10px;
  left:20px;
  z-index: 99;
}

#social{
  font-size: 1.2em;
  position: fixed;
  top:10px;
  right:20px;
  z-index: 99;
}

#mainlogo{
    width:200px;
}

.small-line{
  border-color:#d8b4ce;
}


/* The element to apply the animation to */

#byzantineback g path{

  animation-name: lotus_rotate;
  animation-duration: 240s;
  transform-origin: 50% 50%;
  animation-iteration-count:infinite;
}


.texter, #toplogo{
  cursor: pointer;
}


.hidden{
  display:none;
}

.tops{
  height: 100%;
}

.runes path{
  animation-name: rune_cols;
  animation-duration: 5s;
  animation-iteration-count:infinite;
}

.svg-rotate{
  transform: rotate(180deg);
}

.delim{
  margin-bottom: -1px
}

/*Sections */

#about{
  background-color: #A6D3EA;
}

#ideas{
  background-color: #935D7F;
  color: white;
}

#bottom{
    background-color: #935D7F;
}

#footer{
    background-color: #30A3CE;
    color: white;

}

.img_snippet{
  width: 100px;
  height: 100px;
}

.snippet{
  display: inline-block;
  margin-right: 5px;
  width: 100px;
  vertical-align: text-top;
}

.snippetlnk:link{
  color: white;
  text-decoration: none;
}
.snippetlnk:visited{
  color: white;
  text-decoration: none;
}
.snippetlnk:hover{
  color: #6CAFC4;
  text-decoration: underline;
}
.snippetlnk:active{
  color: #6CAFC4;
  text-decoration: underline;
}

/* Screen modifiers */

@media (max-width: 555px){
  #mainlogo{
    width: 80px;
  }
}

@media (max-width: 768px){
  .social_icons{
    width: 1em;
  }

  .wide-set{
    text-align:center;
  }
  h1{
    font-size: 1.5em;
  }
  h2{
    font-size: 1.3em;
  }
  h4{
    font-size: 1.3em;
  }
  #aboutmandala{
    margin-top: -20px;
  }
  p, li{
    font-weight: bolder;
    font-size: 1em;
  }

}

a:link{
  color: #29809B;
  text-decoration: underline;
}

a:visited{
  color: #29809B;
  text-decoration: underline;
}

a:hover{
  color: #935D7F;
}
a:active{
  color: #935D7F;
}