/** con.ie - Supplemental Stylesheet - effects
 *
 *  Copyright (c) 2016 Adrian Geissel. All Rights Reserved.
 *  Unauthorised use prohibited without written Licence Agreement
 */

.effects-fade-in-base { opacity: 0; transition: all 0.225s ease-in; }
.effects-fade-in { opacity:1; }

.effects-fade-out-base { opacity: 1; transition: all 0.225s ease-in; }
.effects-fade-out { opacity:0; }


/*
  Declan Considine - con.ie Cartoonist & Illustrator
  Copyright (c) 2017 All Rights Reserved.[]
*/


body {
  font:13px Arial, sans-serif;
  margin:0;
  padding:0;
  background:#FFFFFF;
  color:rgba(0,0,0,0.45);
  width: 100vw;
  height:100vh;
  -webkit-user-select: none;
  user-select: none;
}
img, form { border:0; margin:0; padding:0; }

a {
  color:rgba(0,0,0,0.45);
  text-decoration:none;
  transition: color 0.2s ease-in-out;
}
a:hover {
  color:rgba(0,0,0,0.75);
}

input, textarea {
  font:14px Arial, sans-serif;
  border: 1px solid rgba(0,0,0,0.75);
  padding:0.25em;
  width:20em;
}

p { margin: 0 0 0.8em 0; }

#body {
  position:fixed;
  top:10vh;
  left:10vh;
  bottom:0;
  right:10vh;
}

#header {
  height:50px;
  position:relative;
  margin-top:-50px;
}

#header img { margin:26px 10px 0 0; max-height:22px; }
#header img:first-of-type { max-width:26vw; }
#header img:last-of-type { max-width:37vw; }
#header #menu {
  position:absolute;
  right:0;
  bottom:0;
}
#header #menu a {
  font-size:13px;
  margin-left: 2em;
  letter-spacing: 0.012em;
  font-weight:500;
}
#header #menu a.active {
  color:rgba(0,0,0,0.75);
  cursor:default;
}
#footer { display: none; }

#body.contact #footer, #body.about #footer, #body.portfolio #footer {
  display:block;
}

#body.portfolio #footer {
  margin-top:1em;
}

#content {
  padding-top:10vh;
  line-height:1.25em;
}

#gif {
  position:relative;
  float:right;
  margin-top:-10vh;
  width:60vh;
  height:80vh;
  margin-left:10vh;
}
#gif img {
  max-height: 100%;
  position:absolute;
  top:50%;
  right:50%;
  transform: translate(50%, -50%);
}

#contact ul, #contact ul li {
  list-style: none; padding:0; margin:0;
  color:rgba(0,0,0,0.75);
}
#contact ul {
  margin-bottom:3em;
}
#contact ul li {
  margin-bottom:0.15em;
}
#contact label {
  display: inline-block;
  width:5.5em;
  vertical-align: top;
}
#contact ul li label, #contact ul li span {
  color:rgba(0,0,0,0.45);
}
#contact ul li a {
  color:rgba(0,0,0,0.75);
}

#contact form p {
  position:relative;
  padding-left:5.5em;
}
#contact form p:nth-child(4) {
  display: none;
}

#contact form p label {
 position: absolute;
 top:0.25em;
 left:0;
}

#contact form p button {
  background:rgba(0,0,0,0.45);
  color:white;
  border:0;
  border-radius:0;
  font-size:1.1em;
  padding:0.35em 1em;
  cursor:pointer;
}
#contact form p button:hover {
  background:rgba(0,0,0,0.75);
}

#slider {
  position:absolute;
  bottom:0;
  left:-10vh;
  height:80vh;
  width:calc(100vw);
}
#slider .inner {
  position:absolute;
  top:0;
  bottom: -17px;
  left:0;
  right:0;
  overflow-x:scroll;
  white-space: nowrap;
}
#slider img, #slider span:not(.nav) {
  display:inline-block;
  height:80vh;
}
#slider img:first-child{
  margin-left:10vh;
}
#slider span:not(.nav) {
  width:0;
}
#slider .nav {
  position: fixed;
  top:60vh;
  width:62px;
  height:70px;
  transform: translateY(-50%);
  cursor: pointer;
  background:rgba(0,0,0,0.25) no-repeat scroll center center;
}
#slider .nav.prev { left:0; background-image:url(res/nav-prev.png); }
#slider .nav.next { right:0; background-image:url(res/nav-next.png); }
#slider .nav:hover { background-color: rgba(0,0,0,0.45); }

