@charset "UTF-8";
html{
    margin:0;
    padding: 0;
    scroll-behavior: smooth;
  }
body {
    margin:0;
    padding: 0;
    background-color:#f1f1f1;
    font-family: 'Muli',sans-serif;
    -webkit-font-smoothing:antialiased;
    font-weight:100;
    color:#fff;

}

p {
  margin: 0 auto;
  padding: 20px;
  max-width: 900px;
font-size: 1.25em;
line-height: 1.5em;
font-family: 'Muli',sans-serif;
text-transform: none;
color: #19291c;
}

#top {
    width:100%;
    background:#000;
}

#main {
    position:relative;
}


.frontpage-logo img {
    animation-duration:3s;
    animation-name:fadeAndScale;
    animation-timing-function:cubic-bezier(.25,.82,.13,1.03)
}



.fadeout {
    animation:animationFramesOut ease 4s;
    animation-iteration-count:1;
    transform-origin:50% 50%;
    animation-fill-mode:forwards;
    animation-delay: 200ms;
/*when the spec is finished*/
    -webkit-animation:animationFramesOut ease 4s;
    -webkit-animation-iteration-count:1;
    -webkit-transform-origin:50% 50%;
    -webkit-animation-fill-mode:forwards;
    animation-delay: 200ms;
/*Chrome 16+, Safari 4+*/
    -moz-animation:animationFramesOut ease 4s;
    -moz-animation-iteration-count:1;
    -moz-transform-origin:50% 50%;
    -moz-animation-fill-mode:forwards
/*FF 5+*/
}

@keyframes animationFramesOut {
0% {
    opacity:1;
    transform:translate(0px,0px)
}

100% {
    opacity:0;
    visibility: hidden;
    transform:translate(0px,0px)
}
}



.fadein {
    animation:animationFrames ease 4s;
    animation-iteration-count:1;
    transform-origin:50% 50%;
    animation-fill-mode:forwards;
/*when the spec is finished*/
    -webkit-animation:animationFrames ease 1s;
    -webkit-animation-iteration-count:1;
    -webkit-transform-origin:50% 50%;
    -webkit-animation-fill-mode:forwards;
/*Chrome 16+, Safari 4+*/
    -moz-animation:animationFrames ease 1s;
    -moz-animation-iteration-count:1;
    -moz-transform-origin:50% 50%;
    -moz-animation-fill-mode:forwards
/*FF 5+*/
}

@keyframes animationFrames {
0% {
    opacity:0;
    transform:translate(0px,-25px)
}

100% {
    opacity:1;
    transform:translate(0px,0px)
}
}

@-moz-keyframes animationFrames {
0% {
    opacity:0;
    -moz-transform:translate(0px,-25px)
}

100% {
    opacity:1;
    -moz-transform:translate(0px,0px)
}
}

@-webkit-keyframes animationFrames {
0% {
    opacity:0;
    -webkit-transform:translate(0px,-25px)
}

100% {
    opacity:1;
    -webkit-transform:translate(0px,0px)
}
}

@keyframes fadeAndScale {
from {
    opacity:0;
    transform:scale(1.4,1.4)
}

to {
    opacity:1;
    transform:scale(1,1)
}
}


.container {
  width:100%;
}

.flex-holder {
  display: flex;
  flex-flow:row wrap;
  justify-content:center;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
  min-height: 80vh;
  padding-left: 5%;
  padding-right: 5%;
  overflow-x: hidden;
}

.item {
  margin: 10px;
  padding: 0;
}

.item a{
  text-align: center;
  display: block;
  width: 100%;
  margin-bottom: -3px;
}

.item img{
  height: 300px;
}



h1 {
  margin:10px auto;
  text-align:center;
  width:100%;
  font-size:3em;
  font-family:'Open Sans',sans-serif;
  font-weight:100;
  color:#000;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
}

h2 {
  margin: 0 auto;
  max-width: 900px;
  font-size:1.25em;
  padding: 25px 0;
  color: #423634;
  font-size: 1.25em;
  font-family: 'Muli',sans-serif;
  border-bottom:2px dotted #5d3613;
  border-top:2px dotted #5d3613;
  -webkit-font-smoothing: antialiased;
}

h3 {
  margin: 0 auto;
  display: block;
  padding: 25px;
  padding-top: 80px;
  font-size:2em;
  font-family:'Open Sans',sans-serif;
  font-weight:100;
  text-transform: uppercase;
  letter-spacing: 1.01em;
  color:#b98e5d;
  -webkit-font-smoothing: antialiased;
}


