#odudecard_divider {
  border-top: 1px dotted #3daef1;
  margin: 2px 0px 2px 0px;
  padding: 10px;
  font: 11px "Myriad Pro", "Helvetica Neue", arial, sans-serif;
  color: #3daef1;
  text-align: left;
  box-shadow: inset 0px 10px 20px rgba(61, 174, 241, 0.125);
}

#odudecard_tabnav {
  height: 20px;
  margin: 0;
  padding-left: 10px;
}

#odudecard_tabnav li {
  margin: 0;
  padding: 0;
  display: inline;
  list-style-type: none;
}

#odudecard_tabnav a:link,
#odudecard_tabnav a:visited {
  float: left;
  background: #f3f3f3;
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  padding: 2px 10px 2px 10px;
  margin-right: 4px;
  border: 1px solid #ccc;
  text-decoration: none;
  color: #666;
}

#odudecard_tabnav a:link.active,
#odudecard_tabnav a:visited.active {
  border-bottom: 1px solid #fff;
  background: #fff;
  color: #000;
}

#odudecard_tabnav a:hover {
  background: #fff;
}

[type="date"] {
  background: #fff
    url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png)
    97% 50% no-repeat;
}
[type="date"]::-webkit-inner-spin-button {
  display: none;
}
[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
}
.ecard-wrapper {
    position: relative;
    padding: 20px;
    /* border: 1px solid; */
    min-height: 500px;
    transition: all 0.5s;
}

.ecard-wrapper .ecard-envelope {
  position: absolute;
  top: 0px;
  left: 0;
  right: -30px;
  background-image: url(https://ecards.physifeel.com/wp-content/uploads/2020/05/envelope-wide-large.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  height: 100%;
  background-color: #ffffff;
  transition: all 0.5s;
}
.ecard-wrapper img.pure-img {
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    right: 20px;
    bottom: 10px;
    transform: translate( -50%, -50%);
    width: 63%;
    box-shadow: 3px 5px 8px rgba(0, 0, 0, 0.65);
    transition: all 0.5s;
}
.blog-item.single:hover .ecard-wrapper img.pure-img {
    transform: translate( -50%, -50%) scale(1.2);
    box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.75);
    transition: all 0.5s;
}
#odudecard_tabnav {
    height: 20px;
    display: flex;
    margin: 0;
    padding: 1px;
}

#odudecard_tabnav li {
    margin: 0;
    padding: 0;
    display: inline-flex;
    list-style-type: none;
    width: 50%;
}
#odudecard_tabnav a:link, #odudecard_tabnav a:visited {
  background: #ffffff;
  font-size: 16px;
  line-height: 20px;
  font-weight: bold;
  padding: 4px 10px 28px 10px;
  margin-right: 0px;
  border: 1px solid #ccc;
  text-decoration: none;
  color: #2a1f24;
  width: 100%;
}
#odudecard_tabnav a:link.active, #odudecard_tabnav a:visited.active {
    border-bottom: none;
    background: #e7e7e7;
    color: #009688;
}
form.form-horizontal.smart-wizard {
    border: 1px solid #ccc !important;
    border-top: none !important;
}

button {
    background: #F00 !important;
    color: #fff !important;
}
.mce-toolbar button{
  background: transparent !important;
    color: #aaa !important;
}

