html, body{font-family: 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;padding:0px; margin:0px; width:100%; height:100%; color: #383838 !important; background-color: #f7fafb; overflow-x: hidden;}

p{font-weight: 300; font-size: 1.2rem; letter-spacing:0.3px;}
nav.navbar{background-color: #D0011B; -webkit-clip-path: polygon(0 0, 100% 0, 100% 45%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 45%, 0 100%); transition: all 0.5s; min-height: 120px; z-index: 9999;}
nav.navbar li a{color: #FFF; font-size: 1.3rem}
.navbar-expand-lg .navbar-nav .nav-link{padding-left: 2rem; padding-right: 2rem}

.btn{padding: 10px 30px;}
.btn-white{border:2px solid #FFF; color: #FFF !important;}
.btn-white:hover{background-color: #FFF; color: #999 !important}
.mt-120{margin-top: -120px;}
.bg-red{background-color: #D0011B;}
.bg-red-fcard{background-color: #b73734;}
.bg-yellow{background-color: #FFEB01;}
.bg-white{background-color: #FFF;}
.bg-blue{background-color: #00BEF3;}
.bg-dark-yellow{background-color: #bda416;}
.bg-black-pict{background-image: url(../images/bg-grunge2.png); background-color: #000; max-width: 100%; min-width: 100%;}
.bg-black{background-color: #000;}
.bg-sweet-blue{background-color: #4990e2;}

.font-black{color: #000;}
.font-red{color: #D0011B;}
.font-white{color: #FFF;}
.font-yellow{color: #FFEB01;}
.font-dark-yellow{color: #bda416;}
.hr-white{background-color: #FFF;}
.hr-black{background-color: #000;}
.font-xxxl{font-size: 5.6rem; font-weight: bold; text-align: center; line-height: 6rem}
.font-xxl{font-size: 4rem; font-weight: bold; text-align: center; line-height: 4rem}
.font-xxl small{font-size: 16px; line-height: 1rem; display: block;}

.wide-right-blue{-webkit-clip-path: polygon(0% 25%, 100% 00%, 100% 100%, 0px 75%); clip-path: polygon(0% 25%, 100% 00%, 100% 100%, 0px 75%); padding: 120px 0px;}
.wide-right-red{-webkit-clip-path: polygon(0% 25%, 100% 00%, 100% 100%, 0px 75%); clip-path: polygon(0% 25%, 100% 00%, 100% 100%, 0px 75%); padding: 120px 0px;}
.wide-left{-webkit-clip-path: polygon(0 0, 100% 25%, 100% 75%, 0px 100%); clip-path: polygon(0 0, 100% 25%, 100% 75%, 0px 100%); padding: 120px 0px;}
.wide-white{-webkit-clip-path: polygon(0 0, 100% 25%, 100% 100%, 0px 100%); clip-path: polygon(0 0, 100% 25%, 100% 100%, 0px 100%); padding: 100px 0px 60px;}

.venue{height: 600px; background-image: url(../images/image-venue.jpg); background-size: cover; background-attachment: fixed; clip-path: polygon(0 0, 100% 15%, 100% 100%, 0% 100%); -webkit-clip-path:polygon(0 0, 100% 15%, 100% 100%, 0% 100%); position: relative; z-index: 9; display: flex; align-items: center; justify-content: flex-end; transition: all 0.5s}
.venue .venue-content{max-width: 40%; color: #FFF; padding-right: 40px;}

.accomodation{height: 690px; background-image: url(../images/accomodation.jpg); background-size: cover; background-attachment: fixed; clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 86%); -webkit-clip-path:polygon(0 0, 100% 0%, 100% 100%, 0% 86%); position: relative; z-index: 9; display: flex; align-items: center; justify-content: flex-end; transition: all 0.5s}
.accomodation .accomodation-content{max-width: 40%; color: #FFF; padding-right: 40px;}
.accomodation-content a{color: #FFF}

.map{position: relative; max-height: 550px; overflow-y: hidden;}
.map-contact{position: relative; overflow-y: hidden; margin-top: -15px;}
/*.map .overlay{position: absolute; width: 100%; height: 100%; top:0px; left:0px; z-index: 8; background-color: rgba(0,0,0,0.3); display: flex; justify-content: center; align-items: center; }*/

.footer{height: 50px; display: flex; align-items: center; justify-content: center; background-color: #000; color: #FFF; position: relative;z-index: 99}

.banner{margin-top: -70px;}

.navbar-nav li a {
    opacity: 1;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.navbar-nav li a:visited {opacity: 1;}
.navbar-nav li a:hover{
    opacity: .5;
    text-decoration: none;
}

.font-title-boxer{font-size: 51px;}
.img-boxer-right img{width: 60%; float: right; margin-top: 10px;}
.img-boxer-left img{width: 87%; float: left; margin-top: 10px;}
.pt-140{padding-top: 140px;}
.pt-100{padding-top: 100px;}
.pt-70{padding-top: 70px;}
.pt-50{padding-top: 50px;}
.pt-20{padding-top: 20px;}
.pb-20{padding-bottom: 20px;}
.pb-50{padding-bottom: 50px;}
.pb-100{padding-bottom: 100px;}
.mt-50{margin-top: 50px;}
.mb-50{margin-bottom: 50px;}
.mb-25{margin-bottom: 25px;}
.mb-0{margin-bottom: 0px;}
.mb-10{margin-bottom: 10px;}
.mb-100{margin-bottom: 100px;}
.mt-20{margin-top: -20px;}
.ml-80{margin-left: 80px;}
.pl-95{padding-left: 95px;}
.font-15{font-size: 15px;}
.font-25{font-size: 25px;}
.font-litsmall{font-size: 16px; margin: -40px; font-weight: bold;}
.font-date{margin: -25px; font-size: 21px; font-weight: bold;}
.font-terms{font-size: 20px;}
.det-font-terms{line-height: 35px;}
.font-offticket{margin-bottom: -20px; font-size: 15px;}
.img-promotor{width: 100%;}

.price{text-align: right;}

.vvip{background-color: #f89f1d; color: #FFF;}
.vip{background-color: #dc4999; color: #FFF;}
.diamond{background-color: #9373b2; color: #FFF;}
.platinum{background-color: #5169b1; color: #FFF;}

.gold{background-color: #6dc4cb; color: #FFF;}
.silver{background-color: #6ab443; color: #FFF;}
.bronze{background-color: #ffcf63; color: #FFF;}
.cs{background-color: #f47c47; color: #FFF;}

.pad-only-promotor{margin-bottom: 40px; margin-top: 30px;}
.stadion-img{max-width: 100%}

.font-vs{
    font-size: 20px;
    font-weight: bold;
    padding-top: 15px;
}
.font-round{
    font-size: 18px;
    margin-bottom: 0px;
    margin-top: -15px;
}
.font-world{
    font-size: 20px;
    font-weight: bold;
}
.font-name{
    font-size: 30px;
    font-weight: bold;
    line-height: 30px;
    padding-top: 15px;
    padding-bottom: 15px;
}
.font-city{
    font-size: 20px;
}
.img-fcard{
    margin-top: 30px;
}
.pt-30{padding-top: 30px;}
.pad-name{margin-bottom: -90px;}
p.contact-font{
    font-size: 35px;
    font-weight: bold;
    margin-bottom: 0px;
    margin-top: 20%;
}
p.detail-contact-font{
    font-size: 16px;
}
.h-100{
    height: 100%;
}
.h-500{
    height: 500px;
}
.nav-tabs {
    border-bottom: none;
}
.nav-tabs .nav-link.active {
    color: #FFF;
    background-color: #FFEB01;
    border-color: #FFEB01;
    position: absolute;
    z-index: 9999;
    top: -155px;
    width: 100%;
    height: 310px;
}
.nav-tabs .nav-item a{
    color: #FFF;
    padding-bottom: 50px;
    padding-top: 50px;
    border-radius: 0px;
    margin-right: -15px;
    margin-left: -15px;
}
.nav-tabs .nav-link:hover {
    color: #FFF;
    background-color: #FFEB01;
    border-color: #FFEB01;
    position: absolute;
    z-index: 9999;
    top: -155px;
    width: 100%;
    height: 310px;
}
.font-tab-name{
    font-size: 22px;
    font-weight: bold;
    line-height: 60px;
    margin-left: -90px;
}
.font-tab-desc{
    text-align: left;
    line-height: 25px;
    font-size: 15px;
}
.font-tab-blue{
    color: #4990e2;
    font-size: 15px;
}
.btn-accordion{
    width: 100%;
    color: #FFF; 
}
.card-header{
    border-radius: 0px;
}
.btn-link:hover{
    color: #FFF;
    text-decoration: none;
}

table tr td{border:solid 2px; width: 10%; padding: 10px; font-size: 20px; padding-left: 35px; padding-right: 35px; border-color: #dad9de;}

@media screen and (max-width: 650px) {
    .font-tab-name{
        margin-left: 0px;
        font-size: 21px;
    }
    .nav-tabs .nav-item a{
        margin-right: 0px;
        margin-left: 0px;
    }
    .nav-tabs .nav-link.active {
        position: relative;
        top: 0px;
        height:auto;
    }
    .nav-tabs .nav-link:hover {
        position: relative;
        top: 0px;
        height:auto;
    }
    .img-boxer-right img{
        float: none;
    }
    .img-boxer-left img{
        float: none;
    }
    .font-title-boxer{
        font-size: 27.4px;
        margin-top: 15px;
    }
    p.font-dark-yellow{
        font-size: 15px;
    }
    .boxers-m .font-xxl{
        font-size: 1.7rem;
    }
    .boxers-m .font-xxl small{
        font-size: 12px;
    }
    .wide-right-m{
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 70%);
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 70%);
        height: 110px;
    }
    .h-contact-m{
        height: 260px;
    }
    .info-contact{
        padding-left: 30px;
    }
    .map-contact{
        margin-top: 0px;
    }
    .font-name {
        font-size: 15px;
        font-weight: bold;
        line-height: 18px;
        padding-bottom: 15px;
        padding-right: 5px;
        padding-left: 5px;
    }
    .font-city{
        font-size: 12px;
    }
    .img-fcard {
        margin-top: 45px;
        width: 35px;
        margin-left: -15px;
    }
    .font-vs{
        font-size: 12px;
    }
    .font-round{
        font-size: 9px;
    }
    .font-world{
        font-size: 12px;
    }
    .font-fcard-m{
        font-size: 35px;
    }
    .pl-30{
        padding-left: 30px;
    }
    .pr-30{
        padding-right: 30px;
    }
    .pad-name{
        margin-bottom: -90px;
    }
    table tr td {
        padding: 0px;
        font-size: 13px;
        padding-left: 0px;
        padding-right: 0px;
    }
    .font-m{
        font-size: 4rem;
        line-height: 4.8rem;
    }
    .font-litsmall {
        font-size: 11px;
        margin: -40px;
        margin-top: 0px;
    }
    .font-date {
        margin: -25px;
        font-size: 16px;
    }
    .ticketasia-font{
        font-size: 21px;
    }
    .phoneticketasia-font{
        font-size: 21px;
    }
    .price-font {
        font-size: 10px; 
    }
    .ticketing-img{
        width: 45%
    }
    .myticket-img{
        width: 45%;
    }
    .det-font-terms {
        font-size: 15px;
        padding-left: 35px;
        padding-right: 35px;
    }
    .img-promotor{
        width: 75px;
        padding: 10px;
    }
    .navbar-toggler {
        width: 100%;
        margin-bottom: -10px;
        padding: 0px;
    }
    .navbar-toggler-icon {
        font-size: 30px;
    }
    .banner{
        margin-top: 0px;
    }
    nav.navbar{
        clip-path: none;
        -webkit-clip-path: none;
        min-height: 50px;
    }
    .accomodation .accomodation-content {
        max-width: 75%;
    }
    p{
    	font-size: 0.7rem;
    }
   	.wide-right-red{
    	clip-path: none;
        -webkit-clip-path: none;
    	margin-top: -120px;
    }
    .bg-red p{
    	margin-top: 20px;
    }
    .wide-left{
    	clip-path: polygon(0 0, 197% 20%, 110% 70%, 0px 85%);
        -webkit-clip-path: polygon(0 0, 197% 20%, 110% 70%, 0px 85%);
    }
    .content-yellow{
    	margin-top: -75px;
    }
    .bg-yellow .front-yellow p{
    	margin-left: -15px;
    }
    .font-xxl{
    	font-size: 2rem;
		font-weight: bold;
		line-height: 2rem;
		margin-bottom: 5px;
    }
    .wide-right-blue{
    	clip-path: polygon(0% 12%, 100% 00%, 100% 90%, 0px 75%);
        -webkit-clip-path: polygon(0% 12%, 100% 00%, 100% 90%, 0px 75%);
    }
    .content-blue{
    	margin-top: -65px;
        text-align: right;
    }
    .blue-m{
        text-align: right;
    }
    .yellow-m{
        text-align: left;
    }
    .venue{
    	clip-path: polygon(0 0, 100% 8%, 100% 80%, 0% 80%);
        -webkit-clip-path: polygon(0 0, 100% 8%, 100% 80%, 0% 80%);
    	background-position: top;
    }
    .venue .venue-content {
    	max-width: 75%;
    }
}
@media screen and (min-width: 1280px){
	.wide-right-red{
    	margin-top: -111px;
    }
}
@media screen and (min-width:768px) {
	.wide-right-red{
    	margin-top: -118px;
    }
    .font-xxl{
    	font-size: 3.6rem;
		font-weight: bold;
		text-align: center;
		line-height: 3.6rem;
    }
}
@media only screen and (min-width: 320px) and (max-height: 568px){
	.wide-right-red{
    	margin-top: -124px;
    }
}
@media only screen and (min-width: 414px) and (max-height: 736px){
	.wide-right-red{
    	margin-top: -112px;
    }
}
@media only screen and (min-width: 736px) and (max-height: 414px){
	p{
		font-size: 0.88rem;
	}
	.font-xxl{
    	font-size: 3.6rem;
		font-weight: bold;
		text-align: center;
		line-height: 3.6rem;
    }
	.wide-right-red{
    	margin-top: -118px;
    }
}
@media only screen and (min-width: 960px) and (max-height: 600px){
	.wide-right-red{
    	margin-top: -116px;
    }
    .yellow-mar-m{
    	margin-left: -95px;
    }
}