/*::::::: 00 Fonts ::::::::*/

/*@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');*/

/*@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Prompt:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');*/

@import url('https://fonts.googleapis.com/css2?family=Jura:wght@300..700&display=swap');

/* <weight>: Use a value from 300 to 700*/

.jura {
  font-family: "Jura", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/*::::::: 01 General Elements ::::::::*/
*{
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body{
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-family: "Jura", sans-serif;
    font-style: normal;
    font-weight: 300;
	font-size: 18px;
    font-size: 1.2rem;
	color: #131e27;
    background-color: #111;
}

a, a:hover, a:active, a:visited{
    text-decoration: none;
    color: inherit;
}

.flex{
    display: flex;
    width: 100%;
    position: relative;
    padding: 40px;
    /*border: 1px solid #777;*/
    /*padding: 0 10vw;*/
}

.regular{
    display: flex;
}

.mobile{
    display: none;
}

.mobileTablet{
    display: none;
}

.textLeft{
    text-align: left;
}

.textRight{
    text-align: right;
}

.line{
    width: 10vw;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 3px solid #02baf2;
    margin-top: 20px;
    margin-bottom: 20px;
}
/*:::::::::::: NAVS ::::::::::::*/

#navs{
    flex-flow: column nowrap;
    height: auto;
    padding: 0px;
    position: fixed;
    z-index: 9;
}

#topNav, #mainNav{
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
}

#topNav{
    background: #3d3d3d;
    min-height: 30px;
}
#mainNav{
    background: rgba(0, 0, 0, 0.5);
    min-height: 80px;
}
#mainNav .navContent{
    display: flex;
    flex-flow: row nowrap;
    flex: 1 1 auto;
    align-items: center;
    padding: 10px 40px 10px 40px;
    column-gap: 20px;
    cursor: pointer;
}

#mainNav .navContentMobile, #mainNav .navContentRegular{
    flex-flow: row nowrap;
    flex: 1 1 auto;
    align-items: center;
    padding: 10px 40px 10px 40px;
    column-gap: 20px;
    cursor: pointer;
}

#mainNav .navContentMobile{
    display: none;
}

#mainNav .navContentRegular{
    display: flex;
}

#mainNav img{
    max-width: 200px;
}

#mainNav h1{
    font-size: 1px;
    color: rgba(0, 0, 0, 0.5);
}

#mainNav h3{
    color: #fff;
    font-size: 1.4rem;
    font-weight: 300;
    cursor: pointer;
}

#mainNav i{
    margin-left: 5px;
}

/*:::::::::::: MAINHEAD ::::::::::::*/

#mainHead{
    background: #fff;
    height: auto;
    max-height: 600px;
    top: 30px;
    padding: 0;
}

#mainHead figure{
   width: 100%;
    margin: 0 auto;
    overflow: hidden;
    max-height: 600px;
    box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, 0.6);
}

#mainHead figure video{
    margin-left: auto;
    margin-right: auto;
    object-fit: cover;
    width: 100%    !important;
    height: auto   !important;
    margin: 0px;
}

/*:::::::::::: CONOCENOS ::::::::::::*/

#conocenos{
    min-height: 500px;
    height: auto;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #cecdcd url('../img/bgn-denin.png') repeat center center;
}

#conocenos article{
    display: flex;
    flex-flow: column wrap;
    max-width: 30%;
    padding: 10px 20px 10px 20px;
    height: auto;
    margin-top: 20px;
}

#conocenos article.textLeft, #conocenos article.textRight{
    justify-content: flex-start;
    flex: 1 1 auto;
    max-width: 30%;
    min-width: 200px;
}

#conocenos article.textLeft{
    align-items: flex-start;
}

#conocenos article.textRight{
    align-items: flex-end;
}

#conocenos article.center{
    justify-content: flex-end;
    flex: 2 0 auto;
    min-width: 350px;
}
    #conocenos article.center h2{
        font-size: 1.6rem;
    }

    #conocenos article.center p{
        margin-bottom: 10px;
        margin-top: 10px;
    }
    #conocenos article figure{
        position: relative;
        height: auto;
        width: 80%;
        border-radius: 10px;
        overflow: hidden;
    }
        #conocenos figure img{
            width: 100%;
            height: auto;
            display: block;
        }

