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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Roboto', sans-serif !important;
    background-color: #000 !important;
    background: url(images/bg-fuji.jpg);
}

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

/* normal media query */
@media (min-width: 768px) {
    /** header **/
    header .container {
        text-align: center;
        border: 1px #ffffff solid;
        border-top: none;
    }

    header .container .row:nth-of-type(1) .col-md-12 {
        background: #2e00007a;
        max-height: 99px;
    }

    header .container .row:nth-of-type(1) .col-md-12 img {
        position: relative;
        top: -16px;
    }

    header .container .row:nth-of-type(1) .col-md-12 p:nth-of-type(1) {
        font-family: 'Prompt', sans-serif;
        font-size: 60px;
        background: -webkit-linear-gradient(rgb(243 14 154), rgb(207 0 40));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        display: inline;
        margin-bottom: 0;
        letter-spacing: 2px;
        font-weight: 600;
    }

    header .container .row:nth-of-type(1) .col-md-12 p:nth-of-type(2) {
        font-family: 'Prompt', sans-serif;
        color: #d80027;
        font-size: 13px;
        letter-spacing: 15px;
        position: relative;
        bottom: 20px;
        margin-bottom: 0;
    }

    header .container .row:nth-of-type(2) .col-md-12 {
        background-image: -moz-linear-gradient( -90deg, rgb(255, 0, 50) 0%, rgb(82, 0, 0) 100%);
        background-image: -webkit-linear-gradient( -90deg, rgb(255, 0, 50) 0%, rgb(82, 0, 0) 100%);
        background-image: -ms-linear-gradient( -90deg, rgb(255, 0, 50) 0%, rgb(82, 0, 0) 100%);
    }

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

    header .container .row:nth-of-type(2) .col-md-12 ul li {
        margin-right: 0;
        margin-left: -4px;
        padding-top: 1px;
        border-right: 2px solid #fff;
        min-width: 180px;
    }
    
    header .container .row:nth-of-type(2) .col-md-12 ul li:last-child {
        border-right: none;
    }

    header .container .row:nth-of-type(2) .col-md-12 ul li a {
        font-family: 'Prompt', sans-serif;
        letter-spacing: 1.5px;
        color: #fff;
        font-size: 17px;
    }

    header .container .row:nth-of-type(2) .col-md-12 ul li a:hover {
        color: #000;
        font-weight: bold;
        text-decoration: none;
    }
    /** header **/

    /** mid-body **/
    .mid-body .container {
        border-right: 1px solid #ffffff;
        border-left: 1px solid #ffffff;
    }

    .mid-body .container .row .col-md-12 {
        padding-top: 15px;
    }

    .mid-body .container .row .col-md-12 h1, .mid-body .container .row .col-md-12 h2, .mid-body .container .row .col-md-12 h3, .mid-body .container .row .col-md-12 h4 {
        text-align: center;
        background: #ff1d46;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 600;
    }

    .mid-body .container .row .col-md-12 p {
        color: #fff;
        text-align: justify;
    }

    .mid-body .container .row .col-md-12 h1 a, .mid-body .container .row .col-md-12 h2 a, .mid-body .container .row .col-md-12 h3 a, .mid-body .container .row .col-md-12 h4 a, .mid-body .container .row .col-md-12 h1 a:hover, .mid-body .container .row .col-md-12 h2 a:hover, .mid-body .container .row .col-md-12 h3 a:hover, .mid-body .container .row .col-md-12 h4 a:hover {
        color:  #d80027;
        text-decoration: none;
    }

    .mid-body .container .row .col-md-12 p a {
        color:  #d80027;
        display: inline-block;
    }

    .mid-body .container .row .col-md-12 p a:hover {
        transform: translateY(-2px);
        text-decoration: none;
    }

    ul li {
        color: #ffffff;
    }

    .img-banner {
        margin: auto;
        display: block;
        width: 100%;
        height: auto;
        padding: 20px;
    }

    /** table keluaran togel **/
	.mid-body .container .row .col-md-12 .keluaran-tgl table {
		text-align: center;    
		margin-bottom: 20px;
	}
	
	.mid-body .container .row .col-md-12 .keluaran-tgl table tr th:first-child {
		font-size: 30px;
		width: 650px;
		background: -webkit-linear-gradient(rgb(249 253 166), rgb(235 194 39));
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	
	.mid-body .container .row .col-md-12 .keluaran-tgl table tr th {
		font-size: 18px;
		font-weight: 100;
		letter-spacing: 2px;
		padding: 5px;
		border: 1px solid #adadad;
		background-image: -moz-linear-gradient( -90deg, rgb(249, 253, 166) 0%, rgb(235, 194, 39) 100%);
		background-image: -webkit-linear-gradient( -90deg, rgb(249, 253, 166) 0%, rgb(235, 194, 39) 100%);
		background-image: -ms-linear-gradient( -90deg, rgb(249, 253, 166) 0%, rgb(235, 194, 39) 100%);
	}
	
	.mid-body .container .row .col-md-12 .keluaran-tgl table tr th a, .mid-body .container .row .col-md-12 .keluaran-tgl table tr th a:hover {
		color: #000;
		text-decoration: none;
	}
	
	.mid-body .container .row .col-md-12 .keluaran-tgl table tr td {
		font-size: 35px;
		color: #fff;
		letter-spacing: 15px;
		padding: 5px;
		border: 1px solid #adadad;
	}
	/** table keluaran togel **/

    /** table **/
    .mid-body .container .row .col-md-12 table {
        text-align: center;
        margin-bottom: 20px;
    }

    .mid-body .container .row .col-md-12 table tr:nth-of-type(1) td {
        color: #ffd3d3;
        font-size: 20px;
        background: #ff1d46;
    }

    .mid-body .container .row .col-md-12 table tr td:nth-of-type(2), .mid-body .container .row .col-md-12 table tr td:nth-of-type(3) {
        width: 370px;
    }

    .mid-body .container .row .col-md-12 table tr td {
        padding: 8px;
        border: 1px solid #adadad;
    }

    .mid-body .container .row .col-md-12 table tr td.p1, .mid-body .container .row .col-md-12 table tr td.p2 {
        color: #fff;
        letter-spacing: 2px;
        cursor: pointer;
    }

    .mid-body .container .row .col-md-12 table tr td.p1:hover {
        background: #f30e19;
    }

    .mid-body .container .row .col-md-12 table tr td.p2:hover  {
        color: #000;
        font-weight: bold;
        background: #f30e19;
    }

    .mid-body .container .row .col-md-12 table tr td:nth-of-type(3) a {
        color: #000000;
        padding: 1px 35px;
        letter-spacing: 2px;
        background-image: -moz-linear-gradient(-90deg, rgb(243 14 25) 0%, rgb(255 181 195) 100%);
        background-image: -webkit-linear-gradient(-90deg, rgb(243 14 25) 0%, rgb(255 181 195) 100%);
        background-image: -ms-linear-gradient(-90deg, rgb(243 14 25) 0%, rgb(255 181 195) 100%);
        border: none;
        display: inline-block;
    }

    .mid-body .container .row .col-md-12 table tr td:nth-of-type(3) a:focus {
        box-shadow: none !important;
    }

    .mid-body .container .row .col-md-12 table tr td:nth-of-type(3) a:hover {
        background-image: -moz-linear-gradient( -90deg, rgb(255, 210, 10) 0%, rgb(255, 211, 18) 100%);
        background-image: -webkit-linear-gradient( -90deg, rgb(255, 210, 10) 0%, rgb(255, 211, 18) 100%);
        background-image: -ms-linear-gradient( -90deg, rgb(255, 210, 10) 0%, rgb(255, 211, 18) 100%);
        border: none;
        transform: translateY(-2px);
    }
    /** table **/
    /** mid-body **/

    /** 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;
        border: 1px solid #ffffff;
        border-bottom: none;
        background: #2e00007a;
    }

    footer .container .row .col-md-12 ul {
        padding-top: 20px;
        padding-bottom: 20px;
        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:last-child {
        border-right: none;
    }

    footer .container .row .col-md-12 ul li a, footer .container .row .col-md-12 ul li a:hover {
        font-family: 'Prompt', sans-serif;
        color: #ea111c;
        text-decoration: none;
        letter-spacing: 1px;
        font-size: 14px;
    }

    footer .container .row .col-md-12 p {
        color: #6d6d6d;
        font-size: 12px;
        margin-bottom: 5px;
    }
    /** footer **/
}

/* device media query */
@media (max-width: 768px) {
    /** header **/
    header .container {
        text-align: center;
        border-top: none;
    }

    header .container .row:nth-of-type(1) .col-md-12 {
        background: #2e00007a;
        padding-top: 20px;
    }

    header .container .row:nth-of-type(1) .col-md-12 img {
        position: relative;
        top: -16px;
    }

    header .container .row:nth-of-type(1) .col-md-12 p:nth-of-type(1) {
        font-family: 'Prompt', sans-serif;
        font-size: 30px;
        background: -webkit-linear-gradient(rgb(243 14 154), rgb(207 0 40));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        display: inline;
        margin-bottom: 0;
        letter-spacing: 2px;
        font-weight: 600;
    }

    header .container .row:nth-of-type(1) .col-md-12 p:nth-of-type(2) {
        font-family: 'Prompt', sans-serif;
        color: #d80027;
        font-size: 15px;
        letter-spacing: 7px;
        position: relative;
        bottom: 17px;
        margin-bottom: 0;
    }

    header .container .row:nth-of-type(2) .col-md-12 {
        background-image: -webkit-linear-gradient(-90deg, rgb(255 0 50) 0%, rgb(82 0 0) 100%);
    }

    header .container .row:nth-of-type(2) .col-md-12 ul {
        padding-left: 0;
        margin-bottom: 0;
    }
    
    header .container .row:nth-of-type(2) .col-md-12 ul li:last-child {
        border-right: none;
    }

    header .container .row:nth-of-type(2) .col-md-12 ul li a {
        font-family: 'Prompt', sans-serif;
        letter-spacing: 1.5px;
        color: #fff;
        font-size: 17px;
    }

    header .container .row:nth-of-type(2) .col-md-12 ul li a:hover {
        color: #000;
        font-weight: bold;
        text-decoration: none;
    }

    /** Mobile Menu **/
    header .container .row .col-md-12.menu-top-navbar {
        text-align: center;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    header .container .row .col-md-12.menu-top-navbar .button-menu {
        padding: .25rem .75rem;
        background: transparent;
        border: 1px solid transparent;
        font-size: 20px;
        color: #ffffff;
    }

    header .container .row .col-md-12.menu-top-navbar .button-menu:focus {
        outline: none !important;
    }

    header .container .row .col-md-12 .menu-top-collapse {
        border-top: 1px solid transparent;
        text-align: left;
    }

    header .container .row.col-md-12 .menu-top-collapse ul {
        margin-bottom: 0;
        padding-left: 0;
    }

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

    header .container .row .col-md-12 .menu-top-collapse ul li a {
        font-family: 'Prompt', sans-serif;
        color: #fdfdfd;
        letter-spacing: 2px;
    }

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

    header .container .row .col-md-12 .menu-top-collapse ul li:first-child {
        border-top: none;
    }

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

    /** mid-body **/
    .mid-body .container {
        border-right: 1px solid #ffffff;
        border-left: 1px solid #ffffff;
    }

    .mid-body .container .row .col-md-12 {
        padding-top: 15px;
    }

    .mid-body .container .row .col-md-12 h1, .mid-body .container .row .col-md-12 h2, .mid-body .container .row .col-md-12 h3, .mid-body .container .row .col-md-12 h4 {
        text-align: center;
        background: #ff1d46;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 600;
    }

    .mid-body .container .row .col-md-12 p {
        color: #fff;
        text-align: justify;
    }

    .mid-body .container .row .col-md-12 h1 a, .mid-body .container .row .col-md-12 h2 a, .mid-body .container .row .col-md-12 h3 a, .mid-body .container .row .col-md-12 h4 a, .mid-body .container .row .col-md-12 h1 a:hover, .mid-body .container .row .col-md-12 h2 a:hover, .mid-body .container .row .col-md-12 h3 a:hover, .mid-body .container .row .col-md-12 h4 a:hover {
        color:  #f90224;
        text-decoration: none;
    }

    .mid-body .container .row .col-md-12 p a {
        color:  #f90224;
        display: inline-block;
    }

    .mid-body .container .row .col-md-12 p a:hover {
        transform: translateY(-2px);
        text-decoration: none;
    }

    /** table keluaran togel **/
	.mid-body .container .row .col-md-12 .keluaran-tgl table {
		text-align: center;    
		margin-bottom: 20px;
	}
	
	.mid-body .container .row .col-md-12 .keluaran-tgl table tr th:first-child {
		font-size: 15px;
		background: -webkit-linear-gradient(rgb(249 253 166), rgb(235 194 39));
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	
	.mid-body .container .row .col-md-12 .keluaran-tgl table tr th {
		color: #fff;
		font-size: 12px;
		font-weight: 100;
		letter-spacing: 1px;
		padding: 5px;
		border: 1px solid #adadad;
		background-image: -moz-linear-gradient( -90deg, rgb(249, 253, 166) 0%, rgb(235, 194, 39) 100%);
		background-image: -webkit-linear-gradient( -90deg, rgb(249, 253, 166) 0%, rgb(235, 194, 39) 100%);
		background-image: -ms-linear-gradient( -90deg, rgb(249, 253, 166) 0%, rgb(235, 194, 39) 100%);
	}
	
	.mid-body .container .row .col-md-12 .keluaran-tgl table tr th a, .mid-body .container .row .col-md-12 .keluaran-tgl table tr th a:hover {
		color: #000;
		font-size: 15px;
		text-decoration: none;
	}
	
	.mid-body .container .row .col-md-12 .keluaran-tgl table tr td {
		color: #fff;
		font-size: 20px;
		padding: 5px;
		border: 1px solid #adadad;
		font-weight: bold;
		letter-spacing: 10px;
	}
	/** table keluaran togel **/

    /** table **/
    .mid-body .container .row .col-md-12 table {
        text-align: center;
        margin-bottom: 20px;
    }

    .mid-body .container .row .col-md-12 table tr:nth-of-type(1) td {
        color: #ffd3d3;
        font-weight: bold;
        font-size: 11px;
        background-image: -moz-linear-gradient(rgb(243 14 154), rgb(207 0 40));
        background-image: -webkit-linear-gradient(rgb(243 14 154), rgb(207 0 40));
        background-image: -ms-linear-gradient(rgb(243 14 154), rgb(207 0 40));
    }

    .mid-body .container .row .col-md-12 table tr td {
        padding: 8px 0;
        border: 1px solid #adadad;
    }

    .mid-body .container .row .col-md-12 table tr td.p1, .mid-body .container .row .col-md-12 table tr td.p2 {
        font-size: 11px;
        color: #fff;
        letter-spacing: 2px;
        cursor: pointer;
    }

    .mid-body .container .row .col-md-12 table tr td.p1:hover {
        background: #003bcf;
    }

    .mid-body .container .row .col-md-12 table tr td.p2:hover  {
        color: #000;
        font-weight: bold;
        background: #46a0f8;
    }

    .mid-body .container .row .col-md-12 table tr td:nth-of-type(3) a {
        color: #000;
        font-size: 13px;
        padding: 1px 15px;
        letter-spacing: 2px;
        background-image: -moz-linear-gradient( -90deg, rgb(70, 160, 248) 0%, rgb(0, 59, 207) 100%);
        background-image: -webkit-linear-gradient(-90deg, rgb(243 14 25) 0%, rgb(255 181 195) 100%);
        background-image: -ms-linear-gradient( -90deg, rgb(70, 160, 248) 0%, rgb(0, 59, 207) 100%);
        border: none;
        display: inline-block;
    }

    .mid-body .container .row .col-md-12 table tr td:nth-of-type(3) a:focus {
        box-shadow: none !important;
    }

    .mid-body .container .row .col-md-12 table tr td:nth-of-type(3) a:hover {
        background-image: -moz-linear-gradient( -90deg, rgb(255, 210, 10) 0%, rgb(255, 211, 18) 100%);
        background-image: -webkit-linear-gradient( -90deg, rgb(255, 210, 10) 0%, rgb(255, 211, 18) 100%);
        background-image: -ms-linear-gradient( -90deg, rgb(255, 210, 10) 0%, rgb(255, 211, 18) 100%);
        border: none;
        transform: translateY(-2px);
    }
    /** table **/

    
    ul li {
        color: #ffffff;
    }

    .img-banner {
        margin: auto;
        display: block;
        width: 100%;
        height: auto;
        padding: 10px;
    }

    /** mid-body **/

    /** 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;
        border: 1px solid #ffffff;
        border-bottom: none;
        background: #2e00007a;
    }

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

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

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

    footer .container .row .col-md-12 ul li a, footer .container .row .col-md-12 ul li a:hover {
        font-family: 'Prompt', sans-serif;
        color: #ea111c;
        text-decoration: none;
        letter-spacing: 1px;
        font-size: 11px;
    }

    footer .container .row .col-md-12 p {
        color: #6d6d6d;
        font-size: 12px;
        margin-bottom: 5px;
    }
    /** footer **/
}