/*
  Theme Name: MyArt
  Theme URI: https://myart.co.nz
  Author: Established Group
  Author URI: http://establishedgroup.com
  Version: 1.0.0
  */


  @font-face {
  font-family: Untitled-Light;
  src: url(../myart/assets/fonts/untitled-sans/untitled-sans-web-light.woff);
  }

/*  @font-face {
  font-family: Untitled-Light-Italic;
  src: url(../myart/assets/fonts/untitled-sans/untitled-sans-web-light-italic.woff);
  }*/


  @font-face {
  font-family: Untitled-Regular;
  src: url(../myart/assets/fonts/untitled-sans/untitled-sans-web-regular.woff);
  }

    @font-face {
  font-family: Untitled-Regular-Italic;
  src: url(../myart/assets/fonts/untitled-sans/untitled-sans-web-regular-italic.woff);
  }

  @font-face {
  font-family: Untitled-Bold;
  src: url(../myart/assets/fonts/untitled-sans/untitled-sans-web-bold.woff);
  }

  @font-face {
  font-family: Untitled-Bold-Italic;
  src: url(../myart/assets/fonts/untitled-sans/untitled-sans-web-bold-italic.woff);
  }

  @font-face {
  font-family: Untitled-Black;
  src: url(../myart/assets/fonts/untitled-sans/untitled-sans-web-black.woff);
  }

/*  @font-face {
  font-family: Untitled-Black-Italic;
  src: url(../myart/assets/fonts/untitled-sans/untitled-sans-web-black-italic.woff);
  }*/

  @font-face {
  font-family: 'Font Awesome 5 Pro Light';
  font-style: normal;
  font-weight: 300;
  src: url("../myart/assets/fonts/fontawesomepro/fa-light-300.eot");
  src: url("../myart/assets/fonts/fontawesomepro/fa-light-300.eot?#iefix") format("embedded-opentype"), url("../myart/assets/fonts/fontawesomepro/fa-light-300.woff2") format("woff2"), url("../myart/assets/fonts/fontawesomepro/fa-light-300.woff") format("woff"), url("../myart/assets/fonts/fontawesomepro/fa-light-300.ttf") format("truetype"), url("../myart/assets/fonts/fontawesomepro/fa-light-300.svg#fontawesome") format("svg");
  }

  .fal {
  font-family: 'Font Awesome 5 Pro Light';
  font-weight: 300;
  }

  @font-face {
  font-family: 'Font Awesome 5 Pro Solid';
  font-style: normal;
  font-weight: 900;
  src: url("../myart/assets/fonts/fontawesomepro/fa-solid-900.eot");
  src: url("../myart/assets/fonts/fontawesomepro/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../myart/assets/fonts/fontawesomepro/fa-solid-900.woff2") format("woff2"), url("../myart/assets/fonts/fontawesomepro/fa-solid-900.woff") format("woff"), url("../myart/assets/fonts/fontawesomepro/fa-solid-900.ttf") format("truetype"), url("../myart/assets/fonts/fontawesomepro/fa-solid-900.svg#fontawesome") format("svg");
  }

  .fas {
  font-family: 'Font Awesome 5 Pro Solid';
  font-weight: 900;
  }


  /* CSS RESETS */

  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,section,summary,time,mark,audio,video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  }


  /* HTML5 display-role reset for older browsers */

  article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
  display: block;
  }

  html, body {
    scroll-behavior: smooth;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: none;
    font-family: Untitled-Regular, sans-serif;
    letter-spacing: -1px;
  }

  /* Flex Sticky Footer */

  html, body {
    height: 100%;
  }

  body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  header {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  }

  main {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto; 
  }

  footer {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  }

  /* End Flex Sticky Footer */


  section {
    margin-bottom: 60px;
  }

  .container {
    margin: auto;
    width: 95%;
    max-width: 1140px;
    text-align: left;
  }


  .row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
   /* justify-content: left;*/
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
  }

  .column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
}

  .row.five-col > div {
    display: inline-block;
    width:18%;
    -webkit-box-pack: left;
        -ms-flex-pack: left;
            justify-content: left;
  }

  a {
    color: black;
    text-decoration: none;
  }


  p a {
    border-bottom: 2px solid currentColor;
  }

  p a:hover {
    border-bottom: 2px dashed currentColor;
  }

  ul#banner_slider a span:hover {
    border-bottom: 2px solid currentColor;
  }

  h1 {
    margin-top: -5px;
    line-height: 45px;
  }

  h1 span {
    display: block;
    height: 20px;
}