#conocenos article aside{
    display: flex;
    flex-flow: column wrap;
    margin-top: 10px;
    padding: 10px;
    justify-content: flex-end;
}
#conocenos article.textLeft aside, #conocenos article.textRight aside{
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.1);
}
#conocenos article.center aside{
    margin-top: 80px;
}
    #conocenos article aside p{
        font-size: 0.9rem;
    }
#conocenos article.center{
    background: url('../img/logo-icon-1-10.png') no-repeat center bottom;
    -webkit-background-size: 70%;
    -moz-background-size: 70%;
    -o-background-size: 70%;
    background-size: 70%;
}

/*:::::::::::: SERVICIOS ::::::::::::*/

#servicios{
    background: #cecdcd url('../img/bgn-lino-2.png') repeat center center;
    min-height: 500px;
    box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, 0.3);
    padding: 40px 0px 40px 0px;
    display: flex;
    flex-flow: column nowrap;
    row-gap: 40px;
}

#serviciosContent{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: flex-start;
    row-gap: 40px;
    padding: 0px 40px;
}

    #servicios header{
        display: flex;
        width: 100%;
        flex-flow: column wrap;
        justify-content: center;
        align-content: center;
        background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 0%, rgba(255,255,255,0.49343487394957986) 50%, rgba(255,255,255,0) 100%);
        row-gap: 20px;
        padding: 20px;
    }
        #servicios header h2{
            text-align: center;
        }

    #servicios article{
        display: flex;
        flex-flow: column nowrap;
        flex: 0 1 30%;
        min-height: 400px;
        min-width: 300px;
        max-width: 500px;
        justify-content: flex-end;
        align-items: center;
        background: rgba(0, 0, 0, 0.8);
        box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
        position: relative;
        overflow: hidden;
    }


    #servicios article img{
        max-width: 100%;
    }

        #servicios .servContent{
            display: flex;
            flex-flow: column nowrap;
            justify-content: flex-start;
            align-items: center;
            border: 1px solid #02baf2;
            width: 100%;
            border-radius: 10px 10px 0 0;
            padding: 10px 20px 10px 20px;
            background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.8) 70%, rgba(0,0,0,0.6) 100%);
            cursor: pointer;
            height: auto;
            min-height: 200px;
            position: absolute;
            bottom: -100px;
            /*transition: <property> <duration> <timing-function> <delay>;*/
            transition: bottom 1s;
            overflow: hidden;
        }

        #servicios article h2{
            font-size: 1.2rem;
            color: #dadada;
            margin-bottom: 10px;
            font-weight: 700;
            font-weight: bold;
            text-align: center;
        }
        #servicios article p{
            font-size: 1rem;
            color: #fff;
            font-weight: 300;
            min-height: 100px;
            display: none;
            margin-bottom: 0;
            /*transition: <property> <duration> <timing-function> <delay>;*/
            transition: margin-bottom 1s;
        }
            #servicios article:hover p{
                display: block;
                margin-bottom: 50px;
            }

            #servicios article:hover .servContent{
                bottom: 0px
            }


    #servicios nav{
        position: absolute;
        bottom:10px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40%;
        border: 1px solid #02baf2;
        border-radius: 5px;
        padding: 6px;
        margin-top: 10px;
        cursor: pointer;
        background-color: #000;
        z-index: 8;
    }
        #servicios nav h5{
            color: #02baf2;
            font-size: 1rem;
            font-weight: 700;
            text-transform: uppercase;
            cursor: pointer;
            z-index: 8;
        }


/*:::::::::::: DESTACADO ::::::::::::*/

#destacado{
    /*background: #a4edaf;*/
    background: #fff url('../img/bgn-salon-2.jpg') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 500px;
    justify-content: center;
    align-items: center;
    background-attachment: fixed;
}
    #destacado article{
        display: flex;
        flex-flow: column wrap;
        flex: 0 1 400px;
        width: 400px;
        height: 400px;
        border-radius: 200px;
        background: rgba(0, 0, 0, 0.7);
        justify-content: center;
        align-items: center;
        text-align: center;
        color: #fff;
        row-gap: 20px;
    }

    #destacado article h4{
        max-width: 80%;
    }

    #destacado article i{
        font-size: 2rem;
    }

