/* yan menü */
.navigation { position: fixed; right: 0; top: 0; z-index: 9999999;}
.menu-active .navigation { z-index: 999;}
.navigation .menu-icon { position: absolute; padding-right: .45rem; padding-top: .1rem; padding-bottom: .1rem; top: 65px; right: 40px; font-size: 17px; letter-spacing: .2em; color: #FFF; font-weight: 500; text-decoration: none; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; width: 140px;}
.navigation .menu-icon i { font-size: 33px;}
.navigation .menu-icon i { font-size: 33px; position: relative; top: 5px;}
.navigation .menu-icon span { position: absolute; width: .25rem; height: 2px; top: 50%; margin-top: -1px; right: 0; background-color: #FFF;}
.navigation .menu-icon span:before { content: ''; position: absolute; top: -.08rem; right: 0; width: .25rem; height: 2px; background-color: #FFF;}
.navigation .menu-icon span:after { content: ''; position: absolute; bottom: -.08rem; right: 0; width: .25rem; height: 2px; background-color: #FFF;}
.navigation ul { position: relative; height: 100%; width: 20px; list-style-type: none;margin:0;}
.menu-active .navigation ul { display: none;}
.navigation ul li { position: relative; width: 300px; height: 20%; float: right; transform: translateX(100%); -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transition: all 0.3s ease-in-out; -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;}
.navigation ul li:nth-child(2) { transition-delay: 0.05s; -webkit-transition-delay: 0.05s; -moz-transition-delay: 0.05s; -ms-transition-delay: 0.05s; -o-transition-delay: 0.05s; }
.navigation ul li:nth-child(3) { transition-delay: 0.1s; -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -ms-transition-delay: 0.1s; -o-transition-delay: 0.1s; }
.navigation ul li:nth-child(4) { transition-delay: 0.15s; -webkit-transition-delay: 0.15s; -moz-transition-delay: 0.15s; -ms-transition-delay: 0.15s; -o-transition-delay: 0.15s; }
.navigation ul li:nth-child(5) { transition-delay: 0.2s; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -ms-transition-delay: 0.2s; -o-transition-delay: 0.2s; }
.navigation ul li:nth-child(6) { transition-delay: 0.25s; -webkit-transition-delay: 0.25s; -moz-transition-delay: 0.25s; -ms-transition-delay: 0.25s; -o-transition-delay: 0.25s; }
.navigation ul li::after { content: ''; position: absolute; top: 0; right: 100%; width: 2px; height: 100%; background-color: #F20D0E; transition: all 0.3s ease-in-out; -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-delay: .45s; -webkit-transition-delay: .45s; -moz-transition-delay: .45s; -ms-transition-delay: .45s; -o-transition-delay: .45s;}
.navigation ul li.active:after { width: 6px;}
.navigation ul li .black-layer { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0, 0, 0, .5); transition: all 0.2s ease-out;}
.navigation ul li .item { position: absolute; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; text-decoration: none; opacity: 0; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out;}
.navigation ul li .item:before { content: ''; position: absolute; width: 6px; height: 0; left: 0; bottom: 0; background-color: #0047e8; transition: all .2s ease-out; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -ms-transition: all .2s ease-out; -o-transition: all .2s ease-out;}
.navigation ul li:nth-child(1) .item {}
.navigation ul li:nth-child(2) .item { transition-delay: 0.05s; -webkit-transition-delay: 0.05s; -moz-transition-delay: 0.05s; -ms-transition-delay: 0.05s; -o-transition-delay: 0.05s;}
.navigation ul li:nth-child(3) .item { transition-delay: 0.1s; -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -ms-transition-delay: 0.1s; -o-transition-delay: 0.1s;}
.navigation ul li:nth-child(4) .item { transition-delay: 0.15s; -webkit-transition-delay: 0.15s; -moz-transition-delay: 0.15s; -ms-transition-delay: 0.15s; -o-transition-delay: 0.15s;}
.navigation ul li:nth-child(5) .item { transition-delay: 0.2s; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -ms-transition-delay: 0.2s; -o-transition-delay: 0.2s;}
.navigation ul li:nth-child(6) .item { transition-delay: 0.25s; -webkit-transition-delay: 0.25s; -moz-transition-delay: 0.25s; -ms-transition-delay: 0.25s; -o-transition-delay: 0.25s;}
.navigation ul li .item .text {position: absolute;font-size: 17px;font-weight: 800;letter-spacing: .05em;color: #FFF;left: 10px;bottom: 10px;text-shadow: 0 0 9px #353535;text-transform: uppercase;}
.navigation ul li .item .text span { font-family: Roboto; margin-bottom: .05rem; font-size: 19px; font-weight: 400; color: #FFF; letter-spacing: .05em; display: block;}
.navigation .for-close{display:none;}
@media (max-width: 480px) {
	.navigation ul li::after,
	.navigation ul li .black-layer{display:none;}
	.navigation.active .for-close {display:block; position: fixed; background: rgba(0,0,0,0.6); top: 0; width: 100%; height: 100%; left: 0; z-index: -1; }
	.navigation.active { z-index: 999999999999999;}
	.navigation.active ul li { transform: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none;}
	.navigation.active ul li:after { width: 0; transition-delay: 0s; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none;}
	.navigation.active ul li .item { opacity: 1;}
}
@media (min-width: 481px) {
	.navigation:hover { z-index: 999999999999999;}
	.navigation ul:hover + .menu-icon { right: calc(100% + .74rem + 222px);}
	.navigation ul:hover li { transform: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none;}
	.navigation ul:hover li:after { width: 0; transition-delay: 0s; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none;}
	.navigation ul li:hover .black-layer { background-color: transparent;}
	.navigation ul:hover li .item { opacity: 1;}
	.navigation ul:hover li.active .item:before { height: 100%;}
}
/* yan menü */
.detail-page { position: fixed; width: 100%; height: 100%; min-height: initial !important; left: 0; top: 0; z-index: 99999999999; background-color: #000; overflow: hidden; -webkit-overflow-scrolling: touch; transform: translateX(100%); -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transition: transform 1s cubic-bezier(0.860, 0.000, 0.070, 1.000); -webkit-transition: transform 1s cubic-bezier(0.860, 0.000, 0.070, 1.000); -moz-transition: transform 1s cubic-bezier(0.860, 0.000, 0.070, 1.000); -ms-transition: transform 1s cubic-bezier(0.860, 0.000, 0.070, 1.000); -o-transition: transform 1s cubic-bezier(0.860, 0.000, 0.070, 1.000);}
.detail-page.active { transform: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none;}
.detail-page .detail-page-close { position: absolute; top: 20px; right: 20px; /* left: 50%; */ /* margin-left: -.24rem; */ z-index: 9;}
.detail-page .detail-page-close .detail-page-close-icon { width: 60px; height: 60px; border: 2px solid rgba(255, 255, 255, .2); border-radius: 50%;}
.detail-page .detail-page-close .detail-page-close-icon:hover { background-color: #FFF; border-color: #FFF;}
.detail-page .detail-page-close > span { position: absolute; font-size: .1rem; font-weight: 800; color: #FFF; top: calc(100% + .13rem); left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%);}
.detail-page-close i { color: #fff; font-size: 42px; left: 17px; position: relative; top: 10px;}
.detail-page-close:hover i { color: #000;}
.detail-items-contents { padding: 90px 0; color: #fff;}
.detail-page .detail-page-item { position: relative; width: 100%; height: 100%; overflow: hidden; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out;}
.detail-page .detail-page-item .detail-items { width: 100%; height: 100%;}
.detail-page .detail-page-item .detail-items .detail-items-images { width: 45%; height: 100%; display: inline-block; vertical-align: top; overflow: hidden;}
.detail-page .detail-page-item .detail-items .detail-items-images .detail-item-image { width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); -moz-transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); -ms-transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); -o-transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);}
.detail-page .detail-page-item .detail-items .detail-items-contents .detail-items-middle { position: relative; top: 50%; margin-top: -1.2rem;}
.detail-page .detail-page-item .detail-items .detail-items-contents { position: absolute; width: 55%; height: 100%; padding-left: calc(5% - .3rem); display: inline-block; text-align: left; vertical-align: top; overflow: hidden; background-color: #000; z-index: 1;}
.detail-page .detail-page-item .detail-items .detail-items-contents::before { content: ''; position: absolute; width: 100%; height: 1.2rem; left: 0; top: 0; z-index: 1; background: rgba(0, 0, 0, 1); background: -moz-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.7) 99%, rgba(0, 0, 0, 0) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(99%, rgba(0, 0, 0, 0.7)), color-stop(100%, rgba(0, 0, 0, 0))); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.7) 99%, rgba(0, 0, 0, 0) 100%); background: -o-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.7) 99%, rgba(0, 0, 0, 0) 100%); background: -ms-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.7) 99%, rgba(0, 0, 0, 0) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.7) 99%, rgba(0, 0, 0, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=0);}
.swiper-container { width: 100%; height: 100%; margin-left: auto; margin-right: auto; }
.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; }
.ikinci .content { position: absolute; left: 0;}
.ikinci .content > div { text-align: left; color: #999;}
.ikinci .content > .top, .ikinci .content > .bottom {height: 300px;overflow: hidden;display: flex;}
.ikinci .content > .top {align-items: end;}
.ikinci .content > .bottom {align-items: start;}
.ikinci .swiper-slide {overflow: hidden;}
.ikinci .swiper-slide-active .content .middle { color: #fff; font-size: 50px; margin: 10px 0; font-weight: bold; padding-left: 60px;}
.bottom .slide-mini-title, .top .slide-mini-title { font-weight: bold; color: #666; cursor: pointer; padding-bottom: 7px;}
.top .slide-mini-title { margin: 0; padding: 7px 0 0;}
.detail-page-close .vbox-close { top: 20px; background-size: 20px; left: 20px;}
.detail-page-close:hover .vbox-close { background-image: url("https://www.periyodik-kontrol.com.tr/wp-content/themes/hosteva/assets/videobox/close-x.png") !important;}
.detail-items-middle111 .arrows {margin-top: .35rem; /* text-align: right; */position: absolute;left: -5px !important;top: 47% !important;}
.detail-items-middle111 .arrows .swiper-button-prev {display: block;right: auto;left: 10px !important;margin-top: -40px;background: unset !important;}
.detail-items-middle111 .arrows .swiper-button-next {display: block;margin-top: .2rem;left: 10px !important;right: auto;background: unset !important;top: 20px;}
.detail-items-middle111 .arrows .swiper-button-prev span {position: relative;width: 2px;height: 40px;margin-right: .07rem;background-color: #fff;display: inline-block;}
.detail-items-middle111 .arrows .swiper-button-next span {position: relative;width: 2px;height: 40px;margin-right: .07rem;background-color: #fff;display: inline-block;}
.detail-items-middle111 .arrows .swiper-button-prev span::before {content: '';position: absolute;bottom: 100%;left: -2px;width: 6px;height: 6px;border-style: solid;border-width: 0 2px 6px 2px;border-color: transparent transparent #fff transparent;}
.detail-items-middle111 .arrows .swiper-button-next.active span { background-color: #FFF;}
/* .ikinci .arrows .swiper-button-prev span::before { */ /* content: ''; */ /* position: absolute; */ /* bottom: 100%; */ /* left: -2px; */ /* width: 6px; */ /* height: 6px; */ /* border-style: solid; */ /* border-width: 0 2px 6px 2px; */ /* border-color: transparent transparent #4d4d4d transparent; */ /* text-align: right; */ /* color: #fff; *//* } */
.detail-items-middle111 .arrows .swiper-button-next span::before {content: '';position: absolute;top: 100%;left: -2px;width: 6px;height: 6px;border-style: solid;border-width: 6px 2px 0px 2px;border-color: #fff transparent transparent transparent;}
/* .ikinci .arrows .swiper-button-next.active span::before { */ /* border-color: #FFF transparent transparent transparent; *//* } */
.arrows { position: absolute; left: 60px; top: 170px; z-index: 99999999999999;}
.arrows > div:hover span {background: #fff !important;}
.arrows > div.swiper-button-next:hover span::before {border-color: #fff transparent transparent transparent !important;}
.arrows > div.swiper-button-prev:hover span::before {border-color: transparent transparent #fff transparent !important;}
@media (max-width: 767px) {
	.detail-page .detail-page-item .detail-items { display: flex; align-items: center; flex-direction: column; }
	.detail-page .detail-page-item .detail-items .detail-items-images { width: 100%; }
	.detail-page .detail-page-item .detail-items .detail-items-images img { width: 100%; height: 100%; object-fit: cover; object-position: bottom; }
	.detail-page .detail-page-item .detail-items .detail-items-contents { position: relative; width: 100%; padding: 0; }
	.detail-page .detail-page-item .detail-items .detail-items-contents .detail-items-middle111 { position: relative;}
	.detail-page .detail-page-item .detail-items .detail-items-contents .detail-items-middle111 .arrows { position: absolute; left: 15px; top: 50%; }
	.detail-page .detail-page-item .detail-items .ikinci .content { position: relative; left: 0; top: 0; height: auto; }
	.detail-page .detail-page-item .detail-items .ikinci .content > .top, .detail-page .detail-page-item .detail-items .ikinci .content > .bottom { height: auto !important; display: none !important; }
	.detail-page .detail-page-item .detail-items .ikinci .content > div { text-align: left; height: 100%; display: flex; flex-direction: column; justify-content: space-between;padding: 0 0 0 50px; }
	.detail-page .detail-page-item .detail-items .ikinci .content > div .text-middle { padding: 15px 15px 15px 0; height: calc(50vh - 350px); }
	.detail-page .detail-page-item .detail-items .ikinci .content .middle { font-size: 32px; line-height: 36px;}
}
@media (max-width: 554px) {
	.detail-page .detail-page-item .detail-items .detail-items-images { height: 50vh; }
	.detail-page .detail-page-item .detail-items .detail-items-contents {height: 50vh;}
	.detail-page .detail-page-item .detail-items .ikinci .content .middle { font-size: 20px; line-height: 25px;}
	.detail-page .detail-page-item .detail-items .ikinci .content .middle .button-middle a { font-size: 14px; }
	.detail-page .detail-page-item .detail-items .ikinci .content > div .text-middle { font-size: 14px; }
}
.detail-items-middle111 {position: relative;}
.middle {
	padding-left: 45px !important;
}