/*Media Quaries*/

@media only screen and (min-width: 0px) and (max-width: 465px) {
    .footer-tel {
        font-size: 20px;
    }
    .footer-email {
        font-size: 18px;
    }
    .carousel-item {
        min-height: 490px;
        border-radius: 0px 0px 0px 0px;
    }
    .card-acollades {
        background-size: 740px 300px !important;
    }
    .card-facebook h2 {
        margin-right: 50px;
        font-size: 35px;
    }
    .card-instagram h2 {
        margin-right: 50px;
        font-size: 35px;
    }
    .program-content {
        max-width: 200px;
    }
    .card-donation {
        background-position: 20px -15px !important;
    }
    .card-programmes {
        background-position: -100px 30px;
    }
    .touched-lives {
        background-position: -150px 0px;
    }
    .feedback .grid .item h2 {
        font-size: 28px !important;
    }
    .feedback .grid .item1 {
        grid-column: 1/4 !important;
        background-size: cover !important;
        background-position: -70px 0px !important;
    }
    .feedback .grid .item2 {
        grid-column: 1/4 !important;
        margin-left: 0px;
        background-position: 0px 0px !important;
    }
    .feedback .grid .item3 {
        grid-column: 1/4 !important;
    }
    .feedback .grid .item4 {
        grid-column: 1/4 !important;
    }
    .feedback .grid .item5 {
        grid-column: 1/4 !important;
    }
    .feedback .grid .item6 {
        grid-column: 1/4 !important;
    }
    .feedback .grid .item7 {
        grid-column: 1/4 !important;
    }
    .feedback .grid .item8 {
        grid-column: 1/4 !important;
        background-size: cover !important;
        background-position: 0px 0px !important;
    }
    .feedback .grid .item9 {
        grid-column: 1/4 !important;
        background-position: center;
    }
}

@media only screen and (min-width: 0px) and (max-width: 379px) {
    .card-facebook {
        background-repeat: no-repeat;
        background-color: #3c5a9a;
        background-position: right;
        background-image: url(../images/facebook-like.svg), url(../images/pattern-50@2x.png);
        background-size: 180px 300px;
        background-position: 165px 40px;
    }
    .dropdown-menu a.dropdown-item {
        font-size: 13px !important;
    }
    .helping-hand-modal-button {
        padding-left: 5px;
        padding-right: 5px;
        font-size: 10px;
    }
    .cash-donation-modal-button {
        padding-left: 5px;
        padding-right: 5px;
        font-size: 10px;
    }
    .card-programmes h2 {
        font-size: 30px;
    }
    .card-funders h2 {
        font-size: 36px;
    }
}

@media only screen and (min-width: 380px) and (max-width: 465px) {
    .helping-hand-modal-button {
        padding-left: 3px;
        padding-right: 3px;
        font-size: 12px;
    }
    .cash-donation-modal-button {
        padding-left: 5px;
        padding-right: 5px;
        font-size: 12px;
    }
}

@media only screen and (min-width: 380px) and (max-width: 465px) {
    .standard-bank-logo {
        padding-left: 120px;
        padding-right: 120px;
    }
}

@media only screen and (min-width: 380px) and (max-width: 420px) {
    .dropdown-menu a.dropdown-item {
        font-size: 14px !important;
    }
}

@media only screen and (min-width: 0px) and (max-width: 399px) {
    /*Navigation Bar*/
    a.tel {
        font-size: 9px;
    }
    .btn-primary {
        font-size: 12px;
    }
    .card-acollades {
        min-height: 400px !important;
        background-image: url(../images/accolades-star.svg), url(../images/pattern-50@2x.png);
        background-position: 0px 50px;
        background-repeat: no-repeat;
        background-color: #20215e;
    }
}

@media only screen and (min-width: 400px) and (max-width: 465px) {
    /*Navigation Bar*/
    a.tel {
        font-size: 12px;
    }
    .btn-primary {
        font-size: 14px;
    }
}


/* Media queries - Responsive timeline on screens less than 767px wide */

