html{
  scroll-behavior: smooth;
}

body, html{
  overflow-x:hidden;
  margin: 0;
  padding: 0;
font-family: 'Roboto', sans-serif;
  width:100%;

  }


  /* ------------------------------------------------------------- */


  /* para que subraye los item y te lleve ahi */
  .bottom{
    border-bottom: 2px solid #f17808;
  }

   .navbar {
       background-color: : #333 !important;
      border-bottom: #f17808 4px solid;
      opacity: .9;


  }
  .navbar-brand{
    font-family: 'Satisfy', cursive;
  }
    .navbar-brand img{
      width: 35px;

    }

  /* efecto luz en navbar*/
     .navbar li:hover{
     text-shadow: 0 0 30px #fff;
  }
   .navbar-brand:hover{
     text-shadow: 0 0 30px #fff;
  }


  /* color a los navbarDropdownMenuLink*/
  .dropdown:hover>.dropdown-menu {
    display: block;
    background-color:#333;
    opacity: .9;
    border-radius: 5px;
  }
  .dropdown-menu .dropdown-item:hover{
  color: #f17808!important;
  background: #333;

  }

  /*letra bold y blanca del navbarDropdownMenuLink*/
   .dropdown-menu a{
    font-weight: bold !important;
    color: white  !important;
  }



  /* ------------------------------------------------------------------ */
   /* homeeeeeeeeeeeeeeeeeeeeeee */

 #home-section  {
    background: url('imagenes/lomopizza.jpeg') no-repeat;
    height: 100vh;
    background-size: cover;
    background-attachment: fixed;
    color: #fff;
    position: relative;
    width: 100%;
    -webkit-filter: saturate(250%);
  filter: saturate(250%);

}

.dark-overlay{
    background-color: rgba(0,0,0,.6);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
   height: 100%;
  }


.home-inner{
  width: 100%;
margin-top: 6.25em;
}
.titulo{
font-family: 'Satisfy', cursive;
font-size: 100px;
color: #f17808;
}
.titulo2{
  font-family: 'Satisfy', cursive;
  font-size: 70px;
  color: #f17808;

}


.home-section-direccion{
  font-size: 25px;
  margin-top: 250px;
  color:#F2F2F2;

font-family: 'Roboto', sans-serif;
}
/* fin de homeeeeeeeeeeeeeeeee */
/* botones verde de guasap  */
#boton-acerca-de{
    font-family: sans-serif;
  width: 150px;
  font-size: 15px;
  padding: 10px 20px;
  text-align: center;
    margin: auto;
    letter-spacing: 2px;
    border-radius: 5px;
    transition: all 300ms;
    background: #0f9b0f;
    color: #ffff;

}

#boton-acerca-de:hover{
transform: translate(15px);
box-shadow: 0px 30px 5px -15px rgba(0,0,0,0.3)
}
/* fin boton guasapppppppppp */

/* <!--separador-jumbotron----------> */
.img-jmbo{
  background-image:linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)), url('imagenes/bandera-lgtb.jpg');
  background-size: 100% 100%;
  color: #f17808;
  text-align: center;
  height: 100px;
  padding-top: 15px;

}


 .img-jmbo h5{
  font-family: 'Satisfy', cursive;
  font-size: 40px;
  color: #ffff;



}

/* fin separador  jumbotron*/

/* cardssssssssssssssssssssssssssssssssssssssssssssss */
.container-tarjetas {
  text-align: center;
}
.tarjetas{
  margin-top: 15px;
  margin-bottom: 15px;
  box-shadow: 0px 0px 10px 3px #434343;

  padding: 10px;
  border-radius: 24px 24px 24px 24px;


}
.card-tarjetas{
  margin:30px;
  padding: 30px;
  box-shadow: 0px 0px 10px 3px #434343;

}


.card-tarjetas row{
  box-shadow:
  border-radius: 24px 24px 24px 24px;
-moz-border-radius: 24px 24px 24px 24px;
-webkit-border-radius: 24px 24px 24px 24px;
border: 0px solid #000000;

}

/* efecto zoom imagenes */
.imagen-cards:hover{
  -webkit-transform:scale(1.3);
  transform:scale(1.3);
}

.imagen-cards{
  overflow:hidden;
  transition:transform .5s;
}
/* fin efecto zoom en imagenes */
/* para el logo */
.img-card{
  width: 90px;
}
#imagenes-cards{
  width: 400px;
}


