/*
    Adem KIYÇAK
    Web Developer
*/



*{
    outline: none !important;
    text-decoration: none !important;
    letter-spacing: 1px;
}



html,body{
    font-family: 'Montserrat', sans-serif;
}

.clearfix{
    clear: both;
}



.container{
    width: 75%;
    overflow: auto;
    margin: 0 auto;
    padding: 10px;
    margin-top: 15px;
}



    #logo{
        width: auto;
        height: auto;
        margin-top: 20px;
        float: left;
    }

    #top-header-right{
        width: auto;
        height: auto;
        float: right;
    }

        #top-header-right ul li{
            float: right;
            list-style-type: none;
        }

            #top-header-right ul li a{
                font-size:12px;
                color:#1d1d1b;
                margin: 10px 10px 10px 5px;
                font-weight: bold;
            }

                #top-header-right ul li a:hover{
                    color:#727272;
                }

                #top-header-right ul li span{
                    list-style-type: none;
                }

            #top-header-right ul li a i{
                font-size:16px;
                
            }


            #online-catalog{
                font-size: 12px;
                font-weight: bold;
                color: #e30613 !important;
                float: right;
                margin-top: 30px !important;
            }
    
                #online-catalog:hover{
                    color: #b4000b !important;
                }


        #tds-sds-btn{
            font-size: 12px;
            font-weight: bold;
            color: #e30613 !important;
            float: right;
            margin-left: 20px;
            padding-bottom: 20px;
        }

            #tds-sds-btn:hover{
                color: #b4000b !important;
            }




    .slider{
        width: 100%;
        overflow: auto;
        margin-top: 50px;
    }

        .slider img{
            width: 100%;
            overflow: auto;
        }


        .slider-text{
            position: absolute;
            top: 20%;
            left: 0px;
            right: 0px;
            margin:auto;
        }

        .slider-text strong, .slider-text span{
            margin: 10px 0px;
        }

        .slider-text strong{
            font-size:60px;
            font-weight: bold;
            background-color: #e30613;
            display: table;
            padding: 7px;
            color:#fff;
        }


        .slider-text span{
            font-size:48px;
            background-color: #1d1d1b;
            display: table;
            padding: 7px;
            color:#fff;
        }


        .slider-text a{
            width: 184px;
            height: auto;
            background-image: url("../image/button-bg.png");
            background-repeat: repeat-y;
            display: table;
            text-align: center;
            padding: 20px 0px;
            color:#1d1d1b;
            font-weight: bold;
            font-size:14px;
        } 

        .slider-text a:hover{
            color:#222;
            background-color: #ffae00 !important;
            background-image: none;
        }




    /* Menüs */
    .menus{
        width: 75%;
        height: auto;
        background-color: #1d1d1b;
        position: absolute;
        z-index: 9999;
        left: 0px;
        right: 0px;
        margin: auto;
        border-radius: 5px;
        margin-top: -25px;
        display: inline-block;
    }

    .menus nav ul li{
        display: inline-block;
            padding: 15px 25px;

    }

        .menus nav ul li a{
            font-size:16px;
            color: #fff;
            font-weight: bold;
            margin-top: 5px;
            display: inline-block;
        }

            .menus nav ul li a:hover{
                color: #e30613;
            }

        .menus nav ul li a i{
            font-size:18px;
        }

        .menu-active{
            background: #1d1d1b !important;
        }


      #responsive-menu{
            font-size: 24px;
            color: #1d1d1b;
            float: left;
            margin-top: 20px;
            display: none;
        }



    #search-input{
        width: 200px;
        border:none;
        background-color: transparent;
        border-bottom: 1px solid #fff;
        color:#fff;
        background-image: url("../image/icons/search.png");
        background-repeat: no-repeat;
        background-position: right;
        padding: 5px 0px;
    }


    	/* Search start */ 
		#search-result
		{
			display: block;
			width: 410px;
			background-color: #e4e2e2;
			position: absolute;
			z-index: 9999 !important;
			top:55px;
			right:0px;
			text-align: left;
		}


		#search-result a
		{
            font-weight: normal;
			font-size: 13px;
			color: #222;
			padding: 12px;
			display: block;
			text-decoration: none;
			letter-spacing: 0.5px;
            border-bottom: 1px solid #939393;
            margin-top: 0px;
            line-height: 18px;
		}

		#search-result a:hover
		{
			background-color: #f1f1f1;
			color:#222;
		}


    /* Responsive menü */
    #responsive-menu-area{
        width: 90%;
        overflow: auto;
        margin: 0 auto;
        display: none;
    }

    #responsive-menu-area nav ul li{
        padding: 15px 0px;
    }

    #responsive-menu-area nav ul li a{
        font-size:16px;
        font-weight: bold;
        color:#1d1d1d;
    }

        #responsive-menu-area nav ul li a:hover{
            color:#e30613;
        }




    /*Category*/

    .categories-area{
        width: 100%;
        display: inline-block;
        text-align: center;
    }


    .categories{
        width: 214px;
        height: auto;
        display: inline-block;
        margin: 5px;
        vertical-align: top;

    }


    .categories img{
        width: 100%;
        height: auto;
    }

        .categories:hover > h2{
            background-color: #e30613;
            color:#fff;
        }


    .categories-area h1{
        font-size:24px;
        margin: 20px 0px 30px 0px;
    }


    .categories-area h2{
        font-size:18px;
        padding: 20px 0px;
        color:#e30613;
        margin-top:-3px;
        line-height: 22px;
    }



    /*Media*/
    .media-area{
        width: 100%;
        overflow: auto;
        background-color: #f6f6f6;
        margin-top: 50px;
    }


    #media-left{
        width: 55%;
        height: auto;
        float: right;
        margin-right: 5%;
        margin-top: 5%;
    }

        #media-left h3{
            font-size:24px;
        }


    #media-right{
        width: auto;
        max-width: 30%;
        height: auto;
        float: right;
    }


        #media-right img{
            width: 100%;
        }


    .media-categories{
        width: 170px;
        height: 230px;
        background-color: #f3f3f3;
        box-shadow: 0px 0px 10px 0px #ccc;
        margin: 10px 20px 10px 0px;
        float: left;
        color: #4a4a4a;
    }


    .media-categories:hover > .media-title h4{
        background-color: #f00;
        color:#fff;
    }

        .media-icon{
            width: 100%;
            height: 160px;
            position: relative;
        }

            .media-icon img{
                position: absolute;
                left: 0px;
                right: 0px;
                bottom: 0px;
                top: 0px;
                margin: auto;
            }

            .media-title{
                width: 100%;
                height: 70px;
                background-color: #fff;
                display: table;
            }

            .media-title h4{
                
                display: table-cell;
                vertical-align: middle;
                text-align: center;
                line-height: 20px;
            }

        .media-videos{
            display: none;
        }





    /* Footer */
    footer{
        width: 100%;
        height: 70px;
        background-color: #1d1d1b;
        margin-top: -3px;
        display: inline-block;
    }

        .footer-menus a{
            font-size:12px;
            color: #898989;
            padding-right: 30px;
            float: left;
        }

        .footer-menus a:hover{
            color: #fff;
        }


        .footer-social{
            float: right;
        }


        .footer-social a{
            font-size:16px;
            color: #898989;
            padding-left: 20px;
            float: left;
        }

        .footer-social a:hover{
            color: #fff;
        }


        .copyright{
            margin-bottom: 30px;
        }

        .copyright span{
            width: auto;
            font-size:12px;
            color:#898989;
            float: left;
        }


        .copyright img{
            width: auto;
            height: auto;
            float: right;
        }





    /* PAGE DETAIL */

    #page-detail-title-bg{
        width: 100%;
        height: auto;
        min-height: 270px;
        background-color: #e30613;
        display: table;
    }


    #page-detail-title-bg .container h1{
        width: auto;
        max-width: 450px;
        font-size:48px;
        font-weight: bold;
        color:#fff;
        margin-top: 5%;
        line-height: 56px;
    }


    /* Breadcrumb  */
    #breadcrumb{
        width: 100%;
        height: auto;
        box-sizing: border-box;
        background-color: #e30613;
    }


        #breadcrumb .container{
            margin-top: 0px;
            text-align: right;
        }


        #breadcrumb .container a{
            font-size:11px;
            color: #fff;
            font-weight: bold;
        }


        #breadcrumb .container a:hover{
            font-size:11px;
            color: #222;
        }

        #breadcrumb .container label:after{
            font-size:12px;
            color: #fff;
            padding: 5px 5px 5px 10px;
            content: '/';
        }

        #breadcrumb .container label:last-of-type{
            display: none;
        }



        .container-page-detail{
            width: 65%;
            height: auto !important;
            margin: 0 auto;
            padding: 10px;
            margin-top: 15px;
            margin-bottom: 50px;
            display: table;
        }



        /* Page Banner */
        #page-banner{
            width: 40%;
            overflow: auto;
            float: left;
            margin-top: -100px;
        }


            #page-banner img{
                width: 100%;
                overflow: auto;
                float: left;
            }

        #page-content{
            width: 50%;
            overflow: auto;
            float: right;
            padding: 10px;
        }

            #page-content h2{
                font-size:24px;
                color:#424242;
                line-height: 34px;
            }

            #page-content p{
                font-size:16px;
                color:#6a6a6a;
                line-height: 28px;
                margin: 20px 0px 20px 0px; 
            }



        #contact-form{
            margin-top: 20px;
        }


        #contact-form input{
            width: 50%;
            height: 30px;
            display: inline-block;
            margin-bottom: 20px;
            padding: 10px 0px;
            font-family: 'Montserrat';
            border:none;
            border-bottom:1px solid #222;
        }


        #contact-form textarea{
            width: 50%;
            height: 100px;
            display: inline-block;
            margin-bottom: 20px;
            padding: 20px 0px;
            font-family: 'Montserrat';
            border:none;
            border-bottom:1px solid #222;
        }



        #contact-form button{
            padding: 15px 30px;
            display: block;
            background-color: transparent;
            color:#e30613;
            font-weight: bold;
            border:1px solid #e30613;
        }

        #contact-form button:hover{
            background-color: #e30613;
            color:#fff;
            cursor: pointer;
        }






    /* PRODUCT LIST */

    #product-list-left{
        width: 25%;
        overflow: auto;
        background-color: #fff;
        float: left;
        box-sizing: border-box;
        border-left: 1px solid #e1e1e1;
        border-right: 1px solid #e1e1e1;
        border-bottom: 1px solid #e1e1e1;
    }

        #product-list-left .category-menu h2{
            text-align: left;
            font-size: 14px;
            background-color: #e30613;
            padding: 5px 10px;
            color:#fff;
            display: block;
        }

       
        #product-list-left .category-menu h2:hover{
            background-color: #1d1d1b;
            color:#fff;
        }


        #product-list-left .product-menu{
            display: block;
            font-size:12px;
            text-align: left;
            color:#222;
            padding: 10px;
            font-weight: 500;
            margin-bottom: 2px;
            line-height: 20px;
        }


        #product-list-left .product-menu i{
           font-size:10px;
        }

        #product-list-left .product-menu:hover{
            background-color: #f1f1f1;
            color:#e30613;
        }




    #product-list-right{
        width: 72%;
        overflow: auto;
        float: right;
        padding:10px;
        box-sizing: border-box;
    }




    .products{
        width: 250px;
        height: 370px;
        margin: 5px;
        background-color: #f6f6f6;
        display: inline-block;
        text-align: center;
        margin-bottom: 10px;
    }

    .products:hover{
        background-color: #f0f0f0;
    }

    .products:hover > .product-text strong{
        color:#f00;
    }

        .product-text{
            width: 100%;
            height: 100px;
            float: left;
            padding: 10px;
            box-sizing: border-box;
            background-color: #fff;
        }

        .product-text strong{
            text-align: center;
            font-size:14px;
            line-height: 24px;
            color:#1d1d1b;
        }

        .product-img{
            width: 100%;
            height: 270px;
            float: right;
            position: relative;
        }


            .product-img img{
                width: auto;
                max-width: 150px;
                height: auto;
                max-height: 220px;
                position: absolute;
                bottom: 20px;
                left: 0px;
                right: 0px;
                margin: auto;
            }


    #product-list-menu{
        width: auto;
        height: auto;
        padding: 15px 20px;
        background-color: #222;
        display: inline-block;
        color:#fff;
        float: left;
        border-radius: 5px 5px 0px 0px;
    }



    /* Product detail */
    #product-detail-img{
        width: 35%;
        height: auto;
        float: left;
        border:1px solid #e1e1e1;
        padding: 20px 10px;
        box-sizing: border-box;
    }

        #product-detail-img img{
            width: auto;
            max-width: 150px;
            height: auto;
            max-height: 300px;
        }

    #product-detail-content{
        width: 60%;
        overflow: auto;
        float: right;
        text-align: left;
    }



    .product-contents{
        width: 100%;
        overflow: auto;
        background-color: #f7f7f7;
        margin-top: 25px;
        padding: 20px;
        box-sizing: border-box;
        text-align: left;
    }


        .product-contents strong{
            font-size:18px;
            margin-bottom: 20px;
            display: block;
        }

        .product-contents p{
            font-size:14px;
        }


        .product-contents ul li{
            font-size:14px;
            color:#6a6a6a;
            line-height: 24px;
            list-style-position: outside;
            margin: 10px 15px;
        }


        .product-contents table{
            width: 100%;
        }


        .product-contents table{
            background-color: #fff;
        }


        .product-contents table tbody tr th{
            padding: 15px 10px;
            border:1px solid #d2d2d2;
            font-size:14px;
            color:#585858;
        }

        .product-contents table tbody tr td{
            padding: 10px;
            color:#585858;
            font-size:12px;
            border:1px solid #d2d2d2;

        }


        .gallery-img{
            width: 180px;
            height: 180px;
            float: left;
            margin: 5px 10px 10px 0px;
        }



        .gallery-images{
            width: 30%;
            height: auto;
            float: left;
            margin: 5px 10px 5px 0px;
        }


        .certificates-images{
            width: 18%;
            height: auto;
            float: left;
            margin: 10px 5px;
        }


        .certificates-images:hover,
        .gallery-images:hover,
        .gallery-img:hover
        {
            opacity: 0.7;
        }


        .videos{
            width: 180px;
            height: 180px;
            float: left;
            margin: 5px 10px 10px 0px;
        }







