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


body {
background-color:#f3e5c0;
font-family: Verdana,Helvetica,sans-serif;
font-size:18px;
line-height:20px;
color:#968971;
}

hr {
border-top: 1px solid #e5dcc5;
margin:20px 0;
}

h1, h3 {
font-size:24px;
font-style:italic;
line-height: 30px;
color:#fff;
font-weight: normal;
}


h2 {
font-size:18px;
color:#968971;
font-weight: normal;
}


img{
    width: 100%;
    height: auto;

}

form {
margin:0 auto;
background-color:#f3e5c0;
padding:50px;
}



.container {
margin:0 auto;
width:75%;
background-color:#fff;
overflow: hidden;
padding:30px;
}



    .header {
    background-color:#e5b533;
    border: 1px solid #d7aa30;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    color:#fff;
    padding:20px;
    display: flex;
    flex-direction: column;
    }

        .name {
        font-size:36px;
        font-weight:bold;
        line-height:30px;
        }

        .phone {
        font-size:40px;
        
        padding-top: 5%;
        }

    .main {
            
            padding:15px 30px;
            
        }


        .list {
        margin: 0px 20px 50px 20px;
        line-height: 30px;
        
        }
    

        .list li {
            padding-bottom: 15px;
            list-style-image: url("../img/point.jpg")
        }


        .desta{
        flex: 1;
        color:#e5b533;
        font-size:28px;
        line-height:35px;
        
        }


    .fila {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        font-size: 16px;
        
    }

        .datos {
            width: 250px;
            padding: 15px;
        }

        .datos input {
            width: 200px;
            min-height: 25px;
        }

        .mss {
            width: 100%;
            padding: 15px;
        }

        .mss textarea {
            width: 100%;
            margin-top: 10px;
            border: 1px solid #e5b533;
        }

       input:focus, textarea:focus 
       { outline: none !important; border-color: #e5b533; box-shadow: 0 0 10px #e5b533; color: grey;}


        #boton {
            width: 150px;
            padding: 15px;
            margin-left: 17px;
            margin-bottom: 30px;
            background-color: #e5b533;
            border: 1px solid #d7aa30;
-moz-border-radius: 7px;
    -webkit-border-radius: 7px;
            font-size: 16px;
            color: #fff;
            cursor: pointer;
        }

        #boton:hover {
            color: #e5b533;
            background-color: #fff;
        }

        #boton:visited{
            border: none;
        }

        


    .error {
                color: red;
                text-align: left;
                display: none;
                font-size:12px;
            }


    .abajo {

    font-size:12px;
    padding:25px;
    }

    .negrilla {
    color:#e5b533;	
    	}
    	
    	
    .footer {
    float:right;
    font-size:10px;	
    color:#e5b533;
    }
    	
    .footer a {
    color:#968971;
    text-decoration:none;
    }

    .footer a:hover {
    color:#e5b533;
    text-decoration:none;
    }


  @media (min-width: 992px) {
     
    .header {
     display: flex;
    flex-direction: row;
    justify-content: space-between;
    } 

    .phone {
        
        align-self: center;
        padding-right: 5%;
        padding-top: 0;
        }


    .main {
        display: flex;
       
        align-items: center
    }

        .list {
        flex: 2;
        margin: 0 20px;
        line-height: 30px;
        
        }
  }



 .overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(243, 229, 192, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #e5b533;
  border: 1px solid #fff;
  border-radius: 7px;
  width: 30%;
  position: relative;
  font-size: 14px;
}

.popup h2 {
  margin-top: 0;
  color: #fff;
  padding-bottom: 15px;
  font-weight: bold;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 24px;
  
  text-decoration: none;
  color: #fff;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 50%;
  
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}