.btn-group-vertical>.btn-group:after, .btn-group-vertical>.btn-group:before, .btn-toolbar:after, .btn-toolbar:before, .clearfix:after, .clearfix:before, .container-fluid:after, .container-fluid:before, .container:after, .container:before, .dl-horizontal dd:after, .dl-horizontal dd:before, .form-horizontal .form-group:after, .form-horizontal .form-group:before, .modal-footer:after, .modal-footer:before, .modal-header:after, .modal-header:before, .nav:after, .nav:before, .navbar-collapse:after, .navbar-collapse:before, .navbar-header:after, .navbar-header:before, .navbar:after, .navbar:before, .pager:after, .pager:before, .panel-body:after, .panel-body:before, .row:after, .row:before {
    display: table;
    content: " ";
}
:after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.error-message {
    color: red;
}

#non-resizable {
    resize: none;
    max-width: auto; 
    max-height: auto;
}
.row
{
    margin: 0;
}

.centered {
    margin-left: auto;
    margin-right: auto;
    display: block;
    float: none !important;
    
    
}
.blue-box {
    text-align: center;
  }
:after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  .blue-box {
    background-color: #10a8df;
    position: relative;
    height: 22vh;
    /*width: 17vw;*/
    text-align: center;
    margin-left: 20px;
    margin-right: 20px;
  }
  
    .blue-box:after {
        content: "";
        display: block;
        border-width: 20px 20px 0;
        border-style: solid;
        border-color: #10a8df transparent transparent;
        margin-left: -20px;
        position: absolute;
        bottom: -20px;
        left: 50%;
    }
  
    .blue-box img {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
    .content-BoxCollector {
        background-color: #f5f5f5;
        padding: 30px 0px 40px 0px;
    }
    html, body, div, span, object, iframe, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
        /* margin: 0; */
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        /* vertical-align: baseline; */
        background: transparent;
        text-align: center;
    }
    .content-BoxCollector h3 {
        margin-top: 2vh;
        color: #10a8df;
    }
    .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }
    .content-CounterCollector {
        margin: 30px 0 30px 0;
    }
    .content-CounterCollector .center {
        margin: 0 auto;
        max-width: 945px;
    }
    .mart0 {
        margin-top: 0;
    }
    .content-item-CounterItem .description {
        font-size: 18px;
    }
    .container {
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }
    #left
    {
        float: left;
    }
    #center
    {
        float: right;
    }
    #right
    {
        float: none;
    }
    @media (min-width: 200px)
    {
        
        #left
        {
            float: none;
            
        }
        #center
        {
             float: none;
        }
        #right
        {
            float: none;
        }
        
    }
    @media (min-width: 820px)
    {
        
        #left
        {
            float: left;
            
        }
        .flex-container
        {
            line-height: 10vh;
        }
        #center
        {
             float: right;
        }
        #right
        {
            margin: auto;
        }
        
    }
    @media (min-width: 768px)
    {   
        .fa {
            display: inline-block;
            font: normal normal normal 14px/1 FontAwesome;
            font-size: inherit;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale
        }
        #left
        {
            float: left;
            
        }
        #center
        {
             float: right;
        }
        #right
        {
            margin: auto;
        }
    }