/*  h1::first-line {
    background-color: pink;
    content: '...';
    color: black;
  }*/

  h2, h3, h4 {
    font-size: 26px;
    line-height: 45px;
  }

  p {
    font-size: 26px;
    line-height: 45px;
    margin: 0 0 21px 0;
  }

  p:nth-last-child(1) {
    margin-bottom: 10px;
  }

  i, em {
    font-family: Untitled-Regular-Italic;
  }

  b, strong {
    font-family: Untitled-Bold;
  }
   em strong,
   strong em,
   i strong,
   strong i,
   b strong,
   strong b {
    font-family: Untitled-Bold-Italic;
   }


  .story-page h2, 
  .story-page h3,
  .story-page h4,
  .story-page h5 {
    font-size: 18px;
    line-height: 1.4;
    margin: 0 0 8px 0;
  }

  .arrow {
    max-width: 22px;
    height: 30px;
    margin: 15px 0 0 3px;
  }

  .hor-flip {
    -webkit-transform: scale(-1, 1);
        -ms-transform: scale(-1, 1);
            transform: scale(-1, 1);
  }
  
  .vert-flip {
    -webkit-transform: scale(1, -1);
        -ms-transform: scale(1, -1);
            transform: scale(1, -1);
  }

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


  .main-image {
    background-size: cover;
    background-position: center center;
    height: 60vh;
    max-height: 900px;
  }

   .hero_slider ul li {
    height: 70vh;
    min-height: 600px;
     max-height: 900px;
     background-size: cover;
    background-position: center center;
    
   }

   .hero_slider.multiple ul li {
    cursor: url("../myart/assets/img/arrow_next2.svg"), auto!important;
   }

   .hero_slider ul li a,
   .hero_slider ul li h2 {
      display: block;
      font-size: 26px;
      line-height: 45px;
      width: 40%;
      margin-left: 20%;
      margin-top: 60px;
      text-shadow: 0px 0px 10px rgba(255,255,255,0.5)
   }

   .slider_title {
    position: relative;
   }

    .slider_title div {
        position: absolute;
        margin-left: 20%;
        height: 70vh;
        min-height: 600px;
        max-height: 900px;
        z-index: 999;
        min-width: 320px;
        pointer-events: none;
    }
  
    .slider_title h3 {
      position: fixed;
      margin-top: 200px;
      z-index: 999;
      font-size: 26px;
      text-shadow: 0px 0px 10px rgba(255,255,255,0.5)
    }

    .slider_title div.static h3 {
        position: absolute;
        bottom: 40px;
    }

    .marker {
    /*  height: 3px;
      width: 3px;
      background-color: orange;*/
      font-family: Untitled-Bold;
      opacity: 0;
       position: fixed;
       margin-top: 330px;
      z-index: 1000;
    }

    


    .slider_title .arrow {
      margin: 0 0 0 -2px;
    }


  .divider {
    margin: 0 auto 60px;
    width: 100%;
    max-width: 1200px;
    height: 7px;
    background-color: black;
  }

   aside {
    width:18%;
  }

  article {
    width:80%;
    margin-left: 2%;
  }

   aside p {
    font-size: 18px;
    line-height: 1.8;
    margin: 0 0 8px 0;
   }

   aside h2 {
    letter-spacing: 0.5px;
   }


   .grecaptcha-badge {
    bottom: -500px!important;
  }


  /*
  *
  * HOME PAGE 
  *
  * * * * * * * * * * * */

  .front-page .row.five-col div {
        text-align: center;
        margin-left: 2%;
  }

  .front-page .row.five-col > div:nth-child(1) {
    text-align: left;
    margin-left: 0;
  }

   .front-page .row.five-col > div:nth-child(1) h2,
   .contact-page h2 {
    width: 55%;
  }

  .front-page .row.five-col p {
    width: 85%;
    margin: auto;
  }

  .front-page .row.five-col a {
    text-decoration: none;
  }

  .step {
    height: 18vw;
    width: 18vw;
    max-height: 205px;
    max-width: 205px;
    margin-bottom: 30px;
    font-size: 60px;
    font-family: Untitled-Light, sans-serif;
    background-image: url('../myart/assets/img/circle_dashed.svg');
    background-size: 90%;
    background-position: center center;
    background-repeat: no-repeat;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

  }


  .front-page .row.five-col > div:nth-child(1) .step {
    background-image: none;
  }

