* { margin: 0; padding: 0; border: 0; outline: none}
body {  width: 100%; height: 100%; color: #000; background-color: white; text-align: center;padding-top: 5px }
body {font-family: Arial, Helvetica, sans}
#top {display:none}
h1, h2 {padding: 15px 0 0 20px; font-size: larger; text-align: left}
h2 {font-weight:normal;}
#slogan{ text-shadow: 1px 1px 1px #696969; font-size: 16pt; font-weight:400 ;color: blue;padding: 0; text-align: center}
.hw{ width:315px; height: 48px; margin: 5px auto 0 auto}
.box { background-color:lightgray; width: 100%;  margin: 0 0 17px 0}
.menu { vertical-align: baseline;  font: 16px/24px verdana; margin: 7px auto;clear:both}
.menu a { color: blue; padding: 0.10em 0.3em 0.17em 0.3em; border:  1px solid cyan; border-radius: 0.2em; }
a { outline-style: none; text-decoration: none;}
p { text-align: left; font: 14px/20px arial; clear: both;}
p, .menu, .adres{ text-shadow: 0 0 1px #666;}
.par{padding: 18px 20px 18px 20px; text-align:left}
.ph{ display: block}
.ph svg { width:48px; height: 48px; float:left}
.ph span { display:block; text-align:center; float: left;}
.wa {float: right}
.wa svg { width:48px; height: 48px; float: right}
.wa span { display:block; text-align:center;float: right}
.footer {text-align: center; display:inline-block; height: 1.5em; padding: 3px 0 2px 0; }
iframe { width: 100%; max-height: 480px; min-height: 320px}
.mobile { color: RoyalBlue; font-size: xx-large; position:fixed; bottom:2%;right:0; z-index: 99;padding:12px}
.adres { font: normal large arial; padding: 25px 0 20px 0; text-align: center; color: #333; }
.contact {
    width:240px; height:240px; 
    /*display:block; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.box:last-of-type{margin-bottom:0}
.webmaster{ text-shadow:none; font-size: xx-small;color:#333}
.swiper-container p { line-height: 12px; text-align: center;}
.swiper-container img { width: 100%;}

@media only screen and (max-width:599px) {
 #i1,#i10,#i11,#i12,#i13,#i14,#i15,#i16,#i17,#i18,#i19,#i20,#i21,#i22{ min-height: 360px}
#i2,#i3,#i4,#i5,#i6,#i7,#i8,#i9 { min-height: 640px}
#i3 { min-height: 480px}
#i23 { min-height: 240px}
}
@media only screen and (max-width:432px){
 #i1,#i10,#i11,#i12,#i13,#i14,#i15,#i16,#i17,#i18,#i19,#i20,#i21,#i22{ min-height: 306px}
#i2,#i3,#i4,#i5,#i6,#i7,#i8,#i9 { min-height: 500px}
#i3 { min-height: 375px}
#i23 { min-height: 240px}
}
@media only screen and (max-width:360px){
#i1,#i10,#i11,#i12,#i13,#i14,#i15,#i16,#i17,#i18,#i19,#i20,#i21,#i22{ min-height: 270px}
#i2,#i3,#i4,#i5,#i6,#i7,#i8,#i9 { min-height: 480px}
#i3 { min-height: 360px}
#i23 { min-height: 240px}
}
@media only screen and (max-width:320px) {
#i1,#i10,#i11,#i12,#i13,#i14,#i15,#i16,#i17,#i18,#i19,#i20,#i21,#i22{ min-height: 240px}
#i2,#i3,#i4,#i5,#i6,#i7,#i8,#i9 { min-height: 426px}
#i3 { min-height: 320px}
#i23 { min-height: 240px}
}
@media only screen and (max-width:240px) {
#i1,#i10,#i11,#i12,#i13,#i14,#i15,#i16,#i17,#i18,#i19,#i20,#i21,#i22{ min-height: 180px}
#i2,#i3,#i4,#i5,#i6,#i7,#i8,#i9 { min-height: 320px}
#i3 { min-height: 240px}
#i23 { min-height: 240px}
}
@media only screen and (max-width:960px) and (orientation:landscape) {
.box { width: 80%; margin: 0 auto 17px auto}
#i2,#i3,#i4,#i5,#i6,#i7,#i8,#i9 { height: 100vh; width:unset }
#i1,#i10,#i11,#i12,#i13,#i14,#i15,#i16,#i17,#i18,#i19,#i20,#i21,#i22{ height:100vh; width:unset}
#i3 { height:100vh; width:unset}
#i23 { min-height: 240px}
}
@media only screen and (min-width : 600px){
body { background-color: #d3d3d3; background:url('../pic/velioglu_bg.png') fixed; }
#slogan { font-size: 20pt; }
.menu { font: 16px verdana; }
.hw { margin: 10px auto}
.menu {margin: 15px auto}
.menu a { border:  2px solid white; padding: 0.1em 0.3em; }
.mobile { display: none}
.menu a:hover { background-color: yellow; }
.box, hr {width:100%; background-color: white;margin: 0 auto 1.5em auto;}
iframe { height: 70vw}
#i1,#i10,#i11,#i12,#i13,#i14,#i15,#i16,#i17,#i18,#i19,#i20,#i21,#i22{ width: 100%; min-height: 480px}
#i3{ width: 480px; min-height: 480px}
#i2,#i4,#i5,#i6,#i7,#i8,#i9 { width: 480px; min-height: 640px}
}
@media only screen and (min-width : 768px) and (orientation:portrait){ 
.box, hr {width:85% }
#i1,#i10,#i11,#i12,#i13,#i14,#i15,#i16,#i17,#i18,#i19,#i20,#i21,#i22{ height: 480px; width: 100%}
#i3{ height: 480px; width: 480px}
#i2,#i4,#i5,#i6,#i7,#i8,#i9 { height: 640px; width:480px}
} 
 /* portrait tablets - bigger - Ipad Pro = MS Surface*/ 
@media only screen and (min-width : 1024px) and (orientation:portrait) {.box, hr {width:60vw }} 
/*landscape tablets*/
@media only screen and (min-width : 960px) and (orientation:landscape){.box, hr {width:70vw; }}
/*Ipad Lansacape*/
@media only screen and (min-width : 1024px) and (orientation:landscape){
.box, hr {width:100vh; background-color: white;margin: 0 auto 1.5em auto;}
iframe { height: 90vh}
#i1,#i10,#i11,#i12,#i13,#i14,#i15,#i16,#i17,#i18,#i19,#i20,#i21,#i22{ width: 100%; min-height: 480px}
#i3{ width: 480px; min-height: 480px}
#i2,#i4,#i5,#i6,#i7,#i8,#i9 { width: 480px; min-height: 640px}
}
/* Desktops, laptops*/ 
@media only screen and (min-width : 1150px) {.box, hr {width:640px }} 
/*Full HD TV*/
@media only screen and (min-width : 1920px) and (orientation:landscape) {.box, hr {width:50vw }
#i1,#i10,#i11,#i12,#i13,#i14,#i15,#i16,#i17,#i18,#i19,#i20,#i21,#i22{ min-height: 65vh}
} 
/*4K*/
@media only screen and (min-width : 3840px) {.box, hr {width:50vw }} 
@media only screen and (min-width : 2160px) and (orientation:landscape){
.box, hr {width:50vw; background-color: white;margin: 0 auto 1.5em auto;}
iframe { height: 70vh}
#i3{ width: 1200px; min-height: 1200px}
#i2,#i4,#i5,#i6,#i7,#i8,#i9 { width: 1200px; min-height: 1600px}
#i1,#i10,#i11,#i12,#i13,#i14,#i15,#i16,#i17,#i18,#i19,#i20,#i21,#i22{ width: 100%; min-height: 1025px}
}

:root { --swiper-theme-color: RoyalBlue}
.swiper-container { width: 100%; height: 40%; margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1;}
.swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box;}
.swiper-container-android .swiper-slide,
.swiper-wrapper { transform: translate3d(0px, 0, 0);}
.swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform;}
.swiper-slide { text-align: center; font-size: 18px; /* 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-container-autoheight,
.swiper-container-autoheight .swiper-slide { height: auto;}
.swiper-container-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height;}
:root { --swiper-navigation-size: 36px;}
.swiper-pagination { position: absolute; text-align: center; transition: 0.3s opacity; transform: translate3d(0, 0, 0); z-index: 10;}
.swiper-container-horizontal > .swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction { bottom: 10px; left: 0; width: 100%;}
.swiper-pagination-bullet { width: 10px; height: 10px; margin: 0 15px; display: inline-block; border-radius: 100%; background: #000; opacity: 0.2;}
.swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer;}
.swiper-pagination-bullet-active { opacity: 0.7; background: var(--swiper-pagination-color, var(--swiper-theme-color));}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 4px;}
.swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000;}

.swiper-button-next,.swiper-button-prev {width: calc(var(--swiper-navigation-size)/ 45 * 54);}

.swiper-button-next {
  /*background-image: url(/css/arrowr.svg);*/
  background-image: url(/css/arrowrGray.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
}

.swiper-button-next::after {
  display: none;
}
.swiper-button-prev {
  /*background-image: url(/css/arrowl.svg);*/
  background-image: url(/css/arrowlGray.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
}

.swiper-button-prev::after {
  display: none;
}


hr {width: 100%; margin: 0 auto 1em auto; height: 7px; background: #333;
background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
}

#lang {position:absolute;top:7px;right:7px; font-size:large;}
#langFound {font-size:x-small;color:gray; vertical-align:middle;}
#lan {color:white;background-color:Gray;padding:0 1.5px;}

#adr1 {text-align:right;width:18ch; margin: 0 auto}
#adr2 {text-align:right;width:32.5ch; margin: 0 auto}
.adr3 {display:block;float:left;}
.sakli {font-size:x-small;}