.animated {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

.animatedd {
    -webkit-animation-duration: 2.5s;
    animation-duration: 2.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes bounce {
    0%, 20%, 40%, 60%, 80%, 100% {
        -webkit-transform: translateY(0);
    }

    50% {
        -webkit-transform: translateY(-10px);
    }
}

@keyframes bounce {
    0%, 20%, 40%, 60%, 80%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
}

@-webkit-keyframes bouncee {
    0%, 20%, 40%, 60%, 80%, 100% {
        -webkit-transform: translateX(0);
    }

    50% {
        -webkit-transform: translateX(-10px);
    }
}

@keyframes bouncee {
    0%, 20%, 40%, 60%, 80%, 100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-10px);
    }
}

.bouncee {
    -webkit-animation-name: bouncee;
    animation-name: bouncee;
}


/* ------------------------- Effect  UP -----------------------------   */

#Header-Sub-Product .Header-Background {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 250px;
}



/*-----------------------------   SubProduct --------------------------------- */
#SubProduct #OneSection {
    height: auto;
}

#SubProduct #OneSection .Left {
    background-color: #c4b5a5;
    
}

#SubProduct #OneSection .Right {
    background-color: #f2eadc;

}

    #SubProduct #OneSection .Right .Right-Content {
        padding-left: 10%;
        padding-right: 25%;
        padding-top: 7%;
        padding-bottom: 5%;
    }

        #SubProduct #OneSection .Right .Right-Content h4 {
            font-size: 1.2em;
            color: #31251c;
            font-family: 'Lato', sans-serif;
            font-weight:400;
        }

        #SubProduct #OneSection .Right .Right-Content h1 {
            font-size: 3.7em;
            color: #31251c;
            font-family: 'Cormorant', serif;
            font-weight: 500;
        }

        #SubProduct #OneSection .Right .Right-Content p {
            font-size: 0.9em;
            color: #31251c;
            font-family: 'Lato', sans-serif;
            font-weight: 400;
            line-height:2.7em;
        }

        #SubProduct #OneSection .Right .Right-Content h5 {
            font-size: 1.2em;
            color: #31251c;
            font-family: 'Lato', sans-serif;
            font-weight: 700;
        }

        #SubProduct #OneSection .Right .Right-Content h6 {
            font-size: 0.9em;
            color: #31251c;
            font-family: 'Lato', sans-serif;
            font-weight: 700;
        }

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

    #SubProduct #OneSection .Right .Right-Content {
        padding-left: 5%;
        padding-right: 10%;
        padding-top: 5%;
        padding-bottom: 5%;
    }

        #SubProduct #OneSection .Right .Right-Content h4 {
            font-size: 1.1em;
        }

        #SubProduct #OneSection .Right .Right-Content h1 {
            font-size: 3.5em;
            padding-top:5% !important;
        }


}

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

    #SubProduct #OneSection .Right .Right-Content {
        padding-left: 3%;
        padding-right: 6%;
        padding-top: 5%;
        padding-bottom: 3%;
    }

        #SubProduct #OneSection .Right .Right-Content h4 {
            font-size: 1em;
        }

        #SubProduct #OneSection .Right .Right-Content h1 {
            font-size: 3em;
            padding-top: 3% !important;
        }

        #SubProduct #OneSection .Right .Right-Content .Icons {         
            padding-top: 3% !important;
        }

    
}

