/* ------------------------------------------------------------------------------------------------------------ | Start | ------------------------------------------------------------------------------------------------------------ */ body { font-family: 'Roboto Condensed', Kanit, Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; font-weight: 400; font-size: 16px; line-height: 1.4; color: #222; background: #fff; overflow-x: hidden; } a { display: block; color: #222; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } a:hover { color: #0c286d; text-decoration: none; } h1, h2, h3, h4, h5, h6 { position: relative; margin: inherit; padding: 15px 0 ; font-family: 'Roboto Condensed', Kanit, Arial, Helvetica, sans-serif; font-weight: 400; } h1 { font-size: 46px; } h2 { font-size: 36px; } h3 { font-size: 30px; } h4 { font-size: 24px; } h5 { font-size: 18px; } h6 { font-size: 14px; } p { margin: 0; padding: 15px 0; } figure { position: relative; } strong, b { font-weight: 500; } /* ------------------------------------------------------------------------------------------------------------ | All | ------------------------------------------------------------------------------------------------------------ */ header { position: relative; width: 100%; } section { float: left; width: 100%; position: relative; overflow-x: hidden; } img { display: block; } .warpper { position: relative; margin: 0 auto; width:100%; height: inherit; max-width: 1280px; padding: 0 15px; } .content { position: relative; } /*.th .header-fixed nav ul { } .th .header-fixed nav ul a { font-weight: 500; } .th .header-fixed nav ul dl a { font-size: 17px; font-weight: 400; } .th .header-fixed aside li:last-child a { padding-top: 8px !important; font-size: 15px; } .th .viewall span a { font-size: 17px; } .th .player-home ul li p { font-size: 17px; } .th .menu-text { font-size: 17px; padding-bottom: 2px; } .th .nav-mobile aside ul li a { font-size: 20px; } .th .nav-mobile aside ul li .toggle-subnav a { font-size: 17px; } .th .nav-mobile aside ul li a { padding-top: 5px; } .th .subplus { top: 8px; } .th .nav-mobile aside ul li span:before { top: 3px; } .th .livescore-table .name .inname { font-weight: 400; } .th .ranking-table h5 { font-weight: 500; } .th .title:first-letter { font-weight: 500; } */ .en { font-size: 16px; } .show-768 { display: none; } /* ------------------------------------------------------------------------------------------------------------ | Header Bar | ------------------------------------------------------------------------------------------------------------ */ .header-less { /*height: 60px !important; */ box-shadow: 0 0 20px 3px rgba(0,20,60,0.3); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } /*.header-less header figure { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .header-less header a { padding: 10px 0 !important; } */ .header-fixed { position: fixed; display: table; width: 100%; height: 100px; background: #edf5ff; border-bottom: 6px solid #0c286d; overflow: inherit; z-index: 999999; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .header-fixed header { float: left; width: initial; height: 100%; z-index: 9; } .header-fixed header a { display: block; position: relative; height: 100%; padding: 10px 0; vertical-align: middle; } .header-fixed header figure { position: relative; display: inline-block; height: 100%; vertical-align: middle; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .header-fixed header img { display: block; height: 100%; left: 0; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; margin-left: auto; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .header-fixed header span { display: inline-block; vertical-align: middle; padding-left: 15px; } .header-fixed nav { position: relative; float: right; width: auto; height: 100%; padding-top: 30px; z-index: 1; } .header-fixed nav ul { height: 100%; } .header-fixed nav li { float: left; display: table; position: relative; height: 100%; padding-left: 40px; text-align: center; } .header-fixed nav li:nth-child(3) { display:none; } .header-fixed nav li a { position: relative; display: table-cell; height: 100%; padding: 0 2px; color: #0c286d; font-weight: 600; text-transform: uppercase; font-size: 18px; line-height: 1.2; vertical-align: middle; } .header-fixed nav li a:hover { color: #e51c38; } .header-fixed nav li a.current { color: #e51c38; } /*.header-fixed nav li a:before { opacity: 1; content: ''; position: absolute; width: 0; height: 6px; left: 0; right: 0; bottom: -6px; margin-top: auto; margin-left: auto; margin-right: auto; background: #e51c38; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .header-fixed nav li a:hover:before { width: 100%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .header-fixed nav li a.current:before { width: 100%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }*/ .header-fixed nav li span { position: relative; width: 100%; height: 100%; vertical-align: middle; z-index: 1; } .header-fixed nav ul li.lang { display: flex; align-items: center; justify-content: center; height: 100%; } .header-fixed nav ul li.lang span { display: flex; padding-top: 3px; align-items: center; justify-content: center; } .header-fixed nav ul li.lang a { width: 40px; height: 40px; border-radius: 50%; background: #deeffd; } .header-fixed nav ul li.lang a:before { display: none !important; } .header-fixed nav ul dl { visibility: hidden; opacity: 0; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; position:absolute; width: auto; min-width: 200px; padding:20px 15px; top:100%; margin-top: 3px; left: 40px; background: #0c286d;/* -webkit-box-shadow:0 5px 15px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);*/ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; z-index: 999; } .header-fixed nav ul dl dt { position: relative; width:100%; height: inherit; padding: 3px 0; text-align:left; vertical-align:top; } .header-fixed nav ul dl a { display:inline-block; width:100%; height:inherit; padding: 0 10px; font-weight: 500; color:#fff !important; text-align: left; background:none; text-overflow: ellipsis; white-space: nowrap;} .header-fixed nav ul dl a:hover, .header-fixed nav ul dl a.current { color: #1da1f2 !important; background:none; } .header-fixed nav ul li:hover > dl { visibility: visible; opacity: 1; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .header-fixed nav ul li:hover > a { color: #e51c38 } .header-fixed aside { position: absolute; width: auto; padding: 10px 0 10px 0; color: #ffe4fa; margin-right: 15px; right: 0; top: 0; z-index: 9; } .header-fixed aside ul { display: flex; justify-content: flex-end; height: 100%; } .header-fixed aside li { padding: 0 10px; display: flex; align-items: center; } .header-fixed aside li:last-child { padding-right: 2px; border-left: 1px solid #c7d9ee; /* margin-left: 3px; padding-right: 0; padding-left: 5px; */ } .header-fixed aside li a { padding: 7px 2px; color: #0c286d; text-transform: uppercase; line-height: 0.8; font-size: 14px; font-weight: 400; } .header-fixed aside li a:hover,.header-fixed aside li a.current { color: #1da1f2; } .header-fixed aside li a.btn-register { padding: 10px 14px; background: #e51c38; color: #fff; border-radius: 3px; } .header-fixed aside li a:hover.btn-register { background: #f63e57; } .header-fixed aside li a.btn-search { width: 30px; background: url(../images/icon-search.svg) no-repeat center; background-size: auto 70%; } .header-fixed aside li a path { fill: #fff; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .header-fixed aside li a:hover path { fill: #fff; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .header-fixed aside li span { display: flex; vertical-align: middle; } .header-fixed aside i { display: inline-flex; width: 20px; height: 12px; margin-right: 6px; align-items: center; vertical-align: middle; border-radius: 4px; } .header-fixed aside i svg { display: block; width: 100%; height: 100%; } .header-fixed aside .icon-flag-en { background: url(../images/flag-en.svg) no-repeat center; } .header-fixed aside .icon-flag-th { background: url(../images/flag-th.svg) no-repeat center; } .header-fixed aside small { display: inline-block; vertical-align: middle; font-size: 15px; } .header-fixed aside .icon-call { background: url(../images/icon-call-white.svg) no-repeat center; background-size: 100%; } .header-fixed aside .icon-line { background: url(../images/icon-line-white.svg) no-repeat center; background-size: 100%; } .header-fixed aside .icon-facebook { margin-right: 0; background: url(../images/icon-facebook-white.svg) no-repeat center; background-size: 100%; } .header-fixed aside .icon-youtube { margin-right: 0; background: url(../images/icon-youtube-white.svg) no-repeat center; background-size: 100%; } .header-full { background: rgba(255,255,255,1) !important; } .header-full nav li a { position: relative; display: table-cell; height: 100%; color: #333 !important; font-size: 18px; text-transform: uppercase; font-weight: 500; vertical-align: middle; } .header-full li a:hover { color: #0089eb !important; } .header-full li a.current { color: #0089eb !important; } .header-full nav li a span:before { opacity: 0 !important; content: ''; position: absolute; width: 0; height: 1px; left: 0; right: 0; bottom: -10px; margin-top: auto; margin-left: auto; margin-right: auto; background: #1b1464; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .show-box-search { opacity: 1 !important; visibility: visible !important; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .drop-search { opacity: 0; visibility: hidden; position: absolute; padding: 10px; bottom: -60px; left: 15px; right: 15px; background: #0c286d; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .drop-search input[type="button"], .drop-search input[type="submit"] { position: absolute; max-width: inherit; min-width: inherit; padding: 2px 20px 0 20px; font-size: 16px; top: 10px; bottom: 10px; right: 10px; border-radius: 0; background: #0c286d; z-index: 1; } .drop-search input[type="button"]:hover, .drop-search input[type="submit"]:hover { background: #1da1f2 } .drop-search input[type="text"] { padding-right: 110px; border: none; font-size: 16px; } .drop-search input[type="text"]:focus { border: none !important; } /* ------------------------------------------------------------------------------------------------------------ | Nav Mobile | ------------------------------------------------------------------------------------------------------------ */ .open-nav { opacity: 1; visibility: visible; right: 0 !important; transition-timing-function: cubic-bezier(0.76, 0.22, 0.38, 0.9); transition-duration: 0.5s; webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease; } .show-nav { right: 0 !important; background: #ddd; -webkit-transition: all 0.6s cubic-bezier(1, .1, .2, 1); -moz-transition: all 0.6s cubic-bezier(1, .1, .2, 1); -o-transition: all 0.6s cubic-bezier(1, .1, .2, 1); transition: all 0.6s cubic-bezier(1, .1, .2, 1);} .list-nav { display: none; float: left; position: relative; width: 115px; height:50px; margin-left: 5px; text-align: center; text-transform: uppercase; background: #fff; } .list-nav a { display: inline-table; position: relative; width: 100%; height: 100%; color: #333; padding: 6px 0; font-size:16px; font-weight: 500; cursor: pointer; } .current-nav { background: #333; } .current-nav a { color: #fff; } .current-nav .menu-icon::before { background: #0071bc; } .menu-icon { position: absolute; top: 20px; left: 15px; width: 30px; height: 2px; background-color: #0071bc; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%); -webkit-transition: background-color 0.3s;-moz-transition: background-color 0.3s; transition: background-color 0.3s;} .menu-icon::before, .menu-icon::after { content: ''; width: 100%; height: 100%; position: absolute; background-color: #0071bc; right: 0;-webkit-transition: -webkit-transform .3s, top .3s, background-color 0s; -moz-transition: -moz-transform .3s, top .3s, background-color 0s; transition: transform .3s, top .3s, background-color 0s;} .menu-icon::before { top: -8px; } .menu-icon::after { top: 8px; } .menu-icon.is-clicked { background-color: rgba(255, 255, 255, 0); } .menu-icon.is-clicked::before { background: #e51c38; top: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg);-o-transform: rotate(45deg); transform: rotate(45deg); } .menu-icon.is-clicked::after { background: #e51c38; top: 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .menu-text { position: absolute; right: 40px; vertical-align: middle; text-align: left; color: #0c286d; /* color: #e51c38*/; font-size: 14px; line-height: 1.5; text-transform: uppercase; } .nav { display: none; position: absolute; width: 30px; height: 40px; right: 15px; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; z-index: 9999; cursor: pointer; } .nav a { display: flex; align-items: center; position: relative; width: 100%; height: 100%; } .nav-overay { opacity: 0; visibility: hidden; } .nav-overay { position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.5); z-index: 888; opacity: 0; visibility: hidden; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease;} .active-nav-overay { opacity: 1; visibility: visible; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .over-x { overflow: hidden; } .nav-mobile { position: fixed; width: 80%; height: 100%; max-height: calc(100vh - 0px); top: 0; right: -80%; z-index: 1; margin: 0; padding: 0; overflow: auto; z-index: 999; -webkit-transition: all 0.6s cubic-bezier(.42,.19,.23,.92); -moz-transition: all 0.6s cubic-bezier(.42,.19,.23,.92); -o-transition: all 0.6s cubic-bezier(.42,.19,.23,.92); transition: all 0.6s cubic-bezier(.42,.19,.23,.92); } .nav-mobile:before { content: ''; position: absolute; width: 100%; height: 50px; background: #fff; top: 0; left: 0; z-index: 1; } .nav-mobile aside { position: relative; display: table; width: 100%; height: 100%; padding-top: 100px; text-align: center; background: #0c286d; } .nav-mobile aside ul { display: inline-block; width: 100%; vertical-align: middle; padding: 20px 0; } .nav-mobile aside ul li { display: table; width: 100%; padding: 0; text-align: left; vertical-align: middle; border-bottom: 1px solid #0a2248; } .nav-mobile aside ul li:nth-child(3) { display:none; } .nav-mobile aside ul li:first-child { border-top: 1px solid #0a2248; } .nav-mobile aside ul li a { position: relative; display: inherit; width: 100%; padding: 10px 20px 10px 40px; color: #fff; font-size: 16px; font-weight: 400; text-transform: uppercase; } .nav-mobile aside ul li a:hover { color: #d5ecff; } .nav-mobile aside ul li a.current { color: #e51c38; font-weight: 600; background: #0a2248; } .nav-mobile aside ul li a.current span:before { background: #edf5ff; border: 1px solid #edf5ff; } .nav-mobile aside ul li span { position: relative; display: table-cell; vertical-align: middle; } .nav-mobile aside ul li span:before { content: ''; position: absolute; width: 6px; height: 6px; border-radius: 50%; border: 1px solid #94b5de; background: none; left: -20px; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; } .nav-mobile aside .register { padding: 15px; } .nav-mobile aside .register span { padding-top: 2px; } .nav-mobile aside .btn-register { padding: 10px 15px; color: #fff; font-weight: 400; text-transform: uppercase; font-size: 18px; border-radius: 3px; background: #e51c38; } .nav-mobile aside ul li .toggle-subnav { display: none; padding-bottom: 20px; } .nav-mobile aside ul li .toggle-subnav a { padding: 5px 20px 5px 40px; font-size: 14px; color: #8fb0d9; } .subplus { position: absolute; width: 14px; height: 14px; right: 0; top: 3px; background: url(../images/icon-arrow-down.svg) no-repeat center; background-size: 100%; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .subplus-rotate { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } /* ------------------------------------------------------------------------------------------------------------ | Cover | ------------------------------------------------------------------------------------------------------------ */ .cover { margin-top: 106px; padding: 5px 0; } .cover:before { content: ''; position: absolute; width: 100%; height: 100%; background: rgba(0,20,50,.7); left: 0; top: 0; } .cover header { position: relative; } .cover h1 { color: #fff } .cover ul { position: absolute; right: 0; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; color: #fff; } .cover ul li { width: auto; padding: 0 15px; border-left: 1px solid #5f6b7f; } .cover ul li:first-child { border-left: none; } .cover ul li a { color: #fff; font-size: 16px; } .cover ul li a:hover,.cover ul li a.current { color: #1da1f2; } /* ------------------------------------------------------------------------------------------------------------ | Banner | ------------------------------------------------------------------------------------------------------------ */ .banner { display: block; margin-top: 106px; z-index: 0; } .banner li { position:relative; } .banner li aside { position: absolute; width: 100%; height: 100%; z-index: 1; } .banner li aside .warpper { display: flex; align-items: center; } .banner li aside article { display: flex; justify-content: center; width: 100%; color: #fff; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); } .banner li aside article h1 { padding-bottom: 0; font-size: 60px; line-height: 0.8; font-weight: 800; font-family: 'Montserrat', sans-serif; } .banner li aside article h1 span { font-family: 'Roboto', sans-serif; font-size: 30px; font-weight: 600; font-style: italic; color: #01369f; text-shadow: 0 0 2px rgba(255, 255, 255, 1);; } .banner li aside article h2 { font-size: 50px; text-transform: uppercase; font-weight: 300; } .banner li aside article h3 { padding-top: 20px; font-size: 34px; font-weight: 400; } .banner li aside article p { line-height: 1.2; font-size: 20px; } .banner li aside article a { color: #fff; } .banner img { display: block; width: 100%; } .banner .slick-dots { bottom: 15px; } .banner .slick-prev, .banner .slick-next { display: none !important; } /* ------------------------------------------------------------------------------------------------------------ | Feed Content | ------------------------------------------------------------------------------------------------------------ */ .feed-content { position: relative; width: 100%; } .feed-content .warpper { display: flex; flex-wrap: wrap; } .feed-content main { display: flex; flex-wrap: wrap; width: 100%; margin-top: 0; padding: 0; background: #eff1f5; border-top: 6px solid #0c286d; } .feed-content main .title { padding-top: 0; color: #0c286d; } .feed-content .box-feed { width: 70%; padding: 30px; } .feed-content .box-feed .lists { width: 100%; } .feed-content .box-feed .lists ul { display: flex; flex-wrap: wrap; margin: 0 -10px; } .feed-content .box-feed .lists li { width: 33.3333%; padding: 0 10px } .feed-content .box-feed .lists p { line-height: 1.2; } .feed-content .box-knowledge { width: 30%; padding: 30px; border-left: 1px solid #d9e1eb; } .feed-content .box-knowledge .lists { width: 100%; padding-bottom: 15px; } .feed-content .box-knowledge .lists ul { display: flex; flex-wrap: wrap; } .feed-content .box-knowledge .lists li { display: flex; flex-wrap: wrap; width: 100%; padding: 10px 0; border-bottom: 1px solid #d9e1eb; } .feed-content .box-knowledge .lists li:first-child { padding-top: 0; } .feed-content .box-knowledge .lists li:last-child { border-bottom: none; } .feed-content .box-knowledge .lists .photo { width: 100px; flex: inherit; } .feed-content .box-knowledge .lists .photo img { width: 100%; } .feed-content .box-knowledge .lists .text { display: flex; align-items: center; flex: 1; padding-left: 15px; } .feed-content .box-knowledge .lists .text p { padding: 0 } /* ------------------------------------------------------------------------------------------------------------ | Intro & Register | ------------------------------------------------------------------------------------------------------------ */ .intro-regis { position: relative; width: 100%; z-index: 1; margin-top: -20px; } .intro-regis .warpper { display: flex; flex-wrap: wrap; } .intro-regis main { width: 70%; margin-top: 20px; padding: 20px 60px 60px 0; border-top: 6px solid #0c286d; } .intro-regis main header { position: relative; } .intro-regis main h1 { color: #0c286d } .intro-regis main ul { display: flex; flex-wrap:wrap; } .intro-regis main ul li { position: relative; flex: 0 0 100%; width: 100%; padding-bottom: 10px; } .intro-regis main ul li a:hover { color: #e51c38; } .intro-regis main img { width: 100%; object-fit: cover; } .intro-regis main h4 { padding-bottom: 0; font-weight: 600; } .intro-regis main .date { position: relative; margin-top: 10px; padding: 0 0 0 32px; color: #0c286d; background: url(../images/icon-calendar.svg) no-repeat left center; background-size: 24px; } .intro-regis main .date p { padding: 4px 0 0 0; } .intro-regis main .date span { color: #e51c38; font-weight: 600; } .intro-regis main .list-data { display: flex; flex-wrap:wrap; margin: 20px 0 10px 0; } .intro-regis main .list-data dd { position: relative; flex: 0 0 50%; width: 50%; padding: 0 30px; } .intro-regis main .list-data a { display: flex; justify-content: center; align-items: center; padding: 10px 15px; color: #555; text-transform: uppercase; border-radius: 3px; } .intro-regis main .list-data a.one { background: #5a7da9; color: #fff; } .intro-regis main .list-data a:hover.one { background: #0c286d; } .intro-regis main .list-data a.two { background: #0c286d; color: #fff; } .intro-regis main .list-data a:hover.two { background: #0c286d; } .intro-regis main aside { width: 100%; margin-top: 30px; background: none; } .intro-regis main aside dl { } .intro-regis main aside dl dd { border: 1px solid #eef1f5 } .intro-regis aside { position: relative; width: 30%; color: #fff; background: #0c286d; } .intro-regis aside .welcome-member { position: relative; padding: 15px; text-align: center; } .intro-regis aside .welcome-member header { position: relative; text-align: center; text-transform: uppercase; } .intro-regis aside .welcome-member header h3 { font-weight: 600; } .intro-regis aside .welcome-member img { width: 100%; } .intro-regis aside .welcome-member a.one { color: #428fe4; } .intro-regis aside .welcome-member a:hover.one { color: #fff; } .intro-regis aside .welcome-member .link-re { padding: 15px 0; } .intro-regis aside .welcome-member .link-re a { padding: 10px 10px 12px 10px; border-radius: 3px; color: #fff; font-size: 24px; background: #e51c38 } .intro-regis aside .welcome-member .link-re a:hover { background: #f63e57 } .intro-regis aside .link-to-stat { display: flex; flex-wrap: wrap; justify-content: center; padding: 15px 30px; font-weight: 300; font-size: 20px; } .intro-regis aside .link-to-stat a { display: flex; flex-wrap: wrap; padding: 15px; color: #fff; text-transform: uppercase; } .intro-regis aside .link-to-stat a:hover span { border: 2px solid #ffb0bc; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .intro-regis aside .link-to-stat span { display: flex; margin-left: 15px; width: 30px; height: 30px; border: 2px solid #f35369; border-radius: 50%; background: url(../images/icon-right-arrow.svg) no-repeat center; background-size: 60%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .shortcut-link-home { width: 100%; padding-top: 10px; } .shortcut-link-home ul { display: flex; flex-wrap: wrap; margin: 0 -10px; padding: 0 !important } .shortcut-link-home li { width: 33.3333% !important; flex: 33.3333% !important; padding: 0 10px; margin: 0; list-style: none !important; } .shortcut-link-home .box { width: 100%; padding: 10px; display: flex; flex-wrap: wrap; align-items: center; background: #eff1f5; border-radius: 4px; } .shortcut-link-home .box a { ; width: 100%;} .shortcut-link-home .img { width: 50px; display: flex; flex-wrap: wrap; align-items: center; } .shortcut-link-home .img img { width: 100%; } .shortcut-link-home .text { flex: 1; padding-left: 10px; font-weight: 500; line-height: 1.2; } .shortcut-link-home .text small { display: block; width: 100%; font-weight: 300; color: #777; } /* ------------------------------------------------------------------------------------------------------------ | Programes & Table Score | ------------------------------------------------------------------------------------------------------------ */ .programes-tablescore { position: relative; width: 100%; z-index: 1; } .programes-tablescore .warpper { display: flex; flex-wrap: wrap; } .programes-tablescore main { width: 50%; padding: 40px 60px 40px 0; } .programes-tablescore main header { position: relative; } .programes-tablescore main h1 { color: #0c286d; border-bottom: 1px solid #c4d0dc; } .programes-tablescore main ul { display: flex; flex-wrap:wrap; padding-top: 15px; } .programes-tablescore main ul li { position: relative; flex: 0 0 100%; width: 100%; padding-bottom: 30px; } /*.programes-tablescore main ul li:first-child { padding-right: 50px; }*/ /*.programes-tablescore main ul li a { color: #e51c38; }*/ .programes-tablescore main ul li a:hover { color: #e51c38; } .programes-tablescore main img { width: 100%; object-fit: cover; } .programes-tablescore main h4 { padding-bottom: 0; font-weight: 600; } .programes-tablescore main .date { position: relative; margin-top: 10px; padding: 0 0 0 32px; color: #0c286d; background: url(../images/icon-calendar.svg) no-repeat left center; background-size: 24px; } .programes-tablescore main .date p { padding: 4px 0 0 0; color: #e51c38; } .programes-tablescore main .date span { color: #e51c38; } .programes-tablescore main .list-data { display: flex; flex-wrap:wrap; margin: 20px -2px; } .programes-tablescore main .list-data dd { position: relative; flex: 0 0 33.3333%; width: 33.3333%; padding: 0 2px; } .programes-tablescore main .list-data dd a { display: flex; justify-content: center; align-items: center; padding: 10px; line-height: 0.8; color: #555; font-size: 14px; font-weight: 400; text-transform: uppercase; border: 1px solid #c4d0dc; border-radius: 3px; } .programes-tablescore main .list-data dd a:hover { border: 1px solid #0c286d; } .programes-tablescore main .list-data dd i { margin-right: 6px; } .programes-tablescore main .list-data dd span { display: inline-flex; } .programes-tablescore main aside { width: 100%; margin-top: 30px; background: none; } .programes-tablescore main aside dl { } .programes-tablescore main aside dl dd { border: 1px solid #eef1f5 } .programes-tablescore aside { position: relative; width: 50%; color: #fff; background: #0c286d; } .programes-tablescore aside header { position: relative; text-align: center; } .programes-tablescore aside header a { padding: 10px 0; color: #fff; } .programes-tablescore aside .title:first-letter { color: #fff; } .programes-tablescore aside .sche { background: #203c85; } .programes-tablescore aside .sche h4 { padding: 15px 30px; text-transform: uppercase; font-weight: 400; text-align: center; background: #bb152e; } .programes-tablescore aside .sche table { width: 100%; } .programes-tablescore aside .sche table thead { font-size: 16px; } .programes-tablescore aside .sche table thead tr th { padding: 10px 15px; font-size: 20px; font-weight: 400; } .programes-tablescore aside .sche table thead tr th:first-child,.programes-tablescore aside .sche table thead tr th:last-child { width: 90px; } .programes-tablescore aside .sche table tbody { font-weight: 300; font-size: 16px; } .programes-tablescore aside .sche table tbody tr { border-top: 1px solid #0c286d } .programes-tablescore aside .sche table tbody tr td { padding: 10px 15px ; text-align: center; } .programes-tablescore aside .sche table tbody tr td small { font-size: 16px; color: #6190c3; } .programes-tablescore aside .sche table tbody tr:first-child td { padding-top: 10px; } .programes-tablescore aside .sche table tbody tr td a { color: #fff; } .programes-tablescore aside .sche table tbody tr td a:hover { color: #1da1f2; } .programes-tablescore aside .sche .resp-tab-active { background: #bb152e; } .programes-tablescore aside .sche .resp-tabs-list dt span { color: #fff; } .programes-tablescore aside .sche .resp-tabs-list dt:hover { background: #e51c38; } .programes-tablescore aside .sche .resp-tab-content { border-top: 1px solid #bb152e !important; } .programes-tablescore aside .link-to-stat { display: flex; flex-wrap: wrap; justify-content: center; padding: 15px 30px; font-weight: 300; font-size: 20px; } .programes-tablescore aside .link-to-stat a { display: flex; flex-wrap: wrap; padding: 15px; color: #fff; text-transform: uppercase; } .programes-tablescore aside .link-to-stat a:hover span { border: 2px solid #ffb0bc; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .programes-tablescore aside .link-to-stat span { display: flex; margin-left: 15px; width: 30px; height: 30px; border: 2px solid #f35369; border-radius: 50%; background: url(../images/icon-right-arrow.svg) no-repeat center; background-size: 60%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .icon-factsheet { width: 16px; height: 16px; background: url(../images/icon-factsheet.svg) no-repeat center; background-size: 100%; } .icon-apply { width: 16px; height: 16px; background: url(../images/icon-apply.svg) no-repeat center; background-size: 100%; } .icon-entrylist { width: 16px; height: 16px; background: url(../images/icon-entrylist.svg) no-repeat center; background-size: 100%; } .icon-teetimes { width: 16px; height: 16px; background: url(../images/icon-teetimes.svg) no-repeat center; background-size: 100%; } /* ------------------------------------------------------------------------------------------------------------ | Player Home | ------------------------------------------------------------------------------------------------------------ */ .player-home { padding: 40px 0 60px 0; color: #fff;/* background: url(../images/bg-player.jpg) no-repeat center; background-size: cover; */ background: #eff1f5; } .player-home .warpper { display: flex; flex-wrap: wrap; } .player-home main { position: relative; width: 100%; } .player-home header h1 { color: #0c286d; } .player-home header a { color: #0c286d; } .player-home header span a:hover { color: #fff; } .player-home ul { display: flex; flex-wrap: wrap; margin-top: 20px; } .player-home ul li { text-align: center; } .player-home ul li .photo-radius { position: relative; width: 100%; height: 100%; padding: 15px; overflow: hidden; border: 1px solid #1966af; background: #fff; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } /*.player-home ul li .photo-radius:before { content: ""; opacity: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; position: absolute; border: 2px dashed #fff; width: 100%; height: 100%; background-size: 100%; top:0; bottom:0; margin-top:auto; margin-bottom:auto; margin-left:auto; margin-right:auto; left: 0; right: 0; z-index: 1; -webkit-animation-name: spin; -webkit-animation-duration: 20s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin; -moz-animation-duration: 20s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: spin; -ms-animation-duration: 20s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; z-index:1; border-radius: 50%; } .player-home ul li a:hover .photo-radius:before { opacity: 1; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } @-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes spin { from {transform:rotate(0deg);} to {transform:rotate(360deg);} }*/ .player-home ul li a { color: #0c286d; border-radius: 50%; } .player-home ul li a:hover { color: #1da1f2 } .player-home ul li h5 { padding: 20px 0 0 0; } .player-home ul li h5 a { display: inline-flex; } .player-home ul li h5 span { padding-left: 8px; } .player-home ul li p { padding-top: 0; font-size: 14px; color: #555; } .player-home ul li p span { color: #e51c38; font-size: 24px; font-weight: 600; } .player-home ul li figure { position: relative; display: block; height: 0; padding-bottom: 100%; overflow: hidden; } .player-home ul li figure img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; } .player-home .viewall span a:hover { color: #428fe4; } .players-list { position: relative; width: 100%; padding: 0 0 60px 0; background: #fff; } .players-list .warpper { display: flex; flex-wrap: wrap; } .players-list main { width: 100%; padding-top: 15px; } .players-list main ul { display: flex; flex-wrap: wrap; margin: 0 -15px; } .players-list main ul li { width: 25%; flex: 0 0 25%; text-align: center; padding: 20px 15px; } .players-list main ul li .photo-radius { position: relative; margin: 0 auto; width: 100%; padding: 15px; overflow: hidden; border: 1px solid #1966af; background: #fff; webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; /* -webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.4); -moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.35); box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.35); */ } .players-list main ul li .photo-radius img { width: 100%; object-fit: cover; -webkit-transition: all 5s ease; -moz-transition: all 5s ease; -o-transition: all 5s ease; transition: all 5s ease; } .players-list main ul li .photo-radius a { display: block !important; } /*.players-list main ul li .photo-radius a:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); }*/ .players-list main ul li a { color: #fff; } .players-list main ul li a:hover { color: #1da1f2 } .players-list main ul li h5 { padding: 10px 0 0 0; } .players-list main ul li h5 a { display: inline-flex; } .players-list main ul li h5 span { padding-left: 8px; } .players-list main ul li p { padding-top: 0; font-size: 14px; color: #94b5de; } .players-list main ul li p span { color: #e51c38; font-size: 24px; font-weight: 600; } .players-list main ul li figure { position: relative; display: block; height: 0; padding-bottom: 100%; overflow: hidden; } .players-list main ul li figure img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; } .players-list main ul li article { position: relative; background: #0c286d; } .players-list main ul li .left { position: relative; width: 100%; margin: 0 auto; left: 0; right: 0; } .players-list main ul li .right { width: 100%; padding: 15px 15px 15px 15px; } .players-detail { position: relative; width: 560px; padding: 0; background: #0c286d; } .players-detail article { position: relative; width: 100%; } .players-detail .photo { position: relative; width: 100%; padding: 30px 10px; border-bottom: 5px solid #1966af; background: #eff1f5; background-size: cover; } .players-detail .photo figure { display: flex; margin: 0 auto; width: 300px; height: 300px; position: relative; padding: 15px; overflow: hidden; border: 1px solid #1966af; background: #fff; overflow: hidden; } .players-detail .photo img { width: 100%; object-fit: cover; } .players-detail .text { position: relative; width: 100%; padding: 20px 30px 15px 30px; color: #fff; } .players-detail .text h4 { padding: 0; font-weight: 500; } .players-detail .name-th { padding-top: 0; font-size: 20px; color: #1da1f2 } .players-detail .member-id { position: absolute; display: flex; align-items: center; justify-content: center; width: 180px; height: 40px; padding: 10px 15px; line-height: 0; color: #fff; text-align: center; background: #1966af; right: 0; left: 0; margin-left: auto; margin-right: auto; top: -22px; z-index: 1; } .players-detail ul { display: flex; flex-wrap: wrap; margin-top: 20px; } .players-detail ul li { width: 50%; } .players-detail ul li.full { width: 100%; } .players-detail ul li p { padding-top: 0; } .players-detail ul li small { color: #94b5de } /* ------------------------------------------------------------------------------------------------------------ | Gallery Home | ------------------------------------------------------------------------------------------------------------ */ .gallery-home { padding: 40px 0 60px 0; color: #fff; background: #0c286d; } .gallery-home header { margin-bottom: 15px; } .gallery-home header a { color: #94b5de !important; } .gallery-home header span a:hover { color: #fff !important; } .gallery-home main { position: relative; width: 100%; display: flex; flex-wrap: wrap; overflow-x: hidden; } .gallery-home main article { flex: 0 0 50%; width: 50%; padding-right: 15px; } .gallery-home main article h3 { padding-top: 10px; } .gallery-home main article small { display: block; margin-top: 10px; } .gallery-home main article small a { color: #94b5de ; } .gallery-home main article small a:hover { color: #e51c38 } .gallery-home main article a { color: #fff; font-weight: 400; } .gallery-home main article a:hover { color: #1da1f2 } .gallery-home main article .photo { border: 10px solid #fff; -webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.4); -moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.4); box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.4); } .gallery-home main aside { flex: 0 0 50%; width: 50%; padding-left: 15px; } .gallery-home main aside ul { display: flex; flex-wrap: wrap; margin: 0 -15px } .gallery-home main aside ul li { position: relative; flex: 0 0 50%; width: 50%; padding: 0 15px 15px 15px; } .gallery-home main aside ul li a { color: #fff; font-weight: 400; } .gallery-home main aside ul li a:hover { color: #1da1f2 } /* ------------------------------------------------------------------------------------------------------------ | News & Activities Home | ------------------------------------------------------------------------------------------------------------ */ .news-event-home { padding: 40px 0 60px 0; color: #fff; background: #203c85; } .news-event-home header a { color: #94b5de; } .news-event-home header span a:hover { color: #fff; } .news-event-home main { position: relative; width: 100%; overflow-x: hidden; } .news-event-home main ul { display: flex; flex-wrap: wrap; margin: 15px -15px 0 -15px; } .news-event-home main ul li { position: relative; width: 33.3333%; padding: 0 15px; } .news-event-home main ul li:last-child { display: none; } .news-event-home main ul li a { color: #fff; font-weight: 400; } .news-event-home main ul li a:hover { color: #1da1f2 } .news-event { padding: 0 0 60px 0; } .news-event .warpper { display: flex; flex-wrap: wrap; } .news-event main { flex: 0 0 70%; width: 70%; padding-top: 30px; } .news-event aside { flex: 0 0 30%; width: 30%; padding-left: 30px; padding-top: 7px; } .news-search aside { flex: 0 0 100%; width: 100%; padding-top: 15px; padding-left: 0; } .news-all-list-style { position: relative; flex: 0 0 100%; width: 100%; } .news-all-list-style article { position: relative; width: 100%; padding-bottom: 15px; border-bottom: 1px solid #e6eaef; } .news-all-list-style article h3 { padding: 20px 0 0 0; } .news-all-list-style article img { display: block; width: 100%; } .news-all-list-style ul { display: flex; flex-wrap:wrap; align-content: flex-start; margin: 0 -15px; } .news-all-list-style li { display: flex; flex-wrap: wrap; position: relative; flex: 0 0 25%; width: 25%; padding: 15px 15px 0 15px; align-content: flex-start; } .news-all-list-style li .photo { width: 100%; flex: 0 0 100%; } .news-all-list-style li .photo img { display: block; width: 100% } .news-all-list-style li .text { width: 100%; flex: 0 0 100%; } .news-all-list-style li .text h4 { padding: 15px 0 5px 0; } .news-all-list-style li .text h5 { padding: 10px 0 5px 0; } .news-all-list-style p { padding-top: 10px; color: #888 } .blog-all-list-style { position: relative; -ms-flex: 0 0 100%; flex: 0 0 100%; width: 100%; padding-bottom: 20px; } .blog-all-list-style article { position: relative; width: 100%; padding-bottom: 15px; border-bottom: 1px solid #e6eaef; } .blog-all-list-style article h3 { padding: 20px 0 0 0; } .blog-all-list-style article picture img { width: 100%; } .blog-all-list-style article img { display: block; } .blog-all-list-style ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap:wrap; align-content: flex-start; } .blog-all-list-style li { display: flex; flex-wrap: wrap; position: relative; -ms-flex: 0 0 100%; flex: 0 0 100%; width: 100%; padding: 30px 0; border-bottom: 1px solid #e6eaef; } .blog-all-list-style li .photo { width: 40%; flex: 0 0 40%; } .blog-all-list-style li .photo img { display: block; width: 100% } .blog-all-list-style li .text { width: 60%; flex: 0 0 60%; padding-left: 30px; } .blog-all-list-style li .text h4 { padding: 15px 0 5px 0; } .blog-all-list-style li .text h5 { padding: 0 0 5px 0; } .blog-all-list-style p { padding-top: 10px; color: #888 } .blog-most-read-style { position: relative; flex: 0 0 100%; width: 100%; } .blog-most-read-style header h4 { text-transform: uppercase; color: #0c286d; } .blog-most-read-style header h4:first-letter { font-weight: 600 } .blog-most-read-style header h4:before { content: ''; position: absolute; width: 30%; height: 1px; top: 0; bottom: 0; margin-top: auto; margin-bottom: 0; left: 0; background: #e51c38; z-index: 1; } .blog-most-read-style header h4:after { content: ''; position: absolute; width: 100%; height: 1px; top: 0; bottom: 0; margin-top: auto; margin-bottom: 0; left: 0; background: #0c286d } .blog-most-read-style li { display: flex; position: relative; width: 100%; padding: 15px 0; align-items: center; border-bottom: 1px solid #e6eaef; } .blog-most-read-style .photo { width: 40%; flex: 0 0 40%; vertical-align: top; } .blog-most-read-style .photo img { width: 100%; object-fit: cover; } .blog-most-read-style .text { width: 60%; flex: 0 0 60%; padding-left: 15px; } .blog-most-read-style .text h5 { min-height: 44px; padding: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; } .blog-most-read-style .text p { padding: 0; } .news-event-detail { margin-top: 60px; } .news-event-detail header h3 { padding: 0 0 20px 0; } .news-event-detail main { padding-top: 70px; } .news-event-detail aside { padding-top: 60px; } .news-event-detail article { border-bottom: none; } .news-event-detail .editor { padding-top: 15px; } .news-event-detail .editor ul li { display: list-item; list-style: circle; padding: 0 0 10px 0; border-bottom: none; } .news-event-detail .editor ol li { display: list-item; list-style: decimal; padding: 0 0 10px 0; border-bottom: none; } .news-event-detail .editor p { color: #555 } .news-event-detail .blog-all-list-style { padding-bottom: 0 } .blog-other-read-style { position: relative; padding-top: 20px; } .blog-other-read-style header h4 { text-transform: uppercase; color: #0c286d; } .blog-other-read-style header h4:first-letter { font-weight: 600 } .blog-other-read-style header h4:before { content: ''; position: absolute; width: 30%; height: 1px; top: 0; bottom: 0; margin-top: auto; margin-bottom: 0; left: 0; background: #e51c38; z-index: 1; } .blog-other-read-style header h4:after { content: ''; position: absolute; width: 100%; height: 1px; top: 0; bottom: 0; margin-top: auto; margin-bottom: 0; left: 0; background: #0c286d } .blog-other-read-style ul { display: flex; flex-wrap: wrap; margin: 0 -15px; } .blog-other-read-style li { display: flex; position: relative; width: 50%; flex: 0 0 50%; padding: 15px 15px ; align-items: center; border-bottom: none; } .blog-other-read-style .photo { width: 40%; flex: 0 0 40%; vertical-align: top; } .blog-other-read-style .photo img { width: 100%; object-fit: cover; } .blog-other-read-style .text { width: 60%; flex: 0 0 60%; padding-left: 15px !important; } .blog-other-read-style .text h5 { padding: 0 0 0 0 !important; } .blog-other-read-style .text p { padding: 0; } /* ------------------------------------------------------------------------------------------------------------ | Video | ------------------------------------------------------------------------------------------------------------ */ .video { padding: 0 0 60px 0; } .video .warpper { display: flex; flex-wrap: wrap; } .video main { display: flex; flex-wrap: wrap; flex: 0 0 100%; width: 100%; padding-top: 30px; margin: 0; } .video main article { flex: 0 0 75%; width: 75%; padding: 0 7.5px 0 0; } .video main article h3 { padding: 20px 0 5px 0 ; } .video main article .youtube-embed { box-shadow: none; border: none; } .video main .most-view { flex: 0 0 25%; width: 25%; padding: 0 0 0 23px; margin-top: -14px; } .video main .most-view header h4 { padding-top: 5px; text-transform: uppercase; color: #0c286d; } .video main .most-view header h4:first-letter { font-weight: 600 } .video main .most-view header h4:before { content: ''; position: absolute; width: 30%; height: 1px; top: 0; bottom: 0; margin-top: auto; margin-bottom: 0; left: 0; background: #e51c38; z-index: 1; } .video main .most-view header h4:after { content: ''; position: absolute; width: 100%; height: 1px; top: 0; bottom: 0; margin-top: auto; margin-bottom: 0; left: 0; background: #0c286d } .video main .most-view ul { display: flex; flex-wrap: wrap; } .video main .most-view ul li { display: flex; position: relative; width: 100%; padding: 15px 0; align-items: center; border-bottom: 1px solid #e6eaef; } .video main .most-view ul li:last-child { border: none; } .video main .most-view ul .photo { width: 40%; flex: 0 0 40%; vertical-align: top; } .video main .most-view ul .photo img { width: 100%; object-fit: cover; } .video main .most-view ul .text { width: 60%; flex: 0 0 60%; padding-left: 15px; } .video main .most-view ul .text h5 { min-height: 44px; margin: 0; padding: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; } .video main .most-view ul .text p { padding: 0; } .video main .most-view .play-vdo { width: 26px; height: 26px; } .video main .share-social { border-bottom: none; padding-bottom: 30px; } .video main .share-social .share-facebook { padding-left: 0; } .video main .share-social .share-line { padding-right: 0; } .video aside { flex: 0 0 100%; width: 100%; padding-top: 15px; border-top: 1px solid #e6eaef; } .vdo-search aside { border-top: none; } .video-all-list-style { position: relative; flex: 0 0 100%; width: 100%; } .video-all-list-style article { position: relative; width: 100%; padding-bottom: 15px; border-bottom: 1px solid #e6eaef; } .video-all-list-style article h3 { padding: 20px 0 0 0; } .video-all-list-style article img { display: block; width: 100%; } .video-all-list-style ul { display: flex; flex-wrap:wrap; align-content: flex-start; margin: 0 -15px; } .video-all-list-style li { display: flex; flex-wrap: wrap; position: relative; flex: 0 0 25%; width: 25%; padding: 15px 15px 0 15px; align-content: flex-start; } .video-all-list-style li .photo { width: 100%; flex: 0 0 100%; } .video-all-list-style li .photo img { display: block; width: 100% } .video-all-list-style li .text { width: 100%; flex: 0 0 100%; } .video-all-list-style li .text h4 { padding: 15px 0 5px 0; } .video-all-list-style li .text h5 { padding: 10px 0 5px 0; } .video-all-list-style p { padding-top: 10px; color: #888 } /* ------------------------------------------------------------------------------------------------------------ | Gallery | ------------------------------------------------------------------------------------------------------------ */ .gallery { padding: 0 0 60px 0; } .gallery .warpper { display: flex; flex-wrap: wrap; } .gallery main { display: flex; flex-wrap: wrap; flex: 0 0 100%; width: 100%; padding-top: 30px; margin: 0; } .gallery main article { flex: 0 0 66%; width: 66%; padding: 0 7.5px 0 0; } .gallery main article h3 { padding: 20px 0 5px 0 ; } .gallery main article .youtube-embed { box-shadow: none; border: none; } .gallery main .most-view { flex: 0 0 34%; width: 34%; padding: 0 0 0 23px; margin-top: -14px; } .gallery main .most-view header h4 { padding-top: 5px; text-transform: uppercase; color: #0c286d; } .gallery main .most-view header h4:first-letter { font-weight: 600 } .gallery main .most-view header h4:before { content: ''; position: absolute; width: 30%; height: 1px; top: 0; bottom: 0; margin-top: auto; margin-bottom: 0; left: 0; background: #e51c38; z-index: 1; } .gallery main .most-view header h4:after { content: ''; position: absolute; width: 100%; height: 1px; top: 0; bottom: 0; margin-top: auto; margin-bottom: 0; left: 0; background: #0c286d } .gallery main .most-view ul { display: flex; flex-wrap: wrap; } .gallery main .most-view ul li { display: flex; position: relative; width: 100%; padding: 15px 0; align-items: center; border-bottom: 1px solid #e6eaef; } .gallery main .most-view ul li:last-child { border: none; } .gallery main .most-view ul .photo { width: 40%; flex: 0 0 40%; vertical-align: top; } .gallery main .most-view ul .photo img { width: 100%; object-fit: cover; } .gallery main .most-view ul .text { width: 60%; flex: 0 0 60%; padding-left: 15px; } .gallery main .most-view ul .text h5 { min-height: 44px; margin: 0; padding: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; } .gallery main .most-view ul .text p { padding: 0; } .gallery main .most-view .play-vdo { width: 26px; height: 26px; } .gallery main .share-social { border-bottom: none; padding-bottom: 30px; } .gallery main .share-social .share-facebook { padding-left: 0; } .gallery main .share-social .share-line { padding-right: 0; } .gallery aside { flex: 0 0 100%; width: 100%; padding-top: 15px; border-top: 1px solid #e6eaef; } .cloud-gallery aside { border-top: none ; } .gallery .box-name { width: 100%; padding-top: 10px; } .gallery .box-name h1 { font-size: 30px; } .gallery .search-share-gallery { display: flex; flex-wrap: wrap; width: 100%; border-bottom: 3px solid #f63e57 } .gallery .search-filter { flex: 1; border-bottom: none; } .gallery .box-share { display: flex; align-items: center; width: auto; margin-left: auto; } .gallery .box-share .share-social { border-bottom: none; } .cloud-gallery .grid .inbox { position:relative; width: 100%; height:100%; } .cloud-gallery .grid .box { display: flex; align-items: flex-start; text-align: center; left: 0; width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; } .cloud-gallery .grid ul { display: flex; flex-wrap: wrap; margin: -5px} .cloud-gallery .grid li { position: relative; width: 20%; height: 170px; padding: 5px;} .cloud-gallery .grid li a { position: absolute; width: 100%; height: 100%; z-index: 1; left: 0; top: 0; text-indent: -9999px; cursor: zoom-in; } .cloud-gallery .grid img { width: 100%; margin: auto;} @media (max-width: 1440px) { .cloud-gallery .grid li { height: 150px; } } @media (max-width: 1024px) { .cloud-gallery .grid li { height: 130px; } } @media (max-width: 1023px) { .cloud-gallery .grid li { width: 25%; height: 125px; } } @media (max-width: 767px) { .cloud-gallery .grid li { width: 50%; height: 120px; } } /*.cloud-gallery .grid ul { display: flex; flex-wrap: wrap;} .cloud-gallery .grid li { position: relative; height: 20vh; flex-grow: 1;} .cloud-gallery .grid li a { position: absolute; width: 100%; height: 100%; z-index: 1; left: 0; top: 0; text-indent: -9999px; cursor: zoom-in; } .cloud-gallery .grid li:last-child { flex-grow: 10; } .cloud-gallery .grid img { max-height: 100%; min-width: 100%; object-fit: cover; vertical-align: bottom; } @media (max-aspect-ratio: 1/1) { .cloud-gallery .grid li { height: 30vh;} } @media (max-height: 480px) { .cloud-gallery .grid li { height: 80vh; } } @media (max-aspect-ratio: 1/1) and (max-width: 480px) { .cloud-gallery .grid ul { flex-direction: row; } .cloud-gallery .grid li { height: auto; width: 100%; border-bottom: 10px solid #fff; } .cloud-gallery .grid img { width: 100%; max-height: 75vh; min-width: 0; } } */ .gallery-search aside { border-top: none; } .gallery-all-list-style { position: relative; flex: 0 0 100%; width: 100%; } .gallery-all-list-style article { position: relative; width: 100%; padding-bottom: 15px; border-bottom: 1px solid #e6eaef; } .gallery-all-list-style article h3 { padding: 20px 0 0 0; } .gallery-all-list-style article img { display: block; width: 100%; } .gallery-all-list-style ul { display: flex; flex-wrap:wrap; align-content: flex-start; margin: 0 -15px; } .gallery-all-list-style li { display: flex; flex-wrap: wrap; position: relative; flex: 0 0 33.3333%; width: 33.3333%; padding: 15px; align-content: flex-start; } .gallery-all-list-style li .photo { width: 100%; flex: 0 0 100%; } .gallery-all-list-style li .photo img { display: block; width: 100% } .gallery-all-list-style li .text { width: 100%; flex: 0 0 100%; } .gallery-all-list-style li .text h4 { padding: 15px 0 5px 0; } .gallery-all-list-style li .text h5 { padding: 15px 0 5px 0; } .gallery-all-list-style p { padding-top: 10px; color: #888 } .popular-gallery { margin:0 auto; width: 100%; } .popular-gallery img { width: 100%; } .popular-gallery dt a { display: block; position: relative; width: 100%; color: #fff; } .popular-gallery dt h4 { position: absolute; width: 100%; bottom: 0; padding: 10px 15px; background: rgba(52,175,196,.6); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .popular-gallery dt a:hover h4 { background: rgba(52,175,196,1); } .popular-gallery dt h4 span { float: right; font-size: 16px; padding-top: 3px; } .popular-gallery .icon-zoom { position: absolute; width: 26px; height: 26px; background: url(../images/icon-zoom.svg) no-repeat center; background-size: 80%; top: 10px; right: 10px; opacity: 0.5; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .popular-gallery dt a:hover .icon-zoom { opacity: 1; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } /* ------------------------------------------------------------------------------------------------------------ | Tournament | ------------------------------------------------------------------------------------------------------------ */ .schedule { padding: 20px 0 60px 0; } .schedule .warpper { display: flex; flex-wrap: wrap; } .schedule header { position: relative; padding-bottom: 20px; } .schedule header h2 { color: #0c286d } .schedule header h2:first-letter { font-weight: 600; } .schedule header h2 span { font-weight: 600; color: #e51c38; } .schedule header h2 span small { font-weight: 300; } .schedule header p { display: flex; align-items: center; position: absolute; right: 0; top: 0; bottom: 20px; } .schedule header p span { position: relative; color: #8093a5; } .schedule header p span:before { content: ''; position: absolute; width: 60px; height: 1px; background: #0c286d; left: -80px; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; } .schedule main { width: 100%; padding: 0; } .schedule main ul { display: flex; flex-wrap:wrap; } .schedule main ul li { position: relative; display: flex; flex-wrap: wrap; flex: 0 0 100%; width: 100%; padding: 30px 0; border-top: 1px solid #e6eaef; } .schedule main ul li a { display: flex; align-items: center; } .schedule main ul li a:hover { color: #e51c38; } .schedule main article { flex: 0 0 70%; width: 70%; padding-right: 30px; } .schedule main article h4 { font-weight: 600; } .schedule main article small { color: #e51c38; } .schedule main img { width: 100%; object-fit: cover; } .schedule main h3 { padding-bottom: 0; font-weight: 600; } .schedule main .date { position: relative; margin-top: 10px; padding: 0 0 0 32px; color: #0c286d; background: url(../images/icon-calendar.svg) no-repeat left center; background-size: 24px; } .schedule main .date p { padding: 4px 0 0 0; color: #e51c38; } .schedule main .date span { color: #e51c38; } .schedule main .date small { color: #e51c38; } .schedule main .list-data { display: flex; flex-wrap:wrap; /*width: 100%;*/ max-width: 400px; margin: 20px -2px; } .schedule main .list-data dd { position: relative; flex: 0 0 33.3333%; width: 33.3333%; padding: 0 2px; } .schedule main .list-data dd a { display: flex; justify-content: center; align-items: center; padding: 10px; line-height: 0.8; color: #555; font-size: 14px; font-weight: 400; text-transform: uppercase; border: 1px solid #c4d0dc; border-radius: 3px; } .schedule main .list-data dd a:hover { border: 1px solid #0c286d; } .schedule main .list-data dd i { margin-right: 6px; } .schedule main .list-data dd span { display: inline-flex; } .schedule main aside { flex: 0 0 30%; width: 30%; } .schedule .select-now { width: 150px; } .schedule-detail { padding: 20px 0 60px 0; } .schedule-detail .warpper { display: flex; flex-wrap: wrap; } .schedule-detail header { display: flex; align-items: center; position: relative; padding-bottom: 20px; padding-right: 240px; } .schedule-detail header h2 {/* color: #0c286d*/ } .schedule-detail header h2:first-letter { font-weight: 600; } .schedule-detail header h2 span { font-weight: 600; color: #e51c38; } .schedule-detail header h2 span small { font-weight: 300; } .schedule-detail header p { display: flex; align-items: center; position: absolute; right: 0; top: 0; bottom: 20px; } .schedule-detail header p span { position: relative; color: #8093a5; } .schedule-detail header p span:before { content: ''; position: absolute; width: 60px; height: 1px; background: #0c286d; left: -80px; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; } .schedule-detail main { display: flex; flex-wrap: wrap; width: 100%; padding: 0 0 30px 0; } .schedule-detail .course-gallery { width: 60%; } .schedule-detail main article { position: relative; width: 40%; padding: 40px 60px; color: #fff; background: #0c286d; } .schedule-detail main article p span { color: #94b5de; } .schedule-detail main .date { position: relative; margin-top: 10px; padding: 5px 0 0 40px; color: #94b5de; background: url(../images/icon-calendar.svg) no-repeat left center; background-size: 26px; } .schedule-detail main .date p { padding: 4px 0 0 0; } .schedule-detail main .date span { color: #e51c38; } .schedule-detail main .date small { color: #1da1f2; } .schedule-detail aside { position: relative; display: flex; flex-wrap: wrap; width: 100%; } .schedule-detail aside .tabs { width: 100%; } .schedule-detail aside .tabs ul { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 -10px; } .schedule-detail aside .tabs ul li { width: 33.3333%; padding: 0 10px; } .schedule-detail aside .tabs ul li a { display: flex; justify-content: center; align-items: center; padding: 15px 30px; text-transform: uppercase; line-height: 1; color: #555; text-align: center; background: #fff; border: 1px solid #c4d0dc; border-radius: 3px; } .schedule-detail aside .tabs ul li a:hover { color: #fff; border: 1px solid #0c286d; background: #0c286d; } .schedule-detail aside .tabs ul li a.current { padding: 20px 30px; color: #fff; border: 1px solid #e51c38; background: #e51c38; -webkit-border-radius: 3px; -webkit-border-bottom-right-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-radius: 3px; -moz-border-radius-bottomright: 0; -moz-border-radius-bottomleft: 0; border-radius: 3px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .schedule-detail aside .tabs ul li a.current .icon-factsheet { background: url(../images/icon-factsheet-white.svg) no-repeat center; background-size: 100%; } .schedule-detail aside .tabs ul li a.current .icon-apply { background: url(../images/icon-apply-white.svg) no-repeat center; background-size: 100%; } .schedule-detail aside .tabs ul li a.current .icon-entrylist { background: url(../images/icon-entrylist-white.svg) no-repeat center; background-size: 100%; } .schedule-detail aside .tabs ul li a.current .icon-teetimes { background: url(../images/icon-teetimes-white.svg) no-repeat center; background-size: 100%; } .schedule-detail aside .tabs ul li i { width: 24px; height: 24px; margin-right: 10px; } .schedule-detail aside .schedule-content { width: 100%; padding: 30px 0 0 0; border-top: 1px solid #e51c38; } .schedule-detail aside .schedule-content .register-zone { display: block; border-top: none; } .schedule-detail aside .schedule-content .register-zone article { padding-top: 0; padding-bottom: 0; } .schedule-detail aside .schedule-content .register-zone article h4 { color: #555; } .schedule-detail aside .schedule-special-content { margin-top: 20px; border-top: 1px solid #e6eaef} .schedule-special header { display: flex; align-items: center; } .facesheet-award { margin-bottom: 15px; padding: 15px 30px; background: #0c286d; color: #fff; } .schedule .ranking-wagr { display: inline-block; position: relative; width: 62px; height: 40px; margin: 0 5px 0 0; text-indent: -9999px; overflow: hidden; background: url(../images/logo-wagr.jpg) no-repeat center; background-size: auto 100%; } .schedule .ranking-jgs { display: inline-block; position: relative; width: 80px; height: 40px; margin: 0 5px 0 0; text-indent: -9999px; overflow: hidden; background: url(../images/logo-jgs.jpg) no-repeat center; background-size: auto 100%; } .schedule-detail .ranking-wagr { display: inline-block; position: relative; width: 62px; height: 40px; margin: 0 5px 0 0; text-indent: -9999px; overflow: hidden; background: url(../images/logo-wagr.jpg) no-repeat center; background-size: auto 100%; } .schedule-detail .ranking-jgs { display: inline-block; position: relative; width: 80px; height: 40px; margin: 0 5px 0 0; text-indent: -9999px; overflow: hidden; background: url(../images/logo-jgs.jpg) no-repeat center; background-size: auto 100%; } .schedule-filter { position: relative; width: 100%; padding: 0 20px; background: #f63e57 } .schedule-filter ul { display: flex; flex-wrap: wrap; margin: 0 -20px; } .schedule-filter ul li { position: relative; display: flex; align-items: center; padding: 5px 20px; color: #fff; text-transform: uppercase; } .schedule-filter ul li h5 { line-height: 1; } .schedule-filter .select-now { position: relative; padding-left: 10px; flex: 1; } .schedule-filter .select-now input[type="button"], .schedule-filter .select-now input[type="submit"] { position: absolute; right: 5px; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; width: 24px; height: 24px; min-width: 24px; max-width: 24px; background: #fff url(../images/icon-search.svg) no-repeat center; background-size: 80%; } .schedule-filter .select-now input[type="text"] { min-width: 200px; border: none !important; border-radius: 3px; font-size: 16px; } .schedule-filter select { min-width: 200px;/* text-transform: uppercase;*/ font-size: 16px; border: none !important; } .schedule-filter select option { font-family: Arial, Helvetica, sans-serif; font-size: 14px; padding: 5px; } .teamcolor { display: inline-flex; width: 20px; height: 20px; margin-right: 5px; background-repeat: no-repeat; background-position: center; background-size: 100%; } .team-red { background-image: url(../images/icon-team-red.svg); } .team-pink { background-image: url(../images/icon-team-pink.svg); } .team-yellow { background-image: url(../images/icon-team-yellow.svg); } .team-green { background-image: url(../images/icon-team-green.svg); } .team-blue { background-image: url(../images/icon-team-blue.svg); } .team-sky { background-image: url(../images/icon-team-sky.svg); } .team-purple { background-image: url(../images/icon-team-purple.svg); } .playoff-star { background-image: url(../images/icon-playoff-star.svg); } .entry-list { position: relative; width: 100%; } .entry-list ul { display: flex; flex-wrap: wrap; } .entry-list ul li { position: relative; display: flex; flex-wrap: wrap; width: 100%; justify-content: center; align-items: center; text-align: center; border-bottom: 1px solid #e6eaef; } .entry-list ul li:first-child { border-bottom: 2px solid #e6eaef; } .entry-list ul li:first-child .box { padding: 0; } .entry-list ul li:first-child h5 { font-weight: 600; font-size: 16px; color: #0c286d; text-transform: uppercase; } .entry-list ul li .box { display: flex; align-items: center; justify-content: center; width: 20%; padding: 10px 0; } .entry-list ul li .name { flex: 1; } .entry-list ul li .box h5 { display: inline-flex; align-items: center; } .entry-list ul li .box h5 span { margin-left: 10px; } .entry-list ul li .photo-avatar { flex: 1; padding-left: 15px; justify-content: flex-start; } .entry-list ul li .photo-radius { position: relative; width: 100px; margin-right: 15px; padding: 5px; /*border-radius: 50%;*/ overflow: hidden; border: 1px solid #1966af; } .entry-list ul li .photo-radius figure { position: relative; display: block; height: 0; padding-bottom: 100%; /*border-radius: 50%;*/ overflow: hidden; } .entry-list ul li .photo-radius figure img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; /*border-radius: 50%; */ } .entry-list ul li .d-confirm { position: relative; padding: 0 0 0 24px; } .entry-list ul li .d-confirm:before { content: ''; position: absolute; width: 16px; height: 16px; left: 0; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; border-radius: 50%; background: #50c48f; } .entry-list ul li .d-reserve { position: relative; padding: 0 0 0 24px; } .entry-list ul li .d-reserve:before { content: ''; position: absolute; width: 16px; height: 16px; left: 0; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; border-radius: 50%; background: #f63e57; } .entry-list ul li .x-age h5 span { display: none; } .tee-times-list { position: relative; width: 100%; } .tee-times-list ul { display: flex; flex-wrap: wrap; } .tee-times-list ul li { position: relative; display: flex; flex-wrap: wrap; width: 100%; padding: 15px 0; align-items: flex-start; text-align: center; border-bottom: 1px solid #e6eaef; } .tee-times-list ul li:last-child { border-bottom: none; } .tee-times-list ul li header { padding-bottom: 0; padding-right: 0; color: #0c286d } .tee-times-list ul li header h3 { padding-bottom: 0; font-weight: 600 } .tee-times-list ul li header h3 small { font-weight: 400; } .tee-times-list ul li .tee-one { width: 50%; padding: 10px 0; text-align: left; } .tee-times-list ul li .tee-ten { width: 50%; padding: 10px 0; text-align: left; } .tee-times-list ul li article { position: relative; width: 100%; display: flex; padding: 10px; } .tee-times-list ul li .tee-group { display: block; width: 100%; padding-left: 15px; text-transform: uppercase; } .tee-times-list ul li .tee-group span { position: relative; margin-left: auto; padding-left: 75px; color: #e21c38; } .tee-times-list ul li .tee-group span:before { content: ''; position: absolute; width: 10px; height: 1px; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; left: 15px; background: #e51c38; z-index: 1; } .tee-times-list ul li .tee-group span:after { content: ''; position: absolute; width: 40px; height: 1px; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; left: 15px; background: #0c286d } .tee-times-list ul li .photo-avatar { display: flex; align-items: center; width: 100%; justify-content: flex-start; } .tee-times-list ul li .photo-radius { position: relative; width: 100px; margin-right: 15px; padding: 5px; /*border-radius: 50%;*/ overflow: hidden; border: 1px solid #1966af; } .tee-times-list ul li .photo-avatar h5 { display: inline-flex; align-items: center; font-size: 18px !important; font-weight: 600; color: #0c286d; } .tee-times-list ul li .photo-avatar h5 span { margin-left: 10px; } .tee-times-list ul li .photo-radius figure { position: relative; display: block; height: 0; padding-bottom: 100%; /*border-radius: 50%;*/ overflow: hidden; } .tee-times-list ul li .photo-radius figure img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; /*border-radius: 50%; */ } /*Competition Rules*/ .competition-rules { padding: 20px 0 60px 0; } .competition-rules .warpper { display: flex; flex-wrap: wrap; } .competition-rules header { position: relative; padding-bottom: 20px; border-bottom: 1px solid #e6eaef; } .competition-rules header h2 { color: #0c286d } .competition-rules header h2:first-letter { font-weight: 600; } .competition-rules header h2 span { font-weight: 600; color: #e51c38; } .competition-rules header h2 span small { font-weight: 300; } .competition-rules header p { display: flex; align-items: center; position: absolute; right: 0; top: 0; bottom: 20px; } .competition-rules header p span { position: relative; color: #8093a5; } .competition-rules header p span:before { content: ''; position: absolute; width: 60px; height: 1px; background: #0c286d; left: -80px; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; } .competition-rules main { width: 100%; padding: 20px 0 0 0; } .competition-rules ul li,.competition-rules ol li { padding-bottom: 10px; } .group-age { position: relative; } .group-age ul { display: flex; flex-wrap: wrap; padding: 15px 0; margin: 0 -6px; } .group-age ul li { position: relative; justify-content: center; align-items: center; width: 33.3333%; flex: 0 0 33.3333%; padding: 6px; list-style: none; } .group-age ul li article { height: 100%; border: 1px solid #0c286d; } .group-age ul li .class-name { position: relative; width: 100%; padding: 15px 15px 15px 50px; font-family: 'Roboto Condensed', Kanit, Arial, Helvetica, sans-serif; color: #fff; background: #0c286d; text-transform: uppercase; } .group-age ul li .class-name span { position: absolute; display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; border-radius: 50%; background: #1da1f2; color: #fff; left: 10px; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; } .group-age ul li .class-detail { width: 100%; padding: 15px; color: #e51c38; } .group-age ul li .class-detail small { color: #555 } .competition-rules .content { padding: 30px 0; } .competition-rules .content h2 { padding-top: 0; } .point-process { position: relative; width: 100%; padding: 15px 0; } .point-process ul { display: flex; justify-content: center; flex-wrap: wrap; padding: 0; margin: 0 -6px; } .point-process ul li { flex: 0 0 33.3333%; width: 33.3333%; padding: 6px; list-style: none; } .point-process ul li article { width: 100%; height: 100%; padding: 30px; background: #fafcff; border: 2px solid #0c286d; border-radius: 6px; } .point-process ul li p { padding: 0; } .point-process ul li h1 { font-weight: 600; line-height: .5; color: #e51c38; } .point-process ul li h1 b { font-size: 18px; color: #555; } .point-process ul li b { color: #0c286d; font-size: 24px; } .competition-rules main img { width: 100%; object-fit: cover; } /*Awards*/ .awards { padding: 20px 0 60px 0; } .awards .warpper { display: flex; flex-wrap: wrap; } .awards header { position: relative; padding-bottom: 20px; border-bottom: 1px solid #e6eaef; } .awards header h2 { color: #0c286d } .awards header h2:first-letter { font-weight: 600; } .awards header h2 span { font-weight: 600; color: #e51c38; } .awards header h2 span small { font-weight: 300; } .awards header p { display: flex; align-items: center; position: absolute; right: 0; top: 0; bottom: 20px; } .awards header p span { position: relative; color: #8093a5; } .awards header p span:before { content: ''; position: absolute; width: 60px; height: 1px; background: #0c286d; left: -80px; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; } .awards h4 { color: #e51c38 } .awards main { width: 100%; } .awards-level { position: relative; padding: 0 0 60px 0; } .awards-level h3 { padding-bottom: 30px; } .awards-level h3 span { font-family: 'Roboto Condensed', Kanit, Arial, Helvetica, sans-serif; font-weight: 300; } .awards-level h4 { font-weight: 600; } .awards-level ul { display: flex; flex-wrap: wrap; justify-content: center; padding: 0; } .awards-level ul li { flex: 0 0 25%; width: 25%; padding: 0 15px; border-left: 1px dotted #c4d0dc; list-style: none; } .awards-level ul li:first-child { border-left: none; } .awards-level ul li h3 { font-weight: 600; color: #e51c38; } .awards-level ul li p { padding-top: 0; } .awards-level ul li img { max-width: 150px; } .awards-level article { background: #0c286d url(../images/bg-award-1.jpg) no-repeat !important; background-size: cover !important; } .awards-final { position: relative; padding: 60px 0 0 0; } .awards-final article { padding: 20px 60px; background: #0c286d url(../images/bg-award-2.jpg) no-repeat ; background-size: cover; color: #fff; } .awards-final article h2 { padding: 30px 0; text-align: center; border-bottom: 1px solid #0c286d; } .awards-sec { position: relative; } .awards-sec ul { display: flex; flex-wrap: wrap; padding: 0; } .awards-sec ul li { flex: 0 0 100%; width: 100%; padding: 15px 0; list-style: none; border-bottom: 1px dotted #0c286d; } .awards-sec ul li:last-child { border-bottom: none; } .awards-sec ul li h3 { padding-top: 0; color: #e51c38; } .awards-sec ul li h4 { padding: 0; color: #fff; } .awards-sec ul li h4 span { font-size: 20px; font-family: 'Roboto Condensed', Kanit, Arial, Helvetica, sans-serif; color: #1da1f2; font-weight: 300; } .awards-sec ul li dl { } .awards-sec ul li dl dt { padding: 0 0 10px 0; } .awards-sec ul li dl dt p { padding-left: 25px; } .awards-sec p { color: #94b5de; } .awards-national { position: relative; padding: 60px 0 0 0; } /* ------------------------------------------------------------------------------------------------------------ | Ranking | ------------------------------------------------------------------------------------------------------------ */ .ranking { padding: 0 0 60px 0; overflow-x: inherit; } .ranking .warpper { display: flex; flex-wrap: wrap; } .ranking main { position: relative; width: 100%; overflow: hidden; border-bottom: 3px solid #e51c38; background: #f8fafd; } .ranking aside { position: relative; width: 100%; padding-top: 10px; display: flex; flex-wrap: wrap; border-bottom: 3px solid #e51c38; } .ranking aside .intabs { width: auto; padding-right: 15px; display: flex; align-items: flex-end; } .ranking aside .intabs ul { display: flex; flex-wrap: wrap; margin: 0 -5px; } .ranking aside .intabs li { width: 150px; padding: 0 5px } .ranking aside .intabs li a { padding: 18px 20px; border-radius: 6px 6px 0 0; font-size: 18px; text-align: center; color: #0c286d; background: #e3e7ec; } .ranking aside .intabs li a:hover { color: #e51c38; } .ranking aside .intabs li a.current { background: #e51c38; color: #fff; } .ranking aside .search-filter { width: inherit; flex: 1; border-bottom: none !important; display: flex; align-items: flex-end; justify-content: flex-end; padding-bottom: 6px; } .ranking-table { width: 100%; border: none; border-collapse: separate; border-spacing: 0; font-size: 16px; } .ranking-table h5 { padding: 5px 0; font-weight: 600; } .ranking-table thead th { color: #94b5de; padding: 15px; text-align: center; font-size: 16px; text-transform: uppercase; font-weight: 600; white-space: nowrap; background-color: #0c286d; border: none; } .ranking-table thead th:first-child { border-left: none; } .ranking-table thead th:last-child { border-right: none; } .ranking-table tbody td { padding: 5px 15px; text-align: center; white-space: nowrap; border-bottom: solid 1px #e6eaef; } .ranking-table tbody td:first-child { border-left: none; } .ranking-table tbody td:last-child { border-right: none; } .ranking-table tbody tr { background: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .ranking-table tbody tr:hover { background: #f63e57 !important; color: #fff; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .ranking-table tbody tr:nth-child(odd) { background: #edf1f7; } .ranking-table tbody tr:hover .score-num { color: #fff; } .ranking-table .nat { } .ranking-table .nat img { width: 24px; margin: auto; } .ranking-table .score-num { font-weight: 600; color: #e51c38 } .ranking-scroll { min-height: 300px; } .ranking-table .ranking-sticky-pos { } .ranking-table .ranking-sticky-name { text-align: left; } .ranking .chosen-container-single .chosen-single { border: 1px solid #c4d0dc; } .ranking .chosen-container .chosen-results li { width: 100% !important; } .ranking .chosen-container .chosen-results li:first-child { padding: 5px 6px !important; } .ranking .chosen-container-single .chosen-drop { border: 1px solid #c4d0dc; border-top: none !important; } /* ------------------------------------------------------------------------------------------------------------ | Live Score | ------------------------------------------------------------------------------------------------------------ */ .livescore { padding: 0 0 60px 0; min-height: 500px; } .livescore .warpper { display: flex; flex-wrap: wrap; } .livescore main { position: relative; width: 100%; overflow: hidden; border-bottom: 3px solid #e51c38; background: #f8fafd; } .livescore aside { position: relative; width: 100%; padding-top: 10px; display: flex; flex-wrap: wrap; border-bottom: 3px solid #e51c38; } .livescore aside .intabs { width: auto; padding-right: 30px; display: flex; align-items: flex-end; } .livescore aside .intabs ul { display: flex; flex-wrap: wrap; margin: 0 -5px; } .livescore aside .intabs li { width: 150px; padding: 0 5px } .livescore aside .intabs li a { padding: 18px 20px; border-radius: 6px 6px 0 0; font-size: 18px; text-align: center; color: #0c286d; background: #e3e7ec; } .livescore aside .intabs li a:hover { color: #e51c38; } .livescore aside .intabs li a.current { background: #e51c38; color: #fff; } .livescore aside .search-filter { width: inherit; flex: 1; border-bottom: none !important; display: flex; align-items: flex-end; justify-content: flex-end; padding-bottom: 6px; } .livescore-table { width: 100%; border: none; border-collapse: separate; border-spacing: 0; font-size: 16px; } .livescore-table a { display: flex; margin: auto; align-items: center; } .livescore-table h5 { padding: 5px 0; font-weight: 600; } .livescore-table thead th { color: #94b5de; padding: 5px; text-align: center; font-size: 16px; text-transform: uppercase; font-weight: 600; white-space: nowrap; background-color: #0c286d; border-right: 1px solid #3f607f; } .livescore-table thead th:first-child { border-left: none; } .livescore-table thead th:last-child { border-right: none; } .livescore-table thead th.no-border-right { border-right: none; } .livescore-table thead tr .name { font-weight: 600; } .livescore-table tbody td { padding: 5px; text-align: center; white-space: nowrap; border-bottom: solid 1px #e6eaef; border-right: 1px solid #d8dfe8; } .livescore-table tbody td:first-child { border-left: none; } .livescore-table tbody td:last-child { border-right: none; } .livescore-table tbody tr { background: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .livescore-table tbody tr:nth-child(odd) { background: #edf1f7; } .livescore-table tbody td img { margin: 0 auto } .livescore-table .fav { width: 30px; } .livescore-table .fav a { width: 19px; } .livescore-table .pos { width: 40px; } .livescore-table .name { padding: 5px 12px; text-align: left; font-weight: 400 } .livescore-table .name .inname { line-height: 1; } .livescore-table .name .inname .teamcolor { width: 15px; margin-right: 3px; } .livescore-table .name .inname span { padding-left: 5px; } .livescore-table .name div span { padding-left: 5px; } .livescore-table .nat { width: 40px; } .livescore-table .nat img { width: 20px; } .livescore-table .totalpar { width: 60px; } .livescore-table .hole { width: 35px; line-height: 0; } .livescore-table .sum-hole { display: none; width: 40px; } .livescore-table .outhole { width: 40px; } .livescore-table .inhole { width: 40px; } .livescore-table .tothole { width: 40px; } .livescore-table .todaypar { width: 60px; } .livescore-table .hole-mobile { display: none; position: relative; margin-top: 5px; width: 100% !important; background: #fff; } .livescore-table .table-hole-9 { width: 100% !important; height: 100%; font-size: 11px; background: #fff; } .livescore-table .table-hole-9 table { width: 100%; text-align: center; font-weight: 400; } .livescore-table .table-hole-9 table tr td {padding: 4px; font-weight: normal; text-transform: uppercase; background: #fff; } .livescore-table .table-hole-9 table tr:first-child td { font-weight: bold; border-top: solid 1px #e6eaef } .livescore-table .table-hole-9 table tr td:first-child { font-weight: bold; text-transform: uppercase; } /*.livescore-table .table-hole-9 table tr:nth-child(2) td { background: #f9f9f9 }*/ .livescore-table .m-hole-in { } .livescore-table .m-hole-out { display: none; } .livescore-table .set-hole { position: relative; display: flex; flex-wrap: wrap; width: 100% !important; align-items: center; border-top: solid 1px #e6eaef; } .livescore-table .set-hole .set-one { width: 60px; height: 30px; margin-right: 1px; } .livescore-table .set-hole .set-two { width: 60px; height: 30px; } .livescore-table .set-hole .set-close { position: relative; display: flex; align-items: center; margin-left: auto; padding-right: 5px; } .livescore-table .set-hole .set-close a { position: relative; width: 19px; height: 19px; background: #999 url(../images/icon-close.png) no-repeat center; border-radius: 50%; } .livescore-table .set-hole a { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; padding: 3px 0; background: #999; color: #fff; text-align: center; } .livescore-table .set-hole a.current { color: #94b5de; background: #0c286d; } .livescore-table .set-hole a.current:before { content: ''; position: absolute; width: 9px; height: 7px; left: 0; right: 0; bottom: 0; margin-left: auto; margin-right: auto; background: url(../images/icon-arrowdown-mini.png) no-repeat center bottom; } .livescore-table .score-num { font-weight: 600; color: #e51c38 } .livescore-table .border-bottom { border-bottom: 1px solid #3f607f; } .livescore-table .border-right { border-right: 1px solid #3f607f !important; } .livescore-table .big { font-weight: 600; } .livescore-table .teamcolor { display: inline-table; vertical-align: text-bottom; } .livescore dl { display: flex; flex-wrap: wrap; } .livescore dl dd { padding-top: 2px; padding-right: 8px; font-size: 14px; font-weight: 600; } .livescore dl dd:last-child { padding-right: 0; } .livescore dl dd span { display: inline-block; margin-bottom: 2px; margin-right: 3px; border-radius: 50%; width: 14px; height: 14px; vertical-align: middle; } .livescore .search-filter li { } .livescore .search-filter li:last-child { flex: 1; justify-content: flex-end; } .livescore .chosen-container-single .chosen-single { border: 1px solid #c4d0dc; } .livescore .chosen-container .chosen-results li:first-child { padding: 5px 6px !important; } .livescore .chosen-container-single .chosen-drop { border: 1px solid #c4d0dc; border-top: none !important; } .livescore-tournament { width: 100%; padding-top: 20px; border-bottom: 1px solid #e6eaef; } .livescore-tournament h2 { color: #0c286d; } .livescore-tournament h4 { padding-top: 0 } .full-leaderboard header { display: none; } .full-leaderboard header h5 { font-weight: 600; padding-left: 10px; } .my-leaderboard header { display: none ; } .my-leaderboard header h5 { font-weight: 600; padding-left: 10px; color: #e51c38; } .my-leaderboard .livescore-table tbody tr:nth-child(odd) { background: #d1deef; } .my-leaderboard .livescore-table tbody tr:nth-child(even) { background: #e5efff } .my-leaderboard tbody tr:first-child td { border-top: solid 1px #c0cee0 !important; } .my-leaderboard tbody td { border-right: solid 1px #c0cee0 ; border-bottom: solid 1px #c0cee0 ; } .action-board header { display: block; } .action-board .livescore-table tbody tr:first-child td { border-top: solid 1px #e6eaef ; } /*Par Table*/ .par-section { width: 100%; } .par-table { width: 100%; border: none; border-collapse: separate; border-spacing: 0; font-size: 16px; } .par-table a { margin: auto; } .par-table h5 { padding: 5px 0; font-weight: 600; } .par-table thead th { color: #94b5de; padding: 5px; text-align: center; font-size: 16px; text-transform: uppercase; font-weight: 600; white-space: nowrap; background-color: #0c286d; border-right: 1px solid #3f607f; } .par-table thead th:first-child { border-left: none; } .par-table thead th:last-child { border-right: none; } .par-table thead th.no-border-right { border-right: none; } .par-table tbody td { padding: 5px; text-align: center; white-space: nowrap; border-bottom: solid 1px #e6eaef; border-right: 1px solid #d8dfe8; } .par-table tbody td:first-child { border-left: none; } .par-table tbody td:last-child { border-right: none; } .par-table tbody tr { background: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } /*.par-table tbody tr:nth-child(odd) { background: #edf1f7; }*/ .par-table tbody td img { margin: 0 auto } .par-table .fav { width: 30px; } .par-table .fav a { width: 19px; } .par-table .pos { width: 40px; } .par-table .nameClass { width: 80px; padding: 5px 12px; text-align: center; font-weight: 600 } .par-table .nameClass .innameClass { display: inline-block; align-items: center; } .par-table .nameClass .innameClass .teamcolor { width: 15px; margin-right: 3px; } .par-table .nameClass .innameClass span { padding-left: 5px; } .par-table .nat { width: 40px; } .par-table .nat img { width: 20px; } .par-table .totalpar { width: 60px; } .par-table .hole { width: 35px; } .par-table .holdColor { text-align: left; } .par-table .sum-hole { display: none; width: 40px; } .par-table .outhole { width: 40px; } .par-table .inhole { width: 40px; } .par-table .tothole { width: 40px; } .par-table .todaypar { width: auto; } .par-table .hole-mobile { display: none; position: relative; margin-top: 5px; width: 100% !important; background: #fff; } .par-table .table-hole-9 { width: 100% !important; height: 100%; font-size: 11px; background: #fff; } .par-table .table-hole-9 table { width: 100%; text-align: center; font-weight: 400; } .par-table .table-hole-9 table tr td {padding: 4px; font-weight: normal; text-transform: uppercase; background: #fff; } .par-table .table-hole-9 table tr:first-child td { font-weight: bold; border-top: solid 1px #e6eaef } .par-table .table-hole-9 table tr td:first-child { font-weight: bold; text-transform: uppercase; } /*.par-table .table-hole-9 table tr:nth-child(2) td { background: #f9f9f9 }*/ .par-table .m-hole-in { } .par-table .m-hole-out { display: none; } .par-table .set-hole { position: relative; display: flex; flex-wrap: wrap; width: 100% !important; align-items: center; border-top: solid 1px #e6eaef; } .par-table .set-hole .set-one { width: 60px; height: 30px; margin-right: 1px; } .par-table .set-hole .set-two { width: 60px; height: 30px; } .par-table .set-hole .set-close { position: relative; display: flex; align-items: center; margin-left: auto; padding-right: 5px; width: 24px; } .par-table .set-hole .set-close a { position: relative; width: 19px; height: 19px; background: #999 url(../images/icon-close.png) no-repeat center; border-radius: 50%; } .par-table .set-hole a { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; padding: 3px 0; background: #999; color: #fff; text-align: center; } .par-table .set-hole a.current { color: #94b5de; background: #0c286d; } .par-table .set-hole a.current:before { content: ''; position: absolute; width: 9px; height: 7px; left: 0; right: 0; bottom: 0; margin-left: auto; margin-right: auto; background: url(../images/icon-arrowdown-mini.png) no-repeat center bottom; } .par-table .score-num { font-weight: 600; color: #e51c38 } .par-table .border-bottom { border-bottom: 1px solid #3f607f; } .par-table .border-right { border-right: 1px solid #3f607f !important; } .par-table .big { font-weight: 600; } .par-table .teamcolor { display: inline-table; } .par-table .colorcircle { position: relative; padding-left: 20px; text-align: left; } .par-table .colorcircle:before { content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%; left: 0; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; border: 1px solid rgba(0,0,0,0) } .par-table .Black:before { background: #000 } .par-table .White:before { background: #fff; border: 1px solid #d8dfe8; } .par-table .Blue:before { background: #0b74cf } .par-table .Red:before { background: #fa0000 } .par-table .Yellow:before { background: #fdbc00 } .par-table .Green:before { background: #63a910 } .par-table .Purple:before { background: #8a09b4 } .par-table .Gold:before { background: #fdbc00 } /*End*/ .mini-class { min-width: 150px !important; } .clock { color: #1da1f2; padding-left: 10px; } .adds-leaderboard { margin: auto; position: relative; display: flex; justify-content: center; align-items: center; width: 19px; height: 19px; border: 2px solid #94b5de; border-radius: 50%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease } .adds-leaderboard:before { content: ""; position: absolute; width: 9px; height: 1px; background: #94b5de; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .adds-leaderboard:after { content: ""; position: absolute; width: 1px; height: 9px; background: #94b5de; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .add-leaderboard { margin: auto; position: relative; display: flex; justify-content: center; align-items: center; width: 19px; height: 19px; border: 1px solid #0c286d; border-radius: 50%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease } .add-leaderboard:hover { border: 1px solid #e51c38; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease } .add-leaderboard:before { content: ""; position: absolute; width: 9px; height: 1px; background: #555; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .add-leaderboard:after { content: ""; position: absolute; width: 1px; height: 9px; background: #555; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .del-leaderboard { margin: auto; position: relative; display: flex; justify-content: center; align-items: center; width: 19px; height: 19px; background: #999; border-radius: 50%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease } .del-leaderboard:hover { background: #777; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease } .del-leaderboard:before { content: ""; position: absolute; width: 9px; height: 1px; background: #fff; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .Eagles { margin: auto; display: flex; justify-content: center; align-items: center; border-radius: 50%; width: 24px; height: 24px; background: #f5b300; color: #fff; } .Birdies { margin: auto; display: flex; justify-content: center; align-items: center; border-radius: 50%; width: 24px; height: 24px; background: #e00000; color: #fff; } .Bogeys { margin: auto; display: flex; justify-content: center; align-items: center; border-radius: 50%; width: 24px; height: 24px; background: #158cd4; color: #fff; } .DBBogey { margin: auto; display: flex; justify-content: center; align-items: center; border-radius: 50%; width: 24px; height: 24px; background: #1ca976; color: #fff; } .eagles { background: #f5b300 !important; color: #fff; } .birdies { background: #e00000 !important; color: #fff; } .bogeys { background: #158cd4 !important; color: #fff; } .dbbogey { background: #1ca976 !important; color: #fff; } /* ------------------------------------------------------------------------------------------------------------ | About Us | ------------------------------------------------------------------------------------------------------------ */ .aboutus { padding: 20px 0 60px 0; } .aboutus .warpper { display: flex; flex-wrap: wrap; } .aboutus header { position: relative; padding-bottom: 20px; border-bottom: 1px solid #e6eaef; } .aboutus header h2 { color: #0c286d } .aboutus header h2:first-letter { font-weight: 600; } .aboutus header h2 span { font-weight: 600; color: #e51c38; } .aboutus header h2 span small { font-weight: 300; } .aboutus header p { display: flex; align-items: center; position: absolute; right: 0; top: 0; bottom: 20px; } .aboutus header p span { position: relative; color: #8093a5; } .aboutus header p span:before { content: ''; position: absolute; width: 60px; height: 1px; background: #0c286d; left: -80px; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; } .aboutus main { width: 100%; padding: 20px 0 0 0; } .aboutus ul li,.aboutus ol li { padding-bottom: 10px; } /* ------------------------------------------------------------------------------------------------------------ | Contact Us | ------------------------------------------------------------------------------------------------------------ */ .contactus { padding: 20px 0 60px 0; } .contactus .warpper { display: flex; flex-wrap: wrap; } .contactus header { position: relative; padding-bottom: 20px; border-bottom: 1px solid #e6eaef; } .contactus header h2 { color: #0c286d } .contactus header h2:first-letter { font-weight: 600; } .contactus header h2 span { font-weight: 600; color: #e51c38; } .contactus header h2 span small { font-weight: 300; } .contactus header p { display: flex; align-items: center; position: absolute; right: 0; top: 0; bottom: 20px; } .contactus header p span { position: relative; color: #8093a5; } .contactus header p span:before { content: ''; position: absolute; width: 60px; height: 1px; background: #0c286d; left: -80px; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; } .contactus main { width: 100%; padding: 20px 0 0 0; } /* ------------------------------------------------------------------------------------------------------------ | Register | ------------------------------------------------------------------------------------------------------------ */ .register { padding: 40px 0 60px 0; } .register .warpper { display: flex; flex-wrap: wrap; } .register header { position: relative; padding-bottom: 20px; } .register header h2 { color: #0c286d } .register header h2:first-letter { font-weight: 600; } .register header h2 span { font-weight: 600; color: #e51c38; } .register header h2 span small { font-weight: 300; } .register header p { display: flex; align-items: center; position: absolute; right: 0; top: 0; bottom: 20px; } .register header p span { position: relative; color: #8093a5; } .register header p span:before { content: ''; position: absolute; width: 60px; height: 1px; background: #0c286d; left: -80px; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; } .register main { width: 100%; } .register-zone { position: relative; display: flex; flex-wrap: wrap; width: 100%; padding: 0; border-top: 1px solid #e6eaef; } .register-zone aside { position: relative; display: flex; flex-wrap: wrap; width: 100%; align-items: center; background: #0c286d; color: #fff; } .register-zone .pic-left { flex: 0 0 55%; width: 55%; height: 100%; background: #fff; } .register-zone .text { flex: 0 0 45%; width: 45%; padding: 40px; } .register-zone .text h4 { padding-bottom: 10px; } .register-zone .text h5 { color: #1da1f2; } .register-zone article { margin: 0 auto; flex: 0 0 60%; width: 60%; padding: 30px 0 60px 0; } .register-zone article h2 { padding: 30px 0; text-align: center; font-weight: 300; border-bottom: 1px solid #0c286d; } .register-zone article h4 { font-weight: 300; color: #e51c38; } .register-zone article h5 { padding-top: 30px; padding-bottom: 5px; color: #e51c38; } .register-zone ul { display: flex; flex-wrap: wrap; margin: 0 -15px; padding: 0; } .register-zone ul li { flex: 0 0 50%; width: 50%; padding: 5px 15px; list-style: none; } .register-zone ul li.full { flex: 0 0 100%; width: 100%; } .register-zone dl { display: flex; flex-wrap: wrap; margin: 0 -15px; padding: 0; } .register-zone dl dt { flex: 0 0 50%; width: 50%; padding: 5px 15px; list-style: none; } .register-zone dl dt.full { flex: 0 0 100%; width: 100%; } .register-zone ul li .box-img { width: 100%; margin-top: 10px; } .register-zone ul li .box-img img { width: 100%; border-radius: 10px; } .register-zone .select-birth { display: flex; flex-wrap: wrap; margin: 0 -2px; } .register-zone .select-birth > div { padding: 0 2px; } .register-zone .dd { width: 25%; } .register-zone .mm { width: 45%; } .register-zone .yy { width: 30%; } .register-zone .pt-20 { padding-top: 20px; } .register-zone select,.register-zone input { font-family: 'Roboto Condensed', Kanit, Arial, Helvetica, sans-serif; } .register-zone select option { font-family: Arial, Helvetica, sans-serif; font-size: 14px; padding: 5px; } .register-zone input[type="text"] { border-radius: 3px; } .register-zone table { width: 100%; font-size: 14px; border: 1px solid #e5e5ee } .register-zone table thead tr { background: #f3f5f7; } .register-zone table thead tr th { padding: 10px 5px; text-align: center; border-right: 1px solid #e5e5ee; border-bottom: 1px solid #e5e5ee } .register-zone table thead tr th:first-child { width: 60px; } .register-zone table tbody tr { border-bottom: 1px solid #e5e5ee } .register-zone table tbody tr td { padding: 10px 5px; text-align: center; border-right: 1px solid #e5e5ee; } .register-zone table tbody tr td:first-child { background: #f3f5f7; } .register-zone .show-infill { padding: 10px 15px; border-radius: 6px; background: #e6eaef; } .register-zone .showidmember { font-weight: 600; } /*Regulations & Benefits*/ .regulations-benefits { padding: 20px 0 60px 0; } .regulations-benefits .warpper { display: flex; flex-wrap: wrap; } .regulations-benefits header { position: relative; padding-bottom: 20px; border-bottom: 1px solid #e6eaef; } .regulations-benefits header h2 { color: #0c286d } .regulations-benefits header h2:first-letter { font-weight: 600; } .regulations-benefits header h2 span { font-weight: 600; color: #e51c38; } .regulations-benefits header h2 span small { font-weight: 300; } .regulations-benefits header p { display: flex; align-items: center; position: absolute; right: 0; top: 0; bottom: 20px; } .regulations-benefits header p span { position: relative; color: #8093a5; } .regulations-benefits header p span:before { content: ''; position: absolute; width: 60px; height: 1px; background: #0c286d; left: -80px; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; } .regulations-benefits main { width: 100%; padding: 20px 0 0 0; } .regulations-benefits ul li,.regulations-benefits ol li { padding-bottom: 10px; } /* ------------------------------------------------------------------------------------------------------------ | Sponser Lists | ------------------------------------------------------------------------------------------------------------ */ .sponsor-lists { padding: 30px 0; background: #e3e7ec; overflow: hidden; } .sponsor-lists h4 { color: #0c286d; } .sponsor-lists h4:first-letter { font-weight: 600; color: #f63e57; } .sponsor-lists main { position: relative; width: 100%; padding: 20px 0 } .sponsor-lists main ul { display: flex; flex-wrap: wrap; justify-content: center; margin: -10px; } .sponsor-lists main ul li { width: 15%; padding: 10px; } .sponsor-lists main ul li img { width: 100%; } .sponsor-lists aside { position: relative; width: 100%; padding: 0 0 20px 0 } /* ------------------------------------------------------------------------------------------------------------ | Social | ------------------------------------------------------------------------------------------------------------ */ .social-follow { padding: 50px 0 ; color: #fff; text-align: center; background: #0c286d; } .social-follow p { text-transform: uppercase; font-weight: 300; } .social-follow p span { font-weight: 600; color: #f63e57 } .social-follow ul { display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 15px; } .social-follow ul li { width: 40px; height: 40px; margin: 0 6px; } .social-follow ul li a { display: block; width: 100%; height: 100%; text-indent: -9999px; border-radius: 50%; overflow: hidden; } .social-follow ul li a.fb { background-color: #38569d; background-image: url(../images/icon-facebook.svg); background-repeat: no-repeat; background-position: center; background-size: 60%; } .social-follow ul li a:hover.fb { background-color: #204294; } .social-follow ul li a.tw { background-color: #1da1f2; background-image: url(../images/icon-twitter.svg); background-repeat: no-repeat; background-position: center; background-size: 60%; } .social-follow ul li a:hover.tw { background-color: #0992e6 } .social-follow ul li a.ig { background-color: #ed2e7a; background-image: url(../images/icon-instagram.svg); background-repeat: no-repeat; background-position: center; background-size: 60%; } .social-follow ul li a:hover.ig { background-color: #d73575 } .social-follow ul li a.yt { background-color: #ff0018; background-image: url(../images/icon-youtube.svg); background-repeat: no-repeat; background-position: center; background-size: 65%; } .social-follow ul li a:hover.yt { background-color: #d90014 } .social-follow ul li a.line { background-color: #1ab91f ; background-image: url(../images/icon-line.svg); background-repeat: no-repeat; background-position: center; background-size: 65%; } .social-follow ul li a:hover.line { background-color: #06a90b } .followus { padding: 10px 0; color: #fff; text-align: center; background: #0c286d; } .followus p { font-weight: 400; color: #94b5de; font-size: 14px; } .followus dl { display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 15px; } .followus dl dd { width: 36px; height: 36px; margin: 0 3px; } .followus dl dd a { display: block; width: 100%; height: 100%; text-indent: -9999px; border-radius: 50%; overflow: hidden; } .followus dl dd a.fb { background-color: #38569d; background-image: url(../images/icon-facebook.svg); background-repeat: no-repeat; background-position: center; background-size: 60%; } .followus dl dd a:hover.fb { background-color: #204294; } .followus dl dd a.tw { background-color: #1da1f2; background-image: url(../images/icon-twitter.svg); background-repeat: no-repeat; background-position: center; background-size: 60%; } .followus dl dd a:hover.tw { background-color: #0992e6 } .followus dl dd a.ig { background-color: #ed2e7a; background-image: url(../images/icon-instagram.svg); background-repeat: no-repeat; background-position: center; background-size: 60%; } .followus dl dd a:hover.ig { background-color: #d73575 } .followus dl dd a.yt { background-color: #ff0018; background-image: url(../images/icon-youtube.svg); background-repeat: no-repeat; background-position: center; background-size: 65%; } .followus dl dd a:hover.yt { background-color: #d90014 } .followus dl dd a.line { background-color: #1ab91f ; background-image: url(../images/icon-line.svg); background-repeat: no-repeat; background-position: center; background-size: 66%; } .followus dl dd a:hover.line { background-color: #06a90b } .share-social { position: relative; display: flex; flex-wrap: wrap; padding: 15px 0; margin: 0 ; border-bottom: 1px solid #e6eaef; font-size: 16px; } .share-social .share-facebook { position: relative; width: 105px; height: 40px; padding: 0 3px; text-align: center; vertical-align: middle; } .share-social .share-facebook a { display: block; height: 100%; padding: 5px 16px 5px 12px; color: #fff; background: #3a559f; border-radius: 3px; } .share-social .share-facebook a:hover { background: #204099; } .share-social .share-facebook a path { fill: #fff; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .share-social .share-facebook a:hover path { fill: #f9f9f9; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .share-social .share-facebook svg { display: inline-block; width: 18px; height: 30px; vertical-align: middle; } .share-social .share-facebook span { display: inline-block; padding: 0 0 0 3px; vertical-align: middle; } .share-social .share-facebook sup { position: absolute; background: #ff0000; z-index: 1; } .share-social .share-twitter { position: relative; width: 105px; height: 40px; padding: 0 3px; text-align: center; vertical-align: middle; } .share-social .share-twitter a { display: block; height: 100%; padding: 5px 16px 5px 12px; color: #fff; background: #03a9f4; border-radius: 3px; } .share-social .share-twitter a:hover { background: #0e9bcc; } .share-social .share-twitter a path { fill: #fff; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .share-social .share-twitter a:hover path { fill: #f9f9f9; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .share-social .share-twitter svg { display: inline-block; width: 18px; height: 30px; vertical-align: middle; } .share-social .share-twitter span { display: inline-block; padding: 0 0 0 3px; vertical-align: middle; } .share-social .share-line { position: relative; width: 105px; height: 40px; padding: 0 3px; text-align: center; vertical-align: middle; } .share-social .share-line a { display: block; height: 100%; padding: 5px 16px 5px 12px; color: #fff; background: #00b900; border-radius: 3px; } .share-social .share-line a:hover { background: #089e08; } .share-social .share-line a path { fill: #fff; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .share-social .share-line a:hover path { fill: #f9f9f9; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .share-social .share-line svg { display: inline-block; width: 18px; height: 30px; vertical-align: middle; } .share-social .share-line span { display: inline-block; padding: 0 0 0 3px; vertical-align: middle; } /* ------------------------------------------------------------------------------------------------------------ | Contact Us | ------------------------------------------------------------------------------------------------------------ */ .contact-us { display:block; float:left; position:relative; width:100%; margin-top: 143px; } .contact-us header { position: relative; text-align: center; } .contact-us header h1 { color: #fff; } .contact-us main { position: relative; margin: 0 auto; width: 100%; max-width: 800px; padding: 30px 50px; color: #fff; background: #0071bc; } .contact-us .address { position: relative; width: 100%; padding: 60px 0; background-position: center; background-size: auto 100%; background-repeat: no-repeat; overflow: hidden; } .contact-us .address:before { content: ''; position: absolute; width: 50%; background: url(../uploads/picture/cover-contact.jpg) no-repeat center right; background-size: cover; left: 0; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; } .contact-us .address:after { content: ''; position: absolute; width: 50%; background: #0071bc; right: 0; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; } .contact-us .address article { float: right; position: relative; width: 50%; padding: 15px 0 30px 100px; color: #fff; z-index: 1 } .contact-us .address article h1 { color: #fff; } .contact-us .address article h3 { padding-bottom: 0 } .contact-us .contact-form { position: relative; width: 100%; max-width: 720px; margin: 0 auto; padding: 60px 0 80px 0; text-align: center; } .contact-us .contact-form header h3 { text-transform: uppercase; } .contact-us .contact-form ol { position: relative; margin: 0 auto; width: 100%; min-width: inherit; display: -webkit-flex; display: flex; flex-wrap:wrap; align-content: flex-start; } .contact-us .contact-form ol li { flex: 0 0 100%; width: 100%; position: relative; padding: 10px 0; text-align: left; } .contact-us .contact-form input[type="text"], .contact-us .contact-form input[type="email"], .contact-us .contact-form textarea, .contact-us .contact-form select { display: block; width: 100%; padding-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 5px; border: 1px solid #fff; border-left: none; border-right: none; border-bottom: 1px solid #ddd; } .contact-us .contact-form label { text-transform: uppercase; cursor: default; } .contact-us .contact-form button { overflow:hidden; -webkit-appearance: none; display:block; position:relative; margin:0 auto; font-family:'sukhumvitbold', Arial, Helvetica, sans-serif; max-width: 280px; min-width: 280px; padding: 20px 0; font-size: 19px; text-transform: uppercase; line-height: 1; text-align: center; color: #fff; border-radius: 3px; background: #0071bc; cursor: pointer; webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .contact-us .contact-form button:hover, .contact-us .contact-form button:active { background: #005288; } .google-map { position: relative; width:100%; height:100%; background:none; z-index:2; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .google-map iframe { position:absolute; top:0; left:0; right:0; } /* ------------------------------------------------------------------------------------------------------------ | Footer | ------------------------------------------------------------------------------------------------------------ */ footer { float:left; position: relative; width:100%; padding: 30px 0 50px 0; text-align: center; color: #fff; background:#06162f; } footer ul { display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 15px; padding: 40px 0; border-bottom: 1px solid #35455f; } footer ul li { padding: 0 15px; } footer ul li a { font-size: 16px; color: #fff; text-transform: uppercase; } footer ul li a:hover,footer ul li a.current { color: #e51c38; } footer p { font-size: 14px; color: #879cb3; } footer p span { margin-left: 10px; padding-left: 10px; border-left: 1px solid #35455f } footer p.designed { color: #314254; } footer p.designed a { display: inline-flex; color: #314254; } /* ------------------------------------------------------------------------------------------------------------ | Other Class | ------------------------------------------------------------------------------------------------------------ */ .search-filter { position: relative; width: 100%; padding: 10px 20px; border-bottom: 3px solid #f63e57; } .search-filter ul { display: flex; flex-wrap: wrap; margin: 0 -20px; } .search-filter ul li { position: relative; display: flex; align-items: center; padding: 5px 20px; text-transform: uppercase; } .search-filter ul li:first-child { padding-left: 0; } .search-filter ul li:last-child { padding-right: 0; } .search-filter ul li h5 { line-height: 1; padding: 0; } .search-filter .select-now { position: relative; padding-left: 10px; flex: 1; color: #e51d38; } .search-filter .select-now input[type="button"], .search-filter .select-now input[type="submit"] { position: absolute; right: 5px; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; width: 24px; height: 24px; min-width: 24px; max-width: 24px; background: url(../images/icon-search.svg) no-repeat center; background-size: 80%; } .search-filter .select-now input[type="text"] { width: 100%; border-radius: 3px; font-size: 16px; } .search-filter select { min-width: 200px; text-transform: uppercase; font-size: 16px; } .search-filter select option { font-family: Arial, Helvetica, sans-serif; font-size: 14px; padding: 5px; } .fillter-course { position:relative; width:100%; height: 40px; padding: 6px 30px 6px 10px; margin-left: 10px; text-transform: none; border-radius: 3px; border: 1px solid #c4d0dc; } .click-fillter-course:before { content: ''; position: absolute; width: 100%; height: 1px; bottom: 0; left: 0; background: #fff; z-index: 2; } .fillter-course .box span { position:relative; display:block; padding: 1px 0 0 0; cursor:pointer; color: #555; -webkit-transition: all 0s ease; -moz-transition: all 0s ease; -o-transition: all 0.s ease; transition: all 0.s ease; } .fillter-course .box span:hover:before { content:''; position:absolute; width:100%; height:1px; background:#fff; bottom:-1px; left:0; z-index:2; -webkit-transition: all 0s ease; -moz-transition: all 0s ease; -o-transition: all 0s ease; transition: all 0s ease;} .fillter-course .box span:hover { color:#0c286d; -webkit-transition: all 0s ease; -moz-transition: all 0s ease; -o-transition: all 0s ease; transition: all 0s ease; } .fillter-course .icon-arrow-down { position: absolute; width: 18px; height:18px; right: -28px; top: 0; margin-top: auto; margin-bottom: auto; background: url(../images/icon-select.svg) no-repeat 0px 4px; } /*.fillter-course:hover > .subfillter { visibility: visible; opacity: 1; }*/ .subfillter { display: none; position:absolute; max-width: auto; width: 100%; min-width: max-content; padding:15px; margin-top: -1px; top: 100%; left: -1px; z-index:1; background:#fff; border:1px solid #c4d0dc; border-radius: 0 4px 4px 4px; box-shadow: 0 2px 3px rgb(0 0 0 / 15%) } .subfillter .multi { display:block; padding:4px 0; } .subfillter .multi span { position: relative; display: block; min-width: 290px; width: auto; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height:16px; padding:0 0 0 22px; font-size: 14px; border:none !important; cursor: pointer; } .subfillter .multi span:before { content: ''; position: absolute; width: 15px; height: 15px; background: url(../images/icon-select-fillter.png) no-repeat left 0px !important; left: 0; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; } .subfillter .multi span:hover:before { background: url(../images/icon-select-fillter.png) no-repeat left -16px !important } .subfillter .multi span:hover { color: #e51c38; } .subfillter .multi span.current:before { background: url(../images/icon-select-fillter.png) no-repeat left -32px !important; } .subfillter .selected span,.subfillter .selected span:hover { background: url(../images/icon-select-fillter.png) no-repeat left -30px !important; } .subfillter .clear-multi { padding-bottom:0; } .subfillter .clear-multi span { display: block; width: 100%; padding:5px; font-size: 14px; text-align:center; border:none !important; background:#edf1f7; border-radius: 3px; cursor: pointer; } .subfillter .clear-multi span:hover { color: #fff; background: #e51c38 } .content { display: flex; flex-wrap: wrap; margin: 0 -30px; } .content-box-50 { flex: 0 0 50%; width: 50%; padding: 0 30px; } .align-items-center { align-items: center; } .distance { padding: 25px 0 15px 0; } .owl-nav { position: absolute; width: 100%; top: 0; bottom: 0; margin-top: auto !important; margin-bottom: auto; z-index: -1; } .owl-nav .owl-prev { position: absolute; left: -40px; top: 0; bottom: 0; margin-top: auto !important; margin-bottom: auto !important; } .icon-Previous { display: block; width: 100%; height: 100%; background: url(../images/icon-arrow-back-white.svg) no-repeat center; background-size: 90%; } .owl-nav .owl-next { position: absolute; right: -40px; top: 0; bottom: 0; margin-top: auto !important; margin-bottom: auto !important; } .icon-Next { display: block; width: 100%; height: 100%; background: url(../images/icon-arrow-next-white.svg) no-repeat center; background-size: 90%; } .title { position: relative; font-weight: 300; text-transform: uppercase; } .title:first-letter { font-weight: 600; color: #e51c38; } .title span { position: relative; font-weight: 500; color: #e51c38; } .viewall { position: absolute; right: 0; top: 0; margin-top: auto; bottom: 0;margin-bottom: auto; display: flex; align-items: center; } .viewall span { position: relative; } .viewall span a { text-transform: uppercase; font-size: 14px; font-weight: 400; line-height: 0; } .viewall span a:hover { color: #0c286d } .viewall span:hover:before { width: 40px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .viewall span:before { content: ''; position: absolute; width: 10px; height: 1px; top: 0; bottom: 0; margin-top: auto; margin-bottom: 1px; left: -60px; background: #e51c38; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; z-index: 1; } .viewall span:after { content: ''; position: absolute; width: 40px; height: 1px; top: 0; bottom: 0; margin-top: auto; margin-bottom: 1px; left: -60px; background: #0c286d } .num-photo { position: absolute; display: flex; justify-content: center; align-items: center; padding: 0; width: 26px; height: 26px; top: 10px; right: 10px; font-weight: 300; color: #fff; font-size: 12px; background: rgb(0,0,0,0.5); z-index: 9; border-radius: 50% } .play-vdo { position: absolute; display: flex; justify-content: center; align-items: center; padding: 0; width: 50px; height: 50px; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: rgb(0,0,0,0.4) url(../images/icon-play.svg) no-repeat center; background-size: 80%; z-index: 9; border-radius: 50% } .photo { position: relative; flex: 0 0 100%; width: 100%; overflow: hidden; } .photo img { width: 100%; object-fit: cover; -webkit-transition: all 5s ease; -moz-transition: all 5s ease; -o-transition: all 5s ease; transition: all 5s ease; } .photo a { display: block !important; } /*.photo a:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); } */ .no-data { position: relative; } .no-data:before { content: ''; position: absolute; width: 100%; height: 100%; background: rgba(255,255,255,.8); left: 0; top: 0; z-index: 1; } .fix-gototop { position:fixed; width:30px; height:30px; bottom:0; right:5px; z-index:9; } .fix-gototop a { display:inline-table; width:100%; height:100%; font-size: 20px; color:#fff !important; text-align:center; text-transform:uppercase; background:#333 url(../images/icon-top.png) no-repeat center center; border-radius: 50%; } .fix-gototop a:hover { color:#fff; background:#383b3d url(../images/icon-top.png) no-repeat center center; } .fix-gototop i { display:table-cell; vertical-align:middle; } .top-hide { bottom:-40px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .top-show { bottom:10px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .youtube-embed { position: relative; display: block; height: 0; padding: 0 0 56.25%; margin: 0 auto; overflow: hidden; /*border-radius: 10px; */border: 10px solid #fff; -webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.4); -moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.4); box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.4); } .youtube-embed iframe { position: absolute; display: block; max-width: 100%; width: 100%; height: 100%; margin: 0; top: 0; left: 0; } .map-window { text-align: left; } .map-window p { position: relative; padding: 5px 0; } .map-window p img { width: 80px; } .map-window i { position: absolute; left: 0; top: 8px; } .map-window span { display: block; padding-left: 20px; } .fancybox-enabled #header-fixed { padding-right:17px; } .fancybox-button--thumbs { display: none !important; } .google-captcha { padding: 20px 0 0 0 !important; text-align: center !important; } .google-captcha .g-recaptcha { margin: 0 auto; display: inline-block; } .error { color: #ff0000; font-size: 14px; } .text-center { text-align: center; } .loadmore { display: flex; justify-content: center; } .lazy-loaded { transition: all 0.3s ease; opacity: 1; } /* Image with 'data' attribute is hidden */ img[data-src] { /* we set the opacity to 0 */ opacity: 0; } /* Image without 'data' attribute is (or becomes) visible */ img.loaded { /* prepare the future animation */ -webkit-transition: opacity .5s linear 0.2s; -moz-transition: opacity .5s linear 0.2s; transition: opacity .5s linear 0.2s; /* we set the opacity to 1 to do the magic */ opacity: 1; } /*Tags */ .tags-show { position: relative; width: 100%; padding: 20px 0 0 0; } .tags-show p { color: #0c286d; padding-bottom: 5px; } .tags-show a { display: inline-block; margin: 2px 0px 2px 0; padding: 6px 10px 4px 10px; font-size: 16px; color: #666; background: #fff; border: 1px solid #e6eaef; border-radius: 3px; } .tags-show a:hover { color: #e51c38 ; background: #f3f4f7; } /* ------------------------------------------------------------------------------------------------------------ | Button Style | ------------------------------------------------------------------------------------------------------------ */ a.btn-s1 { display: inline-block; min-width: 200px; padding: 10px 10px 14px 10px; text-shadow: none; text-transform: uppercase; text-align: center; color: #fff; background: #e51c38; border-radius: 3px; } a.btn-s1:hover { background: #f63e57; } a.btn-s1 span { position: relative; } a.btn-s2 { position: relative; display: inline-block; padding-right: 20px; text-transform: uppercase; line-height:1; text-align: center; background: none; } a.btn-s2:before { content: ''; position: absolute; width: 20px; height: 1px; background: #fff; right: -10px; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; } a.btn-s2:after { content: ''; position: absolute; width: 0; height: 1px; background: #1cc7ec; right: -10px; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } a.btn-s2:hover:after { width: 20px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } a.btn-s2 span { position: relative; } a.btn-link { color: #0071bc; } a.btn-loadmore { display: inline-block; min-width: 160px; padding: 10px; text-shadow: none; font-size: 16px; text-transform: uppercase; text-align: center; color: #e51c38; border: 1px solid #e51c38; background: #fff; border-radius: 3px; } a.btn-loadmore:hover { color: #fff; background: #e51c38; } a.btn-loadmore span { position: relative; } .btn-livescore { position: absolute; width: 200px; top: 15px; right: 0; padding: 0; display: flex; justify-content: center; } .btn-livescore a { width: 100%; padding: 9px 5px 10px 5px; text-align: center; border-radius: 3px; color: #fff; font-size: 20px; text-transform: uppercase; background: #e51c38 } .btn-livescore a:hover { color: #fff; background: #f63e57 } .btn-livescore-special { position: absolute; right: 0; width: 350px; padding: 0 0 0 15px; display: flex; justify-content: flex-end; margin-left: auto; } .btn-livescore-special a { display: inline-flex; align-items: center; width: auto; height: 46px; padding: 10px 20px 7px 20px; justify-content: center; margin-left: 10px; text-align: center; border-radius: 3px; color: #fff; font-size: 16px; text-transform: uppercase; background: #e51c38 } .btn-livescore-special a:hover { color: #fff; background: #f63e57 } .btn-livescore-mini { position: absolute; width: 130px; padding: 0; top: -5px; right: 0; display: flex; justify-content: center; } .btn-livescore-mini a { display: block; width: 100%; padding: 6px 4px 4px 4px; text-align: center; justify-content: center; border-radius: 3px; color: #fff; font-size: 18px; font-weight: 500; text-transform: uppercase; background: #e51c38 } .btn-livescore-mini a:hover { color: #fff !important; background: #f63e57 } .fix-live { left: 266px; } .btn-tablescore { margin: 0 auto; padding: 0 0 15px 0; display: flex; justify-content: center; } .btn-tablescore a { width: 100%; padding: 10px 10px 14px 10px; text-align: center; border-radius: 3px; color: #fff; font-size: 24px; background: #428fe4 } .btn-tablescore a:hover { background: #1da1f2 } .btn-s1 a { display: inline-block; min-width: 200px; padding: 15px 0; text-transform: uppercase; font-weight: 500; line-height:1; text-align: center; color: #555; background: #fff; border: 1px solid #0071bc; } .btn-s1 a:hover { color: #fff; background: #0071bc } .btn-s1 a span { position: relative; } .btn-s11 a { display: table; width: 100%; height: 100%; padding: 15px; text-transform: uppercase; font-weight: 500; line-height:1; text-align: center; color: #555; background: #fff; border: 1px solid #555; } .btn-s11 a:hover { color: #fff; } .btn-s11 a:before { content: ''; position: absolute; width: 0; height: 100%; background: #555; left: 0; top: 0; z-index: 0; -webkit-transition: all .7s cubic-bezier(0.19, 1, 0.22, 1) ; -moz-transition: all .7s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: all .7s cubic-bezier(0.19, 1, 0.22, 1); transition: all .7s cubic-bezier(0.19, 1, 0.22, 1); } .btn-s11 a:hover:before { width: 100%; -webkit-transition: all .7s cubic-bezier(0.19, 1, 0.22, 1) ; -moz-transition: all .7s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: all .7s cubic-bezier(0.19, 1, 0.22, 1); transition: all .7s cubic-bezier(0.19, 1, 0.22, 1); } .btn-s11 a span { position: relative; display: table-cell; vertical-align: middle; } .btn-s2 a { display: inline-block; width: 100%; max-width: 280px; min-width: inherit; padding: 20px 0; font-size: 16px; text-transform: uppercase; font-weight: 500; line-height: 1; text-align: center; color: #fff; background: #0089eb; } .btn-s2 a:hover { color: #fff; background: #1946ba; } .btn-s3 a { display: block; width: 100%; padding: 5px 10px; color: #3a3d45 ; font-size: 16px; text-align: center; background: none; border: 1px solid #919399; border-radius: 3px; } .btn-s3 a:hover { color:#fff; background: #3a3d45; border: 1px solid #3a3d45; } .btn-s4 { padding-bottom: 60px; } .btn-s4 a { display:inline-block; position: relative; width: auto; height: 40px; padding:7px 20px; color: #fff !important; text-align: center; background: #ceb071; border-radius: 3px; } .btn-s4 a:hover { color: #fff; background: #b58e3e; } .btn-s4 a span::before { content: attr(data-text-open); display: block; } .btn-s4 a span::after { content: attr(data-text-close); display: none; } .btn-s4 a.on span::before { content: attr(data-text-open); display: none; } .btn-s4 a.on span::after { content: attr(data-text-close); display: block; } .link-more { position: absolute; width: 90px; height: 34px; right: 15px; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; } .but-more-all { position: relative; width: 200px; margin: 0 auto; text-align: center; } .loading-ajax { position: absolute; width: 100%; text-align: center; left: 0; right: 0; } .loading-ajax img { display: inline-block; width: 20px; height: 20px; } .ui-loader { display:none !important; visibility:hidden !important; } .blockPage { width: 260px !important; left: 0 !important; right: 0 !important; border:none !important; background:none !important; margin: 0 auto !important; } .blockPage .waiting { width: 260px; padding: 15px; text-align: center; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 10px 25px 0px rgba(0,0,0,0.35); -moz-box-shadow: 0px 10px 25px 0px rgba(0,0,0,0.35); box-shadow: 0px 10px 25px 0px rgba(0,0,0,0.35); } .blockPage .waiting img { display: inline-block; padding: 10px 0; } .animated { animation-duration: 1s; animation-fill-mode: both; } @keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -30%, 0); } to { opacity: 1; transform: none; } } .fadeInDown { animation-name: fadeInDown; } /*Easy Tabs*/ dl.resp-tabs-list { margin: 0px; padding: 15px 0 0 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap:wrap; align-content: flex-start; justify-content: center; position: relative; z-index: 9; } .resp-tabs-list dt { display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; list-style: none; cursor: pointer; text-align: center; -ms-flex: 0 0 20%; flex: 0 0 20%; width: 20%; font-weight:500; text-transform:uppercase; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; } .resp-tabs-list dt span { padding: 8px 10px; color: #555; font-weight: 400; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently */ } .resp-tabs-list dt:hover { background: #eceff1; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease } .resp-tabs-list dt:hover span { color: #555 ; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease } .resp-tab-active span { color: #fff !important; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease } .resp-tab-active dt:hover span { color: #fff !important; } .resp-tab-active:hover { background: #e51c38 !important; } .resp-tabs-container { padding: 0px; /* background-color: #fff;*/ clear: left; } div.resp-accordion { cursor: pointer; padding: 5px; display: none; } .resp-tab-content { display: none; /*padding:15px 15px 10px 15px;*/ } .resp-tab-active { border-bottom: none; color: #fff; background: #e51c38; } .resp-content-active, .resp-accordion-active { display: block; } .resp-tab-content { border-top: 1px solid #c4d0dc; } .resp-tab-content p { padding-bottom: 0; } .resp-tab-content dl dt { position: relative; padding: 15px 0 0 20px; } .resp-tab-content dl dt:before { content: ''; position: absolute; width: 6px; height: 6px; left: 5px; top: 24px; border-radius: 50%; background: #777; } div.resp-accordion { border: 1px solid #eee; border-top: 0px solid #d70a0a; margin: 0px; padding: 10px 15px; font-size:19px; } div.resp-tab-active { border-bottom: 0px solid #eee !important; margin-bottom: 0px !important; padding: 10px 15px !important; } div.resp-tab-title:last-child { border-bottom: 12px solid #eee !important; background: blue; } /*-----------Vertical tabs-----------*/ .resp-vtabs dl.resp-tabs-list { float: left; width: 30%; } .resp-vtabs .resp-tabs-list dt { display: block; padding: 15px 15px !important; margin: 0; cursor: pointer; float: none; } .resp-vtabs .resp-tabs-container { padding: 0px; background-color: #fff; border: 1px solid #eee; float: left; width: 68%; min-height: 250px; border-radius: 4px; clear: none; } .resp-vtabs .resp-tab-content { border: none; } .resp-vtabs dt.resp-tab-active { border: 1px solid #ddd; border-right: none; background-color: #fff; position: relative; z-index: 1; margin-right: -1px !important; padding: 14px 15px 15px 14px !important; } .resp-arrow { width: 0; height: 0; float: right; margin-top: 10px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #ccc; } div.resp-tab-active span.resp-arrow { border: none; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 8px solid #777; } /*-----------Accordion styles-----------*/ div.resp-tab-active { background: #333 !important; } .resp-easy-accordion div.resp-accordion { display: block; } .resp-easy-accordion .resp-tab-content { border: 1px solid #eee; } .resp-easy-accordion .resp-tab-content:last-child { border-bottom: 1px solid #eee !important; } .resp-jfit { width: 100%; margin: 0px; } .resp-tab-content-active { display: block; } div.resp-accordion:first-child { border-top: 1px solid #eee !important; } /*Here your can change the breakpoint to set the accordion, when screen resolution changed*/ /*@media only screen and (max-width: 425px) { ul.resp-tabs-list { display: none; } div.resp-accordion { display: block; } .resp-vtabs .resp-tab-content { border: 1px solid #eee; } .resp-vtabs .resp-tabs-container { border: none; float: none; width: 100%; min-height: initial; clear: none; } .resp-accordion-closed { display: none !important; } .resp-vtabs .resp-tab-content:last-child { border-bottom: 1px solid #eee !important; } } */ /*@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { animation-name: fadeIn; }*/ /* ------------------------------------------------------------------------------------------------------------ | Enjoy | ------------------------------------------------------------------------------------------------------------ */