﻿.container{
  width:90%;
  max-width:360px;
  height:540px;
  background:#fff;
  margin:20px auto;
  border-radius:4px;
  text-align:center;
  position:fixed;
  -moz-box-shadow: 0px 0px 28px rgba(0,0,0,.3);
  -webkit-box-shadow: 0px 0px 28px rgba(0,0,0,.3);
   box-shadow: 0px 0px 28px rgba(0,0,0,.3);
   overflow:hidden; z-index: 210;

left:-16px;
right:0;
}

.icon-offer {

    margin: 0 20px;float:left;
}
.icon-offer img{width:50px;

}

#cflag{float: left;
    width: 20px;
    margin-left: 13px;
    margin-top: 19px;}
#country{font-size: 16px;
    color: #BBB196;
    border-color: #ccc;
    margin-top: 16px;
    padding-left: 30px;
    background-color: transparent;
    margin-left: -26px;}
.offer-banner {
    width: 70%;
    margin: 0 auto;
    background: #ECCC7B;
        background-image: linear-gradient(90deg, #ECCC7B, #F3F1EE);
    border-radius: 4px;
    padding: 12px 8px 8px;
    margin-bottom: 16px;
    min-height: 80px;
}
.offer-info {
    font-size: 14px;float:left;
}

.offer-name { float:left;
    font-size: 24px;color: #D04900;
    line-height: 27px;
    font-family: 'lato-bold', Arial, Helvetica, sans-serif;
    margin-bottom: 8px;
}
.contactForm{width: 70%;position: relative; float: left;
    margin:0px 15%;background-color:#fff; padding:16px;    margin-bottom: 32px;}

.contactForm  input[type='text']{
  font-family: "Roboto";
  width:97.5%; margin-left: 1.25%;
  height:40px;
  margin-top:16px;
  margin-bottom:16px;
  padding: 8px;
  border:none;
  border-bottom:1px solid #ccc;
  overflow:auto; color:#816E3C;
  position:relative; background-color:#fff;
}

.contactForm input[type='email']{
 width:96%; margin-left: 2%;
  height:40px;
  margin-top:16px;
  margin-bottom:16px;
  padding: 8px;
  color:#816E3C;
  border:none;
  border-bottom:1px solid #ccc;
  overflow:auto;
  position:relative; background-color: #fff
}


.one , .two{
  display:block;
  height:540px;
  width:100%;
  margin:0px auto;
  position:absolute;
  -webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition:         all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.oneN{
  top:0;

  margin-top:0px;
  background: linear-gradient(rgba(50,10,0,.6), rgba(0,0,20,.6)), url(Newsletter/italy.png);

}


.oneN2{
  top:0;

  margin-top:0px;
  background: linear-gradient(180deg,rgba(255,255,255,.6), rgba(227,224,199,.6)), url(share.jpg);

}

.twoN{
  top:540px;
  background: linear-gradient(rgba(0,0,0,.1), rgba(0,0,20,.5)), url(Newsletter/italy.png);
}


.oneB{
  top:0;

  margin-top:0px;
  background: linear-gradient(rgba(50,10,0,.8), rgba(0,0,20,.8)), url(Newsletter/nepal.jpg);

}

.twoB{
  top:540px;
  background: linear-gradient(rgba(0,0,0,.1), rgba(0,0,20,.5)), url(Newsletter/nepal.jpg);
}

.twoS{
  
  background: linear-gradient(rgba(255,255,255,.8), rgba(200,200,200,.5));
}

.two h3{
  color:#fff;
  padding-top:0px;
}

.container .logo{
  width:40%;
  height:auto;
  display:block;
  margin:16px auto;
}

.one  .heading{
  color:#C7A34B;
  text-transform:capitalize;
  font-size:24px;
  font-weight:900;
  margin-top:100px;
}

.two  .heading{
  color:#C7A34B;
  text-transform:capitalize;
  font-size:24px;
  font-weight:900;
  margin-top:310px;
}

.two  .headingS{
  color:#C7A34B;
  text-transform:capitalize;
  font-size:24px;
  font-weight:900;
  margin-top:10px;
}

.container p{
  font-size:16px;
  font-family: 'Open Sans Condensed', sans-serif;
  color:#b7b7b7;
  font-weight:lighter;
  padding: 0 16px
}

input[type='text']{
  width:85%;
  height:30px;
  margin-top:0px;
  margin-bottom:8px;
  padding: 8px;
  border:none;
  border-bottom:3px solid #C7A34B;
  overflow:auto; color:#fff;
  position:relative; background: rgba(192,175,75,.25)
}





input[type='text']:active:focus,
input[type='text']:focus,
input[type='text']:hover{
  outline : none;
  font-size:20px;
}



input[type='text']:focus::-webkit-input-placeholder,
input[type='text']:active:focus::-webkit-input-placeholder
{
  font-size:12px;
  display:block;
  -webkit-transform:translateY(-10px);
  transform:translateY(-10px);
}



input[type='email']{
  width:85%;
  height:30px;
  margin-top:0px;
  margin-bottom:8px;
  padding: 8px;
  border:none;
  border-bottom:3px solid #C7A34B;
  overflow:auto; color:#fff;
  position:relative; background: rgba(192,175,75,.25)
}





input[type='email']:active:focus,
input[type='email']:focus,
input[type='email']:hover{
  outline : none;
  font-size:20px;
}



input[type='email']:focus::-webkit-input-placeholder,
input[type='email']:active:focus::-webkit-input-placeholder
{
  font-size:12px;
  color:#C7A34B;
  display:block;
  -webkit-transform:translateY(-10px);
  transform:translateY(-10px);
}

::-webkit-placeholder{
  font-size:14px;
  color:#b7b7b7;
  text-transform:capitalize;
  -webkit-transform:translateY(0px);
  transform:translateY(0px);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

::placeholder{
  font-size:14px;
  color:#b7b7b7;
  text-transform:capitalize;
  -webkit-transform:translateY(0px);
  transform:translateY(0px);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.one  .btn{
    width: 32%;
    background: #C7A34B;
    padding: 8px;
    border: none;
    border-radius: 25px;
    font-size: 14px;
    color: #fff;
    text-transform: capitalize;
    font-family: 'Open Sans', sans-serif;
}

.btnShare{
    width: 32%;
    background: #C7A34B;
    padding: 8px;
    border: none;
    border-radius: 25px;
    font-size: 14px;
    color: #fff;
    text-transform: capitalize;
    font-family: 'Open Sans', sans-serif;
}
.one  .btn:active:focus,
.one  .btn:focus,
.one  .btn:hover{
  outline : none;
}

.one .btn:hover{
  cursor:pointer;
}

.oFormB{cursor: pointer;}
.oFormN{cursor: pointer;}

.close{
  position: absolute;
    top: 45px;
    right: 32px;
    display: block;
    cursor: pointer;
}

.close:before{
  content:"";
  position:absolute;
  top:-20px;
  right:-20px;
  display:block;
  width:22px;
  height:2px;
  background:#000;
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
}

.close:after{
  content:"";
  position:absolute;
  top:-20px;
  right:-20px;
  display:block;
  width:22px;
  height:2px;
  background:#000;
  -webkit-transform:rotate(-45deg);
  transform:rotate(-45deg);
}
.zOut{

  animation: zoomO 1s forwards;
}

@keyframes zoomO {
    from {transform:scale(1)}
    to {transform:scale(0);opacity: 0;display:none;}
}

.zIn{

  animation: zoomI 1s forwards;
}

@keyframes zoomI {
    from {transform:scale(0);opacity: 0;display:none;}
    to {transform:scale(1);opacity: 1;display:block;top:0;}
}

@media (max-width:600px) {

  .offer-banner {
    width: 100%;
    margin: 0 auto;
    background: #ECCC7B;
        background-image: linear-gradient(90deg, #ECCC7B, #F3F1EE);
    border-radius: 4px;
    padding: 12px 8px 8px;
    margin-bottom: 16px;
    min-height: 80px;
}

.icon-offer {

    margin:0;float:left;margin-right:8px
}
.icon-offer img{width:55px;

}
.offer-info {
    font-size: 14px;float:left; z-index:200; position: relative; color:#000
}

.offer-name { float: right;
    font-size: 19px;
    color: #D04900;
    line-height: 20px;
    font-family: 'Roboto';
    margin-left: 70px;
    margin-top: -55px;
}

.contactForm{width: 100%;
    position: relative;
    margin:0;
    background-color: #fff;
    padding: 16px; }

.contactForm  input[type='text']{
  width:97.5%; margin-left: 1.25%;
  height:40px;
  margin-top:8px;
  margin-bottom:0;
  padding: 4px;
  border:none;
  border-bottom:1px solid #ccc;
  overflow:auto; color:#816E3C;
  position:relative; background-color:#fff;
}

.contactForm  input[type='email']{
  width:97.5%; margin-left: 1.25%;
  height:40px;
  margin-top:8px;
  margin-bottom:0;
  padding: 4px;
  border:none;
  border-bottom:1px solid #ccc;
  overflow:auto; color:#816E3C;
  position:relative; background-color:#fff;
}
.contactForm  input[type='email']:before{content:'po';}

#country {
    font-size: 12px;
    color: #BBB196;
    border-color: #ccc;
    margin-top: 16px;
    padding-left: 30px;
    background-color: transparent;
    margin-left: -26px;
}
}


.noprint{display:block}

@media print {

.noprint{display:none}


}
