/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 16-jun-2020, 10:44:50
    Author     : CSnet
*/

body {
  font-family: 'Work Sans', sans-serif;
  transition: background-color .5s;
  font-size: 14px;
  color: #181818;
}

a {
    color: #000000;
    font-weight: 600;
}

a:hover {
    color: #000000;
}

#main {
  margin-top: 15em;
}

h1#logotipo {
    z-index: 60;
    margin-top: -30px;
    padding: 20px 50px;
    display: block;
    margin: 0;
    width: 100%;
}
h1#logotipo a {
    text-align: left;
    text-indent: -9999em;
    background-image: url(/imagenes/logotipos/logo-designLAB.svg);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: auto 100%;
    outline: none;
    height: 100px;
    display: block;
    padding: 0;
    width: 100%;
}

h1#logotipo-home {
    position: absolute;
    z-index: 60;
    margin-top: -30px;
    padding: 20px 50px;
    display: block;
    margin: 0;
    width: 100%;
    height: 60px;
}
h1#logotipo-home a {
    text-align: left;
    text-indent: -9999em;
    background-image: url(/imagenes/logotipos/logo-designLAB-white.svg);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: auto 100%;
    outline: none;
    height: 100px;
    display: block;
    padding: 0;
    width: 100%;
}

#cuerpo {
    top: 0;
    /*position: absolute;*/
    z-index: 10;
    width: -webkit-fill-available;
    width: -moz-available;
    background: #ffffff;
    position: fixed;
}

/*//////// CARRITO  /////////*/

.cuenta {
    top: 30px;
    position: absolute;
    right: 0;
    display: flex;
    z-index: 100;
}

.usuario {
    display: flex;
}

.usuario a, .usuario a:hover{
    color:  #000000;
}

.usuario-movil {
    margin-top: 1em;
}

.usuario-movil h3 {
    font-size: 1.5em;
}

.usuario-movil a {
    font-size: 1em;
    margin-left: 1em;
}

.usuario-white i, .usuario-white a, .usuario-white a:hover {
    color: #ffffff;
}

.cuenta h3 {
    color: #000000;
    font-size: 1.2em;
    margin: 1em 1em;
    font-weight: 400;
}

.usuario-white h3 {
    color: #ffffff;
}

.cart-wrapper {
    display: block;
    height: 50px;
    width: 50px;
    margin-right: 1em;
}

.cart-body {
    background-image: url(/imagenes/iconos/carrito.svg);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: auto 100%;
    outline: none;
    height: 50px;
    display: block;
    padding: 17px;
    width: 50px;
  
}

.cart-body-white {
    background-image: url(/imagenes/iconos/carrito-white.svg);  
}

.search__container {
    }
    
    
.search__input {
        width: 100%;
        padding: 15px 0px;

        background-color: transparent;
        transition: transform 250ms ease-in-out;
        font-size: 14px;
        line-height: 18px;
        
        color: #000000;
        background-repeat: no-repeat;
        background-size: 18px 18px;
        background-position: 95% center;
        outline: 0;
            border: 1px solid transparent;
            border-bottom: 1px solid transparent;
            border-radius: 0;
        transition: all 250ms ease-in-out;
        backface-visibility: hidden;
        transform-style: preserve-3d;
}       
.search__input::placeholder {
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: #000000;
            font-weight: 400;
            font-size: 1.2em;
        }
        
.search__input:hover, .search__input:focus {
            outline: 0;
            border: 1px solid transparent;
            border-bottom: 2px solid #000000;
            border-radius: 0;
            background-position: 100% center;
        }

        
.search__input-white:hover, .search__input-white:focus {
            border-bottom: 2px solid #ffffff;
        }
        
        .search__input-white::placeholder {
            color: #FFFFFF;
        }


.cart-items {
  color: #3e3e3e;
  position: relative;
  font-weight: 400;
  font-size: 15px;
  text-align: center;
}

.cart-items-white {
  color: #ffffff;
}

/*//////// MENU  /////////*/

.menu {
    font-size: 35px;
    cursor: pointer;
    position: fixed;
    z-index: 100;
    padding: 50px 20px;
    color: #FFF;
}

.menu-black {
    font-size: 35px;
    cursor: pointer;
    position: fixed;
    z-index: 100;
    padding: 50px 20px;
    color: #000;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 200;
  top: 0;
  background: rgba(255, 255, 255, 0.9); /* Green background with 30% opacity */
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 10em;
}

.sidenav ul {
  list-style: none;
  padding-left: 20px;
}

.sidenav a {
    padding: 4px 0px 4px 4px;
    text-decoration: none;
    font-size: 1.2rem;
    color: #212529;
    display: block;
    transition: width 0.1s;
    -webkit-transition: width 0.1s; /* Safari 3.1 to 6.0 */
    font-weight: 500;
}

