/*Slot Tab Menü*/
.PuntTabMenuMain { width: 1347px; height: auto; overflow: hidden; margin: 0 auto; }
.PuntTabMenuLine { width: 100%; height: 15px; float: left; background-color: #4f064b; } /*Change Background Color*/
.PuntTabMenuCover { width: 100%; height: 60px; float: left; background-color: #651360; overflow: hidden; } /*Change Background Color*/
.PuntPageTitle { width:14%; height:auto; float:left; }
.PuntPageTitle .PuntSlotsimg{ font-size:30px; color:#fff; margin:2px 0 0 30px; height:56px; }
ul#Punt_Tab_Menu { width:64.5%; margin-bottom: 10px; height: auto; list-style: none;  float:right; margin-right:-55px; }
ul#Punt_Tab_Menu li { float: left; margin: 0 0px 0px 10px;  }
ul#Punt_Tab_Menu li a { display: block; border: 1px solid #8e1c86; padding: 7px 15px 7px 15px; text-decoration: none; margin: 13px 0px 0px 0px; border-radius: 20px; color: #c8c8c8; font-size: 15px; background-color:transparent; } /*Change Border and font Color and Background Color*/
ul#Punt_Tab_Menu li a:hover { background-color: #4f064b; color:#fbc2ac; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } /*Change Background Color*/
.ddlli { float:left; width:10.5%; margin: 0px 0px 0px 0px; display: block; border: 1px solid #8e1c86; padding: 7px 15px 7px 15px; text-decoration: none; margin: 13px 0px 0px 0px; border-radius: 5px; color: #c8c8c8; font-size: 15px; background-color:#4f064b; } /* Change Border and font Color and Background Color */

ul#Punt_Tab_Menu li.Punt_Active a { background-color: #4f064b; color: #fff; border-color: #75186f; } /*Change Background,Font,Border Color*/
ul#Punt_Tab_Menu li.Punt_Active a:hover { background-color: #4e0a4a; color:#fbc2ac; } /*Change Background Color*/
div.Punt_Tab_Content { background-color: #1e0822; color: #fff; overflow: hidden; width: 100%; height: auto; min-height: 400px; } /*Change Background,Font Color*/
div.Punt_Tab_Content ul { width: 100%; height: auto; list-style: none; float: left; padding-top:15px; } 
div.Punt_Tab_Content ul li { width: 267px; height: auto; float: left; text-align: center; cursor:pointer; margin:10px 0 10px 0; overflow:hidden; }
div.Punt_Tab_Content ul li .PuntTabImg { width: 205px; height: 154px; margin: 0 auto; border: 1px solid #8e1c86; border-radius: 0px; border-bottom-left-radius:0px; border-bottom-right-radius:0px; position:relative;  transition: .5s; } /*Change border Color*/
div.Punt_Tab_Content ul li .PuntSloatA { width: 175px; height: 27px; margin: 2px auto; border: 1px solid #8e1c86; line-height:25px; transform: translate3d(0%, 0%, 0); padding:0px 15px 0px 15px;  background-color:#651360; color: #c8c8c8; font-size:14px; 
                                         margin-top:-292px; } /*Change Background,Border,Font Color*/
div.Punt_Tab_Content ul li:hover .PuntTabImg { border: 1px solid #4f064b;} /*Change Border Color*/
div.Punt_Tab_Content ul li:hover .PuntSloatA { background-color:#4f064b; color: #fff;  } /*Change Background,Font Color*/
.PuntTabDetailsHoverImage { width:100%; height:160px; text-align:center;  }
.PuntTabDetailsHoverImage img { width:90%; border-radius:10px; margin-top:145px; margin-bottom:20px; border:1px solid #fbc2ac;  }
.PuntTabDetailsHoverImage .PuntPlayText { width:50%; height:auto; background-color:#651360; text-align:center; font-size:15px; color:#fff; padding:3%; border:1px solid #fbc2ac; border-radius:20px; margin:-130px auto auto 45px;  position:absolute; }
.PuntTabDetailsHoverImage .PuntPlayText:hover {  background-color:#4f064b; border:1px solid #8e1c86; }
.PuntTabDetailsHoverImage .PuntPlayText1 { width:50%; height:auto; background-color:#651360; text-align:center; font-size:15px; color:#fff; padding:3%; border:1px solid #fbc2ac; border-radius:20px; margin:-85px auto auto 45px; position:absolute;  }
.PuntTabDetailsHoverImage .PuntPlayText1:hover {  background-color:#4f064b; border:1px solid #8e1c86; }

.Punt_Tab_Special { text-align: center; margin-top: 10px; }
.Punt_Tab_Special a { color: #000; } /*Change Font Color*/
.Punt_Tab_Special a:hover { color: #efefef; } /*Change Font Color*/
div.Punt_Tab_Content ul li:before, div.Punt_Tab_Content ul li:after { border-color: #fbc2ac; content: ''; position:absolute; width: 20px; height: 20px; border-style: solid; border-width: 0; 
                                                                      -webkit-transition: all 0.5s cubic-bezier(1, 0.2, 0.26, 0.7); -moz-transition: all 0.5s cubic-bezier(1, 0.2, 0.26, 0.7); 
                                                                      transition: all 0.5s cubic-bezier(1, 0.2, 0.26, 0.7); -webkit-transform: translate(0px, 0px) scale(0.8); -moz-transform: translate(0px, 0px) scale(0.8); 
                                                                      -ms-transform: translate(0px, 0px) scale(0.8); -o-transform: translate(0px, 0px) scale(0.8); transform: translate(0px, 0px) scale(0.8); opacity: 0; } /*Change Border Color*/
div.Punt_Tab_Content ul li:before { border-radius: 2px; border-top-width: 1px; border-left-width: 1px; }
div.Punt_Tab_Content ul li:after { border-radius:2px; border-right-width: 1px; border-bottom-width: 1px; }
div.Punt_Tab_Content ul li:hover:before, div.Punt_Tab_Content ul li:hover:after { -webkit-transition: all 2s cubic-bezier(0.14, 1.13, 0, 0.91); 
                                                                                  -moz-transition: all 2s cubic-bezier(0.14, 1.13, 0, 0.91); 
                                                                                  transition: all 2s cubic-bezier(0.14, 1.13, 0, 0.91); 
                                                                                  opacity: 0.9; }
div.Punt_Tab_Content ul li:hover:before { -webkit-transform: translate(-115px, -10px) scale(1); 
                                          -moz-transform: translate(-115px, -10px) scale(1); 
                                          -ms-transform: translate(15px, -10px) scale(1); 
                                          -o-transform: translate(-115px, -10px) scale(1); 
                                          transform: translate(-115, -10px) scale(1); border-radius:2px; border-left-width: 2px; border-top-width: 2px; }


div.Punt_Tab_Content ul li:hover:after { -webkit-transform: translate(90px, -15px) scale(1); 
                                         -moz-transform: translate(90px, -15px) scale(1); 
                                         -ms-transform: translate(233px, -15px) scale(1); 
                                         -o-transform: translate(90px, -15px) scale(1); 
                                          border-radius:2px; border-right-width: 2px; border-bottom-width: 2px; }


.PuntSloatLine { position: absolute; background: #fbc2ac; } /*Change Background Color*/
.PuntSloatLine.-right, .PuntSloatLine.-left { width: 1px; bottom: -1px; top: -1px; transform: scale3d(1, 0, 1);   }
.PuntSloatLine.-top, .PuntSloatLine.-bottom { height: 1px; left: -1px; right: -1px; transform: scale3d(0, 1, 1); }
.PuntSloatLine.-right { right: -1px; transition: transform 0.1s cubic-bezier(1, 0, 0.65, 1.01) 0.23s; transform-origin: top;  }
.PuntSloatLine.-top { top: -1px; transition: transform 0.08s linear 0.43s; transform-origin: left; }
.PuntSloatLine.-left { left: -1px; transition: transform 0.08s linear 0.51s; transform-origin: bottom; }
.PuntSloatLine.-bottom { bottom: -1px; transition: transform 0.3s cubic-bezier(1, 0, 0.65, 1.01); transform-origin: right; }
.PuntSloatA:hover .text,
.PuntSloatA:active .text { transform: translate3d(0, 0, 0); transition: transform 0.6s cubic-bezier(0.2, 0, 0, 1) 0.4s; }
.PuntSloatA:hover:after,
.PuntSloatA:active:after { transform: scale3d(0, 1, 1); right: -1px; left: -1px; transform-origin: right;
                            transition: transform 0.2s cubic-bezier(1, 0, 0.65, 1.01) 0.17s, right 0.2s cubic-bezier(1, 0, 0.65, 1.01), left 0s 0.3s;  }
.PuntSloatA:hover .PuntSloatLine,
.PuntSloatA:active .PuntSloatLine { transform: scale3d(1, 1, 1);border-radius: 15px; }
.PuntSloatA:hover .PuntSloatLine.-right,
.PuntSloatA:active .PuntSloatLine.-right { transition: transform 0.1s cubic-bezier(1, 0, 0.65, 1.01) 0.2s; transform-origin: bottom; }
.PuntSloatA:hover .PuntSloatLine.-top,
.PuntSloatA:active .PuntSloatLine.-top { transition: transform 0.08s linear 0.4s; transform-origin: right; }
.PuntSloatA:hover .PuntSloatLine.-left,
.PuntSloatA:active .PuntSloatLine.-left { transition: transform 0.08s linear 0.48s; transform-origin: top; }
.PuntSloatA:hover .PuntSloatLine.-bottom,
.PuntSloatA:active .PuntSloatLine.-bottom { transition: transform 0.5s cubic-bezier(0, 0.53, 0.29, 1) 0.56s; transform-origin: left; }

div.Punt_Tab_Content ul li .PuntTabDetails { 
    width:205px; height:294px; position:relative; box-sizing: border-box; transition: .5s; background: #262626;
    top:-294px;
    left: 100%;} /*Change Background Color*/

div.Punt_Tab_Content ul li:hover .PuntTabDetails {
    top:-296px;
    left: 11.5%;
}