/*
 Theme Name:   Anthill
 Theme URI:    https://anthill.net
 Description:  Custom Anthill Theme
 Author:       Anthill Inc
 Author URI:   https://anthill.net
 Template:     generatepress
 Version:      1.0
*/

/* ---------- Contact Form ---------- */
@keyframes cascade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes cascade {
    from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-moz-keyframes cascade {
    from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
} 

@-o-keyframes cascade {
    from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/******* Slide-Up for H1 and Hidden Labels when an input field is in focus *****/

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@-webkit-keyframes slide-up {
    from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@-moz-keyframes slide-up {
    from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@-o-keyframes slide-up {
    from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.keyframe-1 {
  opacity: 0;
  animation: slide-up ease 1.5s forwards;
  -webkit-animation: slide-up ease 1.5s forwards;
  -moz-animation: slide-up ease 1.5s forwards;
  -o-animation: slide-up ease 1.5s forwards;
}

.keyframe-1,
.keyframe-2 {
  margin: 0;
  padding: 0;
}

.wpcf7-form p {
  margin-bottom: 10px;
}

.contact-text textarea {
    height: 200px;
    resize:  vertical;
    overflow: hidden;
    margin-bottom: 20px;
}

.contact-submit {
  align-self: flex-end;
}

.wpcf7-form {
  display: flex;
  flex-flow: column nowrap;
  width:  100%;
}

.form-label-hide,
.file-upload-hide {
  visibility: hidden;
}

.form-label-effect-show {
  animation: slide-up ease .5s forwards;
  -webkit-animation: slide-up ease .5s forwards;
  -moz-animation: slide-up ease .5s forwards;
  -o-animation: slide-up ease .5s forwards;
}

#contact-name,
#contact-email,
#contact-text {
  border: none;
  border-bottom: 2px solid #e4e6eb;
  outline: 0;
  font-size: 16px;
}

#contact-name:hover,
#contact-email:hover,
#contact-text:hover,
#contact-name:focus,
#contact-email:focus,
#contact-text:focus {
    -webkit-transition: border 0.5s;
    transition: border 0.5s;
    border-bottom: 2px solid #666;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"] {
    height: 4.5rem;
    margin-bottom: 10px;
    background-color:  #fff;
    width:  100%;
}

.wpcf7-form textarea {
    background-color:  #FFF;
    height: 150px;
}

input[type="submit"].wpcf7-submit {
    margin-top: 20px;
}

.wpcf7-form input[type="text"]:focus, 
.wpcf7-form input[type="email"]:focus,
.wpcf7-form textarea:focus {
  background-color: #fff; 
}

.wpcf7-form input:focus::-webkit-input-placeholder { color:transparent; }
.wpcf7-form input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
.wpcf7-form input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
.wpcf7-form input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */
.wpcf7-form textarea:focus::-webkit-input-placeholder { color:transparent; }
.wpcf7-form textarea:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
.wpcf7-form textarea:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
.wpcf7-form textarea:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

span.wpcf7-list-item {
    margin: 0 !important;
}

input[type="submit"].wpcf7-submit,
a.button,
a.wp-block-button__link {
    background-color:  #fff;
    border: 2px solid #000;
    color:  #000;
    text-transform:  uppercase;
    font-size:  12px;
    letter-spacing:  1px;
}

@media screen and ( max-width: 800px ) {
  .wpcf7-form {
    width: 75%;
    margin: 0 auto;
  }
}

p.homepage-info {
    color:  #909090;
}

p.homepage-info a {
    color:  #dadada;
    text-decoration:  underline;
    font-style:  italic;
}

a.wp-block-button__link {
    text-transform:  uppercase;
    letter-spacing:  1px;
    font-size:  12px !important;
}

a.contact-support-link,
a.contact-tel-link {
    color:  #000;
    text-decoration:  none;
}

span.underline {
    border-bottom:  2px solid #E73A25;
}

ul#menu-main-menu li.contact a {
    border: 2px solid #000; 
    line-height:  1;
    text-transform:  uppercase;
    letter-spacing:  1px;
    padding:  10px 12px;
    font-size:  12px;
}

div.hp-cs-wrapper {
    width:  100%;
    background-color:  #202020;
    padding:  60px 20px;
    display:  inline-block;
    margin-bottom:  200px;
}

h2.cs-title {
    color:  #FFF;
    margin-bottom:  0;
}

a.all-cs {
    margin-left:  auto;
    order:  2;
    color:  #fff;
    text-transform:  uppercase;
    letter-spacing:  1px;
    font-size:  12px;
}

div.cs-title-wrapper {
    width:  1200px;
    margin:  0 auto 60px auto;
    padding:  0 40px;
    display:  flex;
    align-items:  center;
}

div.cs-teaser-wrapper {
    width:  1200px;
    margin:  0 auto;
    display:  flex;
    justify-content:  space-between;
    margin-bottom:  -260px;
}

div.cs-teaser {
    max-width:  550px;
    position:  relative;
    margin:  0 20px 300px 20px;
}

img.img-case-study {
    margin-bottom:  -200px;
}

div.cs-meta {
    margin-bottom:  -230px;
}

div.hp-form {
    width:  600px;
    margin:  100px auto;
    text-align:  center;
}

.wpcf7-spinner {
    display: block;
    margin: 10px auto;
}

div.cs-meta {
    display:  block;
    width:  80%;
    padding:  10px 0;
    background-color:  #202020;
    color:  #ababab;
    position:  absolute;
    bottom:  0px;
    left:  10%;
    font-size:  10px;
    text-transform:  uppercase;
    letter-spacing:  1px;
    text-align:  center;
}

div.cs-meta ul,
ul.services {
    list-style:  none;
    margin:  0 auto;
}

div.cs-meta ul li,
ul.services li {
    display:  inline;
}

ul.services {
    display:  inline;
    color:  #202020;
}

ul.services li {
    font-weight:  bold;
}

div.cs-meta ul li:after,
ul.services li:after {
    content: ",";
}

div.cs-meta ul li:last-child:after,
ul.services li:last-child:after {
    content: "";
}

h3.cs-meta-title {
    font-size:  16px;
    text-transform:  uppercase;
    letter-spacing:  1px;
    margin:  10px auto;
}

h3.cs-meta-title a {
    color:  #fff;
}

div.cs-archive-wrapper {
    display:  flex;
    flex-wrap:  wrap;
    justify-content:  space-between;
}

div.case-study-overview {
    margin:  50px auto 0 auto;
    width:  1200px;
    display:  flex;
    flex-wrap:  wrap;
}
@media screen and ( max-width: 1199px ) {
    div.case-study-overview {
        width:  100%;
    }
}


article.case_studies header.entry-header {
    width:  1200px;
    padding:  60px 40px 40px 40px;
    margin:  0 auto;
}
@media screen and ( max-width: 1199px ) {
    article.case_studies header.entry-header {
        width:  100%;
    }
}

div.project-meta {
    width:  40%;
    padding:  0 40px;
}

div.project-description {
    width:  60%;
    padding:  0 40px;
}
@media screen and ( max-width: 900px ) {
    div.project-meta,
    div.project-description {
        width:  100%;
    }
}

p.cs-year {
    display:  block;
    margin-top:  10px;
}

.wp-block-image {
    margin:  0;
}

h1.homepage-title {
    font-size:  44px;
}

p.homepage-info {
    font-size:  24px;
}

h2.services-heading {
    position:  relative;
    display:  inline-block;
    padding-top:  30px;
    margin-bottom:  30px;
}

h2.services-heading:before {
    content: '';
    position: absolute;
    left: 0;
    top:0;
    margin:10px 0 20px 0;
    width: 50px;
    height: 4px;
    background:#ee382b;
}

div.slide-out-logo {
    width:  100%;
    text-align:  left;
    margin-bottom:  80px;
}

img.slide-out-logo {
    width:  250px;
    margin:  50px 0 0 50px;
}

.slideout-navigation.do-overlay .slideout-exit {
    right:  30px !important;
    top:  40px !important;
}

.slideout-navigation.do-overlay .inside-navigation {
    padding:  0 !important;
    max-width:  100% !important;
}

    nav#generate-slideout-menu .inside-navigation {
    align-items:  flex-start !important;
}

 .slideout-navigation.do-overlay .inside-navigation {
    flex-direction:  row !important;
}

div.nav-cols {
    display:  flex;
    flex-wrap:  wrap;
    justify-content: space-between;
    width:  1200px;
    margin:  0 auto;
}

div.nav-cols div.help-menu,
div.nav-cols div.services-menu,
div.nav-cols div.main-nav {
    width: 29%;
}

.nav-cols .main-nav {
    margin:  0 !important;
}

nav#secondary-navigation{
    margin-top:  60px;
}