ul .submenu{
    padding-left: 0;
    margin-bottom: 1.5em;
}
.submenu a {
    font-size: 1em;
    padding: 0 4px;
}
.idiomas a {
    padding: 4px 0px 4px 4px;
    text-decoration: none;
    font-size: .9rem;
    color: #212529;
    display: inline; 
    transition: width 0.1s;
    text-transform: uppercase;
    border-bottom: none;
    -webkit-transition: width 0.1s;
    font-weight: 500;
}

a.sub-active{
    font-weight: 700;
}

a.active{
    font-weight: 600;
    color: #0a0a0a;
}

a.artemasarte {
    font-weight: 800;
    border-bottom: 1px solid #212529 !important;
}

.sidenav a:hover {
  color: #000000;
}

.sidenav .closebtn {
  position: absolute;
  top: 0px;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  border-bottom: none;
  
}

.menu-bajo {
    /*position: sticky;*/
    right: 0;
    bottom: 16px;
    left: 0;
    z-index: 1030;
    padding-left: 20px;
    padding-top: 2em;
}

.menu-bajo a {
    font-size: 1.2em;
    font-weight: 600;
    padding: 0;
    margin-bottom: 2em;
}

.redes {
    border-bottom: 1px solid #212529;
    padding-bottom: 10px;
    display: grid;
}

.redes p {
    font-size: 1.2em;
    font-weight: 600;
    margin-bottom: .2em;
}
.redes a {
    border-bottom: none;
    font-size: 1em;
    margin-bottom: .2em;
    font-weight: 400;
}
.redes img {
    height: 30px;
}

nav {
	}
	
.item input {
	display:none;
	}
.item  label {
	padding: 4px 0px 4px 4px;
    text-decoration: none;
    font-size: 1.2rem;
    color: #212529;
    display: block;
    transition: width 0.1s;
    -webkit-transition: width 0.1s;
    font-weight: 500;
    cursor: pointer;
	}

.item label:hover{
	font-weight: 600;
	}

.item ul{
	overflow:hidden;
	max-height:0;
	transition: all .4s;
	width:100%;		
	}
.item ul li a{
	font-size: 1em;
    padding: 0 4px;
	}

.item ul li a:hover{
	font-weight: 600;
	}


.item input:checked ~ ul{
	height:auto;
	max-height:fit-content;
        max-height: -moz-fit-content;
	transition: all .4s ease;
        margin-bottom: 2em;
	}
	
.item input:checked ~ label span{
	
	}



/*//////// INICIO  /////////*/

.attention{
    text-align: center;
    margin-top: 2em
}

.attention p{
    margin-bottom: .5rem;
}

.fondo-home {
  height: 100vh;
  min-height: 300px;
  background: no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
   transition: transform 2s ease, opacity .5s ease-out;
   background-image: url(/imagenes/inicio/home.jpg);  
}

.entrada-home{
    background: #fff;
    padding: 3em;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.entrada-home h2{
    font-size: 4em;
    font-weight: 900;
}

.entrada-home h3{
    font-size: 2.5em;
    font-weight: 600;
    text-transform: uppercase;
}

.entrada-home h4{
        font-size: 1.5rem;
            margin-bottom: 2em;
}
.entrada-home h4 span{
    font-weight: 600;
}

.idiomas-home a{
    color: #FFFFFF;
    font-weight: 600;
    background: #ffffff26;
}

.fondo-inicio {
  height: 100vh;
  min-height: 300px;
  background: no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
   transition: transform 2s ease, opacity .5s ease-out;
}



#section0{
    background-image: url(/imagenes/inicio/home.jpg);  
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#section1{
    background-image: url(/imagenes/inicio/home1.jpg); 
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#section2{
    background-image: url(/imagenes/inicio/home2.jpg);  
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#section3{
    background-image: url(/imagenes/inicio/home3.jpg);  
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.intro{
    text-align: center;
}

.intro h2{
    font-size: 4em;
    font-weight: 900;
}

.intro h4{
    font-size: 1.5em;
}

.intro a.btn{
    border: 3px solid;
    font-size: 1.5rem;
    margin: 1em;
    font-weight: 600;;
}

#fp-nav{
    left: 50%;
    bottom: 0;
    top: auto !important;
    border: 2px solid;
    color: #fff;
    border-radius: 15px;
    margin-bottom: 2em;
}

#fp-nav ul li a span{
    background: #ffffff;
}


/*//////// HOME  /////////*/

  
.fullscreen-bg {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    overflow: hidden;
    z-index: -100;
}


/*//////// PAGINA DESIGNLAB  /////////*/

.video{    
    position: relative
}

.centro-pagina{
    padding: 10%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}


.pagina-designlab{
    text-align: center;
}

.pagina-designlab h4{
    margin: 2em;
}

