@font-face {
    font-family: 'Tellural';
    src: url('font/Tellural-Bold.woff2') format('woff2'),
        url('font/Tellural-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('font/Gilroy-HeavyItalic.woff2') format('woff2'),
        url('font/Gilroy-HeavyItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Balbeer Rustic';
    src: url('font/Balbeer-Rustic.woff2') format('woff2'),
        url('font/Balbeer-Rustic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Bambino';
    src: url('font/Bambino-BlackItalic.woff2') format('woff2'),
        url('font/Bambino-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Futura BdCn BT';
    src: url('font/FuturaBT-BoldCondensed.woff2') format('woff2'),
        url('font/FuturaBT-BoldCondensed.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futura Md BT';
    src: url('font/FuturaBT-Medium.woff2') format('woff2'),
        url('font/FuturaBT-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futura LtCn BT';
    src: url('font/FuturaBT-LightCondensed.woff2') format('woff2'),
        url('font/FuturaBT-LightCondensed.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futura Hv BT';
    src: url('font/FuturaBT-Heavy.woff2') format('woff2'),
        url('font/FuturaBT-Heavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JamesStroker';
    src: url('font/JamesStroker.woff2') format('woff2'),
        url('font/JamesStroker.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}








#divProductos{
    overflow-y: hidden;
    /*white-space: nowrap;*/
    overflow-x: auto;
    height: 100%;  
    width: 100%;
    overflow-x: hidden;   
}
.notif{
    padding: 0px 4px;
    background: #ccc;
    border-radius: 100%;
    border: 0px;
    font-size: 17px;
}
.DivContPro{    
    width: 100%;
    height: auto;    
    padding-bottom: 50px;
}

.list-group-horizontal {
    -ms-flex-direction: row;
    flex-direction: row;
}

.ActivoScroll{
    background-color: #888;
    color: red!important;
}   

.ActivoScrollCl{
    color: #3c3c3c!important;
    border-left: 1px solid #ccc!important;    
    font-size: 25px;
}
.navbar {
    margin: 0px;
}
.navYea{
float: none;
    text-align: center;
    position: relative;
    display: inline-block;
}
body{
    background-color: #f2f2f2;
    background-size: 70%;  
    font-family: "Roboto", sans-serif!important;  
}
.headerUp{
    height: 250px;
    width: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
}
.headerDown{
    height: 250px;
    width: 100%;
        position: absolute;
    left: 0px;
    bottom:0px;
}
.MenuCurva{
    height: 230px;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}
#curva1{
    position: absolute;
    bottom: 0px;
    width: 100%;
    left: 0px;
    top: -190px;
}
#curva1 path{
        fill: #0C90D0;
}
#curva2{
        position: absolute;
    bottom: -150px;
    width: 100%;
    left: 0px;
}
#curva2 path{
        fill: #E6332A;
}
#curva3{
    position: absolute;
    bottom: 0px;
    width: 100%;
    left: 0px;
}
#curva3 path{
        fill: #E6332A;
}
.btn{
    font-weight: 400!important;

}

.nav>li>a:focus, .nav>li>a:hover {
    text-decoration: none;
    background-color: #888;
}
.container{
    z-index: 1;
    position: relative;
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
	background-color: #fff;
}


@media only screen and (max-width: 400px) and (min-width: 341px){
    .boxProd{
            padding: 5px;            
            /* border: 1px solid #ccc; */            
            border-radius: 7px;            
            cursor: pointer;
            
            margin: 5px;
    }
    .boxProd:hover{
        transform: scale(1.1);
        transition:  transform 0.5s;
    }
    .imgProd img{
             
    }
    #menu{
        padding: 26px 10px!important;
        position: relative!important;
    }
    #curva2{
        position: absolute;
        bottom: -44px;
        width: 100%;
        left: 0px;
    }
    #ubicacion {
            padding-top: 0px!important;
            position: relative!important;
        }

        #curva1{
              position: absolute;
            bottom: 0px;
            width: 100%;
            left: 0px;
            top: -78px;  
        }
}
.TexyAux{
    display: none;
}
@media only screen and  (min-width: 10px) and (max-width: 359px) {
    .boxProd{
            padding: 5px;            
            /* border: 1px solid #ccc; */            
                        
            cursor: pointer;            
            margin: 5px;
    }
    .contentProd {
        display: none!important;
    }
.TexyAux{
    display: block!important;
    text-align: center;
    position: relative;
}
    .imgProd{
        width: 100%;
        text-align: center;
    }
    .boxProd:hover{
transform: scale(1.1);
transition:  transform 0.5s;
    }
  .imgProd{
           width: 50%;  
    }
    #menu{
        padding: 26px 10px!important;
        position: relative!important;
    }
    #curva2{
        position: absolute;
        bottom: -44px;
        width: 100%;
        left: 0px;
    }
    #ubicacion {
            padding-top: 0px!important;
            position: relative!important;
        }
         #curva1{
              position: absolute;
            bottom: 0px;
            width: 100%;
            left: 0px;
            top: -78px;  
        }

}
@media only screen and  (min-width: 360px) and (max-width: 699px) {
    .boxProd{
            padding: 5px;
            border-radius: 7px;                                
            cursor: pointer;                        
    }
    .boxProd:hover{
transform: scale(1.1);
transition:  transform 0.5s;
    }
    .imgProd{
           width: 50%;  
    }
    #menu{
        padding: 26px 10px!important;
        position: relative!important;
    }
    #curva2{
        position: absolute;
        bottom: -44px;
        width: 100%;
        left: 0px;
    }
    #curva1 {
        position: absolute;
        bottom: 0px;
        width: 100%;
        left: 0px;
        top: -80px;
    }
    #ubicacion {
            padding-top: 0px!important;
            position: relative!important;
        }
}

