body {
    font-family: "Open Sans", sans-serif;
}
/**
* @todo :: Static Elements Class
**/
.container-fluid { margin: 0; padding: 0; position: relative; float: left; width: 100%; overflow: hidden}
.container { width: 100%; max-width: 1440px; height: auto; position: relative; margin: 0 auto; z-index: 2;}
.textcenter { text-align: center; }


.footerButtons {
    width: 100%;
    height: auto;
    padding: 15px 0;
    position: fixed;
    bottom: 0;
    z-index: 999;
    text-align: center;

    background-color: #fff;
    border-top:1px solid #CCC;

    display: none;


}
.footerButtons div{
    border-right: 1px solid #CCCCCC;
}
.footerButtons div:last-child{
    border-right: none;
}
.footerButtons i {
    display: block;
    font-size: 22px;
    color: #000000;
}

/**
* @todo :: Header Class
**/

header { width: 100%; position: fixed; float: left; display: block; z-index: 999;}
    .header-up { width: 100%; height: 25px; background-color: #ebebeb; transition:all .1s ease;}
    .header-main { width: 100%; max-width: 1440px; height: 145px; margin: 0 auto;}
        .header-main .header-background { background-color: rgba(255,255,255,.95); width: 100%; height: 100px; position: absolute; top: 25px; left:0; z-index: 1; transition:all .1s ease;}
        .HeaderLogo { position: relative; float: left; width: 420px; height: auto; z-index: 3; margin-left: 0px;}
            .HeaderLogo img { transition:all .1s ease; width: 100%; margin-top: 10px; margin-left: -80px; float: left;}
            .HeaderLogo div {
                position: absolute; font-size: 16px; bottom:0;
                left:142px;
                color: #333;
            }
header {
    height: 130px;
    -webkit-box-shadow: 0px 0px 55px 10px rgba(107,107,107,0.10);
    -moz-box-shadow: 0px 0px 55px 10px rgba(107,107,107,0.10);
    box-shadow: 0px 0px 55px 10px rgba(107,107,107,0.10);
    background-color: #fff;
}

@media screen and (min-width: 1070px)  {
header.FixedHeader { width: 100%; height: 100px; position: fixed; float: left; display: block; z-index: 999;}
header.FixedHeader .header-up { width: 100%; height: 25px; background-color: #ebebeb; transition:all .1s ease;}
header.FixedHeader.header-main { width: 100%; max-width: 1440px; height: 125px; margin: 0 auto;}
header.FixedHeader .header-main .header-background { background-color: rgba(255,255,255,.95); border-bottom: 1px solid #ebebeb; width: 100%; height: 80px; position: absolute; top: 25px; left:0; z-index: 1; transition:all .1s ease;

    -webkit-box-shadow: 0px 0px 58px 2px rgba(186,184,186,0.21);
    -moz-box-shadow: 0px 0px 58px 2px rgba(186,184,186,0.21);
    box-shadow: 0px 0px 58px 2px rgba(186,184,186,0.21);
}
header.FixedHeader .HeaderLogo { position: relative; float: left; width: 420px; height: auto; z-index: 3; margin-left: 0px;}
header.FixedHeader .HeaderLogo img { transition:all .1s ease; height: 60px; margin-top: 10px; margin-left: -80px; float: left;}
header.FixedHeader .HeaderLogo div {
                        position: absolute; left: 138px; font-size: 16px; bottom:-10px;
                        color: #333;
                    }
}





        #HeaderNav { position: absolute; border: 0; background: none; right: 40px; bottom: -20px; height: 10px;}


/** * @todo :: Slider Class * **/
#sliderBG{ width: 100%; height: auto; top:0; left:0; position: relative; background-color: #FFF; z-index: 0; overflow: hidden}
    .slider { width: 100%; max-width: 1380px; height: auto; position: relative; margin: 0 auto;}
        .slider h4 { color: #000; font-size: 25px; font-weight: 400;}


/** * @todo :: Sayfa Main * **/

.main { width: 100%; height: auto; position: relative; float: left; display: block; z-index: 5;}

.main #MainHead { background-color: #FFF; padding-bottom: 15px;}
    .main #MainHead h1{ font-weight: 300;font-size: 40px;}
    .main #MainHead h3{ font-weight: 400; font-size: 16px; }

.main #MainAbout { background-color: #F5F5F5; padding: 50px 0;}
    .main #MainAbout .AboutText { font-weight: 400; position: relative; color:#2B3337;}
        .main #MainAbout .AboutText h2 { margin: 0;font-size: 30px;}
        .main #MainAbout .AboutText h3 { font-size: 24px;}
    a.btn { background-color: #5D9D41; color: #FFF; font-weight: 300;}

.kutular { padding:75px 0; color: #1A1A1A; background-color: #FFF; text-align: center;}
    .KutularMarginTop { margin-top: 30px; }
        .kutular h2 { text-align: center; font-weight: 300; font-size: 30px;}
        .kutular h3 { text-align: center; font-weight: 400; font-size: 18px; }
        .kutular h4 { text-align: center; font-weight: 600;}


.main #sebep { background-color: #F5F5F5; padding: 50px 0; color:#374B66; position: relative; float: left}
    .main #sebep .AboutText h2 { margin: 0; font-size: 30px; margin-bottom: 10px;}
    .main #sebep .AboutText ul { margin: 0; padding: 0; margin-bottom: 20px; position: relative; float: left;}
        .main #sebep .AboutText li {list-style: none; width: 50%; float: left; padding: 2px 0;}
            .main #sebep .AboutText li span { color:#71A304;}

.main #sebep ul.icons {width: 100%; height: auto; position: relative; float: left;}
    .main #sebep ul.icons li {width: 66px; height: 105px; position: relative; float:left; display: block; list-style: none; margin: 0 20px; text-align: center;}
    .main #sebep ul.icons li span {position: relative;float: left;color:#000;margin-top: -28px;font-size: 13px;}
    
        .main #sebep i{display: block; font-style: normal; width: 66px; height: 105px; position: relative; float: left;}
        .main #sebep i.tamir-yok { background:url(../images/site_statik_elements/tamir-yok.svg) 0 0 no-repeat;}
        .main #sebep i.patlama-yok {background:url(../images/site_statik_elements/patlama-yok.svg) 0 0 no-repeat;}
        .main #sebep i.basinc-kontrol { background:url(../images/site_statik_elements/basinc-kontrol.svg) 0 0 no-repeat;}
        .main #sebep i.rahat-surus { background:url(../images/site_statik_elements/rahat-surus.svg) 0 0 no-repeat;}
        .main #sebep i.para-kaybi-yok { background:url(../images/site_statik_elements/para-kaybi-yok.svg) 0 0 no-repeat;}


.main #KullanimAlanlariHead { padding: 15px 0; background-color: #FFF; position: relative;  float: left;}
    .main #KullanimAlanlariHead h1{ font-weight: 300;font-size: 36px; }
    .main #KullanimAlanlariHead h3{ font-weight: 400; font-size: 18px; }

.KullanimAlanlari { padding:30px 0; color: #1A1A1A; background-color: #F5F5F5; text-align: center; }
    .KullanimAlanlari h2 { text-align: center; font-weight: 300; font-size: 30px; }
    .KullanimAlanlari h3 { text-align: center; font-weight: 400; font-size: 18px; }
    .KullanimAlanlari h4 { text-align: center; font-weight: 600; }

#Urunlerimiz { height: auto; position: relative; padding: 45px; background-color: #FFF; text-align: center; float: left;}
    #Urunlerimiz h3 { font-size: 35px; font-family: "Open Sans", sans-serif; font-weight: 300;}
    #Urunlerimiz .UrunlerHead p {margin-bottom: 45px; position: relative; float: left;}

            .urun img { float:left; width: 100%; margin-right:15px;  border:2px solid #f3f3f3; margin-left: 25px; margin-bottom: 15px}
            .urun {color:#666;text-decoration:none;display: block;padding: 0 10px;min-height: 100px;height: auto;position: relative;float: left;}
                .urun h4 {font-weight: 600;}



.ImageSpace { height: 290px;}

#Referanslar { height: auto; background-color: #FFF; padding-bottom: 20px; position: relative; float: left; z-index: 1;}
    .ReferansHead { height: auto; position: relative; padding: 35px; text-align: center; }
    .ReferansHead h3 { font-size: 35px; font-family: "Open Sans", sans-serif; font-weight: 300; margin-top: -15px; padding: 0; }

#Referanslar .referanslar {padding: 0; margin: 0; display: block; width: auto; height: auto; position: relative; float: left; border-top:1px solid #dedede;; border-left:1px solid #dedede;}
    .referanslar div {padding: 0; border-bottom:1px solid #dedede;; border-right:1px solid #dedede;}
    .referanslar div.col-md-2 {-moz-transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease; -moz-opacity: 0.5; opacity:.50; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); filter: gray; -webkit-filter: grayscale(100%);}

    .referanslar div.col-md-2:hover {-moz-opacity: 0.9; opacity:.99; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=99)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=99); filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale"); -webkit-filter: grayscale(0%);}

#ReferansTumunuGor {padding: 10px 0; text-align: center; border: 1px solid #dedede; border-top:0; cursor: pointer; transition: all 1.3s ease;}
    #ReferansTumunuGor:hover {text-shadow: 2px 2px 2px #dedede;}

#sss { height: auto; background-color: #FFF; padding-bottom: 20px; position: relative; float: left; z-index: 1;}
    .sssHead { height: auto; position: relative; padding: 35px; text-align: center; }
        .sssHead h3 { font-size: 35px; font-family: "Open Sans", sans-serif; font-weight: 300; }


footer { width: 100%; height: auto; position: relative; float: left; display: block; background-color: #F3f3f3;}
    footer ul.Menu {padding: 0; margin-left: -10px}
        footer ul.Menu li {list-style: none; position: relative; float: left; padding:5px 0px; margin-right: 10px; margin-top: 20px; }
        footer ul.Menu li a{color:#383838; font-size: 12px; padding-left: 10px} footer li a:hover {text-decoration: none}
    footer h4 {margin: 0; padding: 0; color:#383838; font-weight: 400; font-size: 14px; margin-top: 10px; margin-bottom: 5px }

    footer ul.icons {width: 100%; height: auto; position: relative; float: right;}
        footer ul.icons li {width: 30px; height: 30px; position: relative; float:right; display: block; list-style: none; margin: 15px 5px 0 0;}
            footer i{display: block; font-style: normal; width: 30px; height: 30px; position: relative; float: left;}
            footer i.facebook { background:url(../images/site_statik_elements/FooterIcons.png) 0 0 no-repeat;}
            footer i.twitter {background:url(../images/site_statik_elements/FooterIcons.png) -38px 0 no-repeat;}
            footer i.gplus { background:url(../images/site_statik_elements/FooterIcons.png)  -76px 0 no-repeat;}
            footer i.pinterest { background:url(../images/site_statik_elements/FooterIcons.png) -114px 0 no-repeat;}
            footer i.mail { background:url(../images/site_statik_elements/FooterIcons.png) -152px 0 no-repeat;}


#iletisimFormLeft {width: 50%; position: relative; float: left; height: auto;}
#iletisimFormRight {width: 45%; margin-left: 5%; position: relative; float: left; height: auto;}


/**
* @todo :: Responsive Class
**/
@media screen and (max-width: 1070px) {
    .HeaderLogo {width: 350px}
    .HeaderLogo img { height: 60px; margin-top: 5px;}

    .header-main .header-background { height: 70px; }

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

header {padding:0; margin: 0; width: 100%; position: fixed; height: 50px}

    .HeaderLogo {width: 300px}
    .HeaderLogo img { height: 60px; margin-top: 5px;}
    .HeaderLogo div { bottom: 10px;}



.rightImage {display: none}
#HeaderNav {position: relative; background: none;bottom: 0}
    #HeaderNav .navbar-header {margin-top: 20px}
        #HeaderNav .navbar-collapse {width:100%;  background-color: #FFF; margin-top: 10px; position: absolute;}
    .header-main .header-background { height: 70px; top:0; }
    .header-up { width: 100%; height: 25px; background-color: #CCC; position: absolute; top:70px;}

    #sliderBG {margin-top: 80px}

.navbar-header { float: none;  }
    .navbar-left,.navbar-right { float: none !important; }
    .navbar-toggle { display: block; }
    .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(228, 249, 247, 1); margin-left: 40px; z-index: 99;}
        .navbar-fixed-top { top: 0; border-width: 0 0 1px;}
            .navbar-collapse.collapse { display: none!important;  }
            .navbar-nav { float: none!important; margin-top: 7.5px; background-color: rgba(228, 249, 247, .2) }
            .navbar-nav>li { float: none; border-bottom: 1px solid rgba(228, 249, 247, 1);  }
            .navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px; }
                .collapse.in{ display:block !important; }

    .main #sebep .AboutText li {width: 100%}
    .main #sebep ul.icons li {margin: 5px 10px;}
 }
@media screen and (max-width: 450px) {
    .main #sebep .AboutText li {width: 100%;}

    footer img {max-width: 200px}
    #iletisimFormLeft {width: 100%; border-bottom: 1px solid #dedede; margin-bottom: 20px;}
    #iletisimFormRight {width: 100%;}


    .HeaderLogo { height: 60px; margin-top: 7px }

    .HeaderLogo div {
        font-size: 12px;
        left: 83px;
        color: #333;
    }


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

    #HeaderNav {
        bottom:0;
    }
    .navbar button {
        margin-right: -25px;
    }
    .HeaderLogo {width: 200px}
    .HeaderLogo img { height: 60px; margin-top: 5px; margin-left: -15px;}
    .HeaderLogo div { bottom: -6px; right: -20px}

    .main{
        z-index: 99;
    }
    .main #sebep .AboutText li {width: 100%}
    .main #sebep ul.icons li {margin: 5px 10px;}

    footer ul.Menu  {display: none}

    #iletisimFormLeft {width: 100%; border-bottom: 1px solid #dedede; margin-bottom: 20px;padding-bottom: 20px;}
    #iletisimFormRight {width: 100%;}

    .footerButtons {
        display: block;
    }
    #Modal {
        margin-left: -14px;
    }

    #HesaplamaModal {
        margin-left: -14px;
    }

    .urun img {margin-left: 0; margin-bottom: 10px}
    .urun {margin-bottom: 20px}
    .header-up {display: none}
    .header-main .header-background {
        border-bottom: 3px solid #ebebeb;
        height:80px;
    }
}