.modal {
  display: none;
  position: fixed;
  z-index: 99999999;
  padding-top: 30px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; 
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.4);
}


.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 50%;
  margin-bottom: 70px !important;
}

.modal-content strong{
    font-size:14px !important;
    text-align: left !important;
}

.modal-content p{
    font-size:14px !important;
    line-height: 22px;
    margin-bottom: 20px;
    margin-top: 5px;
}

.modal-content h5{
    line-height: 28px;
    font-size:18px;
    font-weight: bold;
    margin-bottom: 30px;
}


.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}


#kvkk-btn{
    font-size:12px;
    color:#3794FF;
    display: block;
    margin: 30px 10px 10px 0px;
    font-weight: bold;
    text-decoration: underline;
    line-height: 20px;
}

#kvkk-btn:hover{
    color:#036AE1;
}








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

    .container{
        width: 90%;
    }

    .container-page-detail{
        width: 90%;
    }

    #page-detail-title-bg {
        width: 100%;
        height: 220px;
        overflow: auto; 
        min-height: auto;
    }

    .menus{
        width: 90%;
    }


    #media-left{
        width: 65%;
        margin-top: 1%;
        margin-right: 3%;

    }

  

}




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



    #product-list-left{
        display: none;
    }


    #product-list-right{
        width: 100%;
    }

    .products{
        width: 150px;
        margin: 2px;
    }

    .product-text strong{
        font-size:12px;
        line-height: 20px;
    }


    .product-img img{
        max-width: 100px;
    }



    #logo{
        width: 150px;
        height: auto;
    }

    .container{
        width: 90%;
        margin-top: 0px;
    }

    .container-page-detail{
        width: 95%;
    }

    .menus{
        display: none;
    }

    #top-header-right{
        width: 100%;
        margin-top: 20px;
        float: none;
    }

    #header-mail{
        display: none;
    }

    .slider{
        margin-top: 15px;
    }

      #responsive-menu{
            display: block;
        }

      .media-videos{
        display: block;
    }


    #media-right{
        display: none;
    }


    #media-left{
        padding: 5px;
        width: auto;
        float: none;
        display: inline-block;
        text-align: center;
        margin-top: 30px;
    }

    .media-categories{
        width: 120px;
        height: 170px;
        display: inline-block;
        text-align: center;
        float: none;
    }

    .media-icon{
        height: 100px;
    }

    .media-title h4{
        font-size:12px;
    }


    .categories-responsive{
        width: 90%;
    }

    .categories{
        width: 140px;
        margin: 5px;
        
    }

    .categories img{
        width: 100%;
    }
  

      footer{
        width: 100%;
        height: auto;
        padding: 10px 0px; 
        display: inline-block;
        text-align: center;
    }

        .footer-menus{
            width: 100%;
            float: none;
            display: inline-block;
            text-align: center;
            float: none;
            margin-bottom: 20px;
        }

            .footer-menus a{
                display: inline-block;
                text-align: center;
                float: none;
                padding: 0px 15px;
                line-height: 30px;
            }

        .footer-social{
            width: 100%;
            display: inline-block;
            text-align: center;
            float: none;
        }


            .footer-social a{
                display: inline-block;
                text-align: center;
                float: none;
                padding: 0px 15px;
            }


      .copyright {
            text-align: center;
        }

      .copyright span{
            width: 100%;
            float: none;
            display: inline-block;
            text-align: center;
            margin-top: 20px;
        }


        .copyright img{
            float: none;
            margin-top: 20px;
        }


        .certificates-images{
            width: 25%;
        }


        .slider-text{
            top: 3%;
        }


        .slider-text strong{
            font-size:20px;
            padding: 5px;
        }


        .slider-text span{
            font-size:18px;
            display: table;
            padding: 5px;
        }


        .slider-text a{
            display: none;
        } 

        #page-banner{
            display: none;
        }

        #page-content{
            width: 100%;
            float: none;
            box-sizing: border-box;
        }

        #page-detail-title-bg {
            width: 100%;
            height: auto; 
        }

        #page-detail-title-bg .container h1 {
            width: 100%;
            max-width: none;
            text-align: center;
            font-size:30px;
            margin-top: 0px;
            line-height: 36px;
        }

        #breadcrumb .container{
            width: 100%;
            display: inline-block;
            text-align: center;
            box-sizing: border-box;
        }

        #breadcrumb a{
            display: inline-block;
            text-align: center;
        }


        #contact-form input, #contact-form textarea{
            width: 100%;
        }


        #product-detail-img{
            width: 100%;
            
        }

       #product-detail-content{
            width: 100%;
            margin-top: 20px;
        }


        .gallery-img{
            width: 90px;
            height: 90px;
        }


        .videos{
            width: 40%;
            height: auto;
        }






}




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

    .product-contents{
        max-width: 400px;
    }

        .gallery-img{
            width: 46%;
            height: auto;
        }

        .gallery-images{
            width: 45%;
        }

        .certificates-images{
            width: 45%;
        }


        .videos{
            width: 100%;
            height: auto;
        }

        

}