ul#menu-off-canvas:before {
    content:  "Navigate";
    border-bottom:  2px solid #D8D8D8;
    color:  #D8D8D8;
    width:  100%;
    font-size:  13px;
    text-align:  left;
    padding: 10px 0;
    margin-bottom:  30px;
}

ul#menu-services:before {
    content:  "Services";
    border-bottom:  2px solid #D8D8D8;
    color:  #D8D8D8;
    width:  100%;
    font-size:  13px;
    text-align:  left;
    padding: 10px 0;
    margin-bottom:  30px;
    display:  block;
}

ul#menu-help:before {
    content:  "Help";
    border-bottom:  2px solid #D8D8D8;
    color:  #D8D8D8;
    width:  100%;
    font-size:  13px;
    text-align:  left;
    padding: 10px 0;
    margin-bottom:  30px;
    display:  block;
}

#generate-slideout-menu.do-overlay .slideout-menu li {
    text-align:  left !important;
}

#generate-slideout-menu.do-overlay .slideout-menu li a {
    padding: 0 !important;
    font-size:  24px;
}

ul#menu-help,
ul#menu-services {
    text-align:  left;
    display:  block;
}

ul#menu-help li a,
ul#menu-services li a {
    width:  100%;
    text-align:  left;
    display:  block;
    margin:  30px 0;
    font-weight:  500;
}

/*Sentence*/
.sentence{
     color: #202020;
     font-size: 35px;
     text-align: left;
}

