/************************************** Banner **************************************/

.bgImageContainer{
   background-image: url('../img/card/card-bg.jpg?v=3') !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}

                .video-banner-container{
                    height:100vh; position: relative; overflow: hidden; color:#FFFFFF;
                    background-color: #000000;
                }
                .video-overlay-text{ margin:0px auto; width:100%; max-width: 550px; padding:10px; font-size: 1em; line-height: 1.2em; text-transform: uppercase;}


              .video-overlay{
                z-index: 9999; 
                position: absolute; top:0px; left:0px; right:0px; height:100vh;

                background-color:rgba(0,0,0,0.6);
              }

              .video-overlay .logo{
                 max-width: 600px; width:100%: ;
                 margin:35vh auto 0px auto;
                background-image: url('../img/card/logo.png?v=11') !important;
                background-position: top center;
                background-size: 100%;
                background-repeat: no-repeat;
                height:0px; 
                padding-top:150px;

              }

              .video-overlay .video-overlay-link{position: absolute; top:0px; left:0px; right:0px; bottom:0px;}




/************************************** CARDS **************************************/


.content{ background-color:transparent !important; }

.map-container{ max-width: 700px; width:100%; margin: 0px auto; position: relative;}
.map-container img{width: 100%;}
.map-container .map-overlay-1{ position: absolute; top:0px; left:0px; right:0px; bottom:0px; z-index:1;
  background-image: url('../img/maps/1.png'); background-repeat: no-repeat; background-position: top left; background-size: 100%;
}
.map-container .map-overlay-2{ position: absolute; top:0px; left:0px; right:0px; bottom:0px;  z-index:2;
  background-image: url('../img/maps/2.png'); background-repeat: no-repeat; background-position: top left; background-size: 100%;
}
.map-container .map-overlay-3{ position: absolute; top:0px; left:0px; right:0px; bottom:0px; z-index:3;
  background-image: url('../img/maps/3.png'); background-repeat: no-repeat; background-position: top left; background-size: 100%;
}

.symbols{ background-image: url('../img/symbols.png');
	background-position: center;
	background-repeat: no-repeat;
	height:250px;
	background-size: auto 100%;
}

.btn:link, .btn:visited, .btn:active{color:#FFFFFF;}


input.btn{
  background-color: #f99d87; width:100% !important; border:1px solid #f99d87;
}



.full-btn{ color:#FFFFFF !important; border:1px solid #000000; background-color:#000000 !important; width: 100%; display: block; }
.error-text{color:#000000; font-size:1.7em; text-align:center; margin-top:20px;}
.card-error-text{ font-size: 1.3em; text-align: center;}

.choose-card{ width:100%; max-width:1200px; margin:0px auto; padding-top:40px; padding-bottom:40px; color:#000000;}
.card-item{ width:33.3%; display: inline-block; padding:10px; vertical-align: top;}
.card-item img{ width:100%;  border:2px solid transparent ;}
.card-item input{ opacity: 0;}
.card-item:hover .full-btn{ background-color:#f89380 !important; border:1px solid #f89380; }
.card-item.active img{ border:2px solid white;}
.card-item.active .btn{ background-color:#f89380 !important; border:1px solid #f89380; color:#FFFFFF !important;}


 .card-item{position: relative;}
 .card-item .card-video{ border:2px solid transparent; display: none; }
 .card-item .card-play{ position: absolute; top:0px; right:0px;  padding:30px; color:#FFFFFF; font-size: 1.3em; z-index:99999;}
 .card-item .fa-pause{display: none;}
 .card-item .fa-play{display: block;}
 .card-item.playing .fa-pause{display: block;}
 .card-item.playing .fa-play{display: none;}
 .card-item.playing .card-video{  display: block !important; }
 .card-item.playing img{display: none;}


.write-card{padding-top:70px;}
.write-container{ width:100%; max-width:600px; margin:0px auto; }
.write-container textarea{ border:0px; font-size:1.5em; width:100%; background-color: transparent; border-bottom:1px solid #000000 !important; padding:5px;}

.postcard-message{padding:10px;}
.postcard-input-half {display: inline-block; width:50%; padding:10px;}
.postcard-input-half input{ font-size:1.5em; width:100%; padding:5px;  background-color: transparent; color:#000000; border:0px; border-bottom:1px solid #000000; }

.postcard-submit{ padding-top:20px; text-align: center; padding-bottom:150px; text-align: center;}
.postcard-submit .btn{ margin:0px auto; padding: 10px 40px; font-size: 1.4em;}

.postcard-newsletter-confirmation { position: relative;}
.postcard-newsletter-confirmation label{ padding-left:30px; padding-right:10px;}
.postcard-newsletter-confirmation input{ position:absolute; top:0px; left:10px; }

.captcha_wrapper{ padding-top:20px; }
.g-recaptcha div{ margin:0px auto; }

 .write-card  select{
      width:100%;
      padding:5px;
      border: 0px solid transparent;   
      -webkit-appearance: none; 
      -moz-border-radius: 0px;
      -webkit-border-radius: 0px;
      border-radius: 0px; 
      font-size: 24px;
      color: #000000;
      border-bottom:1px solid #000000; 
      border-top: 0px solid #FFFFFF;
      background-color: transparent;    
      line-height: 1.4em;
      color:#000000;    
      text-align-last:left;
      text-align: left;
 }

  .write-card select {
                    background-image:
                      linear-gradient(45deg, transparent 50%, #000000 50%),
                      linear-gradient(135deg, #000000 50%, transparent 50%);
                    background-position:
                      calc(100% - 12px) calc(1em - 2px),
                      calc(100% - 5px) calc(1em - 2px);
                    background-size:
                      7px 7px,
                      7px 7px;
                    background-repeat: no-repeat;
                  }
  .write-card select:focus {
                    background-image:
                      linear-gradient(45deg, #FFFFFF 50%, transparent 50%),
                      linear-gradient(135deg, transparent 50%, #FFFFFF 50%),
                    background-position:
                      calc(100% - 12px) 1em,
                      calc(100% - 5px) 1em,
                    background-size:
                      7px 7px,
                      7px 7px,
                    background-repeat: no-repeat;
                    outline: 0;
                }
               .write_card select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; }

  .write-card option:not(:checked) {
      color: #000000;
  }

.postcard-newsletter-confirmation label{ font-weight:400; font-size: 12px; }

::-webkit-input-placeholder { /* Edge */
  color: #000000;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #000000;
}

::placeholder {
  color: #000000;
}



                 @media only screen and (max-width: 680px) {
                    .choose-card{ padding-top:30px; }
                     .card-item{ width:100% !important; }
                     .postcard-input-half{width: 100%;}
                     .text-container h1{margin-bottom:10px;}
                     .text-container p{ font-size: 1.2em; }
                    .video-overlay{
                      background-size: 80% !important;
                    }
                    .video-overlay .logo{
                      background-size: 90%; padding-top:25%;
                    }
                }