@media only screen and (min-width: 700px) and (max-width: 900px) {
    .boxProd{
        padding:5px;     
        cursor: pointer;        
    }
    .boxProd:hover{
transform: scale(1.1);
transition:  transform 0.5s;
    }
    .imgProd img{
        

    }
     #curva2{
            position: absolute;
            bottom: -85px;
            width: 100%;
            left: 0px;
    }
    #ubicacion {
        padding-top: 0px!important;
        position: relative!important;
    }
}

@media only screen and (min-width: 900px) {
    .boxProd{
        padding:5px;                                
        cursor: pointer;        
    }
.boxProd:hover{
transform: scale(1.1);
transition:  transform 0.5s;
    }
    .imgProd img{
        

    }

}

.distribuidor{
    width:100%;
}

.lineaL{
    height:5px;
    background:#24a3dc;
    position:absolute;
    top:31px;
    left:10px;
    border-radius:10px;
}

.lineaR{
    height:5px;
    background:#24a3dc;
    position:absolute;
    top:31px;
    right:10px;
    border-radius:10px;
}

.contentProd{
    /*width:100%;*/
    width: calc(100% - 203px);
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    white-space: normal;
}

#menu{
    padding:80px 10px;        
    position: relative;

}

#distribuidores{
    padding:10px;
    padding-bottom:30px;
    background:#f2f2f2;
}

.img_distribuidores{
    width:40%;
}

.headerMenu{
    position:relative;
    text-align:left;
    padding:10px;
    font-size:30px;
}

.tituloMenu{
    display:inline-block;
    color: #888!important;
}

.priceSpan{
    background:#FF5722;
    color:#fff;
    padding:5px;
    height:25px;
}

.cartSpan{
    background:#000;
    color:#fff;
    padding:5px;
    height:25px;
}

.cartSpan:hover {
    cursor:pointer;
    /*transform:translate(0,-3px) scale(1.3);
    transition: transform 0.2s, margin 0.2s;
    margin-left:4px;*/
}
#ubicacion{
    padding-top: 100px;
    position: relative;
}

body{
    font-family: "Roboto", sans-serif!important;  
    background: #f2f2f2;
}

::-webkit-scrollbar              { display:none; }

.titleText{
    color:#24a3dc !important;
    font-size: 18px;
    font-weight: bold;
}

.backgrounHeader{
    
    opacity: 0.95;
    /*background-color: transparent!important;*/
    /* color: #fff !important; */
    /*border-bottom: 4px solid #FF5722;*/
    /*border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;*/
}
.navbar-default{
    background-color: #FFF!important;    
    height: 80px;
}


.navbar-default .nav > li>a{
    color:#3c3c3c !important;
}

.structTarjeta{
    z-index: 1029;
    position: absolute;
    left: 0px;
    top: 150px;
    width: 100%;
}

.boxAdp{
    padding: 15px;
    background: #fff;
    box-shadow: 0px 3px 10px #3c3c3c;
}

