/*
Description:
    Contains all the styles for the winning wheel page.
    
Verison History:
    2012-01-28, Douglas McKechie
    - Created based off earlier version.
    
    2015-09-26, Douglas McKechie
    - Minor updates for the 2.0 winwheel example.
*/

body
{
    font-family: arial;
	font-family: 'Josefin Sans', sans-serif;
}

/* Sets the background image for the wheel */
td.the_wheel
{
    background-image: url(./new-spins.png);
    background-position: center;
    background-repeat: no-repeat;background-size:contain;
}

/* Do some css reset on selected elements */
h1, p
{
    margin: 0;
}

div.power_controls
{
    margin-right:0px;
}

div.html5_logo
{
    margin-left:70px;
}

/* Styles for the power selection controls */
table.power
{
    background-color: #cccccc;
    cursor: pointer;
    border:1px solid #333333;
}

table.power th
{
    background-color: white;
    cursor: default;
}

td.pw1
{
    background-color: #6fe8f0;
}

td.pw2
{
    background-color: #86ef6f;
}

td.pw3
{
    background-color: #ef6f6f;
}

/* Style applied to the spin button once a power has been selected */
.clickable
{
    cursor: pointer;
}

/* Other misc styles */
.margin_bottom
{
    margin-bottom: 5px;
}


