/*
 * Fonts
 */
 
 @font-face {
	font-family: GilroyLight;
	src: url('../fonts/Gilroy-Light.otf');
}

@font-face {
	font-family: GilroyBold;
	src: url('../fonts/Gilroy-ExtraBold.otf');
}

/*
 * Base structure
 */

html,
body {
  height: 100%;
  background-color: #fff;
}

body {
  color: #000;
  text-align: center;
  font-family: GilroyLight, sans-serif;
}

/* Extra markup and styles for table-esque vertical and horizontal centering */

.site-wrapper {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
  padding: 90px 20px 20px 20px;
}

.site-wrapper-inner {
  display: table-cell;
  vertical-align: top;
  background: url('../img/home/bg-home-green.png');
  background-size: contain;
}

.cover-container {
  margin-right: auto;
  margin-left: auto;
}

.site-wrapper-inner-pink {
  background: url('../img/home/bg-home-pink.png');
  background-size: contain;
}

.float-left {
	width: 50%;
	float: left;
	text-align: right;
}

.float-left .menu-heading {
	font-size: 27px;
	font-family: GilroyBold, sans-serif;
	color: #000;
	padding-right :30px;
}

.float-left .menu-heading a {
	color: #000;
	text-decoration: none;
}

.float-right {
	width: 50%;
	float: right;
	text-align: left;
}

.float-right .menu-heading {
	font-size: 27px;
	font-family: GilroyBold, sans-serif;
	color: #eb5f6f;
	padding-left :30px;
}

.float-right .menu-heading a {
	color: #eb5f6f;
	text-decoration: none;
}

/* Padding for spacing */

.inner {
  padding: 1rem;
}

.no-padding {
  padding-left: 0px;
  padding-bottom: 0px;
  padding-right: 0px;
}

.total-no-padding {
  padding-left: 0px;
  padding-bottom: 0px;
  padding-right: 0px;
  padding-top: 0px;
}

/*
 * Header
 */

.masthead {
  padding-bottom: 20px;
  background: #fff;
}

.masthead-brand {
  margin-bottom: 0;
}

.nav-masthead .nav-link {
  padding: .25rem 0;
  font-weight: bold;
  color: #000;
  background-color: transparent;
}

.nav-masthead .nav-link.social {
  margin-top: 12px;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: #000;
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}

.nav-masthead .active {
  color: #000;
  border-bottom-color: #000;
}

@media (min-width: 48em) {
  .masthead-brand {
    float: left;
  }
  .nav-masthead {
    float: right;
  }
}

/*
 * Cover
 */

.cover {
  padding: 0 1.5rem;
}

.cover .btn-lg {
  padding: .75rem 1.25rem;
  font-weight: bold;
}

.cover-heading {
	font-size: 90px;
	font-family: GilroyBold, sans-serif;
	color: #000;
}

.cover-heading span {
	color: #b2d551;	
}

/*
 * Footer
 */

.mastfoot {
  color: rgba(255,255,255,.5);
}


/*
 * Rotulacion Page
 */

.bg-rotulacion-1 {
  background: url('../img/rotulacion/bg-rotulacion-1.jpg');
  background-size: contain;
}

.bg-rotulacion-2 {
  background: url('../img/rotulacion/bg-rotulacion-2.jpg');
  background-size: contain;
}

.bg-rotulacion-3 {
  background: url('../img/rotulacion/bg-rotulacion-3.jpg');
  background-size: contain;
}

.bg-rotulacion-4 {
  background: url('../img/rotulacion/bg-rotulacion-4.jpg');
  background-size: contain;
}

.bg-rotulacion-5 {
  background: url('../img/rotulacion/bg-rotulacion-5.jpg');
  background-size: contain;
}

.bg-rotulacion-6 {
  background: url('../img/rotulacion/bg-rotulacion-6.jpg');
  background-size: contain;
}

.rotulacion-heading {
	font-size: 30px;
	font-family: GilroyBold, sans-serif;
	color: #fff;
}

.rotulacion-heading-span {
	font-size: 15px;
	font-family: GilroyLight, sans-serif;
	color: #fff;	
}

.bg-rotulacion-5 .rotulacion-heading,
.bg-rotulacion-5 .rotulacion-heading-span {
	color: #000;
}

/*
 * Branding Page
 */

.bg-branding-1 {
  background: url('../img/branding/bg-branding-1.jpg');
  background-size: cover;
  background-position: center center;
}

.bg-branding-2 {
  background: url('../img/branding/bg-branding-2.jpg');
  background-size: cover;
  background-position: center center;
}

.bg-branding-3 {
  background: url('../img/branding/bg-branding-3.jpg');
  background-size: cover;
  background-position: center center;
}

.bg-branding-4 {
  background: url('../img/branding/bg-branding-4.jpg');
  background-size: cover;
  background-position: center center;
}

.bg-branding-5 {
  background: url('../img/branding/bg-branding-5.jpg');
  background-size: cover;
  background-position: center center;
}

