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


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

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

@media (min-width: 240px) and (max-width: 568px){
}
@media (min-width: 569px) and (max-width: 767px){

}
@media (max-width: 767px) {
    .animal-list [class*=col-] {
        width: 100%;
    }
    .animal-list {
        background-size: 100% 30px;
        padding: 30px 0;
        margin: 0 0 30px 0;
    }
    .section-title h1, .section-title h2, .section-title h3, .section-title h4, .section-title h5, .section-title h6 {
        font-size: 49px;
        line-height: 49px;
        margin: 0 0 10px;
    }
    .animal-list.bird-section {
        padding: 50px 0 170px;
        background-size: 100% 170px;
    }
    .bird-headline a {
        font-size: 23px;
        line-height: 23px;
    }
    .animal-list:first-child {
        padding: 30px 0;
    }
    .bird-img {
        margin-top: 0px;
    }
    .bird-img .bird-headline {
        position: relative;
        top: auto;
        left: auto;
        margin-right: auto;
        transform: none;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
}
}

@media (min-width: 768px) {
   
}
@media (min-width: 768px) and (max-width: 991px){
    /* .animal-list [class*=col-] {
        width: 50%;
        float: left;
    } */
    .animal-list {
      padding: 30px 0 30px 0;
      margin: 0 0 30px 0;
      background-size: 100% 30px;
    }
    .animal-list.bird-section {
        padding: 50px 0 220px;
        background-size: 100% 220px;
    }
    .bird-headline a {
        font-size: 28px;
        line-height: 28px;
    }
    .section-title h1, .section-title h2, .section-title h3, .section-title h4, .section-title h5, .section-title h6 {
        font-size: 49px;
        line-height: 49px;
        margin: 0 0 10px;
    }
}

@media (min-width: 992px) and (max-width: 1199px){
    .animal-list [class*=col-] {
        width: 50%;
        float: left;
    }
    .section-title h1, .section-title h2, .section-title h3, .section-title h4, .section-title h5, .section-title h6 {
        font-size: 59px;
        line-height: 59px;
    }
    .animal-list:first-child {
        padding: 0 0 40px;
    }
    .animal-list {
        background-size: 100% 34px;
        padding: 30px 0 30px 0;
        margin: 0 0 0 0;
    }
    .animal-list.bird-section {
        padding: 30px 0 320px;
        background-size: 100% 320px;
    }
    .bird-headline a {
        font-size: 37px;
        line-height: 37px;
    }
}
@media (min-width:1200px) and (max-width: 1299px){
    .animal-list [class*=col-] {
        width: 25%;
        float: none;
        display: inline-block;
    }
    
}
@media (min-width:1300px) and (max-width: 1399px){
    .animal-list [class*=col-] {
        width: 25%;
        float: none;
        display: inline-block;
    }
}
@media (min-width: 1200px) and (max-width: 1920px){
}
@media (min-width: 1300px) and (max-width: 1399px){
    .bird-img {
        margin-top: 0;
    }
    .animal-details h2 {
        font-size: 14px;
        line-height: 18px;
    }
    .section-title h1, .section-title h2, .section-title h3, .section-title h4, .section-title h5, .section-title h6 {
        font-size: 59px;
        line-height: 49px;
    }

}
@media (min-width: 1400px) and (max-width: 1499px){
    .animal-sound-section {
        padding: 50px 0 0 0;
    }
    .animal-details h2 {
        font-size: 16px;
        line-height: 18px;
    }
    .section-title h1, .section-title h2, .section-title h3, .section-title h4, .section-title h5, .section-title h6 {
        font-size: 59px;
        line-height: 49px;
    }
}
@media (min-width: 1500px) and (max-width: 1599px){
    .animal-sound-section {
        padding: 30px 0;
    }
    .animal-details h2 {
        font-size: 16px;
        line-height: 18px;
    }
    .section-title h1, .section-title h2, .section-title h3, .section-title h4, .section-title h5, .section-title h6 {
        font-size: 59px;
        line-height: 49px;
    }
}

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



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