h1.ecard-title {
    font-family: cursive;
    color: #3c3c3c;
    border-bottom: 1px solid #f6f6f6;
    padding: 0px 0px 10px 10px;
}
.mail{
  position: relative;
  background-color: #dedede;
  width: 300px;
  height: 200px;
  left: 0px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  transform-style: preserve-3d;
  cursor: pointer;
  transform: rotateY( 0deg );
  transition: all 1s ease;
}
.mail .upg_image-frame{
  left: -1100px;
}
.upg_image-frame.slidein {
  left: 0;
  animation: bouncein 2s;
  transition: all 1s 1s ease;
}
.mail:after{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid #cecece;
  border-top: 100px solid transparent;
  border-bottom: 100px solid #cecece;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  z-index: 4;
}
.mail:before{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-left: 150px solid #d5d5d5;
  border-right: 150px solid transparent;
  border-top: 100px solid transparent;
  border-bottom: 100px solid #d5d5d5;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  z-index: 5;
}
.envelope:before{
  content: '';
  position: absolute;
  top: 0;
  left: -2px;
  border-left: 152px solid transparent;
  border-right: 152px solid transparent;
  border-top: 102px solid #d8d8d8;
  border-bottom: 102px solid transparent;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  z-index: 6;
  transform-origin: top;
  transform: rotateX( 0deg );
  transition: all 1s 1s ease;

}
.letter-container{
    padding: 3px;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: absolute;
    z-index: 2;
    top: 0;
    left: 10px;
    background: #dedede;
    width: 280px;
    height: 180px;
    transform-style: preserve-3d;
    transform-origin: center;
    transition: all 1s 3s ease;
}
.letter, .letterBackPage, .letterFrontPage{
  position: relative;
  width: 272px;
  height: 172px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transform-style: preserve-3d;
  transform-origin: bottom;
  z-index: 3;
}
.letterFrontPage{
  position: absolute;
  backface-visibility: hidden;
}
.letterBackPage {
    position: absolute;
    backface-visibility: hidden;
    background-color: brown;
    transform-origin: center;
    transform: rotateX(180deg);
}
.letterBackPage  .img-container {
    position: absolute;
    left: 0px;
    right: 0;
    top: 0;
    bottom: 0;
}
.letterBackPage  .img-container img{
  position: absolute;
  width: 110px;
  transform: rotateZ(-90deg);
}
.letter-back{
    position: absolute;
    bottom: -99px;
    left: -99px;
    background: aliceblue;
    transform: rotateZ(-90deg) scale( calc( 1/1.75 ) );
    transform-origin: 79%;
    padding: 10px;
    width: 300px;
    height: 474px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    backface-visibility: hidden;
    overflow: hidden;
  /* position: absolute;
    bottom: 0;
    background: aliceblue;
    transform: rotateZ(-90deg);
    transform-origin: 79%;
    padding: 10px;
    width: 172px;
    height: 272px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    backface-visibility: hidden;
    overflow: hidden; */
}
.letter-back h3 {
  line-height: 1em;
  font-size: 0.85em;
  font-weight: 700;
  color: #000000;
  text-transform: uppercase;
  margin: 0px 0 1px 0px;
  padding: 3px;
  border: 1px solid #29c60d;
  font-family: cursive;
  border-right: none;
  right: 0;
  text-align: left;
  position: absolute;
  width: 96%;
  letter-spacing: 0.15em;
}
.letter-back p {
    font-size: 14px;
    color: #696969;
    line-height: 15px;
    margin: 0 0 0.5em;
}

.letter-back #ecard-message {
  font-size: 14px;
  color: #696969;
  line-height: 15px;
  margin: 0 0 0.5em;
  padding: 15px;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translate( 0, -50%);
}
.pick-your-card input, .pick-your-card a {
    margin: 10px;
    border-radius: 3px;
}
/* .mail:hover */
.open-envelope.mail{
  transform: scale( 1.75 );
  transition: all 2s 5s ease;
}
.open-envelope  .envelope::before{
  transform: rotateX( 180deg );
  transition: all 1s ease;
}
.open-envelope  .letter-container{
  animation: letterAnimation 3s 1s;
    top: 0%;
    left:30%;
    z-index: 8;
    transform: rotateZ( 90deg );
    transition: all 1s 3s ease;
}
.open-envelope  .letter-container .letter{
  animation: letterAnimation2 2s 4s;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.65);
  transform: rotateX( -170deg ) skewX( 3deg );
  transition: all 1s 4s ease;
}

.close-envelope.mail{
  transform: scale( 1 );
  transition: all 2s ease;
}
.close-envelope  .envelope::before{
  transform: rotateX( 0deg );
  transition: all 1s 5s ease;
}
.close-envelope  .letter-container{
  animation: letterAnimation1 3s 2s;
    top: 0%;
    z-index: 2;
    transition: all 1s 3s ease;
}
.close-envelope  .letter-container .letter{
  animation: letterAnimation3 2s;
  transform: rotateX( 0deg ) skewX( 0deg );
  transition: all 1s 4s ease;
}
@keyframes letterAnimation {
  0%   {top: 0px; z-index: 2; transform: rotateZ(0deg);}
  25%  {top: -90%;  transform: rotateZ(0deg);}
  50%  {top: 0; z-index: 8;  transform: rotateZ(0deg);}
  100%{ transform: rotateZ(90deg);}

}

