@font-face {
	font-family : 'Gilroy-Regular';
	font-style  : normal;
	font-weight : normal;
	src         : local('Gilroy-Regular'), url(assets/font/Gilroy-Regular.html) format('woff');
}

body {
	margin  : 0;
	padding : 0;
	width   : 100%;
}

body.no-scroll {
	overflow : hidden;
}

header {
	position : relative;
}

.sidenav {
	background-color           : #0B1128;
	border-bottom-right-radius : 20px;
	left                       : 0;
	overflow-x                 : hidden;
	position                   : fixed;
	top                        : 0;
	transition                 : 0.5s;
	width                      : 0;
	z-index                    : 99999;
}

.menu {
	margin-bottom : 100px;
	margin-top    : 10px;
}

.sidenav .side-link {
	background      : #10183C;
	border-bottom   : 1px #0B1128 solid;
	color           : #FFFFFF;
	font-family     : 'Gilroy-Regular', sans-serif;
	font-size       : 13px;
	padding         : 18px 18px 18px 42px;
	text-decoration : none;
	transition      : 0.3s;
	display         : flex;
	align-items     : center;
}

.sidenav .side-link:hover {
	background : #247DDA;
	color      : #FFFFFF;
}

.sidenav .side-link img {
	height   : 30px;
	position : relative;
	right    : 15px;
}

.sidenav .side-link:hover img {
	filter : brightness(5);
}

.sidenav .sidenavHeader {
	height     : 80px;
	padding    : 23px 0 0 33px;
	position   : relative;
	box-sizing : border-box;
}

.sidenav .sidenavHeader .closebtn {
	color           : #B6C0DC !important;
	font-size       : 45px;
	line-height     : 45px;
	display         : table;
	height          : 45px;
	z-index         : 99999;
	position        : absolute;
	right           : 30px;
	top             : 15px;
	text-decoration : none;
}

.logo {
	width     : 70%;
	max-width : 1200px;
	margin    : 73px auto;
}

.logo > a img {
	height : 50px;
}

.sidenavHeader .side-logo {
	height   : 50px;
	position : relative;
	display  : table;
}

.sidenavHeader .side-logo a img {
	height : 35px;
}

.fa {
	color    : #FFFFFF;
	left     : 30px;
	position : absolute;
	top      : 10px;
}

header > span {
	cursor    : pointer;
	font-size : 0;
}

section {
}

section {
	width: 100%;
	margin: 0 auto;
	display: inline-block;
	text-align: center;
}

.banner {
	width: 50%;
	margin: 0 auto;
	display: inline-block;
	text-align: center;
}

.remove-gap {
	grid-gap : 0;
}

.banner {
	cursor     : pointer;
	max-width  : 100%;
	min-width  : 300px;
	transform  : scale(1);
	transition : all 0.15s ease-out;
}

.banner:hover {
	max-width : 100%;
	transform : scale(1.05);
}

.banner img {
	max-width : 100%;
}

.alt-logo img {
	max-width : 100%;
}

.alt-logo {
	justify-content : center;
	margin-left     : auto;
	margin-right    : auto;
	max-width       : 100%;
}

.item-3 {
	display               : grid;
	font-size             : 13px;
	grid-template-columns : repeat(3, auto);
	justify-content       : center;
	margin-left           : auto;
	margin-right          : auto;
	max-width             : 1200px;
	width                 : 70%;
}

.kategori {
	position   : relative;
	transform  : scale(1);
	transition : all 0.15s ease-out;
	z-index    : 99;
}

.kategori:hover {
	transform : scale(1.05);
}

.kategori img {
	height : 100%;
	width  : 100%;
}

footer {
	border-top            : 1px solid rgba(151, 151, 151, .2);
	display               : grid;
	grid-template-columns : 1fr;
	justify-content       : center;
	margin-left           : auto;
	margin-right          : auto;
	margin-top            : 20px;
	max-width             : 1200px;
	width                 : 70%;
}

.footer-logo {
	margin : auto;
}

.footer-logo a img {
	height : 27px;
	margin : 36px 0;
}

.footer-link {
	display         : flex;
	flex-wrap       : wrap;
	justify-content : center;
	margin          : 0 auto 56px auto;
	max-width       : 1000px;
	background      : #151D41;
	border-radius   : 12px;
	padding         : 34px 0 0;
}

.footer-link a {
	color           : rgba(255, 255, 255, .8);
	font-family     : 'Gilroy-Regular', sans-serif;
	text-align      : center;
	text-decoration : none;
	margin          : 0 30px 34px 40px;
}

