::placeholder {
    color: white;
    opacity: 1; /* Firefox */
}

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

::-ms-input-placeholder { /* Microsoft Edge */
   color: white;
}


	
	

		.input-group-addon {
    min-width:70px;// if you want width please write here //
    text-align:center;
}

.input-group-addon {
  background-color: white;

}

.inputfield
 {  
 position:relative;  
 top:30px;  
 font-size: 60px!important; 
 font-family:'Lato', sans-serif !important;
 font-weight: 400;
 color:black ; 
 width:100px;  
 line-height: 100px!important;  
 opacity:0.2; 
 }
.row .form-group textarea.form-control {
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
	 line-height: 200px!important; 
	  width:100px;  
}

.icon-size{
 
font-size:1.8em;
    
  background-color: white;
  border-right: 1px solid #ccc;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 0;
  border-bottom: 0;
 
}
.input-group{
 
font-size:1.9em;
  background-color: white;
  border-right: 1px solid #ccc;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 0;
  border-bottom: 0;
	  width:100px;  
 
}

.button {

		width: 300px;
    border: none;
    color: white;
    padding: 13px ;
		padding-left:45;

    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
		 line-height: 7px!important;  
		 display:inline-block;
min-width: 250px;
width: 270px;

}
.buttonmail2 {
background-image: url('back.jpg');
		width: 300px;
    border: none;
  
    padding: 13px ;
		padding-left:45;

    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
		 line-height: 7px!important;  
		 display:inline-block;
min-width: 200px;
width: 270px;

}
		 	@media screen and (max-width: 800px){
		.buttonmail2{
width: 140px;
height: 15px;
    font-size: 18px;
  padding: 1px ;
position: relative;
border-radius: 3px;

}
 }
.button2 {

		width: 300px;
    border: none;
    color: white;
    padding: 13px ;
		padding-left:45;

    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 38px;
		 line-height: 7px!important;  
		 display:inline-block;
min-width: 250px;
width: 270px;

}
.textbox-n{
 
font-size:0.5em;


  border-right: 1px solid #ccc;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 0;
  border-bottom: 0;
	  width:250px;  
	 line-height: 35px!important; 
 
}
#Email, #Fname {
    background-color:#FFF;
}
input, textarea{
    background-color:#FFF;
    color:#666;
		text-align:center;

   font-size: 15px;

		line-height: 28px;
}
::-webkit-input-placeholder { /* WebKit browsers */
    color: #50394c ;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #50394c ;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #50394c ;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #50394c ;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #50394c ;
}
input:-moz-placeholder, textarea:-moz-placeholder {
    color: #50394c ;
}



	.footer{
clear: both;
height: 200px;
width: 900px;
text-align: center;
margin: 0px 0px 0px 0px;
font-family: arial, helvetica;
font-weight: bold ;
font-size: 11px;
background-color: black;

}

.panel-heading{
    height:50px;
} 
.panel-body{
    min-height:150px; 
    background-color: lightgray;
}     
.panel-footer{
    height:100px; 
    background-color: chartreuse;
}

.col-centered{
    float: none;
    margin: 0 auto;
}







.checkboxes {
width: 30px;
height: 20px;
background: green;
margin: 10px 50%;
position: relative;
border-radius: 3px;


}

.imageTable {
    width: 70%;
    border-spacing: 2px;
    tr {
        background-color: #DDD;
    }
}
@media (max-width: 768px) {
 .imageTable {


    width: 100%;
    height: 100%;


  }
}
	@media screen and (max-width: 800px){
    //styles that account for narrow viewports
    //off the top of my head, maybe something like this (really depends on what the 'design' should do though):
    input[type="text"] {
        display: block;
        float: right;
				        width: 120%;
								font-size: 0.7em;
    }
		 }
		 	@media screen and (max-width: 800px){
		 .checkboxes {
width: 40px;
height: 25px;
background: green;
margin: 10px 20px;
position: relative;
border-radius: 3px;

}
 }



/* The container */
.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container input {


    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}



   


.bg-img {
    position: relative;
    text-align: center;
    color: white;
		
		    background-image: url("travel-3.jpg");

    min-height: 200px;
 max-height: 300px;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}


@media screen and (max-width: 800px) {
 #bg-img {  max-height: 200px; /* fixed width under 700px */ }
  }
}
.bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
}

.top-left {
    position: absolute;
    top: 8px;
    left: 16px;
}

.top-right {
    position: absolute;
    top: 8px;
    right: 16px;
}

.bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
}

.centered {
    position: absolute;
		font-size: 25px;
    top: 40%;
    left: 50%;

		  transform:translate(80px, 80px) rotate(5deg) scale(3) translate(-50px, -20px);
}
.btn {
background-image: url('background-button.jpg');
    width: 40%;
    height: 7%;
    padding-left: 2% !important;
   border: none;
    color: white;
    padding: 15px 10px;
	
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
}
.btn3 {
background-image: url('background-bitton-2.jpg');
    width: 30%;
    height: 7%;
    padding-left: 2% !important;
   border: none;
    color: white;
    padding: 5px 3px;
	
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
}