.job h1
{
    font-weight: bold;
    color: #10a8df;
}
.job h5, h6, h4, h2
{
    color: #202A5C;
}
.job h4
{
    font-size: 30px;
    font-weight: bold;
    margin-top: 6vh;
}
.job h2
{
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 6vh;
}
.Banner img {
    width: 100%;
    height: 100%;
    background-size: cover;
}
.user .tech h3
{
    max-width: 300px;
}
.user .tech h5
{
    max-width: 32rem;
    font-family: 'HelveticaNeueLTPro-BdCn' ,sans-serif;
    color: #202A5C;
    
}
.user .tech h5, h3
{
    margin: 2rem auto;
    color: #202A5C;
    font-weight: bold;
    font-family: 'HelveticaNeueLTPro-BdCn' ,sans-serif;;
}
.konica3 img {
    width: 100%;
    height: 100%;
    background-size: cover;
    opacity: 0.8;
}
.paket
{
    padding: 30px 0 50px 0;
}
.paket .content .techh
{
    margin: auto;
    font-size: 24px;
    font-weight: bold;
    color: #202A5C;
    width: 100%;
    text-align: center;   
}
.paketler
{
    position: relative;
    background-color: #f5f5f5;
    padding: 30px 0px 40px 0px;
}
.paketler p{
    border-bottom: 1px dashed gray;
    margin: 0 0 0 0;
    padding: 10px;
}
.paketler .container {
    /*position: relative;*/
    background-color: white;
    padding: 0 10px 100px 10px;
    border: 10px solid whitesmoke;
    min-height: 645px;
}
.paketler .container .footer
{
    width: 100%;
    position: absolute;
    bottom: 10px;
    right: 0;
    left: 0;
}
.communucation h5
{
    color: #202A5C;
    font-family: 'HelveticaNeueLTPro-BdCn', sans-serif;
    font-weight: 600;
    margin-bottom: 30px;
}
.communucation #img
{
    margin-bottom: 30px;
}
#gonderbtn
{
    cursor: pointer;
    display: inline-block;
    border-radius: 4px;
    height: 100%;
    display: inline-block;
    padding: 13px 10px;
    width: 100%;
    background-color: #10a8df;
    background-position: center;
    background-image: url(../img/logozarf.png);
    background-repeat: no-repeat;
    border: none;
}
.paketler .container img
{
    width: 100%;
}
.paketler .container p
{
    width: 100%;
}
#kesifbtn
{
    cursor: pointer;
    display: inline-block;
    color: white;
    text-decoration: none;
    background-color: #10a8df;
    padding: 14px;
    min-width: 140px;
    display: inline-block;
    border-radius: 0;
    box-shadow: 0px 0px 3px 1px #ccc9c9;
    font-family: 'HelveticaNeueLTPro-BdCn', sans-serif;
    font-weight: 550;
    font-size: 18px;
}
#kesifbtn:hover
{
    transition: .4s;
    color: #202A5C;
}
#imlec {
    font-family: sans-serif, 'HelveticaNeueLTPro-BdCn';
    font-weight: bold;
    color: black;
    font-size: 12px;
    position: absolute;
    display: none;
    z-index: 1000; 
}
#basic
{
    background-color: #ffff;
    padding: 14px 10px;
}
#basic p
{
    color: #202A5C;
    font-size: 22px;
}
.image-container {
    height: 650px;
    width: 100%;
    position: relative;
    object-fit: cover; 
}

/*  */
.image-container .slide {
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    height: 650px;
    overflow: hidden;
    transition: opacity 1s;
    
}
.hidden {
    opacity: 0;
}
.Slide-banner
{
    image-rendering: optimizeQuality;
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: fill;
}
@media (min-width: 320px) and (max-width: 374px ) {
    #prevButton, #nextButton
    {
        top: 90% !important;
    }
    .secondImageContent, .secondImageContent-Content, .secondImageContentNext, .secondImageContent-ContentNext, .secondImageContentLast, .secondImageContent-ContentLast
    {
        left: -50% !important;
        width: 100% !important;
    }
    .firstImageContent
    {
        width: 50% !important;
    }
    .ImageContent
    {
        width: 50% !important;
    }
}
@media (min-width: 1441px) and (max-width: 2500px)
{
    .secondImageContent, .secondImageContent-Content, .secondImageContentNext, .secondImageContent-ContentNext, .secondImageContentLast, .secondImageContent-ContentLast
    {
        left: 5% !important;
        width: 25% !important;
    }
}
@media (min-width: 2550px)
{
    .secondImageContent, .secondImageContent-Content, .secondImageContentNext, .secondImageContent-ContentNext, .secondImageContentLast, .secondImageContent-ContentLast
    {
        width: 20% !important;
        left:  5% !important;
    }
}
@media (min-width: 375px) and (max-width: 424px )
{
.footer-footer
{
display:block;
}
    #prevButton, #nextButton
    {
        top: 90% !important;
    }
    .firstImageContent
    {
        width: 50% !important;
    }
    .ImageContent
    {
        width: 50% !important;
    }
    .secondImageContent, .secondImageContent-Content, .secondImageContentNext, .secondImageContent-ContentNext, .secondImageContentLast, .secondImageContent-ContentLast
    {
        left: -50% !important;
        width: 100% !important;
    }
}
@media (min-width: 425px) and (max-width: 767px)
{
.footer-footer
{
display:block;
}
    #prevButton, #nextButton
    {
        top: 90% !important;
    }
    .firstImageContent
    {
        width: 50% !important;
    }
    .ImageContent
    {
        width: 50% !important;
    }
    .secondImageContent, .secondImageContent-Content, .secondImageContentNext, .secondImageContent-ContentNext, .secondImageContentLast, .secondImageContent-ContentLast
    {
        left: -50% !important;
        width: 100% !important;
    }
}
@media (min-width:  768px) and (max-width: 1023px)
{
.footer-footer
{
display:block;
}
    .firstImageContent
    {
        width: 50% !important;
    }
    .ImageContent
    {
        width: 50% !important;
    }
    .secondImageContent, .secondImageContent-Content, .secondImageContentNext, .secondImageContent-ContentNext, .secondImageContentLast, .secondImageContent-ContentLast
    {
        left: -25% !important;
        width: 70% !important;
    }
}
@media (min-width:  1024) and (max-width: 1439px)
{
    .secondImageContent, .secondImageContent-Content, .secondImageContentNext, .secondImageContent-ContentNext, .secondImageContentLast, .secondImageContent-ContentLast
    {
        left: -25% !important;
        width: 100% !important;
    }
}
.secondImageContent, .secondImageContentNext, .secondImageContentLast
{

    animation: FadeLeft, FadeLeftCopy ease-in-out;
    animation-duration: 0.5s;
    animation-delay: 0s, 4.5s;
    object-fit: cover;
        display: block;
        width: 35%;
        position: absolute;
        top: 75%;
        scale: (1);
        left: -10%;
        transform: translate(50%, -150%);
}
.secondImageContent-Content, .secondImageContent-ContentNext, .secondImageContent-ContentLast
{
    animation: FadeLeftContent, FadeLeftContentCopy ease-in-out;
    animation-duration: 0.5s;
    animation-delay: 0s, 4.7s;
    object-fit: cover;
    display: block;
    width: 35%;
    position: absolute;
    top: 75%;
    left: -10%;
    scale: (1);
    transform: translate(50%, -50%);
    }