@media screen and (min-width: 466px) and (max-width: 576px) {
    .card-acollades {
        background-size: 800px 300px !important;
    }
    .card-donation {
        background-position: 120px -15px !important;
    }
    .touched-lives {
        background-position: -100px 0px;
    }
    .helping-hand-modal-button {
        padding-left: 5px;
        padding-right: 5px;
    }
    .cash-donation-modal-button {
        padding-left: 5px;
        padding-right: 5px;
    }
}


/* Media queries - Responsive timeline on screens less than 767px wide */

@media screen and (max-width: 575px) {
    .card-ecd h2 {
        font-size: 28px;
    }
    .cards.card-ecd a {
        bottom: 30px;
        left: 30%;
    }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    .cards.card-ecd a {
        bottom: 50px;
        left: 35%;
    }
}

@media screen and (min-width: 576px) {
    .carousel-item {
        border-radius: 0px 0px 30px 30px;
    }
}

@media only screen and (min-width: 0px) and (max-width: 667px) {
    h1 {
        font-size: 32px;
        line-height: 40px;
    }
    h3 {
        font-size: 20px;
        line-height: 24px;
    }
    p {
        font-size: 14px;
        line-height: 18px;
    }
    .dropdown-item {
        font-size: 14px !important;
        font-weight: 300 !important;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.5;
        letter-spacing: normal;
        color: #3e4096 !important;
    }
    .carousel-content {
        max-width: 200px;
        height: auto;
    }
    .hero-home {
        background-image: url(../images/pattern-25@2x.png);
        background-color: #261437;
        max-height: 1000px;
    }
    .making-differences {
        background-position: -200px 0px;
    }
}

@media only screen and (min-width: 465px) and (max-width: 667px) {
    .standard-bank-logo {
        padding-left: 120px;
        padding-right: 120px;
    }
}


/* Media queries - Responsive timeline on screens less than 767px wide */

@media screen and (min-width: 668px) {
    .carousel-item {
        min-height: 520px;
        border-radius: 0px 0px 30px 30px;
    }
    .carousel-content {
        min-width: 380px;
        min-height: 444px;
    }
    .contact_us_heading hr {
        width: 555px;
    }
}

@media only screen and (min-width: 0) and (max-width: 667px) {
    .childhood-development-carousel {
        background-size: cover;
        background-position: 0px 0px;
        background-image: url(../images/child-jumping-with-joy@2x.jpg);
    }
    .humble-beginnings-carousel {
        background-size: cover;
        background-position: 0px 0px;
        background-image: url(../images/old-farm-house@2x.jpg);
    }
    .ecd-carousel {
        background-size: cover;
        background-position: 0px 0px;
        background-image: url(../images/child-with-cap-smiling@2x.jpg);
    }
    .success-stories-carousel {
        background-size: cover;
        background-position: 0px 0px;
        background-image: url(../images/children-smiling-at-window@2x.jpg);
    }
}

@media only screen and (min-width: 0px) and (max-width: 991px) {
    .dropdown-menu {
        margin-left: auto;
        margin-right: auto;
        max-width: 410px;
        position: static;
        float: inherit;
    }
}

