html, body {font-family: 'Montserrat', sans-serif;}
.table-content{display: table; width: 100%; height: 100%;}
.table-cell-content{display: table-cell; vertical-align: middle; text-align: center;}
.disp-block {display: block !important;}
.p0 {padding: 0;}
.fl-r {float: right;}
.s-margin {margin: 0 45px;}
.h-fix {height: 100%;}
.mobile-visible {display: none}
.loading{background:url('../images/loading.gif') center center; background-repeat: no-repeat;width:100%;height: 100%;position: fixed; top:0; left: 0; background-color:#fff; z-index: 99999;}
h1.head{font-size: 24px; color: #61111c; font-weight: 700; margin: 0;}
.swiper-pagination-bullet-active {background: #fff;}
/*ScrollBar Customize*/
::-webkit-scrollbar {
  width: 10px;
  height: 5px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #004078;
  border: 0px none #ffffff;
  border-radius: 100px;
}
::-webkit-scrollbar-thumb:hover {
  background: #004078;
}
::-webkit-scrollbar-track {
  background: #fff;
  border: 0px none #ffffff;
  border-radius: 14px;
}
::-webkit-scrollbar-corner {
  background: transparent;
}
.header-top.active {height: 100px;}
header {position: relative; top: 0; left: 0; width: 100%; z-index: 9999;}
header.active {position: fixed; top: 0; left: 0; height: 60px;}
header.active img {margin-top: 10px !important; max-height: 40px;}
header.active ul li {line-height: 60px;}
header.active ul li a{color: #999;}
header.active .back {position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: #013b6d; transition: all .6s; transition-delay: .1s;}
header.active .back.active {top: 0;}
header .header-top {background: #013f78; padding: 10px 0;}
header .header-top.active {display: none}
header .header-top ul {display: inline-block; padding: 0; margin: 0;}
header .header-top ul li {float: left; list-style: none; padding-left: 30px;}
header .header-top ul li:first-child {padding: 0 !important;}
header .header-top ul li a{color: #fff; font-size: 16px; text-decoration: none; padding-right: 14px;}
header .header-top ul li a img {width: 25px; margin-right: 5px;}
header .header-bottom {height: 100px;}
header .header-bottom.active {margin: 0; height: 60px}
header .header-bottom img {margin-top: 24px;}
header .header-bottom ul {list-style: none; margin: 0; padding: 0; line-height: 100px;}
header .header-bottom ul li {float: left;}
header .header-bottom ul li a{font-size: 16px; font-weight: 300; color: #353535; padding: 12px 14px; text-decoration: none; position: relative;}
header img.active {display: none;}
header.active img {display: none;}
header.active img.active {display: block;}
header.active .header-bottom ul li a {color: #fff;}
header .header-bottom ul li a.active::after{content:''; width: 6px; height: 6px; position: absolute; left: 50%; margin-left: -3px; bottom: 0; background: #fff; border-radius: 100px;}

section .slider .swiper-container {width: 100%;height: auto; max-height: 100%;}
section .slider .swiper-container .slide-bottom{position: absolute; bottom: 0; left: 0; width: 100%; z-index: 9999;}
section .slider .swiper-container .swiper-slide {width: 100%;position:relative; box-shadow: 3px 3px 33px #000;}
section .slider .swiper-container .swiper-slide img{width: 100%;}
section .slider .swiper-container .swiper-slide .overlay {position: absolute; top: 0;left: 0; width: 100%; height: 100%; z-index: 999; display: inline-block;}
section .slider .swiper-container .swiper-slide .overlay h1{color: #fff; font-weight: 200; font-size: 36px; text-align: left}
section .slider .swiper-container .swiper-slide .overlay p{font-size: 16px; color: #fff; font-weight: 200; text-align: left;}
section .slider .swiper-container .swiper-slide .overlay a{color: #fff; background: #0085ff; padding: 8px 40px; display: inline-block; border-radius: 10px; font-size: 18px; font-weight: 500; text-decoration: none; transition: all .6s;position: relative; overflow: hidden; float: left;}
section .slider .swiper-container .swiper-slide .overlay a:hover{background: #002a51; color: #fff;}




section #about {padding-top: 100px;}
section #about h1{font-size: 40px; font-weight: 900; color: #004078; letter-spacing: 3px;}
section #about p{font-size: 18px; color: #2b2c2e; font-weight: 300;}

section #sayilarla-biz .page-head h1 {margin-bottom: 50px; color: #004078; font-weight: 900; font-size: 36px;}
section #sayilarla-biz { padding-top: 100px;}
section #sayilarla-biz .item {border: 1px solid #004078; padding: 30px; transition: all 1s;}
section #sayilarla-biz .item:hover {box-shadow: 0px 4px 38.18px 7.82px rgba(38, 38, 38, 0.19); transform: translateY(-15px)}
section #sayilarla-biz .item h1 span{font-weight: 300}
section #sayilarla-biz .item  h1 {font-weight: 900; color: #004078; font-size: 25px;}

/*
section #status {padding: 100px 0;}
section #status .item {border: 1px solid #004078; padding: 40px 25px; transition: all .7s;}
section #status .item img {display: inline-block}
section #status .item img.active {display: none;}
section #status .item.active {box-shadow: 0px 4px 38.18px 7.82px rgba(38, 38, 38, 0.19); transform: scale(1.2); background: #004078;}
section #status .item.active img {display: none;}
section #status .item.active img.active {display: inline-block;}
section #status .item.active h1{color: #fff;}
section #status .item.active p{color: #fff;}
section #status .item h1{font-weight: 900; font-size: 34px; color: #2b2c2e;}
section #status .item p{font-weight: 300; font-size: 20px; color: #2b2c2e; text-align: justify}
*/

section #services {padding-top: 100px;}
section #services .page-head {margin-bottom: 50px}
section #services .page-head h1 {color: #004078; font-size: 36px; font-weight: 900; margin: 0;}
section #services .item {margin-top: 60px; display: inline-block;}
section #services .item img {margin-right: 10px;}
section #services .item  h1 {margin: 0; font-size: 20px; color: #013a6d; font-weight: 900; margin-left: 10px;}
section #services .item  p {font-size: 18px; color: #000; margin-left: 10px; margin-top: 10px; font-weight: 300;}

section #videos {padding-top: 100px;}
section #videos h1{color: #004078; font-weight: 900; font-size: 36px; margin-bottom: 60px;}
section #videos img {display: inline-block; cursor: pointer;}
section #videos .owl-nav {display: none}


section #gallery {padding-top: 100px;}
section #gallery  h1{color: #004078; font-weight: 900; font-size: 36px; margin-bottom: 60px;}
section #gallery .item {margin-top: 30px; position: relative;}
section #gallery .item  a{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999;}
section #gallery .item  .overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(1, 59, 109,.7); z-index: 99; opacity: 0; transition: all .7s;}
section #gallery .item:hover  .overlay {opacity: 1}
section #gallery .item .overlay i{color: #fff; font-size: 25px;}

section #brands {padding-top: 100px;}
section #brands h1 {color: #004078; font-weight: 900; font-size: 36px;}

section #references {padding-bottom: 100px}
section #references .page-head h1 {margin-bottom: 50px; color: #004078; font-weight: 900; font-size: 36px;}
section #references .references-items .owl-carousel {border: 1px solid #000; border-radius: 100px; padding: 0 100px}
section #references .references-items .owl-carousel img{filter: grayscale(100%); transition: all .6s;}
section #references .references-items .owl-carousel img:hover{filter: grayscale(0);}
section #references .references-items .owl-prev {transform: scale(10) translateY(-10%); background: #fff; position: absolute; top: 50%; left: 0; outline: none !important;}
section #references .references-items .owl-next {transform: scale(10) translateY(-10%); background: #fff; position: absolute; top: 50%; right: 0; outline: none !important;}


section #musteri-gorusleri {background: #000 url(../images/musteri-gorusleri-back.jpg) center center no-repeat; background-size: cover; padding: 100px 0;}
section #musteri-gorusleri .page-head h1{font-weight: 900; color: #fff; font-size: 36px; margin-bottom:30px; margin-top: 0;}
section #musteri-gorusleri .owl-nav {display: none}
section #musteri-gorusleri .item {background: rgba(255,255,255,.8); padding: 60px 40px; border-radius: 20px; float: left; width: 70%; display: inline-block;position: relative;left: 50%;transform: translateX(-50%);}
section #musteri-gorusleri .item h1{color: #444545; font-size: 35px; font-weight: 900;}
section #musteri-gorusleri .item h4{color: #444545; font-size: 18px; font-weight: 500;}
section #musteri-gorusleri .item p{color: #444545; font-size: 20px; font-weight: 300; margin-top: 40px;}


section #contact {padding-top: 100px;}
section #contact .page-head h1 {font-weight: 300; letter-spacing: 10px; color: #fff; font-size: 40px; padding: 150px 0; background: #013a6d url(../images/contact.jpg) center center no-repeat; background-size: cover; margin: 0; margin-bottom: 50px;}
section #contact form {position: relative; display: inline-block;}
section #contact input {width: 49%; float: left; margin-bottom: 2%; padding: 18px 30px; background: #1a4d7b; border: 0; font-size: 18px; font-weight: 300; color: #fff; border-radius: 20px; outline: 0;}
section #contact textarea {width: 99%; float: left; padding: 18px 30px; background: #1a4d7b; border: 0; font-size: 18px; font-weight: 300; color: #fff; border-radius:20px; height: 120px; min-height: 180px; max-width: 550px; min-width: 99%;outline: 0;}
section #contact textarea::placeholder {color: #fff;}
section #contact input::placeholder {color: #fff;}
section #contact input:nth-child(odd) {width: 49%; float: left; margin-right: 1%;}
section #contact button {position: absolute; right: 35px; bottom: 35px;background: transparent url(../images/button-send.png) center center no-repeat; background-size: contain; width: 40px; height: 40px; border: 0; outline: none;}
section #contact table tr td {font-size: 18px;padding: 5px 0; font-weight: 400; color: #1a4d7b}
section #contact table tr td:nth-child(even) {padding-left: 25px;}
section #contact table tr td h4 {font-size: 18px; font-weight: 400;border-bottom: 1px solid;padding-bottom: 20px; text-align: center;}
section #contact table tr td h5 {border: 1px solid #1a4d7b; padding: 14px 20px; text-align: center;border-radius: 100px}
section #contact .map {display: block; margin: 50px 0;}
section #contact p {margin: 0; padding: 20px 0; text-align: center;border-top: 1px solid #013b6d; font-size: 18px; color: #444545}
section #contact table tr td .social a{color: #1a4d7b;font-size: 22px;border: 1px solid #1a4d7b;border-radius: 100%;width: 45px;height: 45px;display: block;text-align: center;float: left;margin-right: 5px;    margin-top: 10px;}
section #contact table tr td .social a i{position: relative; top: 50%; transform: translateY(-50%);}



@media screen and (max-width: 1199px)
{
	header .header-bottom ul li a {font-size: 14px;}
	section .slider .swiper-container .swiper-slide .overlay h1 {font-size: 30px;}
	section .slider .swiper-container .swiper-slide .overlay p {font-size: 16px;font-size: 13px;}
	section .slider .swiper-container .swiper-slide .overlay a {font-size: 16px;padding: 8px 40px;}
	section #about h1 {font-size: 30px;}
	section #about p {font-size: 16px;}
	section #sayilarla-biz .page-head h1 {font-size: 30px;}
	section #services .page-head h1 {font-size: 30px;}
	section #brands h1 {font-size: 30px;}
	section #videos h1 {font-size: 30px;}
	section #services .item h1 {font-size: 18px;}
	section #services .item p {font-size: 16px;}
	section #references .page-head h1 {font-size: 30px;}
	section #musteri-gorusleri .item p {font-size: 18px;}
	section #contact .page-head h1 {font-size: 30px;}
	section #contact input {font-size: 16px;}
	section #contact textarea {font-size: 16px;}
	section #contact table tr td {font-size: 16px;}
	section #contact p {font-size: 16px;}
	header .header-top ul li a img {width: 20px; font-size: 15px;}
}

@media screen and (max-width: 991px) 
{
	.mobile-hidden{display: none}
	.outer-menu {display: block !important; right: 70px !important;}
	header .header-bottom ul li {line-height: 40px !important;}
	header .header-bottom ul li a {font-size: 24px !important;}
	section .slider .swiper-container .swiper-slide {width: 100%;}
	section #services .item h1 {font-size: 16px;}
	section #services .item p {font-size: 16px;}
	section #musteri-gorusleri .page-head h1 {font-size: 30px;}
	section #musteri-gorusleri .item h1 {font-size: 30px}
	section #musteri-gorusleri .item p {font-size: 16px;}
	section #contact input {font-size: 14px; padding: 20px 30px;}
	section #contact textarea {font-size: 14px; padding: 20px 30px;}
	section #contact table tr td {font-size: 14px;}
	section #contact p {font-size: 14px;}
	section #contact iframe {height: 300px;}
}
@media screen and (max-width: 768px) 
{
	.mtc {text-align: center;}
	section .slider .swiper-container .swiper-slide {overflow: hidden;}
	section .slider .swiper-container .swiper-slide .overlay h1 {font-size: 20px; margin-top: 20px;}
	section .slider .swiper-container .swiper-slide .overlay p {font-size: 12px; display: none;}
	section .slider .swiper-container .swiper-slide .overlay a {font-size: 12px;padding: 5px 40px;}
	header.active img {margin-top: -8px !important;}
	header .header-top ul {float: none; display: inline-block;}
	header .header-top ul li {padding-left: 15px;}
	header .header-top ul li a {font-size: 12px; padding: 0;}
	header .header-bottom {height: auto; padding: 20px 0;}
	header .header-bottom img {margin-top: 0;}
	.outer-menu {top: 0 !important;}
	.outer-menu.active {margin-top:-18px !important;}
	section #about {padding: 40px 0;}
	section #about h1 {font-size: 24px;}
	section #brands h1 {font-size: 24px;}
	section #videos h1 {font-size: 24px;}
	section #about p {font-size: 13px}
	section #sayilarla-biz {padding-top: 60px;}
	section #sayilarla-biz .item {margin-top: 20px;}
	section #sayilarla-biz .page-head h1 {margin-top: 0; margin-bottom: 40px;}
	section #sayilarla-biz .item h1 {font-size: 22px;}
	section #services .item {margin-top: 30px;}
	section #services .item p {font-size: 14px;}
	section #services .item img {display: inline-block; margin-bottom: 20px;}
	.owl-nav {display: none;}
	section #references .references-items .owl-carousel {padding: 0 30px; overflow: hidden;border: 1px solid #9c9c9c;}
	section #references {padding: 60px 15px;}
	section #references .page-head h1 {margin-bottom: 20px; font-size: 22px;}
	section #musteri-gorusleri .page-head h1 {font-size: 20px}
	section #musteri-gorusleri .item h1 {font-size: 20px;}
	section #musteri-gorusleri .item h4 {font-size: 16px;}
	section #musteri-gorusleri .item p {font-size: 14px; margin-top: 25px;}
	section #contact {padding-top: 60px;}
	section #contact .page-head h1 {font-size: 20px; padding: 50px 0;}
	section #contact textarea {margin-bottom: 40px;}
	section #contact button {bottom: 60px;}
	
}









.outer-menu.active {top: 10px !important;}
.outer-menu {position: absolute; right: 0; top: 30px; z-index: 1; display: none; transition:margin .3s;}
.outer-menu .checkbox-toggle {position: absolute; top: 0; left: 0; z-index: 2; cursor: pointer; width: 60px; height: 60px; opacity: 0;}
.outer-menu .checkbox-toggle:checked + .hamburger > div {-webkit-transform: rotate(135deg); transform: rotate(135deg); background: #fff;}
.outer-menu .checkbox-toggle:checked + .hamburger > div:before, .outer-menu .checkbox-toggle:checked + .hamburger > div:after {top: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg);}
.outer-menu .checkbox-toggle:checked + .hamburger > div:after {opacity: 0;}
.outer-menu .checkbox-toggle:checked ~ .menu {pointer-events: auto; visibility: visible;}
.outer-menu .checkbox-toggle:checked ~ .menu > div {-webkit-transform: scale(1); transform: scale(1); -webkit-transition-duration: .75s; transition-duration: .75s;}
.outer-menu .checkbox-toggle:checked ~ .menu > div > div {opacity: 1; -webkit-transition: opacity 0.4s ease 0.4s; transition: opacity 0.4s ease 0.4s;}
.outer-menu .checkbox-toggle:hover + .hamburger {}
.outer-menu .checkbox-toggle:checked:hover + .hamburger > div {-webkit-transform: rotate(225deg); transform: rotate(225deg);}
.outer-menu .hamburger {position: absolute; top: 0; left: 0; z-index: 1; width: 60px; height: 40px; padding: .5em 1em; cursor: pointer; -webkit-transition: box-shadow 0.4s ease; transition: box-shadow 0.4s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
header.active .outer-menu .hamburger > div {position: relative; -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 100%; height: 2px; background: #fff; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
.outer-menu .hamburger > div {position: relative; -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 100%; height: 2px; background: #013f78; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
.outer-menu .hamburger > div:before, .outer-menu .hamburger > div:after {content: ''; position: absolute; z-index: 1; top: -10px; left: 0; width: 100%; height: 2px; background: inherit; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;}
.outer-menu .hamburger > div:after {top: 10px;}
.outer-menu .menu {position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; visibility: hidden; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; outline: 1px solid transparent; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
.outer-menu .menu > div {width: 100%; height: 100%; color: #FEFEFE; background: rgba(0, 0, 0, 0.9); -webkit-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-box-flex: 0; -ms-flex: none; flex: none; -webkit-transform: scale(0); transform: scale(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
.outer-menu .menu > div > div {text-align: center; max-width: 90vw; max-height: 100vh; opacity: 0; -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease; overflow-y: auto; -webkit-box-flex: 0; -ms-flex: none; flex: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
.outer-menu .menu > div > div > ul {list-style: none; padding: 0 1em; margin: 0; display: block; max-height: 100vh; overflow: hidden;}

.outer-menu .menu > div > div > ul > li {padding: 0; margin: 1em; font-size: 24px; display: block; text-align: center; width: 100%; padding: 0; margin: 0; line-height: 50px;}
.outer-menu .menu > div > div > ul > li > a {/*--0%-100% border bottom actived----position: relative;*/ display: inline; cursor: pointer; color:#fff; -webkit-transition: color 0.4s ease; transition: color 0.4s ease;}
.outer-menu .menu > div > div > ul > li > a:hover {color: #e5e5e5; text-decoration: none;}
.outer-menu .menu > div > div > ul > li > a:hover:after {width: 100%;}
.outer-menu .menu > div > div > ul > li > a:after {content: ''; position: absolute; z-index: 1; bottom: -0.15em; left: 0; width: 0; height: 2px; background: #000; -webkit-transition: width 0.4s ease; transition: width 0.4s ease;}