/* || FONT STYLES */
@font-face {
    font-family: "AdelleSans";
	src: url(../fonts/AdelleSans/AdelleSans-Regular.woff2) format('woff2'),
		 url(../fonts/AdelleSans/AdelleSans-Regular.woff) format('woff'),
		 url(../fonts/AdelleSans/AdelleSans-Regular.svg) format('svg'),
		 url(../fonts/AdelleSans/AdelleSans-Regular.eot) format('eot');
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "AdelleSans";
	src: url(../fonts/AdelleSans/AdelleSans-Bold.woff2) format('woff2'),
		 url(../fonts/AdelleSans/AdelleSans-Bold.woff) format('woff'),
		 url(../fonts/AdelleSans/AdelleSans-Bold.svg) format('svg'),
		 url(../fonts/AdelleSans/AdelleSans-Bold.eot) format('eot');
    font-style: normal;
    font-weight: bold;
}

@font-face {
    font-family: "AdelleSans";
	src: url(../fonts/AdelleSans/AdelleSans-Heavy.woff2) format('woff2'),
		 url(../fonts/AdelleSans/AdelleSans-Heavy.woff) format('woff'),
		 url(../fonts/AdelleSans/AdelleSans-Heavy.svg) format('svg'),
		 url(../fonts/AdelleSans/AdelleSans-Heavy.eot) format('eot');
    font-style: normal;
    font-weight: 900;
}

@font-face {
    font-family: "AdelleSans";
	src: url(../fonts/AdelleSans/AdelleSans-Italic.woff2) format('woff2'),
		 url(../fonts/AdelleSans/AdelleSans-Italic.woff) format('woff'),
		 url(../fonts/AdelleSans/AdelleSans-Italic.svg) format('svg'),
		 url(../fonts/AdelleSans/AdelleSans-Italic.eot) format('eot');
    font-style: italic;
    font-weight: normal;
}

@font-face {
    font-family: "AdelleSans";
	src: url(../fonts/AdelleSans/AdelleSans-Light.woff2)
		 url(../fonts/AdelleSans/AdelleSans-Light.woff)
		 url(../fonts/AdelleSans/AdelleSans-Light.svg)
		 url(../fonts/AdelleSans/AdelleSans-Light.eot);
    font-style: normal;
    font-weight: 300;
}

/* || SET FONT FAMILY */
h5, h3, input, a, button {
	font-family: "AdelleSans", sans-serif;
	font-weight: 300;
}
#jumbotron, #displayLastDraw, #myTab {
	font-family: "AdelleSans", sans-serif;
	font-weight: 300;
}



/* || GENERAL STYLES */

body {
	/* background-image: linear-gradient(90deg, #0e714a, #2fab64); */
	background: #f0f1ea;
}

.jumbotron-fluid {
	background-image: url("../img/paflatta_background.jpg");
	background-position:center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
  }



a {
	color:#4B5253;
}

#helpdesk a:link, #helpdesk a:visited {
	color:#25ac61;
	white-space: nowrap;
	overflow:auto;
	text-decoration: none;
}


.numberCircleText {
	background-image: url(../img/paflatta_ball.png);
	background-repeat:no-repeat;
	background-size:18vw,contain;
	background-position:center;
	height:18vw;
	width:18vw;
	color:#036440;
	opacity: 95%;
	font-size: 9vw;
	font-weight: 900;
	text-align: center;
}

/* || UTILITIES - override bootstrap */

.banner-text {
	font-weight: bold;
	text-shadow: 0px 2px 3px rgb(34, 40, 41, 0.16);
	font-size: 28px;
}

.banner-jackpott-text {
	text-shadow: 0px 3px 6px rgb(34, 40, 41, 0.16);
	font-weight: 900;
	font-size: 72px;
}

/* override nav-tabs look */
/* add line under nav-bar */
.nav-tabs {
	border-bottom: 1px solid #dee2e6;
}

/* remove border around active nav-tab */
.nav-tabs .nav-link {
	border: 0px solid transparent;
	border-radius: 0;
	color: #4B5253;
	font-weight: bold;
	padding: 0.9rem;
}

/* custom active nav-tab, green bottom-border */
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #25ac61;
	border-bottom: 4px #25ac61 solid;
	/* box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2); */
}

/* || SITEWIDE */
/* overflow tab-row */
.nav {
	display: -webkit-box;
  }

.nav-tabs {
	overflow-x: auto;
	overflow-y:hidden;
	flex-wrap: nowrap;
 }
.horizontal-scroll .nav-tabs .nav-link {
   white-space: nowrap;
}

/*  */
.list-group-item {
	border:none;
}

.main-content {
	box-shadow: 0 4px 2px -2px rgb(34, 40, 41, 0.16);
}

.content-overflow {
	position: relative;
}

.category {
	font-weight: 400;
}

.sub-category {
	font-weight: 300;
}

.monthly-winner {
	width: 284px;
	left: 25%;
}

.clover-text {
	top: 20px;
	left: 75px;
}

.clover-left {
	left: -30px;
}

.clover-right {
	right: -30px;
}

.btn-success, .btn-success:hover {
    color: #fff;
    background-color: #25ac61;
	border-color: #25ac61;
	border-width: 2px;
}

.btn-outline-success, .btn-outline-success:hover {
    color: #25ac61;
    background-color: transparent;
    background-image: none;
	border-color: #25ac61;
	border-width: 2px;
}

/* input boxes and buttons rounded corners */
.input-rounded, .button-rounded {
	border-radius: 2rem;
	height: 2.5rem;
}

.input-rounded {
	height: 3rem;
	border: 1px solid #4B5253;
	text-indent: 15px;
}

.button-rounded {
	width: 9rem;
}

/* shadow on inputs and btn:s */
.box-shadow {
	/* padding: 5px; */
	box-shadow: 0px 3px 4px rgb(34, 40, 41, 0.16);
}

/* Add width to btn-class */
/* Add width to input-form */
.min-width {
	width: 90vw;
}

.draw-text {
	color:#4B5253;
	letter-spacing: 0.05rem;
}

.small {
	color:#6b6f6f;
	font-size:3.5vw;
}

.tab-pane {
	min-height:60vh;
}

/* || RESPONSIVE STYLES */

/* Extra small devices (portrait phones, less than 576px 
No media query since this is the default in Bootstrap */

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	.numberCircleText {
		background-size:12vw,contain;
		height:12vw;
		width:12vw;
		font-size: 6vw;
	}

	.min-width {
		width: 60vw;
		/* max-width: 484px; */
		/* height: 3rem; */
	}

	.small {
		color:#6b6f6f;
		font-size:medium;
	}

}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	/* .numberCircleText {
		background-size:18vh,contain;
		height:18vh;
		width:18vh;
		font-size: 8vh;
	} */

	img.min-width {
		width:600px;
		height: auto;
	}

	.banner-text {
		font-size: 48px;
	}
	
	.banner-jackpott-text {
		font-size: 108px;
	}

}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	#logo {
		max-width:800px;
	}


}

/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.numberCircleText {
		background-size:140px,contain;
		height:140px;
		width:140px;
		font-size: 65px;
		padding-top: 10px;
	}
	.min-width {
		width: 700px;
		height: 3rem;
	}


}