.copyright {
	color         : #fff;
	font-family   : 'Gilroy-Regular', sans-serif;
	text-align    : center;
	margin-bottom : 60px;
}

@media screen and (max-width : 720px) {
	header {
		background-color : #0B1128;
		display          : flex;
		height           : 56px;
		position         : relative;
	}

	.logo {
		margin          : 0;
		width           : 100%;
		display         : flex;
		justify-content : center;
		align-items     : center;
	}

	.logo a img {
		height : 35px;
	}

	header > span {
		cursor    : pointer;
		font-size : 30px;
	}

	section {
		display               : grid;
		font-size             : 13px;
		grid-template-columns : repeat(1, auto);
		margin                : 0 auto;
	}

	section:nth-of-type(n+2) {
		display : unset;
		margin: auto;
	}

	.banner {
		max-width : 100%;
		position  : relative;
		z-index   : 99;
	}

	.footer-link {
		display               : grid;
		text-align            : left;
		grid-template-columns : repeat(2, 1fr);
		padding               : 26px 50px;
		justify-items         : flex-start;
		row-gap               : 20px;
		align-items           : center;
	}

	.footer-link a {
		margin     : 0;
		text-align : left;
	}

	footer {
		max-width : 100%;
		width     : 100%;
	}

}

@media screen and (min-width : 320px) {
	.sidenav a {
		font-size : 18px;
	}
}


@media screen and (max-height : 450px) {
	.sidenav a {
		font-size : 18px;
	}

	section {
		display               : grid;
		grid-template-columns : repeat(3, auto);

	}
}

.sayilar .kirmizi {
	cursor: pointer;
	font-size: 16px;
	width: 60px;
	height: 60px;
	background-color: #bd1515;
	color: #fff;
	justify-content: center;
	text-align: center;
	border: none!important;
	border-bottom-color: transparent!important;
	-webkit-transition-duration: .4s;
	-moz-transition-duration: .4s;
	-ms-transition-duration: .4s;
	-o-transition-duration: .4s;
	transition-duration: .4s;
}
.sayilar .siyah {
	cursor: pointer;
	font-size: 16px;
	width: 60px;
	height: 60px;
	background-color: #000;
	color: #fff;
	justify-content: center;
	text-align: center;
	border: none!important;
	border-bottom-color: transparent!important;
	-webkit-transition-duration: .4s;
	-moz-transition-duration: .4s;
	-ms-transition-duration: .4s;
	-o-transition-duration: .4s;
	transition-duration: .4s;
}
.sayilar .yesil {
	cursor: pointer;
	font-size: 16px;
	width: 60px;
	height: 180px;
	background-color: #4f8c1c;
	color: #fff;
	justify-content: center;
	text-align: center;
	border: none!important;
	border-bottom-color: transparent!important;
	-webkit-transition-duration: .4s;
	-moz-transition-duration: .4s;
	-ms-transition-duration: .4s;
	-o-transition-duration: .4s;
	transition-duration: .4s;
}
.form-group input::placeholder{
	color:white;
}
.form-group input{
	color:white;
}
.form-group textarea::placeholder{
	color:white;
}
.form-group textarea{
	color:white;
}
.form-group p{
	color:white;
}
.heading h1{
	color:white;
}
input{
   width:97%;
   border-radius:10px;
   height:50px;
   color:black;
   font-size: 1.424rem;
   font-family:arial;
   
}




input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: black;
	opacity: 1; /* Firefox */
	font-size: 1.424rem;
	font-family:arial;
}


@media only screen and (max-width: 600px) {
	input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
		color: black;
		opacity: 1; /* Firefox */
		font-size: 18px;
		font-family:arial;
	}
  }



  @media (min-width: 1280px){
	
	.gifx{
		height: 125px;
	  }
}

@media only screen and (max-width: 600px) {
	.gifx{
		height: auto;
	  }
  }

.button-action, .button-bonus-infos {
	background-color: #397ae6;
	color: white;
}

button:not(:disabled) {
	cursor: pointer;
}
.button-default:hover {
	background-color: #397ae6;
	color: while;
}