/*  .front-page .row.five-col {
    margin-bottom: 
  }*/

  .front-page .row.two-col > div:nth-child(1) {
    width:78%;
  }
  .front-page .row.two-col .single-col {
    width: 18%;
    margin-left: 2%;
}
  .front-page .row.two-col .single-col h2 {
    margin-left: 25%;
  }

  .front-page .row.two-col .single-col {
    text-align: right;
  }


  .front-page .row.five-col a:hover .step {
      background-image: url('../myart/assets/img/circle_solid.svg');
  }

    .front-page .row.five-col div:nth-child(1):hover .step {
      background-image: none;
  }

    .front-page .row.five-col a:hover h3 {
     font-family: Untitled-Bold, sans-serif;
  }



  /*
  *
  * Galleries
  *
  * * * * * * * * * * * */


  .blocks.row {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }

  .blocks .img_wrapper,
  .blocks .sign-up {
    height: 430px;
    width: 100%;
    background-size: cover;
    background-position: center center;
    margin-bottom: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
 }

.blocks a, .blocks h3, .blocks p {
    text-decoration: none;
    font-size: 18px;
    line-height: 1.8;
    margin: 0;
  }

  .blocks h3 {
    font-size: 26px;
    line-height: 1.5;
    margin-bottom: 8px;
  }

  .blocks a {
    margin-bottom: 35px;
  }

  .blocks a:hover .img_hover {
    display: block;
  }

   .img_hover {
    display: none;
    height: 200px;
    width: 200px;
    background-image: url('../myart/assets/img/btn_showme.svg');
    background-position: center left;
    background-repeat: no-repeat;
    background-size: 200%;
    cursor: pointer;
}

.galleries .img_hover {
    background-image: url('../myart/assets/img/btn_takeme.svg');
}

.img_hover:active {
    background-position: center right;
}



  .blocks a:nth-child(6n+1) {
  width:38%;
}

  .blocks a:nth-child(6n+2) {
  width:58%;
}

  .blocks a:nth-child(6n+3) {
  width:58%;
}

  .blocks a:nth-child(6n+4) {
  width:38%;
}

  .blocks a:nth-child(6n+5) {
  width:38%;
  margin-left: 20%;
}

 .blocks a:nth-child(6n+6) {
  width:38%;
}

.blocks .sign-up {
  width:38%;
  cursor: pointer;
  position: relative;
}

.blocks .sign-up-block {
    width: 200px;
    height: 200px;
    background-position: center left;
    background-repeat: no-repeat;
    background-size: 200%;
    cursor: pointer;
    position: absolute;
    z-index: 9;
}

.blocks .sign-up-block:hover {
    background-position: center right;
}