#main > h2 {
  width: 80%
}


h1 a {
  color:#E24939;
  text-decoration:none;
}

h1 span {
  color:#522C2C;
  font-weight:300
}

#oldlink {
  text-align:center;
  background-color:#000;
}

#oldlink h1 {
  height:80px;
  padding-top:50px;
  display: block;
  font-size:2em;
  font-family:'Open Sans',sans-serif;
  font-weight:100;
  color:#E24939;
  -webkit-font-smoothing: antialiased;
}
.depictions-holder{
  margin: 0 auto;
  margin-top: 40px;
  display: block;
  padding: 40px;
  width: 80%;
  background:url('images/depictions-bg.jpg') no-repeat  center ;
  -webkit-clip-path: polygon(98% 0, 100% 98%, 14% 100%, 1% 96%, 4% 3%);
  clip-path: polygon(98% 0, 100% 98%, 14% 100%, 1% 96%, 4% 3%);
}
#depictions-logo img {
  max-width: 100%;
}
  @media (min-width:600px) {



    h1 {
      font-family:'Open Sans',sans-serif;
      text-transform: uppercase;
      font-size:3em;
      font-weight: 100;
      padding-top: 20px;
      color: #fff;
      display: block;
      padding: 100px 0;
    }


    #depictions-logo {
      margin: 0 auto;
      text-align: center;
      width: 100%;
      padding: 100px 0;
      overflow: hidden;
    }



    h2 {}

    #main > h2 {


    }


    flex-holder {
      padding-top: 40px;
      padding-bottom: 40px;
      padding-left: 2%;
      padding-right: 2%;
    }

    .item {
      margin: 15px;
    }

    #Fine-Art{
      padding-top: 40px;
      padding-bottom: 40px;
    }

    #Illustrations{
      padding-top: 40px;
      padding-bottom: 40px;
    }

    #Design{
      padding-top: 40px;
      padding-bottom: 50px;
    }




}

  nav {

  	display:block;
  	padding-top:0px;
  	padding-bottom:0px;
  	text-align:center;
  	width:100%;
  	background:#666;

  }


  .navbar-fixed {

      z-index: 1;
      position: inherit;
      box-shadow: 2px 0px 5px rgba(0,0,0,0.5);
  	}


  nav a {

     display:block;
     font-family:'Open Sans',sans-serif;
     font-weight:700;
     font-size:1em;
     border-bottom:1px solid #999;
     background-color: #CCC;
     background: linear-gradient(to bottom, rgb(235,235,235) 0%,rgb(209,209,209) 100%);
     color: #666;
     text-shadow:none;
     text-decoration:none;
     text-transform:uppercase;
     letter-spacing:2px;
     padding-left:2%;
     padding-right:2%;
     padding-top: 5px;
     padding-bottom:5px;
     transition: all 0.3s;

  }

  nav a:hover {color: #333;}

  nav a span{

  	border: 0;
  }

  .backhome {display: none;}

  header {

  	height:40px;
  	width:100%;
  	background:#00BBC5;
  	z-index:1;
  }

  header div:nth-child(1) {

  	height:40px;
  	width:50%;
  	float:left;
  	background: -webkit-linear-gradient(left, rgba(80,70,143,1) 1%,rgba(0,187,197,1) 98%);
  	background: -o-linear-gradient(left, rgba(80,70,143,1) 1%,rgba(0,187,197,1) 98%);
  	background: -ms-linear-gradient(left, rgba(80,70,143,1) 1%,rgba(0,187,197,1) 98%);
  	background: linear-gradient(to right, rgba(80,70,143,1) 1%,rgba(0,187,197,1) 98%);
  }

  header div:nth-child(2) {

  	height:40px;
  	width:50%;
  	float:right;
  	background: -webkit-linear-gradient(left, rgba(0,187,197,1) 2%,rgba(80,70,143,1) 99%);
  	background: -o-linear-gradient(left, rgba(0,187,197,1) 2%,rgba(80,70,143,1) 99%);
  	background: -ms-linear-gradient(left, rgba(0,187,197,1) 2%,rgba(80,70,143,1) 99%);
  	background: linear-gradient(to right, rgba(0,187,197,1) 2%,rgba(80,70,143,1) 99%);
  }

  #logo-inline-wrap a{text-decoration: none;}
  #logo-inline {height: 30px; margin: 0 auto; text-align: center;}

  #byline-sub #logo-inline-wrap {

  	position:absolute;
  	width:100%;
  	margin:0 auto;
  	padding-top:4px;
  	text-align:center;
  	z-index:9;

  }


  #byline-sub h2 a {
  	color:#fff;
  	text-shadow: 0px 1px 4px rgba(0,79,71, 0.8);
  	transition: all 200ms;
  }

  #byline-sub h2 a:hover {text-shadow: 0px 3px 6px rgba(45, 28, 86, 0.6);}


  #web-body {
  	background:rgb(245, 245, 245);
  	background: -webkit-radial-gradient(ellipse at center, rgb(245, 245, 245) 80%,rgb(202, 202, 202) 100%);
  	background-image: url(../noise.png),radial-gradient(ellipse at center, rgb(245, 245, 245) 80%,rgb(202, 202, 202) 100%);
  	background-attachment: fixed;
  }

  #web-body iframe {display:none;}

  #web-body h1 {display:none;}

  #web-body h1 span {display:none;}

  .backbut {display:none;}

  .fancy {display:none;}

  #no-iframe {display:block;}

  #no-iframe .item{ text-align:center; padding:0 2%}

  .wrap {height:100%;}

  @media (min-width: 52em) {


  	#byline-sub header, #byline-sub header div {height:65px;}
    #logo-inline {height: 60px;}
  	#byline-sub h2 {

  	font-size:3em;
  	padding-top:0
  	}

  	nav {

  	background: linear-gradient(to bottom, rgb(235,235,235) 25%,rgb(209,209,209) 100%);
  	border: 0;
  	}

  	nav a {

  	display:inline-block;
  	background:none;
  	border:none;
  	font-size:1em;
  	text-shadow: rgba(255,255,255,0.5) 1px 1px 6px;
  	padding-left:2%;
      padding-right:2%;
      padding-top:20px;
  	padding-bottom:20px;
  	}

  	nav a span{

  	border-bottom: 1px solid transparent;
  	}

  	nav a:hover span{

  	padding-bottom: 8px;
  	border-bottom: 2px solid rgba(255,255,255,0.4);
  	}

  	.navbar-fixed {

      top: 0;
      z-index: 100;
      position: fixed;
      width: 100%;
      min-width: 900px;
  	}

  	.backhome {

  	display:none;
  	padding: 0;
  	}

  	.backhome img {

      width: 75px;
      transition:all 0.25s ease;
  	}

  	.backhome img:hover {
  	transform: scale(1.10);
  	}

  	.visible {

  	display: block;
  	position: fixed;
  	top:10px;
  	left:10px;
  	z-index: 101;
  	}

    h2{  width: 50%;}
  	.container {

      overflow-x:auto;
      margin: 0 auto;
    }


    .item {padding-bottom:0;}
  	.item img {

         width: 80%;
         max-width: 420px;
         height: auto;
         transition: all 0.3s;
         transform: scale(.96,.96);
         transition: all 160ms cubic-bezier(0, 0.01, 0.88, 1.18);
  	}

    .item img:hover {

      transform: scale(1,1);
    }

  	.item {transition:all 500ms}

  	/* .squish img {height:175px;} */

  	#no-iframe {display:none;}

  	#web-body iframe {

  	border:10px solid black;
  	margin:0 auto;
  	display:block;
  	width:85%;
  	min-height:700px;
  	height:80%;
  	}

  	#web-body h1 {display:block; padding:4px;}
  	#web-body h1 span {display:block; font-size:.8em;color:#333;}

  	.backbut {

  	display:block;
  	font-size:1.5em;
      font-family:'Open Sans',sans-serif;
      font-weight:700;
      color:#fff;
  	text-decoration:none;
  	text-transform:uppercase;
  	letter-spacing:2px;
  	text-shadow: 0px 1px 4px rgba(50,50,50, 0.8)
  	}

  	.fancy {

  	display:block;
  	border-bottom:1px solid #999;
  	border-top:1px solid #999;
  	display:block;
  	width:50%;
  	margin:10px auto;
  	padding:10px 0;
  	text-shadow: 0px 1px 4px rgba(50,50,50, 0.8);
  	}

  	.extra-padding-top {

  	padding-top: 60px;
  	}