@keyframes letterAnimation1 {
  0%   {top: 0px; z-index: 8;   transform: rotateZ(90deg);}
  50%   {top: 0px; z-index: 8;   transform: rotateZ(0deg);}
  75%  {top: -90%;   transform: rotateZ(0deg);}
  100% {top: 0; z-index: 2;  transform: rotateZ(0deg);}
}
@keyframes letterAnimation2 {
  0%   {   transform: rotateX(0deg)  skewX( 0deg );}
  100% {   transform: rotateX(-170deg)  skewX( 3deg );}
}
@keyframes letterAnimation3 {
  0% {   transform: rotateX(-170deg)  skewX( 3deg );}
  100%   {   transform: rotateX(0deg)  skewX( 0deg );}
}
@keyframes bouncein {
  0%   {left: -1100px;}
  35%  {left: -3px;}
  45%  {left: 1px;}
  75%  {left: -1px;}
  100% {left: 0;}
  0%   {left: 2;}
}
.sender{
  position: absolute;
  bottom: 0;
  left: 10px;
  z-index: 7;
  padding: 5px;
  text-align: left;
  color: #125e60;
}
.ecard-container {
  position: relative;
    padding: 80px 0;

}
.ecard-error-message {
    color: red;
    border-left: 4px solid;
    padding: 10px 10px;
    margin: 10px;
}
audio#ecard_music {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
}
/*Front Page*/

.frontpage-slider a {
    color: #8c8c8c;
    text-decoration: none;
    transition:all 0.5s ease;
}
.frontpage-slider a:hover {
    color: #2a2a2a;
    transition:all 0.5s ease;
}
.frontpage-slider h2 {
    padding: 0;
    margin: 10px;
    text-transform: capitalize;
    font-family: cursive;
}

.frontpage-slider .img-container {
    height: 200px;
    padding: 3px;
    margin: 3px;
    border: 2px solid #fff;
    background-color: #fff;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.frontpage-slider .img-container:after{
  content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 1px solid #ccc;
}
.frontpage-slider img {
    position: relative;
    opacity:0;
    left: 100%;
    transform: translate( -100%, -100% );
    /* filter: blur(0); */
    /* z-index: 2; */
}
.frontpage-slider .img-holder {
    width: 100%;
    height: 100%;
/*     filter: blur(0px); */
/*     z-index: 1; */
    background-position: center !important;
    /* background-size: cover !important; */
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

.slick-dots li button, .slick-prev, .slick-next {

    cursor: pointer;
    color: transparent !important;
    background: transparent !important;
}
.frontpage-slider .slick-prev:before, .frontpage-slider .slick-next:before {
    opacity: .75;
    color: #7b77776e;
    transition: all 0.5s ease;
}
.frontpage-slider .slick-prev:hover:before, .frontpage-slider .slick-prev:focus:before, .frontpage-slider .slick-next:hover:before, .frontpage-slider .slick-next:focus:before {
    opacity: 0.95;
    color: #7b7777;
    transition: all 0.5s ease;
}
/*//////////////////////////////////////*/

.frontpage-slider .icon-grid {
    position: absolute;
    /* bottom: -75px; */
    bottom: -100%;
    left: 4px;
    right: 4px;
    background-color: rgba(0, 0, 0, 0.85);
    padding: 10px 1px;
    transition: all 0.3s ease;
}
.frontpage-slider a.preview-link:hover  .icon-grid,.frontpage-slider .img-container:hover  .icon-grid, .frontpage-slider .icon-grid:hover{
    bottom: 0px;
    color:#ddd;
    transition: all 0.3s ease;
}
.icon-grid a.upg_icon_button i {
    padding: 2px;
}
.facebook-button {
    position: absolute;
    top: -10px;
    right: 15px;
}
.modal-bg{
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 148, 4, 0.95);
  z-index: 111111111;
  transition: 1s all ease-in-out;
}
.modal-bg.show{
  display: block;
  transition: 1s all ease-in-out;
}
.modal-bg .modal-body{
  position: absolute;
  background: #d1d1d1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  max-width: 360px;
}
.modal-bg .modal-body .modal-head {
  position: relative;
  background-color: #044c07;
  color: #FFF;
  padding: 10px;
  left: -55px;
  margin-bottom: 15px;
  box-shadow: 4px 2px 2px #000;
}
.modal-bg .modal-body .modal-head:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -22px;
  border-left: 20px solid;
  border-top: 12px solid;
  border-right: 15px solid;
  border-bottom: 10px solid;
  border-color: transparent;
  border-top-color: #003602;
  border-right-color: #003602;
}
.modal-bg .modal-body .close-btn{
  position: absolute;
  right: -5px;
  top: -5px;
  background-color: #fff;
  width: 25px;
  height: 25px;
  line-height: 25px;
  border-radius: 50%;
  cursor: pointer;
}