/*:::::::::::: CONTACTO ::::::::::::*/

#contacto{
    background: #666768;
    background: #666768 url('../img/bgn-denin-2.png') repeat center center;
    min-height: 600px;
    justify-content: space-between;
    align-items: center;
    flex-flow: row wrap;
}
    #contacto aside{
        display: flex;
        flex-flow: column wrap;
        justify-content: center;
        align-items: center;
        flex: 1 0 50%;
        min-width: 400px;
        min-height: 400px;
        /*border: 1px solid #333;*/
    }

    #contacto address{
        display: flex;
        flex-flow: row wrap;
        flex: 2 0 auto;
        width: 100%;
    }

    #form{
        padding: 20px;
        background: url('../img/bgn-form.png') repeat center center;
        z-index: 2;
        border-radius: 20px 0 0 20px;
    }

        #form article{
            color: #fff;
            margin-bottom: 20px;
        }

        #form input[type="text"], #form input[type="email"], #form input[type="tel"]{
            width: 45%;
            height: 40px;
            margin: 10px 5px;
            border-radius: 5px;
            box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, 0.5);
            padding: 5px 10px;
            border:none;
            font-size: 1.2rem;
        }

        #form textarea{
            width: 92%;
            height: 100px;
            margin-left: 5px;
            border-radius: 5px;
            box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, 0.5);
            font-size: 1.2rem;
            padding: 5px 10px;
        }

        #form input[type="submit"]{
            width: 40%;
            height: 40px;
            border-radius: 10px;
            display: block;
            margin: 10px auto;
            font-size: 1.4rem;
            text-transform: uppercase;
            background: rgba(0, 0, 0, 0.8);
            color: #fff;
            cursor: pointer;
            font-family: "Jura", sans-serif;
            padding: 5px 0 5px 0;
        }

    #mapa{
        box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.3);
    }

    #mapa iframe{
        width: 100%;
        min-height: 400px;
        background: url('../img/poster-mapa.jpg') no-repeat center center;
    }

    address{
        width: 100%;
        display: flex;
        flex-flow: column wrap;
        color: #fff;
        padding: 10px 20px;
    }
        address .datos{
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            align-items: center;
            width: 100%;
            margin-top: 20px;
        }
        address .datos h5{
            margin-right: 40px;
            font-size: 1.2rem;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
        }
        address .datos h5 i{
            margin-right: 10px;
            border-radius: 40px;
            padding: 12px;
            font-size: 1.2rem;
            border: 1px solid #fff;
            background: rgba(0, 0, 0, 0.5);
        }

/*:::::::::::: SERVICIOS ::::::::::::*/

#footer{
    background: #acaeaf;
    min-height: 200px;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}
    #footer img{
        width: 50%;
        max-width: 400px;
    }


/*::::::::::::::: Side Nav :::::::::::::: */

#sideNav{
    position: fixed;
    z-index: 5;
    right: 0px;
    top:60%;
    min-height: 150px;
    width: 70px;
    border-radius: 15px 0 0 15px;
    background:rgba(0, 0, 0, 0.7);
}
    #sideNav div{
        width: 70px;
        height: 80px;
        padding: 10px;
    
    }
    #sideNav i{
        font-size: 4rem;
        color: #02baf2;
    }





