/*
Theme Name: Parlay Bola HPBola
Theme URI: Parlay Bola HPBola
Author: @hanlnrd
Author URI: Parlay Bola HPBola
Description: Parlay Bola HPBola
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: Parlay Bola HPBola
Tags: Responsive Mobile Version Themes Website by: hanlnrd
*/

@import url('https://fonts.googleapis.com/css?family=Days+One|Roboto|Prompt&display=swap');

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Roboto', sans-serif !important;
    background: url(images/bg.png)  #162460;
    background-size: auto 100%;
}

a {
    transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
}

a:hover {
    transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
}

a:focus {
    outline: none;
}

@keyframes btnDaftar {
    0% { color: #f00; }
    50% { color: #000; }
    100% { color: #f00; }
}

@keyframes stepWhatsapp {
    from {
        background-position: center 0%;
    }
    to {
        background-position: center 195%;
    }
}

/* normal media query */
@media (min-width: 768px) {
    /** header **/
    header .container .row:nth-of-type(1) {    
        background: #000f22;
    }

    header .container .row:nth-of-type(1) .col-md-12 ul {
        text-align: right;
        padding: 10px 0;
        margin-bottom: 0;
    }

    header .container .row:nth-of-type(1) .col-md-12 ul li:first-child a {
        animation: btnDaftar 1s infinite;
    }

    header .container .row:nth-of-type(1) .col-md-12 ul li a {
        font-family: 'Days One',cursive;
        font-size: 14px;
        color: #000;
        letter-spacing: 3px;
        font-style: italic;
        padding: 5px 70px;
        background: linear-gradient(0deg, #bb7509 0%, #ffcc42 60%, #ffcc42 80%, #efcc52 87%, #bb7509 100%);
        border: 1px solid #d5e7ff;
    }

    header .container .row:nth-of-type(1) .col-md-12 ul li a:focus {
        box-shadow: none !important;
    }

    header .container .row:nth-of-type(1) .col-md-12 ul li a:hover {
        color: #fff;
    }

    header .container .row:nth-of-type(2) {
        background: linear-gradient(0deg, #0D6DC5, #4BB9F6 77%, #3AE1FF 100% 100%);
        margin: 0 -10px;
    }

    header .container .row:nth-of-type(2) .col-md-3 img {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    header .container .row:nth-of-type(2) .col-md-3 h1 {
        font-size: 45px;
        font-weight: bold;
        letter-spacing: 5px;
        margin-top: 8px;
        display: inline-block;
    }

    header .container .row:nth-of-type(2) .col-md-3 h1 a, header .container .row:nth-of-type(2) .col-md-3 h1 a:hover {
        color: #062f6e;
        text-decoration: none;
    }

    header .container .row:nth-of-type(2) .col-md-9 ul {
        padding-left: 0;
        margin-bottom: 0;
    }

    header .container .row:nth-of-type(2) .col-md-9 ul li {
        margin-right: 30px;
    }

    header .container .row:nth-of-type(2) .col-md-9 ul li:last-child {
        margin-right: 0;
    }

        header .container .row:nth-of-type(2) .col-md-9 ul li:first-child a {
        color: #f1cc50;
        text-shadow: 2px 2px 2px #000;
    }
    
    header .container .row:nth-of-type(2) .col-md-9 ul li a {
        font-family: 'Prompt', sans-serif;
        color: #00175f;
        font-size: 15px;
        font-weight: bold;
        letter-spacing: 1px;
    }

    header .container .row:nth-of-type(2) .col-md-9 ul li a:hover, .active {
        color: #f1cc50 !important;
        text-decoration: none;
    }

    header .container .row:nth-of-type(3) {
        background: #000f22;
        border-top: 1px solid #7b8ebb;
        border-bottom: 1px solid #7b8ebb;
        padding: 2px 15px;
        margin: 0 -10px;
    }

    header .container .row:nth-of-type(3) .col-md-1 {
        color: #f1cc50;
        font-size: 11px;
        font-weight: 700;
        padding-top: 5px;
        padding-left: 10px;
        border-right: 1px solid #8ec1ff;
    }

    header .container .row:nth-of-type(3) .col-md-11 span {
        color: #bebcbc;
        font-size: 11px;
        font-weight: 600;
    }

    header .container .row:nth-of-type(3) .col-md-11 span:nth-of-type(2) {
        padding-left: 15px;
    }

    header .container .row:nth-of-type(4) {
        background: linear-gradient(#0D6DC5, #4BB9F6, #3AE1FF, #0D6DC5);
        padding-top: 5px;
        padding-bottom: 5px;
        margin: 0 -10px;
    }

    main .container .row:nth-of-type(1) {
        background: linear-gradient( 0deg, #0D6DC5, #4BB9F6 77%, #3AE1FF 100% 100%);
        padding-top: 5px;
        padding-bottom: 5px;
        margin: 0 -10px;
    }

    header .container .row:nth-of-type(4) .col-md-7 {
        border: 5px solid #99b8ec;
        box-shadow: 0 0 2px 0px #000;
        padding: 0;
        position: relative;
        right: 5px;
    }

    header .container .row:nth-of-type(4) .col-md-5 {
        background: linear-gradient( 180deg, #0D6DC5, #4BB9F6 77%, #3AE1FF 100% 100%);
        border: 5px solid #99b8ec;
        box-shadow: 0 0 2px 0px #000;
        padding: 5px 10px;
        position: relative;
        left: 5px;
    }

    header .container .row:nth-of-type(4) .col-md-5 h4 {
        font-family: 'Prompt', sans-serif;
        color: #f6ca34;
        font-weight: bold;
        letter-spacing: 1px;
        text-align: center;
    }

    header .container .row:nth-of-type(4) .col-md-5 p {
        font-size: 15px;
        margin-bottom: 4px;
        border-bottom: 1px solid #d0d0d0;
    }
    /** header **/

    /** main **/
    main .container .row.main .col-md-4:nth-of-type(1) {
        border: 5px solid #99b8ec;
        box-shadow: 0 0 2px 0px #000;
        padding: 5px 10px;
        position: relative;
        right: 5px;
    }

    main .container .row.main .col-md-4:nth-of-type(1) ul {
        list-style: none;
        padding-left: 0;
        margin-bottom: 0;
    }

    main .container .row.main .col-md-4:nth-of-type(1) ul li {
        font-family: 'Prompt', sans-serif;
        letter-spacing: 1.5px;
    }
    

    main .container .row.main .col-md-4:nth-of-type(1) ul li img {
        padding-right: 10px;
        padding-bottom: 5px;
    }

    main .container .row.main .col-md-4:nth-of-type(1) ul li:nth-of-type(3) img {
        padding-bottom: 0;
    }

    main .container .row.main .col-md-4:nth-of-type(2) {
        border: 5px solid #99b8ec;
        box-shadow: 0 0 2px 0px #000;
        padding: 5px 10px;
        text-align: center;
    }

    main .container .row.main .col-md-4:nth-of-type(2) span a img {
        margin: 35px 15px 0 15px;
    }

    main .container .row.main .col-md-4:nth-of-type(2) span a img:hover {
        -ms-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        transition: all .2s linear;
        -webkit-transition: all .2s linear;
        -moz-transition: all .2s linear;
        -o-transition: all .2s linear;
    }

    main .container .row.main .col-md-4:nth-of-type(3) {
        border: 5px solid #99b8ec;
        box-shadow: 0 0 2px 0px #000;
        padding: 5px 10px;
        position: relative;
        left: 5px;
    }

    main .container .row.main .col-md-4:nth-of-type(1) h4, main .container .row.main .col-md-4:nth-of-type(2) h4, main .container .row.main .col-md-4:nth-of-type(3) h4 {
        font-family: 'Prompt', sans-serif;
        color: #062f6e;
        font-weight: bold;
        letter-spacing: 1px;
        text-align: center;
    }

    main .container .row.main .col-md-4:nth-of-type(3) p {
        font-family: 'Prompt', sans-serif;
        font-size: 15px;
        letter-spacing: 1.2px;
        margin-bottom: 4px;
        padding-bottom: 3px;
        border-bottom: 1px solid #d0d0d0;
    }

    main .container .row.main .col-md-4:nth-of-type(3) p img {
        padding-left: 2px;
    }

    main .container .row.page {
        border: 5px solid #99b8ec;
        box-shadow: 0 0 2px 0px #000;
    }

    main .container .row.page .col-md-12 {
        padding-top: 15px;
        border: 1px solid #2a4696;
    }

    main .container .row.page .col-md-12 h1, main .container .row.page .col-md-12 h2, main .container .row.page .col-md-12 h3, main .container .row.page .col-md-12 h4 {
        color: #f6ca34;
        text-align: center;
        letter-spacing: 0.5px;
        text-shadow: 2px 2px 2px #000;
    }

    main .container .row.page .col-md-12 h1 a, main .container .row.page .col-md-12 h2 a, main .container .row.page .col-md-12 h3 a, main .container .row.page .col-md-12 h4 a {
        color: #f6ca34;
    }

    main .container .row.page .col-md-12 h1 a:hover, main .container .row.page .col-md-12 h2 a:hover, main .container .row.page .col-md-12 h3 a:hover, main .container .row.page .col-md-12 h4 a:hover {
        color: #f6ca34;
        text-decoration: none;
    }

    main .container .row.page .col-md-12 p {
        color: #fff;
        text-align: justify;
        letter-spacing: 0.3px;
    }

    main .container .row.page .col-md-12 p a {
        color: #f6ca34;
        display: inline-block;
    }

    main .container .row.page .col-md-12 p a:hover {
        transform: translateY(-2px);
        text-decoration: none;
    }
    /** main **/

    /** footer **/
    .btn-bot-wa {
        width: 260px;
        height: 85px;
        display: block;
        position: fixed;
        left: 0;
        bottom: 0;
        background: url(images/wa-ico.png) no-repeat;
        z-index: 1000;
        animation: .25s stepWhatsapp steps(2) infinite;
    }

    footer .container {
        text-align: center;
    }

    footer .container .row .col-md-12 ul {
        padding-top: 15px;
        padding-bottom: 5px;
        padding-left: 0;
        margin-bottom: 0;
    }

    footer .container .row .col-md-12 ul li {
        margin-right: 0;
        padding: 0 35px;
        border-right: 1px solid #fff;
    }

    footer .container .row .col-md-12 ul li a {
        color: #f6ca34;
        font-size: 15px;
        cursor: pointer;
    }

    footer .container .row .col-md-12 ul li:last-child {
        border-right: none;
    }

    footer .container .row .col-md-12 p {
        color: #a8b8d9;
        font-size: 11px;
        margin-bottom: 5px;
        letter-spacing: 0.2px;
    }
    /** footer **/
}


/* device media query */
@media (max-width: 768px) {
    /** header **/
    header .container .row:nth-of-type(1) {    
        background: #000f22;
    }

    header .container .row:nth-of-type(1) .col-md-12 ul {
        text-align: center;
        padding: 20px 0;
        margin-bottom: 0;
    }

    header .container .row:nth-of-type(1) .col-md-12 ul li:first-child a {
        animation: btnDaftar 1s infinite;
    }

    header .container .row:nth-of-type(1) .col-md-12 ul li {
        margin-right: 20px;
    }

    header .container .row:nth-of-type(1) .col-md-12 ul li:last-child {
        margin-right: 0;
    }

    header .container .row:nth-of-type(1) .col-md-12 ul li a {
        font-family: 'Days One',cursive;
        font-size: 14px;
        color: #000;
        letter-spacing: 3px;
        font-style: italic;
        padding: 5px 35px;
        background-image: -webkit-linear-gradient(-90deg,#fff 0%,#99b8ec 100%);
        background-image: -moz-linear-gradient(-90deg,#fff 0%,#99b8ec 100%);
        background-image: -ms-linear-gradient(-90deg,#fff 0%,#99b8ec 100%);
        border: 1px solid #d5e7ff;
    }

    header .container .row:nth-of-type(1) .col-md-12 ul li a:focus {
        box-shadow: none !important;
    }

    header .container .row:nth-of-type(1) .col-md-12 ul li a:hover {
        background-image: -webkit-linear-gradient(-90deg,#99b8ec 0%,#fff 100%);
        background-image: -moz-linear-gradient(-90deg,#99b8ec 0%,#fff 100%);
        background-image: -ms-linear-gradient(-90deg,#99b8ec 0%,#fff 100%);
    }

    header .container .row:nth-of-type(2) {
        background: linear-gradient(0deg, #0D6DC5, #4BB9F6 77%, #3AE1FF 100% 100%);
    }

    header .container .row:nth-of-type(2) .col-md-3 {
        text-align: center;
    }

    header .container .row:nth-of-type(2) .col-md-3 img {
        position: relative;
    }

    header .container .row:nth-of-type(2) .col-md-3 h1 {
        font-size: 45px;
        font-weight: bold;
        letter-spacing: 5px;
        margin-top: 8px;
        display: inline-block;
    }

    header .container .row:nth-of-type(2) .col-md-3 h1 a, header .container .row:nth-of-type(2) .col-md-3 h1 a:hover {
        color: #062f6e;
        text-decoration: none;
    }

    header .container .row:nth-of-type(2) .col-md-9 ul {
        padding-left: 0;
        margin-bottom: 0;
    }

    header .container .row:nth-of-type(2) .col-md-9 ul li {
        margin-right: 30px;
    }

    header .container .row:nth-of-type(2) .col-md-9 ul li:last-child {
        margin-right: 0;
    }
    
    header .container .row:nth-of-type(2) .col-md-9 ul li a {
        font-family: 'Prompt', sans-serif;
        color: #00175f;
        font-size: 15px;
        font-weight: bold;;
        letter-spacing: 1px;
    }

    header .container .row:nth-of-type(2) .col-md-9 ul li a:hover, .active {
        color: #f00 !important;
        text-decoration: none;
    }

    /** Mobile Menu **/
    header .container .row:nth-of-type(2) .col-md-12.menu-top-navbar {
        text-align: right;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    header .container .row:nth-of-type(2) .col-md-12.menu-top-navbar .button-menu {
        padding: .25rem .75rem;
        background: transparent;
        border: 1px solid transparent;
        font-size: 20px;
        color: #000;
    }

    header .container .row:nth-of-type(2) .col-md-12.menu-top-navbar .button-menu:focus {
        outline: none !important;
    }

    header .container .row:nth-of-type(2) .col-md-12 .menu-top-collapse {
        border-top: 1px solid transparent;
        text-align: left;
    }

    header .container .row:nth-of-type(2) .col-md-12 .menu-top-collapse ul {
        margin-bottom: 0;
        padding-left: 0;
    }

    header .container .row:nth-of-type(2) .col-md-12 .menu-top-collapse ul li {
        background: transparent;
        border-bottom: 1px solid #000;
        border-left: transparent;
        border-right: transparent;
        text-align: center;
    }

    header .container .row:nth-of-type(2) .col-md-12 .menu-top-collapse ul li a {
        font-family: 'Prompt', sans-serif;
        color: #000;
        letter-spacing: 5px;
        font-weight: bold;
    }

    header .container .row:nth-of-type(2) .col-md-12 .menu-top-collapse ul li a:hover{
        color: #000!important;
        text-decoration: none;
    }

    header .container .row:nth-of-type(2) .col-md-12 .menu-top-collapse ul li:first-child {
        border-top: none;
    }

    header .container .row:nth-of-type(2) .col-md-12 .menu-top-collapse ul li:last-child {
        border-bottom: none;
    }
    /** Mobile Menu **/

    header .container .row:nth-of-type(3) {
        background: #000f22;
        border-top: 1px solid #7b8ebb;
        border-bottom: 1px solid #7b8ebb;
        padding: 2px 15px;
    }

    header .container .row:nth-of-type(3) .col-md-1 {
        color: #274ea0;
        font-size: 13px;
        font-weight: 700;
        padding-top: 5px;
        padding-left: 10px;
        text-align: center;
    }

    header .container .row:nth-of-type(3) .col-md-11 {
        text-align: center;
    }

    header .container .row:nth-of-type(3) .col-md-11 span {
        color:#bebcbc;
        font-size: 13px;
        font-weight: 600;
    }

    header .container .row:nth-of-type(3) .col-md-11 span:nth-of-type(2) {
        padding-left: 15px;
    }

    header .container .row:nth-of-type(4), main .container .row:nth-of-type(1) {
        background: linear-gradient(#0D6DC5, #4BB9F6, #3AE1FF, #0D6DC5);
        padding-top: 5px;
    }

    header .container .row:nth-of-type(4) .col-md-7 {
        border: 5px solid #99b8ec;
        box-shadow: 0 0 2px 0px #000;
        padding: 0;
        margin-bottom: 5px;
    }

    header .container .row:nth-of-type(4) .col-md-5 {
        border: 5px solid #99b8ec;
        box-shadow: 0 0 2px 0px #000;
        padding: 5px 10px;
    }

    header .container .row:nth-of-type(4) .col-md-5 h4 {
        font-family: 'Prompt', sans-serif;
        color: #062f6e;
        font-weight: bold;
        letter-spacing: 1px;
        text-align: center;
    }

    header .container .row:nth-of-type(4) .col-md-5 p {
        font-size: 13px;
        margin-bottom: 4px;
        border-bottom: 1px solid #d0d0d0;
    }
    /** header **/

    /** main **/
    main .container .row.main .col-md-4:nth-of-type(1) {
        border: 5px solid #99b8ec;
        box-shadow: 0 0 2px 0px #000;
        padding: 5px 10px;
        margin-bottom: 5px;
    }

    main .container .row.main .col-md-4:nth-of-type(1) ul {
        list-style: none;
        padding-left: 0;
        margin-bottom: 0;
    }

    main .container .row.main .col-md-4:nth-of-type(1) ul li {
        font-family: 'Prompt', sans-serif;
        letter-spacing: 1.5px;
    }
    

    main .container .row.main .col-md-4:nth-of-type(1) ul li img {
        padding-right: 10px;
        padding-bottom: 5px;
    }

    main .container .row.main .col-md-4:nth-of-type(1) ul li:nth-of-type(3) img {
        padding-bottom: 0;
    }

    main .container .row.main .col-md-4:nth-of-type(2) {
        border: 5px solid #99b8ec;
        box-shadow: 0 0 2px 0px #000;
        padding: 5px 10px;
        margin-bottom: 5px;
        text-align: center;
    }

    main .container .row.main .col-md-4:nth-of-type(2) span a img {
        margin: 35px 15px 0 15px;
    }

    main .container .row.main .col-md-4:nth-of-type(2) span a img:hover {
        -ms-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        transition: all .2s linear;
        -webkit-transition: all .2s linear;
        -moz-transition: all .2s linear;
        -o-transition: all .2s linear;
    }

    main .container .row.main .col-md-4:nth-of-type(3) {
        border: 5px solid #99b8ec;
        box-shadow: 0 0 2px 0px #000;
        padding: 5px 10px;
        margin-bottom: 5px;
    }

    main .container .row.main .col-md-4:nth-of-type(1) h4, main .container .row.main .col-md-4:nth-of-type(2) h4, main .container .row.main .col-md-4:nth-of-type(3) h4 {
        font-family: 'Prompt', sans-serif;
        color: #062f6e;
        font-weight: bold;
        letter-spacing: 1px;
        text-align: center;
    }

    main .container .row.main .col-md-4:nth-of-type(3) p {
        font-family: 'Prompt', sans-serif;
        font-size: 15px;
        letter-spacing: 1.2px;
        margin-bottom: 4px;
        padding-bottom: 3px;
        border-bottom: 1px solid #d0d0d0;
    }

    main .container .row.main .col-md-4:nth-of-type(3) p img {
        padding-left: 2px;
    }

    main .container .row.page {
        border: 5px solid #99b8ec;
        box-shadow: 0 0 2px 0px #000;
    }

    main .container .row.page .col-md-12 {
        padding-top: 15px;
        border: 1px solid #2a4696;
    }

    main .container .row.page .col-md-12 h1, main .container .row.page .col-md-12 h2, main .container .row.page .col-md-12 h3, main .container .row.page .col-md-12 h4 {
        color: #7899ff;
        text-align: center;
        letter-spacing: 0.5px;
        text-shadow: 2px 2px 2px #000;
    }

    main .container .row.page .col-md-12 h1 a, main .container .row.page .col-md-12 h2 a, main .container .row.page .col-md-12 h3 a, main .container .row.page .col-md-12 h4 a {
        color: #7899ff;
    }

    main .container .row.page .col-md-12 h1 a:hover, main .container .row.page .col-md-12 h2 a:hover, main .container .row.page .col-md-12 h3 a:hover, main .container .row.page .col-md-12 h4 a:hover {
        color: #7899ff;
        text-decoration: none;
    }

    main .container .row.page .col-md-12 p {
        color: #fff;
        text-align: justify;
        letter-spacing: 0.3px;
    }

    main .container .row.page .col-md-12 p a {
        color: #7899ff;
        display: inline-block;
    }

    main .container .row.page .col-md-12 p a:hover {
        transform: translateY(-2px);
        text-decoration: none;
    }
    /** main **/

    /** footer **/
    .btn-bot-wa {
        width: 70px;
        height: 70px;
        display: block;
        position: fixed;
        left: 10px;
        bottom: 5px;
        background: url(images/wa-ico-mobile.png) no-repeat;
        z-index: 1000;
    }

    footer .container {
        text-align: center;
    }

    footer .container .row .col-md-12 ul {
        padding-top: 15px;
        padding-bottom: 5px;
        padding-left: 0;
        margin-bottom: 0;
    }

    footer .container .row .col-md-12 ul li {
        margin-right: 0;
        padding: 0 35px;
        border-right: 1px solid #fff;
    }

    footer .container .row .col-md-12 ul li a {
        color: #99b8ec;
        font-size: 15px;
        cursor: pointer;
    }

    footer .container .row .col-md-12 ul li:last-child {
        border-right: none;
    }

    footer .container .row .col-md-12 p {
        color: #a8b8d9;
        font-size: 11px;
        margin-bottom: 5px;
        letter-spacing: 0.2px;
    }
    /** footer **/
}