#popup
{
position:absolute;
display:none;
top:5%;
left:14%;
min-width: 462px;
width: 947px;
min-height: 600px;
background:url(../img/popbg.jpg);
position:fixed;
z-index: 444;
border: 5px solid #fac963;
border-radius: 5px;
padding: 10px;
border-radius: 2px;
box-shadow: 0px 3px 22px 3px rgba(0, 0, 0, 0.75);
/* box-shadow: 0 2px 5px #000; */
	
}


@font-face {
    font-family: myFirstFont;
    src:url(../font/Papyrus.TTF);
}

.skip  {
    margin: 0px;
    padding: 3px 16px;
   
    color: #333;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    border: 1px solid #EEAF38;
    text-transform: uppercase;
}

.left_box{width:53%; height:auto; 
 float:left;}

.left_box strong{
font-size:14px;
color: #3C3939;
font-weight: 500;
}

.left_form{width:80%; height:295px;  margin:0 auto; }



.header_font{font-size:23px; color:#ED9730; font-weight:bold; padding:2px 2px 2px 2px; font-family: inherit; }

.header_font1{font-size:21px; color:#3C3939; font-weight:500; padding:0px 2px 2px 2px;  }



.right_boxs{width:44%; height:300px;  float:left; margin-left:25px; }

.right_boxs img{margin:auto; padding-top:10px;}

.poppup_heading p {
    font-size: 19px;
    padding-left: 163px;
    margin-bottom: 8px;
    font-family: myFirstFont;
    /* color: rgba(61, 22, 4, 0.54); */
    /* text-shadow: 0px 1px 0px rgba(61, 22, 4, 0.79); */
    line-height: 57px;
    font-weight: 900!important;
    /* background: rgba(250, 201, 99, 0.2); */
    /* width: 57%; */
    text-shadow: -2px 3px 3px rgba(113, 78, 53, 0.92);
}

.poppup_heading img{width:36px!important; padding:0px!important;}

.poppup_heading p:hover {
/*text-shadow: 0px 0 25px #ff2;*/
-webkit-transform:scale(1.1);
transform:scale(1.1);
 color: #3D1604;
}
.poppup_heading p {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}

.home_page {
    background: rgba(232, 183, 142, 0.3);
    color: #8E543B;
    font-size: 16px;
    font-weight: 600;
    width: 34%;
    text-align: center;
    padding: 5px 5px 5px 5px;
    margin-left: -11%;
}

.cont_page {
    background: rgba(232, 183, 142, 0.3);
    color: #8E543B;
    font-size: 16px;
    font-weight: 600;
    width: 44%;
    text-align: center;
    padding: 5px 5px 5px 5px;
    margin-left: 67%;
	position:absolute;
	top: 96%;
}

.input_type {
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 0px;
    position: relative;
    font-size: 14px;
    min-height: 26px;
    margin-bottom: 7px;
    display: inline-block;
    vertical-align: middle;
    width: 78%;
    padding-left: 10px;
}


.input_type_drop{
border: 1px solid #ccc;
border-radius: 4px;
margin-top: 7px;
position: relative;
font-size: 14px;
min-height: 34px;
margin-bottom: 10px;
display: inline-block;
vertical-align: middle;
color: #908A8A;
width: 79%;
padding-left: 5px;
}
.text_type{
border: 1px solid #ccc;
border-radius: 4px;
position: relative;
font-size: 14px;
min-height: 40px;
margin-bottom: 10px;
display: inline-block;
vertical-align: middle;
width: 79%;
}
.text_algna{margin-left:27px;}
.text_algn{margin-left:25px;}
.text_algnm{margin-left:9px;}

.text_algnc{margin-left:17px;}
.text_algncity{margin-left:40px;}

.submit_btn{
background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 2;
  -moz-border-radius: 2;
  border-radius: 2px;
  font-family: Arial;
  color: #ffffff;
  font-size: 16px;
  padding: 7px 20px 7px 20px;
  text-decoration: none;
  border:none;
  
   }
.submit_btn:hover {
    background: #3cb0fd;
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
    text-decoration: none;
    border: none;
}

placeholder {
    color: #067;
    margin-left:20px;
}
.popup-close {
position: absolute;
top: -25px;
right: -23px;
width: 36px;
height: 36px;
cursor: pointer;
z-index: 8040;
background: url(../images/close.png);
}
.cover 
    {
       background-color: rgb(0, 0, 0);
        width:100%;
        height:100%;
        position:fixed;
    	z-index:222;
		display:none;
	}
	
	.pop_logo {
    padding-top: 80px;
    width: 78%;
}
	.pop_logo img{margin:auto auto; padding-top:10px;}
	
.poppup_contant {
    padding: 0px;
    padding-left: 32px;
    width: 76%;
}
	
.poppup_contant p {
    font-size: 15px;
    font-family: Myriad Pro;
    font-weight: initial;
    line-height: 24px;
    color: rgba(85, 49, 27, 0.95);
    word-spacing: 0.10px;
    letter-spacing: 0.5px;
    /* text-shadow: -1px 1px rgba(197, 197, 197, 0.69); */
    font-weight: 400;
}

.tag-line p {
    font-size: 25px;
    font-family: myFirstFont;
    font-weight: initial;
    line-height: 24px;
    color: rgba(61, 22, 4, 0.91);
    word-spacing: 0.10px;
    letter-spacing: 0.5px;
    text-shadow: -1px 2px rgba(61, 22, 4, 0.29);
    font-weight: 800;
    text-align: right;
    margin-right: 11%;
}
	
	
	
	
	
	
	
	@media (min-width: 320px) and (max-width: 480px) { 
	
	.left_box {
    width: 50%;
    height: 221px;
    float: left;
    border-right: dotted #999;
}
	
	
	#popup {
    position: absolute;
    display: none;
    top: 30%;
    left: 4%;
    min-width: 320px;
    width: 231px;
    min-height: 220px;
    background-color: #fff;
    z-index: 444;
    border: 5px solid #fac963;
    border-radius: 5px;
    padding: 10px;
    border-radius: 2px;
    box-shadow: 0px 3px 22px 3px rgba(0, 0, 0, 0.75);
    /* box-shadow: 0 2px 5px #000; */
}

.header_font {
    font-size: 12px;
    color: #ED9730;
    font-weight: bold;
    padding: 2px 2px 2px 2px;
    font-family: inherit;
	line-height:20px;
}

.left_box strong {
    font-size: 14px;
    color: #3C3939;
    font-weight: 500;
    display: none;
}

.text_algna {
    margin-left: 0px;
}

.input_type {
    border: 1px solid #ccc;
    /* border-radius: 4px; */
    margin-top: 0px;
    position: relative;
    font-size: 10px;
    min-height: 24px;
    margin-bottom: 5px;
    display: inline-block;
    vertical-align: middle;
    width: 96%;
    padding-left: 5px;
    height: 24px;
    line-height: 20px;
}

.text_algn {
    margin-left: 0px;
}

.text_algnc {
    margin-left: 0px;
}

.text_algncity {
    margin-left: 0px;
}

.input_type_drop {
    border: 1px solid #ccc;
    /* border-radius: 4px; */
    margin-top: 1px;
    position: relative;
    font-size: 11px;
    min-height: 24px;
    margin-bottom: 6px;
    display: inline-block;
    vertical-align: middle;
    color: #908A8A;
    width: 94%;
    padding-left: 5px;
    height: 20px;
}

.text_algnm {
    margin-left: 0px;
}

.right_box {
    width: 35%;
    height: 225px;
    float: left;
    margin-left: 25px;
}

.text_type {
    border: 1px solid #ccc;
    border-radius: 4px;
    position: relative;
    font-size: 14px;
    min-height: 15px;
    margin-bottom: 10px;
    display: inline-block;
    vertical-align: middle;
    width: 92%;
    height: 34px;
}


.header_font1 {
    font-size: 11px;
    color: #3C3939;
    font-weight: 500;
    padding: 0px 2px 2px 2px;
    line-height: 13px;
    display: none;
}

.submit_btn {
	
    background: #3498db;
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
    background-image: -moz-linear-gradient(top, #3498db, #2980b9);
    background-image: -ms-linear-gradient(top, #3498db, #2980b9);
    background-image: -o-linear-gradient(top, #3498db, #2980b9);
    background-image: linear-gradient(to bottom, #3498db, #2980b9);
    -webkit-border-radius: 2;
    -moz-border-radius: 2;
    border-radius: 2px;
    font-family: Arial;
    color: #ffffff;
    font-size: 13px;
    padding: 0px 18px 2px 18px;
    text-decoration: none;
    border: none;
}


.poppup_heading p {
    font-size: 19px;
    padding-left: 9px;
    margin-bottom: 8px;
    font-family: myFirstFont;
    /* color: rgba(61, 22, 4, 0.54); */
    /* text-shadow: 0px 1px 0px rgba(61, 22, 4, 0.79); */
    line-height: 57px;
    font-weight: 900!important;
    /* background: rgba(250, 201, 99, 0.2); */
    /* width: 57%; */
    text-shadow: -2px 3px 3px rgba(113, 78, 53, 0.92);
} 

/*---make a basic box ---*/
.box{
  width: 200px;
  height: 100px;
  position: relative;
  margin: 10px;
  float: left;
  border: 1px solid #333;
  background: #999;

}




	}
	
	
img {
    -webkit-filter:grayscale(0%);
    transition: -webkit-filter .3s linear;
    }

	


/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; position: absolute; right: -999px; } to { opacity:1;  left: -999px; } }
@-moz-keyframes fadeIn { from { opacity:0; position: absolute; right: -999px; } to { opacity:1;  left: -999px; } }
@keyframes fadeIn { from { opacity:0; position: absolute; right: -999px; } to { opacity:1;  left: -999px; } }

.fade-in {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.fade-in.one {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}

.fade-in.two {
  -webkit-animation-delay: 2s;
  -moz-animation-delay:2s;
  animation-delay: 2s;
}

.fade-in.three {
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  animation-delay: 3s;
}

.fade-in.four {
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  animation-delay: 4s;
} 

.fade-in.five {
  -webkit-animation-delay: 5s;
  -moz-animation-delay: 5s;
  animation-delay: 5s;
}

.fade-in.six {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  animation-delay: 6s;
}

.fade-in.sevan {
  -webkit-animation-delay: 7s;
  -moz-animation-delay: 7s;
  animation-delay: 7s;
}

/*---make a basic box ---*/
.box{
  width: 200px;
  height: 100px;
  position: relative;
  margin: 10px;
  float: left;
  border: 1px solid #333;
  background: #999;

}