/*
Theme Name: LJMA
Author: Vanessa Brewsrer
Author URI: https://vanessabrewster.com
Version: 2019.3
Requires at least: 5.0
Tested up to: 5.7
Requires PHP: 7.0
Tags: one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready
Text Domain: LJMA

LJMA WordPress Theme © 2021 Vanessa Brewster
*/

/* CSS Reset */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}input[type="search"]{-webkit-appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}.screen-reader-text{clip:rect(1px, 1px, 1px, 1px);position:absolute !important}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}

/*
/*
/*    SECTION 1
/*	  1.1 – General
/*    1.2 - Grid
/*    1.3 - Typography
/*    1.4 – Buttons and Forms
/*    1.5 – Border
/*    1.6 – Illustrations
/*    1.7 – Swap Letter with Illustration
/*    1.8 – Bubble Burst Outs
/*
/*    SECTION 2
/*	  2.1 – Header
/*    2.2 – Footer
/*
/*    SECTION 3
/*	  3.1 – Home
/*    3.2 – Mantras
/*    3.3 – About
/*    3.4 – Projects
/*    3.5 – Project
/*    3.6 – Contact
/*

/* =================== */
/*      SECTION 1      */
/* =================== */
/* 1.1 - General */

html {
  scroll-behavior: smooth !important;
  height:100%;
  -webkit-transition-duration: 0.2s;
       -o-transition-duration: 0.2s;
          transition-duration: 0.2s;
  cursor:url("img/fingercursor.png"), auto;
}

body {
  word-wrap: break-word;
  margin:auto;
  height:100%;
  -webkit-transition-duration: 0.2s;
       -o-transition-duration: 0.2s;
          transition-duration: 0.2s;
  background-color: #373737;
}

a, button, label span, input, textarea, label{
  cursor:url("img/fingercursorclick.png"), auto;
}

#wrapper{
  position:absolute;
  top:0;
  background-color: #373737;
  width:100%;
}


.home #container{
  padding:20px 20px 0px 20px;
}

#container{
    padding: 20px;
}


img, svg, video{
  vertical-align: middle;
}

.nomob{
  display: none !important;
}

.nodesktop{
  display: block !important;
}

.section{
  margin-top:80px;
}

.sectionmid{
  margin-top:40px;
}

.sectionsml{
  margin-top:20px;
}

.home #content .section{
  padding-left: 20px;
  padding-right:20px;
}

.flexwrap{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap:wrap;
      flex-wrap:wrap;
}

.screenfade{
  -webkit-animation: fade-in 1s ease;
  animation: fade-in 1s ease;
  visibility: visible;
  -webkit-backface-visibility: hidden;
}

@-webkit-keyframes fade-in{0%{opacity:0;} 100%{opacity:1;}}
@keyframes fade-in{0%{opacity:0} 100%{opacity:1}}

@media only screen and (min-width: 360px) {
  #container{
    padding:40px 40px 0px 40px;
  }
}


@media only screen and (min-width: 800px) {
  .nomob{
    display: block !important;
  }

  .nodesktop{
    display: none !important;
  }

  .home #container{
      padding:118px 60px 0px 60px;
  }

  #container{
      padding:154.19px 60px 0px 60px;
  }

  .section{
    margin-top:120px;
  }

  .sectionmid{
    margin-top:60px;
  }

  .home .section{
    padding-left: 0px !important;
    padding-right:0px !important;
  }

}


@media only screen and (min-width: 1025px) {

  .section{
    margin-top:160px;
  }

  #container{
      padding:154.19px 60px 0px 60px;
  }


}

@media only screen and (min-width: 2000px) {
  #container{
      max-width:2000px;
      margin:auto;
      padding-left:0px!important;
      padding-right:0px!important;
  }

}



/* 1.2 - Grid */

.mobile-grid-width1 {
  width: calc( (100% - 45px) / 4 );
}
.mobile-grid-width2 {
  width: calc( ( (100% - 45px) / 4 ) * 2 + 15px);
}
.mobile-grid-width3 {
  width: calc( ( (100% - 45px) / 4 ) * 3 + 30px);
}

.mob-full-width, .full-width{
  width: 100%;
}

.mobile-grid-offset2 {
  margin-left: calc( ( ( 100% - 45px ) / 4 ) * 2 + 15px)!important;
}

.wrap-container {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.grid-center {
  margin-left: auto!important;
  margin-right: auto!important;
}

@media only screen and (min-width: 800px) {

  .mob-full-width{
    width: unset;
  }

  .grid-item {
    width: calc( ( 100% - 440px ) / 12) !important; }
  .grid-item-width2 {
    width: calc( ( ( 100% - 440px ) / 12 ) * 2 + 40px) !important; }
  .grid-item-width3 {
    width: calc( ( ( 100% - 440px ) / 12 ) * 3 + 80px) !important; }
  .grid-item-width4 {
    width: calc( ( ( 100% - 440px ) / 12 ) * 4 + 120px) !important; }
  .grid-item-width5 {
    width: calc( ( ( 100% - 440px ) / 12 ) * 5 + 160px) !important; }
  .grid-item-width6 {
    width: calc( ( ( 100% - 440px ) / 12 ) * 6 + 200px) !important; }
  .grid-item-width7 {
    width: calc( ( ( 100% - 440px ) / 12 ) * 7 + 240px) !important; }
  .grid-item-width8 {
    width: calc( ( ( 100% - 440px ) / 12 ) * 8 + 280px) !important; }
  .grid-item-width9 {
    width: calc( ( ( 100% - 440px ) / 12 ) * 9 + 320px) !important; }
  .grid-item-width10 {
    width: calc( ( ( 100% - 440px ) / 12 ) * 10 + 360px) !important; }
  .grid-item-width11 {
    width: calc( ( ( 100% - 440px ) / 12 ) * 11 + 400px) !important; }
  .grid-offset1 {
    margin-left: calc( ( ( 100% - 440px ) / 12 ) + 40px)!important; }
.grid-offset2 {
  margin-left: calc( ( ( 100% - 440px ) / 12 ) * 2 + 80px)!important;
}
.grid-offset3 {
  margin-left: calc( ( ( 100% - 440px ) / 12 ) * 3 + 120px)!important;
}
.grid-offset4 {
  margin-left: calc( ( ( 100% - 440px ) / 12 ) * 4 + 160px)!important;
}
.grid-offset5 {
  margin-left: calc( ( ( 100% - 440px ) / 12 ) * 5 + 200px)!important;
}
.grid-offset6 {
  margin-left: calc( ( ( 100% - 440px ) / 12 ) * 6 + 240px)!important;
}
.grid-offset7 {
  margin-left: calc( ( ( 100% - 440px ) / 12 ) * 7 + 320px)!important;
}
.grid-offset8 {
  margin-left: calc( ( ( 100% - 440px ) / 12 ) * 8 + 360px)!important;
}
 }

 @media only screen and (min-width: 800px) {

 .grid-item {
   width: calc( ( 100% - 440px ) / 12) !important; }
 .grid-item-width2 {
   width: calc( ( ( 100% - 440px ) / 12 ) * 2 + 40px) !important; }
 .grid-item-width3 {
   width: calc( ( ( 100% - 440px ) / 12 ) * 3 + 80px) !important; }
 .grid-item-width4 {
   width: calc( ( ( 100% - 440px ) / 12 ) * 4 + 120px) !important; }
 .grid-item-width5 {
   width: calc( ( ( 100% - 440px ) / 12 ) * 5 + 160px) !important; }
 .grid-item-width6 {
   width: calc( ( ( 100% - 440px ) / 12 ) * 6 + 200px) !important; }
 .grid-item-width7 {
   width: calc( ( ( 100% - 440px ) / 12 ) * 7 + 240px) !important; }
 .grid-item-width8 {
   width: calc( ( ( 100% - 440px ) / 12 ) * 8 + 280px) !important; }
 .grid-item-width9 {
   width: calc( ( ( 100% - 440px ) / 12 ) * 9 + 320px) !important; }
 .grid-item-width10 {
   width: calc( ( ( 100% - 440px ) / 12 ) * 10 + 360px) !important; }
 .grid-item-width11 {
   width: calc( ( ( 100% - 440px ) / 12 ) * 11 + 400px) !important; }
 .grid-offset1 {
   margin-left: calc( ( ( 100% - 440px ) / 12 ) + 40px)!important; }
.grid-offset2 {
 margin-left: calc( ( ( 100% - 440px ) / 12 ) * 2 + 80px)!important;
}
.grid-offset3 {
 margin-left: calc( ( ( 100% - 440px ) / 12 ) * 3 + 120px)!important;
}
.grid-offset4 {
 margin-left: calc( ( ( 100% - 440px ) / 12 ) * 4 + 160px)!important;
}
.grid-offset5 {
 margin-left: calc( ( ( 100% - 440px ) / 12 ) * 5 + 200px)!important;
}
.grid-offset6 {
 margin-left: calc( ( ( 100% - 440px ) / 12 ) * 6 + 240px)!important;
}
.grid-offset7 {
 margin-left: calc( ( ( 100% - 440px ) / 12 ) * 7 + 320px)!important;
}
.grid-offset8 {
 margin-left: calc( ( ( 100% - 440px ) / 12 ) * 8 + 360px)!important;
}
}

@media only screen and (min-width: 1300px) {

.biggrid-item {
  width: calc( ( 100% - 440px ) / 12) !important; }
.biggrid-item-width2 {
  width: calc( ( ( 100% - 440px ) / 12 ) * 2 + 40px) !important; }
.biggrid-item-width3 {
  width: calc( ( ( 100% - 440px ) / 12 ) * 3 + 80px) !important; }
.biggrid-item-width4 {
  width: calc( ( ( 100% - 440px ) / 12 ) * 4 + 120px) !important; }
.biggrid-item-width5 {
  width: calc( ( ( 100% - 440px ) / 12 ) * 5 + 160px) !important; }
.biggrid-item-width6 {
  width: calc( ( ( 100% - 440px ) / 12 ) * 6 + 200px) !important; }
.biggrid-item-width7 {
  width: calc( ( ( 100% - 440px ) / 12 ) * 7 + 240px) !important; }
.biggrid-item-width8 {
  width: calc( ( ( 100% - 440px ) / 12 ) * 8 + 280px) !important; }
.biggrid-item-width9 {
  width: calc( ( ( 100% - 440px ) / 12 ) * 9 + 320px) !important; }
.biggrid-item-width10 {
  width: calc( ( ( 100% - 440px ) / 12 ) * 10 + 360px) !important; }
.biggrid-item-width11 {
  width: calc( ( ( 100% - 440px ) / 12 ) * 11 + 400px) !important; }

}

/* 1.4 - Typography */

H1, H2, H3, H4, H5, H6, p, ul, li, a, label, pre, .projectfooterlinks{
  color: #FCFCFC;
}

H1, H2, .overlay ul li, H3, #menu label, .mobprojectnav, .getmantramob, .mantratext, .projectfooterlinks, .mantraoverlay H5{
    font-family: "LJMA Sans", Helvetica, Arial, sans-serif;
}