@media only screen and (min-width: 668px) and (max-width: 767px) {
    .childhood-development-carousel {
        background-position: -280px 0px;
        background-image: url(../images/childhood-development@2x.jpg);
    }
    .humble-beginnings-carousel {
        background-position: -220px 0px;
        background-image: url(../images/humble-beginnings-carousel@2x.png);
    }
    .ecd-carousel {
        background-position: -240px 0px;
        background-image: url(../images/changing-lives.png);
    }
    .success-stories-carousel {
        background-position: -80px 0px;
        background-image: url(../images/touched-lives-carousel@2x.png);
    }
    .standard-bank-logo {
        padding-left: 180px;
        padding-right: 180px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .childhood-development-carousel {
        background-position: -200px 0px;
        background-image: url(../images/childhood-development@2x.jpg);
    }
    .humble-beginnings-carousel {
        background-position: -140px 0px;
        background-image: url(../images/humble-beginnings-carousel@2x.png);
    }
    .ecd-carousel {
        background-position: -140px 0px;
        background-image: url(../images/changing-lives.png);
    }
    .success-stories-carousel {
        background-image: url(../images/touched-lives-carousel@2x.png);
    }
    .cards.card-ecd h2 {
        font-size: 28px;
    }
    .cards.card-ecd a {
        bottom: 40px;
        left: 32%;
    }
}


/* Media queries - Responsive timeline on screens less than 767px wide */

@media screen and (min-width:577px) and (max-width: 767px) {
    .card-acollades {
        background-size: 950px 300px !important;
    }
    .card-donation {
        background-position: 130px -15px !important;
    }
    .touched-lives {
        background-position: -80px 0px;
    }
}


/* Media queries - Responsive timeline on screens less than 767px wide */

@media screen and (max-width: 767px) {
    .hero-home {
        background-image: url(../images/pattern-25@2x.png);
        background-color: #261437;
        max-height: 1200px;
    }
    ul.social-links {
        float: none !important;
    }
    ul.social-links li {
        float: none !important;
        margin: auto;
    }
    .our-programmes-heading h3 {
        width: 100%;
    }
    .btn-outline-primary {
        margin-top: 20px;
        float: left;
    }
}


/* Media queries - Responsive timeline on screens less than 800px wide */

@media screen and (min-width: 465px) and (max-width: 767px) {
    .programmes div.one {
        background-size: cover;
        background-position: 0px -60px;
        background-image: url(../images/program1.jpg);
    }
    .programmes div.two {
        background-size: cover;
        background-position: 0px -60px;
        background-image: url(../images/program2.jpg);
    }
    .programmes div.four {
        background-size: cover;
        background-position: 0px -60px;
        background-image: url(../images/program4.jpg);
    }
    .programmes div.five {
        background-size: cover;
        background-position: 0px -60px;
        background-image: url(../images/program5.jpg);
    }
    .programmes div.seven {
        background-size: cover;
        background-position: 0px -60px;
        background-image: url(../images/program7.jpg);
    }
    .programmes div.eight {
        background-size: cover;
        background-position: 0px -90px;
        background-image: url(../images/program8.jpg);
    }
}


/* Media queries - Responsive timeline on screens less than 800px wide */

@media screen and (min-width: 465px) and (max-width: 800px) {
    .feedback .grid .item1 {
        grid-column: 1/4 !important;
        background-size: cover !important;
        background-position: 0px 0px !important;
    }
    .feedback .grid .item2 {
        grid-column: 1/4 !important;
        margin-left: 0px;
        background-position: 0px 0px !important;
    }
    .feedback .grid .item3 {
        grid-column: 1/4 !important;
        background-position: center;
    }
    .feedback .grid .item4 {
        grid-column: 1/4 !important;
    }
    .feedback .grid .item5 {
        grid-column: 1/4 !important;
        background-position: center;
    }
    .feedback .grid .item6 {
        grid-column: 1/4 !important;
    }
    .feedback .grid .item7 {
        grid-column: 1/4 !important;
        margin-left: 0px;
    }
    .feedback .grid .item8 {
        grid-column: 1/4 !important;
        background-size: cover !important;
        background-position: 0px 0px !important;
    }
    .feedback .grid .item9 {
        grid-column: 1/4 !important;
    }
}


/* Media queries - Responsive timeline on screens less than 800px wide */

@media screen and (max-width: 800px) {
    /* Place the timelime to the left */
    .timeline::after {
        left: 31px;
    }
    /* Full-width containers */
    .timeline .timeline-container {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }
    /* Make sure that all arrows are pointing leftwards */
    .timeline .timeline-container::before {
        left: 60px;
        border: medium solid white;
        border-width: 10px 10px 10px 0;
        border-color: transparent white transparent transparent;
    }
    /* Make sure all circles are at the same spot */
    .left::after,
    .right::after {
        left: 15px;
    }
    /* Make all right containers behave like the left ones */
    .right {
        text-align: left;
        left: 0%;
    }
    /* Make all right containers behave like the left ones */
    .left {
        text-align: left;
        left: 0%;
    }
    .feedback h2 {
        width: inherit !important;
    }
    .feedback p {
        width: inherit !important;
    }
    .feedback .grid .item {
        margin-left: auto !important;
        margin-right: auto !important;
        border-radius: 30px;
        width: inherit;
    }
    .changing-lives {
        background-position: -800px 0px !important;
        background-size: auto;
        width: 100%;
    }
}


/* Media queries - Responsive timeline on screens less than 800px wide */

@media screen and (min-width: 767px) and (max-width: 1000px) {
    .card-programmes {
        background-position: -100px 30px;
    }
}


/* Media queries - Responsive timeline on screens less than 800px wide */

@media screen and (min-width: 800px) and (max-width: 1000px) {
    .feedback .grid .item h2 {
        font-size: 28px !important;
    }
    .feedback .grid .item1 {
        background-size: cover !important;
        background-position: -70px 0px !important;
    }
    .feedback .grid .item2 {
        margin-left: 0px;
        background-position: 0px 0px !important;
    }
    .feedback .grid .item3 {
        background-size: cover !important;
        background-position: 0px 0px !important;
    }
    .feedback .grid .item4 {
        margin-left: 0px;
        background-position: 0px 0px !important;
    }
    .feedback .grid .item5 {
        margin-left: 0px;
        background-position: 0px 0px !important;
    }
    .feedback .grid .item7 {
        margin-left: 0px;
    }
    .feedback .grid .item8 {
        background-size: cover !important;
        background-position: 0px 0px !important;
    }
    .feedback .grid .item9 {
        margin-left: 0px;
        background-position: 0px 0px !important;
    }
}


/* Media queries - Responsive timeline on screens less than 991px */

@media screen and (max-width: 992px) {
    ul.main-navbar-nav {
        margin: 20px 0px 20px 0px;
    }
    .large-hands img {
        margin-top: -80px;
    }
    .card-acollades {
        background-size: 1300px 300px;
    }
    .who-we-are h1 {
        border-left: none;
    }
    .our-staff {
        background-size: cover;
    }
    .our-staff h2 {
        color: #ffffff;
    }
    .our-staff p {
        color: #ffffff;
    }
    .ecd h1 {
        border-left: none;
    }
    .success-stories h1 {
        border-left: none;
    }
}


/* Media queries - Responsive timeline on screens more than 992px */

@media screen and (min-width: 992px) {
    ul.main-navbar-nav li {
        width: auto;
    }
    .large-hands img {
        margin-top: -130px;
    }
    .who-we-are h1 {
        border-left: solid 4px #20215e;
        padding-left: 15px;
    }
    .our-staff {
        background-size: contain;
    }
    .ecd h1 {
        border-left: solid 4px #20215e;
        padding-left: 15px;
    }
    .success-stories h1 {
        border-left: solid 4px #20215e;
        padding-left: 15px;
    }
    .card-standard-bank {
        background: url(../images/standard-bank@2x.png), linear-gradient(45deg, rgba(0, 57, 92, 1) 0%, rgba(0, 113, 184, 1) 100%);
        background-position: right;
        background-repeat: no-repeat;
        background-size: contain;
    }
}


/* Media queries - Responsive timeline on screens more than 992px and less than 1200px wide */

@media screen and (min-width: 992px) and (max-width:1200px) {
    ul.main-navbar-nav li {
        margin-right: 0px;
    }
    ul.main-navbar-nav li a {
        cursor: pointer;
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        letter-spacing: 1.05px;
        text-transform: uppercase;
        color: #ffffff;
    }
    .btn-outline-primary {
        float: right;
    }
    .card-acollades {
        background-size: 800px 300px;
    }
    .cards.card-ecd h2 {
        font-size: 36px;
    }
}


/* Media queries - Responsive timeline on screens less than 1200px wide */

@media screen and (max-width: 1000px) {
    .feedback h2 {
        max-width: 250px !important;
    }
    .feedback p {
        max-width: 250px !important;
    }
    .feedback .grid .item {
        border-radius: 30px;
        width: inherit;
    }
    .feedback .grid .item1 {
        margin-left: auto;
        grid-column: 1/2;
        background-size: cover;
    }
    .feedback .grid .item2 {
        margin-right: auto;
        grid-column: 2/3;
        margin-left: 0px;
        background-size: cover;
    }
    .feedback .grid .item3 {
        margin-right: auto;
        grid-column: 1/2;
        margin-left: 0px;
        background-size: cover;
    }
    .feedback .grid .item4 {
        margin-left: auto;
        grid-column: 2/3;
        background-size: cover;
    }
    .feedback .grid .item5 {
        margin-left: auto;
        grid-column: 1/2;
    }
    .feedback .grid .item6 {
        margin-right: auto;
        grid-column: 2/3;
    }
    .feedback .grid .item7 {
        margin-right: auto;
        grid-column: 1/2;
    }
    .feedback .grid .item8 {
        margin-left: auto;
        grid-column: 2/3;
        background-size: cover;
    }
    .feedback .grid .item9 {
        margin-right: auto;
        grid-column: 1/2;
    }
    .card-donation {
        background-position: 0px -15px;
    }
    .our-staff {
        padding-top: 50px;
        padding-bottom: 174px;
    }
    .changing-lives {
        background-position: -500px 0px;
    }
}


/* Media queries - Responsive timeline on screens more than 1000px and less than 1200px wide */

@media screen and (min-width: 1000px) and (max-width:1200px) {
    .card-staff h2 {
        margin-top: 30px;
        margin-right: 20px;
    }
    .card-standard-bank h2 {
        margin-right: 180px;
    }
    .changing-lives {
        background-position: -300px 0px;
        background-size: auto;
        width: 100%;
    }
    .card-programmes {
        background-position: -60px 30px;
    }
}

@media screen and (min-width: 801px) and (max-width:999px) {
    .changing-lives {
        background-position: -300px 0px;
        background-size: auto;
        width: 100%;
    }
}


/* Media queries - Responsive timeline on screens less than 1200px wide */

@media screen and (max-width: 1199px) {
    .feedback h2 {
        margin-right: 50px;
        max-width: 350px;
    }
    .feedback p {
        max-width: 350px;
    }
    .feedback .grid .item {
        border-radius: 30px;
        width: inherit;
    }
    .feedback .grid .item1 {
        margin-left: auto;
        grid-column: 1/2;
    }
    .feedback .grid .item2 {
        margin-right: auto;
        grid-column: 2/3;
        margin-left: 0px;
    }
    .feedback .grid .item3 {
        margin-left: auto;
        grid-column: 1/2;
    }
    .feedback .grid .item4 {
        margin-right: auto;
        grid-column: 2/3;
        margin-left: 0px;
    }
    .feedback .grid .item5 {
        grid-column: 1/2;
        margin-left: 0px;
    }
    .feedback .grid .item6 {
        grid-column: 2/3;
        margin-left: 0px;
    }
    .feedback .grid .item7 {
        grid-column: 1/2;
        margin-left: 0px;
    }
    .feedback .grid .item8 {
        margin-left: 0px;
        grid-column: 2/3;
    }
    .feedback .grid .item9 {
        margin-left: 0px;
        grid-column: 1/2;
    }
    .card-donation {
        background-position: 50px -15px;
    }
    .program {
        min-height: 326px;
        min-width: 252px;
    }
    .who-we-are img {
        float: none;
    }
    .who-we-are p {
        margin-left: auto;
        margin-right: auto;
    }
    .our-staff {
        padding-top: 50px;
        padding-bottom: 374px;
    }
    ul.social-links {
        float: right;
    }
    ul.social-links li {
        float: none;
        margin: auto;
    }
}


/* Media queries - Responsive timeline on screens more than 1200px wide */

@media screen and (min-width: 1200px) {
    .carousel-item {
        padding-top: 199px;
        padding-bottom: 199px;
        padding-left: 185px;
        padding-right: 450px;
        max-width: 1140px;
        max-height: 720px;
    }
    .carousel-content {
        width: 505px;
        height: 323px;
    }
    .card-staff {
        min-height: 360px !important;
    }
    .card-staff h2 {
        margin-top: 30px;
        margin-right: 235px;
    }
    .card-staff p {
        margin-top: 20px;
        margin-right: 235px;
    }
    .card-standard-bank {
        min-height: 360px !important;
    }
    .card-standard-bank p {
        margin-top: 20px;
        margin-right: 235px;
    }
    .card-board {
        min-height: 360px !important;
    }
    .card-board h2 {
        color: #ffffff;
        margin-top: 85px;
        margin-right: 205px;
    }
    .card-board p {
        margin-top: 20px;
        margin-right: 194px;
    }
    .card-since {
        min-height: 360px !important;
    }
    .card-since h2 {
        color: #ffffff;
        margin-top: 132px;
        margin-right: 205px;
    }
    .card-since p {
        margin-top: 20px;
        margin-right: 194px;
    }
    .program {
        min-height: 403px;
        min-width: 312px;
    }
    .card-acollades {
        background-size: 990px 300px;
    }
    .exciting-future {
        min-height: 1033px;
    }
    .who-we-are img {
        float: right;
    }
    .our-staff {
        padding-top: 150px;
        padding-bottom: 505px;
    }
    .social-div {
        margin-top: 15px;
    }
    .feedback .grid .item1 {
        border-radius: 30px 0px 0px 0px;
    }
    .feedback .grid .item2 {
        border-radius: 0px 30px 0px 0px;
    }
    .feedback .grid .item3 {
        border-radius: 0px 0px 0px 0px;
    }
    .feedback .grid .item4 {
        border-radius: 0px 0px 0px 0px;
        background-position: left center;
    }
    .feedback .grid .item5 {
        border-radius: 0px 0px 0px 0px;
        background-position: left center;
    }
    .feedback .grid .item6 {
        border-radius: 0px 0px 0px 30px;
    }
    .feedback .grid .item7 {
        border-radius: 0px 0px 0px 0px;
    }
    .feedback .grid .item8 {
        border-radius: 0px 0px 0px 0px;
        background-position: center;
    }
    .feedback .grid .item9 {
        border-radius: 0px 0px 30px 0px;
        background-position: center;
    }
}


/* Media queries - Responsive timeline on screens more than 1200px and less than 1400px wide */

@media screen and (min-width: 1200px) and (max-width: 1400px) {
    .changing-lives {
        background-position: -250px 0px;
        background-size: auto;
        width: 100%;
    }
}


/* Media queries - Responsive timeline on screens more than 1400px wide */

@media screen and (min-width: 1400px) {
    .our-staff {
        padding-top: 150px;
        padding-bottom: 625px !important;
    }
}


/* Media queries - Responsive timeline on screens more than 2100px wide */

@media screen and (min-width: 2100px) {
    .our-staff {
        padding-top: 150px;
        padding-bottom: 725px !important;
    }
}


/********** iPhone SE portrait ********/

@media only screen and (min-width: 320px) and (max-width: 568px) {}


/********** iPhone SE landscape ********/

@media only screen and (min-width: 375px) and (max-width: 667px) and (orientation: landscape) {}


/********** iPhone 6,7,8  portrait********/

@media only screen and (min-width: 375px) and (max-width: 667px) and (orientation: portrait) {}


/********** iPhone 6,7,8 landscape ********/

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}


/********** Galaxy S9+ portrait ********/

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {}


/********** Galaxy S9+ landscape ********/

@media screen and (min-width: 360px) and (max-height: 640px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {}


/********** iPhone 6+,7+,8+ portrait ********/

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {}


/********** iPhone 6+,7+,8+ landscape ********/

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {}


/********** Custom media quries ********/

@media only screen and (min-width: 1200px) and (max-width: 1440px) {}

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

@media only screen and (min-width: 769px) and (max-width: 991px) {}

@media only screen and (min-width: 0px) and (max-width: 991px) {}

@media only screen and (min-width: 948px) and (max-width: 991px) {}

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

@media only screen and (min-width: 0px) and (max-width: 666px) {}


/********** iPad ********/

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {}


/* ----------- iPad Pro ----------- */


/* Portrait and Landscape */

@media only screen and (min-width: 1024px) and (max-height: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) {}


/* Portrait */

@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) {}


/* Landscape */

@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1.5) {}

@media only screen and (min-width: 569px) and (max-width: 767px) {}

@media only screen and (min-width: 723px) and (max-width: 767px) {}