﻿.tableToUl .tuBody li img {
    width:100%;
}

.dfdbLeftImg {
    overflow:hidden;
}

.colorsOption {
    padding: 0;
}

.colorsOption ul li {
    width:25%;
    margin-right:0;
    margin-bottom:25px;
}

.colorsOption ul li a {
    border-radius:100%;
    float:none;
    display:table;
    margin:0px auto;
}

.colorsOption ul li div {
    width: 100%;
    float: left;
    margin-top: 5px;
}

.colorsOption ul li div .s1 {
    width: 100%;
    float: left;
    font-size: 14px;
    font-family: "Gotham-Book";
    color: #585858;
    text-align: center;
    white-space: nowrap;
    /*overflow:hidden;
    text-overflow:ellipsis;*/
}

.colorsOption ul li div .s2 {
    width: 100%;
    float: left;
    font-size: 14px;
    font-family: "Gotham-Light";
    color: #585858;
    text-align: center;
}

.colorsOption ul li:after {
    position:relative;
    left:auto;
    top:auto;
    margin:0px auto;
    margin-top: -35px;
}

.popupMenu ul li a .s1 {
    width:22px;
    height:22px;
    float:left;
    background: url(../img/ico/down99.png) no-repeat;
    background-size: 22px;
    margin-top: 2px;
    margin-right: 5px;
}

.sixtyMm {
    background: url(../img/ico/60mm.png) no-repeat;
}

.sixtyFiveMm {
    background: url(../img/ico/650mm.png) no-repeat;
}

.askili-ip {
    background: url(../img/ico/askili-ip.png) no-repeat;
}

.sulama-tipi {
    background: url(../img/ico/sulama-tipi.png) no-repeat;
}

.ic-mekan {
    background: url(../img/ico/ic-mekan.png) no-repeat;
}

.dis-mekan {
    background: url(../img/ico/dis-mekan.png) no-repeat;
}

.montaj {
    background: url(../img/ico/montaj.png) no-repeat;
}

.popupMenu ul {
    -webkit-box-shadow: 0px 1px 6px -2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 1px 6px -2px rgba(0, 0, 0, 0.5);
    box-shadow:0px 1px 6px -2px rgba(0, 0, 0, 0.5);
}

.popupMenu {
    width: 200px;
}

.decorativeProductsList.productionFlowerpot .dpListArea::after {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   z-index: 2;
   background: linear-gradient(to top right, rgba(14,59,60,0.9) 15%, rgba(35,122,132,0) 80%);
}

.tableStyle1 tr:nth-child(2n+1) td {
    background:#ecf5f7;
}

.offerlist {
    right: calc(50% - 585px - 100px);
    top: calc(340px);
    -webkit-transition: none;
    transition: none;
}

.offerlistTop {
    -webkit-box-shadow: 0px 5px 20px -5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 5px 20px -5px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 5px 20px -5px rgba(0, 0, 0, 0.2);
}

.offerlistBottom {
    -webkit-box-shadow: 0px 5px 20px -5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 5px 20px -5px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 5px 20px -5px rgba(0, 0, 0, 0.2);
}

.homepage .offerlist {
    top:calc(850px - 30px);
}

.offerlist.active {
    top:30px;
    position:fixed;
}

.homepage .offerlist.active {
    top:30px;
    position:fixed;
    z-index: 99;
}

.progress-bar .left {
    /*height: 122px;
    width: 122px;
    left:-1px;
    top:-1px;*/
}

.tableToUlBottomR a.ttubr2 .s1 {
    width: 29px;
    height: 26px;
    background: url(../img/ico/clear2.png) no-repeat;
}

.rowTers {
    width:100%;
    float:left;
    padding:0 15px;
}

.sraRight {
    width:120px;
    height:120px;
}

.sraRight .ct-chart {
    float: left;
    margin-left: -5px;
    margin-top: -5px;
}

.sraRight .ct-chart {
    width:130px;
    height:130px;    
}

