@extends('layout.principalLayout')

@section('content')
    <div class="container content-categoria" style="margin-top:120px" >

        <div class="row">

            <!-- Sidebar Widgets Column -->
            <div class="col-md-3">

                <!-- Categories Widget -->
                <div class="col-md-12">
                    <div>
                <img src="http://placehold.it/700x400" class="img-responsive form-control"/>
                <select id="automotriz" class="btn-categoria ">
                    <option value="">Automotriz</option>
                    <option value="" >option1</option>
                    <option value="" >option2</option>
                    <option value="" >option3</option>
                </select>
                    </div>
                </div>
                <div class="col-md-12 opacity">
                <img src="http://placehold.it/700x400" class="img-responsive form-control"/>
                <select id="motos" class="btn-categoria ">
                    <option value="">Motos</option>
                    <option value="">option1</option>
                    <option value="">option2</option>
                    <option value="">option3</option>
                </select>
                </div>
                <!-- si es la ultima poner un margin-bottom de 20px -->
                <div class="col-md-12 opacity" style="margin-bottom: 20px;">
                <img src="http://placehold.it/700x400" class="img-responsive form-control"/>
                <select id="nautica" class="btn-categoria">
                    <option value="">Naútica</option>
                    <option value="">option1</option>
                    <option value="">option2</option>
                    <option value="">option3</option>
                </select>
                </div>

            </div>
            <!-- Blog Entries Column -->
            <div class="col-md-9">

                <!-- Blog Post -->
                <div class="row">

                    <div class="row producto">

                        <div class="col-md-2">
                                <img class="img-responsive prod" style="margin-left: -48px;" src="/img/productos/Clean-Yector.png" alt="Nombre producto">
                        </div>
                        <div class="col-md-10">

                                <h4 class="media-heading rojo">Nombre del producto</h4>
                                <p style="font-size: 14px;" align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, </p>
                                <h6 class="media-heading rojo">Presentaciones</h6>
                                <div class="presentaciones col-md-12">
                                    <div class="icon_presentacion">
                                        <img class="icon" src="../img/presentaciones/250ml.png">
                                        <p class="item">250ml</p>
                                    </div>
                                </div>
                                <h6 class="media-heading rojo">Viscosidades</h6>
                                <div class="viscosidades col-md-12"  >
                                    <div class="icon_presentacion">
                                        <p class="viscosidades">SAE O2-20 / SAE 5W-40</p>
                                    </div>
                                </div>
                                <div id="contenedor_botones col-md-12">
                                    <div class="row">
                                        <div class="col-md-5"> <button class="botones_producto">HOJA DE SEGURIDAD</button></div>

                                        <div class="col-md-5"><button class="botones_producto">FICHA TÉCNICA</button></div>

                                    </div>
                            </div>
                        </div>
                    </div>

                    <div class="row producto">

                        <div class="col-md-2">
                            <img class="img-responsive prod" style="margin-left: -48px;" src="/img/productos/Clean-Yector.png" alt="Nombre producto">
                        </div>
                        <div class="col-md-10">

                            <h4 class="media-heading rojo">Nombre del producto</h4>
                            <p style="font-size: 14px;" align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, </p>
                            <h6 class="media-heading rojo">Presentaciones</h6>
                            <div class="presentaciones col-md-12">
                                <div class="icon_presentacion">
                                    <img class="icon" src="../img/presentaciones/250ml.png">
                                    <p class="item">250ml</p>
                                </div>
                            </div>
                            <h6 class="media-heading rojo">Viscosidades</h6>
                            <div class="viscosidades col-md-12"  >
                                <div class="icon_presentacion">
                                    <p class="viscosidades">SAE O2-20 / SAE 5W-40</p>
                                </div>
                            </div>
                            <div id="contenedor_botones col-md-12">
                                <div class="row">
                                    <div class="col-md-5"> <button class="botones_producto">HOJA DE SEGURIDAD</button></div>

                                    <div class="col-md-5"><button class="botones_producto">FICHA TÉCNICA</button></div>

                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="row producto">
                        <div class="col-md-2">
                            <img class="img-responsive prod" style="margin-left: -48px;" src="/img/productos/Clean-Yector.png" alt="Nombre producto">
                        </div>
                        <div class="col-md-10">

                            <h4 class="media-heading rojo">Nombre del producto</h4>
                            <p style="font-size: 14px;" align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, </p>
                            <h6 class="media-heading rojo">Presentaciones</h6>
                            <div class="presentaciones col-md-12">
                                <div class="icon_presentacion">
                                    <img class="icon" src="../img/presentaciones/250ml.png">
                                    <p class="item">250ml</p>
                                </div>
                            </div>
                            <h6 class="media-heading rojo">Viscosidades</h6>
                            <div class="viscosidades col-md-12"  >
                                <div class="icon_presentacion">
                                    <p class="viscosidades">SAE O2-20 / SAE 5W-40</p>
                                </div>
                            </div>
                            <div id="contenedor_botones col-md-12">
                                <div class="row">
                                    <div class="col-md-5"> <button class="botones_producto">HOJA DE SEGURIDAD</button></div>

                                    <div class="col-md-5"><button class="botones_producto">FICHA TÉCNICA</button></div>

                                </div>
                            </div>
                        </div>
                    </div>



                </div>

            </div>

        </div>
        <!-- /.row -->
        

    </div>

    <!-- /.container -->

@stop