@import "font-arial.css";
@import "font-centurygothic.css";
@import "font-gotham.css";

body {
    /* padding-top: 102px; */
    padding-bottom: 20px;
}

body,
html {
    height: 100%;
    font-size: 12pt;
    line-height: 1.5;
    color: #000000;
    font-family: 'Arial';
	scroll-behavior: smooth;
}


/* Set padding to keep content from hitting the edges */

.body-content {
    padding-left: 0;
    padding-right: 0;
	/*
	 ************************
	 * PARALLAX
	 ************************
	 */
    /* The height needs to be set to a fixed value for the effect to work.
   * 100vh is the full height of the viewport. */
    /* height: calc(100vh - 102px); */
	height: 100vh;
    /* The scaling of the images would add a horizontal scrollbar, so disable x overflow. */
    overflow-x: hidden;
    /* Enable scrolling on the page. */
    overflow-y: auto;
    /* Set the perspective to 2px. This is essentailly the simulated distance from the viewport to transformed objects.*/
    perspective: 2px;
    scroll-behavior: smooth;
}


/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/

.dl-horizontal dt {
    white-space: normal;
}

:root {
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
}

.fade-in {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 2s;
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@font-face {
    font-family: 'Century Gothic Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Century Gothic Regular'), url('../fonts/GOTHIC.woff') format('woff');
}

@font-face {
    font-family: 'Century Gothic Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Century Gothic Italic'), url('../fonts/GOTHICI.woff') format('woff');
}

@font-face {
    font-family: 'Century Gothic Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Century Gothic Bold'), url('../fonts/GOTHICB.woff') format('woff');
}

@font-face {
    font-family: 'Century Gothic Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Century Gothic Bold Italic'), url('../fonts/GOTHICBI.woff') format('woff');
}


/* #### Generated By: http://www.cufonfonts.com #### */

@font-face {
    font-family: 'Gotham Book';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham Book'), url('../fonts/GothamBook.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Book Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham Book Italic'), url('../fonts/GothamBookItalic.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Light';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham Light'), url('../fonts/GothamLight.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Light Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham Light Italic'), url('../fonts/GothamLightItalic.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham Medium'), url('../fonts/GothamMedium.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham Medium'), url('../fonts/GothamMedium_1.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Medium Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham Medium'), url('../fonts/GothamMediumItalic.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham Bold'), url('../fonts/GothamBold.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham Bold'), url('../fonts/Gotham-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham Bold Italic'), url('../fonts/GothamBoldItalic.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Black Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham Black Regular'), url('../fonts/Gotham-Black.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Light Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham Light Regular'), url('../fonts/Gotham-Light.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Thin Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham Thin Regular'), url('../fonts/Gotham-Thin.woff') format('woff');
}

@font-face {
    font-family: 'Gotham XLight Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham XLight Regular'), url('../fonts/Gotham-XLight.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Book Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham Book Italic'), url('../fonts/Gotham-BookItalic.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Thin Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham Thin Italic'), url('../fonts/Gotham-ThinItalic.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Ultra Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham Ultra Italic'), url('../fonts/Gotham-UltraItalic.woff') format('woff');
}

@font-face {
    font-family: 'Gotham XLight Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham XLight Italic'), url('../fonts/Gotham-XLightItalic.woff') format('woff');
}


/*
 ************************
 * GENERAL
 ************************
 */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    line-height: 1.15;
}

.strong-text {
    font-weight: 800;
}

.gray-text {
    color: rgb(125, 135, 125);
}

.white-text {
    color: rgb(255, 255, 255);
}

.pink-text {
    color: rgb(173, 28, 131);
}

.middle-content {
    display: flex;
    align-items: center;
}

.menu-selector {
	height: 102px;
}

a.btn-pink {
    color: #fff;
    border-radius: 40px;
    border: none;
    opacity: 1;
    background-color: rgb(173, 28, 131);
}

.btn-download {
    cursor: pointer;
    /* float: right;
    margin-right: 8%; */
}

.btn-pink:hover {
    color: #000;
}

.pd-top-102 {
    padding-top: 102px;
}

.section-space {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 102px;
    /* padding-bottom: 60px; */
}

.pd-40 {
    padding-top: 40px;
}

.pd-bottom-40 {
    padding-bottom: 40px;
}

.inline-block-items {
    display: inline-flex;
    align-items: center;
}

.left-padding-0 {
    padding-left: 0;
}

.right-padding-0 {
    padding-right: 0;
}

.left-text {
    text-align: left;
}

img {
    max-width: 100%;
}