/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {

        
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
        .flex{
            padding: 10px;
        }
        .regular{
            display: none;
        }
        .mobile{
            display: flex;
        }
        .mobileUno{
            order:1;
        }
        .mobileDos{
            order:2;
        }
        .mobileTres{
            order:3;
        }
        .mobileCuatro{
            order:4;
        }

        /*:::::::::::   Main Nav :::::::::::::*/

        #mainNav .navContentMobile{
            display: flex;
        }

        #mainNav .navContentRegular{
            display: none;
        }

        /*::::::::::::  Conocenos :::::::::::::*/

        #conocenos article.center{
            background: url('../img/logo-icon-1-10.png') no-repeat center bottom;
            -webkit-background-size: 30%;
            -moz-background-size: 30%;
            -o-background-size: 30%;
            background-size: 30%;
            min-width: 100%;
            padding: 50px 40px 50px 40px;
        }
        #conocenos article.textLeft, #conocenos article.textRight{
            flex-flow: row nowrap;
            justify-content: center;
            align-items: center;
            flex: 1 1 auto;
            max-width: 100%;
            min-width: 400px;
        }
        #conocenos article.textLeft aside, #conocenos article.textRight aside{
            max-width: 60%;
        }

        #conocenos article aside p{
            font-size: 1.2rem;
            padding: 10px;
        }
  

        /*
        #conocenos article, #conocenos article.center {
            flex: 2 0 80%;
        }
        #conocenos figure{
            flex-flow: row nowrap;
            align-items: center;
            width: 100%;
            max-width: 100%;
        }
        #conocenos figure img{
            width: 45%;
        }
        #conocenos figure article{
            flex: 1 0 40%;
        }
        #conocenos figure article h4{
            font-size: 1.2rem;
        }
        #conocenos figure article p{
            font-size: 1rem;
        }
        #conocenos aside.mobileTres{
            margin: 20px 0 20px 0;
        }
        */
        /*:::::::::::::: Servicios ::::::::::::::*/
        #servicios article{
            min-height: 250px;
            min-width: 250px;
        }
        
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
        .regular{
            display: none;
        }
        .mobile{
            display: flex;
        }
        .mobileUno{
            order:1;
        }
        .mobileDos{
            order:2;
        }
        .mobileTres{
            order:3;
        }
        .mobileCuatro{
            order:4;
        }

        /*::::::::::: Main Head :::::::::::::*/

        #mainHead {
            top: 90px;
            background: #000;
        }

        /*::::::::::: Main Nav :::::::::::::*/

        #mainNav {
            min-height: 40px;
            height: 60px;
        }

        #mainNav .navContent{
            padding: 10px 10px 10px 10px;
        }

        #mainNav .navContentMobile{
            display: flex;
            flex: 2 0 auto;
            min-width: 20%;
            padding: 10px 10px 10px 10px;
        }

        #mainNav .navContentRegular{
            display: none;
        }

        #mainNav img{
            max-width: 120px;
        }
    
        #mainNav h3{
            font-size: 0.8rem;
            font-weight: 700;
        }

        /*::::::::::::  Conocenos :::::::::::::*/

        #conocenos article{
            max-width: 100%;
        }

        #conocenos article figure{
            position: relative;
            height: auto;
            width: 120%;
            min-width: 200px;
            border-radius: 10px;
            overflow: hidden;
        }

        #conocenos article.textLeft, #conocenos article.textRight{
            flex-flow: row nowrap;
            justify-content: center;
            align-items: center;
            flex: 1 1 auto;
            max-width: 100%;
            min-width: 400px;
        }
        #conocenos article.textLeft aside, #conocenos article.textRight aside{
            border-radius: 0 10px 10px 0;
            max-width: 60%;
        }

        #conocenos article.center{
            background: url('../img/logo-icon-1-10.png') no-repeat center bottom;
            -webkit-background-size: 50%;
            -moz-background-size: 50%;
            -o-background-size: 50%;
            background-size: 50%;
            padding: 0px 40px 40px 0px;
        }

        #conocenos article aside p{
            font-size: 1rem;
            padding: 10px;
        }
        /*::::::::::::: Servicios :::::::::::::*/
        #servicios article{
            min-height: 250px;
            min-width: 200px;
        }
        #servicios article h2{
            font-size: 1rem;
        }
        #servicios article p{
            font-size: 0.9rem;
        }
        #servicios nav{
            width: 60%;
        }
        #servicios nav h5{
            font-size: 0.9rem;
        }

        /*::::::::::::::: Destacados ::::::::::::*/

        #destacado{
            /*background: #a4edaf;*/
            background: #fff url('../img/bgn-salon-2.jpg') no-repeat -200px center;
            -webkit-background-size: 150%;
            -moz-background-size: 150%;
            -o-background-size: 150%;
            background-size: 150%;
            min-height: 400px;
        }
        
        #contacto {
			padding:0px;
		}

        /*::::::::::::::: Footer :::::::::::::::::*/

        address .datos{
            justify-content: flex-start;
            align-items: center;
            margin-top: 10px;
        }
        address .datos h5{
            margin-right: 10px;
            margin-bottom: 10px;
            font-size: 1rem;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
        }
        
    }
	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {

	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {}