/***** FONTS *****/

@font-face {
	font-family: 'light';
	src: url('fonts/DINPro-Light.eot');
	src: url('fonts/DINPro-Light.eot?#iefix') format('embedded-opentype'),
		url('fonts/DINPro-Light.woff2') format('woff2'),
		url('fonts/DINPro-Light.woff') format('woff'),
		url('fonts/DINPro-Light.ttf') format('truetype'),
		url('fonts/DINPro-Light.svg#DINPro-Light') format('svg');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'regular';
	src: url('fonts/DINPro-Regular.eot');
	src: url('fonts/DINPro-Regular.eot?#iefix') format('embedded-opentype'),
		url('fonts/DINPro-Regular.woff2') format('woff2'),
		url('fonts/DINPro-Regular.woff') format('woff'),
		url('fonts/DINPro-Regular.ttf') format('truetype'),
		url('fonts/DINPro-Regular.svg#DINPro-Regular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'bold';
	src: url('fonts/DINPro-Bold.eot');
	src: url('fonts/DINPro-Bold.eot?#iefix') format('embedded-opentype'),
		url('fonts/DINPro-Bold.woff2') format('woff2'),
		url('fonts/DINPro-Bold.woff') format('woff'),
		url('fonts/DINPro-Bold.ttf') format('truetype'),
		url('fonts/DINPro-Bold.svg#DINPro-Bold') format('svg');
	font-weight: bold;
	font-style: normal;
}

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

html, body{
	margin:0;  
	padding:0;
}

body{
    /*
    background-image: url(../images/bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    */
    background-color: #fff;
    font-family:'light', Helvetica, Arial, sans-serif;
	text-align:center;
}

a{
	outline:none;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.container{
	max-width:1000px;
	padding-left:15px;
	padding-right:15px;
	position:relative;
	z-index:1;
}

img.img-responsive{
	display:inline-block;
}

.both{
	clear:both;
}

/***** HEADER *****/

.header{
    background: url(../images/bg_navbar.png) top repeat-x;
    height: 111px;
    padding-top: 30px;
    border-bottom: none;
    margin-bottom: 0px;
    position: fixed;
}

.nav.navbar-nav{
    padding-top: 7px;
}

.nav.navbar-nav li a{
    font-family:'regular', Helvetica, Arial, sans-serif;
    font-size: 11.5px;
    letter-spacing: 2px;
    margin-left: 25px;
    color: #fff;
    padding: 0px;
}

/*** safari *****/
@media not all and (min-resolution:.001dpcm) {
    .nav.navbar-nav li a{
        font-family:'bold', Helvetica, Arial, sans-serif;
    }
}

.nav.navbar-nav li a:hover{
    color: #ff9541;
    background: none;
}

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

.nav.navbar-nav li a:visited,
.nav.navbar-nav li a:active,
.nav.navbar-nav li a:link{
    outline: none;
    background: none;
}

.nav.navbar-nav li a.comprar{
    color: #ff9541;
    padding: 2px 18px;
    margin-top: -4px;
    border: solid 2px #ff9541;
}

.navbar-brand{
    padding: 0px;
}

.nav.navbar-nav li a.selected{
    color: #ff9541;
    background: none;
}

/***** TOP *****/

#top{
    text-align: center;
    color: #fff;
    font-size: 20px;
    
    background-image: url(../images/bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    
    padding-top: 171px;
    padding-bottom: 350px;
    
}

#btn_comprar{
    margin-top: 55px;
}

#btn_comprar a{
    font-family:'bold', Helvetica, Arial, sans-serif;
    color: #fff;
    background: rgba(0,0,0, 0.4);
    padding: 8px 30px;
    border: solid 3px #fff;
    font-size: 18px;
}

#btn_comprar a:hover{
    background: rgba(0,0,0, 1);
    text-decoration: none;
}

#steps{
    font-size: 18px;
    line-height: 18px;
    letter-spacing: -0.6px;
}

#steps .col{
    position: relative;
}

#steps hr{
    border: none;
    background-color: rgba(255,255,255,0.3);
    position: absolute;
    right: 0px;
    top: 10px;
    width: 1px;
    height: 50px;
}

#steps img{
    margin-bottom: 7px;
}

#steps span{
    font-size: 23px;
    font-family:'bold', Helvetica, Arial, sans-serif;
}

/***** SECTIONS *****/

.section{
    letter-spacing: -0.3px;
    color: #000;
}

.section .col{
    background-repeat: no-repeat;
    background-size: cover;
}

.section p{
    text-align: center;
    margin: auto;
}

.white{
    background-color: #fff;
}

.white hr{
    border: none;
    background-color: #000;
    margin: 30px auto;
    width: 100px;
    height: 1px;
}

.la-parrilla{
    background-image: url(../images/bg_la-parrilla.jpg);
}

.el-fuego{
    background-image: url(../images/bg_el-fuego.jpg);
}

.el-reciclado{
    background-image: url(../images/bg_el-reciclado.jpg);
}

.el-carbon{
    background-image: url(../images/bg_el-carbon.jpg);
}

#items{
    padding-top: 30px;
    padding-bottom: 70px;
}

#items .col div{
    border-right: solid 1px #e5e5e5;
}

#items img{
    margin-bottom: 25px;
}

#items p span{
    font-family:'bold', Helvetica, Arial, sans-serif;
}

/***** VIDEO *****/

#video{
    background: url(../images/bg_video.png) bottom center no-repeat;
    padding-bottom: 100px;
}

#video .col-xs-10,
#video .col-sm-12{
    padding-left: 0px;
    padding-right: 0px;
}

.embed-container { 
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/***** INSTAGRAM *****/

#instagram{
    border-top: solid 1px #e5e5e5;
    padding: 60px 0 0;
}

#instagram .title{
    letter-spacing: 1px;
    font-family:'regular', Helvetica, Arial, sans-serif;
    font-size: 12px;
    margin-bottom: 35px;
}

#instagram .title img{
    margin-top: -3px;
    margin-right: 25px;
}

#instagram a{
    font-family:'bold', Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    color: #ff9541;
}

#instafeed{
    margin-left: -30px;
}

#instafeed img{
    margin-left: 30px;
    margin-bottom: 30px;
    width: 220px;
    height: 220px;
}

/***** MEDIOS *****/

#medios{
    color: #000;
    padding-bottom: 50px;
}

#medios p{
    margin: 10px auto;
    font-size: 12px;
    letter-spacing: 1px;
}

#medios-logos{
    margin: 10px auto;
}

#medios-logos a:hover{
    opacity: 0.5;
}

/***** FRANCHISE *****/

#franchise{
    background-color: #f2f2f2;
    color: #000;
    font-size: 15px;
    letter-spacing: -0.2px;
}

#franchise p{
    text-align: left;
}

#franchise p.title{
    font-size: 27px;
    line-height: normal;
    margin-bottom: 0px;
    margin-top: 50px;
}

#franchise p.title span{
    font-family:'bold', Helvetica, Arial, sans-serif;
}

#franchise p.subtitle{
    font-size: 18px;
}

#franchise a{
    font-family:'bold', Helvetica, Arial, sans-serif;
    margin-top: 20px;
    font-size: 14px;
    letter-spacing: 1px;
    padding: 5px 12px;
    border: solid 2px #000;
    display: inline-block;
    color: #000;
    text-decoration: none;
}

#franchise a:hover{
    color:#ff9541;
    border-color: #ff9541;
}

/***** TIENDA *****/

#tienda{
    padding: 60px 0;
    color: #000;
    font-size: 14px;
}

#tienda p.title{
    font-size: 35px;
    margin-bottom: 0px;
}

#tienda p.title span{
    font-family:'bold', Helvetica, Arial, sans-serif;
}

#tienda p.subtitle{
    font-size: 16px;
    margin-bottom: 50px;
}

#tienda img{
    margin-bottom: 10px;
}

#tienda .col{
    margin-bottom: 35px;
}

#tienda .detail{
    font-family:'regular', Helvetica, Arial, sans-serif;
    padding: 0px;
}

#tienda p.product{
    margin-bottom: 0px;
    text-transform: uppercase;
    text-align: left;
}

#tienda p.price{
    font-family:'bold', Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 18px;
    text-align: left;
}

#tienda p.price.disabled{
    opacity: 0.2;
}

#tienda a.product_link{
    display: inline-block;
    position: relative;
}

#tienda a.buy,
#tienda span.buy{
    font-family:'bold', Helvetica, Arial, sans-serif;
    color: #ff9541;
    font-size: 12px;
    letter-spacing: 1.5px;
    border: solid 2px #ff9541;  
    padding: 6px 15px;
    margin-right: -8px;
    margin-top: 3px;
}

#tienda a.buy:hover{
    text-decoration: none;
    color: #000;
    border-color: #000;
}

#tienda span.buy{
    opacity: 0.5;
    cursor: default;
}

#tienda .ribbon{
    font-family:'bold', Helvetica, Arial, sans-serif;
    position: absolute;
    top: 0px;
    right: 15px;
    width: 46px;
    height: 64px;
    background-color: #ff9541;
    color: #fff;
    font-size: 15px;
    line-height: 15px;
    padding-top: 25px;
}