.button-default  {
	position: relative;
	width: 100%;
	height: 5rem;
	border: none;
	box-sizing: border-box;
	font-size: 1.602rem;
	border-radius: 10px;
	transition-duration: .1s;
	transition-timing-function: cubic-bezier(0,0,.2,1);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

@media only screen and (max-width: 600px) {
	.button-default  {
		position: relative;
		width: 100%;
		height: 3rem;
		border: none;
		box-sizing: border-box;
		font-size: 1.602rem;
		border-radius: 10px;
		transition-duration: .1s;
		transition-timing-function: cubic-bezier(0,0,.2,1);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
  }

.fnt{
	font-family     : 'Gilroy-Regular', sans-serif;
}


.bomb{
	width: 80%;
    margin: auto;
}











#contact {
	margin-top: 50px;
	margin-bottom: 50px;
}

#contact .heading {
	text-align: center;
	padding-bottom: 30px;
}

#contact .heading h1 {
	font-weight: bold;
	font-size: 25.6px;
	text-transform: uppercase;
}

#contact .heading p {
	margin: 0;
	margin-top: 12px;
	color: #bfbfbf;
	font-size: 12.8px;
}

#contact .heading p a {
	transition: color 0.7s;
}

#contact .heading p a:hover {
	color: #f2ad26;
}

#contact .social {
	margin-top: 25px;
}

#contact .social li {
	display: inline-block;
	margin-right: 8px;
	margin-left: 8px;
}

#contact .form.info {
	padding: 15px;
	margin-bottom: 10px;
	background: #070f14;
	color: #f44336;
	font-weight: 500;
	font-size: 14px;
	text-align: center;
}

#contact .form {
	width: 100%;
	max-width: 50%;
	border-radius: 5px;
	padding: 25px;
	margin: 0 auto;
	background: #0c082c;
	padding-top: 40px;
}

@media only screen and (max-width: 600px) {
	#contact .form {
		width: 100%;
		max-width: 80%;
		border-radius: 5px;
		padding: 25px;
		margin: 0 auto;
		background: #0c082c;
		padding-top: 40px;
	}
  }

#contact .form-group {
	margin-bottom: 20px;
}

#contact .form-group p {
	text-transform: uppercase;
	font-size: 9.6px;
	margin-bottom: 5px;
}



#contact .form-group input {
	background: #112760;
	border-radius: 10px;
	width: 94%;
	padding: 10px;
	border: 0;
	cursor: text;
}


@media only screen and (max-width: 600px) {
	#contact .form-group input {
		background: #112760;
		padding: 10px 2px 10px 9px;
		width: 94%;
		padding: 10px;
		border: 0;
		cursor: text;
	}
  }



#contact .form-group textarea {
	background: #112760;
	border-radius: 10px;
	width: 97%;
	padding: 10px;
	border: 0;
	min-width: 97%;
	max-width: 97%;
	min-height: 75px;
	outline: 0;
	cursor: text;
}

@media only screen and (max-width: 600px) {
	#contact .form-group textarea {
		background: #112760;
		border-radius: 10px;
		width: 97%;
		padding: 10px 2px 10px 9px;
		border: 0;
		min-width: 97%;
		max-width: 97%;
		min-height: 75px;
		outline: 0;
		cursor: text;
	}
  }

#contact .submit:hover {
	background: #112760;
    transition: 0.15s all;
    color: white;
}

#contact .submit {
	font-size: 14.4px;
	font-weight: bold;
	background: #2671be;
	border: 1px solid #112760;
	color:white;
	text-align: center;
	width: 100%;
	padding: 17px;
	outline: 0;
	border-radius: 50px;
	transition: 0.6s all;
	cursor: pointer;
}

.xxlsx{
	margin:40px auto!important;
}

@media screen and (max-width: 720px){
	.logo {
		margin: 0;
		width: 100%;
		display: none;
		justify-content: center;
		align-items: center;
	}
	.footer-link{
		width:unset !important;
	}
	.footer-link a {
		text-align: center !important;
	}
	header{
		width: unset !important;
		height: 56px !important; 
		display: flex !important; 
		background: #941a2b !important; 
		padding-right: unset !important; 
		padding-left: unset !important; 
		margin-right: unset !important; 
		margin-left: unset !important; 
		top: unset !important;
	}
}
.sayilar table tr .yesil:hover,
.sayilar table tr .kirmizi:hover,
.sayilar table tr .siyah:hover {
	background-color: #3d3d3d!important;
	-webkit-transition-duration: .4s;
	-moz-transition-duration: .4s;
	-ms-transition-duration: .4s;
	-o-transition-duration: .4s;
	transition-duration: .4s;
}

	@media screen and (max-width: 1350px) {
		.kartal2{display:none !important;}
	}
	@media screen and (max-width: 1020px) {
		.uckar{margin: auto -100px auto !important;}
	}