/*---START mobile---*/
@media all and (max-width: 767px) {
	
/*---Header---*/


/*---Header---*/

.top{width:100%;height:auto;background:#E9EDF0;float:left;position:relative;z-index:9;border-top:6px solid #014962}
.header{width:100%;margin:0px auto 0px auto;float:left}
.logo a{width:258px;height:98px;background:url(../images/logo.png)no-repeat;float:none;display:block;margin:26px auto 0px auto;padding:0px;text-indent:-9999px}

.top_center{width:100%;height:auto;margin:0px auto 20px auto;}
.social_media{width:128px;height:36px;margin:0px auto 20px auto}
.social_media ul{display:block;margin:0px;padding:0px}
.social_media ul li a{display:block;margin:0px auto;padding:0px;width:32px;height:32px;}

.facebook a{width:32px;height:32px;background:url(../images/icon/facebook.png)no-repeat;display:block;text-indent:-9999px;transition-duration:0.3s}
.facebook a:hover{background:url(../images/icon/facebook.png)0px -32px no-repeat;}

.twitter a{width:32px;height:32px;background:url(../images/icon/twitter.png)no-repeat;display:block;text-indent:-9999px;transition-duration:0.3s}
.twitter a:hover{background:url(../images/icon/twitter.png)0px -32px no-repeat;}

.instagram a{width:32px;height:32px;background:url(../images/icon/instagram.png)no-repeat;display:block;text-indent:-9999px;transition-duration:0.3s}
.instagram a:hover{background:url(../images/icon/instagram.png)0px -32px no-repeat;}

.slogan{width:320px;height:28px;display:block;margin:20px auto;display:block;padding:0px;overflow:hidden}
.slogan img{width:320px;height:28px;display:block;margin:0px auto;display:block;padding:0px}

.slogantr{width:320px;height:28px;display:block;margin:20px auto;display:block;padding:0px;overflow:hidden}
.slogantr img{width:320px;height:28px;display:block;margin:0px auto;display:block;padding:0px}

.top_right{width:250px;height:auto;float:none;margin:10px auto 0px auto;}
.top_right h1{display:block;margin:10px 0px 0px 0px;padding:0px;font-size:22px;color:#333;font-weight:600;float:left}
.top_right h1:before{display:block;margin:0px 4px;padding:0px;width:46px;height:30px;background:url(../images/icon/phone.png)no-repeat;float:left;content:""}

.search{width:220px;height:auto;float:left;border:2px solid #005876;height:36px;border-radius:3px;margin:20px 0px 10px 10px}
.search input {width:180px; background:none; height:32px;text-indent:10px; border:1px solid #EEEFF6; outline:none;margin:0px 0px 0px 0px;border-radius:3px;float:left}
.search button {width:36px;height:32px;background:#333;float:right;display:block;margin:0px;padding:0px;text-indent:-9999px;background:url(../images/search.jpg)no-repeat}



/*---Menü---*/

.menu{width:100%;background:none;height:70px;margin:0px auto 0px auto;position:relative;z-index:11;float:left;background:url(../images/menu.jpg)repeat-x;border-radius:5px;display:none}

/*---Responsive Menü---*/


#menus{display:none;}
.mmenu a{width:100%;height:50px;  cursor:pointer; line-height:50px; background:#013D50; display:block;float:left;margin-top:0px;border-bottom:3px solid #012D3A}
.mmenu a h4{font-size:18px; color:#fff; font-weight:500; margin:0; margin-left:25px; height:50px; line-height:50px; float:left;}
.mmenu a:after{width:34px; height:18px; float:right; margin-right:20px; margin-top:15px; content:""; background:url(../images/list.png) no-repeat;}

.res-menu{width:100%;height:auto;display:block;background:#014962;float:left}
.res-menu ul{display:block;margin:0px;padding:0px}
.res-menu ul li{display:block;margin:0px;padding:0px;width:100%}
.res-menu ul li a{display:block;margin:0px;padding:0px;width:100%;color:#fff;text-indent:30px;height:40px;line-height:40px;border-bottom:1px solid #012D3A;transition-duration:0.3s}
.res-menu ul li a:hover{border-bottom:1px solid #fff}

.res-menu >ul> li> ul{display:block; position:relative; width:100%; height:auto; overflow:hidden; left:0; top:0px;border-radius:5px;opacity:1;float:right; }
.res-menu >ul> li> ul >li> a{text-indent:50px }
.res-menu> ul> li:hover ul{display:block;transition-duration:0.5s}



/*---Slider  &  SubHeader---*/

.subheader{width:100%; height:150px;  padding-top:0px; margin:-20px 0px 0px 0px ; position:relative;z-index:1 ;float:left;background:url(../images/subheader.jpg)no-repeat center center;float:left}
.subheader h1{display:block;margin:0px auto;padding:0px;line-height:210px;color:#fff;width:100%;text-align:left;text-indent:20px;font-size:28px}


.slider{width:100%; height:150px;  padding-top:0px; margin:0px 0px 20px 0px ; position:relative;z-index:1 ;float:left;overflow:hidden}
.carousel-inner{background:#DFE1E7;height:150px}
.carousel-control.left, .carousel-control.right  {background:none;z-index:54;width:8%}

.left span{background:url(../images/icon/sprite.png) 0px 0px no-repeat; width:40px; height:40px; position:absolute;  left:30px; top:32%; z-index:555; }
.right span{background:url(../images/icon/sprite.png) -40px 0px no-repeat; width:40px; height:40px; position:absolute;  right:30px; top:-8%; z-index:555;}


.carousel-inner>.item>img, .carousel-inner>.item>a>img {
    line-height: 1;
    height: 150px;
}


.container{width:100%;margin:30px auto;overflow:hidden }

.markas{width:100%;height:auto;float:right;margin:0px 0px 0px 0px}
.markas ul{display:block;margin:26px 0px 0px 0px;padding:0px;}
.markas ul li{display:block;padding:0px;width:100%}
.markas ul li a{display:block;padding:0px;width:100%;height:40px;margin:2px auto;border-radius:4px;color:#fff;font-weight:600;text-align:center;line-height:38px;transition-duration:0.3s;background:#005470}

.markas ul li a:hover{background:#003648}



/*---Tittle---*/

.tittle{width:100%;height:62px;border-bottom:none}
.tittle h1{display:block;margin:0px;padding:0px;text-align:center;line-height:62px;color:#fff;font-weight:600;font-size:22px;width:100%;height:62px;background:url(../images/tittle.png)repeat-x;float:left}

/*---Ürünler---*/


.urunler{width:100%;height:auto;margin:20px 0px 0px 0px;float:left}

.urunler ul{display:block;margin:0px;padding:0px}
.urunler ul li{float:none;margin:0px auto}
.urunler ul li a{display:block;margin:10px auto 0px auto;padding:0px;width:260px;border:1px solid #ddd;height:348px;transition-duration:0.3s;float:none}
.urunler ul li a:hover {border:1px solid #005572;}
.urunler ul li a img{display:block;margin:4px;padding:0px;width:250px;height:188px;position:relative;z-index:1}
.urunler ul li a h1{display:block;margin:10px auto 5px auto;padding:0px;width:220px;height:22px;text-align:center;font-size:19px;color:#333;font-weight:600;overflow:hidden}
.urunler ul li a p{display:block;margin:0px auto;padding:0px;width:220px;height:56px;text-align:center;font-size:13px;color:#777;overflow:hidden}
.urunler ul li a strong{display:block;margin:10px auto 0px auto;padding:0px;width:150px;height:36px;text-align:center;font-size:14px;color:#005572;border:2px solid #005572;line-height:32px;border-radius:3px;transition-duration:0.3s;font-weight:500}
.urunler ul li a:hover strong{color:#fff;background:#005572;}
.urunler ul li a span{display:none}
.urunler ul li a:hover span{width:250px;cursor:pointer; font-size:20px; color:#fff; line-height:188px;text-align:center; height:188px; display:block; position:relative;z-index:555;background:url(../images/blue.png)repeat;font-weight:600;text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8);margin:-193px auto 0px auto;transition-duration:0.5s}

/*---Footer---*/

.footer{width:100%;height:auto;background:#003D50;border-top:6px solid #6A8E9E;float:left}

.footers{width:100%;height:auto;margin:40px auto 0px auto;overflow:hidden}

.footer1{width:100%;height:auto;float:left;margin:0px 0px 0px 0px}
.footer-logo a{width:258px;height:98px;background:url(../images/footer-logo.png)no-repeat;display:block;margin:20px auto;padding:0px;text-indent:-9999px;float:none}
.footer1 p{width:258px;height:140px;color:#C7C7C7;margin:10px auto;font-size:13px;text-align:left;float:none;text-align:center}

.footer2{width:220px;height:auto;float:left;margin:30px 22px 0px 22px;display:none}
.footer2 h1{display:block;margin:0px;padding:0px;color:#C7C7C7;font-size:20px;text-align:center}
.footer2 ul{display:block;margin:20px 0px 0px 0px;padding:0px;}
.footer2 ul li a{display:block;margin:0px;padding:0px;width:100%;height:40px;border-bottom:1px solid #002D3C;text-align:center;line-height:40px;color:#C0CFD4;font-weight:300;font-size:14px;transition-duration:0.3s}
.footer2 ul li a:hover{border-bottom:1px solid #C7C7C7;color:#fff}


.footer3{width:220px;height:auto;float:left;margin:30px 22px 0px 22px;display:none}
.footer3 h1{display:block;margin:0px;padding:0px;color:#C7C7C7;font-size:20px;text-align:center}
.footer3 ul{display:block;margin:20px 0px 0px 0px;padding:0px;}
.footer3 ul li a{display:block;margin:0px;padding:0px;width:100%;height:40px;border-bottom:1px solid #002D3C;text-align:center;line-height:40px;color:#C0CFD4;font-weight:300;font-size:14px;transition-duration:0.3s}
.footer3 ul li a:hover{border-bottom:1px solid #C7C7C7;color:#fff}

.footer4{width:220px;height:auto;float:none;margin:30px auto 0px auto}
.footer4 h1{display:block;margin:0px 0px 20px 0px;padding:0px;color:#C7C7C7;font-size:20px;text-align:center}
.footer4 li{display:block;margin:0px;padding:0px;width:100%;height:40px;border-bottom:1px solid #002D3C;text-align:center;color:#C0CFD4;font-weight:300;font-size:14px;line-height:40px;}


.footer-bottom{width:100%;height:auto;margin:20px auto;overflow:hidden}
.footer-bottom p{width:100%;height:auto;color:#C7C7C7;margin:0px 0px;font-size:13px;text-align:center;float:left;line-height:50px}
.mornet a{width:109px;height:17px;background:url(../images/mornet.png)no-repeat;float:none;display:block;text-indent:-9999px;margin:16px auto 10px auto;transition-duration:0.3s}
.mornet a:hover{background:url(../images/mornet.png)0px -17px no-repeat;}

.yukari-cik a{width:49px;height:49px;float:none;background:url(../images/yukari.png)no-repeat;display:block;margin:50px auto 0px auto;padding:0px;transition-duration:0.3s;cursor:pointer}
.yukari-cik a:hover{background:url(../images/yukari.png)0px -49px no-repeat;}



.lefts{width:280px;background:#005470;height:auto;float:none;margin:40px auto 0px auto;padding:0px 0px 10px 0px;border-radius:4px;overflow:hidden;display:none}


.left1{width:100%;margin:10px 0px 0px 0px;float:left}
.left1 h1{display:block;margin:10px auto 10px auto;padding:0px;width:260px;font-size:19px;font-weight:600;background:#004962;height:50px;color:#fff;text-align:center;line-height:50px;overflow:hidden;border-radius:3px}
.left1 ul{display:block;margin:0px auto;padding:0px;width:260px;}
.left1 ul li a{display:block;margin:0px;padding:0px;width:100%;height:50px;border-bottom:1px solid #003F53;float:left;color:#e4e4e4;font-size:16px;line-height:50px;text-align:center}
.left1 ul li ul{display:block;margin:0px;padding:0px;width:100%}
.left1 ul li ul li a{display:block;margin:0px;padding:0px;width:100%;font-size:13px;height:40px;line-height:40px}
.left1 ul li a:hover{border-bottom:1px solid #fff;color:#fff;}

.left3{width:100%;margin:10px 0px 0px 0px;float:left}
.left3 h1{display:block;margin:10px auto 10px auto;padding:0px;width:260px;font-size:19px;font-weight:600;background:#004962;height:50px;color:#fff;text-align:center;line-height:50px;overflow:hidden;border-radius:3px}
.left3 ul{display:block;margin:0px auto;padding:0px;width:260px;}
.left3 ul li a{display:block;margin:0px;padding:0px;width:100%;height:50px;border-bottom:1px solid #003F53;float:left;color:#e4e4e4;font-size:16px;line-height:50px;text-align:center}
.left3 ul li ul{display:block;margin:0px;padding:0px;width:100%}
.left3 ul li ul li a{display:block;margin:0px;padding:0px;width:100%;font-size:13px;height:40px;line-height:40px}
.left3 ul li a:hover{border-bottom:1px solid #fff;color:#fff;}

.left2{width:100%;margin:20px 0px 0px 0px;float:left}
.left2 h1{display:block;margin:10px auto 10px auto;padding:0px;width:260px;font-size:19px;font-weight:600;background:#004962;height:50px;color:#fff;text-align:center;line-height:50px;overflow:hidden;border-radius:3px}
.left2 ul{display:block;margin:0px auto;padding:0px;width:260px;}
.left2 ul li a{display:block;margin:0px;padding:0px;width:100%;height:50px;border-bottom:1px solid #003F53;float:left;color:#e4e4e4;font-size:16px;line-height:50px;text-align:center}
.left2 ul li a:hover{border-bottom:1px solid #fff;color:#fff;}


.right{width:96%;background:#fff;height:auto;float:none;margin:80px auto 0px auto;min-height:386px}
.right h1{display:block;margin:0px 0px 10px 0px;padding:0px;width:100%;font-size:18px;font-weight:600}
.right p{display:block;margin:0px 0px 10px 0px;padding:0px;width:100%;font-size:14px;font-weight:500}

/*---Kategori İÇ ---*/


.urun-ic{width:100%;height:auto;margin:0px 0px 0px 0px;float:left;}

.urun-ic ul{display:block;margin:0px;padding:0px}
.urun-ic ul li a{display:block;margin:10px auto 0px auto;padding:0px;width:240px;border:1px solid #ddd;height:348px;transition-duration:0.3s;float:none;position:relative;z-index:0}
.urun-ic ul li a:hover {border:1px solid #005572;}

.urun-ic ul li a h1{display:block;margin:10px auto 5px auto;padding:0px;width:220px;height:22px;text-align:center;font-size:19px;color:#333;font-weight:600;overflow:hidden}
.urun-ic ul li a p{display:block;margin:0px auto;padding:0px;width:220px;height:56px;text-align:center;font-size:13px;color:#777;overflow:hidden}
.urun-ic ul li a strong{display:block;margin:10px auto 0px auto;padding:0px;width:150px;height:36px;text-align:center;font-size:14px;color:#005572;border:2px solid #005572;line-height:32px;border-radius:3px;transition-duration:0.3s;font-weight:500}
.urun-ic ul li a:hover strong{color:#fff;background:#005572;}
.urun-ic ul li a span{display:none}
.urun-ic ul li a:hover span{width:230px;cursor:pointer; font-size:20px; color:#fff; line-height:188px;text-align:center; height:188px; display:block;background:url(../images/blue.png)repeat;font-weight:600;text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8);margin:24px auto 0px auto;transition-duration:0.5s;left:0;right:0}

/*---Ürünler İç---*/


.urun-detay{width:100%;height:auto;float:left}

.detail-content{width:96%;height:auto;float:none;margin:16px auto 0px auto}
.rightsw{width:100%;background:#fff;height:auto;float:right;margin:40px 0px 0px 0px;min-height:386px}
.detail-photo{width:96%;height:auto;float:none;margin:0px auto}
.detail-content h5{display:block;margin:20px 0px 10px 0px;padding:0px;float:left;width:100%;font-size:16px;color:#005470;font-weight:600}
.detail-content p{display:block;margin:0px 0px 10px 0px;padding:0px;float:left;width:100%;font-size:14px;color:#666;font-weight:500}



/*-------MODAL-------------------------*/

.product-form{width:100%;height:50px;margin:20px 0px 0px 0px;border-radius:6px;background:#004962}
.product-form h4 a{display:block;margin:0px;padding:0px;color:#fff;font-size:18px;text-align:center;line-height:50px;font-weight:600}
.product-form h4 a:hover{text-decoration:underline}



.productsf input{width:100%;padding-left:10px; height:38px; outline:none; color:#97ACB9; border:1px solid #8AA3B0; margin-top:15px; background:#fff;}
.productsf textarea{width:100%;padding-left:10px; padding-top:5px; outline:none; height:100px; max-height:150px; max-height:100%; color:#97ACB9; border:1px solid #8AA3B0; margin-top:15px; background:#fff;}
.productsf select{width:100%;padding-left:10px; padding-top:5px; outline:none; height:38px; max-height:150px; max-height:100%; color:#97ACB9; border:1px solid #8AA3B0; margin-top:15px; background:#fff;}
.productsf button{float:left; margin-bottom:20px;height:42px; color:#fff; outline:none; line-height:42px; background:#006388; margin-top:20px; padding:0px 14px;}


/*--------------------------------*/

/*---MARKALAR SAYFASI---*/


.markalarr{width:100%;float:left;margin:20px 0px}
.markalarr ul{display:block;margin:26px 0px 0px 0px;padding:0px;}
.markalarr ul li{display:block;padding:0px;width:48%;height:114px;margin:1% 1%;border:1px solid #ddd;border-bottom:3px solid #ddd;transition-duration:0.3s;float:left}
.markalarr ul li img{display:block;margin:0px auto;padding:0px;width:90%;height:110px;}
.markalarr ul li:hover{border:1px solid #015577;border-bottom:3px solid #015577}







/*---ÜRÜN DETAY---*/


           .demo-gallery {
              margin-bottom: 0; margin:0px 0px 0px 0px; padding:0;float:left;display:block;width:100%;float:left
            }

            .demo-gallery strong {
              display:block;margin:0px auto;padding:0px;float:left;width:96%;float:none;
            }
			
            .demo-gallery strong img {
              display:block;margin:8px auto 8px auto;padding:0px;float:none;width:96%;border-radius:4px;border:2px solid #f4f4f4
            }			

            .demo-gallery> ul {
              margin-bottom: 0; margin:4px 0px 0px 0px; padding:0;display:block;
            }
            .demo-gallery> ul > li {
                float: left;
                margin:1%;
                width: 31%;
				height:100px;    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;
            }
            .demo-gallery> ul > li a {
              border: 3px solid #FFF;
              border-radius: 3px;
              display: block;
              overflow: hidden;
              position: relative;
              float: left;
			  height:96px;
            }

            .demo-gallery > ul > li a > img {
              -webkit-transition: -webkit-transform 0.15s ease 0s;
              -moz-transition: -moz-transform 0.15s ease 0s;
              -o-transition: -o-transform 0.15s ease 0s;
              transition: transform 0.15s ease 0s;
              -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
              
              width: 100%;border-radius:3px; flex-shrink:0;height:100%;

object-fit: cover
            }
            .demo-gallery > ul > li a:hover > img {
              -webkit-transform: scale3d(1.1, 1.1, 1.1);
              transform: scale3d(1.1, 1.1, 1.1);
            }
            .demo-gallery > ul > li a:hover .demo-gallery-poster > img {
              opacity: 1;
            }
            .demo-gallery > ul > li a .demo-gallery-poster {
              background-color: rgba(0, 0, 0, 0.1);
              bottom: 0;
              left: 0;
              position: absolute;
              right: 0;
              top: 0;
              -webkit-transition: background-color 0.15s ease 0s;
              -o-transition: background-color 0.15s ease 0s;
              transition: background-color 0.15s ease 0s;
            }
            .demo-gallery > ul > li a .demo-gallery-poster > img {
              left: 50%;
              margin-left: -10px;
              margin-top: -10px;
              opacity: 0;
              position: absolute;
              top: 50%;
              -webkit-transition: opacity 0.3s ease 0s;
              -o-transition: opacity 0.3s ease 0s;
              transition: opacity 0.3s ease 0s;
            }
            .demo-gallery > ul > li a:hover .demo-gallery-poster {
              background-color: rgba(0, 0, 0, 0.5);
            }
            .demo-gallery .justified-gallery > a > img {
              -webkit-transition: -webkit-transform 0.15s ease 0s;
              -moz-transition: -moz-transform 0.15s ease 0s;
              -o-transition: -o-transform 0.15s ease 0s;
              transition: transform 0.15s ease 0s;
              -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
              height: 100%;
              width: 100%;
            }
            .demo-gallery .justified-gallery > a:hover > img {
              -webkit-transform: scale3d(1.1, 1.1, 1.1);
              transform: scale3d(1.1, 1.1, 1.1);
            }
            .demo-gallery .justified-gallery > a:hover .demo-gallery-poster > img {
              opacity: 1;
            }
            .demo-gallery .justified-gallery > a .demo-gallery-poster {
              background-color: rgba(0, 0, 0, 0.1);
              bottom: 0;
              left: 0;
              position: absolute;
              right: 0;
              top: 0;
              -webkit-transition: background-color 0.15s ease 0s;
              -o-transition: background-color 0.15s ease 0s;
              transition: background-color 0.15s ease 0s;
            }
            .demo-gallery .justified-gallery > a .demo-gallery-poster > img {
              left: 50%;
              margin-left: -10px;
              margin-top: -10px;
              opacity: 0;
              position: absolute;
              top: 50%;
              -webkit-transition: opacity 0.3s ease 0s;
              -o-transition: opacity 0.3s ease 0s;
              transition: opacity 0.3s ease 0s;
            }
            .demo-gallery .justified-gallery > a:hover .demo-gallery-poster {
              background-color: rgba(0, 0, 0, 0.5);
            }
            .demo-gallery .video .demo-gallery-poster img {
              height: 48px;
              margin-left: -24px;
              margin-top: -24px;
              opacity: 0.8;
              width: 48px;
            }
            .demo-gallery.dark > ul > li a {
              border: 3px solid #04070a;
            }
            .home .demo-gallery {
              padding-bottom: 80px;
            }






/*---------------*/
/***** REFERANSLAR İÇ *****/
/*---------------*/



            .demo-gallerys {
              margin-bottom: 0; margin:0px 0px 0px 0px; padding:0;float:left;display:block;
            }



            .demo-gallerys > ul {
              margin-bottom: 0; margin:0px 0px 0px 0px; padding:0;display:block
            }
            .demo-gallerys > ul > li {
                float: left;
                margin:2px 0.5% 4px 0.5%;
                width: 48%;
				height:146px;
            }
            .demo-gallerys > ul > li a {
              border: 3px solid #FFF;
              border-radius: 3px;
              display: block;
              overflow: hidden;
              position: relative;
              float: left;
			  height:146px;
            }
            .demo-gallerys > ul > li a > img {
              -webkit-transition: -webkit-transform 0.15s ease 0s;
              -moz-transition: -moz-transform 0.15s ease 0s;
              -o-transition: -o-transform 0.15s ease 0s;
              transition: transform 0.15s ease 0s;
              -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
              height: 100%;
				width: 100%;border-radius:3px; flex-shrink:0;height:100%;

object-fit: cover
            }
            .demo-gallerys > ul > li a:hover > img {
              -webkit-transform: scale3d(1.1, 1.1, 1.1);
              transform: scale3d(1.1, 1.1, 1.1);
            }
            .demo-gallerys > ul > li a:hover .demo-gallery-poster > img {
              opacity: 1;
            }
            .demo-gallerys > ul > li a .demo-gallery-poster {
              background-color: rgba(0, 0, 0, 0.1);
              bottom: 0;
              left: 0;
              position: absolute;
              right: 0;
              top: 0;
              -webkit-transition: background-color 0.15s ease 0s;
              -o-transition: background-color 0.15s ease 0s;
              transition: background-color 0.15s ease 0s;
            }
            .demo-gallerys > ul > li a .demo-gallery-poster > img {
              left: 50%;
              margin-left: -10px;
              margin-top: -10px;
              opacity: 0;
              position: absolute;
              top: 50%;
              -webkit-transition: opacity 0.3s ease 0s;
              -o-transition: opacity 0.3s ease 0s;
              transition: opacity 0.3s ease 0s;
            }
            .demo-gallerys > ul > li a:hover .demo-gallery-poster {
              background-color: rgba(0, 0, 0, 0.5);
            }
            .demo-gallerys .justified-gallery > a > img {
              -webkit-transition: -webkit-transform 0.15s ease 0s;
              -moz-transition: -moz-transform 0.15s ease 0s;
              -o-transition: -o-transform 0.15s ease 0s;
              transition: transform 0.15s ease 0s;
              -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
              height: 100%;
              width: 100%;
            }
            .demo-gallerys .justified-gallery > a:hover > img {
              -webkit-transform: scale3d(1.1, 1.1, 1.1);
              transform: scale3d(1.1, 1.1, 1.1);
            }
            .demo-gallerys .justified-gallery > a:hover .demo-gallery-poster > img {
              opacity: 1;
            }
            .demo-gallerys .justified-gallery > a .demo-gallery-poster {
              background-color: rgba(0, 0, 0, 0.1);
              bottom: 0;
              left: 0;
              position: absolute;
              right: 0;
              top: 0;
              -webkit-transition: background-color 0.15s ease 0s;
              -o-transition: background-color 0.15s ease 0s;
              transition: background-color 0.15s ease 0s;
            }
            .demo-gallerys .justified-gallery > a .demo-gallery-poster > img {
              left: 50%;
              margin-left: -10px;
              margin-top: -10px;
              opacity: 0;
              position: absolute;
              top: 50%;
              -webkit-transition: opacity 0.3s ease 0s;
              -o-transition: opacity 0.3s ease 0s;
              transition: opacity 0.3s ease 0s;
            }
            .demo-gallerys .justified-gallery > a:hover .demo-gallery-poster {
              background-color: rgba(0, 0, 0, 0.5);
            }
            .demo-gallerys .video .demo-gallery-poster img {
              height: 48px;
              margin-left: -24px;
              margin-top: -24px;
              opacity: 0.8;
              width: 48px;
            }
            .demo-gallerys.dark > ul > li a {
              border: 3px solid #04070a;
            }
            .home .demo-gallerys {
              padding-bottom: 80px;
            }
        

/*---------------*/
/***** DROPDOWN *****/
/*---------------*/

.dropdown {
  position: relative;
  display: inline-block;
  text-align: left;
  width: 96%;margin:30px auto 0px auto;float:none;display:block;
}


.dropdown-texts {
  cursor: pointer;
  position: absolute;
  text-indent: 16px;
  line-height: 32px;
  background-color: #fff;
  border: 1px solid #cdcdcd;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1);
  width: 100%;
}

.dropdown-texts:after {
  position: absolute;
  right: 6px;
  top: 15px;
  content: '';
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 5px 4px 0 4px;
  border-color: #A3A3A3 transparent transparent transparent;
}
.dropdown-texts,
.dropdown-content a {
  color: #fff;

}

.dropdown-content ul  {
  width:100%;display:block;min-height:100%
}

.dropdown-content ul li {
  width:100%;display:block
}

.dropdown-text {
  cursor: pointer;
  position: absolute;
  text-indent: 16px;
  line-height: 32px;
  background-color: #013D50;
  border: 1px solid #cdcdcd;
  border-radius: 3px;
color:#fff;
  width: 100%;
}





.dropdown-text:after {
  position: absolute;
  right: 6px;
  top: 15px;
  content: '';
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 5px 4px 0 4px;
  border-color: #A3A3A3 transparent transparent transparent;
}

.dropdown-text,
.dropdown-content a {
  color: #6A8E9E;font-weight:600

}

.dropdown-toggle {
  font-size: 0;
  z-index: 1;
  cursor: pointer;
  position: absolute;
  top: 0;
  border: none;
  padding: 0;
  margin: 0 0 0 1px;
  background: transparent;
  text-indent: -10px;
  height: 34px;
  width: 100%;
}

.dropdown-toggle:focus {
  outline: 0;
}

.dropdown-content {
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
  list-style-type: none;
  position: absolute;
  top: 32px;
  padding: 0;
  margin: 0;
  opacity: 0;
  visibility:hidden;
  border-radius: 3px;
  text-indent: 10px;
  line-height: 32px;
 background:#003D50;
 z-index:111;
  width: 100%;
}

.dropdown-content a {
  display: block;border-bottom:1px solid #002F3E
}

.dropdown-content a:hover {
  background: #e8e8e8;
}


.dropdown-toggle:hover ~ .dropdown-text,
.dropdown-toggle:focus ~ .dropdown-text {
  background-color: #fff;
}

.dropdown-toggle:focus ~ .dropdown-text {
  box-shadow: 0 1px 3px rgba(0,0,0, .2) inset, 0 1px 0 rgba(255,255,255, 0.8);
  z-index: 2;
}

.dropdown-toggle:focus ~ .dropdown-text:after {
  border-width: 0 4px 5px 4px;
  border-color: transparent transparent #555 transparent;
}

.dropdown-content:hover,
.dropdown-toggle:focus ~ .dropdown-content {
  opacity: 1;
  visibility:visible;
  top: 42px;
}

/* -------------------------------------------------------------- */
/* ---------------------------------------------------------------------------- */

.grids {
	overflow: hidden;float:none;
	margin: 10px auto;
	padding: 0 0 0 0;
	width: 324px;
	max-width: 324px;
	list-style: none;
	text-align: center;
}

/* Common style */
.grids figure {
	position: relative;
	z-index: 1;
	display: inline-block;
	overflow: hidden;
	margin: 0px;
	/*margin: -0.135em;*/
	width: 100%;
	height: 178px;
	background: #003C4F;
	text-align: center;
	cursor: pointer;
}

.grids figure img {
	position: relative;
	display: block;
	min-height: 100%;
}

.grids figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grids figure figcaption::before,
.grids figure figcaption::after {
	pointer-events: none;
}

.grids figure figcaption,
.grids figure a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grids figure a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grids figure h2 {
	word-spacing: -0.15em;
	font-weight: 300;
}

.grids figure h2 span {
	font-weight: 600;
}

.grids figure h2,
.grids figure p {
	margin: 0;
}

.grids figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}






/*---------------*/
/***** Laylas *****/
/*---------------*/

figure.effect-laylas {
	background: #000;
}

figure.effect-laylas img {
	min-width: 100%;
	height: -webkit-calc(100% + 40px);
	height: calc(100% + 40px);
}

figure.effect-laylas figcaption {
	padding: 3em;
}

figure.effect-laylas figcaption::before,
figure.effect-laylas figcaption::after {
	position: absolute;
	content: '';
	opacity: 0;
}

figure.effect-laylas figcaption::before {
	top: 20px;
	right: 20px;
	bottom: 20px;
	left: 20px;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: scale(0,1);
	transform: scale(0,1);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
}

figure.effect-laylas figcaption::after {
	top: 20px;
	right: 20px;
	bottom: 20px;
	left: 20px;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	-webkit-transform: scale(1,0);
	transform: scale(1,0);
	-webkit-transform-origin: 100% 0;
	transform-origin: 100% 0;
}

figure.effect-laylas h2 {
	padding-top: 16%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}


figure.effect-laylas h3{
	padding-top:10px;opacity:0;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-laylas p {display:none;
	padding: 0 2em;
	text-transform: none;
	opacity: 0;
	-webkit-transform: translate3d(0,-10px,0);
	transform: translate3d(0,-10px,0);
}

figure.effect-laylas img,
figure.effect-laylas h2,
figure.effect-laylas h3 {
	-webkit-transform: translate3d(0,-30px,0);
	transform: translate3d(0,-30px,0);
}

figure.effect-laylas img,
figure.effect-laylas figcaption::before,
figure.effect-laylas figcaption::after,
figure.effect-laylas p {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-laylas img {
	opacity: 0.2;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-laylas:hover figcaption::before,
figure.effect-laylas:hover figcaption::after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.effect-laylas h2,
figure.effect-laylas h3,
figure.effect-laylas p {
	margin:-20px 0px 0px 0px;
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-laylas:hover figcaption::after,
figure.effect-laylas:hover h2,
figure.effect-laylas:hover p,
figure.effect-laylas:hover img {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}






}




/*---START tablet---*/
@media (min-width: 768px)  and (max-width: 992px) {

/*---Header---*/




}
/*---END tablet---*/
		
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px)  and (max-width: 1200px) {
	

}



/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {






	}