.blocks .sign-up-form {
    display: none;
    background: black;
    height: 100%;
    width: 100%;
     position: absolute;
    z-index: 10;
}




  /*
  *
  * Stories
  *
  * * * * * * * * * * * */

    .story-banner {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 50vh;
    max-height: 900px;
  }

  .story-image {
    margin-left: 20%;
    /*width: 80%;*/
    max-height: 700px;
  }

 .story-page aside {
    width:18%;
  }

   .story-page article {
    width:80%;
    margin-left: 2%;
  }

  .post_nav a {
    display: block;
    text-decoration: none;
    font-size: 26px;
    line-height: 45px;
  }

  .post_nav a:hover .btn_arrow {
    background-position: center right;
  }

  .post_nav .arrow-left {

  }


  .btn_arrow {
    display: inline-block;
    height: 26px;
    width: 26px;
    background-image: url('../myart/assets/img/btn_arrow.svg');
    background-position: center left;
    background-repeat: no-repeat;
    background-size: 200%;
    cursor: pointer;
    vertical-align: -4px;
    margin-right: 10px;
  }

  .btn_arrow:hover {
    background-position: center right;
  }



  /*
  *
  * Contact Page
  *
  * * * * * * * * * * * */

    .small-font {
      font-size: 18px;
      line-height: 1.4;
    }

    .large-font {
      font-size: 26px;
    line-height: 45px;
    }

    .contact-link a {
          text-decoration: none;
    }

    .contact-link a {
        width: auto;
        display: inline-block;
        padding-bottom: 20px;
        border-bottom: 2px solid black;
        margin-bottom: 40px;
    }

  .contact-page .avanti_logo {
    text-align: right;
    margin-bottom: 60px;
  }

  .contact-page .avanti_logo svg {
    max-width: 435px;
    width: 100%;
  }

  .contact-page article {
    margin-bottom: 55px;
  }

  .contact-page p {
    width: 80%;
  }

  .link-columns {
    width: 100%;

  }

  .link-columns div {
    width: 18%;
    margin-left: 2%;
  }

  .link-columns div:nth-child(1) {
    margin-left: 0;
  }

  .link-columns div:nth-child(2) {
   width: 58%;
  }

  .link-columns div:nth-child(3) {
    width: 20%;
  }

   .link-columns div .contact-link {
    width: 30%;
    display: inline-block;
  }



    /*
  *
  * How Does it work
  *
  * * * * * * * * * * * */

  .steps.row,
  .steps a.row {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

  }

  .steps.row .step,
  .steps a.row .step {
    width:25%;
    margin-bottom: 0px;
  }

  .steps.row .step_title,
  .steps a.row .step_title {
    width:25%;
  }

  .steps.row .step_title h3,
  .steps a.row .step_title h3 {
    text-transform: uppercase;
    text-align: center;
    width: 65%;
    margin: auto;
  }

  .steps.row .step_words,
  .steps a.row .step_words {
    width:50%;
  }

  .steps.row .step_words p,
    .steps a.row .step_words p {
     font-size: 18px;
      line-height: 1.6;
  }

  .steps a.row  {
    text-decoration: none;
  }
  
  .steps a.row:hover .step {
      background-image: url('../myart/assets/img/circle_solid.svg');
  }

    .steps a.row:hover h3 {
     font-family: Untitled-Bold, sans-serif;
  }

  .how-does-it-work-page aside h2 {
    width: 55%;
  }

  .avanti_bg .container p {
    width: 55%;
  }

    .avanti_bg .container svg {
    width: 40%;
    margin-top: 10px;
  }

  .FAQ_header {
    position: absolute;
    margin-top: -240px;
}



  /*
  *
  * FAQs
  *
  * * * * * * * * * * * */

  .faqs article h2, 
  .faqs article h3, 
  .faqs article h4, 
  .faqs article h5 {
    margin: 30px 0;
  }

  .faqs article h2:first-child, 
  .faqs article h3:first-child, 
  .faqs article h4:first-child, 
  .faqs article h5:first-child {
     margin-top:0;
  }

  .faqs p {
    font-size: 18px;
    line-height: 2;
    margin: 0 0 18px 0;

  }



  /*
  *
  * Loan Calculator
  *
  * * * * * * * * * * * */

  .loan_calculator, .application {
    background-color: black;
    color: white!important;
    padding: 60px 0;
  }

.loan_intro.row {
-webkit-box-pack: left;
    -ms-flex-pack: left;
        justify-content: left;
}

.loan_intro h2 {
  width:18%;
}

.loan_intro p {
  width: 58%;
  margin-left: 2%;
}

.loan_out p {
  width: 80%;
  margin-right: 2%;
}

.loan_out h2 {
  width:18%;
  text-align: right;
}

.loan_out a {

  color: white;
}



div#repayment_amount {
   margin-left: 2%;
  width: 75%;
  max-width: 75%;
  border-bottom: 2px solid white;
  padding: 0 23px 30px 23px;
  display: inline-block;

   font-size: 26px;
    line-height: 45px;
}


#payments {
  font-family: Untitled-Bold;
}






  /*
  *
  * ABOUT US
  *
  * * * * * * * * * * * */


 
  .statistics .stat {
    border-top: 2px solid black;
    padding: 20px 0;
  }

    .statistics .stat:nth-child(1) {
    border-top: none;

  }


  .statistics .stat div:nth-child(1) {
    width: 18%;
    font-size: 64px;
    font-family: Untitled-Light;
  }

  .statistics .stat div:nth-child(2) {
    width: 78%;
    margin-left: 2%;
      font-size: 26px;
    line-height: 40px;
    margin: 0 0 21px 0;
  }



  .buy_now {
  width: 25%; /*30px = 2.5% of 1200*/
  margin-left: 52%;
  position: relative;
  display: block;
  margin-bottom: 30px;
}

.buy_now {
   height: 18vw;
  width: 18vw;
  max-height: 205px;
  max-width: 205px;
    background-image: url('../myart/assets/img/btn_buy.svg');
  background-position: center left;
  background-repeat: no-repeat;
  background-size: 200%;
  cursor: pointer;
}

.buy_now:hover {
  background-position: center right;
}


.btn_signup_gallery {

}




  /*
  *
  * APPLY NOW
  *
  * * * * * * * * * * * */

#terms_popup {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left:0;
  background-color: black;
  overflow: scroll;
  display: none;
  z-index: 99999;
}