.bg-branding-6 {
  background: url('../img/branding/bg-branding-6.jpg');
  background-size: cover;
  background-position: center center;
}

.bg-branding-7 {
  background: url('../img/branding/bg-branding-7.jpg');
  background-size: cover;
  background-position: center center;
}

.bg-branding-8 {
  background: url('../img/branding/bg-branding-8.jpg');
  background-size: cover;
  background-position: center center;
}

.bg-branding-9 {
  background: url('../img/branding/bg-branding-9.jpg');
  background-size: cover;
  background-position: center center;
}

.bg-branding-10 {
  background: url('../img/branding/bg-branding-10.jpg');
  background-size: cover;
  background-position: center center;
}

.bg-branding-11 {
  background: url('../img/branding/bg-branding-11.jpg');
  background-size: cover;
  background-position: center center;
}

.bg-branding-12 {
  background: url('../img/branding/bg-branding-12.jpg');
  background-size: cover;
  background-position: center center;
}

.bg-branding-13 {
  background: url('../img/branding/bg-branding-13.jpg');
  background-size: cover;
  background-position: center center;
}

.bg-branding-14 {
  background: url('../img/branding/bg-branding-14.jpg');
  background-size: cover;
  background-position: center center;
}

.bg-branding-15 {
  background: url('../img/branding/bg-branding-15.jpg');
  background-size: cover;
  background-position: center center;
}

.bg-branding-16 {
  background: url('../img/branding/bg-branding-16.jpg');
  background-size: cover;
  background-position: center center;
}

.bg-branding-17 {
  background: url('../img/branding/bg-branding-17.jpg');
  background-size: cover;
  background-position: center center;
}

.bg-branding-18 {
  background: url('../img/branding/bg-branding-18.jpg');
  background-size: cover;
  background-position: center center;
}

.bg-branding-19 {
  background: url('../img/branding/bg-branding-19.jpg');
  background-size: cover;
  background-position: center center;
}

.bg-branding-20 {
  background: url('../img/branding/bg-branding-20.jpg');
  background-size: cover;
  background-position: center center;
}

.bg-branding-21 {
  background: url('../img/branding/bg-branding-21.jpg');
  background-size: cover;
  background-position: center center;
}

.bg-branding-22 {
  background: url('../img/branding/bg-branding-22.jpg');
  background-size: cover;
  background-position: center center;
}

.bg-branding-23 {
  background: url('../img/branding/bg-branding-23.jpg');
  background-size: cover;
  background-position: center center;
}

.bg-branding-24 {
  background: url('../img/branding/bg-branding-24.jpg');
  background-size: cover;
  background-position: center center;
}

.bg-branding-25 {
  background: url('../img/branding/bg-branding-25.jpg');
  background-size: cover;
  background-position: center center;
}

.bg-branding-26 {
  background: url('../img/branding/bg-branding-26.jpg');
  background-size: cover;
  background-position: center center;
}

.bg-branding-27 {
  background: url('../img/branding/bg-branding-27.jpg');
  background-size: cover;
  background-position: center center;
}

.bg-branding-28 {
  background: url('../img/branding/bg-branding-28.jpg');
  background-size: cover;
  background-position: center center;
}

.bg-branding-29 {
  background: url('../img/branding/bg-branding-29.jpg');
  background-size: cover;
  background-position: center center;
}

.branding-heading {
	font-size: 16px;
	font-family: GilroyBold, sans-serif;
	color: #000;
	display: none;
}

.branding-heading-span {
	font-size: 14px;
	font-family: GilroyLight, sans-serif;
	color: #000;	
	display: none;
}

.branding-center-1,
.branding-center-2,
.branding-center-3,
.branding-center-4,
.branding-center-5,
.branding-center-6,
.branding-center-7,
.branding-center-8,
.branding-center-9,
.branding-center-10,
.branding-center-11,
.branding-center-12,
.branding-center-13,
.branding-center-14,
.branding-center-15,
.branding-center-16,
.branding-center-17,
.branding-center-18,
.branding-center-19,
.branding-center-20,
.branding-center-21,
.branding-center-22,
.branding-center-23,
.branding-center-24,
.branding-center-25,
.branding-center-26,
.branding-center-27,
.branding-center-28,
.branding-center-29      {
	width:60%;
	height: 300px;
	cursor: pointer;
	display: block;
	margin: 0px auto;
}

.cursor-pointer {
	cursor: pointer;
}

#menu-principal {
	padding-top: 20px;
}


/*
 * Impresion Page
 */

#impresion .float-left .menu-heading {
	font-size: 27px;
	font-family: GilroyBold, sans-serif;
	color: #fff;
	padding-right :30px;
}

#impresion .float-right .menu-heading {
	font-size: 18px;
	line-height: 30px;
	font-family: GilroyBold, sans-serif;
	color: #000;
	padding-left :30px;
}

.site-wrapper-inner-impresion {
  background: url('../img/impresion/bg-impresion.jpg');
  background-size: cover;
  background-position: center center;
}


