body {
	margin: 0;
	padding: 0;
 
  
}
* {box-sizing:border-box}

#main{
	width: 100%;
}

header {
	z-index: 1;
	position: fixed; 
	height: 74px;
	width: 100%;
	background-color: #598840;
	margin: 0;
	top: 0;


	}
	img.logo {
  display: inline-block;
  vertical-align: middle;
  padding-left: 3px;
  padding-top:2px;
  padding-bottom:1px;
  height: 70px;

}
header nav {
	  list-style-type: none;
	  display: inline-block;
    vertical-align: middle;
    width: 70%;
    text-align: right;
    padding-bottom: 20px;

    }

 li {
	text-decoration: none;
	display: inline-block;

}

nav.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
   overflow: hidden;

}
/*///////////////////////////////////////is OKKK/////////////////////////////////////////////*/
 nav.topnav li {float: left;}

 nav.topnav li a {

  display: inline-block;
  color: #fff;
  text-align: center;
  padding-left: 10px;
  text-decoration: none;
  transition: 0.3s;
  font-style: normal;

}

/*video */
video {
  max-width: 100%;
  height: auto;
 
}

#video{

  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;

}



/* mobile nav */

nav.topnav li a:hover {

color: #fff;
border-bottom: 2px solid #eac31c;


}

nav.topnav li.icon {display: none;}

@media screen and (max-width:800px) {
  nav.topnav li:not(:first-child) {display: none;}
  nav.topnav li.icon {
  display:inline-block;
  }
}
/*  en max 800 agrege flot right y padding right */
@media screen and (max-width: 800px) {
  nav.topnav.responsive {position: relative;float:right;padding-right: 10px;}
  nav.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
    padding-right: 5px;
   
  }
  nav.topnav.responsive li {
    float: none;
    display: inline;
    
  }
  nav.topnav.responsive li a {
    display: block;
    text-align: right;
	background-color: #5a7b49;
	color: #fff;
  
  }
   nav.topnav li a:hover {
   color: #eac31c;
}
header nav {
  position: fixed;
}
.logo img {
float: left;
  width: 80%;
}	

}
/* media query for mobile device nav new */

 @media only screen and (max-width: 600px){
	 header nav {
  position: fixed;
} 
	 
	.logo img {
 
  width: 80%;
}
	
 }
	 
/*////////////////////*/

/*fin nav new */
/*general media queries//////////////////////////////////////////////////////*/

/* Extra small devices (phones, 600px and down) */


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 600px) {

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
 
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
 
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

}


/* ////////////////////////////////logo e informacion en top ////*/

div.desc {
  padding: 5px;
  text-align: left;
}
.gald {
	text-align: left;	
}
.resp{ 
  float: left;
  width: 39.99999%;
 
  padding-left: 30px;

}
 	@media only screen and (max-width: 700px) {
  .resp {
    width: 85%;
    margin: 6px 0;
	padding-left: 30px;
  }
  
}

@media only screen and (max-width: 500px) {
  .resp {
    width: 100%;
	padding-left: 10px;
  }  
}


#space{
height: 55px;
}


#gallery {
 height: 150px;
}
#sep {
	height: 10px;
	background-color:#f1f1f1 ;
}

/*center img */
.content img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}
/* boton content pag inicio  */

 .content p a:hover{
	color: #333;
	border: 1px solid #777;	
	background-color: #ff7c23;
	box-shadow: 6px 6px 5px #333;
}


#about{

  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  max-width: 50%;
  height: auto;
    border-radius: 60%;
  

}
/*responsive////////////*/

div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 5px;
  float: left;
 /* width: 24.99999%;*/
  width: 33.33333%;
}

@media only screen and (max-width: 800px) {
  .responsive {
    width: 49.99999%;
    margin:6px 0;
  }
}

@media only screen and (max-width: 540px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
.sep{
  height: 70px;
  clear: both;
}

/* footer////////////////////////////////////////*/

footer {
	margin: 0;
	height: auto;
  width: 100%;
	background-color:#333;
	color: #fff;
	font-size: 16px;
	padding-left: 15px;
	padding-bottom: 10px;
	clear: both;	
}

footer p {
	padding-left: 40px;
	padding-top: 20px; 
	font-weight:normal;

}

 footer p a{
	color: #333;
	border: 2px solid #eac31c;
	text-decoration: none;
	padding:4px;
	border-radius: 5px;
	background-color:#eac31c;
}

 footer p a:hover{
	color: #333;
	border: 1px solid #777;
	background-color: #ff7c23;
	box-shadow: 2px 2px 2px #bab5b5;
}
/*boton de whatsapp fijo///////////////////////////////////////*/
 footer .fa {
  position:fixed;
  width:50px;
  height:50px;
  bottom:50px;
  right:40px;
  background-color:#08e65a;
  color:#FFF;
  border-radius:50px;
  text-align:center;
  font-size:48px;
  z-index:100;

 }

@media only screen and (max-width: 500px){
    .rightColumn {
     width: 100%;
		padding-left: 45px;
		float: none;
		background-color: #fff;
    }
	.leftColumn {
		width: 100%;
		
	}
footer{

  margin: 0;
	height: auto;
  width: 100%;
	background-color:#333;
	color: #fff;
	font-size: 16px;
	padding-left: 15px;  
	padding-bottom: 20px;
	clear: both;	  



}


}
/*Form////////////////////////////*/

/*form */

#cform {
	
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  max-width: 500px;
  margin-left: 5px;
  margin-right: 5px;
}

  
input[type=text] {
  
  width: 100%;
  padding: 12px 20px;
  
  margin: 6px 0;
  display: inline-block;
  border: 2px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  
}

input[type=email] {
  
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 2px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  
  width: 50%;
  padding: 8px 14px;
  margin: 8px 0;
  background-color:#eac31c;
  color: #333;
  border: none;
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #777;
  
  color: white;
  color: #333;
	

}
button {
  width: 49%;
  padding: 10px 16px;
  margin: 8px 0;
  background-color:#eac31c;
  color: #333;
  border: none;
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;

}

  button:hover {
  background-color: darkgray;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  color: black;
  color: #333;
	border: 1px solid #777;	
	background-color: #ff7c23;
	box-shadow: 6px 6px 5px #333;
}

textarea {
  
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  resize: none;
}
form {
padding-top: 30px;
padding-left: 20px;
padding-bottom: 40px;

}	


/*end*/

/*div content*/
.content{
  padding-left: 30px;
}