
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
body{
   background: #E4E4E4   /*linear-gradient( rgba(5, 7, 12, 0.60), rgba(5, 7, 12, 0.60)),*/ 
   url(img/fondo_principal.png) no-repeat center center fixed;
   display:flex;
   align-items: center;
   justify-content: center;
   background-size: cover;
   min-height: 100vh;
    /*background: rgb(86, 87, 88);*/
    font-family: Arial, Helvetica, sans-serif;
    }
    #container{
       /*width: 70%;*/
       float: center;
        width: 1100px;
        margin: 0px auto;
        border: 1px solid black;
     }
     header{
        background: black ;
        min-height: 10px;
        width: 100%;
        image-orientation: flip;
        margin: 0px;
        image-orientation: left;
        /*text-align: left;*/
        line-height: 70px;
        color: goldenrod;
        border-bottom: 2px solid blanchedalmond;
     }
     .header h1{

      font-size: 80px;
     }
     
     nav{
        background: lightblue;
        min-height: 50px;
        border: 1px black;
        border-bottom: 3px solid black;

     }
     nav ul li{ 
        float: left;
        list-style: none;
        margin: 10px;
        line-height: 30px;
     }
     .clearfix{
        clear:both;
     }
    #content{
      float:left;
      width: calc(80% - 90px);
      height: 70%;
      background:  url(img/Imagen_edificios_escultura.png)no-repeat center center fixed;
      padding: 40px;
    }
    
    .article{
      color: white;
      margin-top:15px;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 2px solid #eee;

   .article first-child{
      padding-top: 10px;
      border-top: 2px solid #eee;
   }
   .article h2{
      font-size: 60px;
   }
   
    }
    aside{
      float: left;
      width: calc(20% - 30px);
      min-height: 500px;
      padding-left: 10px;
      padding-right: 10px;
      padding-top: 10px;
      background: orangered;
    }
    footer{
      background:  black;
      min-height: 10px;
      color: goldenrod;
      text-align: center;
    }
    .form-content{
      background: linear-gradient(
         50deg,
         rgba(40,42,55,1) 50%,
         rgba(40,42,55,0.7) ),
         url(img/Imagen_edificios_escultura.png);
         background-position: center;
         background-repeat: no-repeat;
         background-size: cover;
         padding: 50px;
         width: 1000px;
         border-radius: 25px;
    }
   .form-content h2 {
   color: #f4f6f9;
   font-size: 40px;
   margin-bottom: 25 px;
   }
   form{
      display: flex;
      flex-direction: column;
      width: 50%;
   }
   label{
      font-size: 17px;
      color: #959aab;
      margin-bottom: 10px;
   }
   input , textarea {
      padding: 17px 14px;
      background-color: #333646;
      border: 10px;
      font-size: 15px;
      color: #f4f6f9;
      margin-bottom: 20px;
      border-radius: 15px;
   }
   :focus {
      outline: 1px solid #1e92e9;
   }

   .btn {
      background-color: #1e92e9;
      width: 150px;
      align-self: flex-end;
      cursor: pointer;
   }
   .btn:hover {
      background-color: #219bf9;
   }


   .success {
      position: absolute;
      top: 50px;
      color: #00a735;
      font-size: 18px;
   }
   .error{
      position: absolute;
      top: 50px;
      color: #e02d00;
      font-size: 18px;
   }
   @media(max-width:991px) {
      body {
         padding: 30px;
      }
      .form-content {
         width: 100%;
      }
      
      form {
         width: 100%;
   }
   }