/*
 * Diseno Page
 */

#diseno .float-left .menu-heading {
	font-size: 27px;
	font-family: GilroyBold, sans-serif;
	color: #fff;
	padding-right :30px;
}

#diseno .float-right .menu-heading {
	font-size: 18px;
	line-height: 30px;
	font-family: GilroyBold, sans-serif;
	color: #000;
	padding-left :30px;
}

.site-wrapper-inner-diseno {
  background: url('../img/diseno/bg-diseno.jpg');
  background-size: cover;
  background-position: center center;
}

/*
 * Contacto Page
 */

#contacto .cover-heading {
	font-size:15px;
	display: initial;
}

#contacto .div-info {
	display: -webkit-inline-box;
	padding: 10px 15px;
}

#contacto .div-info-medio {
	border-left: 2px solid #000;
	border-right: 2px solid #000;
}

#contacto .div-info-medio .cover-heading {
	font-family: GilroyLight, sans-serif;
}

.site-wrapper-inner-contacto {
  background: url('../img/contacto/bg-contacto_1.jpg');
  background-size: cover;
  background-position: center center;
}

/*
 * Affix and center
 */

@media (min-width: 40em) {
  /* Pull out the header and footer */
  .masthead {
    position: absolute;
    top: 0;
    left: 0;
  }
  .mastfoot {
    position: fixed;
    bottom: 0;
  }
  /* Start the vertical centering */
  .site-wrapper-inner {
    vertical-align: middle;
  }
  /* Handle the widths */
  .masthead,
  .mastfoot,
  .cover-container {
    width: 100%; /* Must be percentage or pixels for horizontal alignment */
  }
}

@media (min-width: 62em) {
  .masthead,
  .mastfoot,
  .cover-container {
    /*width: 42rem;*/
  }
}

@media screen and (max-width: 425px) {
    .nav-masthead .nav-link + .nav-link { 
        margin-left:5px; 
    }
    .site-wrapper { 
        display:block; 
        padding:20px;
        height: auto;
        min-height: auto;
    }
    .site-wrapper-inner {
        display:block;
    }
    .cover-heading {
        font-size: 40px;
        padding: 70px 0px;
    }
    .float-right,
    .float-left {
        padding:70px 10px;   
    }
    .float-right .menu-heading {
        font-size: 16px;
        padding-left: 0px;
    }
    .float-right .menu-heading a img {
        width: 40px;
    }
    .float-left .menu-heading {
        font-size: 16px;
        padding-right: 0px;
    }
    .float-left .menu-heading a img {
        width: 40px;
    }
    .nav-masthead .nav-link img {
        width:80%;
    }
    .nav-masthead .nav-link.social {
        margin-top:8px;
    }
    #impresion .float-left .menu-heading {
        font-size:18px;
        padding-right: 10px;
    }
    #impresion .float-right .menu-heading{
        font-size:15px;
        padding-left: 5px;
    }
    #diseno .float-left .menu-heading {
        font-size:18px;
        padding-right: 10px;
    }
    #diseno .float-right .menu-heading{
        font-size:15px;
        padding-left: 5px;
    }
    .bg-branding-20 {
        background-position: center 70px;
    }
    .bg-rotulacion-2,
    .bg-rotulacion-3,
    .bg-rotulacion-4,
    .bg-rotulacion-5,
    .bg-rotulacion-6 {
        background-size: cover;
        padding: 200px 0px;
    }
    .bg-rotulacion-1 {
        background-size: cover;
        padding-bottom: 255px;
    }
    .bg-rotulacion-1 .cover {
        padding-top: 100px;
    }
    .rotulacion-heading {
        font-size:15px;
    }
    .rotulacion-heading-span {
        font-size:12px;
    }
    .branding-heading-span {
        font-size:11px;
    }
    .branding-heading {
        font-size:12px;
    }
    #contacto .div-info {
        display:block;
    }
    #contacto .div-info-medio{
        border-left: 0px solid #000;
        border-right: 0px solid #000;
        border-top: 2px solid #000;
        border-bottom: 2px solid #000;
    }
    #div-info-general {
        width: 60%;
        margin: 0px auto;
    }
    .site-wrapper-inner-contacto {
        background-position: center 84px;
    }
}

@media screen and (max-width: 375px) {
    .float-right .menu-heading a img {
        display:block;   
    }
    .nav-masthead .nav-link.social {
        margin-top:0px;
    }
    #impresion .float-right .menu-heading {
        font-size: 11px;
        padding-left: 0px;
    }
    #impresion .float-left .menu-heading {
        font-size:12px;
    }
    #diseno .float-right .menu-heading {
        font-size: 11px;
        padding-left: 0px;
    }
    #diseno .float-left .menu-heading {
        font-size:12px;
    }
}

@media screen and (max-width: 320px) {
    .rotulacion-heading-span {
        font-size:9px;
    }
    .branding-heading-span {
        font-size:10px;
    }
    .branding-heading {
        font-size:11px;
    }
}