.panel-style{
        border: 2px dashed #FF5722;
    color: #888;
    padding: 15px 1px;
    margin-bottom: 1px;
    font-weight: 700;
}

.project-name{
    cursor: pointer;
}

.project-name:hover{
    color: #f05f40;
}

.titlePanel{
    font-size: 20px;
    font-weight: 700;
}

.btn2{
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: 700;
    background: #888 !important;
    color: #fff;
    border:0px;
}

.otostyl{
        background: #fff;
        color: #888;
}

.RowNew{
    padding: 25px 25px;
    margin: 10px 0px;
    font-size: 20px;
    font-weight: 700;
    color: #24a3dc;
}

.RowNew div{
    cursor: pointer;
    border:2px dashed #FF5722;
    transition: all 0.5s ease;
}

.RowNew div:hover{
    cursor: pointer;
    color: #FF5722;
    border-color: #24a3dc;
    transition: all 1s ease;
}

.sweet-alert{
        box-shadow: 0px 4px 10px #ccc;
}

.bg-1{
    background: #3c3c3c;
    color:#fff;
}

.marcLR{
    margin-left: 0px;
    margin-right: 0px;
}

.border-showdow{
    border-radius: 3px;
    box-shadow: 0px 0px 7px #CCC;
    cursor: pointer;
}

.border-showdow1{
    border-radius: 3px;
    box-shadow: 2px 0px 7px #CCC;
    cursor: pointer;
}

.border-showdow:hover{
    box-shadow: 0px 0px 7px #888;
}

.border-showdow1:hover{
    box-shadow: 2px 0px 7px #888;
}

.titleConten{
    border: 2px dashed #FF5722;
    color: #888;
    padding: 15px;
    
}

.PuntosLinc{
    border-bottom:  2px dashed #24a3dc;
    font-size:     25px;
    width: 80%;
}

.PuntosLinc2{
    margin-top: 40px;
    border-bottom: 2px solid #FF5722;
    width: 90%;
    font-size: 40px;
    padding-bottom: 3px;
    font-weight: bold;
    color: #1d2a71;
}

.titleContenP{
    padding: 27px 10px;
    background: #fff;
    box-shadow: 0px 0px 6px #ccc;
}

.ContenText{
    font-size: 16px;
    font-weight: bold;
    z-index: 3;
    color: #3c3c3c;
}
    
.ContenDesc{
    font-size: 12px;
    font-weight: bold;
    z-index: 3;
    color: #888;
}

.boxCntMnu{
    text-align: left;
    margin-bottom: 3px;
    margin-top: 3px;
    padding-top: 5px;
    padding-bottom: 5px;
    background: #fff;
}

.imgMenu{
    width: 100%;
}

.adapCol{
    padding-left: 3px;
    padding-right: 3px;
}

.col-item-img{
    position: relative;
    display: inline-block;
    width: 35%;
    height: auto;
    padding: 0px;   
}

.col-item-content{
    position: relative;
    display: inline-block;
    width: 65%;
    height: auto;
    padding: 0px;
}

.precioSty{
    position: absolute;
    right: 33px;
    padding: 0px 12px 1px 15px;
    background: #24a3dc;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    color: #fff;
    font-size: 35px;
    font-weight: bold;
    bottom: 5px;
}
.row{
    margin:0px;
}




