@font-face {
  font-family: 'SVN-Gotham';
  src: url('assets/fonts/SVN-GothamBook.woff2') format('woff2'),
      url('assets/fonts/SVN-GothamBook.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SVN-Gotham';
  src: url('assets/fonts/SVN-GothamLightItalic.woff2') format('woff2'),
      url('assets/fonts/SVN-GothamLightItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SVN-Gotham';
  src: url('assets/fonts/SVN-GothamItalic.woff2') format('woff2'),
      url('assets/fonts/SVN-GothamItalic.woff') format('woff');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SVN-Gotham';
  src: url('assets/fonts/SVN-GothamLight.woff2') format('woff2'),
      url('assets/fonts/SVN-GothamLight.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SVN-Gotham Ultra';
  src: url('assets/fonts/SVN-GothamUltraItalic.woff2') format('woff2'),
      url('assets/fonts/SVN-GothamUltraItalic.woff') format('woff');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SVN-Gotham';
  src: url('assets/fonts/SVN-GothamThinItalic.woff2') format('woff2'),
      url('assets/fonts/SVN-GothamThinItalic.woff') format('woff');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SVN-Gotham';
  src: url('assets/fonts/SVN-Gotham.woff2') format('woff2'),
      url('assets/fonts/SVN-Gotham.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SVN-Gotham';
  src: url('assets/fonts/SVN-GothamThin.woff2') format('woff2'),
      url('assets/fonts/SVN-GothamThin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SVN-Gotham Ultra';
  src: url('assets/fonts/SVN-GothamUltra.woff2') format('woff2'),
      url('assets/fonts/SVN-GothamUltra.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SVN-Gotham XLight';
  src: url('assets/fonts/SVN-GothamXLight.woff2') format('woff2'),
      url('assets/fonts/SVN-GothamXLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SVN-Gotham XLight';
  src: url('assets/fonts/SVN-GothamXLightItalic.woff2') format('woff2'),
      url('assets/fonts/SVN-GothamXLightItalic.woff') format('woff');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SVN-Gotham';
  src: url('assets/fonts/SVN-GothamBlackItalic.woff2') format('woff2'),
      url('assets/fonts/SVN-GothamBlackItalic.woff') format('woff');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SVN-Gotham';
  src: url('assets/fonts/SVN-GothamBoldItalic.woff2') format('woff2'),
      url('assets/fonts/SVN-GothamBoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SVN-Gotham';
  src: url('assets/fonts/SVN-GothamBookItalic.woff2') format('woff2'),
      url('assets/fonts/SVN-GothamBookItalic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SVN-Gotham';
  src: url('assets/fonts/SVN-GothamBlack.woff2') format('woff2'),
      url('assets/fonts/SVN-GothamBlack.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SVN-Gotham';
  src: url('assets/fonts/SVN-GothamBold.woff2') format('woff2'),
      url('assets/fonts/SVN-GothamBold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
html.sr {
  font-size: 1.041666666vw;
}
.sr .container
{
  max-width: 80rem;
  width: 80%;
}
body
{
  padding:0;
  margin: 0;
  font-family: 'SVN-Gotham';
  overflow-x: hidden;
}
body *
{
font-family: 'SVN-Gotham';
}
.logo img
{
  width: 24rem;
  height:auto;
}
.logo 
{
  text-align:center;
  display: flex;
  flex-direction:column;
  justify-content: center;
  position:relative;
  max-width: max-content;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  align-items: flex-start;
}
.logo .slogan img
{width: 28rem;}

.header
{
  padding: 0;
  width: 50%;
}
.sr body
{
  background-image:url('assets/images/bg.png');
  background-size:cover;
  background-repeat:repeat;
  /* background:#e9ebe6; */
  position: relative;
  background-position-y: 753px;
}

.page-title
{
  font-size:2rem;
  text-align:center;
  margin:1rem 0;
  font-weight:600;
  color:#186632;
  line-height:1.4;
}
.page-title img
{
    width: 82%;
    height:auto;
}
.image-frame
{
  max-width: 30rem;
  width: 100%;
  margin:0 auto;
  text-align:center;
  background:#fff;
  padding: 1.75rem;
  /* padding-bottom: 1rem; */
  border-radius: 1.875rem;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  margin-bottom: 2rem;
}
.image-frame__preview
{
  position:relative;
  display:grid;
  /* pointer-events: none; */
  border-radius: 1.5rem;
  overflow: hidden;
  z-index: 222;
}
.image-frame__preview img
{
  width:100%;
  height:auto;
  position:relative;
  z-index:2;
}
.image-frame__preview .image-preview,
.image-frame__preview .cropper-bg
{
    position:absolute;
    left:0;
    top:0;
    height: 100%;
    max-height: 100%;
}
.image-frame__preview:before
{
  content:'';
  position:absolute;
  width:100%;
  height:100%;
  background-image:url(assets/images/trans-pattern.jpg);
  background-size:cover;
  background-repeat:no-repeat;
  z-index:0;
}
body .download-btn
{
  background:#186632;
  padding: .5rem 1.5rem .5rem 1rem;
  color: #fff;
  text-transform: uppercase;
  display: flex;
  max-width:max-content;
  position:relative;
  align-items: center;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
.download-btn img
{
  filter:brightness(0) invert(1);
  width:20px;
  height: auto;
  margin-right: 6px;
}
@keyframes bounce-arrow 
{
  0%{
    transform: translateY(0);
  }
  50% {
    transform: translateY(.215rem);
  }
  100% {
    transform: translateY(0);
  }
}
.download-btn:focus img
{
  animation: bounce-arrow .75s 3 ease-in-out;
}


@-webkit-keyframes dots-loading {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes dots-loading {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes stuckMoveDown {
  0% { transform:translateY(-100%) }
  100%{transform:translateY(0) }
  }
/*--------------------------------------------------------------
>>> Loading
--------------------------------------------------------------*/
.loading,
.loading .overlay
{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1003;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading .overlay
{
z-index: -1;
}
.loading
{
display: none;
}
.loading.show
{
display: flex;
}
.overlay
{
opacity: .2;
background-color: #000;
}
.loader,
.loader:before,
.loader:after {
border-radius: 50%;
width: 2.5em;
height: 2.5em;
animation-fill-mode: both;
animation: dots-loading 1.8s infinite ease-in-out;
}
.loader {
color: #ffffff;
font-size: .625rem;
position: relative;
text-indent: -9999em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
content: '';
position: absolute;
top: 0;
}
.loader:before {
left: -3.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 3.5em;
}


.featured-img
{position:absolute;width: 17rem;padding:.5rem;border-radius:.25rem;text-align:center;display:inline-block;list-style:none;top: 5rem;left: 5rem;display:grid;cursor:pointer;}
.featured-img img
{width:100%;border-radius: .25rem;}
.featured-img:nth-child(1)
{
  left:7.75rem;
}
.featured-img:nth-child(n+2)
{
  top:calc( 5rem + 17rem + 2rem);
 
}
.featured-img:nth-child(2)
{
   width:22rem;
}
.featured-img .abs-img
{
  position:absolute;
  left:65%;
  width:11.875rem;
  top:78%;
  z-index:-1;
}
.featured-img:nth-child(2n+3)
{
  left:auto;
  right:5rem;
}
.featured-img:nth-child(3)
{
  right:3rem;
  transform:translateY(-2rem);
}
.featured-img:nth-child(3) .abs-img
{
  left:auto;
  right:92%;
  width:11.875rem;
  top:auto;
  bottom:0;
  z-index:-1;
}
.featured-img:nth-child(4)
{
   width:14rem;
}
.featured-img:nth-child(n+4)
{
  top:calc( 5rem + 17rem + 17rem + 1rem);
}
.featured-img:nth-child(5)
{
   width:26rem;

}
body .file-field span,
#form_save,
.image-frame .btn.fb-btn,
body .download-btn
{
  font-size:.875rem;
    font-weight:600;
}
body .file-field input[type=file]
{
  font-size:1.125rem;
}
.total {
  text-align: center;
  margin: -1rem 0 1rem;
  font-size: .9rem;
  color: #000;
}
.total span,
.total b
{
  color:#2CA23A;
  font-weight: 600;
}
.langs
{
  display:flex;
  justify-content:center;
  margin: 0 0 1rem;
}
.langs a
{
  border:thin solid #b9b9b9;
  padding: .125rem 1.5rem .25rem;
  padding-bottom:.35rem;
  color:#b9b9b9;
  font-size:1rem;
  font-weight:500;
  line-height: 1.5;
  transition:all .25s;
  border-radius:1.5rem;
}
.langs a:not(:first-child)
{
  margin-left:1rem;
}
.langs a.active,
.langs a:hover,
.langs a:focus
{
  border-color:#5ea956;
  color:#5ea956;
}
.wrapper
{
  display:flex;
  justify-content: space-between;
  padding: 1rem 0;
  align-items: center;
}
.logoimg
{
  margin-bottom:2rem;
}
.logoimg img
{
  width:8.5rem;
}
.cta-btn
{
  border:thin solid #5ea956;
  border-radius:1.5rem;
  color:#5ea956;
  transition:all .325s;
  padding:.5rem 1.5rem .6rem;
  margin-top:1.5rem;
}
.cta-btn:hover
{
  color:#fff;
  background:#5ea956;
}
.cta-btn:hover img
{
  filter:invert(1) brightness(11);
}
.cta-btn img
{
  height:.75rem;
  width:auto;
  margin-left:.25rem;
}
.form-bottom
{
  display:flex;
  align-items:center;
  justify-content: space-between;
}
.file-field .file-path-wrapper
{
  display:none;
}
.wrapper .form-bottom .btn,
.download-btn,
a[href="#frame"]
{
  font-weight:600;
  border-radius:1.5rem;
  background: #5ea956;
  height:2.5rem;
  min-height:unset;
  display: flex;
  align-items: center;
  box-shadow:none;
}
a[href="#frame"]
{
    
    background: #1b27ab;
    border-radius: 1.5rem;
    padding: .875rem 1.5rem;
    box-sizing: border-box;
    font-weight: 500;
    line-height: 1 !important;
    height: auto !important;
    max-width:max-content;
   text-transform:uppercase;
    color:#fff;
    margin:1rem auto 2rem;
}
.wrapper .form-bottom .btn:hover,
.wrapper .form-bottom .btn:focus
{
  background:#46a83c;
}

.bg
{
  width: 100%;
  position: absolute;
  right:0;
  bottom:0;
  display: flex;
  align-items: self-end;
  justify-content: flex-end;
  z-index: -1;
}
.bg img
{
  width: 50%;
  height:auto;
}
body input[type=text]:not(.browser-default):focus:not([readonly])
{
  border-color:#46a83c;
      box-shadow: 0 1px 0 0 #46a83c;
      
}
body .input-field.col label
{
    left:0 !important;
    transform-origin: center !important;
}
body .input-field>label:not(.label-icon).active
{
     transform:translateY(-.25rem) scale(.8) !important;
}
body input[type=text]:not(.browser-default):focus:not([readonly])+label
{
  color:#46a83c;
    width:100%;
    display:block;
    transform:translateY(-.25rem) scale(.8) !important;
    transform-origin:center;
}
.image-frame__preview button
{
    position:absolute;
    width:2rem;
    height:2rem;
    right:.75rem;
    bottom:.75rem;
    background: #eee;
    z-index: 9999;
    border:thin solid #ddd;
    font-size:0;
    cursor:pointer;
    border-radius:.25rem;
    transition:all .25s;
}
.image-frame__preview button:hover,
.image-frame__preview button:focus
{
    background:#dcdcdc;
}
.image-frame__preview button:before
{
    content:'';
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width: 1rem;
    height: 1rem;
    background-image:url(assets/images/plus-svgrepo-com.svg);
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    
}
#zoomOut
{
     right:calc(2rem + .75rem + .5rem);
}
#zoomOut:before
{
      background-image:url(assets/images/minus-svgrepo-com.svg);
   
}
#moveRight
{
     right:calc(2rem + .75rem + .5rem + 2.5rem);
}
#moveRight:before
{
    width: 1.325rem;
    height: 1.325rem;
    background-image:url(assets/images/arr-next2.svg);
    
}
#moveLeft
{
    right:calc(2rem + .75rem + .5rem + 2.5rem + 2.5rem);
}
#moveLeft:before
{
    width: 1.325rem;
    height: 1.325rem;
    transform:translate(-50%,calc(-50% + .125rem)) rotate(180deg);
    background-image:url(assets/images/arr-next2.svg);
    transform-origin:center;
}

.total
{
    color:#fff;
    font-weight:500;
    font-size:1rem;
     text-shadow: 1px 1px 12px black, 0 0 1px black, 0 1px 1px black;
}
.form-bottom
{
    justify-content:center;
}
.total span
{
    font-size:1.75rem;
    color:#fff;
}
.wrapper .swiper
{
   min-width:calc(100% + 8rem);
   left: -4rem;
}
.swiper-wrapper .featured-img
{
    position:static;
    flex: none;
    transform: none;
    width: auto;
}

.swiper
{
    margin:0 0 1.5rem;
}
.swiper .featured-img
{
    box-shadow:none;
    background: #fff;
    padding: .25rem;
}
.image-frame .btn
{
    float:none !important;
    background: #60aa55;
    border-radius:1.5rem;
    padding:.875rem 1rem;
    box-sizing:border-box;
    font-weight:500;
    line-height: 1 !important;
    height:auto !important; 
}
.image-frame .btn:hover
{
     background: #519a46;
}
.image-frame .form-row *
{
    text-align:center;
}
.image-frame .file-field
{
    margin: 0rem 0 0;
}
a[href="#frame"]
{
    display:none;
}
.form-row .notes
{
  text-align: center;
  font-size: .7rem;
  margin-bottom: 1rem;
  margin-top: .75rem;
  color: #a91b1b;
  padding: 0 0px;
}
.form-bottom.step-2,
.form-bottom.step-3 + .form-row
{
    justify-content: space-between;
    display: flex;
    align-items: center;
}
.form-bottom.step-3 + .form-row
{
    margin-top:1rem;
    justify-content: space-around;
}
.form-bottom.step-2 #form_save
{
    display:block !important;
}
.form-bottom.step-2 + .form-row .download-btn
{
    display:none;
}
.form-bottom.step-3 + .form-row .fb-btn
{
    display:block !important;
     background:#1b27ab;
}
 #form_save
{
    display:flex;
    align-items:center;
    justify-content:center;
    background:#1b27ab;
}
.form-bottom.step-3 + .form-row .fb-btn:hover,
 #form_save:hover,
body a[href="#frame"]:hover
{
     background:#141d82;
}
 #form_save img
{
    width: 1.425rem;
    height: auto;
    margin-left: .5rem;
    position:relative;
    top: -.0625rem;
}
@media screen and (max-width: 1023px)
{
  html.sr {
      font-size: 3.7325vw;
    }
    .langs
    {
      margin: -.5rem 0 1rem;
    }
  .page-title
  {
    font-size:1rem;
    line-height:1.6;
    white-space:nowrap;
    text-align: center;
    margin: 0;
    width: 100%;
  }
  .logoimg img
  {
    width: 8rem;
  }
  .logo .slogan img
  {
    width: 95%;
  }
  .image-frame
  {
    margin-bottom: 2rem;
  }
  .image-frame .btn
  {
    font-size: 12px;
  }
  .swiper-wrapper .featured-img
  {
    position:static;
    min-width: calc((100% - 2rem)/4);
    flex: none;
    transform: none;
    /* width: 12rem; */
  }
  .featured-imgs
  {
    display:none;
  }
    .logo img
    {
        width: 50%;
    }
  .swiper
  {
    margin:0 0 1.5rem;
    min-width:100vw;
    left:calc(-.1*100vw/2)
  }
  .swiper .featured-img
  {
    box-shadow:none;
  }
  .header .container
  {
    display:flex;
    align-items: flex-end;
  }
  .header
  {
    width: 100%;
    padding: 0;
  }
  .image-frame__preview
  {
    max-width: 100%;
    margin:auto;
  }
  .slogan
  {
    width: 20rem;
  }
  .slogan img
  {
    max-width:100%;
  }
  .logo a
  {
    position:static;
  }
  .cta-btn
  {
    margin-bottom:2rem;
  }
  .wrapper
  {
    flex-wrap:wrap;
    padding: 1rem 0;
  }
  .logo
  {
    justify-content:center;
    align-items:center;
  }
  .bg img
  {
    width:90%;
  }
    .wrapper .swiper
    {
        min-width:100vw;
        left: calc(-.1* 100vw / 2);
        margin:1rem 0 1.5rem;
    }
    .sr .container
    {
        width:90%;
    }
    .page-title img
    {
        width: 90%;
    }
    body main
    {
        display:flex;
        flex-direction:column-reverse;
    }
    .total
    {
        text-shadow: 1px 1px 2px black, 0 0 1px black, 0 1px 1px black;
    }
    .total span
    {
        color:#19ef00;
    }
    a[href="#frame"]
    {
        display:block;
    }
}

@media screen and (max-width: 768px){
    .sr body {
        background-position-y: 850px !important;
        background-position-x: -377px !important;
    }
}
@media screen and (min-width: 1800px){
    .sr body {
        background-position-y: 940px !important;
    }
}