#portfolio {
}
#portfolio>.category {
  vertical-align: top;
  width:35vw;
  height:calc(35vh - 1.6em);
  display:inline-block;
  margin:1.6em 0 0.4em 0;
  text-align: center;
  position:relative;
}
#portfolio>.category h4 {
  font-weight:normal;
  padding:0;
  margin:0;
  float:left;
  margin-top:-1.6em;
}
#portfolio>.category:hover h4 {
  color:#1a1a1a;
}
#portfolio>.category:nth-child(even) {
  margin-left:10vw;
  float:right;
}
#portfolio>.category img {
  display:inline-block;
  max-height:100%;
  max-width:100%;
  object-fit:contain;
  cursor:pointer;
  transition: all 0.1s ease-in-out;
}
#portfolio>.category:hover img {
  transform: scale(1.01);
}

#portfolio>.category .nav {
  opacity:0.4;
  position: absolute;
  top:50%;
  width:62px;
  height:70px;
  transform: translateY(-50%);
  cursor: pointer;
  background:rgba(0,0,0,0.35) no-repeat scroll center center;
  transition: all 0.1s ease-in-out;
}
#portfolio>.category .nav.next {
  right:0;
  background-image:url(res/nav-next.png);
}
#portfolio>.category:hover .nav {
  opacity:1;
}


#modal {
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background:rgba(0,0,0,0.85);
  transition-duration: 0.115s;
}

#modal .feature {
 position:fixed;
 top:50%;
 left:50%;
 transition: all 0.3s ease-in-out;
 transform: translate(-50%, -50%);
 max-width:80vw;
 max-height:80vh;
}
#modal .feature .nav {
  position: absolute;
  top:50%;
  width:62px;
  height:70px;
  transform: translateY(-50%);
  cursor: pointer;
  background:rgba(0,0,0,0.45) no-repeat scroll center center;
}
#modal .feature .nav.back {
  left:0;
  background-image:url(res/nav-prev.png);
}
#modal .feature .nav.next {
  right:0;
  background-image:url(res/nav-next.png);
}
#modal .feature .nav:hover {
  background-color: rgba(0,0,0,0.75);
}
#modal .feature>img {
  display:inline-block;
  max-height:80vh;
  max-width:80vw;
  object-fit:contain;
  transition-duration: 0.115s;
}


/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 480px) and (max-device-width : 1024px) {

  #header #menu { position:static; margin-top:0.25em; }

  #gif { margin: 1em;}

  #portfolio>.category {
    font-size: 14pt;
    vertical-align: top;
    width: 90vw;
    height: auto;
    display: block;
    margin: 3em auto 0;
    text-align: center;
  }

  #portfolio>.category h4 {     margin-top: -1.1em; }

  #portfolio>.category:nth-child(even) {
      margin-left: auto;
      float: none;
  }

  #portfolio>.category img { width:90%; }

  #portfolio>.category .nav { opacity:1; }

}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 480px) and (max-device-width : 768px) {

  #header #menu { position:static; margin-top:0.25em; }

  #gif { position: static; float: none; width:auto; height: 50vh; margin: 0 auto 2em; text-align:center; }
  #gif img { transform: none; position: static; }

}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 0px) and (max-device-width : 480px) {

  #body { top:0; left:0; right:0; overflow-y:auto; }

  #header { height: auto; margin: 0; text-align:center; padding: 1em; }
  #header img { position:static; display: block; max-width: 95vw !important; max-height: 8vh; margin:2vh auto;}
  #header #menu { position:static; margin:2em 0; }
  #header #menu a { font-size: 25pt; margin:0 1em; }

  #slider { left: 0; height:70vh; }
  #slider img, #slider span:not(.nav) {
    height:70vh;
  }

  #content { padding-top:0;}
  #content p { padding: 0.5em 1.5em; }
  #footer { padding: 2em; }

  #footer { font-size: 20pt; text-align:center; }

  #gif { position: static; float: none; width:auto; height: 60vh; margin: 0 auto 2em; text-align:center; }
  #gif img { transform: none; position: static; }

  #portfolio>.category {
    font-size: 20pt;
    vertical-align: top;
    width: 90vw;
    height: auto;
    display: block;
    margin: 3em auto 0;
    text-align: center;
  }

  #portfolio>.category h4 {     margin-top: -1.1em; }

  #portfolio>.category:nth-child(even) {
      margin-left: auto;
      float: none;
  }

  #portfolio>.category img { width:90%; }

  #portfolio>.category .nav { opacity:1; }

  #modal .feature {
    max-height:98vh;
    max-width:98vw;
  }

  #modal .feature>img {
    max-height:98vh;
    max-width:98vw;
  }

  #contact, .about { font-size:30pt; }

  #contact ul, #contact form { width: 90vw; margin: 0 auto; }
  #contact ul li { margin-bottom: 1em; }
  #contact label { width: 8em; }
  #contact ul li i { font-size:0.92em; font-style: normal;}


  #contact ul+p {text-align:center;}
  #contact form p { padding:0 0 0 8em; }

  input, textarea { font-size:20pt;
    width:50vw; }

  #slider .nav {display:none;}
}