.imagen-cards{
  border-radius: 24px 24px 24px 24px;
-moz-border-radius: 24px 24px 24px 24px;
-webkit-border-radius: 24px 24px 24px 24px;
border: 0px solid #000000;
}
/* para mejorar fotos con mas colores */
.coloresnuevos{
  -webkit-filter: saturate(250%);
filter: saturate(250%);
}
.tarjetas span1{
   color:#f12711;
  font-size: 40px;
  font-family: 'Roboto', sans-serif;
    font-weight: bold;
}
.telefono{
  font-size: 30px;
}



/* para los titulos */
.titulo3{
  margin-top: 50px;
text-align: center;
font-family: 'Satisfy', cursive;
font-size: 80px;
color: #D35400 ;


}
.titulo4{
  font-family: 'Satisfy', cursive;
  font-size: 60px;
  color: #D35400 ;
  text-align: center;


}
/* para titulo cards */
.titulo5{
  font-family: 'Satisfy', cursive;
  font-size: 40px;
  text-align: center;

}


.card-title ul{
  list-style-type: square;
}
#especial{
    font-family: 'Satisfy', cursive;
}
/* modalllllllllllllll HORARIOOOOOOOO */
/* botonmodal */
.botonModal{
  background:#f12711;
   color: white;
    font-size: 18px;
    border-radius: 5px;
    transition: all 300ms;
    box-shadow: 0px 30px 5px -15px rgba(0,0,0,0.1);


}
.botonModal:hover{
transform: translate(15px);
box-shadow: 0px 30px 5px -15px rgba(0,0,0,0.3);
}
.contenedor-modal{
  text-align: center;
}
/* fin boton modal */
/* dentro del modal */
.contenido{
  text-align: center;
  background:#f12711;

  color: white;
}
.btn-footer{
  background:#f12711;

color: white;
}

.modal-body ul{
  color:#000;
}


/* fin de cards */


/* separador con foto*/

#body2{
background-position: center center;
  background-image: url(imagenes/lomopizzapapas.jpeg);
  background-size:cover;
  padding-top: 20px;
  padding-bottom: 30px;
  -webkit-filter: saturate(250%);
filter: saturate(250%);

}
.imagen-lgtb{
  width: 100px;
}
hr{
  background: white;
}

#contact-form{
background:rgba(0,0,0, .6);
color:white;
margin-top: 100px;
padding: 20px;
box-shadow: 0px 0px 10px 3px grey;
  border-radius: 5px;
}
/* sombra */
.otro{
  text-shadow: 0.1em 0.1em 0.2em black;
}

/* fin separador con foto */

/* ubicacion ggogle maps */

.container-maps{
  width: 100%;
  max-width: 62.5em;
  margin: auto;
  margin-bottom: 50px;
  padding: 60px;
  margin-top: 50px;
  box-shadow: 0px 10px 30px rgba(0,0,0,10);
text-align: center;
background: #3ca55c; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #3ca55c, #b5ac49); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #3ca55c, #b5ac49); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
font-family: 'Montserrat', sans-serif;
  border-radius: 5px;

}
/* para logo punto fragueiro */
#imagen-logo{
  margin-bottom: 20px;
  width: 180px;
}
/* boton verde de guasap */

#boton-acerca-de{
  width: 200px;
  font-size: 15px;
  padding: 10px 20px;
  text-align: center;
    margin: auto;
    letter-spacing: 2px;
    border-radius: 5px;
    transition: all 300ms;
    background: #0f9b0f;

}

#boton-acerca-de:hover{
transform: translate(15px);
box-shadow: 0px 30px 5px -15px rgba(0,0,0,0.3)
}

/* para el btn compartir  de ubicacion
*//*boton Compartir*/
#botoncompartir{
  width: 200px;
  font-size: 15px;
  padding: 10px 20px;
  text-align: center;
    margin: auto;
    letter-spacing: 2px;
    border-radius: 5px;
    transition: all 300ms;
  background-color:  #3b5998!important;

}

#botoncompartir:hover{
transform: translate(15px);
box-shadow: 0px 30px 5px -15px rgba(0,0,0,0.3)
}




/* fin ubicacion */
/*footer*/

#footer{
 background-color: black;
  text-align: center;
  color: white;
}
/* fin footer */
/*scrool top*/
.scrollToTop{
  border-radius: 5px;
  position: fixed;
  bottom:90px;
  right: 50px;
  width: 30px;
  height: 50px;
  line-height: 60px;
  text-align: center;
  background:#2E2E2E;
  color:#fff;

}


.scrollToTop:hover{
  background: red;
  color: #fff;
}
/* }fin scrool to top */



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

  #navbar-brand-parrafo{
    visibility: hidden;
  }
  /* titulo naranja */
  .titulo{
    font-size: 35px;

  }
  .titulo2{
    font-size: 23px;
  }