/*Vertical Sliding*/
.slidingVertical{
    display: inline;
    text-indent: 8px;
}
.slidingVertical span{
    animation: topToBottom 12.5s linear infinite 0s;
    -ms-animation: topToBottom 12.5s linear infinite 0s;
    -webkit-animation: topToBottom 12.5s linear infinite 0s;
    color: #ee382b;
    opacity: 0;
    overflow: hidden;
    position: absolute;
}
.slidingVertical span:nth-child(2){
    animation-delay: 2.5s;
    -ms-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}
.slidingVertical span:nth-child(3){
    animation-delay: 5s;
    -ms-animation-delay: 5s;
    -webkit-animation-delay: 5s;
}
.slidingVertical span:nth-child(4){
    animation-delay: 7.5s;
    -ms-animation-delay: 7.5s;
    -webkit-animation-delay: 7.5s;
}
.slidingVertical span:nth-child(5){
    animation-delay: 10s;
    -ms-animation-delay: 10s;
    -webkit-animation-delay: 10s;
}

/*topToBottom Animation*/
@-moz-keyframes topToBottom{
    0% { opacity: 0; }
    5% { opacity: 0; -moz-transform: translateY(-50px); }
    10% { opacity: 1; -moz-transform: translateY(0px); }
    25% { opacity: 1; -moz-transform: translateY(0px); }
    30% { opacity: 0; -moz-transform: translateY(50px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-webkit-keyframes topToBottom{
    0% { opacity: 0; }
    5% { opacity: 0; -webkit-transform: translateY(-50px); }
    10% { opacity: 1; -webkit-transform: translateY(0px); }
    25% { opacity: 1; -webkit-transform: translateY(0px); }
    30% { opacity: 0; -webkit-transform: translateY(50px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes topToBottom{
    0% { opacity: 0; }
    5% { opacity: 0; -ms-transform: translateY(-50px); }
    10% { opacity: 1; -ms-transform: translateY(0px); }
    25% { opacity: 1; -ms-transform: translateY(0px); }
    30% { opacity: 0; -ms-transform: translateY(50px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}

ul#menu-main-menu li.contact a,
a.wp-block-button__link,
input[type=submit]#contact-submit,
a.all-cs,
h3.cs-meta-title a,
.cs-img a img,
.site-logo a img,
.slide-out-logo a img,
p.homepage-info a {
    -webkit-transition: 0.25s all ease-in-out;
    -moz-transition: 0.25s all ease-in-out;
    -o-transition: 0.25s all ease-in-out;
    transition: 0.25s all ease-in-out;
    opacity:  100;
}

ul#menu-main-menu li.contact a:hover,
a.wp-block-button__link:hover,
input[type=submit]#contact-submit:hover {
    color:  #fff !important;
    background-color:  #202020 !important;
}

a.all-cs:hover,
h3.cs-meta-title a:hover,
.site-logo a img:hover,
.slide-out-logo a img:hover,
p.homepage-info a:hover {
    opacity:  80%;
}

.cs-img a img:hover {
    -moz-box-shadow: 5px 5px 30px rgba(0,0,0,0.3);
    -webkit-box-shadow: 5px 5px 30px rgba(0,0,0,0.3);
    box-shadow: 5px 5px 30px rgba(0,0,0,0.3);
}

@media screen and ( max-width: 1260px ) {
    div.hp-header {
        margin-right:  30px;
        margin-left:  30px;
    }
}

@media screen and ( max-width: 1240px ) {
    div.cs-title-wrapper,
    div.cs-teaser-wrapper{
        width:  100%;
    }
    div.cs-archive-wrapper div.cs-teaser {
        width:  48%;
        margin:  0 1% 300px 1%;
    }
    div.cs-archive-wrapper {
        padding:  0 1%;
    }
    div.nav-cols {
        margin:  0 50px;
    }
}

@media screen and (max-width:  900px) {
    div.nav-cols div.help-menu,
    div.nav-cols div.services-menu,
    div.nav-cols div.main-nav {
        width: 100%;
    }
    div.nav-cols {
        flex-wrap:  wrap-reverse;
    }
}

@media screen and (max-width:  800px) {
    h1.homepage-title {
        font-size:  36px;
    }
    p.homepage-info {
        font-size:  20px;
    }
    nav#secondary-navigation {
        display:  none;
    }
}

@media screen and (max-width:  768px) {
        .slideout-navigation.do-overlay .slideout-exit {
            position: absolute !important;
    }
        img.slide-out-logo {
            width:  160px;
            margin:  50px 0 0 50px;
    }
        .slideout-navigation.do-overlay .slideout-exit {
            top: 30px !important;
    }
        div.cs-archive-wrapper div.cs-teaser,
        div.cs-teaser-wrapper div.cs-teaser {
            width:  100%;
            margin:  0 auto 300px auto;
    }
        div.cs-teaser-wrapper {
            flex-wrap:  wrap;
        }
        div.cs-archive-wrapper {
            padding:  0 2%;
        }
}

@media screen and (max-width:  599px) {
    div.hp-form {
        width:  100%;
    }
}