/*
 *
 * Enes GÜL CSS
 *
 * @author Enes GÜL
 * @version 1.1
 * @inst @enesgl
 *
 *
 */

body{
background-image: url('../img/backgroundsi.jpg');

}

/* EKLENTİLERİM */
div.ustsabit {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
	height: 50px;
    padding:15px;
    background-color: #34495e;
z-index:2
}

div.altsabit {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 50px;
    padding:15px;
    background-color: #34495e;
	z-index:2
}
div.altsabitstep {
    position: fixed;
    bottom: 5px;
    width: 100%;
    padding:5px;
	background-color:#000000;
    opacity:0.8;
    filter:alpha(opacity=70);
	z-index:2
}
div.altsabitstep3 {
    position: fixed;
    bottom: 0px;
    width: 100%;
    padding:25px;
	background-color:#000000;
	z-index:3
}
div.altsabitstepsag {
    position: fixed;
    bottom: 10px;
    right: 0px;
    width: 30%;
    padding:15px;


	z-index:3
}
div.step {
    width: 100%;
    padding:5px;
	background-color:#000000;
    opacity:0.8;
    filter:alpha(opacity=70);
	z-index:2
}
div.banka {
	text-align: center !important;
	left: 25%;
	width: 50%;
    position: fixed;
    top: 45px;
    padding:5px;
	background-color:#34495e;
	z-index:2;
	color: white;
font-size: 10px;
border-radius: 5px;

}

.solayasla
{
float: left;
color: white;
font-size: 11px;
}

.solayaslastep
{
float: left;
color: white;
font-size: 10px;
}
.sagayasla
   {
float: right; 
color: white;
font-size: 11px;

}
.bosluk {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  padding-bottom: 20px;
  margin-right: auto;
  margin-left: auto;
}

/* EKLENTİLERİM */












/* TABLO İÇİ */
.soltablo30
{

float: left;
color: white;
font-size: 9px;
width:27%;
}
.soltablo40
{

float: left;
color: white;
font-size: 10px;
width:38%;
}
.soltablo50
{

float: left;
color: white;
font-size: 10px;
width:49%;
}
.soltablo60
{

float: left;
color: white;
font-size: 12px;
width:59%;
}
.soltablo100
{

float: left;
color: white;
font-size: 10px;
width:100%;
}

.sagtablo20
{
float: right;
color: white;
font-size: 9px;
width:22%;
}
.sagtablo40
{
float: right;
color: white;
font-size: 10px;
width:40%;
}
.sagtablo50
{
float: right;
color: white;
font-size: 10px;
width:50%;
}
.sagtablo60
{
float: right;
color: white;
font-size: 10px;
width:60%;
}

.soltablochat
{

float: left;
color: white;
font-size: 8px;
}
.sagtablochat
{

float: left;
color: white;
font-size: 10px;
width:90%;
}



/* TABLO İÇİ */












/* MENÜ */

nav {
	margin: 0px auto 0;
	position: fixed;

	left: 0px;
	width: 100%;
	height: 30px;
	background-color: #34495e;
	
	font-size: 0;
}
nav a {
	line-height: 20px;
	height: 100%;
	font-size: 10px;
	display: inline-block;
	position: relative;
	z-index: 1;
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	color: white;
	cursor: pointer;
	text-decoration: none;
}
nav a:hover{
color: black;
	text-decoration: none;
}


nav .animation {
	position: absolute;
	height: 100%;
	top: 0;
	z-index: 0;
	transition: all .5s ease 0s;
	text-decoration: none;
}
a:nth-child(1) {
	width: 25%;
	
}
a:nth-child(2) {
	width: 25%;
}
a:nth-child(3) {
	width: 25%;
}
a:nth-child(4) {
	width: 25%;
}
/* MENÜ */











































.form-control{
    background:#1a1a1a;
    color:gray;
    border:1px solid #000;
    box-shadow: #000 1px 1px 5px;
}

.form-control:hover{
    background:#1a1a1a;
    color:gray;
    border:1px solid #000;
    box-shadow: #000 1px 1px 5px;
}

.form-control:focus{
    background:#1a1a1a;
    color:gray;
    border:1px solid #000;
    box-shadow: #000 1px 1px 5px;
}

.gray, .gray:hover, .gray:focus{
    color: #474747;
}

.lightgray, .lightgray:hover, .lightgray:focus{
    color: #616161;
}

.lightlightgray, .lightlightgray:hover, .lightlightgray:focus{
    color: #979797;
}