.sraRight .ct-series-b .ct-slice-pie,  .ct-series-b .ct-slice-donut-solid, .sraRight .ct-series-b .ct-area {
    fill:#cfdadd;
}

.sraRight .ct-series-a .ct-slice-pie, .sraRight .ct-series-a .ct-slice-donut-solid, .sraRight .ct-series-a .ct-area {
    fill:#0f767d;
}

.sraRight .ct-chart-pie .ct-label, .sraRight .ct-chart-donut .ct-label {
    display:none;
}

.sraRight .ct-chart {
    clear:both;
}

.sraRight .ct-chart-percent {
    clear:both;
    width: 100px;
    height: 100px;
    background:#fff;
    float:left;
    border-radius:100%;
    margin-top: -115px;
    margin-left: 10px;
}

.sraRight .ct-chart-percent .s1 {
    float: left;
    font-family: "Gotham-Light";
    font-size: 36px;
    color: #0f767d;
    letter-spacing: -2px;
}

.sraRight .ct-chart-percent .s2 {
    float: left;
    font-family: "Gotham-Light";
    font-size: 18px;
    color: #0f767d;
    margin-top: 17px;
    margin-left: 2px;
}

.sec2RightArea .sraRight {
    width:auto;
}

.pdtlImgArea img {
    margin-top: 90px;
}
.productsDetailKind ul li a .pdkTop img {
    margin-top: 15px;
    height: auto;
}

.pdtlImgArea a {
	outline: none;
}

.productsDetailKind ul li a .pdkTop {
	overflow: hidden;
}

.rightForm .selectGroup ul li {
	border-top: 1px solid #83b9bd;
    height: 40px;
    line-height: 40px;
}

.imgTitle {
    width:100%;
    height:100%;
    float:left;
    position:relative;
    -webkit-transition: all .6s ease;
    transition: all .6s ease;
}

.imgTitle::before {
    content: attr(title);
    position: absolute;
    left: -15px;
    bottom: 27px;
    opacity:0;
    background:#0f767d;
    color:#fff;
    font-size:14px;
    font-family: "Gotham-Light";
    border-radius:40px;
    width: calc(100% + 30px);
    text-align: center;
    padding: 5px 0;
    -webkit-transition: all .6s ease;
    transition: all .6s ease;
}

.imgTitle:hover::before {
    bottom: 68px;
    opacity:1;
}

.tableArea {
    overflow: initial;
    overflow-x:visible;
}

.colorsOption ul {
	width: 100%;
}

.rightForm .selectGroup span {
    border: 2px solid #6aa9ae;
    line-height: 46px; 
    -webkit-transition: all .6s ease;
    transition: all .6s ease;    
}

.rightForm .inputGroup span.inputError {
    border: 2px solid #f23c3c;
}

.rightForm .inputGroup input {
    -webkit-transition: all .6s ease;
    transition: all .6s ease;  
}

.rightForm .inputGroup input.inputError {
    border: 2px solid #f23c3c;
}

.rightForm .selectGroup ul li {
    background: #2f8e94;
}

.errorForm {
    width: 100%;
    float: left;
    background: #f23c3c;
    padding: 12px 10px;
    text-align: center;
    font-family: "Gotham-Book";
    font-size: 14px;
    color: #fff;
    margin-top: 15px;
    line-height: 20px;
    visibility: hidden;
    opacity: 0;
    -ms-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -webkit-transition: all .8s ease;
    transition: all .8s ease;
    margin-top: -44px;
}

.errorForm.active {
    visibility: visible;
    opacity: 1;
}

.sucForm {
    width: 100%;
    float: left;
    background: #7fbc47;
    padding: 12px 10px;
    text-align: center;
    font-family: "Gotham-Book";
    font-size: 14px;
    color: #fff;
    margin-top: 15px;
    visibility: hidden;
    opacity: 0;
    -ms-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -webkit-transition: all .8s ease;
    transition: all .8s ease;
}