.pre_inner{
	width:150px;
	height:150px;
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);margin:auto;
	-webkit-filter:url(#goo);
	filter:url(#goo);
	-webkit-animation:rotate-move 3s ease-in-out infinite;animation:rotate-move 3s ease-in-out infinite}
	.dot{width:50px;height:50px;border-radius:50%;background-color:#000;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto}
	.dot-3{background-color:#fc5a1a;-webkit-animation:dot-3-move 2s ease infinite,index 6s ease infinite;animation:dot-3-move 2s ease infinite,index 6s ease infinite}
	.dot-2{background-color:#0083ff;-webkit-animation:dot-2-move 2s ease infinite,index 6s -4s ease infinite;animation:dot-2-move 2s ease infinite,index 6s -4s ease infinite}
	.dot-1{background-color:#d30039;-webkit-animation:dot-1-move 2s ease infinite,index 6s -2s ease infinite;animation:dot-1-move 2s ease infinite,index 6s -2s ease infinite}
	@-webkit-keyframes dot-3-move{
		20%{-webkit-transform:scale(1);transform:scale(1)}
		45%{-webkit-transform:translateY(-18px) scale(.45);transform:translateY(-18px) scale(.45)}
		60%{-webkit-transform:translateY(-90px) scale(.45);transform:translateY(-90px) scale(.45)}
		80%{-webkit-transform:translateY(-90px) scale(.45);transform:translateY(-90px) scale(.45)}
		100%{-webkit-transform:translateY(0px) scale(1);transform:translateY(0px) scale(1)}
	}
	@keyframes dot-3-move{
		20%{-webkit-transform:scale(1);transform:scale(1)}
		45%{-webkit-transform:translateY(-18px) scale(.45);transform:translateY(-18px) scale(.45)}
		60%{-webkit-transform:translateY(-90px) scale(.45);transform:translateY(-90px) scale(.45)}
		80%{-webkit-transform:translateY(-90px) scale(.45);transform:translateY(-90px) scale(.45)}
		100%{-webkit-transform:translateY(0px) scale(1);transform:translateY(0px) scale(1)}
	}
	@-webkit-keyframes dot-2-move{
		20%{-webkit-transform:scale(1);transform:scale(1)}
		45%{-webkit-transform:translate(-16px,12px) scale(.45);	transform:translate(-16px,12px) scale(.45)}
		60%{-webkit-transform:translate(-80px,60px) scale(.45);transform:translate(-80px,60px) scale(.45)}
		80%{-webkit-transform:translate(-80px,60px) scale(.45);transform:translate(-80px,60px) scale(.45)}
		100%{-webkit-transform:translateY(0px) scale(1);transform:translateY(0px) scale(1)}
	}
	@keyframes dot-2-move{
		20%{-webkit-transform:scale(1);transform:scale(1)}
		45%{-webkit-transform:translate(-16px,12px) scale(.45);transform:translate(-16px,12px) scale(.45)}
		60%{-webkit-transform:translate(-80px,60px) scale(.45);transform:translate(-80px,60px) scale(.45)}
		80%{-webkit-transform:translate(-80px,60px) scale(.45);transform:translate(-80px,60px) scale(.45)}
		100%{-webkit-transform:translateY(0px) scale(1);transform:translateY(0px) scale(1)}
	}
	@-webkit-keyframes dot-1-move{
		20%{-webkit-transform:scale(1);transform:scale(1)}
		45%{-webkit-transform:translate(16px,12px) scale(.45);transform:translate(16px,12px) scale(.45)}
		60%{-webkit-transform:translate(80px,60px) scale(.45);transform:translate(80px,60px) scale(.45)}
		80%{-webkit-transform:translate(80px,60px) scale(.45);transform:translate(80px,60px) scale(.45)}
		100%{-webkit-transform:translateY(0px) scale(1);transform:translateY(0px) scale(1)}
	}
	@keyframes dot-1-move{
		20%{-webkit-transform:scale(1);transform:scale(1)}
		45%{-webkit-transform:translate(16px,12px) scale(.45);transform:translate(16px,12px) scale(.45)}
		60%{-webkit-transform:translate(80px,60px) scale(.45);transform:translate(80px,60px) scale(.45)}
		80%{-webkit-transform:translate(80px,60px) scale(.45);transform:translate(80px,60px) scale(.45)}
		100%{-webkit-transform:translateY(0px) scale(1);transform:translateY(0px) scale(1)}
	}
	@-webkit-keyframes rotate-move{
		55%{-webkit-transform:translate(-50%,-50%) rotate(0deg);transform:translate(-50%,-50%) rotate(0deg)}
		80%{-webkit-transform:translate(-50%,-50%) rotate(360deg);transform:translate(-50%,-50%) rotate(360deg)}
		100%{-webkit-transform:translate(-50%,-50%) rotate(360deg);transform:translate(-50%,-50%) rotate(360deg)}
	}
	@keyframes rotate-move{
		55%{-webkit-transform:translate(-50%,-50%) rotate(0deg);transform:translate(-50%,-50%) rotate(0deg)}
		80%{-webkit-transform:translate(-50%,-50%) rotate(360deg);transform:translate(-50%,-50%) rotate(360deg)}
		100%{-webkit-transform:translate(-50%,-50%) rotate(360deg);transform:translate(-50%,-50%) rotate(360deg)}
	}