@media screen and (min-width: 801px) {
  div.centered {
    font-size: 20px;
  }
}
@media screen and (max-width: 800px) {
   div.centered  {
    font-size: 16px;
		transform:translate(50px, 95px) rotate(10deg) scale(2) translate(-70px, -30px);
  }
}
@media screen and (max-width: 800px){
    //styles that account for narrow viewports
    //off the top of my head, maybe something like this (really depends on what the 'design' should do though):
    input[type="button"] {
        display: block;
        float: right;
				        width: 120%;
    }

    input[type="text"] {
        width: 100%;
						padding-left: 5%;
			padding-right: 5%;
    }
}

th { background: #c5c5c5;}
table {
        border-collapse: collapse;
        border: 0px solid #cdcdcd;
        font: normal 12px arial; 
        width: 100%;
}
td, th { border: 0px  #cdcdcd; padding: 2px;}

/* Section two*/

@media (max-width: 768px) {
  .btn {

background-image: url('background-button.jpg');
    width: 85%;
    height: 7%;
    padding-left: 2% !important;
   border: none;
    color: white;
    padding: 15px 10px;
	
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
  }
}

input[type=text] {



}
input[type=search] {
		background: url ('sea.png') no-repeat;

	 background-color:lightgray;
	border: solid 0px lightgray;
width: 45%;
	heigth: 100px;
		text-align:center;
	-webkit-border-radius: 0em;
	-moz-border-radius: 0em;
	border-radius: 0.5em;
webkit-transition: all .5s;
	-moz-transition: all .5s;
	transition: all .5s;
		padding-left: 5%;
			padding-right: 5%;
	}	
	
	input[type=submit] {
background-image: url('back.jpg');
    width: 50%;
    height: 7%!important;
    padding-left: 2% !important;
   border: none;
    color: white;
    padding: 15px 10px;
	
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
}
@media (max-width: 768px) {
input[type=submit] {
background-image: url('back.jpg');
    width: 65%;
    height: 7%!important;
    padding-left: 2% !important;
   border: none;
    color: white;
    padding: 15px 10px;
	
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
		max-width:280px;
}
}

.img-responsive{
    border-radius: 50%;
}

input[type=submit2] {
background-image: url('back.jpg');
    width: 50%;
    height: 7%!important;
    padding-left: 2% !important;
   border: none;
    color: white;
    padding: 15px 10px;
	
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
}

@media screen and (max-width: 700px){

    input[type="submit"] {
		background-image: url('background-button.jpg');
		  font-size:14px;
    min-width:250px;
		max-width:240px;
				padding-top: 2%;
					padding-bottom: 2%;
					padding-left: 5%;
			padding-right: 5%
    }
}
.img-responsive{
    border-radius: 50%;
}
.container-fluid text-center







@media screen and (min-width: 801px) {
  div.centered {
    font-size: 20px;
  }
}
@media screen and (max-width: 800px) {
   div.centered  {
    font-size: 18px;
		transform:translate(80px, 95px) rotate(0deg) scale(2) translate(-70px, -50px);
  }
}
.centered {
    position: absolute;
		font-size: 38px;
    top: 40%;
    left: 50%;

		  transform:translate(80px, 80px) rotate(0deg) scale(3) translate(-50px, -20px);
}

}
.zapbutton {


    width: 85%;
    height: 7%;
    padding-left: 2% !important;
   border: none;
    color: white;
    padding: 15px 10px;
	
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
  }
@media (max-width: 768px) {
  .zapbutton {


    width: 65%;
    height: 15%;
    padding-left: 2% !important;
   border: none;
    color: white;
    padding: 15px 10px;
	
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
		max-width:250px;
  }
}
  
	
    /* Remove the navbar's default margin-bottom and rounded borders */ 
    .navbar {
      margin-bottom: 0;
      border-radius: 0;
			 background-color:#50394c;
    }
    
    /* Add a lightgray background color and some padding to the footer */
    footer {
      background-color: #f2f2f2;
      padding: 25px;
    }
    
  .carousel-inner img {
      width: 100%; /* Set width to 100% */
 max-height:300px;
      margin: auto;
      min-height:200px;
  }

  /* Hide the carousel text when the screen is less than 600 pixels wide */
  @media (max-width: 600px) {
    .carousel-caption {
      display: none; 
    }
  }


			
 
    }
  }
	  .container-fluid-footer {
      width: 100%; /* Set width to 100% */
			 max-height:120px;
      margin: auto;
      min-height:120px;
			   background: #50394c;
    color: white;
				font-size: 22px;

  }
	
		  @media (max-width: 700px) {
.input-group-addon {
  background-color: white;
	 color: black;

}
 }
 .modal-header{
      width: 100%; /* Set width to 100% */
			 max-height:80px;
      margin: auto;
      min-height:60px;
		background-image: url('back.jpg');
    color: white;
				font-size: 20px;
				 }
				 