#terms {
  border-bottom: 2px solid currentColor;
  cursor: pointer;
}

#terms_popup .container {
  margin-top: 80px;
}

#popup_close {
  position: fixed;
  top:30px;
  right: 30px;
  width: 40px;
  cursor: pointer;
}

#terms_popup p {
    font-size: 18px;
    line-height: 1.4;
    margin: 0 0 8px 0;
}

#terms_popup ol {
  list-style: lower-alpha;
  margin: 20px;
}

#terms_popup ol li,
#terms_popup ul li  {
  margin-bottom: 10px;
}

#terms_popup ul {
  margin: 20px;
  
}




  /*
  *
  * FORMS
  *
  * * * * * * * * * * * */


  .black-form .section_no {
    width:18%;
    font-size: 26px;
  }

  .black-form h2 {
    width:78%;
    margin-left: 2%;
    margin-bottom: 60px;
  }

  .divider-dash {
  height: 5px;
  width: 104%;
  margin: 60px -2%;
  background-image: url('../myart/assets/img/bg-dash.svg');
  background-repeat: repeat-x;
}

.divider-lean {
  height: 15px;
  width: 104%;
  margin: 60px -2%;
  background-image: url('../myart/assets/img/bg-lean.svg');
  background-repeat: repeat-x;
}

.divider-wavy {
  height: 22px;
  width: 104%;
  margin: 60px -2%;
  background-image: url('../myart/assets/img/bg-wavy.svg');
  background-repeat: repeat-x;
}

.divider-solid {
   height: 6px;
  width: 104%;
  margin: 60px -2%;
  background: white;
}




form.black-form {
  width: 100%;
  -webkit-box-pack: left;
      -ms-flex-pack: left;
          justify-content: left;
}

*:focus {
    outline: 0;
}

form.black-form .wpcf7-form-control-wrap,
form.black-form fieldset {
    position: relative;
    display: inline-block;
    width: 80%;
}

form.black-form input, 
form.black-form select {
   margin-left: 2%;
    color: white;
    height: 60px;
    font-size: 18px;
    border-radius: 32px;
    background-color: transparent;
    border: 2px solid white;
    padding: 0 23px;
    width: 100%;
    margin-bottom: 30px;
    max-width: 610px;
}

form.black-form input:focus {
   border: 7px solid white!important;
   width: calc(100% - 10px);
   max-width: 600px;
   height: 50px;
}

form.black-form select {
  max-width: 660px;
}

form.black-form fieldset.double input[type="text"] {
  max-width: 265px;
}

form.black-form input[type="checkbox"] {
  height: 20px;
  width: 20px;
  margin-bottom: 0;
}

form.black-form .wpcf7-form-control-wrap.client-consent {
    width: 50px;
    margin-left: 0;
    margin-right: 25px;
    display: inline-block;
}

form.black-form label.acceptance {
  width: auto;
  font-size: 26px;
}


.loan_calculator form.black-form input {
   max-width: 440px;
}



 #application-form div.wpcf7-response-output {
  margin-bottom:40px;
}



form.black-form fieldset.triple span {
    width:31%;
    margin-left: 2%;
    max-width: 204px;
}
form.black-form fieldset.double span {
    width:45%;
    margin-left: 2%;
    max-width: 317px;
}

form.black-form label,
form.black-form .label {
  display: inline-block;
  width:18%;
  text-align: right;

   height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}


span.wpcf7-list-item {
  display: block!important;
}


.select-css {
    display: inline-block;
   font-size: 18px;
   text-transform: uppercase;
    color: #fff;
    height: 60px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border: 1px solid #fff;
    border-radius: 32px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: rgba(0,0,0,0);
    background-image: url('../myart/assets/img/icon_select.svg');
    background-repeat: no-repeat, repeat;
    background-position: right 1.2em top 50%, 0 0;
    background-size: .65em auto, 100%;
    cursor: pointer;
}


.select-css::-ms-expand {
    display: none;
}

.select-css option {
    font-weight:normal;
}

.application-btn {
    height: 18vw;
    width: 18vw;
    max-height: 205px;
    max-width: 205px;
    background-image: url('../myart/assets/img/btn_submit.svg');
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 200%;
    cursor: pointer;
    border:none;
    margin: 0 0 0 auto;
}

.application-btn:hover {
  background-position: center left;
}


