/*
Theme Name: Xyz178
Author: @xyzteam
*/

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

body {
    background: url(images/bg-777.jpg) no-repeat fixed;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

a:hover {
    text-decoration: none !important;
}

/* normal media query */
@media (min-width: 768px) {
	
    /** header **/
    .alt-top {
        margin-top: 15px;
        font-family: 'Roboto', sans-serif;
		color: #fff;
    }

    .menu-top {
        margin-top: 50px;
    }

    .menu-a {
        font-family: 'Pridi', serif;
        font-size: 37px;
        margin-top: -27px;
    }
    
    .menu-p {
		font-size: 14px;
		color: #fff;
		margin-bottom: 0;
    }
    
    .clock-right {
        float: right;
        margin-top: 5px;
        color: #fff;
    }

    /** blinking text **/
    span.blink {
        color: #ff0000;
        animation: text-flicker 3s linear infinite;
        font-size: 19px;
        font-weight: 500;
    }

    #offset {
        animation: letter-flicker 2s linear infinite;
    }

    @keyframes text-flicker {
    0% {
        opacity:0.1;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }

    2% {
        opacity:1;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }
    8% {
        opacity:0.1;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }
    9% {
        opacity:1;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }
    12% {
        opacity:0.1;
        text-shadow: 0px 0px rgba(242, 22, 22, 1);
    }
    20% {
        opacity:1;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
    }
    25% {
        opacity:0.3;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
    }
    30% {
        opacity:1;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
    }

    70% {
        opacity:0.7;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
    }

    72% {
        opacity:0.2;
        text-shadow:0px 0px 29px rgba(242, 22, 22, 1)
    }

    77% {
        opacity:.9;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
    }
    100% {
        opacity:.9;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
    }
    }

    @keyframes letter-flicker {
    0% {
        opacity:0.1;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }
    2% {
        opacity:0.1;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }
    4% {
        opacity:1;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }


    19% {
        opacity:1;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }
    21% {
        opacity:0.1;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }
    23% {
        opacity:1;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }

    80% {
        opacity:1;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }
    83% {
        opacity:0.4;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }
    87% {
        opacity:1;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }
    }
    /** blinking text **/  

    @keyframes glowing {
        0% { box-shadow: 0 0 -10px #dc3545; }
        40% { box-shadow: 0 0 20px #dc3545; }
        60% { box-shadow: 0 0 20px #dc3545; }
        100% { box-shadow: 0 0 -10px #dc3545; }
    }

    .button-glow {
        animation: glowing 1000ms infinite;
    }

    /** modal contact **/
    .modal-title {
        color: #000;
        font-size: 35px;
        font-weight: 500;
        width: 100%;
        text-align: center;
    }

    .modal-body {
        color: #000;
    }

    .mod-table {
        font-weight: 500;
        font-size: 15px;
        border: 1px solid #dee2e6;
        margin-bottom: 0 !important;
    }

    .tbim {
        width: 50px;
        border-right: 1px solid #dee2e6;
        border-left: 1px solid #dee2e6;
    }

    .mod-table tbody tr td.tbtx {
        line-height: 50px;
        padding: 0 5px 0 10px !important;
        width: 170px;
    }

    .td-contact {
        padding: 2px !important;
    }
    /** modal contact **/
    

    .ul-top {
        margin-top: 10px;
        text-align: right;
    }

    .ul-top ul {
        padding-left: 0 !important;
        margin-bottom: 0 !important;
    }

    .ul-top ul li.sb {
        padding-right: 10px;
        padding-left: 10px;
    }

    .btn-info {
background-color: #bb6200 !important;
        border-color: #e4ff00 !important;
    }

    .btn-info:hover {
        background-color: #e4ff00 !important;
        border-color: #003875 !important;
        color:#000 !important;
    }
	
	.btn-info.focus, .btn-info:focus {
    	box-shadow: 0 0 0 0.2rem rgba(3, 125, 255, 0.58) !important;
	}
	
	header .menu-a h2 {
		color: #fff;
	}
    /** header **/

    /** body **/
    .container-mid {
        background-color: #000;
        box-shadow: 0px 0px 5px 0px #ffce34;
        margin-top: 15px;
        border-radius: 5px 5px 0 0;
    }

    .menu-mid {
        border-bottom: 2px solid #fff;
        margin: auto;
    }

    .ul-menu {
        padding: 0 !important;
        margin-bottom: 0;
    }

    .ul-menu li.cb:first-child {
        margin-left: 0;    
    }

    .ul-menu li.cb {
        margin-right: 8px;
        margin-left: 0px;
    }

    .ul-menu li.cb a {
        display: block;
        padding: 0 50.2px;
        color: #fff;
        font-weight: 500;
        font-size: 17px;
        height: 35px;
        line-height: 35px;
        border-radius: 5px 5px 0 0;
        transition: all .2s linear;
        -webkit-transition: all .2s linear;
        -moz-transition: all .2s linear;
        -o-transition: all .2s linear;
    }

    .ul-menu li.cb a:hover, .active, cb:hover {
        background: #ecd500;
        color: #000 !important;
        transition: all .2s linear;
        -webkit-transition: all .2s linear;
        -moz-transition: all .2s linear;
        -o-transition: all .2s linear;
    }

    .content-mid {
        padding: 0 20px;
    }

    h1.h1-content {
        font-size: 37px;
        color: #ffa600;
        margin-top: 5px;
    }

    h2.h2-content {
        font-size: 25px;
        color: #ffa600;
        margin-top: 5px;
    }

    h3.h3-content,  h3.h3-content a {
        font-size: 20px;
        color: #ffa600;
        margin-top: 5px;
    }

    h4.h4-content,  h4.h4-content a {
        font-size: 18px;
        color: #ffa600;
        margin-top: 5px;
    }

    .p-content {
        color: #fff;
        text-align: justify;
        margin-top: 10px;
    }
    /** body **/

    /** footer **/

    .img-play { 
        height: 85px;
        display: block;
        background: url(images/ico-gagak178.png) center 0%;
        background-repeat: no-repeat;
    }

    .img-play:hover {
        background-position: 145px -72px;
    }

    .img-gagak { 
        height: 85px;
        display: block;
        background: url(images/ico-gagak178.png) center 0%;
        background-repeat: no-repeat;
    }

    .img-gagak:hover {
        background-position: 145px -72px;
    }

    .p-footer{
        color: #fff;
        font-size: 12px;
        text-align: justify;
        padding: 0 15px;
    } 

    .copyright-bot {
        color: #fff;
        font-size: 12px;
        text-align: center;
        margin-bottom: 15px;
    }
    /** footer **/
	
	.mat1 {
		position: relative;
		top: 2px;
	}
	
	.mat2 {
		position: relative;
		top: 4px;
	}
	
	.mat3 {
		position: relative;
		top: 6px;
	}
	
	.card-body {
    	padding-top: 0 !important;
    	padding-bottom: 0 !important;
	}
	
	.card-body p {
		margin-bottom: 0 !important;
    	font-weight: 500 !important;
	}
	
	.dwnld:hover {
		background-color: #eee;
		transition: all .3s ease-in-out;
		opacity: 0.99;
		filter: alpha(opacity=99);
		-webkit-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
	}
	
	.zoom {
		transition: transform .2s;
	}
	
	.zoom:hover {
		-ms-transform: scale(1.1); /* IE 9 */
		-webkit-transform: scale(1.1); /* Safari 3-8 */
		transform: scale(1.1); 
	}
}

/* device media query */
@media (max-width: 768px) {
    /** header **/
    .alt-top {
        margin-top: 15px;
        font-family: 'Roboto', sans-serif;
		color: #fff;
    }

    .menu-top {
        margin-top: 50px;
    }

    .menu-a {
        font-family: 'Pridi', serif;
        font-size: 37px;
        margin-top: -40px;
        text-align: center;
    }
    
    .menu-p {
        font-size: 14px;
        color: #fff;
    }
    
    .clock-right {
        float: right;
        margin-top: 5px;
        color: #fff;
    }

    /** blinking text **/
    span.blink {
        color: #ff0000;
        animation: text-flicker 3s linear infinite;
        font-size: 19px;
        font-weight: 500;
    }

    #offset {
        animation: letter-flicker 2s linear infinite;
    }

    @keyframes text-flicker {
    0% {
        opacity:0.1;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }

    2% {
        opacity:1;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }
    8% {
        opacity:0.1;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }
    9% {
        opacity:1;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }
    12% {
        opacity:0.1;
        text-shadow: 0px 0px rgba(242, 22, 22, 1);
    }
    20% {
        opacity:1;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
    }
    25% {
        opacity:0.3;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
    }
    30% {
        opacity:1;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
    }

    70% {
        opacity:0.7;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
    }

    72% {
        opacity:0.2;
        text-shadow:0px 0px 29px rgba(242, 22, 22, 1)
    }

    77% {
        opacity:.9;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
    }
    100% {
        opacity:.9;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
    }
    }

    @keyframes letter-flicker {
    0% {
        opacity:0.1;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }
    2% {
        opacity:0.1;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }
    4% {
        opacity:1;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }


    19% {
        opacity:1;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }
    21% {
        opacity:0.1;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }
    23% {
        opacity:1;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }

    80% {
        opacity:1;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }
    83% {
        opacity:0.4;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }
    87% {
        opacity:1;
        text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }
    }
    /** blinking text **/  

    @keyframes glowing {
        0% { box-shadow: 0 0 -10px #dc3545; }
        40% { box-shadow: 0 0 20px #dc3545; }
        60% { box-shadow: 0 0 20px #dc3545; }
        100% { box-shadow: 0 0 -10px #dc3545; }
    }

    .button-glow {
        animation: glowing 1000ms infinite;
    }

    /** modal contact **/
    .modal-title {
        color: #000;
        font-size: 35px;
        font-weight: 500;
        width: 100%;
        text-align: center;
    }

    .modal-body {
        color: #000;
    }

    .mod-table {
        font-weight: 500;
        font-size: 15px;
        border: 1px solid #dee2e6;
        margin-bottom: 0 !important;
    }

    .tbim {
        width: 50px;
        border-right: 1px solid #dee2e6;
        border-left: 1px solid #dee2e6;
    }

    .mod-table tbody tr td.tbtx {
        line-height: 50px;
        padding: 0 5px 0 10px !important;
        width: 170px;
    }

    .td-contact {
        padding: 2px !important;
    }
    /** modal contact **/
    

    .ul-top {
        text-align: center;
    }

    .ul-top ul {
        padding-left: 0 !important;
        margin-bottom: 0 !important;
    }

    .btn-info {
background-color: #bb6200 !important;
        border-color: #e4ff00 !important;
    }

    .btn-info:hover {
        background-color: #e4ff00 !important;
        border-color: #003875 !important;
        color: #000 !important;
    }
	
	.btn-info.focus, .btn-info:focus {
    	box-shadow: 0 0 0 0.2rem rgba(3, 125, 255, 0.58) !important;
	}
    /** header **/

    /** body **/
    .container-mid {
        background-color: #000;
        box-shadow: 0px 0px 5px 0px #ffce34;
        margin-top: 15px;
        border-radius: 5px 5px 0 0;
    }

    .menu-mid {
        border-bottom: 2px solid #fff;
        margin: auto;
    }

    .ul-menu {
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 0 !important;
		margin-bottom: 0;
		text-align: center;
    }

    .ul-menu li.cb {
        margin-right: 0;
    }

    .ul-menu li.cb a {
        display: block;
        padding: 0 20px;
        color: #fff;
        font-weight: 500;
        font-size: 17px;
        height: 35px;
        line-height: 35px;
        transition: all .2s linear;
        -webkit-transition: all .2s linear;
        -moz-transition: all .2s linear;
        -o-transition: all .2s linear;
    }

    .ul-menu li.cb a:hover, .active, cb:hover {
        background: #007bff;
        color: #000;
        transition: all .2s linear;
        -webkit-transition: all .2s linear;
        -moz-transition: all .2s linear;
        -o-transition: all .2s linear;
    }

    .content-mid {
        padding: 0 20px;
    }

    h1.h1-content {
        font-size: 37px;
        color: #ffa600;
        margin-top: 5px;
    }

    h2.h2-content {
        font-size: 25px;
        color: #ffa600;
        margin-top: 5px;
    }

    h3.h3-content,  h3.h3-content a {
        font-size: 20px;
        color: #ffa600;
        margin-top: 5px;
    }
    
    h4.h4-content,  h4.h4-content a {
        font-size: 18px;
        color: #ffa600;
        margin-top: 5px;
    }


    .p-content {
        color: #fff;
        text-align: justify;
        margin-top: 10px;
    }
    /** body **/

    /** footer **/

    .img-play { 
        height: 85px;
        display: block;
        background: url(images/ico-gagak178.png) center 0%;
        background-repeat: no-repeat;
    }

    .img-play:hover {
        background-position: 60px -72px;
    }

    .img-gagak { 
        height: 85px;
        display: block;
        background: url(images/ico-gagak178.png) center 0%;
        background-repeat: no-repeat;
    }

    .img-gagak:hover {
        background-position: 60px -72px;
    }

    .p-footer{
        color: #fff;
        font-size: 12px;
        text-align: justify;
        padding: 0 15px;
    } 

    .copyright-bot {
        color: #fff;
        font-size: 12px;
        text-align: center;
        margin-bottom: 15px;
    }
    /** footer **/
	
	.card-body {
    	padding-top: 0 !important;
    	padding-bottom: 0 !important;
	}
	
	.card-body p {
		margin-bottom: 0 !important;
    	font-weight: 500 !important;
	}
	
	.dwnld:hover {
		background-color: #eee;
		transition: all .3s ease-in-out;
		opacity: 0.99;
		filter: alpha(opacity=99);
		-webkit-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
	}

    .review-container {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 8px;
    margin: 10px 8px;
    background: #67ff370f;
    color: #ffffff;
    font-size: 12px;
    }
	
	.zoom {
		transition: transform .2s;
	}
	
	.zoom:hover {
		-ms-transform: scale(1.1); /* IE 9 */
		-webkit-transform: scale(1.1); /* Safari 3-8 */
		transform: scale(1.1); 
	}
}
    .row-review {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    }
    .review-container { border: 1px solid #ccc;
    border-radius: 8px;
    padding: 8px;
    margin: 13px 8px;
    background: #67ff370f;
    color: #ffffff;
}
    .review-author { font-weight:700; margin-bottom:8px; }
    .review-rating { color:#e67e22; }