#row2 p{
  font-size: 20px;
}
#row2{
  margin-top: 10px;
}

.img-jmbo h5{
  font-size: 25px;
   margin-top: 1px;
}


.titulo3{
  font-size: 50px;
}
.titulo4{
  font-size: 30px;
}
.titulo5{
  font-size: 30px;
}
.botonModal{
  font-size: 10px;

}

#titulo5{
  font-size: 35px;
}

#mapa-ubicacion{
    width:250px;
     height:200px;
}
#infor{
  text-align: center;
}
.container-maps{
    padding: 30px;
}
#imagen-logo{
  width: 120px;
  margin-bottom: 3px;

}
/* cartel delivery */
#span1{

  font-size: 22px;
}
.telefono{
  font-size: 20px;
}
#spandelivery{
  font-size: 23px;
  margin-left: 30px;
}
}



      @media only screen and (min-width:321px) and (max-width:500px){

        #navbar-brand-parrafo{
           font-size: 24px;
           }
        #ocultar{
          visibility: hidden;
        }
        /* titulo naranja */
        .titulo{
          font-size: 35px;

        }
        .titulo2{
          font-size: 30px;
        }
        .img-jmbo h5{
          font-size: 25px;
        }
      #row1{
        margin-top: 5px;
      }
          #row2{
            font-size: 25px;
         margin-top: 14px;
         }

        #row2 img{
         width: 50px;
           }

       .titulo3{
       font-size: 55px;
        }
       .titulo4{
        font-size: 38px;
        }
        .titulo5{
        font-size: 34px;
         }
         .botonModal{
         font-size: 13px;
       }
      /* cartel delivery */
          #span1{
          font-size: 24px;
            }
         .telefono{
            font-size: 22px;
           }
           #spandelivery{
            font-size: 24px;

            }
            #mapa-ubicacion{
                width:250px;
                 height:200px;
            }
           }
  @media  (min-width:501px) and (max-width:750px){
    #navbar-brand-parrafo{
       font-size: 20px;
       }
       /* titulo naranja */
       .titulo{
         font-size: 55px;

       }
       .titulo2{
         font-size: 42px;
       }
       #row1{
        margin-top: 10px;
        }
         #row2{
           font-size: 25px;
        margin-top: 5px;
        }
        #row2 img{
         width: 50px;
           }
           .img-jmbo h5{
             font-size: 30px;
           }
           .titulo3{
           font-size: 55px;
            }
           .titulo4{
            font-size: 38px;
            }
            .titulo5{
            font-size: 34px;
             }
             .botonModal{
             font-size: 13px;
           }
           /* cartel delivery */
               #span1{
               font-size: 30px;
                 }
              .telefono{
                 font-size: 22px;
                 margin-left: 18px;
                }
                #spandelivery{
                 font-size: 30px;

                 }
  }
    @media  (min-width:751px) and (max-width:900px){
      #navbar-brand-parrafo{
         font-size: 23px;
         }
         /* titulo naranja */
         .titulo{
           font-size: 55px;

         }
         .titulo2{
           font-size: 42px;
         }

          #row1{
            margin-top: 5px;
          }
           #row2{
             font-size: 25px;
          margin-top: 5px;
          }
          #row2 img{
           width: 50px;
             }
             .titulo3{
             font-size: 58px;
              }
             .titulo4{
              font-size: 40px;
              }
              .titulo5{
              font-size: 38px;
               }
               .botonModal{
               font-size: 13px;
             }

    }
      @media  (min-width:901px) and (max-width:1024px){
        #navbar-brand-parrafo{
           font-size: 25px;
           }
           /* titulo naranja */
           .titulo{
             font-size: 59px;

           }
           .titulo2{
             font-size: 47px;
           }
           #row2{
             font-size: 26px;
              margin-top: 55px;
           }
           #row1{
             padding-top:2.5em;
            }

           #row2 img{

            width: 50px;
              }
              .botonModal{
              font-size: 13px;
            }
      }
      @media  (min-width:1025px) and (max-width:1200px){
        #navbar-brand-parrafo{
           font-size: 27px;
           }
           /* titulo naranja */
           .titulo{
             font-size: 75px;

           }
           .titulo2{
             font-size: 50px;
           }
           #row2{
             font-size: 26px;
              margin-top: 6em;
           }
           #row2 img{

            width: 55px;
              }
              .botonModal{
              font-size: 14px;
            }
      }