.black-form input:-ms-input-placeholder { 
  color: white;
  font-size: 18px;
}
.black-form input::-ms-input-placeholder { 
  color: white;
  font-size: 18px;
}
.black-form input::-webkit-input-placeholder { 
  color: white;
  font-size: 18px;
}
.black-form input::-moz-placeholder { 
  color: white;
  font-size: 18px;
}
.black-form input::placeholder { 
  color: white;
  font-size: 18px;
}
.black-form textarea:-ms-input-placeholder { 
  color: white;
  font-size: 18px;
}
.black-form textarea::-ms-input-placeholder { 
  color: white;
  font-size: 18px;
}
.black-form textarea::-webkit-input-placeholder { 
  color: white;
  font-size: 18px;
}
.black-form textarea::-moz-placeholder { 
  color: white;
  font-size: 18px;
}
.black-form textarea::placeholder { 
 color: white;
 font-size: 18px;
}

.app_byline {
  width: 60%;
}

.app_byline img {
  width: 100%;
  height: auto;
  max-width: 435px;
  margin-top: 30px;
}


/* 
*
*  Story & Gallery Sign-up form
*
* * * * * * * * * * */



#sign-up-black-form {
  margin: 30px;
  width: auto;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#sign-up-black-form .wpcf7-form-control-wrap {
    width: 100%;
}

#sign-up-black-form input, 
#sign-up-black-form select {
    margin-left: 0; 
    color: white;
    height: 60px;
    font-size: 18px;
    border-radius: 32px;
    background-color: transparent;
    border: 2px solid white;
    padding: 0 23px;
    width: calc(100% - 50px);
    margin-bottom: 25px;
}

#sign-up-black-form .form-email {
    width: calc(100% - 83px);
}

#sign-up-black-form .form-email input {
  width: calc(100% - 50px);
}

#sign-up-black-form input:focus, 
#sign-up-black-form select:focus {
    height: 50px;
}

.sign-up-form button {
    height: 62px;
    width: 62px;
    border-radius: 50%;
    padding: 22px;
    border: 2px solid white;
    background-color: black;
    color: white;
    font-size: 18px;
    cursor: pointer;
    margin-left: 20px;
}

.sign-up-form button::after {
    font-family: Untitled-Regular, sans-serif;
    font-size: 18px;
    content: '\00a0';
    background-image: url(../myart/assets/img/btn_go_white.svg);
    width: 26px;
    height: 26px;
    position: absolute;
    background-repeat: no-repeat;
    margin: -7px 0 0 -13px;
}

.sign-up-form div.wpcf7-validation-errors, 
.sign-up-form div.wpcf7-acceptance-missing {
  position: static;
  font-size: 23px;
  margin-top: 20px;
}

.blocks .sign-up-form {
    height: auto;
    position: static;
    height: 430px;
}



.social_wrap {
  margin-top: auto;
}

.sign-up-form .follow_us, 
.sign-up-form .social_links {
    color: white;
    width: calc(45% - 60px);
    display: inline-block;
    margin-top: auto;
    text-align: right;
    line-height: 30px;
    margin: 30px;
}

.sign-up-form .follow_us {
  text-align: left;
}

.sign-up-form .social_links a {
  width: auto;
  margin: 0;
  display: block;
    color: white;
    text-decoration: none;
    line-height: 30px;
    letter-spacing: 0.5px;
}

.sign-up-form .social_links a:hover {
  text-decoration: underline;
}

.sign-up-form .ajax-loader {
  display: none;
}

div.wpcf7-validation-errors, 
div.wpcf7-acceptance-missing {
  position: static;
  font-size: 26px;
  padding: 0;
  margin: 0;
}

.sign-up-form .wpcf7-response-output {
  color: white;
}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
* * * * * * * * * * * MEDIA QUERIES * * * * * * * * * * * 
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * */




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


  .hero_slider ul li a, 
  .hero_slider ul li h2,
  .slider_title h3,
  h2, h3, h4, p,
  .blocks h3,
  div#repayment_amount,
  .post_nav a  {
    font-size: 23px;
    line-height: 40px;
  }

  aside p,
  .steps.row .step_words p, 
  .steps a.row .step_words p {
    font-size: 16px;
  }

  div#repayment_amount {
    min-height: 20px;
  }

  .step {
    font-size: 50px;
  }

    .story-image {
    width: 80%;
    max-height: fit-content;
  }


}