.sucForm.active {
    visibility: visible;
    opacity: 1;
}

.lfRight {
    height:120px;
    position:relative;
    overflow:hidden;
}

.errorBox {
    width: 100%;
    height: 120px;
    position:absolute;
    left:-100%;
    top:0;
    border: none;
    outline: none;
    background: url(../img/ico/errorBox.png) center center no-repeat #f23c3c;
    -webkit-transition: all .15s ease-out;
    transition: all .15s ease-out;
}

.errorBox.active , .sucBox.active , .loadBox.active {
    left:0;
}

.sucBox {
    width: 100%;
    height: 120px;
    position:absolute;
    left:-100%;
    top:0;
    border: none;
    outline: none;
    background: url(../img/ico/sucBox.png) center center no-repeat #7fbc47;
    -webkit-transition: all .15s ease-out;
    transition: all .15s ease-out;
}

.loadBox {
    width: 100%;
    height: 120px;
    position:absolute;
    left:-100%;
    top:0;
    border: none;
    outline: none;
    background: #7fbc47;
    -webkit-transition: all .15s ease-out;
    transition: all .15s ease-out;
    overflow: hidden;
}

.lfMiddle input[type="text"] , .lfMiddle input[type="email"] , .lfMiddle textarea {
    -webkit-transition: all .15s ease-out;
    transition: all .15s ease-out;
}

.lfMiddle input[type="text"].blurValNull , .lfMiddle input[type="email"].blurValNull , .lfMiddle textarea.blurValNull {
    border:2px solid #f23c3c;
}

.lfRight input[type="button"] {
    float:right;    
    -webkit-transition: all .6s ease;
    transition: all .6s ease;
}

.lfRight input[type="button"].active {
    margin-right:-100%;
}

.spinner {
    margin: 0 auto;
    margin-top: 32px;
    margin-bottom: 10px;
    width: 60px;
    text-align: center;
}

.spinner > div {
  width: 13px;
  height: 13px;
  background-color: #FFF;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

.loadBox .s2 {
    width:100%;
    float:left;
    text-align:center;
    font-family: "Gotham-Book";
    font-size: 14px;
    color: #fff;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

.myFormRulesEmail4.blurValNull {
    border-bottom:2px solid rgba(242, 60, 60, 1)!important;
}

.subinputGroup {
    overflow:hidden;
    position:relative;
}

.warningBox2 {
    width: 100%;
    height: 50px;
    position:absolute;
    outline: none;
    font-family: "Gotham-Bold";
    text-align: center;
    -webkit-transition: all .6s ease;
    transition: all .6s ease;
    font-size: 14px;
    color: #fff;
    line-height:46px;
    text-align:left;
    padding: 0 15px;
    left:-100%;
    opacity:0;
}

.errorBox2 {
    background: #f23c3c;
    border: 2px solid #f23c3c;
}

.sucBox2 , .loadBox2 {
    background: #7fbc47;
    border: 2px solid #7fbc47;
}

.warningBox2 .spinner {
    margin-top:1px;
    margin-bottom:0;
}

.sucBox2.active , .loadBox2.active , .errorBox2.active {
    left:0;
    opacity:1;
}

.rightForm .inputGroup input[type="text"].blurValNull, .rightForm .inputGroup input[type="email"].blurValNull, .rightForm .inputGroup textarea.blurValNull {
    border: 2px solid #f23c3c;
}


.rightForm .inputGroup input[type="button"].active {
    margin-left:100px;
    opacity:0;
}

.scBottom ul {
    height: 290px;
    overflow: hidden;
    overflow-y: visible;
}


.scBottom ul::-webkit-scrollbar {
    width: 5px;
}
 
.scBottom ul::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.1);
}
 
.scBottom ul::-webkit-scrollbar-thumb {
    background-color: #fff;
}

.contactBranchLink{
    -webkit-transition: all .15s ease;
    transition: all .15s ease;
}

