tab style : demo 54

                        

                            

                                

                                    

                                        

                                            
                                            

                                                
SECTION-1
                                                
SECTION-2
                                                
SECTION-3
                                            
                                            
                                            

                                                

                                                    
Section 1
                                                    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros consectetur lobortis. Maecenas nec nibh congue, placerat sem id, rutrum velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt, imperdiet orci semper, rhoncus ligula. Vivamus scelerisque.
                                                
                                                

                                                    
Section 2
                                                    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros consectetur lobortis. Maecenas nec nibh congue, placerat sem id, rutrum velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt, imperdiet orci semper, rhoncus ligula. Vivamus scelerisque.
                                                
                                                

                                                    
Section 3
                                                    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros consectetur lobortis. Maecenas nec nibh congue, placerat sem id, rutrum velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt, imperdiet orci semper, rhoncus ligula. Vivamus scelerisque.
                                                
                                            
                                        
                                    
                                
                            
                        
                    

                        .demo{ background: #ffded7; }
                        a:hover,a:focus{
                            outline: none;
                            text-decoration: none;
                        }
                        .tab .nav-tabs{
                            padding-left: 15px;
                            border-bottom: 4px solid #692f6c;
                        }
                        .tab .nav-tabs li a{
                            color: #fff;
                            padding: 10px 20px;
                            margin-right: 10px;
                            background: #692f6c;
                            text-shadow: 1px 1px 2px #000;
                            border: none;
                            border-radius: 0;
                            opacity: 0.5;
                            position: relative;
                            transition: all 0.3s ease 0s;
                        }
                        .tab .nav-tabs li a:hover{
                            background: #692f6c;
                            opacity: 0.8;
                        }
                        .tab .nav-tabs li.active a{
                            opacity: 1;
                        }
                        .tab .nav-tabs li.active a,
                        .tab .nav-tabs li.active a:hover,
                        .tab .nav-tabs li.active a:focus{
                            color: #fff;
                            background: #692f6c;
                            border: none;
                            border-radius: 0;
                        }
                        .tab .nav-tabs li a:before,
                        .tab .nav-tabs li a:after{
                            content: "";
                            border-top: 42px solid transparent;
                            position: absolute;
                            top: -2px;
                        }
                        .tab .nav-tabs li a:before{
                            border-right: 15px solid #692f6c;
                            left: -15px;
                        }
                        .tab .nav-tabs li a:after{
                            border-left: 15px solid #692f6c;
                            right: -15px;
                        }
                        .tab .nav-tabs li a i,
                        .tab .nav-tabs li.active a i{
                            display: inline-block;
                            padding-right: 5px;
                            font-size: 15px;
                            text-shadow: none;
                        }
                        .tab .nav-tabs li a span{
                            display: inline-block;
                            font-size: 14px;
                            letter-spacing: -9px;
                            opacity: 0;
                            transition: all 0.3s ease 0s;
                        }
                        .tab .nav-tabs li a:hover span,
                        .tab .nav-tabs li.active a span{
                            letter-spacing: 1px;
                            opacity: 1;
                            transition: all 0.3s ease 0s;
                        }
                        .tab .tab-content{
                            padding: 30px;
                            background: #fff;
                            font-size: 16px;
                            color: #6c6c6c;
                            line-height: 25px;
                        }
                        .tab .tab-content h3{
                            font-size: 24px;
                            margin-top: 0;
                        }
                        @media only screen and (max-width: 479px){
                            .tab .nav-tabs li{
                                width: 100%;
                                margin-bottom: 5px;
                                text-align: center;
                            }
                            .tab .nav-tabs li a span{
                                letter-spacing: 1px;
                                opacity: 1;
                            }
                        }