@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900&subset=latin,latin-ext);

body {
    font-family: 'Roboto', sans-serif;
    background-color: white;
    color: #bababa;
}

a,
a:hover,
a:focus,
a:active { color: #42A146; }

h1,h2,h3,h4,h5,h6 { color: #909090; font-weight: 700; }


/* Short Codes *****************************************************/

.f3 {font-weight: 300;}
.f4 {font-weight: 400;}
.f5 {font-weight: 500;}
.f6 {font-weight: 600;}
.f7 {font-weight: 700;}
.f8 {font-weight: 800;}
.f9 {font-weight: 900;}

.m0 { margin: 0px; }
.mT15 {margin-top: 15px;}
.mB15 {margin-bottom: 15px;}
.mT30 {margin-top: 30px;}
.mB30 {margin-bottom: 30px;}

.p0 { padding: 0px; }
.pT15 {padding-top: 15px;}
.pB15 {padding-bottom: 15px;}
.pT30 {padding-top: 30px;}
.pB30 {padding-bottom: 30px;}

.pR { position: relative; }
.db { display: block !important; }
.dib { display: inline-block !important; }
.w100 { float: left; width: 100%; }
.w50 { float: left; width: 50%; }
.flex { display: flex; display: -ms-flex; align-items:center; }
.flexC { display: flex; display: -ms-flex; align-items:center; }
.flexCC { display: flex; display: -ms-flex; align-items:center; justify-content:center; }

.tW {color: #fff !important;}
.tW a {color: #fff !important;}
.bW {background-color: #fff !important;}

.tB {color: #000 !important;}
.tB a {color: #000 !important;}
.bB {background-color: #000 !important;}

.tGrey {color: #efefef !important;}
.tGrey a {color: #efefef !important;}
.bGrey {background-color: #efefef !important;}

.tGreen {color: #42A146 !important;}
.tGreen a {color: #42A146 !important;}
.bGreen {background-color: #42A146 !important;}

.trl {
    -webkit-transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);
}
.trlX {
    -webkit-transform:translateX(-50%);
    -moz-transform:translateX(-50%);
    -ms-transform:translateX(-50%);
    -o-transform:translateX(-50%);
    transform:translateX(-50%);
}
.trlY {
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    transform:translateY(-50%);
}
.cover {
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.contain {
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -ms-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}


/* Buttons *********************************************************/

.btnGreen { padding: 10px 40px; color:#fff; display: inline-block; background-color: #42A146; font-weight: 300; font-size: 14px; text-align: center; border-radius: 0px; }
.btnGreen:hover { background-color: #11635A; color:#fff; }

/*******************************************************************/


/* Custom CSS Desing ***********************************************/

.captionCenter { position: relative; text-align: center; margin: 15px 0px; padding-bottom: 15px; font-size: 20px; }
.captionCenter:before { content: ''; position: absolute; width: 90px; height: 2px; bottom: -1px; left: 50%; margin-left: -45px; background-color: #42A146; }

.captionLeft { position: relative; text-align: left; margin: 15px 0px; padding-bottom: 15px; font-size: 20px; }
.captionLeft:before { content: ''; position: absolute; width: 90px; height: 2px; bottom: -1px; left: 0%; background-color: #42A146; }

.bx-wrapper { margin: 0 auto 35px; }
.bx-wrapper .bx-viewport { border: none; box-shadow: none; left: 0; background-color: transparent; }
.bx-wrapper .bx-pager.bx-default-pager a { width: 25px; height: 11px; border-radius: 0px; background: rgba(26, 152, 139, 0.5); }
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active { background: #42A146; }
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto { bottom: -60px; }

.navbar-toggle { border-radius: 0px; border-color: transparent !important; background-color: transparent; }
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover { background-color: transparent; }
.navbar-default .navbar-toggle .icon-bar { background-color: #42A146; }
.navbar-toggle.collapsed .icon-bar:nth-child(1) { transform: none; -webkit-transform:none; }
.navbar-toggle.collapsed .icon-bar:nth-child(2) { opacity: 1; }
.navbar-toggle.collapsed .icon-bar:nth-child(3) { transform: none; -webkit-transform:none; }

.navbar-toggle .icon-bar:nth-child(1) { transform: rotate(45deg)translate(4px, 4px); -webkit-transform: rotate(45deg)translate(4px, 4px); -moz-transform: rotate(45deg)translate(4px, 4px); -ms-transform: rotate(45deg)translate(4px, 4px); -o-transform: rotate(45deg)translate(4px, 4px); }
.navbar-toggle .icon-bar:nth-child(2) { opacity: 0; }
.navbar-toggle .icon-bar:nth-child(3) { transform: rotate(-45deg)translate(5px, -5px); -webkit-transform: rotate(-45deg)translate(5px, -5px); -moz-transform: rotate(-45deg)translate(5px, -5px); -ms-transform: rotate(-45deg)translate(5px, -5px); -o-transform: rotate(-45deg)translate(5px, -5px); }

.form-control { border-radius: 0px; border: 2px solid #eeeeee; height: 40px; box-shadow: none; }
.form-control:focus { border-color: #42A146; }

/*******************************************************************/


/* TRANSITION ******************************************************/

.btnGreen,
#header .navbar-nav>li>a,
#header .navbar-nav>li>a:after,
#main .contentBody .referanceItem img,
#main .main-referance .referanceItem img,
#header .navbar-brand,
#header .topSocial,
#header .topSocial:before,
.navbar-toggle .icon-bar {
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}

/*******************************************************************/



/* HEADER **********************************************************/


#header { position: fixed; width: 100%; top: 0; overflow: hidden; padding-bottom: 20px; z-index: 5; }
#header .navbar { border-radius: 0px; border: none; margin-bottom: 0px; box-shadow: 4px 0px 15px rgba(0,0,0,0.1);}
#header .navbar-default { background-color: white; }
#header .navbar-nav>li>a { padding: 37px 20px; font-weight: 500; }

#header .navbar-brand { display: flex; align-items: center; height: 94px; margin-right: 50px; padding: 0px 15px; }

#header .navbar-default .navbar-nav>li>a:focus,
#header .navbar-default .navbar-nav>li>a:hover { color: white; background-color: #0C9BCC; }

#header .navbar-default .navbar-nav>.active>a,
#header .navbar-default .navbar-nav>.active>a:focus,
#header .navbar-default .navbar-nav>.active>a:hover { color: white; background-color: #42A146; }

#header .navbar-default .navbar-nav>.open>a,
#header .navbar-default .navbar-nav>.open>a:focus,
#header .navbar-default .navbar-nav>.open>a:hover { color: white; background-color: #0C9BCC; }

#header .dropdown-menu { border-radius: 0px; border: none; padding: 0px; }
#header .dropdown-menu>li>a { padding: 6px 20px; }
#header .dropdown-menu>li>a:focus,
#header .dropdown-menu>li>a:hover { color: white; background-color: #42A146; }

#header .navbar-default .navbar-nav>li>a:after,
#header .navbar-default .navbar-nav>li>a:after,
#header .navbar-default .navbar-nav>.active>a:after { opacity: 0; content: ''; position: absolute; z-index: 2; width: 100%; height: 0px; left: 0; bottom: 0px; background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; }


#header .navbar-default .navbar-nav>li>a:after,
#header .navbar-default .navbar-nav>li>a:after { background-image: url(../img/menu-after-blue.svg); }
#header .navbar-default .navbar-nav>.active>a:after { background-image: url(../img/menu-after-green.svg); }


#header .navbar-default .navbar-nav>li>a:hover:after,
#header .navbar-default .navbar-nav>li>a:focus:after,
#header .navbar-default .navbar-nav>.active>a:after { opacity: 1; height: 16px; bottom: -16px; }

#header .topSocial { position: relative; list-style-type: none; display: inline-block; margin: 0px; padding: 32px 0px 32px 10px; float: right; z-index: 2; }
#header .topSocial > li { float: left; }
#header .topSocial > li a { display: block; padding-right: 5px; }
#header .topSocial > li a i { width: 30px; height: 30px; line-height: 30px; border-radius: 50%; text-align: center; font-size: 15px; color: #42A146; background-color: #FFFFFF; }

#header .topSocial:before { content: ''; position: absolute; width: 22px; height: 100%; left: -18px; top: 0; background: url(../img/svg-green-left.svg) no-repeat center center; background-size: 100% 100%; z-index: -1; }
#header .topSocial:after { content: ''; position: absolute; width: 2000%; height: 100%; left: 0; top: 0; background-color: #42A146; z-index: -1; }

.scroll {  }
.scroll .navbar-nav>li>a { padding: 17px 20px !important; }
.scroll .navbar-brand { height: 54px !important; }
.scroll .topSocial { padding: 12px 0px 12px 10px !important; }
.scroll .topSocial:before { left: -14px !important; }


/*******************************************************************/


/* MAIN ************************************************************/

#main { margin-top: 74px; }
#main .banner { position: relative; z-index: 1; }
#main .banner .bannerDiv { margin-top: -20px; height: 720px; }
#main .mainContent { position: relative; margin-top: -60px; z-index: 2; }
#main .mainContent .mainNews { position: relative; padding-left: 15px; padding-right: 15px; padding-top: 15px; padding-bottom: 30px; text-align: justify; }
#main .mainContent .mainNews h5 { font-size: 16px; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#main .mainContent .mainNews p { height: 43px; overflow: hidden; }
#main .mainContent .mainNews:after { content: ''; position: absolute; width: 70%; height: 2px; left: 15%; bottom: 0; background-color: #ccc; }
#main .mainContent .mainLogoSliderBox { position: relative; background-color: #e4e4e4; padding-top: 50px; }
#main .mainContent .mainLogoSliderBox:before { content: ''; position: absolute; width: 100%; height: 65px; top: 0; left: 0; background-image: url(../img/mainLogoSliderBox.svg); background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; }
#main .mainContent .uretim-tesisleri .uretim-img { width: 100%; height: 350px; }
#main .mainContent .uretim-tesisleri .uretim-filter { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 2; background-color: rgba(0, 154, 203, 0.8); }
#main .mainContent .uretim-tesisleri .uretim-filter:before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url(../img/play.svg) no-repeat center center; background-size: 35px; }
#main .mainContent .uretim-tesisleri h4 { position: absolute; top: 30px; width: 100%; left: 0; text-align: center; z-index: 4; color: white; }
#main .mainContent .uretim-tesisleri.uretimLeft:before { content: ''; position: absolute; width: 60px; height: 100%; left: 0; top: 0; z-index: 3; background-image: url(../img/uretimLeft.svg); background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; }
#main .mainContent .uretim-tesisleri.uretimRight:after { content: ''; position: absolute; width: 60px; height: 100%; right: 0; top: 0; z-index: 3; background-image: url(../img/uretimRight.svg); background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; }

#main .mainContent .mainTopRight h3 { height: 59px; }
#main .mainContent .mainTopRight .mainTopRightImg { height: 261px; }
#main .mainContent .pet-donusum { position: relative; }
#main .mainContent .pet-donusum:before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(26, 152, 139, 0.8); }
#main .mainContent .pet-donusum img { width: 100%; }
#main .mainContent .pet-donusum h1 { position: absolute; top:50%; right: 50px; margin: 0px; color: white; font-style: italic; z-index: 3; font-size: 50px; text-shadow: 2px 0px 4px rgba(0,0,0,0.19); }
#main .mainContent .pet-donusum h4 {position: absolute; top:59%; right: 50px; margin: 0px; font-weight: 300; color: white; z-index: 3; text-shadow: 2px 0px 4px rgba(0,0,0,0.19); }

#main .bread { position: relative; z-index: 1; }
#main .bread:before { content: ''; position: absolute; width: 100%; height: 100%; background-color: rgba(26,152,139,0.4); }
#main .bread-img { height: 135px; margin-top: -20px; }

#main .contentBody { position: relative; float: left; width: 100%; padding: 30px; background-color: white; margin-top: -60px; margin-bottom: 30px; z-index: 2; overflow: hidden; }
#main .contentBottom { position: relative; float: left; width: 100%; background-color: white; margin-bottom: 30px; z-index: 2; }
#main .contentBottom .uretim-img { width: 100%; height: 350px; }
#main .contentBottom .uretim-filter { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 2; background-color: rgba(0, 154, 203, 0.8); }
#main .contentBottom .uretim-filter:before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url(../img/play.svg) no-repeat center center; background-size: 35px; }
#main .contentBottom .uretim-tesisleri h4 { position: absolute; top: 30px; width: 100%; left: 0; text-align: center; z-index: 4; color: white; }
#main .contentBottom .uretim-tesisleri.uretimLeft:before { content: ''; position: absolute; width: 60px; height: 100%; left: 0; top: 0; z-index: 3; background-image: url(../img/uretimLeft.svg); background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; }
#main .contentBottom .uretim-tesisleri.uretimRight:after { content: ''; position: absolute; width: 60px; height: 100%; right: 0; top: 0; z-index: 3; background-image: url(../img/uretimRight.svg); background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; }

#main .contentBottom .contentBottomRight h3 { height: 59px; }
#main .contentBottom .contentBottomRight .mainTopRightImg { height: 261px; }
#main .contentBottom .contentBottomSliderBox .logo-item { display: flex; align-items:center; height: 350px; }

#main .contentBody .productItem { position: relative; padding-bottom: 30px; margin-bottom: 30px; }
#main .contentBody .productItem:after { content: ''; position: absolute; width: 100%; height: 2px; bottom: -1px; left: 0%; background-color: #ccc; }
#main .contentBody .productItem:last-child:after { display: none; }
#main .contentBody .productItem:nth-child(2n+1) { text-align: right; }

#main .contentBody .productItem .productItemRight { float: left; width: 25%; }
#main .contentBody .productItem .productItemLeft { float: left; width: 75%; }

#main .contentBody .productItem:nth-child(2n+1) .productItemRight { position: relative; left: -75%; }
#main .contentBody .productItem:nth-child(2n+1) .productItemLeft { position: relative; left: 25%; }
#main .contentBody .productItem h5 { font-size: 16px; font-weight: 700; color: #bababa; }
#main .contentBody .productItem p { line-height: 24px; }

#main .contentBody .referanceItem { position: relative; float: left; width: 20%; height: 100px; padding:10px; display: flex; display: -ms-flex; align-items:center; justify-content:center; }
#main .contentBody .referanceItem:after { content: ''; position: absolute; width: 2px; height: 50%; top: 25%; right: -1px; background-color: #42A146; opacity: 0.5; }
#main .contentBody .referanceItem:nth-child(5n+1):after { display: none; }
#main .contentBody .referanceItem img { opacity: 0.3; }
#main .contentBody .referanceItem:hover img { opacity: 1; }

#main .main-referance .referanceItem { position: relative; float: left; width: 25%; height: 100px; padding:10px; display: flex; display: -ms-flex; align-items:center; justify-content:center; }
#main .main-referance .referanceItem:after { content: ''; position: absolute; width: 2px; height: 50%; top: 25%; right: -1px; background-color: #42A146; opacity: 0.5; }
#main .main-referance .referanceItem:nth-child(4n):after { display: none; }
#main .main-referance .referanceItem:last-child:after { display: none; }
#main .main-referance .referanceItem img { opacity: 0.3; }
#main .main-referance .referanceItem:hover img { opacity: 1; }

/*******************************************************************/




/* FOOTER **********************************************************/

#footer .footerSocial { list-style-type: none; display: inline-block; margin-top: 20px; }
#footer .footerSocial li { float: left; }
#footer .footerSocial li a { display: block; padding-right: 5px; }
#footer .footerSocial li a i { width: 30px; height: 30px; line-height: 30px; border-radius: 50%; text-align: center; font-size: 15px; color: white; background-color: #4caab4; }
#footer .footerSocial li a i.fa-facebook { background-color: #43609c; }
#footer .footerSocial li a i.fa-twitter { background-color: #23a9e6; }
#footer .footerSocial li a i.fa-instagram { background-color: #2a5b83; }
#footer .footerSocial li a i.fa-google-plus { background-color: #f14033; }

#footer .footer-menu { float: right; list-style-type: none; display: inline-block; margin-top: 10px; padding: 0; }
#footer .footer-menu li { float: left; }
#footer .footer-menu li a { display: block; padding: 15px; text-decoration: none; }
#footer .footer-menu li a:hover { color: #0C9BCC; }
#footer .footer-menu li:last-child a { padding-right: 0px; }

#footer .copyright-col { text-align: right; }

/*******************************************************************/




/* Responsive ******************************************************/

/* XS */
@media (max-width: 767px) {
    #header .navbar-brand { height: 50px; }
    #header .navbar-nav>li>a { padding: 10px 20px; }
    #header .navbar-default .navbar-nav>li>a:hover:after,
    #header .navbar-default .navbar-nav>li>a:focus:after,
    #header .navbar-default .navbar-nav>.active>a:after { display: none; }
    #main .mainContent .pet-donusum h1 { font-size: 25px; }
    #main .mainContent .pet-donusum h4 { font-size: 12px; }
    #main .mainContent { margin-top: 15px; }
    #header { padding: 0px; overflow: auto; }
    #main .mainContent .uretim-tesisleri.uretimRight:after { display: none; }
    #main .contentBottom .uretim-tesisleri.uretimLeft:before,
    #main .contentBottom .uretim-tesisleri.uretimLeft:after { display: none; }
    #footer .footerSocialCol { text-align: center; }
    #footer .footer-menu-col { text-align: center; }
    #footer .copyright-col { text-align: center; }
    #main { margin-top: 50px; }
    #main .contentBody .productItem .productItemRight { float: left; width: 50%; }
    #main .contentBody .productItem .productItemLeft { float: left; width: 50%; }
    #main .contentBody .productItem:nth-child(2n+1) .productItemRight { position: relative; left: -50%; }
    #main .contentBody .productItem:nth-child(2n+1) .productItemLeft { position: relative; left: 50%; }

    #main .contentBody .referanceItem { width: 50%; }
    #main .contentBody .referanceItem:nth-child(2n+1):after { display: none; }

    #main .main-referance .referanceItem { width: 50%; }
    #main .main-referance .referanceItem:nth-child(2n):after { display: none; }
    .scroll .navbar-brand { height: 50px !important; }
    .scroll .navbar-nav>li>a { padding: 10px 20px !important; }

}

/* SM */
@media (min-width: 768px) and (max-width: 991px) {
    #header .navbar-nav>li>a { padding: 37px 10px; }
    #header .navbar-brand { margin-right: 0px; }
    #main .mainContent .pet-donusum h1 { font-size: 32px; }
    #main .mainContent .pet-donusum h4 { font-size: 14px; }
    #footer .footer-menu li a { padding: 15px 10px; }

    #main .contentBody .referanceItem { width: 33.33%; }
    #main .contentBody .referanceItem:nth-child(3n+1):after { display: none; }

    #main .main-referance .referanceItem { width: 50%; }
    #main .main-referance .referanceItem:nth-child(2n):after { display: none; }

    .scroll {  }
    .scroll .navbar-nav>li>a { padding: 17px 10px !important; }
    .scroll .navbar-brand { height: 54px !important; }
    .scroll .topSocial { padding: 12px 0px 12px 10px !important; }
    .scroll .topSocial:before { left: -14px !important; }
}
/* MD */
@media (min-width: 992px) and (max-width: 1199px) {
    #header .navbar-brand { margin-right: 25px; }
    #main .mainContent .pet-donusum h1 { font-size: 40px; }
    .dropdown:hover .dropdown-menu { display: block; }
}

/* LG */
@media (min-width: 1200px) {
    .dropdown:hover .dropdown-menu { display: block; }
}


.buttons:before, .buttons:after {content: ''; display: table;}
.buttons {text-align: right; margin: 20px 0;}

.share-box:before, .share-box:after {content: " "; display: table;}
.share-box {border-top: 1px dotted #ccc; padding-top: 15px; margin-top: 20px; margin-bottom: 20px;}
.share-box p {margin-bottom: 5px;}
.share-box > a {text-indent: -9999px; display: inline-block; margin-right: 5px;}
.share-box > a.facebook {background: url(../img/share-facebook.png) no-repeat; width: 88px; height: 25px;}
.share-box > a.twitter {background: url(../img/share-twitter.png) no-repeat; width: 79px; height: 25px;}
.share-box > a.google {background: url(../img/share-google.png) no-repeat; width: 67px; height: 25px;}