body{
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 18px;
  text-align:justify;
}
*{
  margin: 0;
  padding: 0;
}

p{
  padding-left: 5%;
  padding-right: 5%;
  text-align: justify;
  justify-content: space-between;
}

li{
text-align: left;
}
.img-fluid{
  width: 689px;
  margin-left: 10%;
  border-radius: 5px;
}
.img-fluid:hover{transform:translateX(-9px);
transition:ease  1s;}

p:hover{transform: translateY(-11px);transition: ease 2s;}


#contenedorres{
    margin-left:70%;
  }
  .contenedoor {
    display: grid;
    height: 100px;
    grid-template-columns: .22fr  1fr ;
    grid-template-rows: 0.06fr 1;
    grid-template-areas:
      "nav nav nav "
      "sidebar main main "
      "footer footer footer  ";}

  nav {
    grid-area: nav;
  }
  main {
    grid-area: main;
  }
  #sidebar {
    grid-area: sidebar;
    width: 97%;
    
  }
  footer {
    padding: 3%;
    grid-area: footer;
    background-color: #2A3B58;
  }
  /*Footer*/
 .blog-footer{
 
  color: white;
  text-align: center;

  border-top: .05rem solid #e5e5e5;
}
#pie{
  text-align: center;
}

#coso{
  width: auto;
  background-color:#EEEEEE;
}
  

  /*navbar*/
  .navbar{
    background-color:#2A3B58
  }
  .navbar .navbar-brand{
    color:white;
    margin-left: 5px;
  }
   
 
  
  #BarraIzquierda{
    /*width: 10000%;*/
    height: 100%;
    background-color:#EEEEEE; 
  
  }

  .nav-item{
    width: 100%;
    margin-top: 2%;
    margin-bottom: 1%;
  }
  .nav-item:hover{background-color:#acb1bb;}

 /*pagina portafolio*/
 #inicio{
   text-align: center;
   color: white;
   padding: 20%;
   font-size: xx-large;
 }
/*
 .banner{
  background-image: url("img/portafolio.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  height: auto; 
}
.banner .banner-box{
    width: 90%;
    height: 100%;
    background: rgb(0, 0, 0,0.7);
    display: flex;
    align-items:center;
    text-align: right;
    width: 100%;
}
*/

 .banner{
   background-image: url("img/portafolio.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   height: auto; 
   width: 96%;  
   margin-left: 4%;
   margin-right: 0%;
   margin-bottom: 0%;
   
 }
 .banner .banner-box{
     width: 90%;
     height: 100%;
     background: rgb(0, 0, 0,0.7);
     display: flex;
     align-items:center;
     text-align: right;
     width: 100%;
 
 }
 
 .banner .banner-box h5{
   
 color: whitesmoke;
 font-size: 1.8rem;
 }
 
 /*AREA DE @MEDIAS*/ 
 
 /*pantallas movil*/
 @media screen and (max-width:800px){
   .banner{
     height: 100%;
     width: 100%;
   }
   
 }
 @media (max-width:700px){
    :root {
      --main-radius: 5px;
      --main-padding: 7%;
      }

      #BarraIzquierda{
        width: 0px;
        height: 0px;
        visibility: hidden;
      }
      #esconder{
        width: 0px;
        height: 0px;
        visibility: hidden;
    
      }
      .img-fluid{
        width: 299px;
        margin-left: 10%;
        border-radius: 5px;
        
      }
      
      p{
        padding-left: 9%;
        padding-right: 9%;
        text-align: justify;
        -webkit-hyphens: auto;
        hyphens: auto;
      }

      li{
      text-align: justify;
      }
      
      #div5{
        padding-top: 6%;
      }
      
      #divPortafolio{
        margin-bottom: 0;
        height: 192%;
      }
      .social{
        visibility: hidden;
      }
      #portafolio-pie{
        display: none;
      }

      .banner{
        background-image: url("img/portafolio.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        height: 100%; 
        width: 100%;  
        margin-left: 0%;
        margin-right: 0%;
        margin-bottom: 0%;
      }
      .banner .banner-box{
          width: 100%;
          height: 100%;
          background: rgb(0, 0, 0,0.7);
          display: flex;
          align-items:center;
          text-align: right;
          width: 100%;
      
      }
      


      
}

 @media only screen and (max-width: 750px) {
    .contenedoor {
    
      grid-template-columns: 1fr;
      grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr;
      grid-template-areas:
        "nav"
        "sidebar"
        "main"
        "footer";}
      #div5{
        width: 100%;}
    p{
      text-align:justify;}
}
 

 /*pantalla PC*/
 @media screen and (min-width:701px){
   #hamburguesa{
     visibility: hidden;
   }
   #BarraIzquierda{
     width: 125%;
     height: 100%;
     visibility: visible;
   }
    #esconder{
      width: auto;
      height: auto;
      visibility: visible; 
    }
    #contenido{
     text-align:left;
   }
   #div5{
    padding-left: 7%;
    padding-top: 2%;
  }
  
  
}