/* custom properties */



:root {

    --primary-black: #222222;

    --secondary-black: #332C22;

    --white: #FFFFFF;

    --contrast-footer: #FCFCFC;

    --size-title: 40px;

    --size-title-mobile: 30px;

    --size-subtitle: 25px;

    --size-subtitle-mobile: 18px;

    --items-nav-footer: 16px;

    --caption: 12px;

    --body: 17px;

    --par: 16px;

    --font-secondary: 'Poiret One';

    --font-principal: 'Nunito', sans-serif;

}



* {

    padding: 0;

    margin: 0;

    box-sizing: border-box;

}



body {

    font-family: var(--font-principal);

    font-size: var(--body-mobile);

}



h1,

h2 {

    font-size: var(--size-title-mobile);

    font-family: var(--font-principal);

    font-weight: 700;

}



h3,

h5 {

    font-size: var(--size-subtitle-mobile);

    font-weight: 300;

}



.header {

    height: 70vh;

}



nav.navbar {

    background-color: #ffffff;

    font-weight: 700;

    transition: 1s;

}



.navbar-brand {

    width: 30%;

}



.navbar-brand img {

    width: 100%;

}



.navbar .nav-item .dropdown-menu {

    margin-top: 0;

}



.navbar .nav-item:hover .nosotros {

    color: #683A8A;

}



.navbar .nav-item:hover .servicios {

    color: #E6B630;

}



.navbar .nav-item:hover .productos {

    color: #B31617;

}



.navbar .nav-item:hover .soluciones {

    color: #1F8EC7;

}

.navbar .nav-item:hover .tienda {

    color: #B31617;

}


.colorn .dropdown-item:hover {

    background-color: rgba(104, 58, 138, 0.7);

}



.colors .dropdown-item:hover {

    background-color: rgba(230, 182, 90, 0.7);

}



.colorp .dropdown-item:hover {

    background-color: rgba(179, 22, 23, 0.7);

}



.colorso .dropdown-item:hover {

    background-color: rgba(31, 142, 199, 0.7);

}



.animated {

    -webkit-animation-duration: 1.5s;

    animation-duration: 1.5s;

    color: white;

    font-size: var(--size-subtitle-mobile);

    font-weight: 600;

}



@-webkit-keyframes fadeInRight {

    from {

        opacity: 0;

        -webkit-transform: translate3d(100px, 0, 0);

        transform: translate3d(100px, 0, 0);

    }

    to {

        opacity: 1;

        -webkit-transform: none;

        transform: none;

    }

}



@keyframes fadeInUp {

    0% {

        opacity: 0;

        -webkit-transform: translate3d(0, 100%, 0);

        transform: translate3d(0, 100%, 0);

    }

    to {

        opacity: 1;

        -webkit-transform: none;

        transform: none;

    }

}



.fadeInUp {

    -webkit-animation-name: fadeInUp;

    animation-name: fadeInUp

}



@-webkit-keyframes fadeInLeft {

    0% {

        opacity: 0;

        -webkit-transform: translate3d(-100%, 0, 0);

        transform: translate3d(-100%, 0, 0);

    }

    to {

        opacity: 1;

        -webkit-transform: none;

        transform: none

    }

}



@keyframes fadeInLeft {

    0% {

        opacity: 0;

        -webkit-transform: translate3d(-100%, 0, 0);

        transform: translate3d(-100%, 0, 0);

    }

    to {

        opacity: 1;

        -webkit-transform: none;

        transform: none

    }

}



.fadeInLeft {

    -webkit-animation-name: fadeInLeft;

    animation-name: fadeInLeft

}



.footer {

    position: relative;

    left: 0;

    bottom: 0;

    width: 100%;

    background-color: #393838;

    color: #FFFFFF;

}



.footer p {

    margin: 2px;

    font-size: var(--items-nav-footer);

    color: white;

}



.footer small {

    color: var(--contrast-footer);

}



.footer .fas,

.footer .fab,

.footer .far {

    background: #FFFFFF;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}



select#inputState,

input[type],

textarea#texto {

    border-radius: 20px;

    background-color: #C4C4C4;

    

}

select#inputState{

color: #fff;

}

input[type]::placeholder,

textarea#texto::placeholder {

    color: white;

}



button[type] {

    border-radius: 20px;

}



.legales {
 	display: flex;  
    flex-flow: row wrap;
    background-color: white;

}



.legales p {

    color: black;

}


.imgstyle {

    transition: transform 0.8s ease;

}



.imgstyle:hover {

    transform: scale(1.1);

}



.btn-group-fab {

    width: 50px;

    height: auto;

    right: 20px;

    bottom: 20px;

    position: fixed;

}



.btn-group-fab div {

    position: relative;

    width: 100%;

    height: auto;

}



.btn-group-fab .btn {

    position: absolute;

    bottom: 0;

    border-radius: 50%;

    display: block;

    margin-bottom: 4px;

    width: 40px;

    height: 40px;

    margin: 4px auto;

}



.btn-group-fab .btn-main {

    width: 50px;

    height: 50px;

    right: 50%;

    margin-right: -25px;

    z-index: 9;

}





/* Media queries */



@media only screen and (min-width: 768px) {

    .navbar-brand {

        width: 12%;

    }

    .navbar-brand img {

        width: 100%;

    }

    body {

        font-size: var(--body);

    }

    h1,

    h2 {

        font-size: var(--size-title);

    }

    h5 {

        font-size: var(--size-subtitle);

    }

    .animated {

        font-size: var(--size-title);

    }

}


@media all and (min-width: 800px) {
  .aviso       { flex: 2 0px; }
  .aviso       { order: 1; }
  .copyrights  { order: 2; } 
  .tyc		   { order: 3; }
}

@media only screen and (min-width: 1024px) {

    .header {

        height: 70vh;

    }

    h6 {

        font-size: var(--size-subtitle);

    }

    h3,

    h1,

    h2 {

        font-size: var(--size-title);

    }

    h5 {

        font-size: var(--size-subtitle);

    }

    .navbar .nav-item .dropdown-menu {

        display: none;

        border: transparent;

    }

    .navbar .nav-item:hover .dropdown-menu {

        display: block;

    }

    .navbar .nav-item .dropdown-menu {

        margin-top: 0;

    }
	.aside { flex: 1 0 0;}

}