@media only screen and (max-width:680px) {
    #Header-Sub-Product .Header-Background {     
        height: 150px;
    }

    #SubProduct #OneSection .Left  {
        height:370px !important;
    }

    #SubProduct #OneSection .Right .Right-Content .Icons .text-center img {
        width: 45% !important;
    }

    #SubProduct #OneSection .Right .Right-Content {
        padding-top:10% !important;
    }


}

    /*------------------------- Üretim Haritası  -------------------------------  */

    #SubProduct #TwoSection {
        height: 700px;
    }

        #SubProduct #TwoSection .container-fluid {
            margin-left: auto;
            margin-right: auto;
            width: 80%;
        }


        #SubProduct #TwoSection h1 {
            font-size: 3.5em;
            color: #31251c;
            font-family: 'Cormorant', serif;
            font-weight: 500;
        }

        #SubProduct #TwoSection .Map iframe {
            height: 600px;
        }



        @media only screen and (max-width: 1690px) {
            #SubProduct #TwoSection {
            height: 630px;
        }

                #SubProduct #TwoSection .Map iframe {
                    height: 500px;
                }
    }

    @media only screen and (max-width: 1450px) {
        #SubProduct #TwoSection {
            height: 530px;
            padding-top: 0% !important;
        }

            #SubProduct #TwoSection .Map iframe {
                height: 450px;
            }
    }

    @media only screen and (max-width: 1370px) {
        #SubProduct #TwoSection {
            height: 500px;
            padding-top: 0% !important;
        }

            #SubProduct #TwoSection .Map iframe {
                height: 400px;
            }
    }

    @media only screen and (max-width: 1290px) {
        #SubProduct #TwoSection h1 {
            font-size: 3em;
        }
    }

    @media only screen and (max-width: 1030px) {
        #SubProduct #TwoSection {
            height: 450px;
            padding-top: 0% !important;
        }

            #SubProduct #TwoSection .Map iframe {
                height: 350px;
            }
    }

    @media only screen and (max-width:680px) {
        #SubProduct #TwoSection {
            height: 500px;
            padding-top: 0% !important;
        }

            #SubProduct #TwoSection .container-fluid {
                width: 100%;
            }

            #SubProduct #TwoSection h1 {
                font-size: 2.7em;
            }

            #SubProduct #TwoSection .Map .col-md-12 {
                padding-left: 0px !important;
                padding-right: 0px !important;
            }

            #SubProduct #TwoSection .Map iframe {
                height: 350px;
            }

    }
    /*------------------------- Ürün Takvimi  -------------------------------  */

    #SubProduct #ThreeSection .container-fluid {
        height: auto;
        background-color: #f2eadc;
    }


    #SubProduct #ThreeSection .container-fluid {
        margin-left: auto;
        margin-right: auto;
        width: 80%;
    }

    #SubProduct #ThreeSection h1 {
        font-size: 3.5em;
        color: #31251c;
        font-family: 'Cormorant', serif;
        font-weight: 500;
    }


    #SubProduct #ThreeSection .card {
        position: relative;
        width: 400px;
        height: 540px;
    }

        #SubProduct #ThreeSection .card .card-title {
            position: absolute;
            width: 100%;
        }

            #SubProduct #ThreeSection .card .card-title h5 {
                color: white;
                /* background-color: #d7c8b8;*/
                background-color: #042b18;
                font-size: 1.2em;
                font-family: 'Lato', sans-serif;
                font-weight: 700;
                width: 60%;
                height: 40px;
                margin-left: auto;
                margin-right: auto;
            }

        #SubProduct #ThreeSection .card .card-img-top {
            height: 280px;
        }

        #SubProduct #ThreeSection .card .card-body {
            background-color: #d7c8b8;
        }

            #SubProduct #ThreeSection .card .card-body p {
                color: #000000;
                font-size: 0.9em;
                font-family: 'Lato', sans-serif;
                font-weight: 500;
            }

        #SubProduct #ThreeSection .card .Frame {
            width: 100%;
            height: 100%;
            margin-top: -135%;
        }

            #SubProduct #ThreeSection .card .Frame img {
                width: 100%;
                height: 100%;
            }


    @media only screen and (max-width: 1690px) {
        #SubProduct #ThreeSection .card {
            width: 370px;
            height: 500px;
        }

            #SubProduct #ThreeSection .card .card-body p {
                font-size: 0.9em;
                padding-left: 10% !important;
                padding-right: 10% !important;
            }
    }

    @media only screen and (max-width: 1450px) {
        #SubProduct #ThreeSection .card {
            width: 330px;
            height: 470px;
        }

            #SubProduct #ThreeSection .card .card-body p {
                font-size: 0.9em;
                padding-left: 7% !important;
                padding-right: 6% !important;
            }

            #SubProduct #ThreeSection .card .Frame {
                margin-top: -145%;
            }

                #SubProduct #ThreeSection .card .Frame img {
                    padding: 2% !important;
                }

            #SubProduct #ThreeSection .card .card-title h5 {
                font-size: 1.1em;
                width: 60%;
                height: 35px;
            }
    }

    @media only screen and (max-width: 1370px) {
        #SubProduct #ThreeSection .card {
            width: 310px;
            height: 400px;
        }

        #SubProduct #ThreeSection .col-md-4 {
            padding-bottom: 7% !important;
        }

        #SubProduct #ThreeSection .card .Frame {
            margin-top: -130%;
        }

        #SubProduct #ThreeSection .card .card-body p {
            font-size: 0.85em;
            padding-left: 7% !important;
            padding-right: 6% !important;
        }
    }

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

        #SubProduct #ThreeSection .col-md-4 {
            padding-bottom: 4% !important;
        }

        #SubProduct #ThreeSection .card .Frame {
            margin-top: -130%;
        }

        #SubProduct #ThreeSection h1 {
            font-size: 3em;
        }
    }

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

        #SubProduct #ThreeSection .container-fluid {
            width: 90% !important;
        }
    }

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


    #SubProduct #ThreeSection .card {
        width: 290px;
        height: 380px;
    }

    #SubProduct #ThreeSection {
        padding-top:0px !important;
    }

    #SubProduct #ThreeSection .container-fluid {
        padding-top: 0px !important;
    }

        #SubProduct #ThreeSection h1 {
            font-size: 2.7em;
        }
}