/*!
 * Start Bootstrap - Creative v4.0.0-beta.2 (https://startbootstrap.com/template-overviews/creative)
 * Copyright 2013-2017 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-creative/blob/master/LICENSE)
 */

 body,
 html {
   width: 100%;
   height: 100%;
   max-width: 100vw;
 }

 body {
   font-family: Merriweather, 'Helvetica Neue', Arial, sans-serif
 }

 hr {
   max-width: 50px;
   border-width: 3px;
   border-color: #f05f40
 }

 hr.light {
   border-color: #fff
 }

 a {
   color: #f05f40;
   -webkit-transition: all .2s;
   -moz-transition: all .2s;
   transition: all .2s
 }

 a:hover {
   color: #f05f40
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif
 }

 .bg-primary {
   background-color: #f05f40 !important
 }

 .bg-dark {
   /* background-color: #212529 !important*/
   /* background-color: #ba251e !important*/
   background-color: #ff7f26 !important
 }

 .text-faded {
   color: rgba(255, 255, 255, .7)
 }

 section {
   padding: 8rem 0
 }

 .section-heading {
   margin-top: 0
 }

 ::-moz-selection {
   color: #fff;
   background: #212529;
   text-shadow: none
 }

 ::selection {
   color: #fff;
   background: #212529;
   text-shadow: none
 }

 img::selection {
   color: #fff;
   background: 0 0
 }

 img::-moz-selection {
   color: #fff;
   background: 0 0
 }

 body {
   -webkit-tap-highlight-color: #212529
 }

 #mainNav {
   border-bottom: 1px solid rgba(33, 37, 41, .1);
   background-color: #fff;
   font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
   -webkit-transition: all .2s;
   -moz-transition: all .2s;
   transition: all .2s;
   padding-top: 0;
   padding-bottom: 0;
 }

 #mainNav .navbar-brand {
   font-weight: 700;
   text-transform: uppercase;
   color: #FFF;
   font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif
 }

 #mainNav .navbar-brand:focus,
 #mainNav .navbar-brand:hover {
   color: #FFF
 }

 #mainNav .navbar-nav>li.nav-item>a.nav-link,
 #mainNav .navbar-nav>li.nav-item>a.nav-link:focus {
   font-size: .7rem;
   font-weight: 700;
   text-transform: uppercase;
   color: #212529
 }

 #mainNav .navbar-nav>li.nav-item>a.nav-link:focus:hover,
 #mainNav .navbar-nav>li.nav-item>a.nav-link:hover {
   color: #fff
 }

 #mainNav .navbar-nav>li.nav-item>a.nav-link.active,
 #mainNav .navbar-nav>li.nav-item>a.nav-link:focus.active {
   color: #fff !important;
   background-color: transparent
 }

 #mainNav .navbar-nav>li.nav-item>a.nav-link.active:hover,
 #mainNav .navbar-nav>li.nav-item>a.nav-link:focus.active:hover {
   background-color: transparent
 }

 @media (min-width:992px) {
   #mainNav {
     border-color: transparent;
     background-color: transparent
   }

   #mainNav .navbar-brand {
     color: rgba(255, 255, 255, .7)
   }

   #mainNav .navbar-brand:focus,
   #mainNav .navbar-brand:hover {
     color: #fff
   }

   #mainNav .navbar-nav>li.nav-item>a.nav-link {
     padding: .5rem 1rem
   }

   #mainNav .navbar-nav>li.nav-item>a.nav-link,
   #mainNav .navbar-nav>li.nav-item>a.nav-link:focus {
     /*color: rgba(255, 255, 255, .7);*/
     color: #212529;
   }

   #mainNav .navbar-nav>li.nav-item>a.nav-link:focus:hover,
   #mainNav .navbar-nav>li.nav-item>a.nav-link:hover {
     color: #fff
   }

   #mainNav.navbar-shrink {
     border-bottom: 1px solid rgba(33, 37, 41, .1);
     background-color: #fff
   }

   #mainNav.navbar-shrink .navbar-brand {
     color: #FFF
   }

   #mainNav.navbar-shrink .navbar-brand:focus,
   #mainNav.navbar-shrink .navbar-brand:hover {
     color: #FFF
   }

   #mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link,
   #mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link:focus {
     color: #212529
   }

   #mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link:focus:hover,
   #mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link:hover {
     color: #FFF
   }
 }

 header.masthead {
   padding-top: 10rem;
   padding-bottom: calc(10rem - 56px);
   background-image: url(../img/header.jpg);
   background-position: center center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover
 }

 header.masthead hr {
   margin-top: 30px;
   margin-bottom: 30px
 }

 header.masthead h1 {
   font-size: 2rem
 }

 header.masthead p {
   font-weight: 300
 }

 @media (min-width:768px) {
   header.masthead p {
     font-size: 1.15rem
   }
 }

 @media (min-width:992px) {
   header.masthead {
     height: 100vh;
     min-height: 650px;
     padding-top: 0;
     padding-bottom: 0
   }

   header.masthead h1 {
     font-size: 3rem
   }
 }

 @media (min-width:1200px) {
   header.masthead h1 {
     font-size: 4rem
   }
 }

 .service-box {
   max-width: 400px
 }

 .portfolio-box {
   position: relative;
   display: block;
   max-width: 650px;
   margin: 0 auto
 }

 .portfolio-box .portfolio-box-caption {
   position: absolute;
   bottom: 0;
   display: block;
   width: 100%;
   height: 100%;
   text-align: center;
   opacity: 0;
   color: #fff;
   background: rgba(240, 95, 64, .9);
   -webkit-transition: all .2s;
   -moz-transition: all .2s;
   transition: all .2s
 }

 .portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
   position: absolute;
   top: 50%;
   width: 100%;
   transform: translateY(-50%);
   text-align: center
 }

 .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,
 .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
   padding: 0 15px;
   font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif
 }

 .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
   font-size: 14px;
   font-weight: 600;
   text-transform: uppercase
 }

 .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
   font-size: 18px
 }

 .portfolio-box:hover .portfolio-box-caption {
   opacity: 1
 }

 .portfolio-box:focus {
   outline: 0
 }

 @media (min-width:768px) {
   .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
     font-size: 16px
   }

   .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
     font-size: 22px
   }
 }

 .text-primary {
   color: #f05f40 !important
 }

 .btn {
   font-weight: 700;
   text-transform: uppercase;
   border: none;
   border-radius: 300px;
   font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif
 }

 .btn-xl {
   padding: 1rem 2rem
 }

 .btn-primary {
   background-color: #f05f40;
   border-color: #f05f40
 }

 .btn-primary:active,
 .btn-primary:focus,
 .btn-primary:hover {
   color: #fff;
   background-color: #ee4b28 !important
 }

 .btn-primary:active,
 .btn-primary:focus {
   box-shadow: 0 0 0 .2rem rgba(240, 95, 64, .5) !important
 }

 .btn-reservar {
   background-color: #fff;
   color: #ff7f26;
   padding: 15px 25px;
   text-decoration: none;
   cursor: pointer;
   border: 1px solid #ff7f26;
   margin-top: 10px;
   margin-bottom: 10px;
 }

 .responsive-link {
   display: inline-block;
   /* o block */
   max-width: 100%;
   /* No superar el ancho del contenedor */
   word-wrap: break-word;
   /* Permite romper palabras largas */
   white-space: normal;
   /* Permite saltos de línea */
   overflow: hidden;
   /* Oculta contenido que se desborda */
   text-overflow: ellipsis;
   /* Opcional: añade "..." si se corta */
   box-sizing: border-box;
   /* Incluye padding en ancho */
 }

 .link_naranja a:hover {
   color: #f05f40
 }