/* Coded By Cihan Tunçer 2014 cihan@cihantuncer.com Forbidden for unautorized usage */ @charset "UTF-8"; @import url('reset.css'); @import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,500,500italic,700,700italic,900,900italic,400italic); /* ================================================================================================================================ > FIXES ================================================================================================================================*/ html {height:100%;} body {height:100%; font-size:96%; overflow-x:hidden; font-family: "Segoe UI", Arial, sans-serif; color:#6E6E6E; line-height: 120%;} body *{box-sizing:border-box; -webkit-box-sizing:border-box;} /* ------- Clearfix -------------------------------------------------------------------------------------------------------- */ .section:before, .section:after,.clearfix:before,.clearfix:after {content:"";display:table;} .section:after, .clearfix:after {clear:both;} .section, .clearfix {zoom:1;} /* ------- Sticky Footer Fixes -------------------------------------------------------------------------------------------------------- */ #wrapper {min-height:100%; position:relative;} #main-footer {width:100%; position:absolute; bottom:0; left:0;} /* ================================================================================================================================ > GENERAL RULES & TYPES ================================================================================================================================*/ /* ------- Main Container / Section -------------------------------------------------------------------------------------------------------- */ .container {width:100%; clear:both; padding:25px 0 25px 0; } .ct2 {width:100%; clear:both; padding:5px 0 5px 0; } .section {display: block; margin-left:auto; margin-right:auto; clear:both; padding: 20px 20px 20px 20px} .sc2 {padding: 0px 20px 0px 20px} /*section group types*/ .sec-group .block{padding:30px; float:left; } .sec-eq2 .block{width:50%;} .sec-eq4 .block{width:25%;} /* block & block parts */ .block {position: relative; padding:20px; vertical-align: top; } /* content types*/ .cont-1 p, .cont-1 span, .cont-1 label{font-size:90%;} .cont-2{ padding-bottom:25px; margin-bottom:25px;} /* ------- Middle - Center Container -------------------------------------------------------------------------------------------------------- */ .md-c{text-align:center; position:relative;} .md-c:before {content:''; display:inline-block; height:100%; vertical-align:middle; margin-right:-0.25em; } .md-b{display:inline-block; vertical-align:middle;} /* ------- Shapes & Types -------------------------------------------------------------------------------------------------------- */ /*circle*/ #main-logo .logo, .cr{border-radius: 50%;} /* ------- Backgrounds -------------------------------------------------------------------------------------------------------- */ /*blue gradient*/ #main-logo .logo, .bg01{background:url(data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDU1NDkwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNzElIiBzdG9wLWNvbG9yPSIjNWViOWY5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);background:-moz-linear-gradient(45deg, rgb(5,84,144) 0%, rgb(94,185,249) 71%); background:-webkit-gradient(linear, left bottom, right top, color-stop(0%,rgb(5,84,144)), color-stop(71%,rgb(94,185,249))); background:-webkit-linear-gradient(45deg, rgb(5,84,144) 0%,rgb(94,185,249) 71%);background:-o-linear-gradient(45deg, rgb(5,84,144) 0%,rgb(94,185,249) 71%);background:-ms-linear-gradient(45deg, rgb(5,84,144) 0%,rgb(94,185,249) 71%);background:linear-gradient(45deg, rgb(5,84,144) 0%,rgb(94,185,249) 71%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#055490', endColorstr='#5eb9f9',GradientType=1 );} /*black 0.5 */ #map_init .cont,.gallery ul li .icoCont, .blck05{background:url(data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjMiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjMiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); background:-moz-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.3) 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.3)), color-stop(100%,rgba(0,0,0,0.3)));background:-webkit-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.3) 100%);background:-o-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.3) 100%);background:-ms-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.3) 100%); background:linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.3) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d000000', endColorstr='#4d000000',GradientType=0 ); } /*black 0.8 */ #image-frame, .blck08{background:url(data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjMiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjMiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); background:-moz-linear-gradient(top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.8) 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0.8)));background:-webkit-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.8) 100%);background:-o-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.8) 100%);background:-ms-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.8) 100%); background:linear-gradient(to bottom, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.8) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d000000', endColorstr='#4d000000',GradientType=0 ); } /* ------- Opacities -------------------------------------------------------------------------------------------------------- */ #map_init .cont,.op0 { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0; } #map_init .cont:hover,.op100 { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; } /* ------- Shadows -------------------------------------------------------------------------------------------------------- */ #image-frame #imgCont, .sh1{-webkit-box-shadow: 2px 2px 20px 0 #000000;box-shadow: 2px 2px 20px 0 #000000;} /* ------- Animations -------------------------------------------------------------------------------------------------------- */ #map_init .cont, .anm1{-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;} #menu-max .hr-menu > li.exp:hover > .ulCont,.anm2{-webkit-transition: max-height 0.7s ease-in-out;-moz-transition: max-height 0.7s ease-in-out;-ms-transition: max-height 0.7s ease-in-out;-o-transition: max-height 0.7s ease-in-out;transition: max-height 0.7s ease-in-out;} /* ------- TEXT TYPES -------------------------------------------------------------------------------------------------------- */ /*headers*/ h2{font-size:190%; line-height:150%; margin-bottom:15px; font-weight: 100; color:#1B8DCB;} h4{font-size:150%; line-height:150%; margin-bottom:15px; font-weight: 300; color:#1B8DCB;} h3{font-size:150%; line-height:120%; margin-bottom:15px; font-weight: 100; color:#1B8DCB;} h5{font-size:110%; line-height:150%; margin-bottom:5px; font-weight: 600; color:#1B8DCB;} h6{font-size:130%; line-height:150%; margin-bottom:5px; font-weight: 600; color:#1B8DCB;} ul ul, ol ol, ol ul, ul ol{margin-left:20px; margin-top:20px; margin-bottom:20px} /*texts*/ .txt-1{ font-size:70%;} .txt-2{ font-size:80%;} .txt-3{ font-size:90%;} .txt-4{ font-size:100%;} .txt-5{ font-size:110%;} .txt-6{ font-size:120%;} .txt-7{ font-size:130%;} .txt-8{ font-size:140%;} /*styles*/ .it{font-style: italic;} .blk{font-weight:900;} .bld{font-weight:600;} .nr{font-weight:400;} .lt{font-weight:100;} /* ------- LIST TYPES -------------------------------------------------------------------------------------------------------- */ /*type1*/ ul.list1{position: relative;} ul.list1 > li{ position:relative; clear:both; display: block; padding:10px 0 10px 0; border-bottom: 1px dashed #B6EBF8 } ul.list1 .ico{ float:left; margin-right:20px; margin-bottom:20px;} ul.list1 .text{ height: 100%; } ul.list1 .text *{color:#6E6E6E} /*type2*/ ul.list2{position: relative;} ul.list2 > li{ position:relative; clear:both; display: block; padding:30px 0 30px 0; } ul.list2 .ico{ float:left;} ul.list2 .row{ margin-left:60px; font-style: italic;} /*type3*/ ul.list3{position: relative;} ul.list3 > li { position:relative; clear:both; display: block; padding:10px 0 10px 0; } ul.list3 .ico { float:left;} ul.list3 .text{ margin-left:35px;} ul.list3 .text *{color:#6E6E6E} /*type4*/ ul.list4{position: relative; margin-left:0; padding-left:0;} ul.list4 { list-style-type:decimal-leading-zero; padding-left:40px; } ul.list4 > li{ position:relative; font-size:120%; clear:both; color:#1B8DCB; font-weight:bold; padding:8px 0 8px 0; } ul.list4 > li > p{ font-size:73%; font-weight:400;} ul.list4 > li ul { list-style-type:upper-latin; padding:20px 0 10px 30px; } ul.list4 > li ul > li { font-size:80%; font-weight:400; padding:5px 0 5px 0; color:#1B8DCB; font-weight: bold;} ul.list4 > li ul > li > p { font-weight: 400;} ul.list4 p *{color:#6E6E6E} /*type5*/ ul.list5{position: relative;} ul.list5 { list-style-type: decimal; list-style-position: inside; padding:10px;} ul.list5 > li{position:relative; padding:5px;} ul.list5 p *{color:#6E6E6E} /*type6*/ ul.list6{position: relative;} ul.list6 > li { position:relative; clear:both; display: block; padding:20px 0 20px 0; border-bottom:1px solid #EFEFEF; } ul.list6 > li:last-child{border-bottom:none;} ul.list6 .ico { float:left;} ul.list6 .text{ margin-left:45px;} ul.list6 .row{ font-size:90%;} ul.list4 .text *{color:#6E6E6E} /*type7*/ ul.list7{position: relative;} ul.list7 > li { position:relative; clear:both; display: block; padding:40px 0 40px 0; border-bottom:1px dashed #AEDEF4; overflow: hidden; } ul.list7 .img { float:left; width:300px; margin-right:20px; height:180px; overflow: hidden; border:5px solid #F5F5F5;} ul.list7 .img img{width:100%; height: auto} ul.list7 .text{ } /*mid-type1 horizontal*/ .mid-list1{float:right;} .mid-list1 > li{ position:relative; float:left; font-size:200%; margin:8px; list-style: none } .h-list1{float:right;} .h-list1 li{float:left; margin-left:10px; list-style: none} /* ------- ICON TYPES -------------------------------------------------------------------------------------------------------- */ .ico-tp1{ font-size:120%;} .ico-tp1 *{ color:#1B8DCB;} .ico-tp2{ font-size:150%; width:50px; height: 50px; background-color: #1B8DCB; } .ico-tp2 *{ color:white; font-weight:600; } .ico-tp3{ font-size:150%; } .ico-tp3 *{ color:#1B8DCB; font-weight:600; } .button{} .btn-1{background-color: #1B8DCB; float:right; margin-top:20px; padding: 10px; width:280px;} .btn-1 *{color: white; } /* ------- GALLERIES -------------------------------------------------------------------------------------------------------- */ .gallery {list-style: none!important;;} .gallery *{list-style: none!important;} .gallery{clear:both; overflow: hidden;} .gallery img{width:150px!important; height:150px!important; overflow: hidden!important; margin:10px!important; cursor:pointer;} /* ------- IMAGE FRAME -------------------------------------------------------------------------------------------------------- */ #image-frame{display:none; z-index:999000!important; position: fixed; left:0; top:0; bottom: 0; right:0;} #image-frame #imgCont{z-index:999001!important; position: fixed; background-color: #292929; border:5px solid #292929; } #image-frame #imgCont #img {position: absolute; right:0; left:0; top:0; bottom:0; background-size: cover; background-repeat: none; background-position: center center;} #image-frame #close-button{z-index:999002!important; position: absolute; right:-5px; top:-55px; background-color: #292929; color:white; cursor:pointer; padding:15px;} #image-frame #imgCont .area{z-index:999003!important;position: absolute; top:0; bottom:0;} #image-frame #imgCont #prev-area{left:0; right:50%;} #image-frame #imgCont #next-area{right:0;left:50%;} #image-frame #imgCont .icon{ cursor:pointer; color:white; z-index:999003!important; position: fixed; top:45%; font-size:500%;} #image-frame #imgCont #prev-ico{left:0;} #image-frame #imgCont #next-ico{right:0;} /* ------- IMAGE TYPES -------------------------------------------------------------------------------------------------------- */ .img-tp1{width:100%; height:auto;} /* ------- BREAKERS -------------------------------------------------------------------------------------------------------- */ .hr-brk-1{width:100%; margin-top:40px; margin-bottom:40px;} .hr-brk-2{width:100%; margin-top:60px; margin-bottom:60px;} .hr-brk-3{height:1px; width:100%; margin-top:40px; margin-bottom:40px; border-top:3px dashed #E8E8E8;} /* ================================================================================================================================ > SPECIFIED RULES ================================================================================================================================*/ #page-content img{ max-width:100%!important; height:auto!important;} #page-content .content{ margin-bottom:100px;} /* ------- MAIN / SIDE MENUS -------------------------------------------------------------------------------------------------------- */ #main-menu{float:right;margin-top:5px; } /*max menu*/ #menu-max *{list-style: none;} #menu-max .hr-menu li{ position:relative; display:block; padding:12px 20px 12px 20px; font-weight:400; } #menu-max .hr-menu > li{ float:left;} #menu-max .hr-menu > li > .ulCont{ overflow:hidden; z-index:9999!important; font-size:100%; visibility: hidden; width:250px; max-height: 0px; position: absolute; left:0; top:100%; background-color: #1B8DCB;} #menu-max .hr-menu > li > .ulCont ul li{border-bottom: 1px dotted #47AFE7; margin-left:-20px;} #menu-max .hr-menu > li > .ulCont ul li:hover{ background-color: #29AAEF} #menu-max .hr-menu > li.exp{padding-right:36px;} #menu-max .hr-menu > li.exp:after{content: "\e67a"; position: absolute; right:12px; font-family:'standart'; color:#555555} #menu-max .hr-menu > li.idle > span > a:hover{color:#1B8DCB; border-bottom:2px solid #1B8DCB;} #menu-max .hr-menu > li.exp:hover{background-color: #1B8DCB;} #menu-max .hr-menu > li.exp:hover:after{color: white;} #menu-max .hr-menu > li.exp:hover > .ulCont{visibility: visible; max-height: 1500px;} #menu-max .hr-menu > li.exp:hover a{color:white;} /*min menu*/ #menu-min *{list-style: none;} #menu-min .vr-menu{ overflow-y: scroll; overflow-x: hidden; position: fixed; padding-top:40px; background-color:#1B8DCB; right:-320px; top:0; bottom:0; z-index:99900!important; width:320px;} #menu-min .vr-menu li{ position:relative; display:block; padding:12px 20px 12px 20px; font-size:90%; font-weight:300; border-bottom:1px solid #47AFE7; } #menu-min .vr-menu li *{color:white;} #menu-min .vr-menu > li > .ulCont{ margin-top:20px; margin-bottom:20px;} #menu-min .vr-menu li:last-child{border-bottom:none;} #menu-min .vr-menu .list-button{cursor:pointer; position: absolute; right:12px; top:12px; font-size:160%;} #menu-min #expand-button {cursor:pointer; font-size:200%; } #menu-min #close-button{ display: none; cursor:pointer; font-size:200%; position: fixed; right:10px; top:10px; z-index:99901!important; width:50px; height:50px;} #menu-min #close-button *{color: white;} /*side menu*/ #menu-side ul{padding:20px;} #menu-side ul li{ padding:15px 0 15px 0;border-bottom: 1px dotted #D9EEF9} #menu-side ul li:last-child {border-bottom:none; } #menu-side ul li span.current a{color:#32A0E2; font-weight: bold} /* ------- SIDE BLOCK -------------------------------------------------------------------------------------------------------- */ #side-content{font-size:90%;} #side-content .title{color:white; background-color: #1B8DCB; padding:15px;} #side-content .title *{color:white; } #side-content #contact-form{overflow: hidden} #side-content #contact-form .button{width:100%;} /* ------- MAIN SLIDE -------------------------------------------------------------------------------------------------------- */ #main-slide .section{ position: relative;} #main-slide li{list-style: none} #main-slide > li {height:320px; background: center center no-repeat ; background-size:100%; } /* ------- MAIN BOXES -------------------------------------------------------------------------------------------------------- */ #main-boxes *{list-style: none;} #main-boxes .row{ width:100%; clear:both;} #main-boxes .cell{ width:33.3%; float:left; padding: 20px} #main-boxes .cell .img{ overflow: hidden; height:150px; width:100%;} #main-boxes .cell .img img{ width:100%!important; height:auto!important; } #main-boxes .cell .text{ margin-top:8px; padding-top: 8px; } /* ------- MAIN PAGE HEADER -------------------------------------------------------------------------------------------------------- */ #container-page-header{ border-top: 1px solid #E2F0FC; border-bottom: 1px solid #E2F0FC;} #container-page-header nav { font-size:90%;} #container-page-header nav * { color:#919191;} #container-page-header .breadcrumb-separator { margin-left:5px; margin-right:5px; color: #1B8DCB; } #section-page-header{padding-top:0; padding-bottom:0} .breadcrumb-current{text-decoration: underline;} /* ------- FLOW LINE -------------------------------------------------------------------------------------------------------- */ .flow{position: relative;} .flow > ul > li{margin:40px 0 40px 0; clear:both; overflow: hidden; position: relative; list-style:none!important } .flow > ul > li .fg{font-size:120%; float:left; width:60px; height:60px;} .flow > ul > li .content{margin-left:80px; padding-top:16px;} .flow > ul > li.inf{ font-style: italic; font-size: 90%} .flow > ul > li ul{font-style: italic;} .flow .flow-line{position: absolute; top:20px; bottom:33px; left:30px; width:3px; border-left:1px dashed #1B8DCB; z-index:-1;} /*fig1*/ .flow > ul > li .fig1{border:1px solid #1B8DCB; border-radius: 50%; background-color: white} .flow > ul > li .fig1 *{ color:#1B8DCB;} /*fig2*/ .flow > ul > li .fig2{} .flow > ul > li .fig2 .md-b{ background-color:#1B8DCB; width:20px; height:20px; border-radius: 50%;} /* ------- CONTACT -------------------------------------------------------------------------------------------------------- */ #main-contact .map{background-color:#63C6EB; border-bottom:none; color:white; border-radius:5px; margin-top:50px; } #main-contact .map .icon{font-size:160%; } #main-contact .map .content2{color:white; font-size:140%; cursor:pointer; } #main-contact .map .icon{color:white; } /* ------- CONTACT FORM -------------------------------------------------------------------------------------------------------- */ #contact-form{ } #contact-form .field{padding:10px; } #contact-form .inf{line-height:20px} #contact-form input, #contact-form textarea{padding:10px; background-color:white; border:1px solid #98D6F3; } #contact-form .button{float:right; width:200px; height:50px; border-radius:5px; text-align:center; overflow:hidden; position:relative; cursor:pointer; } #contact-form .bt{font-size:120%; color:white; position:absolute; width:100%; height:100%; cursor:pointer; } #contact-form .bt *{color:white; cursor:pointer; } #contact-form #bt-1{background-color:#63C6EB; left:0; bottom:0; } #contact-form #bt-1 label{position:absolute; left:0; top:0; width:100%; height:100%; padding-top:14px; } #contact-form #bt-2{background-color:#6FA041; left:0; top:100%; } #contact-form #bt-3{background-color:#F02059; left:0; bottom:100%; font-size:94%; line-height:10px; } #contact-form #bt-3 .icon{font-size:180%; } #contact-form #bt-4{background-color:#B2B2B2; right:100%; top:0; } #contact-form #msg_bar{position:absolute; left:0; bottom:0; height:5px; width:0; background-color:#137397; } .inf-hata{font-size:80%; color:#FB3C62; float:right; } /* ------- FAQ -------------------------------------------------------------------------------------------------------- */ #faq-index{cursor:pointer;} /* ------- FOOTER MAP -------------------------------------------------------------------------------------------------------- */ #container-map{padding:0!important; background-color: #E2E2E2; border-bottom:1px solid #7DC8F0 ; border-top:1px solid #7DC8F0 ;} #block-map{height:120px; position:relative; overflow:hidden;} #map_bg{width:100%; height:100%; background:url("../img/sc_harita.jpg"); background-position:center; background-repeat:no-repeat; position: absolute; left:0; top:0; display: block;} #block-map #map_init{position:absolute; left:0; top:0; right:0; bottom:0; z-index:999!important; cursor:pointer; } #block-map #map_init .cont{position:absolute; left:0; top:0; right:0; bottom:0; } #block-map #map_init .cont .inf{color:#FFFFFF; font-size:120%; } #block-map #map_init .cont .icon{color:#FFFFFF; font-size:400%; } #block-map #winCont{position:absolute; top:-100px; right:100px; background-color:#1B8DCB; z-index:999!important; cursor:pointer; font-size:130%; } #block-map #winCont span{float:left; padding:17px; color:white; } #block-map #winCont .icon{float:left; padding:7px; font-size:190%; color:white; } #block-map #map_canvas{position: absolute; left:0; top:0; height:100%; width:100%;} /* ------- IMAGE FRAME -------------------------------------------------------------------------------------------------------- */ #image-frame{} /* ------- FOOTER SHORTCUTS -------------------------------------------------------------------------------------------------------- */ #container-shortcuts{ background-color: #F3F3F3; } /* ------- FOOTER NOTE-------------------------------------------------------------------------------------------------------- */ #container-footernote{background-color: #1B8DCB; font-size:80%; } #container-footernote *{color:white; } /* ================================================================================================================================ > DESKTOP MODE ================================================================================================================================*/ @media screen and (min-width: 1024px){ .section{width:1250px;} #main-logo { float:left; width:250px; height:55px; position: relative;} #main-logo .col-1 { position: absolute; width:55px; height:55px;} #main-logo .col-2 { position: absolute; left:55px;} #main-logo .logo { height:100%; font-size:300%;} #main-logo .vLogo { font-size:100%; font-weight:900; color:white;} #main-logo .text { font-size:240%; line-height: 82%; height:34px; font-weight:900; color:#e30000;} #main-logo .subtext{ font-size:80%; } #menu-min{display: none;} #menu-max{display: inherit;} #main-slides > li{height:500px;} #map-brk{display: none;} .sec-group .tp1-1{ padding-right: 40px; border-right:1px solid #EBEBEB; float:left; width:70%;} .sec-group .tp1-2{ padding-left: 40px; float:left; width:30%;} #image-frame #imgCont{left:24%; top:18%; bottom: 18%; right:24%;} } /* ================================================================================================================================ > TABLET MODE ================================================================================================================================*/ @media screen and (min-width: 640px) and (max-width: 1024px){ .section{width:100%;} #main-logo { float:left; width:250px; height:55px; position: relative;} #main-logo .col-1 { position: absolute; width:55px; height:55px;} #main-logo .col-2 { position: absolute; left:55px;} #main-logo .logo { height:100%; font-size:300%;} #main-logo .vLogo { font-size:100%; font-weight:900; color:white;} #main-logo .text { font-size:240%; line-height: 82%; height:34px; font-weight:900; color:#e30000;} #main-logo .subtext{ font-size:80%; } #menu-min{display: inherit;} #menu-max{display: none;} #main-boxes .cell{ width:33.33%; float:left; padding: 10px} .sec-group .block{padding:20px; } .sec-eq2 .block{width:100%;} .sec-eq4 .block{width:50%;} .sec-group .eq1-1, .sec-group .eq1-2{width:50%;} .sec-group .tp1-1{ width:100%;} .sec-group .tp1-2{ margin-top:40px; width:100%;} #map-brk{display: none;} #image-frame #imgCont{left:18%; top:12%; bottom: 12%; right:18%;} } /* ================================================================================================================================ > PHONE MODE ================================================================================================================================*/ @media screen and (max-width: 640px){ .section{width:100%;} #main-logo { float:left; width:220px; height:55px; position: relative;} #main-logo .col-1 { position: absolute; width:40px; height:40px;} #main-logo .col-2 { position: absolute; left:40px;} #main-logo .logo { height:100%; font-size:300%;} #main-logo .vLogo { font-size:70%; font-weight:900; color:white;} #main-logo .text { font-size:200%; line-height: 82%; height:34px; font-weight:900; color:#e30000;} #main-logo .subtext{ font-size:70%; margin-top:-5px; } #menu-min{display: inherit;} #menu-max{display: none;} #container-main-slide{display: none;} #main-boxes .cell{ width:100%; float:none; padding: 20px} .gallery ul li{float:left; position:relative; width:50%; height:150px; border:2px solid #EAEAEA; overflow:hidden; } #image-frame #imgCont{left:5%; top:20%; bottom: 20%; right:5%;} .sec-group .block{padding:20px; float:none; } .sec-eq2 .block{width:100%;} .sec-eq4 .block{width:100%;} .sec-group .tp1-1{ width:100%;} .sec-group .tp1-2{ width:100%;} .sec-group .eq1-1, .sec-group .eq1-2{width:100%;} .sec-group .tp1-1{ padding-bottom: 40px; border-bottom :1px solid #EBEBEB; float:none; width:100%;} .sec-group .tp1-2{ padding-top: 40px; float:none; width:100%;} #map-brk{display: inherit;} }