.contactBranchLink.active {
    border-radius: 0!important;
    -webkit-border-top-left-radius: 10px!important;
    -webkit-border-top-right-radius: 10px!important;
    -moz-border-radius-topleft: 10px!important;
    -moz-border-radius-topright: 10px!important;
    border-top-left-radius: 10px!important;
    border-top-right-radius: 10px!important;    
}

.contactBranchList {
    position:absolute;
    left: 0;
    top: 32px;
    width: 100%;
    display: none;
}

.contactBranchList ul {
    width: 100%;
    float: left;
    background: #fff;
    border: 2px solid #0f767d;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;    
}

.contactBranchList ul li {
    width: 100%;
    float: left;
    padding: 0 16px;
}

.contactBranchList ul li a {
    width: 100%;
    float: left;
    font-family: "Gotham-Light";
    font-size: 16px;
    padding: 5px 0;
    color: #2e2a2c;    
}

.contactMiddleTopTabContent {
    display: none;
}

@media screen and (max-width: 1370px) {
    .offerlist {
        width:83px;
        right:0;
    }
}

@media screen and (max-width: 1199px) {
    .offerlist {
        display: block; 
        right:0;
    }
}

@media screen and (max-width: 1140px) {
    .offerlist {
        width: 70px;
        right:10px;
    }
    .offerlistTop span.s2 {
        font-size:16px;
    }
    .offerlistBottom span {
        margin-top:15px;
    }
}

@media screen and (max-width: 991px) {
    .scBottom ul {
        height: calc(100vh - 270px);
    }    
    .howDoIQuote li img {
        width: 40%;
    }
	.tableArea {
		overflow: hidden;
		overflow-x: visible;
	}
	.dpListArea {
		z-index: 2;
		background: linear-gradient(to top right, rgba(14, 59, 60, 1) 22%, rgba(14, 59, 60, 0.7) 80%);
	}
	.dpListArea img {
		opacity: 0.4;
	}
	.dpListArea::after {
		display: none;
	}
    .popupMenu ul::before {
        /*display: none;*/
        left: 50%;
    }
    .hrBottom ul li:hover .popupMenu {
        top: 51px;
    }
    .popupMenu ul {
        -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        padding-top: 20px!important;
    }
    .hrBottom ul li:hover a {
        background: none;
        color: #fff;
    }
    .popupMenu ul li a {
        color: #0c7b86!important;
    }
}

@media screen and (max-width: 767px) {
    .scBottom ul {
        height: 285px;
    }    
    .imgTitle::before {
        font-size: 10px;
        bottom: auto;
        top: 0;
    }
    .imgTitle:hover::before {
        bottom: auto;
        opacity: 1;
        top: 68px;
    }
    .hrBottom ul li:hover .popupMenu {
        top: 81px;
    }    
    .sec2RightArea .sraRight {
        margin-top:0;
    }
    .offerlist {
        width:auto;
        top:auto!important;
        bottom:15px!important;
        position:fixed;
        right:auto!important;
        left:10px;
    }
    .offerlistTop {
        width:auto;
        height:auto;
        clear:none;
        margin-bottom: 0;
        padding-top: 0;
        padding: 11px;
    }
    .offerlistTop .s1 {
        float:left;
        display: block;
        margin: 0;
    }
    .offerlistTop .s2 {
        width:auto!important;
        float:left;
        display: block;
        margin: 0;
        margin-top: 5px!important;
        margin-left:10px!important;
    }
    .offerlistBottom {
        width: 90px;
        height: 50px;
        clear:none;
        margin-left:10px;
    }
    .offerlistBottom span {
        width:100%;
        float:left;
        margin:0;
        line-height: 16px;
        margin-top: 8px;
    }
    .decorativeProducts .dpArea h2 {
        width: 121px;
        float: none;
        display: table;
        margin: 0px auto;
        margin-bottom: 15px
    }
}