@media only screen and (max-width: 1024px) {

  .container {
    width: 92%;
  }

  .hero_slider ul li a, 
  .hero_slider ul li h2,
  .slider_title div {
    margin-left: 0;
    }

    .hero_slider ul li a, 
  .hero_slider ul li h2,
  .slider_title h3,
  h2, h3, h4, p,
  .blocks h3,
  div#repayment_amount  {
    font-size: 20px;
    line-height: 36px;
  }

  div#repayment_amount {
    min-height: 20px;
    line-height: 1.2;
    padding-bottom: 40px;
    display: block;
  }

  .divider {
    width: 92%;
  }

  div.wpcf7 .screen-reader-response {
    position: static;
  }

  .row.five-col {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
  } 

  .row.five-col > div {
    width: 100%;
  }

  .front-page .row.five-col > div:nth-child(1) .step {
    display: none;
  }

  .front-page .row.five-col > div,
  .front-page .row.five-col a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row;
            flex-flow: row;
    width: 100%;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-left: 0;
  }

  .front-page .row.five-col > div > div:nth-child(2),
  .front-page .row.five-col > div > a > div:nth-child(2) {
    width: 70%
  }

  .step {
    height: 25vw;
    width: 25vw;
    margin-bottom: 0;
  }

  .front-page .row.five-col > div:nth-child(1) {
    margin-bottom: 20px;
  }

  .front-page .row.five-col > div:nth-child(1) h2 {
    width: 100%;
  }

  .sign-up-form .follow_us, .sign-up-form .social_links {
    width: auto;
  }

  .statistics .stat div:nth-child(2) {
    width: 70%;
    margin-left: 2%;
    font-size: 23px;
    line-height: 40px;
    }


    .how-does-it-work-page .container.row {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
    }

    aside, article, 
    .story-page article,
    .story-page aside {
      width: 100%;
      margin-left: 0;
    }

    aside {
      margin-bottom: 50px;
    }

      .story-page h2 {
        margin: 0 0 24px 0;
    }


    .front-page .row.two-col .single-col,
    .front-page .row.two-col > div:nth-child(1),
    .front-page .row.two-col .single-col h2 {
      width: 100%;
      text-align: left;
      margin-left: 0%;
    }

      
     .story-image {
        width: 100%;
        margin-left: 0;
      }



    .container.row.two-col {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: reverse;
          -ms-flex-flow: column-reverse;
              flex-flow: column-reverse;
    }

    .arrow {
      margin-top: 15px;
      margin-bottom: 24px;
      -webkit-transform: rotate(90deg);
          -ms-transform: rotate(90deg);
              transform: rotate(90deg);
    }



    .front-page .arrow.hor-flip {
       -webkit-transform: rotate(90deg);
           -ms-transform: rotate(90deg);
               transform: rotate(90deg);
    }

    .loan_out .arrow.hor-flip,
    .loan_intro.row .arrow {
      -webkit-transform: rotate(90deg);
          -ms-transform: rotate(90deg);
              transform: rotate(90deg);
    }



    .FAQ_header {
      position: static;
      margin: 0 0 25px 0;
    }

    .avanti_bg .container p {
      width: 100%;
    }

    .avanti_bg .container svg {
      min-width: 300px;
    }

    .avanti_bg .container svg.arrow {
      min-width: 22px;
      height: 22px;
      width: auto;
    }

    .loan_intro h2,
    .loan_intro p,
    .loan_out h2,
    .loan_out p {
      width: 100%;
      margin: 0 0 25px;
      text-align: left;
    }

    .loan_out.row {
      -webkit-box-orient: vertical;
      -webkit-box-direction: reverse;
          -ms-flex-flow: column-reverse;
              flex-flow: column-reverse;
    }

    div#repayment_amount {
      padding: 0 0 20px 0;
    }


    .link-columns.row {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-flow: column;
              flex-flow: column;
    }

    .link-columns div {
      margin-left: 0;
    }

    .link-columns > div:nth-child(3) {
      display: none;
    }

    .link-columns div:nth-child(2) {
      width: 100%;

    }

    .link-columns div .contact-link {
      width: 100%;
      margin-left: 0;
    }

    .contact-page .avanti_logo {
      display: none;
    }


    div.wpcf7 {
      width: 100%;
    }

    .black-form h2 {
    width: 100%;
    margin-left: 0;
    }

    .black-form.row {
       -webkit-box-orient: vertical;
       -webkit-box-direction: normal;
           -ms-flex-flow: column;
               flex-flow: column;
    }

    form.black-form label, 
    form.black-form .label {
      text-align: left;
      display: block;
      width: 100%;
      max-width: 100%;
      height: auto;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      margin-bottom: 25px;
    }

    .loan_calculator form.black-form input,
    form.black-form input, form.black-form select {
      max-width: 100%;
      margin-left: 0;
      width: calc(100% - 50px);
    }

    form.black-form input:focus {
        border: 7px solid white!important;
        width: calc(100% - 60px)!important;
    }

    form.black-form select {
      width: 100%;
    }

    form.black-form .wpcf7-form-control-wrap, 
    form.black-form fieldset,
    div#repayment_amount {
      display: block;
      /*width: calc(100% - 50px);*/
      width: 100%;
      max-width: 100%;
      margin-left: 0;
    }


    form.black-form fieldset.triple span,
    form.black-form fieldset.double span {
      position: static;
      display: inline-block;
      width: 31%;
      margin-left: 0;
      margin-right: 1%;
    }

    form.black-form span.wpcf7-list-item {
      margin: 0;
    }

    form.black-form .wpcf7-form-control-wrap.client-consent {
         margin-right: 0px; 

    }

    form.black-form fieldset.double span {

        width: 48%;
         max-width: 48%; 
         margin-right: 1%;
    }

    .application-btn {
        height: 160px;
        width: 160px;
        margin: 0 0 30px 0;
    }


    #sign-up-black-form .form-email {
    width: 100%;
    }

    .sign-up-form button {
    margin-left: 0;
    }


    #menu_open:hover {
      font-family: Untitled-Regular, sans-serif;
    }


}

