/*///////////////////////////////////////////////////////////////////////// Responsive CSS Structure /////////////////////////////////////////////////////////////////////////*/


/*---------- Small Mobile , IPhone Start ----------*/

/*=== Screen Size = 240, 320, 360, 480, 568 ===*/ 

@media (min-width: 240px) and (max-width: 575px){
}

@media (min-width: 576px) and (max-width: 767px){

}

@media (max-width: 767px) {
    
    .header a { width: 200px; }

    .main-banner-section .main-banner-content h1 {     font-size: 20px; line-height: 20px; margin: 0 0 10px; }
    .main-banner-section a.follow-facebook { 
        width: 240px;
        height: 70px;
        font-size: 15px;
        line-height: 15px;
     }
     .our-official-trailer .title h2 {
        font-size: 20px;
        line-height: 20px; 
		text-shadow: 1px 1px 2px black, 1px 1px 2px black;
    }

    .main-banner-section .main-banner-content span { font-size: 16px; line-height: 18px; display: none;}
    .our-official-trailer .trailer-video img, .our-official-trailer .trailer-video video {
        width: 100%;
        outline: none;
    }
    .section-title h1, .section-title h2, .section-title h3, .section-title h4, .section-title h5, .section-title h6 {
        font-size: 20px;
        line-height: 24px;
    }
    .good-old-metin-section {
        padding: 30px 0;
    }
    .common-main-content p {
        font-size: 13px;
        line-height: 18px;
    }

    .main-banner-section a.follow-facebook span { font-size: 12px; }
    
    .main-banner-section .main-banner-content .detail { margin: 0 auto; }
    
    .select-name-appearance-section .persone img { display: none; }
    .events-cards-section .persone img { display: none; }
    .servers-history-section .servers-history-content .persone { display: none; }
    .servers-history-section .servers-history-content .persone img { width: auto; }
    .main-banner-section .our-official-trailer { padding: 15px 0 0; }
    .good-old-metin-timeline .persone { left: -200px; }
    .good-old-metin-timeline .persone img { display: none; }
    .history-list-section {
        justify-content: center;
        align-items: center;
        text-align: center;
        display: -ms-flexbox;
        display: inline-flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;
        width: 100%;
        max-width: 100%;
    }
    .every-day-events-section {
        padding: 20px 0;
    }
    .trvia-whole-section .pets-content { padding: 0 0 30px; }
    .pets-section .pets-content { padding: 0 0 20px; }
    
    .timeline-section .timeline-block:nth-child(odd) span:before, .timeline-section .timeline-block:nth-child(odd) a:before { display: none; }
    .timeline-section .timeline-block:after { display: none; }
    .timeline-section .timeline-block:before { display: none;}
    .timeline-section .timeline-block span:before, .timeline-section .timeline-block a:before { display: none; }
    .timeline-section .timeline-block { clear: both; padding-top: 4px; padding-bottom: 4px; float: none !important; padding: 0 0 15px !important; }
    .timeline-section .timeline-block span, .timeline-section .timeline-block a {
        padding: 12px 7px;
        width: 100%;
        font-size: 13px;
        line-height: 15px;
     }
     .gold-consept-section .gold-block {
        margin: 0 0 30px;
        width: 100%;
        float: none !important;
        padding: 15px;
     }
     .gold-consept-section {
        padding: 0px 15px 20px;
     }

    .good-old-metin-section .good-old-metin-content { padding: 0 0 30px; }
    
    .gold-consept-section .gold-block .gold-title span { font-size: 20px; line-height: 20px; }
    .gold-consept-section .gold-block p { font-size: 14px; line-height: 22px; }
    .gold-consept-section .gold-consept-content { margin: 0; width: 100%; }

    .history-list-section .history-block p { font-size: 12px; line-height: 16px; }
    .history-list-section .history-link span, .history-list-section .history-link a { font-size: 12px; line-height: 12px; }

    .section-title {
        text-align: center;
        padding: 0 0 20px;
    }
    .history-list-section .history-block .history-detail { height: auto; }
    .history-title { padding: 0 0 15px;  }
    .history-block:before {
        position: absolute;
        content: "";
        left: 50%;
        top: -35px;
        height: 2px;
        width: 100%;
        background-color: #ffffff;
        transform: translate(-50%, 0);
        -webkit-transform: translate(-50%, 0);
        -moz-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        -o-transform: translate(-50%, 0);
    }
    .history-list-section:before {
        display: none;
    }
    .history-list-section .inline-flex-block {
        padding: 0 15px;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .history-title span {  font-size: 21px; line-height: 21px; }
    .history-list-section .history-block { padding: 10px;    margin: 0 0 100px; }

    .history-list-section .inline-flex-block:last-child .history-block { margin: 0 0 20px;}
    .main-banner-section { padding: 100px 0 20px; }
    .maps-section .persone img { }
    .maps-images-section .map-block:nth-child(even) { margin: -140px 0; }
    .maps-images-section .map-block {
        width: 100%;
        float: none !important;
        margin:0  0 -30px!important;
    }
    .maps-section .maps-content {
        padding: 0 0 20px;
        position: relative;
        z-index: 99;
    }
    .event-schedule table th {
        font-size: 12px;
        line-height: 14px;
        padding: 5px;
        white-space: nowrap;
    }
    .event-schedule table td {
        font-size: 12px;
        line-height: 14px;
        white-space: nowrap;
    }
    .common-image-content-section .image-block { position: relative; z-index: 99; -ms-flex: 0 0 100%;    flex: 0 0 100%; max-width: 100%; }
    .common-image-content-section .content-block { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;     text-align: center; padding: 30px 15px 0;    position: relative;
        z-index: 99; }
    .every-day-events-section .event-schedule { position: relative; z-index: 99;    padding: 0; }
    .common-image-content-section .content-block p {
        margin: 0;
    }
    .select-name-appearance-section .appearance-buttons .common-dragon-section {
        text-align: center;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        position: relative;
        z-index: 9;
        display: block;
    }
    .select-name-appearance-section .appearance-buttons {
        margin: 0;
    }
    .growing-plans-list-items { margin-right: -15px; margin-left: -15px; }
    .growing-plans-list-section .inline-flex-block { padding: 0 15px;     flex: 0 0 100%;
        max-width: 100%; }
    .growing-plans-list-section .growing-block {
        margin: 0 0 30px;
    }
    .common-dragon-section {
        justify-content: center;
        align-items: center;
        text-align: center;
        
        display: block;
    }
    .footer .f-detail span {
        font-size: 20px;
        line-height: 20px;
    }

    .footer .f-title {
        padding: 0 0 20px;
    }
    
    .exclusive-offline-stand-section .exclusive-offline-stand-content { width: 100%; }

    .common-title {
        padding: 0 0 20px;
    }
    .eyepiece-section {
        padding: 30px 0 0;
    }

    /* Footer */
    .footer .f-detail { position: relative; z-index: 9; }
    .footer .persone { left: 0; }
    .footer .persone img { display: none; }
    .footer .f-detail p {
        font-size: 13px;
        line-height: 16px; }
    /* Footer */
}

@media (min-width: 768px) {
}

@media (min-width: 768px) and (max-width: 991px){

    
    .header a { width: 280px; }

    .main-banner-section .main-banner-content h1 { font-size: 30px;  line-height: 30px; margin: 0 0 20px; }
    .main-banner-section a.follow-facebook {     width: 280px; height: 80px;     font-size: 17px; line-height: 17px; }
    .main-banner-section .main-banner-content span { font-size: 22px; line-height: 22px; display: none;}

    .section-title h1, .section-title h2, .section-title h3, .section-title h4, .section-title h5, .section-title h6 {
        font-size: 24px;
        line-height: 24px;
    }
    .main-banner-section a.follow-facebook span { font-size: 12px; }
    
    .main-banner-section .main-banner-content .detail { margin: 0 auto; }
    
    .select-name-appearance-section .persone img { width: 340px; }
    .events-cards-section .persone img { width: 400px; }
    .servers-history-section .servers-history-content .persone { left: -100px; }
    .servers-history-section .servers-history-content .persone img { width: 430px; }
    .main-banner-section .our-official-trailer { padding: 35px 0 0; }
    .good-old-metin-timeline .persone { left: -200px; }
    .good-old-metin-timeline .persone img { width: 350px; }
    
    .trvia-whole-section .pets-content { padding: 0 0 30px; }
    .pets-section .pets-content { padding: 0 0 20px; }
    
    .timeline-section .timeline-block { clear: both; padding-top: 4px; padding-bottom: 4px; }
    .timeline-section .timeline-block span, .timeline-section .timeline-block a {     padding: 15px 10px; width: 307.5px;     font-size: 14px; line-height: 14px; }
    .good-old-metin-section .good-old-metin-content { padding: 0 0 30px; }
    
    .gold-consept-section .gold-block .gold-title span { font-size: 20px; line-height: 20px; }
    .gold-consept-section .gold-block p { font-size: 14px; line-height: 22px; }
    .gold-consept-section .gold-consept-content { margin: 0; width: 720px; }

    .history-list-section .history-block p { font-size: 12px; line-height: 16px; }
    .history-list-section .history-link span, .history-list-section .history-link a { font-size: 12px; line-height: 12px; }

    .section-title {
        text-align: center;
        padding: 0 0 20px;
    }
    .history-list-section .history-block .history-detail { height: 120px; }
    .history-title { padding: 0 0 15px;  }
    .history-list-section .inline-flex-block { padding: 0 15px; }
    .history-title span {  font-size: 21px; line-height: 21px; }
    .history-list-section .history-block { padding: 10px; }


    .main-banner-section { padding: 150px 0 20px; }
    .maps-section .persone img { width: 345px; }
    .maps-images-section .map-block:nth-child(even) { margin: -140px 0; }
    
    .common-image-content-section .image-block { position: relative; z-index: 99; -ms-flex: 0 0 340px;    flex: 0 0 340px; max-width: 340px; }
    .common-image-content-section .content-block { -ms-flex: 0 0 380px; flex: 0 0 380px; max-width: 380px; }
    .every-day-events-section .event-schedule { position: relative; z-index: 99; }

    .growing-plans-list-items { margin-right: -15px; margin-left: -15px; }
    .growing-plans-list-section .inline-flex-block { padding: 0 15px; }
    
    .exclusive-offline-stand-section .exclusive-offline-stand-content { width: 100%; }

    .common-title {
        padding: 0 0 20px;
    }

    /* Footer */
    .footer .f-detail { position: relative; z-index: 9; }
    .footer .persone { left: 0; }
    .footer .persone img { width: 300px; }
    .footer .f-title {
        padding: 0 0 30px;
    }
    /* Footer */

}

@media (max-width: 991px) {
}

@media (min-width: 992px) and (max-width: 1199px){

    .header a { width: 350px; }

    .main-banner-section .main-banner-content h1 { font-size: 30px;  line-height: 30px; margin: 0 0 20px; }
    .main-banner-section a.follow-facebook { width: 300px; height: 100px; }
    .main-banner-section .main-banner-content span { font-size: 22px; line-height: 22px; }

    .section-title h1, .section-title h2, .section-title h3, .section-title h4, .section-title h5, .section-title h6 {
        font-size: 28px;
        line-height: 28px; 
    }

    
    .select-name-appearance-section .persone img { width: 340px; }
    .events-cards-section .persone img { width: 500px; }
    .servers-history-section .servers-history-content .persone { left: -100px; }
    .servers-history-section .servers-history-content .persone img { width: 430px; }
    .main-banner-section .our-official-trailer { padding: 35px 0 0; }
    .good-old-metin-timeline .persone { left: -200px; }
    .good-old-metin-timeline .persone img { width: 350px; }
    
    .trvia-whole-section .pets-content { padding: 0 0 30px; }
    .pets-section .pets-content { padding: 0 0 20px; }
    
    .timeline-section .timeline-block { clear: both; padding-top: 4px; padding-bottom: 4px; }
    .timeline-section .timeline-block span, .timeline-section .timeline-block a { padding: 15px 10px; }
    .good-old-metin-section .good-old-metin-content { padding: 0 0 30px; }
    
    .gold-consept-section .gold-block .gold-title span { font-size: 20px; line-height: 20px; }
    .gold-consept-section .gold-block p { font-size: 14px; line-height: 22px; }
    .gold-consept-section .gold-consept-content { margin: 0; }

    .history-list-section .history-block p { font-size: 13px; line-height: 18px; }
    .history-list-section .history-block .history-detail { height: 120px; }
    .history-title { padding: 0 0 15px;  }

    .main-banner-section { padding: 200px 0 20px; }
    .maps-section .persone img { width: 345px; }
    
    .common-image-content-section .image-block { position: relative; z-index: 99; }
    .every-day-events-section .event-schedule { position: relative; z-index: 99; }

    .growing-plans-list-items { margin-right: -15px; margin-left: -15px; }
    .growing-plans-list-section .inline-flex-block { padding: 0 15px; }
    
    
    /* Footer */
    .footer .f-detail { position: relative; z-index: 9; }
    .footer .persone { left: 0; }
    .footer .persone img { width: 425px; }
    /* Footer */


}

@media (min-width: 1200px) and (max-width: 1299px){
.header a { width: 350px; }


.select-name-appearance-section .persone img { width: 340px; }
.events-cards-section .persone img { width: 390px; }
.servers-history-section .servers-history-content .persone { left: -100px; }
.servers-history-section .servers-history-content .persone img { width: 430px; }
.main-banner-section .our-official-trailer { padding: 35px 0 0; }
.good-old-metin-timeline .persone { left: -200px; }
.good-old-metin-timeline .persone img { width: 350px; }

.trvia-whole-section .pets-content { padding: 0 0 30px; }
.pets-section .pets-content { padding: 0 0 20px; }

.timeline-section .timeline-block { clear: both; padding-top: 10px; padding-bottom: 10px; }
.good-old-metin-section .good-old-metin-content { padding: 0 0 30px; }


.main-banner-section { padding: 200px 0 20px; }
.maps-section .persone img { width: 345px; }

.common-image-content-section .image-block { position: relative; z-index: 99; }
.every-day-events-section .event-schedule { position: relative; z-index: 99; }



/* Footer */
.footer .f-detail { position: relative; z-index: 9; }
.footer .persone { left: 0; }
.footer .persone img { width: 425px; }
/* Footer */
}




@media (min-width: 1300px) and (max-width: 1399px){
.select-name-appearance-section .persone img { width: 340px; }
.events-cards-section .persone img { width: 390px; }
.servers-history-section .servers-history-content .persone { left: -195px; }
.servers-history-section .servers-history-content .persone img { width: 430px; }
.main-banner-section .our-official-trailer { padding: 95px 0 0; }
.good-old-metin-timeline .persone { left: -350px; }
.good-old-metin-timeline .persone img { width: 350px; }

.main-banner-section { padding: 200px 0 20px; }
.maps-section .persone img { width: 345px; }

.common-image-content-section .image-block { position: relative; z-index: 99; }
.every-day-events-section .event-schedule { position: relative; z-index: 99; }



/* Footer */
.footer .f-detail { position: relative; z-index: 9; }
.footer .persone { left: 0; }
.footer .persone img { width: 425px; }
/* Footer */
}

@media (min-width: 1400px) and (max-width: 1499px){
.select-name-appearance-section .persone img { width: 340px; }
.events-cards-section .persone img { width: 390px; }
.servers-history-section .servers-history-content .persone { left: -195px; }
.servers-history-section .servers-history-content .persone img { width: 430px; }
.main-banner-section .our-official-trailer { padding: 95px 0 0; }
.good-old-metin-timeline .persone { left: -350px; }
.good-old-metin-timeline .persone img { width: 350px; }

.main-banner-section { padding: 240px 0 50px; }
.maps-section .persone img { width: 345px; }


/* Footer */
.footer .persone { left: 0; }
.footer .f-detail { position: relative; z-index: 9; }
.footer .persone img { width: 425px; }
/* Footer */
}


@media (min-width: 1500px) and (max-width: 1599px){
.select-name-appearance-section .persone img { width: 340px; }
.events-cards-section .persone img { width: 415px; }
.servers-history-section .servers-history-content .persone { left: -195px; }
.servers-history-section .servers-history-content .persone img { width: 430px; }
.main-banner-section .our-official-trailer { padding: 95px 0 0; }
.good-old-metin-timeline .persone { left: -350px; }
.good-old-metin-timeline .persone img { width: 400px; }

.main-banner-section { padding: 300px 0 50px; }
.maps-section .persone img { width: 345px; }


/* Footer */
.footer .persone { left: 100px; }
.footer .persone img { width: 425px; }
/* Footer */
}


@media (min-width: 1600px) and (max-width: 1699px){
.select-name-appearance-section .persone img { width: 400px; }
.events-cards-section .persone img { width: 475px; }
.servers-history-section .servers-history-content .persone { left: -195px; }
.servers-history-section .servers-history-content .persone img { width: 430px; }


/* Footer */
.footer .persone { left: 100px; }
.footer .persone img { width: 425px; }
/* Footer */
}


@media (min-width: 1700px) and (max-width: 1799px){
.select-name-appearance-section .persone img { width: 400px; }
.events-cards-section .persone img { width: 475px; }

/* Footer */
.footer .persone { left: 100px; }
.footer .persone img { width: 425px; }
/* Footer */
}



@media (min-width: 1800px) and (max-width: 1899px){
.select-name-appearance-section .persone img { width: 450px; }
.events-cards-section .persone img { width: 525px; }

/* Footer */
.footer .persone { left: 100px; }
.footer .persone img { width: 475px; }
/* Footer */
}

@media (min-width: 1200px) and (max-width: 1920px){
}



/*---------- Large Desktop , Large Screen End ----------*/