.wsywig h1, H4, .wpcf7 form input[type="submit" i], .wsywig h5, h6, p, li, ol, pre, .subscribe input, .wpcf7 form label input, .wpcf7 textarea, .wpcf7-response-output, #projects H3, .post-template-template-project H1{
    font-family: "aktiv-grotesk", Helvetica, Arial, sans-serif;
}

H1{
    font-size: 60px;
}

.pagetitle H1{
  font-size: 22px;
}

H1 a:hover{
  text-decoration: none;
}

.wsywig h1{
  font-size: 50px;
  margin-bottom:40px;
}

H2, .overlay ul li{

  font-size: 40px;
}

.about h2{
  font-size: 22px;
}

H3, .post-template-template-project .projectinfo h1{
  font-size: 28px;
}

H4, .wpcf7 form input[type="submit" i]{
  font-size: 20px;
  line-height: 1.33;
}

H4{
  margin-bottom:20px;
}

H5, .menu label, .overlay label, .projectfooterlinks a{
  font-size: 22px;
}

.wsywig h5{
  font-size: 20px;
}

h6{
  font-size: 16px;
}

p, li, ol, pre, .subscribe input, .wpcf7 form label input, .wpcf7 textarea, .wpcf7-response-output{
  font-size: 16px;
  line-height: 1.33;
}

p{
  max-width: 720px;
}

a{
  text-decoration: underline;
  -webkit-transition-duration: 0.2s;
       -o-transition-duration: 0.2s;
          transition-duration: 0.2s;
}

a:hover{
  text-decoration: underline;
}

a:visited{
  color: unset;
}

h1 a, .projectfooterlinks a{
  text-decoration: none;
}

ul, ol{
  padding-left: 20px;
}

.noliststyle {
  padding: 0px;
}

li{
  list-style:inside;
}

li{
  margin-top:5px;
}

li:first-of-type{
  margin-top:0px;
}
.noliststyle li{
  list-style: none;
}

.wsywig h2, .wsywig h3, .wsywig h4, .wsywig h5, .wsywig h6, .post-template-template-project .projectinfo h1{
  margin-bottom:20px;
}

p+p, p+ul, p+ol, p+h2, p+h3, p+h4, p+h5, p+h6, p+pre{
  margin-top:20px;
}

ol+p, ol+h2, ol+h3, ol+h4, ol+h5, ol+h6, ol+ul, ol+pre{
  margin-top:20px;
}

ul+p, ul+h2, ul+h3, ul+h4, ul+h5, ul+h6, ul+ol, ul+pre{
  margin-top:20px;
}

pre+p, pre+ul, pre+ol, pre+h2, pre+h3, pre+h4, pre+h5, pre+h6{
  margin-top:20px;
}

h2+h4, h2+p{
  margin-top:20px;
}

p+h1, ul+h1, ol+h1, pre+h1{
  margin-top:40px;
}

li h4{
  margin-bottom: 0px;
}

@media only screen and (min-width: 500px) {

  .about h2, .error404 h2{
    font-size: 34px;
  }

  .about h4{
    margin-bottom:40px;
  }
}


@media only screen and (min-width: 800px) {
  p, li, ol, pre, .subscribe input, .wpcf7 form input[type="submit" i], .wpcf7 form label input, .wpcf7 textarea{
    font-size: 18px;
  }



  /* .home h2{
    margin-bottom:20px;
  } */

  .about h2, .error404 h2{
    font-size: 25px;
  }

  H3, .post-template-template-project .projectinfo h1{
    font-size: 38px;
  }

}

@media only screen and (min-width: 1025px) {

  H2, .overlay ul li{
    font-size: 62px;
  }

  /* .home h2{
    margin-bottom:40px;
  } */

H4, .wpcf7 form input[type="submit" i]{
  font-family: "aktiv-grotesk", Helvetica, Arial, sans-serif;
  font-size: 24px;
}
H5, .menu label, .overlay label, .pagetitle H1, .projectfooterlinks a{
  font-family: "LJMA Sans", Helvetica, Arial, sans-serif;
  font-size: 24px;
}

.about h2, .error404 h2{
  font-size: 32px;
}


}

@media only screen and (min-width: 1300px) {
  /* .home h2{
    margin-bottom:60px;
  } */

  H2, .overlay ul li{
    font-size: 80px;
  }

  .about h2, .error404 h2{
    font-size: 46px;
  }

}

/* 1.4 - Buttons and Forms */

input, textarea{
border-radius: 0px;
border: 3px solid #FCFCFC;
-webkit-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
        transition-duration: 0.2s;
color: #FCFCFC;
background-color: transparent;
padding: 10px;
}

.bubbleimageoverlay{
  position:absolute;
  opacity: 0;
  width:80%;
  height: 80%;
  max-width: 350px;
  max-height: 350px;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin: auto;
  -webkit-transition-duration: 0.3s;
       -o-transition-duration: 0.3s;
          transition-duration: 0.3s;
  display: block;
  z-index: 1;
  background-image: url("img/spot-purple.svg");
  background-size: auto;
  background-position: center;
  background-repeat: no-repeat;
  background-color: unset;
  text-align: center;
}

.bubbleimageoverlay h2{
  position: absolute;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  top:50%;
  width: 100%;
}

#projects .bubbleimageoverlay{
opacity:1;
width:200px;
height: 200px;
}

#projects .projectimage:nth-of-type(1n) .bubbleimageoverlay{
background-image: url("img/spot.svg");
}

#projects .projectimage:nth-of-type(2n) .bubbleimageoverlay{
background-image: url("img/spot-red.svg");
}

#projects .projectimage:nth-of-type(3n) .bubbleimageoverlay{
background-image: url("img/spot-pink.svg");
}

#projects .projectimage:nth-of-type(4n) .bubbleimageoverlay{
background-image: url("img/spot-purple.svg");
}

#projects .bubbleimageoverlay h2{
  font-size: 50px;
}

.topleft{
top:20px;
left:20px;
right:unset;
bottom:unset;
}

.bottomright{
right:20px;
bottom:20px;
left:unset;
top:unset;

}

.topright{
right:20px;
bottom:unset;
left:unset;
top:20px;
}

.bottomleft{
right:unset;
bottom:20px;
left:20px;
top:unset;
}

@media only screen and (min-width: 1025px) {
  .bubbleimageoverlay{
    max-height: 290px;
    max-width: 290px;
  }
}

@media only screen and (min-width: 1300px) {
  .bubbleimageoverlay{
    max-height: 350px;
    max-width: 350px;
  }
}








/* 1.4 - Border */

#border{
  display: block;
  position: fixed;
  top:0;
  left:0;
  height: 100%;
  pointer-events: none;
  width: 100%;
  border: 47px solid;
  border-image-source: url(img/border.svg);
  border-image-slice: 20;
  border-image-repeat: round;
  z-index: 101;
  -webkit-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
          -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
}

@media only screen and (min-width: 360px) {
  #border{
    border: 38px solid;
    border-image-source: url(img/border.svg);
    border-image-slice: 20;
    border-image-repeat: round;
  }
}


@media only screen and (min-width: 408px) {
  #border{
    border: 37px solid;
    border-image-source: url(img/border.svg);
    border-image-slice: 20;
    border-image-repeat: round;
  }
}

@media only screen and (min-width: 410px) {
  #border{
    border: 41px solid;
    border-image-source: url(img/border.svg);
    border-image-slice: 20;
    border-image-repeat: round;
  }
}

@media only screen and (min-width: 700px) {
  #border{
    border: 20px solid;
    border-image-source: url(img/border.svg);
    border-image-slice: 20;
    border-image-repeat: round;
  }
}




/* 1.5 – Illustrations*/