/***** PUNTOS DE VENTA *****/

#puntos{
    padding: 60px 0 20px;
    background-color: #f2f2f2;
    color: #000;
    font-size: 14px;
}

#puntos p.title{
    font-size: 35px;
    margin-bottom: 0px;
}

#puntos p.title span,
#puntos p.map_bottom a{
    font-family:'bold', Helvetica, Arial, sans-serif;
}

#puntos p.subtitle,
#puntos p.map_bottom{
    font-size: 16px;
    margin-bottom: 50px;
}

.gm-style-iw div{
    float: left;
}


#puntos p.map_bottom{
    text-transform: uppercase;
    margin-top: 50px;
}

#puntos p.map_bottom a{
    color: #000;
}

#puntos p.map_bottom a:hover{
    color: #ff9541;
    text-decoration: none;
}
/***** FOOTER *****/

#footer{
    background-color: #000;
    text-transform: uppercase;
    color: #6a6a6a;
    font-size: 10px;
    letter-spacing: 0.5px;
}

#footer .container{
    padding-top: 25px;
    border-top: solid 1px #333333;
}

#footer img{
    margin: 20px auto 40px;
}

#social a img{
    margin-left: 10px;
    margin-right: 10px;
}
    
/* RESPONSIVE CSS
-------------------------------------------------- */

@media (max-width: 767px) {
    
    .header{
        background: none;
        position: absolute;
        padding-top: 0px;
    }
    
    .mobile-logo img{
        margin-top: 70px;
        margin-bottom: 40px;
    }
    
    #top{
        max-height: 950px;
    }
    
    #top .frase{
        margin-top: 50px;
    }
    
    #btn_comprar{
        margin-top: 90px;
    }
    
    #top .brochette{
        width: 80px;
        height: 16px;
    }
    
    #top .title{
        margin:50px auto 30px;
    }
    
    #top p.cpt{
        font-size: 12px;
        letter-spacing: 1px;
        margin: 15px auto 30px;
    }
    
    #steps{
        padding-top: 50px;
        font-size: 16px;
    }
    
    #steps .col{
        margin: 20px auto;
    }
    
    #steps span{
        font-size: 20px;
    }
    
    #steps .hr{
        width: 30%;
        height: 1px;
        margin: 30px auto;
    }
    
    #video{
        margin-top: -100px;
        background-size: 85%;
        padding-bottom: 30px;
    }
    
    
    .section p{
        
    }
    
    #items{
        padding: 20px 0 40px;
    }
    
    #items .row div{
        margin-bottom: 40px;
    }
    
    #items p{
        width: 85%;
    }
    
    #instagram .title img{
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 15px;
    }
     
    #instafeed img{
        width: 40%;
        height: auto;
    }
    
    #medios-logos img{
        margin: 15px 25px;
    }
    
    #tienda img{
        width: 100%;
    }
    
    #tienda a.buy{
        margin-right: 0px;
    }
    
    #medios-logos a:last-child img,
    #medios-logos img.federal{
     
    }
    
    #franchise{
        padding-bottom: 40px;
    }
    
    #franchise p{
        text-align: center;
    }
    
    #franchise p.title{
        margin-top: 15px;
    }
    
    #franchise p.subtitle{
        margin-bottom: 20px;
    }
    
    #franchise a{
        margin-top: 30px;
    }
    
    #map{
        width: 95%;
        margin: auto;
        height: 593px;
    }
}

@media (min-width : 768px) {
    #top .logo{
        width: 174px;
        height: 108px;
    }
    
    #top .brochette{
        width: 125px;
        height: 25px;
    }
    
    #top .title{
        
    }
    
    #top p.cpt{
        font-size: 20px;
        letter-spacing: 2px;
        margin-top: 30px;
    }
    
    #steps{
        margin-top: 65px;
    }
    
    #steps hr{
        position: absolute;
        right: 0px;
        top: 10px;
        width: 1px;
        height: 50px;
    }
    
    #video{
        margin-top: -250px;
    }
    
    .section p{
        
    }
    
    #items p{
        width: 85%;
        
    }
   
    #medios-logos img{
       
    }

    #map{
        width: 100%;
        height: 593px;
    }

}

@media (min-width: 992px) {
    
    body{
        background-size: contain;
    }
    
    .section p{
        
    }
    
    #medios-logos img,
    #medios-logos img.federal{
        
    }

    #medios-logos a:last-child img{
        margin-right: 0px;
    }
}

@media (min-width: 1200px) {
	
    #medios-logos img{
        margin-right:60px;
    }

    #medios-logos a:last-child img{
        margin-right: 0px;
    }
}