.mt-0 {
    margin-top: 0;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-40 {
    margin-bottom: 40px;
}


/*
 ************************
 * NAVBAR
 ************************
 */

.navbar-qualitas {
    margin-bottom: 0;
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

.navbar-qualitas .navbar-nav>li>a {
    color: #fff;
}

.navbar-qualitas .navbar-toggle {
    margin-top: 5%;
    border: 1px solid #000;
}

.navbar-qualitas .navbar-toggle .icon-bar {
    background-color: #000;
}

.navbar-qualitas .nav>li>a:hover,
.navbar-qualitas .nav>li>a:focus {
    text-decoration: none;
    color: rgb(173, 28, 131);
    background-color: transparent;
}

.hr-menu {
    position: absolute;
    border-top: 1px solid #fff;
    width: calc(100vw - 285px);
    margin-top: 3.5%;
}

.qualitas-logo {
    height: 100%;
    width: 250px;
}


.navbar-fixed-top.scrolled {
  background-color: rgb(240, 241, 241);
   border-color: rgb(240, 241, 241);
}
.navbar-qualitas.scrolled .navbar-nav>li>a {
    color: rgb(125, 135, 125);
}
.navbar-qualitas.scrolled .navbar-nav>li>a.current {
	font-weight: 700;
    color: rgb(173, 28, 131);
}
.navbar-fixed-top.scrolled .hr-menu {
    border-top: 1px solid #000;
}


/*
 ************************
 * HERO
 ************************
 */

.hero-image {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: url("../img/hero.jpg");
    /* Set a specific height */
    height: calc(100vh - 102px);
    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 2s;
}


/* Place text in the middle of the image */

.hero-text {
    text-align: center;
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
	z-index: 100;
}


/*
 ************************
 * TITLE SECTION
 ************************
 */

.title-container {
    text-align: center;
}

.title-container hr {
    border-top: 4px solid rgb(173, 28, 131);
    width: 10%;
}


/*
 ************************
 * COLORS SECTION
 ************************
 */

.color-container {
    display: inline-flex;
}

.colors-section img {
    width: 100%;
}

.color-picture>*:first-child {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90% 100%;
    height: 92px;
}

.color-picture>*:nth-child(2) {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 140px;
    text-align: left;
    color: #fff;
}

.color-picture>*:nth-child(2)>*:first-child {
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 3px;
}

.bg-morado {
    background-image: url(../img/morado.png);
}

.bg-rosa {
    background-image: url(../img/rosa.png);
}

.bg-naranja {
    background-image: url(../img/naranja.png);
}

.bg-azul {
    background-image: url(../img/azul.png);
}

.bg-verde {
    background-image: url(../img/verde.png);
}

.bg-blue {
    background-image: url(../img/blue.png);
}

.bg-car {
    background-image: url(../img/car.png);
}

.bg-moto {
    background-image: url(../img/moto.png);
}

.bg-camioneta {
    background-image: url(../img/camioneta.png);
}

.bg-auto {
    background-image: url(../img/auto.png);
}

.bg-camion {
    background-image: url(../img/camion.png);
}

.bg-bus {
    background-image: url(../img/bus.png);
}


/*
 ************************
 * GALERY
 ************************
 */

.galery>* {
    height: calc(100vh - 300px);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding-left: 0;
    padding-right: 0;
}

.bg-img1 {
    background-image: url("../img/foto1_filtroQ.jpg");
}

.bg-img2 {
    background-image: url("../img/foto2_filtroQ.jpg");
}

.bg-img3 {
    background-image: url("../img/foto3_filtroQ.jpg");
}

.bg-img4 {
    background-image: url("../img/foto4_filtroQ.jpg");
}

.bg-img5 {
    background-image: url("../img/foto5_filtroQ.jpg");
}

.bg-img6 {
    background-image: url("../img/foto6_filtroQ.jpg");
}


/*
 ************************
 * TABLAS y GRAFICAS
 ************************
 */

.bg-img {
    height: 300px;
    background-image: url("../img/tablas.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.bg-tablas {
    background-image: url("../img/tablas.png");
}

.bg-graficas {
    background-image: url("../img/graficas.png");
}

.bg-firma {
    background-image: url("../img/firma.png");
}

.bg-iconografia {
    background-image: url("../img/iconografia.png");
}

.hero-image-photo {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: url("../img/imagenautos.png");
    /* Set a specific height */
    height: calc(100vh - 102px);
    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.bg-camino1 {
    height: 500px;
    background-image: url("../img/camino1.png");
}

.bg-camino2 {
    height: 500px;
    background-image: url("../img/camino2.png");
}

.bg-promos {
    height: 500px;
    background-image: url("../img/promos.png");
}

.bg-ropa1 {
    height: 400px;
    background-image: url("../img/ropa1.png");
}

.bg-ropa2 {
    height: 400px;
    background-image: url("../img/ropa2.png");
}

.bg-ppt1 {
    height: 400px;
    background-position: right;
    background-image: url("../img/ppt1.png");
}

.bg-ppt2 {
    height: 400px;
    margin-left: 30px;
    background-position: left;
    background-image: url("../img/ppt2.png");
}

.bg-ejemplo1 {
    background-position: right;
    background-image: url("../img/ejemplo1.png");
}

.bg-ejemplo2 {
    height: 500px;
    margin-left: 30px;
    background-position: left;
    background-image: url("../img/ejemplo2.png");
}

.bg-quali1 {
    background-image: url("../img/Quali1.png");
}

.bg-quali2 {
    background-image: url("../img/Quali2.png");
}

.bg-quali3 {
    background-image: url("../img/Quali3.png");
}

.bg-descargar {
    background-size: 40%;
    background-image: url("../img/descargar.png");
}

.bg-footer {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: url("../img/footer.png");
    /* Set a specific height */
    height: calc(100vh - 102px);
    /* Position and center the image to scale nicely on all screens */
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
}


/**************************************
	Parralax styles
**************************************/

div.parallax {
    position: relative;
    height: auto;
    padding: 180px 0px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

div.parallax:after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    /* background-color: rgba(0, 0, 0, 0.30); */
    z-index: 100;
    content: ' ';
}

div.parallax h1 {
    color: #fff;
    position: relative;
    z-index: 101;
    font-size: 48px;
    line-height: 1.5;
    font-weight: 700;
    text-align: center;
    /* text-transform: uppercase; */
}


/**************************************
Parralax blocks
**************************************/
div.parallax.parallax-0 {
	height: 100vh;
	background-size: cover;
    background-image: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url("../img/hero.jpg");
}

div.parallax.parallax-1 {
    background-size: 100% 85%;
    background-image: url("../img/fotografia.png");
    background-position: 100% 100%;
}

div.parallax.parallax-2 {
    background-size: cover;
    background-image: url("../img/promos-2.png");
}

div.parallax.parallax-3 {
    background-image: url("../img/ropa-lg.png");
}

@media(max-width: 576px) {
    div.parallax h1 {
        font-size: 36px;
    }
    div.parallax.parallax-1 {
        padding: 60px 0px;
        background-repeat: repeat-y;
        background-image: url("../img/fotografia-vertical-2.png");
    }
	div.parallax.parallax-2 {
		background-size: contain;
	}
    div.parallax.parallax-3 {
        background-position: 100% 100%;
        background-image: url("../img/ropa-xs.png");
    }
    .hero-text {
        top: 70%;
    }
    .title-container hr {
        width: 25%;
    }
    .inline-block-items {
        display: block;
    }
    .color-picture>*:first-child {
        height: 100px !important;
        background-size: 40% 100% !important;
    }
    .color-picture>*:nth-child(2) {
        height: 160px !important;
        background-size: 50% 100% !important;
    }
    .bg-camino1,
    .bg-camino2 {
        height: 300px !important;
    }
    .qualitas-logo {
        height: 100%;
        width: 60% !important;
    }
}

@media(max-width: 768px) {
    .left-text {
        text-align: center;
    }
    .colors-section img {
        width: 40%;
    }
    .color-picture>*:first-child {
        height: 100px;
        background-size: 25% 100%;
    }
    .color-picture>*:nth-child(2) {
        height: 180px;
        background-size: 30% 100%;
    }
    .color-picture>*:nth-child(3) {
        padding-bottom: 20px;
    }
    .middle-content {
        display: block;
    }
    .bg-img {
        height: 250px;
    }
    .bg-ppt1,
    .bg-ppt2,
    .bg-ejemplo1,
    .bg-ejemplo2 {
        margin-left: 0;
        background-position: center;
    }
    .qualitas-logo {
        width: 250px;
    }
}

@media (max-width: 992px) {
    .hr-menu {
        margin-top: 5.2%;
    }
}

@media (min-width: 1600px) {
    .hr-menu {
        margin-top: 2.5%;
    }
    .color-picture>*:first-child {
        height: 100px;
        background-size: 60% 100%;
    }
    .color-picture>*:nth-child(2) {
        height: 150px;
        background-size: 70% 100%;
    }
    .galery>* {
        height: calc(100vh - 500px);
    }
}

@media (min-width: 1200px) {
    .navbar-qualitas .navbar-nav {
        float: none;
    }
    .menu-container {
        display: flex;
        align-items: center;
    }
    .navbar-qualitas .navbar-nav>li>a {
        padding-left: 5px;
        padding-right: 5px;
    }
    .navbar-qualitas .navbar-nav>li:not(:last-child)>a::after {
        content: '|';
        margin-left: 15px;
        color: #fff;
    }
	.navbar-fixed-top.scrolled .navbar-nav>li:not(:last-child)>a::after {
		color: rgb(125, 135, 125);
	}
}


/* toogle memu when md */

@media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,
    .navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in {
        display: block !important;
    }
    .navbar-collapse.in {
        overflow-y: auto;
    }
}