.btn-danger{
    background: rgb(52,0,0);
    background: linear-gradient(0deg, #340000 0%, #d20808 100%);
    border-color:transparent;
    border-bottom:1px solid #340000;
}

.btn-danger:hover{
    background: rgb(52,0,0);
    background: linear-gradient(0deg, #340000 0%, #e70e0e 100%);
    border-color: transparent;
    border-bottom:1px solid #340000;
}

.btn-danger:focus{
    background: rgb(52,0,0);
    background: linear-gradient(0deg, #340000 0%, #bb0707 100%);
    border-color: transparent;
    border-bottom:1px solid #340000;
    box-shadow: 0 0 0 0.2rem transparent;
}

.btn-danger2{
    background: #161616;
    background: linear-gradient(0deg, #161616 0%, #4d4d4d 100%);
    border-color:transparent;
    border-bottom:1px solid #161616;
}

.btn-danger2:hover{
    background: #161616;
    background: linear-gradient(0deg, #161616 0%, #6b6b6b 100%);
    border-color:transparent;
    border-bottom:1px solid #161616;
}

.btn-danger2:focus{
    background: #161616;
    background: linear-gradient(0deg, #161616 0%, #313131 100%);
    border-color:transparent;
    border-bottom:1px solid #161616;
}
.btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active, .show > .btn-danger.dropdown-toggle{
    background-color: transparent;
    border-color: transparent;
    border-bottom:1px solid #161616;
}

.btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-danger.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem transparent;
}

.serit{
    
    color: lightgray;
    padding: 5px;
}
















































.dgm{
	background-color: #ddd;
	color: #fff;
	padding: 2px;
	border: 1px solid #aaa;
	border-radius: 3px;
	display: inline-block;
	cursor: pointer;
}

.dgm:hover,.dgm:focus{
	text-decoration: none;
	color: #fff;
}

/* Düğme Radius Değerleri */
.dgm-rad-50{
	border-radius: 50px;
}

.dgm-rad-10{
	border-radius: 10px;
}

.dgm-rad-5{
	border-radius: 5px;
}

.dgm-rad-0{
	border-radius: 0px;
}

/* Düğme Boyutları  */
.dgm-buyuk{
	padding: 10px;
}

.dgm-orta{
	padding: 5px;
}

.dgm-kucuk{
	padding: 1px;
}

.dgm-genis{
	width: 100%;
	text-align: center;
}

/* Kırmızı */
.dgm-kirmizi{
	background-color: #e84c3d;
	border: 1px solid #c1392d;
}

.dgm-kirmizi:hover{
	background-color: #d94335;
	border: 1px solid #c1392d;
}

.dgm-kirmizi:focus{
	background-color: #c1392d;
	border: 1px solid #c1392d;
}
/* Mavi */
.dgm-mavi{
	background-color: #3297db;
	border: 1px solid #297fb8;
}

.dgm-mavi:hover{
	background-color: #2f8bc9;
	border: 1px solid #297fb8;
}

.dgm-mavi:focus{
	background-color: #297fb8;
	border: 1px solid #297fb8;
}
/* Sarı */
.dgm-sari{
	background-color: #f1c50e;
	border: 1px solid #f39c11;
}

.dgm-sari:hover{
	background-color: #e1b80c;
	border: 1px solid #f39c11;
}

.dgm-sari:focus{
	background-color: #f39c11;
	border: 1px solid #f39c11;
}
/* Yeşil */
.dgm-yesil{
	background-color: #2dcc70;
	border: 1px solid #27ae61;
}

.dgm-yesil:hover{
	background-color: #2bbc68;
	border: 1px solid #27ae61;
}

.dgm-yesil:focus{
	background-color: #27ae61;
	border: 1px solid #27ae61;
}
/* Mor */
.dgm-mor{
	background-color: #9a59b5;
	border: 1px solid #8d44ad;
}

.dgm-mor:hover{
	background-color: #8d51a6;
	border: 1px solid #8d44ad;
}

.dgm-mor:focus{
	background-color: #8d44ad;
	border: 1px solid #8d44ad;
}
/* Turuncu */
.dgm-turuncu{
	background-color: #e77e22;
	border: 1px solid #d25400;
}

.dgm-turuncu:hover{
	background-color: #d8761f;
	border: 1px solid #d25400;
}

.dgm-turuncu:focus{
	background-color: #d25400;
	border: 1px solid #d25400;
}
/* Gri */
.dgm-gri{
	background-color: #93a5a5;
	border: 1px solid #7e8c8d;
}

.dgm-gri:hover{
	background-color: #889797;
	border: 1px solid #7e8c8d;
}

.dgm-gri:focus{
	background-color: #7e8c8d;
	border: 1px solid #7e8c8d;
}
/* Siyah */
.dgm-siyah{
	background-color: #1e1e1e;
	border: 1px solid #1e1e1e;
	color: #fff;
}

.dgm-siyah:hover{
	background-color: #1e1e1e;
	border: 1px solid #1e1e1e;
}

.dgm-siyah:focus{
	background-color: #1e1e1e;
	border: 1px solid #1e1e1e;
}
/* Beyaz */
.dgm-beyaz{
	background-color: #ecf0f1;
	color: #1e1e1e;
	border: 1px solid #bec3c7;
}

.dgm-beyaz:hover{
	background-color: #e0e4e5;
	color: #1e1e1e;
	border: 1px solid #bec3c7;
}

.dgm-beyaz:focus{
	background-color: #bec3c7;
	color: #1e1e1e;
	border: 1px solid #bec3c7;
}
/* Düğmeler - Bitiş */


/* Safari 4.0 - 8.0 */
@-webkit-keyframes ani-don-sag {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
	}
}
/* Standard syntax */
@keyframes ani-don-sag {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
	}
}

/* Form / input - Başla */
input[type=text], input[type=password], input[type=submit], textarea, select{
	
	color: #000;
}

input[type=submit]{
	color: #fff;
}

.yazi-kutu{
	width: 100%;
	padding: 5px;
	border: 1px solid #ddd;
	border-radius: 5px;
}

.yazi-kutu:hover,.yazi-kutu:focus{
	border: 1px solid #3297db;
}
/* Form / input - Bitiş */

/* Antinguntin - Başla */
.padd{
	padding: 5px;
}

.marg{
	margin: 5px;
}

.disb{
	display: block;
}

.disib{
	display: inline-block;
}

.sol{
	text-align: left;
}

.orta{
	text-align: center;
}

.sag{
	text-align: right;
}

.yasla{
	text-align: justify;
}
/* Antinguntin - Bitiş */








/* stepler */

/********************************************* Google Fonts **/

@import url('https://fonts.googleapis.com/css?family=Anonymous+Pro');

/********************************************* Global **/


.line {
    position: relative;
    top: 50%;
    width: 24em;
    margin: 0 auto;
    border-right: 2px solid rgba(255, 255, 255, 0.75);
    font-size: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);
}

/********************************************* Animation **/

.anim-typewriter {
    animation: 
        typewriter 4s steps(40) 1s 1 normal both,
        blinkTextCursor 500ms steps(40) infinite normal;
}

@keyframes typewriter {
    from {
        width: 0;
    }
    to {
        width: 16em;
    }
}

@keyframes blinkTextCursor {
    form {
        border-right-color: rgba(255, 255, 255, 0.75);
    }
    to {
        border-right-color: transparent;
    }
}






























/* ZekiCan.Net Renkli Kutu Yapımı */
.esnek-kutum {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
	
}

.enes-kutum-gri {
  flex: 1;
font-size:11PX;
  max-width:32%;
  padding: 10px;
  margin:1%;
  flex-shrink:1;
  flex-basis:31%;
  color:black;
  box-sizing:border-box;
 background: linear-gradient(#fff5ee,#c0c0c0);
    opacity:1.9;
    filter:alpha(opacity=10);
}

.enes-kutum-kirmizi {
  flex: 1;
font-size:11PX;
  max-width:32%;
  padding: 5px;
  margin:1%;
  color:black;
  flex-shrink:1;
  flex-basis:31%;
  box-sizing:border-box;
 background: linear-gradient(#fffaf0,#b22222);
    opacity:1.1;
    filter:alpha(opacity=10);
}



.enes-kutum-mavi {
  flex: 1;
  color:white;
font-size:13PX;
  max-width:48%;
  padding: 5px;
  margin:1%;
  flex-shrink:1;
  flex-basis:48%;
  box-sizing:border-box;
 background: linear-gradient(#34495f,#34495e);
    opacity:1.1;
    filter:alpha(opacity=10);
}

.ortala {
	margin:auto;
	width: 75%;
}


.enes-kutum-araba {
  flex: 1;
font-size:11PX;
color:black;
  max-width:32%;
  padding: 5px;
  margin:1%;
  flex-shrink:1;
  flex-basis:31%;
  box-sizing:border-box;

}