.dropdown-item{
      width: 100%; /* Set width to 100% */
			 max-height:100px;
      margin: auto;
      min-height:100px;
		background-image: url('background-bitton-2.jpg');
    color: white;
				font-size: 20px;
				 }
				label {
color: #B4886B;
font-weight: bold;
display: block;
width: 70%;
		font-size: 20px;
} 
		  @media (max-width: 700px) {
				label {
color: #B4886B;
font-weight: bold;
display: block;
width: 100%;
		font-size: 22px;
} 
}


	
    /* Remove the navbar's default margin-bottom and rounded borders */ 
    .navbar {
      margin-bottom: 0;
      border-radius: 0;
			 background-color:#50394c;
    }
    
    /* Add a gray background color and some padding to the footer */
    footer {
      background-color: #f2f2f2;
      padding: 25px;
    }
    


	

  /* Hide the carousel text when the screen is less than 600 pixels wide */
  @media (max-width: 600px) {
    .carousel-caption {
      display: none; 
    }
  }
	 
	  .container-fluid-footer {
      width: 100%; /* Set width to 100% */
			 max-height:80px;
      margin: auto;
      min-height:50px;
			   background: #50394c;
    color: white;
				font-size: 22px;

  }
	
		  @media (max-width: 700px) {
.input-group-addon {
  background-color: white;
	 color: black;

}
 }

				 
.dropdown-item{
      width: 100%; /* Set width to 100% */
			 max-height:100px;
      margin: auto;
      min-height:100px;
		background-image: url('background-bitton-2.jpg');
    color: white;
				font-size: 20px;
				 }
				label {
color: #B4886B;
font-weight: bold;
display: block;
width: 70%;
		font-size: 20px;
} 
		  @media (max-width: 700px) {
				label {
color: #B4886B;
font-weight: bold;
display: block;
width: 100%;
		font-size: 22px;
} 
}





.dropbtn {
    background-color: white;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
		  background-color: lightgray;
    color: white;
    padding: 16px;
    font-size: 20px;
    border: none;
    cursor: pointer;
					 max-width:350px;
      margin: auto;
      min-width:350px;
    text-align: right;
}

.dropdown-content {
    display: none;

    position: absolute;
    background-color: white;
         min-width:220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: white}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: white;
}
select{
    text-align-last:center;
    padding-right: 29px;

}

	  @media (max-width: 700px) {
.dropdown {
    position: relative;
    display: inline-block;
		  background-color: lightgray;
    color: white;
    padding: 16px;
    font-size: 20px;
    border: none;
    cursor: pointer;
					 max-width:240px;
      margin: auto;
      min-width:240px;
    text-align: right;
}
}
.btn2 {
background-image: url('background-bitton-2.jpg');
    width: 30%;
    height: 5%;
    padding-left: 2% !important;
   border: none;
    color: white;
    padding: 5px 5px;
	
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
@media (max-width: 768px) {
  .btn2 {

background-image: url('background-bitton-2.jpg');
    width: 70%;
    height: 7%;
    padding-left: 2% !important;
 border: solid 0.5px white;
    padding: 7px 5px;
	
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 17px;
  }
}

@media (max-width: 768px) {
.btn3 {
background-image: url('background-bitton-2.jpg');
    width: 70%;
    height: 3%;
    padding-top: 2% !important;

    font-size: 18px;
  }
}

			
		

@media (max-width: 640px) {
.w3-container {
  width: 100%!important;
	height: 10%!important;
  padding: 2px 2px !important;
  margin: 1px 0 !important;
  box-sizing: border-box !important;
	font-size:16px;
	color:white !important;
			   background: #50394c!important;
}
}

@media (max-width: 640px) {
.pay {
  width: 100%!important;
	height: 100%!important;


  box-sizing: border-box !important;
	font-size:16px;
	color:white !important;
			   background: #50394c!important;

}
}

.textbox-n {

	height: 60%;
  padding: 5px 5px !important;
  margin: 1px 0 !important;
  box-sizing: border-box !important;
	font-size:18px;
	color:black!important;
	  background-color: lightgray !important;


}

@media (max-width: 640px) {
.textbox-n {
  width:100%;

	color:black!important;
	  background-color: lightgray !important;

}
}
.week {

	height: 40px;
  padding: 5px 5px !important;
  margin: 1px 0 !important;
  box-sizing: border-box !important;
	font-size:20px;
	color:black!important;
	  background-color: white !important;


}


table {
  width: 100%;
}

th {

  height: 50px;!important;
	background-color: #50394c !important;
		color:white!important;

		
}

	  @media (max-width: 800px) {
    .textbox-n{

	
width: 95%;
min-width: 240px;
max-width: 260px;
	heigth: 100px;


			
 
    }
  }