/* Vinton Yazılım Kurumsal Tema
	
*Body
*Üst
*Slayt
*Orta
*Hizmetler
*Alt
*sayfa
*Detaysayfa
*Galeri
*Genel
*Form
*Kutular
*Renkler
*Font Size
*Modal

*/

@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

body {margin:0px auto; font-family: 'Roboto', sans-serif; font-size: 14px; line-height: 24px; color:#444444;}
.ust {width:100%; height:120px; margin:0px auto; border-bottom:#eee 1px solid;}
.ust .iletisim {width:100%; height:40px; background-color:#2f2f2f;}
.ust .iletisim li {width:11%; height:20px; line-height:20px; padding-left:12px; margin-top:10px; float:left; border-right:#999 1px solid; list-style-type:none; color:#fff;}
.ust .iletisim .talep {width:10%; height:30px; line-height:30px; margin:5px; float:right; text-align:center; border-radius:5px; cursor:pointer; background-color:#E60000; color:#fff;}
.ust .logomenu {width:100%; height:80px;}
.ust .logomenu .logo {width:30%; height:70px; padding-top:5px; float:left;}
.ust .logomenu .logo img {height:70px;}
.ust .logomenu .menu {width:70%; float:right; text-align:right;}
.ust .logomenu ul {list-style-type:none;}
.ust .logomenu ul li {width:16.4%; height:50px; line-height:50px; float:left; text-align:center; font-weight:500; border-right:#eee 1px solid; color:#444444;}
.ust .logomenu ul li:hover {background-color:#E60000; color:#FFF}
.ust .logomenu ul .aktif {background-color:#E60000; color:#FFF}

.slayt {width:100%; height:470px; border-bottom:#eee 1px solid;}
.swiper-container {
        width: 100%;
        height: 100%;
        
    }
    .swiper-slide {
		width:100%;
		height:470px;
        text-align: center;
        font-size: 18px;
        background: #fff;
        
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
	.swiper-slide img {height:100%;}

.orta {width:100%;}
.orta .Bbaslik {width:100%; height:60px; line-height:60px; margin-top:3%; font-size:24px; color:#333; font-weight:400; text-align:center;}
.orta .Aaciklama {font-size:16px;  margin-bottom:3%; color:#999; text-align:center;}

/* Hizmetler */
.hizmetler {width:100%;}
.hizmetler .hizmet3 {width:31.3%; height:400px; float:left; margin:1%; background-color:#fff; box-shadow:#ddd 0px 1px 15px; overflow:hidden;}
.hizmetler .hizmet3 .cizgi {width:15%; height:5px; box-shadow:#F00 0px 5px 1px; color:#E60000}
.hizmetler .hizmet3 .resim {width:99.6%; height:200px; padding:0.2%; overflow:hidden;}
.hizmetler .hizmet3 .resim img {width:100%;}
.hizmetler .hizmet3 .baslik {width:100%; height:50px; padding-left:5%; padding-top:5%; padding-right:5%; font-size:18px; font-weight:500; color:#555}
.hizmetler .hizmet3 .aciklama {height:70px; padding-left:5%; padding-right:5%; color:#666}
.hizmetler .hizmet3 a {color:#E60000; text-decoration:none;}
.hizmetler .hizmet3 .kose {width:12%; height:110px; bottom:0; padding-top:30px; padding-left:10px; float:right; background-color:#F00; color:#fff; 
/* Safari */
-webkit-transform: rotate(45deg);
/* Firefox */
-moz-transform: rotate(45deg); 
/* IE */
-ms-transform: rotate(45deg);
/* Opera */
-o-transform: rotate(45deg);
}

.hizmetler .hizmet4 {width:21%; height:100px; line-height:32px; margin:1%; padding:1%; float:left;}
.hizmetler .hizmet4 .ikon {width:28%; height:100px; float:left; padding:3%;}
.hizmetler .hizmet4 .baslik {width:58%; height:100px; float:right; padding:3%;}

/* Slogan */
.slogan {width:100%; height:400px; margin-top:4%; margin-bottom:4%; opacity:0.9; background:url(../../resgenel/thumb-1920-312793.jpg) fixed;}
.slogan .golge {width:100%; height:400px; background-color:rgba(255,0,0,0.6);}
.slogan .baslik {width:100%; height:50px; line-height:50px; padding-top:10%; text-align:center; font-size:30px; font-weight:700; color:#fff;}
.slogan .aciklama {width:100%; height:50px; line-height:50px; text-align:center; font-size:26px; font-weight:600; color:#FF0;}
.slogan .ikon {width:100%; height:50px; line-height:50px; text-align:center; font-size:24px; font-weight:600; color:#fff;}

/* Firma Detay */
.detay {width:100%;}
.detay .resim {width:30%; height:300px; float:left; overflow:hidden;}
.detay .resim img {height:300px;}
.detay .baslik {width:100%; height:30px; padding-left:5%; padding-right:5%; font-size:20px; font-weight:500i; color:#333}
.detay .cizgi {width:20%; height:5px; margin-left:5%; margin-bottom:5%; box-shadow:#F00 0px 5px 1px; color:#E60000}
.detay .aciklama {padding-left:5%; padding-right:5%; font-size:15px; color:#666}
.detay .secenek {width:100%; float:right; border-left:#E60000 1px solid;}
.detay .secenek li .cizgi {width:15%; height:1px; float:left; margin-left:0%; margin-top:8%; box-shadow:#F00 0px 5px 1px; color:#E60000}
.detay .secenek li {width:100%; height:70px; line-height:70px; list-style-type:none; font-size:24px;}
.detay .secenek .ikon {width:50px; height:50px; line-height:50px; float:left; text-align:center; margin-top:2%; margin-right:4%; border-radius:100px; background-color:#E60000; color:#fff;}

/* Aşamalar */
.asama {width:100%; height:400px; margin-top:5%; padding-bottom:70px; border-top:#ddd 1px solid; background-color:#F8F8F8;}
.asama .Bbaslik {width:100%; height:60px; line-height:60px; font-size:24px; font-weight:400; text-align:center; color:#333}
.asama .Aaciklama {font-size:16px;  margin-bottom:3%; text-align:center; color:#999}
.asama .sayi {width:20px; height:20px; padding:10px; margin-bottom:-40px; border-radius:120px; text-align:center; border:#FFF 2px solid; background-color:#E60000; color:#fff; font-weight:bold; overflow:hidden;}
.asama .asamailk {width:90px; height:90px; padding:40px; margin-bottom:20px; float:left; border-radius:120px; text-align:center; border:#E60000 2px solid; background-color:#fff; overflow:hidden;}
.asama .asamaorta {width:90px; height:90px; padding:40px; margin-bottom:20px; float:left; border-radius:120px; text-align:center; border:#E60000 2px solid; background-color:#fff; overflow:hidden;}
.asama .asamason {width:90px; height:90px; padding:40px; margin-bottom:20px; float:left; border-radius:120px; text-align:center; border:#E60000 2px solid; background-color:#fff; overflow:hidden;}
.asama .aralik {width:10%; height:5px; float:left; margin-top:95px; margin-left:15px; margin-right:3px; box-shadow:#F00 0px 5px 1px; color:#E60000}

/* Alt */

.alt {width:100%; height:300px; background-color:#2f2f2f; color:#fff;}
.alt .Abaslik {width:100%; height:60px; line-height:60px; font-size:18px; font-weight:500}
.alt .Aaciklama {width:100%; height:160px;}
.alt .Aaciklama a {color:#fff; text-decoration:none;}
.alt .Aaciklama a:hover {color:#E60000}
.alt .Aaciklama li {list-style-type:none;}
.alt .telif {width:50%; height:50px; line-height:50px; float:left;}
.alt .imza {width:50%; height:50px; line-height:50px; float:right; text-align:right;}

/* Sayfa */

.Sbaslik {width:100%; height:70px; line-height:70px; font-size:24px; font-weight:600; border-bottom:#eee 1px solid;}
.Sbaslik span {width:14%; float:right; font-size:13px; font-weight:300}
.Sbaslik span a {color:#333; text-decoration:none;}
.sayfa {width:100%; margin-top:1%; margin-bottom:3%;}
.sayfa .sayfaresim {width:50%; height:300px; margin-right:2%; overflow:hidden; float:left; border:#eee 2px solid; box-shadow:#ccc 0px 5px 15px;}
.sayfa .sayfaresim img {width:100%;}
.sayfa .sayfayazi { color:#999;}

/* Detaysayfa */

.detays {width:100%; margin-top:1%;}
.detays .liste {width:20%; float:left; margin-right:1%; padding:2%; background-color:#E60000; color:#fff;}
.detays .liste .baslik {padding:5%; margin-bottom:20px; font-size:18px; font-weight:bold; background-color:#FFF; color:#666; box-shadow:#333 0px 10px 20px;}
.detays .liste li {width:98%; height:30px; line-height:30px; padding:2%; list-style-type:none; font-size:14px; overflow:hidden; color:#fff;}
.detays .liste a {color:#fff; text-decoration:none;}
.detays .liste li:hover {background-color:#FFFFFF; color:#000}
.detays .aciklama {width:74%; float:right}
.detays .aciklama .baslik {width:100%; height:40px; line-height:40px; padding-bottom:1%; float:left; font-size:24px; border-bottom:#EEE 1px solid; font-weight:700}
.detays .aciklama .bilgi {width:98%; height:20px; padding:1%; line-height:20px; float:right; font-size:13px; background-color:#F6F6F6; color:#666}
.detays .aciklama .bilgi .tarih {width:60%; float:left}
.detays .aciklama .bilgi .yorum {width:20%; float:left;}
.detays .aciklama .bilgi .goruntuleme{width:20%; float:right;}
.detays .aciklama .resim {width:50%; margin-right:2%; margin-top:3%; float:left}
.detays .aciklama .resim img {width:100%;}
.detays .aciklama .yazi {margin-top:7%; font-size:14px; line-height:23px; color:#999;}

/* Galeri */
.galeri {width:100%;}
.galeri .galeri3 {width: 21.2%; height:180px; float:left; margin:1%; border:#a5c1e4 8px inset; overflow:hidden;}
.galeri .galeri3:hover {border:#75b2fc 8px solid; }
.galeri .galeri3 img {width:100%;}

/* İletişim */

.iletisim2 {width:100%;}
.iletisim2 .btel {width:45%; float:left; margin-bottom:2%;}
.iletisim2 .btel a {color:#444; text-decoration:none;}
.iletisim2 .btel a:hover {color:#E60000}
.iletisim2 .ikon {width:10%; height:50px; line-height:50px; padding:1%; float:left; margin-left:3%;}
.iletisim2 .yazi {width:82%; height:50px; line-height:25px; padding:1%; float:right;}
.iletisim2 .btel .baslik {width:96%; height:20px; padding:2%; background-color:#E60000; color:#fff; font-size:16px; font-weight:500}
.iletisim2 .bilgi {width:100%; height:250px; margin-top:2%;}
.iletisim2 .harita {width:53%; height:500px; margin-left:2%; margin-top:0.5%; float:right;}


/* Genel */
.hizala {width:1152px; margin:0px auto;}
.temizle {clear:both;}
.mobilemenu, .simdiara {display:none;}

/* Form */

input[type="text"] {width:98%; height:30px; padding:1%; border-radius:5px; border:#eee 1px solid;}
input[type="submit"] {width:30%; height:40px; padding:1%; font-size:16px; border-radius:5px; border:#eee 1px solid; background-color:#3D8EE9; color:#fff;}
textarea {width:98%; height:120px; padding:1%; border-radius:5px; border:#eee 1px solid; color:#666;  font-family: 'Roboto', sans-serif;}

/* Kutular */

.kutu {width:100%;}
.kutu2 {width:47%; float:left; padding:1%; margin:0.5%}
.kutu3 {width:31.3%; float:left; padding:1%;}
.kutu4 {width:23%; float:left; padding:1%;}
.kutu7 {width:13.9%; float:left; padding:1%;}

/* Renkler */

.gri {background-color:#F6F6F6;}
.gri3 {background-color:#F8F8F8}

/* Font Size */
.font14 {font-size:14px}
.font18 {font-size:18px}
.font20 {font-size:20px}
.font24 {font-size:24px}

/* Modal */

input[type='checkbox']#gizli-checkbox{
 display:none;
}
.cerceve {
  background: rgba(5, 10, 30, 0.8);
  opacity:0;
  visibility:hidden;
  z-index: 99999;
}
.modal{
  background-color:white;
  width: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 10px; left: 0; right: 0;
  border-radius:5px;
  padding:10px 15px;
}
 
.modal .kapat{
  float:right;
  color:#333;
  cursor:pointer;
}
input[type='checkbox']#gizli-checkbox:checked ~ .cerceve{
  position:absolute;
  z-index:9999;
  top:0;bottom:0;left:0; right:0;
  opacity:1;
  visibility:visible;
}