.FFCC00{fill:#FFCC00;}
.A51491E{fill:#51491E;}
.D1A595{fill:#D1A595;}
.FFA9B5{fill:#FFA9B5;}
.D38C96{fill:#D38C96;}
.C46905{fill:#C46905;}
.CAA0F2{fill:#CAA0F2;}
.E7F9FF{fill:#E7F9FF;}
.DDAA61{fill:#DDAA61;}
.E9BE9A{fill:#E9BE9A;}
.F10F00{fill:#F10F00;}
.F9A512{fill:#F9A512;}
.A57F3C{fill:#A57F3C;}
.A2EB2FF{fill:#2EB2FF;}
.D9F6FF{fill:#D9F6FF;}
.A00DBFF{fill:#00DBFF;}
.FF2931{fill:#FF2931;}
.FF9E00{fill:#FF9E00;}
.A0099FF{fill:#0099FF;}
.FF83AA{fill:#FF83AA;}
.FFCD00{fill:#FFCD00;}
.FF7BE2{fill:#FF7BE2;}
.FFD524{fill:#FFD524;}
.FF6158{fill:#FF6158;}
.A56ECFF{fill:#56ECFF;}
.A32B67B{fill:#32B67B;}
.A278E60{fill:#278E60;}
.EDE2BB{fill:#EDE2BB;}
.EDAE6D{fill:#EDAE6D;}
.F9B2DB{fill:#F9B2DB;}
.FF691B{fill:#FF691B;}
.FF1F00{fill:#FF1F00;}
.A007DFF{fill:#007DFF;}
.FFDB00{fill:#FFDB00;}
.FFB259{fill:#FFB259;}
.FF6304{fill:#FF6304;}
.A5DCB31{fill:#5DCB31;}
.AAAAAA{fill:#AAAAAA;}
.FF4A39{fill:#FF4A39;}
.FFBC00{fill:#FFBC00;}
.FFF700{fill:#FFF700;}
.A41E449{fill:#41E449;}
.A6CEDFF{fill:#6CEDFF;}
.D297FF{fill:#D297FF;}

.FFE800{fill:#FFE800;}
.FFC5F3{fill:#FFC5F3;}
.A657AFF{fill:#657AFF;}
.A916640{fill:#916640;}
.CDEBED{fill:#CDEBED;}
.FFDF00{fill:#FFDF00;}
.AFC8CA{fill:#AFC8CA;}
.A3A54A4{fill:#3A54A4;}
.A369F48{fill:#369F48;}
.FCFCFC{fill:#FCFCFC;}
.FF5F5C{fill:#FF5F5C;}
.A1FE5FF{fill:#1FE5FF;}
.CAFDFF{fill:#CAFDFF;}
.A0BB21B{fill:#0BB21B;}
.A008221{fill:#008221;}
.A00AF2D{fill:#00AF2D;}
.A7FFF95{fill:#7FFF95;}
.D45FFF{fill:#D45FFF;}
.A2CAC35{fill:#2CAC35;}
.E0ADFF{fill:#E0ADFF;}
.A2CAC35{fill:#2CAC35;}
.A39DF44{fill:#39DF44;}
.C18D17{fill:#C18D17;}
.E9C900{fill:#E9C900;}
.A96E3FF{fill:#96E3FF;}
.FFA700{fill:#FFA700;}
.A7CBCD3{fill:#7CBCD3;}
.FFFDE6{fill:#FFFDE6;}
.FFCE74{fill:#FFCE74;}
.A894225{fill:#894225;}
.A707070{fill:#707070;}
.FFE300{fill:#FFE300;}
.A979797{fill:#979797;}
.AFF2000{fill:#FF2000;}
.E5BB93{fill:#E5BB93;}
.A8F6131{fill:#8F6131;}
.FFFFFF{fill:#FFFFFF;}
.FFA8E3{fill:#FFA8E3;}
.A74B5FF{fill:#74B5FF;}
.A47D25B{fill:#47D25B;}
.FF6737{fill:#FF6737;}
.B57DBA{fill:#B57DBA;}
.A6F6F6F{fill:#6F6F6F;}
.A535353{fill:#535353;}
.FFE782{fill:#FFE782;}
.FA7AFF{fill:#FA7AFF;}
.FF3207{fill:#FF3207;}
.FFB1DD{fill:#FFB1DD;}
.FF3000{fill:#FF3000;}
.A080808{fill:#080808;}
.AC5D7A{fill:#AC5D7A;}
.FFDD00{fill:#FFDD00;}
.A39BC4B{fill:#39BC4B;}
.D16B47{fill:#D16B47;}
.A37682E{fill:#37682E;}
.A99FFAB{fill:#99FFAB;}
.FF3200{fill:#FF3200;}
.A82100{fill:#A82100;}
.FF7C68{fill:#FF7C68;}
.F1C3B4{fill:#F1C3B4;}
.DDDD05{fill:#DDDD05;}
.FFA100{fill:#FFA100;}
.FFCE00{fill:#FFCE00;}
.FFB1DD{fill:#FFB1DD;}
.FF684B{fill:#FF684B;}
.BD615C{fill:#BD615C;}
.FFEAB6{fill:#FFEAB6;}
.FF3400{fill:#FF3400;}
.F68446{fill:#F68446;}
.A1BB832{fill:#1BB832;}
.A148A25{fill:#148A25;}
.C1926A{fill:#C1926A;}
.D6733D{fill:#D6733D;}
.A6B3703{fill:#6B3703;}
.A3E9950{fill:#3E9950;}
.FF4F21{fill:#FF4F21;}
.FFC200{fill:#FFC200;}
.FFFFFF{fill:#FFFFFF;}
.A3B42BC{fill:#3B42BC;}
.A8E4FF{fill:#A8E4FF;}
.D3FBFF{fill:#D3FBFF;}
.FFE29C{fill:#FFE29C;}
.ED1C24{fill:#ED1C24;}
.F5841F{fill:#F5841F;}
.F8DC02{fill:#F8DC02;}
.A6ABD45{fill:#6ABD45;}
.A67CBDD{fill:#67CBDD;}
.C388BC{fill:#C388BC;}
.FFD500{fill:#FFD500;}
.FFD500{fill:#E9E0CD;}
.E93400{fill:#E93400;}
.CEC7BA{fill:#CEC7BA;}
.FFF4DF{fill:#FFF4DF;}
.E93400{fill:#E93400;}
.B87D39{fill:#B87D39;}
.FFD593{fill:#FFD593;}
.FFA200{fill:#FFA200;}
.FFDA00{fill:#FFDA00;}
.ED1C24{fill:#ED1C24;}
.F5841F{fill:#F5841F;}
.F8DC02{fill:#F8DC02;}
.A6ABD45{fill:#6ABD45;}
.A67CBDD{fill:#67CBDD;}
.C388BC{fill:#C388BC;}
.E6F0FF{fill:#E6F0FF;}
.D6AF51{fill:#D6AF51;}
.FF7363{fill:#FF7363;}
.FF4600{fill:#FF4600;}
.FFB800{fill:#FFB800;}
.FFE400{fill:#FFE400;}
.A4CCD53{fill:#4CCD53;}
.A3FD9FF{fill:#3FD9FF;}
.DF8EFF{fill:#DF8EFF;}

.hiddenillo{
  position: absolute;
  display: block;
  width:100%;
}

.hiddenillo{
  opacity: 0;
  height: 100%;
}

.mobile_icon{
  opacity: 1;
  -webkit-transition-duration: 0.2s;
       -o-transition-duration: 0.2s;
          transition-duration: 0.2s;
}

.illocontainer{
  position: relative;
  height: 30px;
}

.illustrations{
  position: absolute;
  height: 30px;
  width: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.illustrations svg{
  height: 100%;
  margin:auto;
}

.rotate90{
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}

.rotate45{
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.rotateminus45{
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.rotateminus90{
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

.rotate180{
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}

.eyewrapper{
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 40%;
}

.eye{
  position: relative;
  display: inline-block;
  border-radius: 50%;
  height: 35px;
  width: 35px;
}

.eye:after {
  position: absolute;
  bottom: 17px;
  right: 10px;
  width: 3px;
  height: 3px;
  background: #000;
  border-radius: 50%;
  border: #00DBFF solid 5.5px;
  content: " ";
}

.contactilloeye .eyewrapper{
  left:35%;
}

.contactilloeye .eye:after{
  width: 5px;
  height: 5px;
}

.contactilloeye .eye{
  height: 40px;
  width: 40px;
}



.eyehover{
  display: none;
}

@media only screen and (min-width: 650px) {
  .contactilloeye .eyewrapper{
    left:38%;
  }
}

@media only screen and (min-width: 800px) {
  .illustrations{
    height: 60px;
  }
  .illocontainer{
    height: 60px;
  }

  .eyewrapper, .contactilloeye .eyewrapper{
    left: 27%;
  }

  .eye, .contactilloeye .eye{
    height: 55px;
    width: 55px;
  }
  .eye:after, .contactilloeye .eye:after { /*pupil*/
    width: 10px;
    height: 10px;
    border: #00DBFF solid 9px;
  }

  .projectheart .eyefooter{
    height: 70px;
    width: 70px;
  }

  .projectheart .eyefooter:after { /*pupil*/
    width: 18px;
    height: 18px;
    border: #0BB21B solid 18px;
  }


}

  @media only screen and (min-width: 1025px) {
    .illustrations{
      height: 80px;
    }

    .illocontainer{
      height: 80px;
    }

    .eyewrapper, .contactilloeye .eyewrapper{
      left: 29%;
    }

    .eye:after, .contactilloeye .eye:after  { /*pupil*/
      width: 12px !important;
      height: 12px !important;
      border: #00DBFF solid 12px !important;
    }

  }

@media only screen and (min-width: 1200px) {
  .eyewrapper, .contactilloeye .eyewrapper{
    left: 33%;
  }
}


@media only screen and (min-width: 1500px) {
  .illustrations{
    height: 112px;
    max-height:112px;
  }

  .illocontainer{
    height: 112px;
  }

  .eyewrapper, .contactilloeye .eyewrapper{
    left: 39%;
  }

}

/* 1.6 – Swap Letter with Illustration*/


.mobile_hideletter{
  opacity:0;
  -webkit-transition-duration: 0.2s;
       -o-transition-duration: 0.2s;
          transition-duration: 0.2s;
}


@media only screen and (min-width: 800px) {


  .mobile_icon{
    opacity: 0;
    -webkit-transition-duration: 0.2s;
         -o-transition-duration: 0.2s;
            transition-duration: 0.2s;
  }

  .mobile_hideletter{
    opacity:1;
    -webkit-transition-duration: 0.2s;
         -o-transition-duration: 0.2s;
            transition-duration: 0.2s;
  }

  .alpha:hover .letter{
    opacity:0;
    -webkit-transition-duration: 0.2s;
         -o-transition-duration: 0.2s;
            transition-duration: 0.2s;
  }

  .alpha-comma:hover .letter, .alpha-fullstop:hover .letter{
    opacity:1;
  }

  .alpha:hover .hiddenillo{
    opacity:1;
    -webkit-transition-duration: 0.2s;
         -o-transition-duration: 0.2s;
            transition-duration: 0.2s;
  }


}


.imageshake svg:hover {
  -webkit-animation: shake 0.5s;
          animation: shake 0.5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.imageshake90 svg:hover {
  -webkit-animation: shake90 0.5s;
          animation: shake90 0.5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.imagegrow svg:hover {
  -webkit-animation: grow 4s;
          animation: grow 4s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.imagegrow35 svg:hover {
  -webkit-animation: grow35 4s;
          animation: grow35 4s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.imagegrowminus90 svg:hover {
  -webkit-animation: growminus90 4s;
          animation: growminus90 4s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.imagespin svg:hover {
  -webkit-animation: spin 4s;
          animation: spin 4s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.image45spin svg:hover {
  -webkit-animation: spin45 4s;
          animation: spin45 4s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.image160spin svg:hover {
  -webkit-animation: spin160 4s;
          animation: spin160 4s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

@-webkit-keyframes shake {
  0% { -webkit-transform: translate(1px, 1px) rotate(0deg); transform: translate(1px, 1px) rotate(0deg); }
  10% { -webkit-transform: translate(-1px, -2px) rotate(-5deg); transform: translate(-1px, -2px) rotate(-5deg); }
  20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); transform: translate(-3px, 0px) rotate(1deg); }
  30% { -webkit-transform: translate(3px, 2px) rotate(0deg); transform: translate(3px, 2px) rotate(0deg); }
  40% { -webkit-transform: translate(1px, -1px) rotate(1deg); transform: translate(1px, -1px) rotate(1deg); }
  50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); transform: translate(-1px, 2px) rotate(-1deg); }
  60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); transform: translate(-3px, 1px) rotate(0deg); }
  70% { -webkit-transform: translate(3px, 1px) rotate(-1deg); transform: translate(3px, 1px) rotate(-1deg); }
  80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); transform: translate(-1px, -1px) rotate(1deg); }
  90% { -webkit-transform: translate(1px, 2px) rotate(0deg); transform: translate(1px, 2px) rotate(0deg); }
  100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes shake {
  0% { -webkit-transform: translate(1px, 1px) rotate(0deg); transform: translate(1px, 1px) rotate(0deg); }
  10% { -webkit-transform: translate(-1px, -2px) rotate(-5deg); transform: translate(-1px, -2px) rotate(-5deg); }
  20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); transform: translate(-3px, 0px) rotate(1deg); }
  30% { -webkit-transform: translate(3px, 2px) rotate(0deg); transform: translate(3px, 2px) rotate(0deg); }
  40% { -webkit-transform: translate(1px, -1px) rotate(1deg); transform: translate(1px, -1px) rotate(1deg); }
  50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); transform: translate(-1px, 2px) rotate(-1deg); }
  60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); transform: translate(-3px, 1px) rotate(0deg); }
  70% { -webkit-transform: translate(3px, 1px) rotate(-1deg); transform: translate(3px, 1px) rotate(-1deg); }
  80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); transform: translate(-1px, -1px) rotate(1deg); }
  90% { -webkit-transform: translate(1px, 2px) rotate(0deg); transform: translate(1px, 2px) rotate(0deg); }
  100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); transform: translate(1px, -2px) rotate(-1deg); }
}

@-webkit-keyframes shake90 {
  0% { -webkit-transform: translate(1px, 1px) rotate(90deg); transform: translate(1px, 1px) rotate(90deg); }
  10% { -webkit-transform: translate(-1px, -2px) rotate(85deg); transform: translate(-1px, -2px) rotate(85deg); }
  20% { -webkit-transform: translate(-3px, 0px) rotate(91deg); transform: translate(-3px, 0px) rotate(91deg); }
  30% { -webkit-transform: translate(3px, 2px) rotate(90deg); transform: translate(3px, 2px) rotate(90deg); }
  40% { -webkit-transform: translate(1px, -1px) rotate(91deg); transform: translate(1px, -1px) rotate(91deg); }
  50% { -webkit-transform: translate(-1px, 2px) rotate(89deg); transform: translate(-1px, 2px) rotate(89deg); }
  60% { -webkit-transform: translate(-3px, 1px) rotate(90deg); transform: translate(-3px, 1px) rotate(90deg); }
  70% { -webkit-transform: translate(3px, 1px) rotate(89deg); transform: translate(3px, 1px) rotate(89deg); }
  80% { -webkit-transform: translate(-1px, -1px) rotate(91deg); transform: translate(-1px, -1px) rotate(91deg); }
  90% { -webkit-transform: translate(1px, 2px) rotate(90deg); transform: translate(1px, 2px) rotate(90deg); }
  100% { -webkit-transform: translate(1px, -2px) rotate(99deg); transform: translate(1px, -2px) rotate(99deg); }
}

@keyframes shake90 {
  0% { -webkit-transform: translate(1px, 1px) rotate(90deg); transform: translate(1px, 1px) rotate(90deg); }
  10% { -webkit-transform: translate(-1px, -2px) rotate(85deg); transform: translate(-1px, -2px) rotate(85deg); }
  20% { -webkit-transform: translate(-3px, 0px) rotate(91deg); transform: translate(-3px, 0px) rotate(91deg); }
  30% { -webkit-transform: translate(3px, 2px) rotate(90deg); transform: translate(3px, 2px) rotate(90deg); }
  40% { -webkit-transform: translate(1px, -1px) rotate(91deg); transform: translate(1px, -1px) rotate(91deg); }
  50% { -webkit-transform: translate(-1px, 2px) rotate(89deg); transform: translate(-1px, 2px) rotate(89deg); }
  60% { -webkit-transform: translate(-3px, 1px) rotate(90deg); transform: translate(-3px, 1px) rotate(90deg); }
  70% { -webkit-transform: translate(3px, 1px) rotate(89deg); transform: translate(3px, 1px) rotate(89deg); }
  80% { -webkit-transform: translate(-1px, -1px) rotate(91deg); transform: translate(-1px, -1px) rotate(91deg); }
  90% { -webkit-transform: translate(1px, 2px) rotate(90deg); transform: translate(1px, 2px) rotate(90deg); }
  100% { -webkit-transform: translate(1px, -2px) rotate(99deg); transform: translate(1px, -2px) rotate(99deg); }
}

@-webkit-keyframes grow {
  0% { -webkit-transform:rotate(0deg) scale(1); transform:rotate(0deg) scale(1);}
  10% { -webkit-transform:rotate(-3deg) scale(0.9); transform:rotate(-3deg) scale(0.9);}
  15% { -webkit-transform:rotate(4deg) scale(1.3); transform:rotate(4deg) scale(1.3);}
  16% { -webkit-transform:rotate(4deg) scale(0.98); transform:rotate(4deg) scale(0.98);}
  17% { -webkit-transform:rotate(4deg) scale(1); transform:rotate(4deg) scale(1);}
  20% { -webkit-transform:rotate(0deg) scale(1); transform:rotate(0deg) scale(1);}
  100% { -webkit-transform:rotate(0deg) scale(1); transform:rotate(0deg) scale(1);}
}

@keyframes grow {
  0% { -webkit-transform:rotate(0deg) scale(1); transform:rotate(0deg) scale(1);}
  10% { -webkit-transform:rotate(-3deg) scale(0.9); transform:rotate(-3deg) scale(0.9);}
  15% { -webkit-transform:rotate(4deg) scale(1.3); transform:rotate(4deg) scale(1.3);}
  16% { -webkit-transform:rotate(4deg) scale(0.98); transform:rotate(4deg) scale(0.98);}
  17% { -webkit-transform:rotate(4deg) scale(1); transform:rotate(4deg) scale(1);}
  20% { -webkit-transform:rotate(0deg) scale(1); transform:rotate(0deg) scale(1);}
  100% { -webkit-transform:rotate(0deg) scale(1); transform:rotate(0deg) scale(1);}
}

@-webkit-keyframes grow35 {
  0% { -webkit-transform:rotate(35deg) scale(1); transform:rotate(35deg) scale(1);}
  10% { -webkit-transform:rotate(33deg) scale(0.9); transform:rotate(33deg) scale(0.9);}
  15% { -webkit-transform:rotate(37deg) scale(1.3); transform:rotate(37deg) scale(1.3);}
  16% { -webkit-transform:rotate(37deg) scale(0.98); transform:rotate(37deg) scale(0.98);}
  17% { -webkit-transform:rotate(37deg) scale(1); transform:rotate(37deg) scale(1);}
  20% { -webkit-transform:rotate(35deg) scale(1); transform:rotate(35deg) scale(1);}
  100% { -webkit-transform:rotate(35deg) scale(1); transform:rotate(35deg) scale(1);}
}

@keyframes grow35 {
  0% { -webkit-transform:rotate(35deg) scale(1); transform:rotate(35deg) scale(1);}
  10% { -webkit-transform:rotate(33deg) scale(0.9); transform:rotate(33deg) scale(0.9);}
  15% { -webkit-transform:rotate(37deg) scale(1.3); transform:rotate(37deg) scale(1.3);}
  16% { -webkit-transform:rotate(37deg) scale(0.98); transform:rotate(37deg) scale(0.98);}
  17% { -webkit-transform:rotate(37deg) scale(1); transform:rotate(37deg) scale(1);}
  20% { -webkit-transform:rotate(35deg) scale(1); transform:rotate(35deg) scale(1);}
  100% { -webkit-transform:rotate(35deg) scale(1); transform:rotate(35deg) scale(1);}
}

@-webkit-keyframes growminus90 {
  0% { -webkit-transform:rotate(-90deg) scale(1); transform:rotate(-90deg) scale(1);}
  10% { -webkit-transform:rotate(-87deg) scale(0.9); transform:rotate(-87deg) scale(0.9);}
  15% { -webkit-transform:rotate(-94deg) scale(1.3); transform:rotate(-94deg) scale(1.3);}
  16% { -webkit-transform:rotate(-94deg) scale(0.98); transform:rotate(-94deg) scale(0.98);}
  17% { -webkit-transform:rotate(-94deg) scale(1); transform:rotate(-94deg) scale(1);}
  20% { -webkit-transform:rotate(-90deg) scale(1); transform:rotate(-90deg) scale(1);}
  100% { -webkit-transform:rotate(-90deg) scale(1); transform:rotate(-90deg) scale(1);}
}

@keyframes growminus90 {
  0% { -webkit-transform:rotate(-90deg) scale(1); transform:rotate(-90deg) scale(1);}
  10% { -webkit-transform:rotate(-87deg) scale(0.9); transform:rotate(-87deg) scale(0.9);}
  15% { -webkit-transform:rotate(-94deg) scale(1.3); transform:rotate(-94deg) scale(1.3);}
  16% { -webkit-transform:rotate(-94deg) scale(0.98); transform:rotate(-94deg) scale(0.98);}
  17% { -webkit-transform:rotate(-94deg) scale(1); transform:rotate(-94deg) scale(1);}
  20% { -webkit-transform:rotate(-90deg) scale(1); transform:rotate(-90deg) scale(1);}
  100% { -webkit-transform:rotate(-90deg) scale(1); transform:rotate(-90deg) scale(1);}
}

@-webkit-keyframes spin {
  0% { -webkit-transform:rotate(0deg) scale(1); transform:rotate(0deg) scale(1);}
  18% { -webkit-transform:rotate(370deg) scale(1); transform:rotate(370deg) scale(1);}
  20% { -webkit-transform:rotate(360deg) scale(1); transform:rotate(360deg) scale(1);}
  100% { -webkit-transform:rotate(360deg) scale(1); transform:rotate(360deg) scale(1);}
}

@keyframes spin {
  0% { -webkit-transform:rotate(0deg) scale(1); transform:rotate(0deg) scale(1);}
  18% { -webkit-transform:rotate(370deg) scale(1); transform:rotate(370deg) scale(1);}
  20% { -webkit-transform:rotate(360deg) scale(1); transform:rotate(360deg) scale(1);}
  100% { -webkit-transform:rotate(360deg) scale(1); transform:rotate(360deg) scale(1);}
}

@-webkit-keyframes spin45 {
  0% { -webkit-transform:rotate(45deg) scale(1); transform:rotate(45deg) scale(1);}
  18% { -webkit-transform:rotate(415deg) scale(1); transform:rotate(415deg) scale(1);}
  20% { -webkit-transform:rotate(405deg) scale(1); transform:rotate(405deg) scale(1);}
  100% { -webkit-transform:rotate(405deg) scale(1); transform:rotate(405deg) scale(1);}
}

@keyframes spin45 {
  0% { -webkit-transform:rotate(45deg) scale(1); transform:rotate(45deg) scale(1);}
  18% { -webkit-transform:rotate(415deg) scale(1); transform:rotate(415deg) scale(1);}
  20% { -webkit-transform:rotate(405deg) scale(1); transform:rotate(405deg) scale(1);}
  100% { -webkit-transform:rotate(405deg) scale(1); transform:rotate(405deg) scale(1);}
}

@-webkit-keyframes spin160 {
  0% { -webkit-transform:rotate(-160deg) scale(1); transform:rotate(-160deg) scale(1);}
  18% { -webkit-transform:rotate(-430deg) scale(1); transform:rotate(-430deg) scale(1);}
  20% { -webkit-transform:rotate(-420deg) scale(1); transform:rotate(-420deg) scale(1);}
  100% { -webkit-transform:rotate(-420deg) scale(1); transform:rotate(-420deg) scale(1);}
}

@keyframes spin160 {
  0% { -webkit-transform:rotate(-160deg) scale(1); transform:rotate(-160deg) scale(1);}
  18% { -webkit-transform:rotate(-430deg) scale(1); transform:rotate(-430deg) scale(1);}
  20% { -webkit-transform:rotate(-420deg) scale(1); transform:rotate(-420deg) scale(1);}
  100% { -webkit-transform:rotate(-420deg) scale(1); transform:rotate(-420deg) scale(1);}
}

#animatedpenis{
  display: block;
  height:242px;
  width:360px;
  background-image: url("img/penis.png");
}

#animatedpenis:hover{
  -webkit-animation: playX 0.2s steps(5) infinite,
             playY 1s steps(5) infinite;
          animation: playX 0.2s steps(5) infinite,
             playY 1s steps(5) infinite;
}

@-webkit-keyframes playX {
  from {background-position-x: 0px;}
  to {background-position-x: -1800px;}
}

@keyframes playX {
  from {background-position-x: 0px;}
  to {background-position-x: -1800px;}
}

@-webkit-keyframes playY {
  from {background-position-y: 0px;}
  to {background-position-y: -1210px;}
}

@keyframes playY {
  from {background-position-y: 0px;}
  to {background-position-y: -1210px;}
}




/* =================== */
/*      SECTION 2     */
/* =================== */
/* 2.1 - Header */

#header{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  padding: 20px;
  z-index: 99;
}

.home #header{
top:0;
position: absolute;
pointer-events: none;
-webkit-box-pack: end;
    -ms-flex-pack: end;
        justify-content: flex-end;
}

.home #header #menu{
  pointer-events: all;
  width:50% !important;
}

.home .headerannouncement{
  padding-top:0px !important;
  top:40px !important;
}

#branding{
  z-index: 100;
  padding-top:4px;
  padding-bottom:4px;
  margin-right: 15px;
}

#branding #site-title svg{
  height: 17.2px;
  fill: #FCFCFC;
}

.logocolorone, .logocolortwo, .logocolorthree, .logocolorfour, .logocolorfive, .logocolorsix{
  -webkit-transition-duration: 0.2s;
       -o-transition-duration: 0.2s;
          transition-duration: 0.2s;
}

#logodesktop{
  display: none;
  width: 300px;
}

#logomobile{
  display: block;
}

  #menu {
  text-align: right;
  margin-left: 15px;
  }

  .home #menu {
    margin:0px;
    width: 100% !important;
    margin-left: none !important;
  }

#header input{
  display:none;
}

.menu label:hover, .overlay label:hover{
  cursor:pointer;
}

.overlay{
	position: fixed;
	width: 100%;
	height: 100vh;
  padding:40px;
	top: 0;
	left: 0;
	background: #373737;
  z-index: 99;
}

.overlay nav {
	text-align: center;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	    transform: translateY(-50%);
}

.overlay ul {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	display: inline-block;
	height: 100%;
	position: relative;
}

.overlay ul li {
	display: block;
	height: 20%;
	height: calc(100% / 5);
	min-height: 54px;
}

.overlay ul li a {
	font-weight: 300;
	display: block;
	color: white;
  text-decoration:none;
	-webkit-transition: color 0.2s;
	-o-transition: color 0.2s;
	transition: color 0.2s;
}

.menu~.overlay-hugeinc{
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
	-o-transition: opacity 0.5s, visibility 0s 0.5s;
	transition: opacity 0.5s, visibility 0s 0.5s;
}

#op:checked~.overlay-hugeinc{
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 0.5s;
	-o-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.overlay-hugeinc nav {
	-moz-perspective: 300px;
}

.overlay-hugeinc nav ul {
	opacity: 0.4;
	-webkit-transform: translateY(-25%) rotateX(35deg);
	transform: translateY(-25%) rotateX(35deg);
	-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
	-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
	transition: opacity 0.5s, -webkit-transform 0.5s;
	-o-transition: transform 0.5s, opacity 0.5s;
	transition: transform 0.5s, opacity 0.5s;
	transition: transform 0.5s, opacity 0.5s, -webkit-transform 0.5s;
}

#op:checked~.overlay-hugeinc nav ul {
	opacity: 1;
	-webkit-transform: rotateX(0deg);
	transform: rotateX(0deg);
}

#op:not(:checked)~.overlay-hugeinc nav ul {
	-webkit-transform: translateY(25%) rotateX(-35deg);
	transform: translateY(25%) rotateX(-35deg);
}

.hovercolor{
  -webkit-transition-duration: 0.2s;
       -o-transition-duration: 0.2s;
          transition-duration: 0.2s;
}

.pagetitle{
  text-align: center;
}

@media only screen and (min-width: 360px) {
  #header{
    padding:40px;
  }
}

@media only screen and (min-width: 800px) {
  #header, .home #header, .home .headerannouncement{
    position: fixed;
    padding: 60px 60px 40px 60px !important;
    top:unset !important;
  }

  #branding{
    margin-right: 0px;
  }



  #menu {
  text-align: right;
  margin-left: 40px;
  -webkit-box-ordinal-group:4;
      -ms-flex-order:3;
          order:3;
  }

  .home #menu{
    margin-left: 0px;
  }

  .overlay{
    padding: 60px;
  }

  .pagetitle{
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    margin-left: 40px;
    margin-top: 0px;
  }

}

@media only screen and (min-width: 1025px) {

#logodesktop{
  display: block;
}

#logomobile{
  display: none;
}

}


/* 2.2 - Footer */

#footer{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin:80px 40px 40px 40px;
  position:relative;
}

#footer p{
  text-align: center;
}

.footeritem:not(:first-of-type){
  margin-top: 40px;
}

.subscribe{
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  max-width: 650px;
  margin-top:15px;
}

.subscribe input{
  height: 49px;
}

.subscribe input:first-of-type{
  width: 70%;
  border-right:0px;
}

.subscribe input:nth-of-type(2){
  width: 30%;
}

.subscribe input:nth-of-type(2):hover{
  color: #373737;
}

.mc4wp-response{
  margin-top:10px;
}

.footerleaf{
  position: relative;
  height: 40px;
}

.footerleaf .illustrations{
  top:unset;
  -webkit-transform:unset;
      -ms-transform:unset;
          transform:unset;
  height: unset;
}


.footerleaf .illustrations svg{
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
  height: 150px;
  position: absolute;
  left: 0;
  right: 0;
  top: -55px;
}

#footerheart{
  position: relative;
  height: 170px;
}

.footereye{
  width: 200px;
  position: absolute;
  margin: auto;
  left:0;
  right:0;
}

.eyewrapperfooter{
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 36%;
}

.eyefooter {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  height: 55px;
  width: 55px;
}

.eyefooter:after {
  position: absolute;
  bottom: 17px;
  right: 10px;
  width: 12px;
  height: 12px;
  border: solid 12px #0BB21B;
  background: #000;
  border-radius: 50%;
  content: " ";
}

@media only screen and (min-width: 800px) {

  #footer{
    margin:120px 60px 60px 60px;
  }

  #footer p{
    text-align: left;
  }

  .footeritem:not(:first-of-type){
    margin-top: 0px;
    margin-left: 40px;
  }

  .credit{
    margin-top:25px;
  }

  .footerleaf, #footerheart{
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    height: 160px;
  }

  .footerleaf .illustrations svg{
    -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform:translateY(-50%);
        -ms-transform:translateY(-50%);
            transform:translateY(-50%);
    top:50%;
}

  .footerleaf .illustrations{
    -webkit-transform:translateY(-50%);
        -ms-transform:translateY(-50%);
            transform:translateY(-50%);
    top:50%;
    height: 170px;
    max-height: unset;
  }

  #acknowledgement p{
    max-width: 410px;
  }

  #footerheart{
    margin-top:40px;
    width:100%;
    margin-left: 0px;
  }

  .footereye{
    margin-top:0px;
  }


}

@media only screen and (min-width: 1025px) {
  #footer{
    margin:160px 60px 60px 60px;
  }
}



@media only screen and (min-width: 1300px) {
  #footerheart{
    margin-top:0px;
    margin-left: 40px;
  }
}

@media only screen and (min-width: 1500px) {
  #footerheart{
    margin-top:0px;
    margin-left: 40px;
  }
}

@media only screen and (min-width: 2000px) {
  #footer{
    max-width:2000px;
    margin:auto;
    margin-bottom:60px;
  }
}





/* =================== */
/*      SECTION 3     */
/* =================== */
/* 3.1 - Homepage */

.cover{
  height: 90vh;
  position: relative;
}

#mobannouncmenent{
position: absolute;
z-index: 99;
width: 100%;
height: 60px;
text-align: center;
top:0;
left:0;
border: 10px solid;
border-image-repeat: stretch;
-o-border-image: url("img/box.svg");
   border-image: url("img/box.svg");
border-image-slice: 18;
}

#mobannouncmenent p{
  font-family: "LJMA Sans";
  font-size: 20px;
  height: 100%;
  width:90%;
  margin: auto;
  padding: 11px 10px 1px 10px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width:100%;
  text-align: center;
  background-color: #5DCB31;
  line-height: 1;
  max-width: unset;
}

#mobannouncmenent a{
  text-decoration: none;
}

.mobannouncementmargin{
  margin-top:35px!important;
}

.mobannouncementmarginimg{
  margin-top:10px!important;
}

#announcmenent{
position: absolute;
z-index: 10;
width: 150px;
height: 150px;
text-align: center;
border-radius: 50%;
margin: auto;
left: 0;
right: 0;
background-image: url("img/spot.svg");
background-size: cover;
background-color: unset;
-webkit-transform:rotate(-15deg);
    -ms-transform:rotate(-15deg);
        transform:rotate(-15deg);
}

#announcmenent p{
  font-family: "LJMA Sans";
  padding: 10px 10px 10px 10px;
  font-size: 20px;
  height: 100%;
  width:90%;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: unset;
  line-height: 1.2;
}

#announcmenent p a, #mobannouncmenent p a{
  text-decoration: none;
  width:100%;
}

a #announcmenent:hover{
  background-image: url("img/spot-purple.svg");
  -webkit-transition-duration: 0.2s;
       -o-transition-duration: 0.2s;
          transition-duration: 0.2s;
}

.hpillosgroup{
  position:relative;
}

.hpillosgroup2{
  width: 100%;
  margin-top:40px;
}

.hpillos{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width:100%;
}

.hpilloslinetwo{
  height: 50px;
  bottom:0;
}

.hpillo{
  position: relative;
  height: 50px;
  margin-right:7.5px;
  margin-left: 7.5px;
  z-index: 97;
}

.hpflower2, .hpboob{
  z-index: 98;
}

.hpillo:first-of-type{
  margin-left: 0px;
}


.hpilloslinetwo{
  margin-top:20px;
}

.hprainbow{
  width: 100%;
  margin-right: 0px;
}

.hpeye .illustrations{
  height:25px;
}

.hpbanana{
  margin-left:0px;
}

.hppenis{
  margin-right: 0px;
}


.hppenis #animatedpenis{
  -webkit-transform: translate(-30%, -40%) scale(0.2);
      -ms-transform: translate(-30%, -40%) scale(0.2);
          transform: translate(-30%, -40%) scale(0.2);
}


.hpbanana .illustrations{
  height: 45px;
}

.hpmeat .illustrations, .hpheart .illustrations, .hppizza, .hpfire, .hpcrown {
  display: none;
}

.hppizza .illustrations svg{
  -webkit-transform:rotate(-90deg);
      -ms-transform:rotate(-90deg);
          transform:rotate(-90deg);
}

.hpmeat .illustrations svg{
  -webkit-transform:rotate(44deg);
      -ms-transform:rotate(44deg);
          transform:rotate(44deg);
}

.hpbanana .illustrations svg{
  -webkit-transform:rotate(-160deg);
      -ms-transform:rotate(-160deg);
          transform:rotate(-160deg);
}

.hppenis .illustrations svg{
  -webkit-transform:rotate(-45deg);
      -ms-transform:rotate(-45deg);
          transform:rotate(-45deg);
}

.hppill .illustrations svg{
  -webkit-transform: rotate(35deg);
      -ms-transform: rotate(35deg);
          transform: rotate(35deg);
}

.hpleaf .illustrations svg, .hpcig .illustrations svg{
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}

.hpbottle .illustrations svg{
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

#hpcovertext{
  width: 100%;
  margin-top:30px;
}

.hpname{
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

#introtext{
  width: 80%;
  margin: auto;
  margin-top:20px;
  text-align: center;
}


.getmantramob{
  text-align: center;
  display: block;
  margin-top:20px;
}

.getmantra{
  display: none;
}

.getmantra a, .getmantramob a{
  text-decoration: none;
}


.shop h2{
  text-align: center;
}

.shop h4{
  margin-bottom:5px;
}

.shop a{
  text-decoration: none;
}

.shopcategories{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.shopcategories li{
  margin-top:0px;
  margin-left: 10px;
}

.shopcategories li:first-of-type{
  margin-left: 0px;
}

.shopcategories li a{
  text-decoration: underline;
}

.shopitems{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.shopitem:nth-of-type(2) .bubbleimageoverlay{
  background-image: url("img/spot.svg");
}

.shopitem:nth-of-type(3) .bubbleimageoverlay{
  background-image: url("img/spot-red.svg");
}

.shopimage, .latestpostimg {
  position: relative;
  width: 100%;
}

.shopimage:after, .latestpostimg:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.shopimage img, .latestpostimg div {
  position: absolute;
  width: 100%;
  height: 100%;
}

.shopimage:hover .bubbleimageoverlay, .latestpostimg:hover .bubbleimageoverlay{
  opacity:1;
}

.shoptext{
  text-align: center;
  width: 100%;
}

.shopitem:not(:first-of-type){
  margin-top:40px;
}

.latestpost{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.latestpostimg{
  position: relative;
  -webkit-box-ordinal-group:3;
      -ms-flex-order:2;
          order:2;
  margin-top: 30px;
}

.latestpostimg div{
  overflow: hidden;
}

.latestpostimg img{
  -o-object-fit: cover;
     object-fit: cover;
  width:100%;
  height: auto;
}

.latestposttext{
  -webkit-box-ordinal-group:2;
      -ms-flex-order:1;
          order:1;
}

.hppenis2{
  height: 30px;
}

.hppenis2 #animatedpenis{
  -webkit-transform: translate(-11%, -40%) scale(0.2) rotate(-20deg);
      -ms-transform: translate(-11%, -40%) scale(0.2) rotate(-20deg);
          transform: translate(-11%, -40%) scale(0.2) rotate(-20deg);
}

.hppizza2 .illustrations{
  height: 35px;
  -webkit-transform: rotate(44deg);
      -ms-transform: rotate(44deg);
          transform: rotate(44deg);
}


@media only screen and (min-width: 375px) {
  .hpillo .illustrations{
    height: 35px;
  }

}

@media only screen and (min-width: 500px) {
  #mobannouncmenent p{
    padding: 15px 10px 1px 10px;
  }
}


@media only screen and (min-width: 800px) {

  .cover{
    height: 671px;
    position: relative;
  }

  #mobannouncmenent{
    display: none;
  }

  .mobannouncementmargin, .mobannouncementmarginimg{
    margin-top:0px!important;
  }

  .hpillosgroup{
    position: relative;
    bottom:unset;
    height: 15%;
  }

  .hpillosgroup2{
  margin-top: 0px;
  }

  .hpillos{
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    width: 100%;
  }

  #hpcovertext{
    position: relative;
    top: unset;
    -webkit-transform: unset;
        -ms-transform: unset;
            transform: unset;
    margin-top: 0px;
    height: 65%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-line-pack: center;
        align-content: center;
  }

  .getmantra{
    width: 100%;
    display: block;
    text-align: center;
    height:5%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }

  .getmantra H5{
    width: 100%;
  }

  .getmantramob{
    display: none;
  }

  .hpilloslineone, .hpilloslinetwo, .hpilloslinethree, .hpilloslinefour{
    position: absolute;
    margin-top: 0px;
    height: 100%;
  }

  .hpillo{
    height: 100%;
    margin-right:20px;
    margin-left: 20px;
  }

  .hpillo, .hpillo:nth-of-type(5n), .hpillo:nth-of-type(4n){
    margin-right:20px;
    margin-left: 20px;
  }

  .hpillo:nth-of-type(6n){
    margin-right: 0px;
  }


  .hpillo .illustrations{
    top: unset;
    -webkit-transform: unset;
        -ms-transform: unset;
            transform: unset;
    height: 50px;
  }

  .hpmeat .illustrations, .hpheart .illustrations, .hppizza, .hpfire, .hpcrown {
    display: block;
  }

  .hpdrops .illustrations{
    display: none;
  }

   .hpflower .illustrations{
    top:-70px;
  }

  .hpheart .illustrations{
    top:0;
  }

  .hpmeat .illustrations{
    height: 80px;
    right: 110px;
    bottom: -130px;
  }

  .hprainbow .illustrations{
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    top:50%;
  }

  .hpeye .illustrations{
    top: -70px;
    right: 0px;
    height: 45px;
  }

  .hppizza .illustrations{
    height: 60px;
    bottom: -80px;
  }

  .hpfire .illustrations{
    height: 80px;
    bottom: -140px;
  }

  .hpcrown .illustrations{
    height: 45px;
  }

  .hpboob .illustrations{
    height: 60px;
    -webkit-transform:translateY(-50%);
        -ms-transform:translateY(-50%);
            transform:translateY(-50%);
    top: 50%;
  }

  .hpsword .illustrations{
    top: -300px;
    height: 100px;
    max-height: unset;
  }

  .hpbanana .illustrations{
    top: -180px;
    height: 70px;
  }

  .hppill .illustrations{
    bottom: 0;
    right: -30px;
    height: 65px;
  }

  .hppenis .illustrations{
    top: -190px;
    height: 60px;
  }

  .hppenis #animatedpenis{
    -webkit-transform: translate(-32%, -120%) scale(0.35) rotate(-45deg);
        -ms-transform: translate(-32%, -120%) scale(0.35) rotate(-45deg);
            transform: translate(-32%, -120%) scale(0.35) rotate(-45deg);
  }

  .hpworld .illustrations{
    bottom:-30px;
    left:0;
    height: 60px;
  }

  .hpbottle .illustrations{
    height: 80px;
    left: -120px;
    bottom: -10px;
  }

  .hidebottle .illustrations{
    display: none !important;
  }


  .hpleaf .illustrations{
    height: 130px;
    bottom: -90px;
    right:-110px;
  }

  .hpcig .illustrations{
    height: 100px;
    top: -40px;
  }


  .hpflower2 .illustrations{
    height: 65px;
  }

  .hpname .alpha, .hpname .illustrations{
    height: 60px !important;
  }



  .hpname .alpha-a{
    width: 47.2px;
    margin-left:2.5px;
    margin-right:2.5px;
  }

  #matthew .alpha-a{
    margin-right:0px;
  }


  .hpname .alpha-e{
    width:34.2091px;
    margin-left:4px;
    margin-right:4px;
  }

  .hpname .alpha-d{
    margin-left:6px;
    margin-right:6px;
    width: 43.2236px;
  }

  .hpname .alpha-h{
    width:42.2642px;
    margin-left:5px;
    margin-right:5px;
  }


  .hpname .alpha-j{
    width:38.9785px;
    margin-left:6px;
    margin-right:6px;
  }

  .hpname .alpha-k{
    width:41.2165px;
    margin-left: 4.5px;
    margin-right: 4.5px;
  }


  .hpname .alpha-l{
    width:41.8492px;
    margin-left: 4.5px;
    margin-right: 4.5px;
  }

  .hpname .alpha-m{
    width:52.6278px;
    margin-left:2px;
    margin-right:2px;
  }

  #matthew .alpha-m{
    margin-right:6px !important;
  }

  .hpname .alpha-n{
    width:45.9266px;
    margin-left:3.5px;
    margin-right:3.5px;
  }

  .hpname .alpha-o{
    width:45.1342px;
    margin-left:4px;
    margin-right:4px;
  }

  .hpname .alpha-r{
    width: 39.414px;
    margin-left:5px;
    margin-right:5px;
  }

  .hpname .alpha-t{
    width: 46.8515px;
    margin-left:3.5px;
    margin-right:3.5px;
  }

  .hpname .alpha-u{
    width: 45.2166px;
    margin-left:4px;
    margin-right:4px;
  }

  .hpname .alpha-w{
    width: 51.9637px;
    margin-left:1px;
    margin-right:1px;
  }


  .shopitem{
    margin-left: 40px;
  }

  .shopitem:first-of-type{
    margin-left: 0px;
  }

  .shopitem:not(:first-of-type){
    margin-top:0px;
  }


  .latestpostimg{
    margin-top:0px;
    -webkit-box-ordinal-group:2;
        -ms-flex-order:1;
            order:1;
  }

  .latestposttext{
    -webkit-box-ordinal-group:3;
        -ms-flex-order:2;
            order:2;
    margin-left: 40px;
  }

  .hppenis{
    height: 60px;
  }

  .hppenis2 #animatedpenis{
    -webkit-transform: translate(-32%, -60%) scale(0.35) rotate(
-45deg);
        -ms-transform: translate(-32%, -60%) scale(0.35) rotate(
-45deg);
            transform: translate(-32%, -60%) scale(0.35) rotate(
-45deg);
  }

  .hppizza2 .illustrations{
    height: 60px;
  }

  .hpflower2 .illustrations{
    height: 50px;
  }

}

@media only screen and (min-width: 1025px) {

  .hpillo .illustrations{
    height: 80px;
  }

  .hpillosgroup{
    height: 25%;
  }

  #hpcovertext{
    height: 45%;
  }

  #announcmenent{
    bottom:-50px;
  }

.hpflower .illustrations{
  top:-60px;
}

.hpheart .illustrations{
  top:unset;
  bottom:0;
}

.hpmeat .illustrations{
  top:0;
  right:0;
  height: 100px;
  bottom: unset;
}

.hpeye .illustrations{
  top:-30px;
  right:0;
  height: 60px;
}

.hprainbow .illustrations{
  -webkit-transform: unset;
      -ms-transform: unset;
          transform: unset;
  top:unset;
  bottom:10px;
}

.hpcrown .illustrations{
  top:0;
  height: 75px;
}

.hpfire .illustrations{
  height: 90px;
  bottom:-230px;
}

.hppizza .illustrations{
  bottom: -40px;
}

.hpsword .illustrations{
  height:120px;
  top:-350px;
}

.hpworld .illustrations{
  bottom:0;
  left: 0;
}

.hpbanana .illustrations{
  top:-110px;
  left: -110px;
}

.hpcig .illustrations{
  height: 130px;
}

.hppenis .illustrations{
  top:0;
}

.hppenis #animatedpenis{
  -webkit-transform: translate(-32%, -48%) scale(0.45) rotate(-45deg);
      -ms-transform: translate(-32%, -48%) scale(0.45) rotate(-45deg);
          transform: translate(-32%, -48%) scale(0.45) rotate(-45deg);
}

.hpleaf .illustrations{
  height: 180px;
  bottom: -115px;
  right: -100px;
}

.hpbottle .illustrations{
  height: 100px;
  left: -30px;
  top:60px;
}

.hpdrops .illustrations{
  display: block;
  bottom:10px;
}

.hidebottle .illustrations{
  display: block !important;
}

  #luke, #john, #matthew, #arnold{
    margin-top:0px;
    margin: unset;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  #luke{
    width: 48%;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    padding-right:10px;
  }

  #john{
    width: 52%;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    padding-left:10px;
  }

  #matthew{
    width: 50%;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    margin-top:20px;
    padding-right:10px;
  }

  #arnold{
    width: 50%;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    margin-top:20px;
    padding-left:10px;
  }

  #introtext{
    width: 100%;
    margin-top:40px;
  }

  .shopimageoverlay h2{
    font-size: 62px;
  }

  .latestpostimg{
    height: 650px;
  }

  .latestpostimg img{
    height: 100%;
  }

  .latestpostimg:after{
    display: none;
    padding-bottom: 0%;
  }

  .latestposttext{
    padding-top:60px;
  }

  .hppenis2{
    height: 30px;
  }

  .hppenis{
    height: 60px;
  }

  .hppenis2 #animatedpenis{
    -webkit-transform: translate(-32%, -28%) scale(0.45) rotate(
-45deg);
        -ms-transform: translate(-32%, -28%) scale(0.45) rotate(
-45deg);
            transform: translate(-32%, -28%) scale(0.45) rotate(
-45deg);
  }


  .hpcrown2 .illustrations{
    -webkit-transform: unset;
        -ms-transform: unset;
            transform: unset;
    top:-240px;
    height: 75px;
  }

  .hppizza2 .illustrations{
    height: 80px;
  }

  .hpflower2 .illustrations{
    height: 80px;
  }

}


@media only screen and (min-width: 1300px) {

  #lukejohn, #matthewarnold{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 100%;
  }

  #luke, #john, #matthew, #arnold{
    width:unset;
    margin-top:0px;
    margin: unset;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding:0px;
  }

  .hpname .alpha-m{
    margin-left:8px;
  }

  #introtext{
    margin-top:60px;
  }

  .hpfire .illustrations{
    right: -50px;
  }

  .hpbottle .illustrations{
    left:-60px;
  }

  .hpcig .illustrations, .hpleaf .illustrations{
    max-height: none;
  }

  .hpcig .illustrations{
    top:-80px;
  }

  .hppenis .illustrations{
    left: -60px;
  }

  .hppenis #animatedpenis{
    -webkit-transform: translate(-32%, -73%) scale(0.45) rotate(-45deg);
        -ms-transform: translate(-32%, -73%) scale(0.45) rotate(-45deg);
            transform: translate(-32%, -73%) scale(0.45) rotate(-45deg);
  }


  .shopimageoverlay h2{
    font-size: 80px;
  }

  .latestpostimg img{
    height: auto;
  }

  .latestposttext{
    padding-top:80px;
  }

  .hpcrown2 .illustrations{
    top:-280px;
  }

}




@media only screen and (min-height: 849px) {

  .hpillosgroup2{
    position: absolute;
    width: 100%;
    margin-top:0px;
    bottom:0;
  }

  .getmantra{
    position:absolute;
    bottom:0;
  }

}

@media only screen and (min-width: 800px) and (min-height: 849px) {
  .cover{
    height: calc(100vh - 178px) !important;
  }

  .hpillosgroup2{
    position: relative;
  }
}


/* 3.2 - Mantras */

.mantratext{
  width:100%;
  text-align:center;
}

.cover input{
  display:none;
}

.mantratext label{
  text-align:center;
}

.mantratext label:hover{
  cursor:pointer;
}

.mantraoverlay{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #373737;
  z-index: 99;
}

.mantraoverlay label{
  width: 100%;
	z-index: 100;
  /* cursor:pointer; */
  height:58px;
  position: absolute;
  bottom:25px;
  left:0;
  color:white;
  margin-top:0px;
}

.mantraoverlay .mantrawrapper {
	text-align: center;
	position: relative;
	top: 50%;
	height: 100%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	    transform: translateY(-50%);
}

.mantratext~.mantraoverlay-hugeinc{
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
	-o-transition: opacity 0.5s, visibility 0s 0.5s;
	transition: opacity 0.5s, visibility 0s 0.5s;
}

#mantraop:checked~.mantraoverlay-hugeinc, #mantramobop:checked~.mantraoverlay-hugeinc{
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 0.5s;
	-o-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.mantraoverlay-hugeinc .mantrawrapper {
	-moz-perspective: 300px;
}

.mantraoverlay-hugeinc .mantrawrapper .alphaphrases {
	opacity: 0.4;
	-webkit-transform: translateY(-25%) rotateX(35deg);
	transform: translateY(-25%) rotateX(35deg);
	-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
	-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
	transition: opacity 0.5s, -webkit-transform 0.5s;
	-o-transition: transform 0.5s, opacity 0.5s;
	transition: transform 0.5s, opacity 0.5s;
	transition: transform 0.5s, opacity 0.5s, -webkit-transform 0.5s;
}

#mantraop:checked~.mantraoverlay-hugeinc .mantrawrapper .alphaphrases, #mantramobop:checked~.mantraoverlay-hugeinc .mantrawrapper .alphaphrases {
	opacity: 1;
	-webkit-transform: rotateX(0deg);
	transform: rotateX(0deg);
}

#mantraop:not(:checked)~.mantraoverlay-hugeinc .mantrawrapper .alphaphrases, #mantramobop:not(:checked)~.mantraoverlay-hugeinc .mantrawrapper .alphaphrases {
	-webkit-transform: translateY(25%) rotateX(-35deg);
	transform: translateY(25%) rotateX(-35deg);
}

.alphaphrases{
  position: relative;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.individualphrase{
  position: absolute;
  width: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.individualphrase:not(:first-of-type){
  display: none;
}

@media only screen and (min-width: 800px){
  .mantraoverlay label{
    width: 100%;
  	z-index: 100;
    /* cursor:pointer; */
    height:58px;
    position: absolute;
    bottom:25px;
    left:0;
    color:white;
    margin-top:0px;
  }
}

/* 3.3 - About */


.about{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative;
}

.aboutillo{
  height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: absolute;
  bottom:0;
}

.aboutillotwo{
  right:0;
}


.aboutboob, .aboutflower, .aboutcrown, .aboutpenis{
  width: 50%;
  height: 100%;
  position: relative;
}

.about .wsywig{
  margin-bottom: 90px;
}

.aboutpenis #animatedpenis{
  -webkit-transform: translate(-30%, -40%) scale(0.2);
      -ms-transform: translate(-30%, -40%) scale(0.2);
          transform: translate(-30%, -40%) scale(0.2);
}

@media only screen and (min-width: 800px) {

  .about .wsywig, .aboutillotwo{
    margin-left: 40px;
  }

  .about .wsywig{
    margin-bottom: 0px;
  }

  .aboutillo{
    height: unset;
    position: sticky;
    top: 230px;
    height: 550px;
  }

  .aboutboob, .aboutflower, .aboutcrown, .aboutpenis{
    width: 100%;
    height: 50%;
  }
  .aboutillo .illustrations{
    width:unset;
  }

  .aboutboob .illustrations{
    left:10%;
  }

  .aboutflower .illustrations{
    right:20%;
  }

  .aboutcrown .illustrations{
    left:20%;
  }

  .aboutpenis .illustrations{
    right:30%;
  }

  .aboutpenis #animatedpenis{
    -webkit-transform: translate(-30%, -40%) scale(0.35);
        -ms-transform: translate(-30%, -40%) scale(0.35);
            transform: translate(-30%, -40%) scale(0.35);
  }


}

@media only screen and (min-width: 1025px) {
  .about .illustrations{
    max-height: 80px;
  }

  .aboutpenis #animatedpenis{
    -webkit-transform: translate(-22%, -10%) scale(0.45);
        -ms-transform: translate(-22%, -10%) scale(0.45);
            transform: translate(-22%, -10%) scale(0.45);
  }

}

/* 3.4 - Projects */

#projects{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.projectimages{
  margin-left: 40px;
  height: calc(100vh - 230px);
  overflow:hidden;
  position: sticky;
  top:168px;
}

.mobprojectimage{
  width: 100%;
  position: relative;
}

.mobprojectimage:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.mobprojectimage img{
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
  position: absolute;
  width: 100%;
}

#projects ul li{
  margin-top:0px;
}

.mobprojectimage{
  margin-bottom: 20px;
}

#projects ul li:nth-of-type(2n){
  margin-bottom:40px;
}

#projects ul li:last-of-type{
  margin-bottom:0px;
}

#projects ul li a{
  text-decoration: none;
}

#projects ul li a:hover{
  text-decoration: underline;
}

.projectheart{
  height: 100%;
  width:100%;
  position: absolute;
  z-index: 96;
}

.projectheart .footereye{
  top:50%;
  -webkit-transform:translateY(-50%);
      -ms-transform:translateY(-50%);
          transform:translateY(-50%);
}

.projectimage{
  position:absolute;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 97;
  width:100%;
  height: 100%;
  opacity: 0;
  -webkit-transition-duration: 0.2s;
       -o-transition-duration: 0.2s;
          transition-duration: 0.2s;
}

.projectimage img{
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
  width: 100%;
}

.show{
  opacity:1 !important;
}

.show .bubbleimageoverlay{
  opacity:1 !important;
}




@media only screen and (min-width: 800px) {

#projects .grid-item-width6{
  padding-bottom: 160px;
}

  #projects ul li, #projects ul li:nth-of-type(2n){
    margin-bottom:20px;
  }

  #projects ul li, #projects ul li:last-of-type{
    margin-bottom:0px;
  }



  .projectheart .footereye{
    width:300px;
  }

  .gradient{
    display: none;
  }

  .page-template-template-projects .gradient{
    display: block;
    height: 150px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(64.08%, #373737), color-stop(82.58%, rgba(55, 55, 55, 0.2)), to(rgba(55, 55, 55, 0)));
    background: -o-linear-gradient(top, #373737 64.08%, rgba(55, 55, 55, 0.2) 82.58%, rgba(55, 55, 55, 0) 100%);
    background: linear-gradient(180deg, #373737 64.08%, rgba(55, 55, 55, 0.2) 82.58%, rgba(55, 55, 55, 0) 100%);
    position: absolute;
    top:0;
    position: fixed;
    margin-left: 60px;
  }

#projects .gradient{
  height: 80px;
  position: sticky;
  bottom:0;
  width: 100%;
  margin-left: 0;
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}

}

/* 3.5 - Project */

.post-template-template-project .projectinfo{
  margin-bottom: 40px;
}

.post-template-template-project .projectinfo .projectdescription{
  margin-top:20px;
  margin-bottom:20px;
}

.post-template-template-project .projectpageimages .imagewrap img{
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}

.post-template-template-project .projectpageimages .videowrap video{
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}

.post-template-template-project .projectpageimages .portrait{
  text-align: center;
}

.embed-container {
        position: relative;
        padding-bottom: 56.25%;
        overflow: hidden;
        max-width: 100%;
        height: auto;
    }

    .embed-container iframe,
    .embed-container object,
    .embed-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

.projectwrap{
  margin-top:40px;
}

.projectwrap:first-of-type{
  margin-top:0px;
}

.imagewraptwoimages img:first-of-type{
  margin-bottom:50px;
}

.mobprojectnav{
  width: 100%;
  text-align: center;
}

.projectfooterlinks a:first-of-type{
  border-right: 4px solid #FCFCFC;
  padding-right: 8px;
}

.projectfooterlinks a:nth-of-type(2){
  padding-left: 8px;
}

.squarewrap{
  position:relative;
  width: 100%;
}

.squarewrap:after{
  content: "";
  display: block;
  padding-bottom: 100%;
}


.posterwrap img, .squarewrap .instashell{
  position: absolute;
  margin:auto;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

.squarewrap .instashell{
  width: 70%;
  top:50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  bottom:unset;
  background: #ffffff;
}

.squarewrap .instashell .gramheader{
  width: 100%;
  height:30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding:5px;
  background: #ffffff;
  border-bottom: 2px solid #efefef;
}

.gramheader .gram-logo{
    	height:20px;
    	width:20px;
    	background-image:url(img/ig_background.png);
    	background-size: cover;
    	border-radius: 50%;
}

.squarewrap .instashell img, .squarewrap .instashell video, .squarewrap .instashell .embed-container{
  width: 100%;
  height: auto;
}

.gramheader .gram-logo img{
    	border-radius: 50%;
      height: 12px;
      width: 12px;
      margin: 4px;
    }

    .gramheader p{
      font-size: 14px;
      color:#000000;
      margin-left:7px;
      margin-top:10px;
      display: none;
    }

    .gramheader .gram-dots{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-left: auto;
    height: 20px;
      -ms-flex-line-pack: center;
          align-content: center;
    }

    .gramheader .gram-dots .gram-dot{
    width:2px;
    height: 2px;
    border-radius: 50%;
    background-color: #000000;
    margin-right: 3px;
    }

    .gram-footer{
    	background-color:#ffffff;
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	width:100%;
    	height:30px;
    	padding:5px;
    }

    .gram-icons{
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
      vertical-align: middle;
    	padding-top:2.5px;
    	padding-bottom:2.5px;
    }

    .gram-bookmark{
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	margin-left: auto;
    	padding-top:2.5px;
    	padding-bottom:2.5px;
    }

    .gram-icons svg{
    	height: 15px;
    	margin-right:10px;
    }

    .gram-bookmark svg{
    	height: 15px;
    }

.dropshadow{
  -webkit-filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 0.4));
    filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 0.4));
}

.posterwrapportrait img{
  width: auto;
  height: 80%;
}

.posterwraplandscape img{
  width: 80%;
  height: auto;
}





@media only screen and (min-width: 800px) {

  .post-template-template-project #content{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  .post-template-template-project .projectinfo{
    height: calc(100vh - 230px);
    position:sticky;
    top:168px;
    margin-right: 40px;
    margin-bottom:0px;
  }

  .post-template-template-project .projectinfo .entry-summary{
    margin-top:30px;
  }


  .post-template-template-project .projectinfo .projectdescription{
    max-height: 400px;
    overflow-y:scroll;
    padding-right:20px;
  }

  /* Works on Firefox */
  .post-template-template-project .projectinfo .projectdescription {
  scrollbar-width: thin;
  scrollbar-color: #FCFCFC;
  }

  /* Works on Chrome, Edge, and Safari */
  .post-template-template-project .projectinfo .projectdescription::-webkit-scrollbar {
  background: #373737;
  width: 12px;
  margin-left: 20px;
  }

  .post-template-template-project .projectinfo .projectdescription::-webkit-scrollbar-track {
  /* border: 3px solid #FCFCFC; */
  }

  .post-template-template-project .projectinfo .projectdescription::-webkit-scrollbar-thumb {
  height: 12px;
  border: 2px solid #FCFCFC;
  border-radius: 12px;
  }

  .post-template-template-project .projectnav{
    position: absolute;
    bottom:-3px;
  }

  .post-template-template-project .projectpageimages .fill{
    height: calc(100vh - 230px);
  }

  .post-template-template-project .projectpageimages .fill img{
    height: 100%;
    width:100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

  .post-template-template-project .projectpageimages .landscape img{
    width: 100%;
    height: 100%;
    -o-object-fit:cover;
       object-fit:cover;
  }

  .post-template-template-project .projectpageimages .portrait img{
    width: 100%;
    height: 100%;
    -o-object-fit:cover;
       object-fit:cover;
  }

  .imagewraptwoimages img:first-of-type{
    margin-bottom:100px;
  }

  .projectwrap{
    margin-top:60px;
  }



}

@media only screen and (min-width: 1025px) {
  .post-template-template-project .projectinfo .entry-summary{
    margin-top:40px;
  }

  .projectwrap{
    margin-top:80px;
  }

  .squarewrap .instashell .gramheader{
    height:60px;
    padding:10px;
  }

  .gramheader .gram-logo{
    height:40px;
    width:40px;
  }

  .gramheader .gram-logo img{
        height: 32px;
        width: 32px;
      }

      .gramheader p{
        display: block;
      }

      .gramheader .gram-dots{
      height: 40px;
      }

      .gramheader .gram-dots .gram-dot{
      width:3px;
      height: 3px;
      }

      .gram-footer{
      	height:50px;
      	padding:10px;
      }

      .gram-icons{
      	padding-top:2.5px;
      	padding-bottom:2.5px;
      }

      .gram-icons svg{
      	height: 25px;
      	margin-right:10px;
      }

      .gram-bookmark svg{
      	height: 25px;
      }

}

@media only screen and (min-width: 1200px) {



  .post-template-template-project .projectpageimages .imagewrap{
    height: calc(100vh - 230px);
  }

  .post-template-template-project .projectpageimages .imagewrap img{
    margin-bottom:unset;
  }

  .post-template-template-project .projectpageimages .landscape{
    height: unset;
  }

  .post-template-template-project .projectpageimages .portrait img{
    width: auto;
    height: 100%;
    -o-object-fit: unset;
       object-fit: unset;
  }

  .post-template-template-project .projectpageimages .landscape img{
    width: 100%;
    height: auto;
    -o-object-fit:contain;
       object-fit:contain;
  }

  .post-template-template-project .projectpageimages .imagewraptwoimages{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  .post-template-template-project .projectpageimages .imagewraptwoimages img{
    width:50%;
  }

  .post-template-template-project .projectpageimages .imagewraptwoimages img:not(:first-of-type){
    padding-left:20px;
  }

  .post-template-template-project .projectpageimages .imagewraptwoimages img:first-of-type{
    padding-right:20px;
    margin-bottom:0px;
  }

}


/* 3.6 - Contact */

#contact{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap:wrap;
      flex-wrap:wrap;
}

#contact .grid-item-width4{
  margin-bottom: 40px;
}

.wpcf7 form p{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width:100%;
  max-width: unset;
}

.wpcf7 form p br:first-of-type{
  display: none;
}

.wpcf7 form label input, .wpcf7 textarea{
  width: 100%;
  height: 55px;
  margin-top:10px;
}

.wpcf7 form label input{
  height: 55px;
}

.wpcf7 textarea{
  height: 150px;
}

.wpcf7 form label:not(:first-of-type){
  margin-top:15px;
}

.wpcf7 form label:nth-of-type(2){
  margin-top:5px;
}

.wpcf7 form label{
  width:100%;
}

.wpcf7 form label:first-of-type input, .wpcf7 form label:nth-of-type(2) input{
  margin-bottom:5px;
}

.wpcf7 form label .first-name:after{
  content:"First Name";
  font-size: 14px;
}

.wpcf7 form label .last-name:after{
  content:"Last Name";
  font-size: 14px;
}

.wpcf7 form input[type="submit" i]{
  border:0px;
  background: transparent;
  padding:0px;
  color:#FCFCFC;
  text-decoration: underline;
  margin-top:15px;
}

.wpcf7-response-output, .wpcf7-not-valid-tip{
  color:#FCFCFC;
  font-size:14px;
  border:unset !important;
  padding:0px !important;
  margin:10px 0px 0px 0px !important;
}

.wpcf7-not-valid-tip{
  color:#EA6D56;
}

.contactillos{
  position: relative;
  width: 100%;
  height: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  z-index: 98;
  margin-top:30px;
}

.contactillo {
  width:25%;
  position: relative;
  height: 40px;
}

.contactillos .illustrations{
  margin: auto;
}

#contact .contactform{
  position: relative;
}

.contactillofire{
  position: absolute;
  bottom:0;
  right:0;
  width:41.38px;
  z-index: 1;
  height: 60px;
}

.contactillofire .illustrations{
  width:unset;
  right:0;
  height: 60px;
  top:unset;
  -webkit-transform: unset;
      -ms-transform: unset;
          transform: unset;
}

.contactillo #animatedpenis{
  -webkit-transform: translate(-30%, -42%) scale(0.2);
      -ms-transform: translate(-30%, -42%) scale(0.2);
          transform: translate(-30%, -42%) scale(0.2);
}


@media only screen and (min-width: 800px) {

  #contact .grid-item-width4{
    margin-right: 40px;
    margin-bottom: 0px;
  }

.wpcf7 form label:not(:first-of-type){
  margin-top:30px;
}

.wpcf7 form label:nth-of-type(2){
  margin-top:15px;
}

.wpcf7 form input[type="submit" i]{
  margin-top:30px
}

#contact .grid-item-width4{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

#contact .grid-item-width7{
  margin-top:3px;
}

.contactillos{
  height: 65%;
}

.contactillo {
  width:50%;
  height: 80px;
  margin-top:0px;
}

.contactilloheart, .contactillopenis{
  margin-left:50%;
}

.contactilloeye, .contactillocrown{
  margin-right:50%;
}

.contactilloeye .illustrations{
  height: 45px;
}

.contactillo .illustrations{
  width: unset;
  margin: auto;
  left:0;
  right:0;
}

.contactillofire{
bottom:25px;
height: 90px;
width:62.06px;
}

.contactillofire .illustrations{
  right: -27px;
  height: 90px;
}

.contactillo #animatedpenis{
  -webkit-transform: translate(-30%, -42%) scale(0.35);
      -ms-transform: translate(-30%, -42%) scale(0.35);
          transform: translate(-30%, -42%) scale(0.35);
}


}

@media only screen and (min-width: 1025px) {

  .wpcf7 form p br:first-of-type{
    display: block;
  }

  .wpcf7 form label:first-of-type{
    width:50%;
    padding-right: 20px;
  }

  .wpcf7 form label:nth-of-type(2){
    width:50%;
    padding-left: 20px;
    margin-top:0px;
  }

  .contactilloeye .illustrations{
    height: 60px;
  }

  .contactillo .illustrations{
    max-height: 80px;
  }

  #contact .grid-item-width7{
    margin-top:7px;
  }

  .contactillofire{
  height: 120px;
  width: 82.65px;
  }

  .contactillofire .illustrations{
    height: 120px;
    max-height: 120px;
  }

  .contactillo #animatedpenis{
    -webkit-transform: translate(-30%, -42%) scale(0.45);
        -ms-transform: translate(-30%, -42%) scale(0.45);
            transform: translate(-30%, -42%) scale(0.45);
  }


}

@media only screen and (min-width: 1300px) {
  .contactillofire .illustrations{
    right:-50px;
  }
}


/* 3.7 - 404 */

.error404 #header h1:after {
  content: ' Oh no!';
}

.error404 .aboutpenis{
  margin-top:10px;
  transform: rotate(-18deg);
}
}

@media only screen and (max-width: 800px) {
  .error404 .aboutpenis #animatedpenis {
      -webkit-transform: translate(-40%, -40%) scale(0.2);
      -ms-transform: translate(-40%, -40%) scale(0.2);
      transform: translate(-40%, -40%) scale(0.2);
  }
}

@media only screen and (min-width: 800px) {
  .error404 .aboutpenis{
    margin-top:50px;
  }
}