@charset "UTF-8";
/* CSS Document */

@font-face { font-family: 'Open Sans Light'; font-style: normal; font-weight: 300; src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTRa1RVmPjeKy21_GQJaLlJI.woff) format('woff'); }
@font-face { font-family: 'Open Sans Regular'; font-style: normal; font-weight: 400; src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/u-WUoqrET9fUeobQW7jkRT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'); }
@font-face { font-family: 'Open Sans Semibold'; font-style: normal; font-weight: 600; src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/MTP_ySUJH_bn48VBG8sNSha1RVmPjeKy21_GQJaLlJI.woff) format('woff'); }
@font-face { font-family: 'Open Sans Condensed'; font-style: normal; font-weight: 700; src: local('Open Sans Condensed Bold'), local('OpenSans-CondensedBold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/MTP_ySUJH_bn48VBG8sNSha1RVmPjeKy21_GQJaLlJI.woff) format('woff'); }
body { font-family: 'Open Sans Light', Arial, sans-serif; padding-bottom: 100px; margin: 0; overflow-x: hidden; }
.clear { clear: both; }
a { text-decoration: none;}
/************************************************** HEADER *********************************************/

#header { position: absolute; display: block; width: 960px; left: 50%; margin-left: -480px; height: 140px; top: 65px; z-index: 200; -webkit-transition: top 0.3s ease-out; -moz-transition: top 0.3s ease-out; -o-transition: top 0.3 s ease-out; -ms-transition: top 0.3s ease-out; transition: top 0.3s ease-out; }
#logo { position: absolute; left: 50%; margin-left: -50px; width: 100px; border-radius: 50%; background:#000000; -moz-transition: color 0.15s ease-out, background-color 0.15s ease-out, border 0.15s ease-out; -webkit-transition: color 0.15s ease-out, background-color 0.15s ease-out, border 0.15s ease-out; -o-transition: color 0.15s ease-out, background-color 0.15s ease-out, border 0.15s ease-out; -ms-transition: color 0.15s ease-out, background-color 0.15s ease-out, border 0.15s ease-out; transition: color 0.15s ease-out, background-color 0.15s ease-out, border 0.15s ease-out;}
#logo:hover { position: absolute; left: 50%; margin-left: -50px; width: 100px; border-radius: 50%; background:#660000}
#menuSol, #menuSag { position: absolute; left: 50%; margin-top: 36px; width: 400px; }
#menuSol { margin-left: -450px; }
#menuSag { margin-left: 50px; }
#menuSol div, #menuSag div { font-size: 18px; color: #999; text-transform: uppercase; position: relative; }
#menuSol div { float: right; margin-right: 50px; }
#menuSag div { float: left; margin-left: 50px; }
#menuSol a, #menuSag a { color: #999; padding-bottom: 3px; font-family: 'Open Sans Condensed', Arial, sans-serif; }
#menuSol a.current, #menuSol a:hover, #menuSag a.current, #menuSag a:hover { color: #000; border-bottom: 2px solid #660000; }
#anaBaslik { position: absolute; left: 50%; top: 200px; width: 700px; z-index: 2; margin: 50px 0 60px -350px; font-size: 30px; text-transform: uppercase; color: #999; line-height: 40px; letter-spacing: 1px; text-align: center; -webkit-transition: top 0.3s ease-out; -moz-transition: top 0.3s ease-out; -o-transition: top 0.3 s ease-out; -ms-transition: top 0.3s ease-out; transition: top 0.3s ease-out; }
.noir { color: #000; }
/************************************************** GRID ********************************************/

.blok { float: left; position: absolute; z-index: 1; display: block; overflow: hidden; width: 300px; height: 380px; left: 50%; margin: 0; border-left: 1px solid #e3e3e3; border-right: 1px solid #e3e3e3; border-top: 1px solid #e3e3e3; cursor: pointer; color: #777; -webkit-transition: top 0.3s ease-out; -moz-transition: top 0.3s ease-out; -o-transition: top 0.3 s ease-out; -ms-transition: top 0.3s ease-out; transition: top 0.3s ease-out; }
.blok .content { display: block; width: 300px; height: 380px; top: 0; position: absolute; font-size: 14px; font-family: 'Open Sans Regular', Arial, sans-serif; -webkit-font-smoothing: antialiased; color: #999; text-align: center; }
.blok .daire { display: block; position: absolute; z-index: 4; width: 74px; height: 74px; top: -74px; left: 50%; margin-left: -37px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background: url("../img/daire.png") no-repeat 34px center; border: 3px solid #FFF; opacity: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3 s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.blok:hover .daire { top: 100px; opacity: 1; }
.blok h2 { display: block; margin: 35px auto 8px auto; letter-spacing: 1px; font-size: 24px; color: #141414; font-weight: normal; text-transform: uppercase; position: relative; z-index: 4; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3 s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; font-family: 'Open Sans Condensed', Arial, sans-serif; }
.blok:hover h2 { color: #FFF; margin-top: -40px; }
.blok .gorev { display: block; position: relative; z-index: 4; font-family: 'Open Sans Light', Arial, sans-serif; }
.blok:hover .gorev { color: #FFF; }
.blok .fon { width: 300px; height: 380px; top: 378px; position: absolute; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2 s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.blok.actif .gorev, .blok.actif h2, .blok.actif .daire { display: none; }
.blok:hover .fon { top: 0px; }
.blok.blok1 { margin-left: -500px; top: 400px; }
.blok.blok2 { margin-left: -150px; top: 400px; }
.blok.blok3 { margin-left: 200px; top: 400px; }
.blok.blok4 { margin-left: -500px; top: 830px; }
.blok.blok5 { margin-left: -150px; top: 830px; }
.blok.blok6 { margin-left: 200px; top: 830px; }
.blok.blok7 { margin-left: -500px; top: 1260px; }
.blok.blok8 { margin-left: -150px; top: 1260px; }
.blok.blok9 { margin-left: 200px; top: 1260px; }
.blok.blok10 { margin-left: -500px; top: 1690px; }
.blok.blok11 { margin-left: -150px; top: 1690px; }
.blok.blok12 { margin-left: 200px; top: 1690px; }
.blok.blok13 { margin-left: -500px; top: 2120px; }
.blok.blok14 { margin-left: -150px; top: 2120px; }
.blok.blok15 { margin-left: 200px; top: 2120px; }
.blok.blok16 { margin-left: -500px; top: 2550px; }
.blok.blok17 { margin-left: -150px; top: 2550px; }
.blok.blok18 { margin-left: 200px; top: 2550px; }
.blok.blok19 { margin-left: -500px; top: 2980px; }
.blok.blok20 { margin-left: -150px; top: 2980px; }
.blok.blok21 { margin-left: 200px; top: 2980px; }
.blok.blok22 { margin-left: -500px; top: 3410px; }
.blok.blok23 { margin-left: -150px; top: 3410px; }
.blok.blok24 { margin-left: 200px; top: 3410px; }
.blok1 .fon { background: #EFBA00; }
.blok2 .fon { background: #0D795F; }
.blok3 .fon { background: #7EBD15; }
.blok4 .fon { background: #17479D; }
.blok5 .fon { background: #A4017C; }
.blok6 .fon { background: #006291; }
/*.blok6 .fon { background: #EFBA00; } EGITIM.COM*/
.blok7 .fon { background: #8A0614; }
/*.blok7 .fon { background: #142F64; } SEBIT */
.blok8 .fon { background: #F89811; }
.blok9 .fon { background: #2DB6CF; }
.blok10 .fon { background: #222222; }
.blok11 .fon { background: #55BBCC; }
.blok12 .fon { background: #654D27; }
.blok13 .fon { background: #EC1B24; }
.blok14 .fon { background: #ECB100; }
.blok15 .fon { background: #009BFF; }
.blok16 .fon { background: #707D31; }
.blok17 .fon { background: #ECB100; }
.blok18 .fon { background: #E63600; }
.blok19 .fon { background: #ECB100; }
.blok20 .fon { background: #2A3233; }
.blok21 .fon { background: #CF512C; }
.blok22 .fon { background: #CE1F00; }
.blok23 .fon { background: #E67817; }
.blok24 .fon { background: #ECB100; }
/***************************** proje ***************************/

#projeFon { width: 302px; height: 0px; position: absolute; top: 0; left: 50%; opacity: 0; z-index: 0; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
#projeFon.actif { position: fixed; z-index: 500; overflow: inherit; opacity: 1; -webkit-transition: left 0.3s ease-out, top 0.3s ease-out, width 0.3s ease-out, height 0.3s ease-out, margin-left 0.3s ease-out, opacity 0s ease-out; -moz-transition: left 0.3s ease-out, top 0.3s ease-out, width 0.3s ease-out, height 0.3s ease-out, margin-left 0.3s ease-out, opacity 0s ease-out; -o-transition: left 0.3s ease-out, top 0.3s ease-out, width 0.3s ease-out, height 0.3s ease-out, margin-left 0.3s ease-out, opacity 0s ease-out; -ms-transition: left 0.3s ease-out, top 0.3s ease-out, width 0.3s ease-out, height 0.3s ease-out, margin-left 0.3s ease-out, opacity 0s ease-out; transition: left 0.3s ease-out, top 0.3s ease-out, width 0.3s ease-out, height 0.3s ease-out, margin-left 0.3s ease-out, opacity 0s ease-out; }
#proje { position: absolute; z-index: 0; opacity: 0; width: 100%; left: 0; top: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3 s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; height: 0; overflow: hidden; }
#proje.visible { height: auto; opacity: 1; top: 0; z-index: 1000; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3 s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; padding-bottom: 100px; }
.center { width: 980px; margin: 0 auto; }
#proje .ban { position: absolute; opacity: 0; left: 0; top: -500px; width: 100%; height: 500px; overflow: hidden; z-index: 1; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transition-delay: 0s; transition-delay: 0s; }
#proje.visible .ban { opacity: 1; top: 0; -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; -o-transition: all 0.8s ease-out; -ms-transition: all 0.8s ease-out; transition: all 0.8s ease-out; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; }
#proje.visible .ban img { position: absolute; left: 50%; margin-left: -960px; }
#proje .afis { width: 618px; opacity: 0; margin: -500px auto 0 auto; z-index: 3; position: relative; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transition-delay: 0s; transition-delay: 0s; }
#proje .afis.afislouvre { width: 863px; opacity: 0; margin: -500px auto 0 auto; }
#proje .afis2 { width: 231px; opacity: 0; margin: -986px auto 0 640px; z-index: 3; position: relative; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transition-delay: 0s; transition-delay: 0s; }
#proje.visible .afis { margin: 50px auto 0 auto; opacity: 1; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease-out; -o-transition: all 0.6s ease-out; -ms-transition: all 0.6s ease-out; transition: all 0.6s ease-out; -webkit-transition-delay: 0.7s; transition-delay: 0.7s; }
#proje.visible .afis2 { margin: -380px auto 0 640px; opacity: 1; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease-out; -o-transition: all 0.6s ease-out; -ms-transition: all 0.6s ease-out; transition: all 0.6s ease-out; -webkit-transition-delay: 0.82s; transition-delay: 0.82s; }
#proje h1 { opacity: 0; font-family: 'Open Sans Condensed', Arial, sans-serif; font-weight: normal; -webkit-font-smoothing: antialiased; text-align: center; font-size: 60px; color: #FFF; margin: 60px auto 50px auto; text-transform: uppercase; letter-spacing: 3px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transition-delay: 0s; transition-delay: 0s; }
#proje.visible h1 { opacity: 1; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transition-delay: 1.2s; transition-delay: 1.2s; }
#proje p { opacity: 0; font-family: 'Open Sans Regular', Arial, sans-serif; font-weight: normal; -webkit-font-smoothing: antialiased; text-align: center; font-size: 14px; line-height: 20px; letter-spacing: 1px; color: #FFF; width: 600px; margin: 0 auto 40px auto; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transition-delay: 0s; transition-delay: 0s; }
#proje p.link { opacity: 0; font-family: 'Open Sans Regular', Arial, sans-serif; margin: -20px auto 40px auto; }
#proje p.linkbis { margin: 0px auto 0px auto; }
#proje.visible p { opacity: 1; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transition-delay: 1.2s; transition-delay: 1.2s; }
#proje p.link a { opacity: 0.6; border-bottom: 1px solid rgba(255, 255, 255, 0); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
#proje p.link a:hover { opacity: 1; border-bottom: 1px solid rgba(255, 255, 255, 1); }
#proje.visible p { opacity: 1; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transition-delay: 1.2s; transition-delay: 1.2s; }
#proje .ayrac { opacity: 0; margin: 0 auto 40px auto; text-align: center; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transition-delay: 0s; transition-delay: 0s; }
#proje.visible .ayrac { opacity: 1; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transition-delay: 1.3s; transition-delay: 1.3s; }
#proje .infos { display: table; margin: 0 auto; opacity: 0; margin-bottom: 30px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transition-delay: 0s; transition-delay: 0s; }
#proje.visible .infos { opacity: 1; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transition-delay: 1.5s; transition-delay: 1.5s; }
#proje .infos p { font-family: 'Open Sans Condensed', Arial, sans-serif; font-weight: normal; -webkit-font-smoothing: antialiased; text-transform: uppercase; text-align: center; font-size: 20px; line-height: 30px; color: #FFF; float: left; padding: 0 35px; width: auto; display: block; position: relative; }
#proje .screenshot { padding-top: 24px; background: url("../img/gorselUst.png") top center no-repeat; padding-bottom: 50px; width: 800px; margin: 0 auto; text-align: center; position: relative; display: block; }
#proje .screenshot.mobile { padding-top: 0; background: none; }
#proje #screenshots h2 { font-family: 'Open Sans Semibold', Arial, sans-serif; font-weight: normal; -webkit-font-smoothing: antialiased; text-align: center; font-size: 30px; color: #FFF; margin: 0px auto 0px auto; text-transform: uppercase; letter-spacing: 3px; }
#proje #screenshots .ayrac { margin: 40px auto 30px auto; text-align: center; }
#proje #screenshots { opacity: 0; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease-out; -o-transition: all 0.6s ease-out; -ms-transition: all 0.6s ease-out; transition: all 0.6s ease-out; -webkit-transition-delay: 0s; transition-delay: 0s; }
#proje.visible #screenshots { opacity: 1; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transition-delay: 2s; transition-delay: 2s; }
#proje .screenshot img { -webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.18); box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.18); position: relative; opacity: 1; }
#proje .screenshot.mobile img { -webkit-box-shadow: none; box-shadow: none; }
.mercek { width: 240px; height: 240px; position: absolute; display: block; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; background: #d3d3d3; /* Old browsers */ background: -moz-linear-gradient(top, #d3d3d3 10%, #ffffff 30%, #e2e2e2 50%, #ffffff 70%, #d3d3d3 80%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #d3d3d3), color-stop(30%, #FFFFFF, ) color-stop(50%, #e2e2e2), color-stop(70%, #ffffff), color-stop(80%, #d3d3d3)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #d3d3d3 10%, #ffffff 30%, #e2e2e2 50%, #ffffff 70%, #d3d3d3 80%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #d3d3d3 10%, #ffffff 30%, #e2e2e2 50%, #ffffff 70%, #d3d3d3 80%); /* Opera 11.10+ */ box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.25); -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2 s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out; z-index: 99999; overflow: hidden; }
.mercek:hover { width: 340px; height: 340px; }
.vitaminegitim01 { top: 55px; left: 535px; }
.vitaminegitim01:hover { top: 5px; left: 485px; }
.vitaminegitim02 { top: 200px; left: -20px; }
.vitaminegitim02:hover { top: 150px; left: -70px; }
.vitaminegitim03 { top: 220px; left: 600px; }
.vitaminegitim03:hover { top: 170px; left: 550px; }
.vitaminogretmen01 { top: 70px; left: 655px; }
.vitaminogretmen01:hover { top: 20px; left: 605px; }
.vitaminogretmen02 { top: 510px; left: 655px; }
.vitaminogretmen02:hover { top: 460px; left: 605px; }
.vitaminogretmen03 { top: 120px; left: 655px; }
.vitaminogretmen03:hover { top: 70px; left: 605px; }
.mercek div { width: 220px; height: 220px; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; position: relative; display: block; margin: 10px 10px; box-shadow: inset 0 0 10px 0px rgba(0, 0, 0, 0.15); -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out; z-index: 100000; overflow: hidden; background-repeat: no-repeat; background-position: -50px -50px; }
.mercek:hover div { width: 320px; height: 320px; overflow: hidden; background-position: 0 0; }
.mercek div img { display: block; margin-left: -50px; margin-top: -50px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.mercek:hover div img { margin-left: 0px; margin-top: 0px; }
.op50 { opacity: 0.5; }
#menuProjeler { width: 100%; height: 70px; background: #000; position: fixed; bottom: -70px; z-index: 10000000; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transition-delay: 0s; transition-delay: 0s; }
#menuProjeler .center { border-right: 1px solid #222; width: 975px; }
#menuProjeler.visible { bottom: 0px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transition-delay: 1.5s; transition-delay: 1.5s; }
.back { opacity: 0.3; color: #FFF; font-size: 18px; text-transform: uppercase; font-family: 'Open Sans Condensed', Arial, sans-serif; font-weight: normal; -webkit-font-smoothing: antialiased; line-height: 70px; padding-right: 20px; padding-left: 0; float: left; cursor: pointer; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; -ms-transition: all 0.4s ease-out; transition: all 0.4s ease-out; letter-spacing: 1px }
.back:hover { opacity: 1; }
.back img { margin-top: 0; float: left; position: relative; z-index: 10000001; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; -ms-transition: all 0.4s ease-out; transition: all 0.4s ease-out; }
.back div { float: left; margin-left: 15px; }
.ikon { display: block; float: left; width: 36px; height: 48px; border-left: 1px solid #222; text-align: center; padding-top: 22px; cursor: pointer; }
.ikon.current { width: 37px; border-left: 0; }
.ikon.current img { opacity: 1; }
.ikon img { opacity: 0.3; position: relative; z-index: 10000001; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; -ms-transition: all 0.4s ease-out; transition: all 0.4s ease-out; }
.ikon .fon { width: 37px; height: 70px; top: 70px; position: absolute; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2 s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.ikon:hover .fon, .ikon.current .fon { top: 0px; z-index: 10000000; }
.ikon:hover img, .back:hover img { opacity: 1; filter: FlipH; -ms-filter: "FlipH"; -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); }
.ikon.current:hover img { opacity: 1; filter: none; -ms-filter: none; -moz-transform: none; -o-transform: none; -webkit-transform: none; transform: none; }
.ikon1 .fon { background: #EFBA00; }
.ikon2 .fon { background: #0D795F; }
.ikon3 .fon { background: #7EBD15; }
.ikon4 .fon { background: #17479D; }
.ikon5 .fon { background: #A4017C; }
.ikon6 .fon { background: #006291; }
/*.ikon6 .fon { background: #EFBA00; } EGITIM.COM*/
.ikon7 .fon { background: #8A0614; }
/*.ikon7 .fon { background: #142F64; } SEBIT */
.ikon8 .fon { background: #F89811; }
.ikon9 .fon { background: #2DB6CF; }
.ikon10 .fon { background: #222222; }
.ikon11 .fon { background: #55BBCC; }
.ikon12 .fon { background: #654D27; }
.ikon13 .fon { background: #EC1B24; }
.ikon14 .fon { background: #ECB100; }
.ikon15 .fon { background: #009BFF; }
.ikon16 .fon { background: #707D31; }
.ikon17 .fon { background: #ECB100; }
.ikon18 .fon { background: #E63600; }
.ikon19 .fon { background: #ECB100; }
.ikon20 .fon { background: #2A3233; }
.ikon21 .fon { background: #CF512C; }
.ikon22 .fon { background: #CE1F00; }
.ikon23 .fon { background: #E67817; }
.ikon24 .fon { background: #ECB100; }
/************************************** hakkinda ************************************/

#hakkinda, #iletisim { position: absolute; width: 100%; height: 470px; margin-top: -470px; background: #141414; z-index: 10; -webkit-transition: left 0s ease-out, margin-top 0.3s ease-out; -moz-transition: left 0s ease-out, margin-top 0.3s ease-out; -o-transition: left 0s ease-out, margin-top 0.3s ease-out; -ms-transition: left 0s ease-out, margin-top 0.3s ease-out; transition: left 0s ease-out, margin-top 0.3s ease-out; }
#hakkinda.ilk, #iletisim.ilk { margin-top: -470px; -webkit-transition: left 0s ease-out, margin-top 0s ease-out; -moz-transition: left 0s ease-out, margin-top 0s ease-out; -o-transition: left 0s ease-out, margin-top 0s ease-out; -ms-transition: left 0s ease-out, margin-top 0s ease-out; transition: left 0s ease-out, margin-top 0s ease-out; }
#hakkinda { left : 0; }
#iletisim { left : 100%; }
#hakkinda.visible, #iletisim.visible { -webkit-transition: left 0.3s ease-out, margin-top 0.3s ease-out; -moz-transition: left 0.3s ease-out, margin-top 0.3s ease-out; -o-transition: left 0.3s ease-out, margin-top 0.3s ease-out; -ms-transition: left 0.3s ease-out, margin-top 0.3s ease-out; transition: left 0.3s ease-out, margin-top 0.3s ease-out; }
#kimdir { float: left; width: 645px; font-family: 'Open Sans Regular', Arial, sans-serif; font-weight: normal; -webkit-font-smoothing: antialiased; color: #666; font-size: 12px; line-height: 20px; letter-spacing: 1px; }
#kimdir p { margin-bottom: 10px }
#kimdir font { color: #EEE; font-weight: bold; }
.blink_me { animation-name: blinker; animation-duration: 2s; animation-timing-function: linear; animation-iteration-count: infinite; -webkit-animation-name: blinker; -webkit-animation-duration: 2s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; }
.blink_me2 { animation-name: blinker; animation-duration: 4s; animation-timing-function: linear; animation-iteration-count: infinite; -webkit-animation-name: blinker; -webkit-animation-duration: 4s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; }
@-moz-keyframes blinker {  0% {
opacity: 1.0;
}
 50% {
opacity: 0.4;
}
 100% {
opacity: 1.0;
}
}
@-webkit-keyframes blinker {  0% {
opacity: 1.0;
}
 50% {
opacity: 0.4;
}
 100% {
opacity: 1.0;
}
}
@keyframes blinker {  0% {
opacity: 1.0;
}
 50% {
opacity: 0.4;
}
 100% {
opacity: 1.0;
}
}
#gorsel { float: left; width: 285px; margin-left: 10px; }
#gorsel img { width: 263px; margin-top: 138px; border: 1px solid #444; padding: 10px }
p { margin: 0 0 15px 0; padding: 0; }
p a { color: #FFF; }
p a:hover { border-bottom: 1px solid #FFF; }
h3 { font-size: 28px; color: #FFF; margin: 60px 0 40px 0; letter-spacing: 1px; font-family: 'Open Sans Condensed', Arial, sans-serif; font-weight: normal; }
.envoimess { position: absolute; top: 54px; width: 400px; font-family: 'Open Sans Regular', Arial, sans-serif; font-weight: normal; -webkit-font-smoothing: antialiased; text-align: right; color: #aaa; font-size: 12px; line-height: 20px; }
/********************************** FOOTER **********************************/

#footer { position: absolute; top: 3860px; width: 100%; height: 270px; background: #141414; }
.ligne { width: 100%; height: 1px; background: #242424; }
#footer .center { height: 90px; width: 1000px; border-left: 1px solid #242424; border-right: 1px solid #242424; font-family: 'Open Sans Condensed', Arial, sans-serif; font-weight: normal; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 20px; letter-spacing: 1px; text-transform: uppercase; }
.caseA { display: block; width: 420px; height: 90px; float: left; overflow: hidden; position: relative; cursor: pointer; }
.caseB { display: block; width: 115px; height: 90px; float: left; border-left: 1px solid #242424; overflow: hidden; position: relative; text-align: center; line-height: 90px; cursor: pointer; }
.caseA a { position: absolute; z-index: 3; color: #FFF; margin-left: 80px; margin-top: 35px; }
.caseB a { position: relative; z-index: 3; color: #CCC; }
.caseA .fon, .caseB .fon { height: 90px; position: absolute; z-index: 1; top: 90px; background: #093; -webkit-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out; -ms-transition: all 0.1s ease-out; transition: all 0.1s ease-out; }
.caseA:hover .fon, .caseB:hover .fon { top: 0; }
.caseA .fon { width: 420px; }
.caseB .fon { width: 115px; }
.fon.as { background: #FC0; }
.fon.twitter { background: #2C7FBA; }
.fon.pinterest { background: #B93936; }
.fon.linkedin { background: #0085AF; }
.fon.facebook { background: #576EA5; }
.fon.foursquare { background: #4985BB; }
.copyright { font-family: 'Open Sans Regular', Arial, sans-serif; text-align: center; font-size: 14px; color: #494949; margin-top: 35px; }
/* CONTACT FORM */
#iletisimSol, #iletisimSag { float: left; width: 315px; font-family: 'Open Sans Condensed', Arial, sans-serif; font-weight: normal; -webkit-font-smoothing: antialiased; color: #aaa; font-size: 14px; line-height: 20px; letter-spacing: 1px; }
#iletisimSag { margin-left: 50px; width: 615px; }
input, textarea { border: 1px solid #333; padding: 15px 20px; margin-top: 10px; margin-bottom: 25px; background: #141414; color: #666; }
#iletisimSol input { width: 273px; }
#iletisimSag textarea { width: 573px; height: 223px; }
#iletisimSol .lbl { display:block; cursor:pointer }
#iletisimSag .lbl { margin-top: 120px; display:block; cursor:pointer }
#iletisim input.required { background: transparent url('../img/required.gif') 99% 50% no-repeat; }
#iletisim textarea.required { background: transparent url('../img/required.gif') 99% 10% no-repeat; }
#iletisim #note { width: 410px; margin: 10px; left: -10px; top: 40px; position: absolute }
#iletisim #load { top: 115px; right: 50px; position: absolute; }
#iletisim .btn { position: absolute; top: 40px; background: #F8F8F8; border: 0; font-family: 'Open Sans Condensed', Arial, sans-serif; color: #444; text-transform: uppercase; right: 0; width: 180px; margin-left: 315px; cursor: pointer; font-weight: bold; padding: 10px 20px; margin-bottom: 25px; margin-top: 10px; font-size:16px;}
#iletisim .btn:hover { color: #000; background: #FFF; }
/* Error / Success / Notice ----------------------------------------------------------- */
#iletisim .notes { border: 1px solid #f0f0f0; color: #f0f0f0 }
#iletisim .success { border: 1px solid #60a400; color: #60a400 }
#iletisim .error { border: 1px solid #FF0000; color: #FF0000 }
#iletisim .notice { border: 1px solid #fcf0cc; color: #fcf0cc }
#iletisim .notes, #iletisim .notice, #iletisim .success, #iletisim .error { padding: 10px; font-size: 11px; min-height:30px;}
#iletisim .notes span, #iletisim .notice span, #iletisim .success span, #iletisim .error span { font-weight: bold; font-size: 1.2em; }
#iletisim .notes p, #iletisim .success p, #iletisim .error p, #iletisim .notice p { margin: 0px; padding: 0px; }
#iletisim div { position: relative }