
.model-animation{
    display: block;
    size: 40rem 40rem
}
/* @media only screen and (max-width: 600px) {
    .desktopView{
        display: none;
    }
    .mobileView{
        display: block;
    }
} */

/* <!-- <div class="model-animation">
                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                      <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
                      <li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
                      <li data-target="#carouselExampleIndicators" data-slide-to="5"></li>
                    </ol>
                    <div class="carousel-inner">
                      <div class="carousel-item active">
                        <div id="stl_cont4"></div>
                        <script src="stl_viewer.min.js"></script>        
                        <script>
                            var stl_viewer=new StlViewer
                            (
                                document.getElementById("stl_cont4"),
                                {                    
                                    auto_rotate:true,
                                    bg_color:"#000000",
                                    allow_drag_and_drop:true,
                                    models:
                                    [
                                        {filename:"rollcage.stl"}
                                    ]
                                }
                            );
                        </script>
                      </div>

                      <div class="carousel-item">
                        <div id="stl_cont5"></div>
                        <script src="stl_viewer.min.js"></script>
                        <script>
                            var stl_viewer=new StlViewer
                            (
                                document.getElementById("stl_cont5"),
                                {                    
                                    auto_rotate:true,
                                    auto_zoom:false,
                                    bg_color:"#000000",
                                    allow_drag_and_drop:true,
                                    models:
                                    [
                                        {filename:"CVT.stl"}
                                    ]
                                }
                            );
                        </script>        
                      </div>


                      <div class="carousel-item">
                        <div id="stl_cont6"></div>
                        <script src="stl_viewer.min.js"></script>
                        <script>
                            var stl_viewer=new StlViewer
                            (
                                document.getElementById("stl_cont6"),
                                {                    
                                    auto_rotate:true,
                                    bg_color:"#000000",
                                    allow_drag_and_drop:true,
                                    models:
                                    [
                                        {filename:"Vehicle-dynamics.stl"}
                                    ]
                                }
                            );
                        </script>        
                      </div>

                      <div class="carousel-item">
                        <div id="stl_cont7" ></div>
                        <script src="stl_viewer.min.js"></script>
                        <script>
                            var stl_viewer=new StlViewer
                            (
                                document.getElementById("stl_cont7"),
                                {                    
                                    auto_rotate:true,
                                    bg_color:"#000000",
                                    allow_drag_and_drop:true,
                                    models:
                                    [
                                        {filename:"brake.stl"}
                                    ]
                                }
                            );
                        </script>
                      </div>
                      <div class="carousel-item">
                        <img class="d-block w-100" src="./assets/img/portfolio/5.png" alt="slide">
                      </div>
                      <div class="carousel-item">
                        <img class="d-block w-100" src="./assets/img/portfolio/6.heic" alt="slide">
                      </div>
                     </div>
                    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                      <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                      <span class="carousel-control-next-icon" aria-hidden="true"></span>
                      <span class="sr-only">Next</span>
                    </a>
                  </div> 
              </div>
             </div>--> */