.pagina-designlab h2{
    font-size: 4em;
    font-weight: 300;
}

.pagina-designlab h2 span{
    font-weight: 900;
}

.pagina-designlab h3{
    font-size: 4em;
    font-weight: 700;
}

.pagina-designlab p{
    font-size: 1.2em;
    font-weight: 500;
    margin-top: .5em;
}

.list-inline-item a {
    font-weight: 300;
    color: #0a0a0a;
}

.list-inline-item a.active {
    font-weight: 300;
    text-decoration: underline;
}

.bloque-imagen{
    min-height: 500px;
    max-height: 500px;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
    position: relative;
}

.imagen-fondo{
    height: 500px;
    min-height: 300px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center center;
}

.bg-desinlab {
    background-color: #e8e8e8;
}

.responsive-container {
    position: relative;
    width: 100%;
    padding: 2em;
}

.dummy {
    padding-top: 100%; /* forces 1:1 aspect ratio */
}

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    
    text-align:center; /* Align center inline elements */
    font: 0/0 a;
}

.img-container .centerer {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.img-container img {
    vertical-align: middle;
    display: inline-block;
    max-height: 100%;  /* <-- Set maximum height to 100% of its parent */
    max-width: 100%;   /* <-- Set maximum width to 100% of its parent */
    /*    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);*/
    /*top: 50%;*/
    /*position: absolute;*/
    top: 0;
    height: auto;
    left: 0;
    text-align: center;
}


@media (max-width: 1024px) { 
.imagen-fondo{
    height: 400px;
    min-height: 300px;
}

.bloque-imagen{
    min-height: 400px;
    max-height: 400px;
}
}

/*//////// FICHA  /////////*/

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

.datos-ficha h3{
    margin-bottom: 1em;
    font-weight: 600;
}
.datos-ficha p{
    font-size: 1.3em;
}
.boton-ficha{
    display: table;
    width: 200px;
    margin-bottom: 1.5em;
    justify-content: space-between;
}
.volver{
    font-size: 1.4em;
}

.sticky-top{
    position: -webkit-sticky;
    position: sticky;
    top: 15em;
    z-index: 5;
}
/*//////// WORKLIST  /////////*/

.worklist{
    text-align: left;
}

.worklist-texto h3{
    font-weight: 600;
}

.pagina-share h4{
    text-align: center;
    font-size: 3em;
    font-weight: 600;
    margin-bottom: 2em;
}

.pagina-share h4{
    text-align: center;
    font-size: 3em;
    font-weight: 600;
    margin-bottom: 2em;
}

/*//////// FORMULARIOS  /////////*/

.form-1 {
    border: 0px;
    border-bottom: 1px solid #000000;
    border-radius: 0px;
}
  
/*//////// FOOTER  /////////*/

.pie h6{
    font-weight: 600;
}

.pie p{
    margin-bottom: .1em;
    text-transform: capitalize;
    font-weight: 300;
}
.pie a{
    font-weight: 300;
}

.copyright{
    background: #000000;
    margin-top: 3em;
    padding-top: 3em;
    color: #ffffff;
}

.columnas{
    column-count: 2;
    column-gap: 1em;
}

.paginador {
    margin-bottom: 3em;
}

.paginador a{
    color: #343a40;
    border: 1px solid #343a40;
    padding: .375rem .75rem;
    font-weight: 300;
}

.paginador a:hover{
    color: #ffffff;
    border: 1px solid #343a40;
    background: #343a40;
    text-decoration: none;
}

.paginador a.paginaActual{
    color: #ffffff;
    border: 1px solid #343a40;
    background: #343a40;
    text-decoration: none;
}
  
/*//////// RESPONSIVE  /////////*/

@media (max-width: /*767.98px*/840px) { 
    
    #main {
        margin-top: 10em;
    }
    
    h1#logotipo-home {
    padding: 10px 10px 10px 60px;
}
    
    h1#logotipo-home a {
        background-image: url(/imagenes/logotipos/logo-designLAB-responsive.svg);
        height: 100px;
    }
    
    h1#logotipo {
        padding: 10px 10px 10px 60px;
}
    
    h1#logotipo a {
        background-image: url(/imagenes/logotipos/logo-designLAB-responsive-black.svg);
        height: 80px;
    }
    
    .entrada-home {
    position: initial;
    top: auto;
    left: auto;
    transform: initial;
    padding: 3em 1em;
    }

    .cuenta {
        position: initial;
        display: contents;
        top: 0;
        right: 0;
    }
    
    .search__input {
    text-align: left;
    /* width: auto; */
    border-bottom: 1px solid;
    margin-bottom: 2em;
}
   
    .menu-black, .menu {
        padding: 20px 20px;
    }
}

@media (min-width: 1800px){
    .container-designlab {
        max-width: 1700px;
    }
}