@media only screen and (max-width: 768px) {

    .wpcf7-form-control-wrap.form-name {
      width: calc(100% - 20px);
      max-width: 100%;
      display: inline-block;
    }

    .wpcf7-form-control-wrap.form-email {
       width: calc(100% - 70px);
      max-width: 100%;
      display: inline-block;
    }

    .steps.row .step_words, 
    .steps a.row .step_words {
     width: 100%;
    }

    .steps.row .step_title, 
    .steps a.row .step_title {
        width: 60vw;
        text-align: left;
    }

    .hero_slider ul li a, 
    .hero_slider ul li h2 {
        width: 80%;
        margin-top: 50px;
    }

    .blocks.row {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-flow: column;
                flex-flow: column;
    }

    .blocks a, .blocks .sign-up {
      width: 100%!important;
      margin-left: 0!important;
      margin-right: 0!important;
    }

    .blocks .img_wrapper, .blocks .sign-up {
      height: 70vw;
      min-height: 420px;
    }

    .buy_now {
      height: 50vw;
      width: 50vw;
      max-height: 205px;
      max-width: 205px;
      margin: 0 0 0 auto;
    }

    .contact-page p {
        width: 100%;
    }



  }


  @media only screen and (max-width: 650px) {

    aside {
    margin-bottom: 24px;
    }

    .step {
      font-size: 9vw;
    }

    .step {
        width: 30vw!important;
        height: 30vw!important;
    }

    .steps.row, .steps a.row {
        -ms-flex-pack: distribute;
            justify-content: space-around;
    }

    .steps.row .step_words, .steps a.row .step_words {
      margin-top: 24px;
      margin-bottom: 24px;
    }

    .front-page .row.five-col > div, .front-page .row.five-col a {
  
        margin-bottom: 24px;
    }

    .hero_slider ul li {
    height: 60vh;
    min-height: 40vw;
      }

      .slider_title div {
          height: 60vh;
          min-height: 40vw;
         
      }

      .statistics .stat div:nth-child(2) {
        width: 100%;
        margin-left: 0;
        font-size: 23px;
        line-height: 40px;
    }

    form.black-form label.acceptance {
        font-size: 20px;
    }

    .app_byline {
        width: 100%;
    }
    
    div#repayment_amount {
      padding-bottom: 20px;
    }



  }


  @media only screen and (max-width: 375px) {

    section {
      margin-bottom: 48px;
    }

    .front-page .row.five-col div {
         margin-left: 0; 
    }

     .step {
        width: 40vw!important;
        height: 40vw!important;
    }

    .step {
      font-size: 12vw;
    }

    .steps.row .step_title, 
    .steps a.row .step_title {
        width: 45vw;
    }

    .divider {
        margin: 0 auto 48px
      }

      form.black-form input, form.black-form select {
        font-size: 16px;
      }



  }



@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

  #application-form {
    display: block;
  }

  #wpcf7-f395-01 {
    width:100%;
  }

  form.black-form label, form.black-form .label {
    display: block;
    text-align: left;
    width: 100%;
  }

  form.black-form fieldset.double span, form.black-form fieldset.triple span {
    width:100%;
  }
  

}