.firstImageContent
    {
        animation: FadeWidth, FadeWidthCopy;
        animation-duration: 0.5s;
        animation-delay: 0s, 4.7s;
        object-fit: cover;
        display: block;
        width: 30%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
     .ImageContent  /* "Sizin İçin Çalışıyor" */
    {
        animation-name: FadeContent, FadeContentCopy;
        animation-duration: 0.5s;
        animation-delay: 0s, 4.7s;
        position: absolute;
        object-fit: cover;
        width: 25%;
        top: 50%;
        left: 50%;
        transform: translate(-20%, 10%);
    }
    ::-webkit-scrollbar
    {
        display: none;
    }
    #prevButton
    {
      cursor: pointer;
      box-sizing: border-box;
      border-radius: 100%;
      height: 50px;
      width: 50px;
      margin-left: 20px;
      border: none;
      background-color: #222525;
      left: 0;
      top: 50%;
      float: left;
      position: absolute;
    }
    #prevButton:hover
    {
      color: #10a8df;
      background-color: black;
      transition: 0.4s;
    }
    #nextButton
    {
      cursor: pointer;
      box-sizing: border-box;
      border-radius: 100%;
      height: 50px;
      width: 50px;
      margin-right: 20px;
      border: none;
      background-color: #222525;
      right: 0;
      top: 50%;
      transform: translate(0%, 0%);
      float: right;
      position: absolute;
    }
    #nextButton:hover
    {
        color: #10a8df;
        background-color: black;
        transition: 0.4s;
    }
/* Responsive bitiş */
/*Keyframe başlangıç */
@keyframes FadeWidthContent {
    from
    {
        transform: scale(0);
        opacity: 0;
    }
    to
    {
        transform: scale(100%);
        opacity: 1;
    }
}

@keyframes FadeWidth {
    from {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

@keyframes FadeWidthCopy {
    from {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    to {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
}
@keyframes FadeContent {
    from {
        transform: translate(-20%, 10%) scale(0);
        opacity: 0;
    }
    to {
        transform: translate(-20%, 10%) scale(1);
        opacity: 1;
    }
} 

@keyframes FadeContentCopy {
    from {
        transform: translate(-20%, 10%) scale(1);
        opacity: 1;
    }
    to {
        transform: translate(-20%, 10%) scale(0);
        opacity: 0;
    }
}

@keyframes FadeLeft {
        from
        {
         transform: translate(50%, 100%);   
        }
        to
        {
            transform: translate(50%, -150%);
        }

}

@keyframes FadeLeftCopy {
        from
        {
            transform: translate(50%, -150%);
        }
        to
        {
            transform: translate(50%, 100%);   
        }

}

@keyframes FadeLeftContent {
        from
        {
            transform: translate(50%, 100%);
        }
        to
        {
            transform: translate(50%, -50%);
        }
}
@keyframes FadeLeftContentCopy {
        from
        {
            transform: translate(50%, -50%);
            
        }
        to
        {
            transform: translate(50%, 100%);
        }
}
/*Keyframe Responsive Başlangıç */
/*Keyframe Responsive Bitiş */


     /*Keyframe bitiş */




     
     /* Style başlangıç */
    
    /* Style bitiş */