@keyframes logo {
	
        from {left: -100%;}
        to {left: 0%;}	
	
    }

@media screen and (max-width:899px) {

    html,body {width: 100%; height: 100%; padding: 0; margin: 0; overflow-x: hidden; background: linear-gradient(to bottom, #ffffff, #f2f2f2); }
    .clear {width: 100%; display: block; clear: both;}
    .header-top {width: 100%; min-height: 100px; background: #104e8b; display: inline-block; position: relative; float: none; left: 0px; top: 0px;}

    .menu {display: none;}

    .navbar-button {width: 10%; height: 70px; min-width: 70px; max-width: 70px; border-style: none; outline: none;  display: block; position: absolute; top: 5px; right: 5px;}
    .navbar-button img {width: 100%; height: 100%;}
    .mobile-menu {animation-name: logo; animation-duration: 1s;width: 100%; display: none; position: relative;  float: none;   }
    #mobil-menu {width: 100%; padding: 0; margin: 0; position: relative;}
    #mobil-menu li {width: 100%; min-height: 60px; list-style-type: none;float: none; margin-bottom: 0px; display: table;}
    #mobil-menu li a{text-decoration: none; width: 100%; height: 100%; display: table-cell; vertical-align: middle; text-align: center; color: #f2f2f2; background: #373737; font-size: 12pt; font-family: Tahoma;}
    #mobil-menu li a:hover{color: #373737; background: #f2f2f2; height: 70px; border-bottom: 0.3px solid #fb3f5d;}	

    #mobil-menu li ul {display: none;}
    #mobil-menu li:hover ul, #mobil-menu li:hover a {width: 100%;display: inline-block; position: relative; float: none; padding: 0; margin: 0px auto 0px;}
    #mobil-menu li:hover ul li{width: 100%; height: 70px;color: #373737; background: #f2f2f2; font-size: 12pt; font-family: Tahoma;}
    #mobil-menu li:hover ul li a{width: 100%; min-height: 100%;color: #373737; background: #f2f2f2; font-size: 12pt; font-family: Tahoma;}
    .content-top {width: 100%;display: block; position: relative; float: none; }

    .md-1 {width: 98%; max-width: 600px; display: block; position: relative; float: none; margin: 10px auto; }
    .md-2 {width: 98%; max-width: 600px; display: block; position: relative; float: none; margin: 10px auto; }
    .md-3 {width: 98%; max-width: 600px; display: block; position: relative; float: none; margin: 10px auto; }
    .md-4 {width: 98%; max-width: 600px; display: block; position: relative; float: none; margin: 10px auto; }
    .md-5 {width: 98%; max-width: 600px; display: block; position: relative; float: none; margin: 10px auto; }
    .md-6 {width: 98%; max-width: 600px; display: block; position: relative; float: none; margin: 10px auto; }
    .md-7 {width: 98%; max-width: 600px; display: block; position: relative; float: none; margin: 10px auto; }
    .md-8 {width: 98%; max-width: 600px; display: block; position: relative; float: none; margin: 10px auto; }
    .md-9 {width: 98%; max-width: 600px; display: block; position: relative; float: none; margin: 10px auto; }
    .md-10 {width: 98%; max-width: 600px; display: block; position: relative; float: none; margin: 10px auto; }
    .md-11 {width: 98%; max-width: 600px; display: block; position: relative; float: none; margin: 10px auto; }
    .md-12 {width: 98%; max-width: 600px; display: block; position: relative; float: none; margin: 10px auto; }
    .md-head {width: 100%; height: 40px; background: #373737; display: block; position: relative; float: none; margin-left: 0px; margin-top: 0px; margin-bottom: 0px;}

    .md-head-orange {width: 100%; height: 40px; background: #ffa500; display: block; position: relative; float: none; margin-left: 0px; margin-top: 0px; margin-bottom: 0px;}

    .md-head-red {width: 100%; height: 40px; background: #fb3f5d; display: block; position: relative; float: none; margin-left: 0px; margin-top: 0px; margin-bottom: 0px;}

    .md-head-high-gainsboro {width: 100%; min-height: 200px; background-image: url(../images/erciyes.jpg);background-size: 100% 100%;  background-repeat: repeat; background-position: top-left; background-color: #00688b; background-blend-mode: screen; display: inline-block; position: relative; float: none; margin-left: 0px; margin-top: 0; margin-bottom: 0px;}

    .md-head-high-gainsboro a {text-decoration: none; color: #fff;}


    .line-product-header {width: 100%; min-height: 40px; background: #f2f2f2; color: #373737; display: table; position:relative; float: none; margin-top: 0;}


    .item{text-align: center;height:200px !important;}
    .item img {height: 200px; min-height: 200px; max-height: 200px;}


    .news-line {width: 100%; min-height: 68px; background: #f5f5f5; display: table; position: relative; float: none; margin-top: 0; margin-bottom: 0; border-bottom: 0.5px solid #373737; }
    .news-message-line {width: 100%; min-height: 60px; background: #f5f5f5; display: table; position: relative; float: none; margin-top: 0; margin-bottom: 0; border-bottom: 0.5px solid #104e8b;}

    .footer {width: 100%; min-height: 400px; background: #104e8b; display: inline-block; position: relative; float: none; margin-top: 20px; margin-bottom: 0px;}
    .footer-bottom {width: 100%; height: 45px; display: block; position: relative; float: none; margin: 5px auto; text-align: center; border-top: 1px solid #f2f2f2;}
}








@media screen and (max-device-width:899px) {

html,body {width: 100%; height: 100%; padding: 0; margin: 0; overflow-x: hidden; background: linear-gradient(to bottom, #ffffff, #f2f2f2); }
.clear {width: 100%; display: block; clear: both;}
.header-top {width: 100%; min-height: 250px; background: #104e8b; display: inline-block; position: relative; float: none; left: 0px; top: 0px;}

.menu {display: none;}

.navbar-button {width: 10%; height: 120px; min-width: 150px; max-width: 150px; border-style: none; outline: none;  display: block; position: absolute; top: 20px; right: 10px;}
.navbar-button img {width: 100%; height: 100%;}
.mobile-menu {animation-name: logo; animation-duration: 1s;width: 100%; display: none; position: fixed; z-index: 1; top: 250px; }

#mobil-menu {width: 100%; padding: 0; margin: 0; position: relative;}
#mobil-menu li {width: 100%; min-height: 120px; list-style-type: none; float: none; margin-bottom: 0px; display: table;}
#mobil-menu li a{text-decoration: none; width: 100%; height: 100%; display: table-cell; vertical-align: middle; text-align: center; color: #f2f2f2; background: #373737; font-size: 30pt; font-family: Tahoma;}
#mobil-menu li a:hover{color: #373737; background: #f2f2f2; height: 120px; border-bottom-width: 0.3px; border-bottom-style: solid; border-bottom-color: #fb3f5d;}	

#mobil-menu li ul {display: none;}
#mobil-menu li:hover ul, #mobil-menu li:hover a {width: 100%;display: inline-block; position: relative; float: none; padding: 0; margin: 0px auto 0px;}
#mobil-menu li:hover ul li{width: 100%; height: 120px;color: #373737; background: #f2f2f2; font-size: 30pt; font-family: Tahoma;}
#mobil-menu li:hover ul li a{width: 100%; min-height: 100%;color: #373737; background: #f2f2f2; font-size: 30pt; font-family: Tahoma;}



	

.content-top {width: 100%;display: block; position: relative; float: none; }

.md-1 {width: 98%; max-width: 1000px; display: block; position: relative; float: none; margin: 35px auto; }
.md-2 {width: 98%; max-width: 1000px; display: block; position: relative; float: none; margin: 35px auto; }
.md-3 {width: 98%; max-width: 1000px; display: block; position: relative; float: none; margin: 35px auto; font-size: 32pt; }
.md-4 {width: 98%; max-width: 1000px; display: block; position: relative; float: none; margin: 35px auto; }
.md-5 {width: 98%; max-width: 1000px; display: block; position: relative; float: none; margin: 35px auto; }
.md-6 {width: 98%; max-width: 1000px; display: block; position: relative; float: none; margin: 35px auto; }
.md-7 {width: 98%; max-width: 1000px; display: block; position: relative; float: none; margin: 35px auto; }
.md-8 {width: 98%; max-width: 1000px; display: block; position: relative; float: none; margin: 35px auto; }
.md-9 {width: 98%; max-width: 1000px; display: block; position: relative; float: none; margin: 35px auto; }
.md-10 {width: 98%; max-width: 1000px; display: block; position: relative; float: none; margin: 35px auto; }
.md-11 {width: 98%; max-width: 1000px; display: block; position: relative; float: none; margin: 35px auto; }
.md-12 {width: 98%; max-width: 1000px; display: block; position: relative; float: none; margin: 35px auto; }
.md-head {width: 100%; height: 120px; background: #373737; display: block; position: relative; float: none; margin-left: 0px; margin-top: 0px; margin-bottom: 0px;}

.md-head-orange {width: 100%; height: 90px; background: #ffa500; display: block; position: relative; float: none; margin-left: 0px; margin-top: 0px; margin-bottom: 0px;}

.md-head-red {width: 100%; height: 90px; background: #fb3f5d; display: block; position: relative; float: none; margin-left: 0px; margin-top: 0px; margin-bottom: 0px;}

.md-head-high-gainsboro {width: 100%; min-height: 200px; background-image: url(../images/erciyes.jpg);background-size: 100% 100%;  background-repeat: repeat; background-position: top-left; background-color: #00688b; background-blend-mode: screen; display: inline-block; position: relative; float: none; margin-left: 0px; margin-top: 0; margin-bottom: 0px;}

.md-head-high-gainsboro a {text-decoration: none; color: #fff;}

.line-product-header {width: 100%; min-height: 40px; background: #f2f2f2; color: #373737; display: table; position:relative; float: none; margin-top: 0;}



.item{text-align: center;height:650px !important;}
.item img {height: 650px; min-height: 650px; max-height: 650px;}


.news-line {width: 100%; min-height: 100px; background: #f5f5f5; display: table; position: relative; float: none; margin-top: 0; margin-bottom: 0; border-bottom: 0.5px solid #373737; }

.news-message-line {width: 100%; min-height: 200px; background: #f5f5f5; display: table; position: relative; float: none; margin-top: 0; margin-bottom: 0; border-bottom-width: 4px; border-bottom-style: solid; border-bottom-color: #104e8b;}
.page-list {width: 98%; display: block; position: relative; float: none; margin: 20px auto ; }
.pagination {min-width: 98%; max-width: 98%; height: 50px; display: block; position: relative; float: none; margin: 20px auto 20px; }

.product-detail-line {width: 100%; min-height: 40px; border-bottom: 1px solid #606060; display: inline-block; position: relative; float: none; margin-top: 0px; margin-bottom: 0px;}

.footer {width: 100%; min-height: 400px; background: #104e8b; display: inline-block; position: relative; float: none; margin-top: 20px; margin-bottom: 0px; color: #f2f2f2; font-size: 20pt;}
.footer p {color: #f2f2f2; font-size: 32pt; }
.footer-bottom {width: 100%; min-height: 45px; display: inline-block; position: relative; float: none; margin: 5px auto; text-align: center; border-top: 1px solid #f2f2f2;}
}