.header-logo .exigo-logo { margin-top: -50px; }
.header-logo { display: flex; justify-content: space-between; align-items: center; margin-bottom:auto;}
.main-section { background: url(./hacker-banner.jpg)no-repeat; background-position: center; background-size: cover; padding-top: 20px; padding-bottom: 20px; min-height: 100%; height: 100vh; display: flex; align-items: center; }
.main-section .container-fluid { display: flex; flex-direction: column; min-height: 100%; }
/*.main-section .logo{margin-bottom:auto;}*/
.container-fluid{max-width:1600px;width:100%;padding-left:25px;padding-right:25px;}
.main-section table{width:100%;}
.main-section canvas { position: relative; top: -49px; left: 0px; }
.main-section table .power_controls h3 { margin: 0; color: #FFF; font-family: 'Josefin Sans', sans-serif; font-size: clamp(28px, 2.875vw ,46px); font-style: normal; font-weight: 600; line-height: normal; margin-bottom:15px;}
.main-section table .power_controls h3 span { color: #3BABDC;text-transform:uppercase; }
.main-section table .power_controls p { color: #FFF; font-family: 'Josefin Sans', sans-serif; font-size: clamp(18px, 1.438vw ,23px); font-style: normal; font-weight: 500; line-height: clamp(25px, 1.688vw, 27px ); padding-right:30px;}

.main-section table ul.spin-btn { display: flex; list-style: none; padding: 0; margin: 0;margin-top:50px; justify-content: space-between;}
.main-section table ul.spin-btn li {margin-right:20px;text-align:center;}
.main-section table ul.spin-btn li span.rest { color: #FFF; font-family: 'Josefin Sans', sans-serif; font-size: clamp(16px, 1.125vw,18px); font-style: normal; font-weight: 500; line-height: clamp(22px, 1.688vw , 27px); padding-top: 10px; display: flex; justify-content: center; }
.main-section table ul.spin-btn li:last-child{margin-right:0px;}
.main-section table ul.spin-btn li a { border-radius: 60px; background: linear-gradient(180deg, #3BABDC 0%, #BFDCF2 46.88%, #3FACDC 100%); color: #000; font-family: 'Josefin Sans', sans-serif; font-size: clamp(22px, 2.440vw ,40px); font-style: normal; font-weight: 700; text-transform: uppercase; display: flex; align-items: center; padding: 20px 30px; line-height: normal; text-decoration: none; position: relative; }
.main-section table ul.spin-btn li.spin-buttons a { padding: 20px 60px; }
.main-section table ul.spin-btn li a:before { content: ""; position: absolute; inset: 0; border-radius: 60px; padding: 5px; background: linear-gradient(180deg, #BFDCF2 0%, #B6D8F0 46.88%, #00719F 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; }
.main-section table ul.spin-btn li a span { position: relative; bottom: -3px;display: flex; align-items: center; }
.main-section table ul.spin-btn li a span img { margin-left: 5px; margin-top: -10px; max-width: 35px; }
.copyright { margin-top: auto;text-align:center; }
.copyright p, .copyright p a { color: #FFF; font-family: 'Josefin Sans', sans-serif; font-size: clamp(16px, 1.063vw,17px); font-style: normal; font-weight: 400; line-height: normal; text-decoration: none; }
.copyright p:last-child{padding-top:1px;}
.main-section table td.the_wheel { position: relative; }
.main-section table td.the_wheel::before { content: ""; display: block; position: absolute; background: url(./green-arw.png)no-repeat; height: 33px; width: 85px; top: 7px; left: 3px; right: 0; margin: auto; z-index: 9; background-position: center; background-size: cover; }
.main-section ul.spin-btn.destop-none{display:none;}
.main-section table ul.spin-btn li.spin-buttons{cursor:pointer;}
.copyright p.site-name a { color: rgba(255,255,255,0.6); }

/*pop-up-css*/
.model-pop .fade.in{background:rgba(0,0,0,0.6);    overflow-y: hidden;}
.model-pop .modal-dialog { display: flex; min-height: 100%; align-items: center; margin: 10px auto; }
.model-pop .modal-dialog .modal-content { border-radius: 30px; background: #3FACDC; box-shadow: none!important; border: 0px none; padding-top: 40px; padding-bottom: 40px; }
.model-pop .modal-dialog .modal-content .modal-header { border: 0; padding: 0; }
.model-pop .modal-dialog .modal-content .modal-header h2, .model-pop  .modal-body h2 { color: #FFF; text-align: center; font-family: 'Josefin Sans', sans-serif; font-size: clamp(28px, 2.500vw ,40px); font-style: normal; font-weight: 700; line-height: normal; text-transform: capitalize; margin-bottom:30px;margin-top:0px;display:inline-block;}
.model-pop .modal-dialog .modal-content .modal-header h4 { color: #FFF; text-align: center; font-family: 'Josefin Sans', sans-serif; font-size: clamp(26px, 2.438vw ,39px); font-style: normal; font-weight: 700; line-height: normal; text-transform: capitalize;padding-left: 40px; padding-right: 40px; margin-bottom:10px;}

.model-pop  .modal-body h2{margin-bottom:0px;padding:15px 40px;background:#3B3B3B;display:block;margin-top:10px;}
.model-pop  .modal-body p { color: #FFF; text-align: center;font-family: 'Josefin Sans', sans-serif; font-size: clamp(17px, 1.250vw ,20px); font-style: normal; font-weight: 400; line-height: clamp(20px, 1.563vw ,25px); padding-left:40px;padding-right:40px;}
.model-pop  .modal-body p a{color:#000;text-decoration:none;}
.model-pop  .modal-body p{padding-top:10px;}
.model-pop .modal-footer{padding:0px;border:0px;text-align:center;display: flex; justify-content: center;margin-top:15px;}
 .model-pop .modal-content .modal-body{padding-left:0px;padding-right:0px;padding-top:0px;} 
.modal-footer a { border-radius: 60px; background: linear-gradient(180deg, #1D1D1D 0%, #4F4F4F 46.88%, #4E4E4E 100%); color: #FFF!important; font-family: 'Josefin Sans', sans-serif; font-size: clamp(18px ,1.375vw ,22px); font-style: normal; font-weight: 700; line-height: normal; padding: 20px 30px; text-decoration: none!important; position: relative; }
.modal-footer a:before { content: ""; position: absolute; inset: 0; border-radius: 60px; padding: 5px; background: linear-gradient(180deg, #606060 0%, #606060 46.88%, #1d1d1d 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; }
.model-pop .modal-content .modal-header, .model-pop .modal-content .modal-footer{padding-left:40px;padding-right:40px;}
.modal-header .close { margin-top: -2px; opacity: 1!important; position: relative; top: -45px; right: -12px; }


/*responsive*/
@media(max-width:1800px){
/*.sppiner-board{margin:0px 0 30px;}*/
.header-logo .hacker-logo img {max-width: 350px;}

}

@media ( min-width:1301px ) and ( max-width:1700px) {
.header-logo .hacker-logo img { max-width: 230px; }
.header-logo .exigo-logo img { max-width: 110px; }
.main-section table td.the_wheel { position: relative; height: 462px; width: 310px;}
.main-section table td.the_wheel canvas { width: 360px; height: 360px; top: -42px; }	
.main-section table ul.spin-btn{margin-top:30px;}
.sppiner-board{margin-bottom:0px;}
.main-section table td.the_wheel::before{width: 70px;background-size:70px;top:4px;} 
.header-logo .exigo-logo { margin-top: -15px; }
}

@media(max-width:1300px){
.sppiner-board{margin:0px 0 30px;}
.main-section{height:auto;}
.header-logo .hacker-logo img { max-width: 230px; }
.header-logo .exigo-logo img { max-width: 100px; }
.header-logo .exigo-logo { margin-top: -15px; }
.model-pop .fade.in{overflow-y: auto;}
}




@media(max-width:991px){
/*.main-section .hacker-logo img{max-width:400px;}*/
.main-section table .power_controls p br{display:none;}
.col-md-6 { width: 100%; }	
.main-section table .col-md-6 { width: 100%; float: left; }

.main-section{height:auto;}
.main-section .header-logo { text-align: center; margin-bottom:25px; }
.main-section .sppiner-board .power_controls { max-width: 500px; margin: auto; text-align: center; margin-bottom: 20px; }
.main-section canvas { top: 23px; left: 0px; }
.copyright{margin-top:20px;}
.main-section table .power_controls ul.spin-btn{justify-content: center;}
.sppiner-board{margin:0px 0;}
.main-section ul.spin-btn.destop-none{display:flex;max-width:600px;}
.main-section ul.spin-btn.mobile-none{display:none;}
.main-section canvas, .main-section table td.the_wheel{margin-bottom:120px;}
.main-section table ul.spin-btn li a{font-size:35px;} 
.main-section table .power_controls p{padding-right:0px;}
.main-section table ul.spin-btn li span.rest{font-size:15px;}
.copyright p, .copyright p a{font-size:15px;}
}

@media(max-width:767px){
.main-section { background: url(./moble-bnaner.jpg)no-repeat; background-position: center; background-size: cover;padding-top:10px; padding-bottom:10px;}
.modal-dialog{max-width:500px;padding-left:20px;padding-right:20px;}
.model-pop .modal-content .modal-header, .model-pop .modal-content .modal-body, .model-pop .modal-content .modal-footer { padding-left: 20px; padding-right: 20px; }
.main-section table ul.spin-btn li { width: 100%; margin-right: 0px; margin-bottom: 20px; justify-content: center; }
.main-section canvas, .main-section table td.the_wheel{margin-bottom:250px;}	
.main-section ul.spin-btn.destop-none { flex-wrap: wrap; margin-top: -80px; justify-content: center; margin-bottom: 40px; }
.main-section table ul.spin-btn li a { font-size: 30px; padding: 16px 40px; justify-content:center;}
.main-section ul.spin-btn.destop-none{max-width:300px;}
/*.main-section table .power_controls p{display:none;}*/
.main-section table .power_controls h3 span{text-transform:capitalize;color:#fff;}
.main-section table .power_controls h3{font-size:30px;line-height:34px;}
.main-section .exigo-logo img { max-width: 100px; }
.model-pop .modal-content .modal-body{padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px;}
.model-pop .modal-body p{padding-left:10px;padding-right:10px;font-size:15px;}
.model-pop .modal-dialog .modal-content{padding-top:20px;padding-bottom:20px;border-radius:10px;}
.modal-footer a{font-size:15px;padding:20px 20px}
.model-pop .modal-body h2{font-size:24px;line-height:28px;padding:10px 20px; text-transform:none!important;} 
.model-pop .modal-dialog .modal-content .modal-header h4{padding-left:10px;padding-right:10px;font-size:24px;margin-bottom:0px;}
.modal-header .close{margin-top:0px;top: -35px;}
.copyright{margin-top:0px;}

}

@media(max-width:640px){
.main-section table .power_controls h3 br{display:none;}
.main-section .hacker-logo img { max-width: 330px; }
.copyright { margin-top: 0px; }	
.main-section table ul.spin-btn li:last-child{margin-bottom:0px;}
.header-logo .exigo-logo { margin-top: -30px; }


}

@media(max-width:480px){
.main-section canvas { width: 304px; height: 304px; top: 24px; position: relative; left: -12px; }
.main-section table td.the_wheel { position: relative; width: 308px; background-size: 100% 100%; height: 418px; }
.copyright p, .copyright p a{font-size:14px;}
.main-section canvas, .main-section table td.the_wheel { margin-bottom: 210px; }
.main-section ul.spin-btn.destop-none {margin-top:-95px;}
.main-section table td.the_wheel::before{background-size:50px;top:0px;left:0px;}
.main-section canvas { top: 16px; }
.main-section table td.the_wheel {height: 408px; }
.main-section .header-logo {flex-wrap: wrap; justify-content: center; }
.main-section .header-logo .hacker-logo{margin-bottom:10px;}
.main-section .header-logo{margin-bottom:20px;}
.main-section .exigo-logo img { max-width: 130px; }
.main-section ul.spin-btn.destop-none{margin-bottom:0px;}
.main-section table .power_controls p{font-size:15px;line-height:22px;}
.main-section table .power_controls h3 { font-size: 22px; line-height: 28px; }
.main-section table ul.spin-btn li a{font-size:24px;}
.main-section table tr { text-align: center; display: flex; flex-direction: column; justify-content: center; }
.main-section table tr td.the_wheel { margin-left: auto; margin-right: auto; }
.header-logo .exigo-logo { margin-top: -0px; }
}