* {
    box-sizing: border-box;
}
.header__image {
    background: url("../images/nearby/co3.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    min-height: 100vh;
    height: 100vh;
}
.swipertext > h1 {
    font-size: 2.5em;
    padding: 0;
    margin: 0 10px 0 0;
}

.swipertext > h3 {
    font-size: 1.6em;
    padding: 0;
    margin: 5px 0 15px 0;
    color: darkred;
}

.swipertext > p {
    padding: 0;
    margin: 0;
    font-size: 1.0em;
    line-height: 1.4em;
    color: graytext;
}

.swiper__link {
    font-size: 1.0em;
}

/*Added in for custom arrows*/
.swiper-button-next, .swiper-button-prev {
    width: 50px;
    height: 50px;
    background-image: none;
    /* background-color: #e4e4e4;*/
    background-color: #ae0707;
    z-index: 2;
    cursor: pointer;
}

    .swiper-button-next i, .swiper-button-prev i {
        position: relative;
        left: 50%;
        top: 50%;
        /*color: #21272b;*/
        color: #fff;
        transform: translate(-50%,-50%);
        transition: all .3s ease-in-out;
    }

@-webkit-keyframes arrowRight {
    0% {
        transform: translate(0,-50%);
    }

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

    100% {
        transform: translate(0,-50%);
    }
}

@keyframes arrowRight {
    0% {
        transform: translate(0,-50%);
    }

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

    100% {
        transform: translate(0,-50%);
    }
}

.swiper-button-next:hover i, .swiper-button-prev:hover i {
    -webkit-animation: arrowRight 1s infinite;
    animation: arrowRight 1s infinite;
}

.swiper-container {
    /*width: 100%;*/
    padding-top: 20px;
    padding-bottom: 20px;
    /*background-color: #e4e1e1;*/
    /*background: rgba(255, 165, 0, 0.53)*/ !important;
    background:rgba(104, 101, 101, 0.68); /*Allows foreground to have opacity 1.0 */
    width: 90vw;
    margin: 0 auto;
}

.swiper-slide {
  width: 400px;
  height: 500px;
  padding: 5px;
}

.swiper-content {
  background-color: #fff;
  width: 100%;
  height: 100%;
}
.swiper-content .hero {
  width: 100%;
  height: 175px;
  position: relative;
}


.swiper-content .hero .calendar {
  width: 60px;
  height: 60px;
  float: right;
  background-color: darkred;
  border-radius: 50%;
  margin-right: 15px;
  margin-top: 15px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.swiper-content .hero .calendar .date {
  font-size: 1.2rem;
  line-height: 1.3rem;
}
.swiper-content .hero .calendar .month {
  font-size: 0.8rem;
}



    .swiper-content .hero .photo-btn {
        position: absolute;
        bottom: 0;
        width: 100px;
        height: 40px;
        background-color: darkred;
        border: none;
        font-size: 1.2rem;
        font-weight: bold;
        color: #fff;
        transition: 0.2s all;
        cursor: pointer;
        display: flex;
        align-content: center;
        justify-content: center;
    }

        .swiper-content .hero .photo-btn:hover {
            width: 100%;
            height: 100%;
            transition: 0.2s all;
        }

            .swiper-content .hero .photo-btn:hover .text {
                display: none;
            }

            .swiper-content .hero .photo-btn:hover .gallery {
                display: flex;
            }

        .swiper-content .hero .photo-btn .text {
            text-align: center;
            line-height: 40px;
        }

        .swiper-content .hero .photo-btn .gallery {
            width: 100%;
            display: none;
            flex-direction: column;
        }

            .swiper-content .hero .photo-btn .gallery .row {
                width: 100%;
                height: 34%;
                display: flex;
            }

                .swiper-content .hero .photo-btn .gallery .row .image {
                    opacity: 0.6;
                    width: 34%;
                    height: 100%;
                    display: inline-block;
                    transition: 0.2s all;
                }

                    .swiper-content .hero .photo-btn .gallery .row .image:hover {
                        opacity: 1;
                        transition: 0.2s all;
                    }

    .swiper-content .hero.new-york {
        /*background: url("images/blossom1460.jpg");*/
        background: url("../images/heatherlea/heatherlea-external.jpg");
        background-position: center;
        background-size: cover;
    }

        .swiper-content .hero.new-york .top .image.one {
            background: url("../images/heatherlea/heatherlea-garden.jpg");
            background-size: cover;
            background-position: center;
        }

        .swiper-content .hero.new-york .top .image.two {
            background: url("../images/heatherlea/heatherlea-bathroom.jpg");
            background-size: cover;
            background-position: center;
        }

        .swiper-content .hero.new-york .top .image.three {
            background: url("../images/heatherlea/heatherlea-kitchen.jpg");
            background-size: cover;
            background-position: center;
        }

        .swiper-content .hero.new-york .middle .image.one {
            background: url("../images/heatherlea/heatherlea-lounge.jpg");
            background-size: cover;
            background-position: center;
        }

        .swiper-content .hero.new-york .middle .image.two {
            background: url("../images/heatherlea/heatherlea-bedroom.jpg");
            background-size: cover;
            background-position: center;
        }

    /*.swiper-content .hero.new-york .middle .image.three {
            background: url("../images/blossom1460.jpg");
            background-size: cover;
            background-position: center;
        }

        .swiper-content .hero.new-york .bottom .image.one {
            background: url("../images/blossom1460.jpg");
            background-size: cover;
            background-position: center;
        }

        .swiper-content .hero.new-york .bottom .image.two {
            background: url("../images/blossom1460.jpg");
            background-size: cover;
            background-position: center;
        }

        .swiper-content .hero.new-york .bottom .image.three {
            background: url("../images/blossom1460.jpg");
            background-size: cover;
            background-position: center;
        }*/

    .swiper-content .hero.san-fran {
        background: url("../images/nearby/sa06.jpg");
        background-position: center;
        background-size: cover;
    }

        .swiper-content .hero.san-fran .top .image.one {
            background: url("../images/nearby/co3.jpg");
            background-size: cover;
            background-position: center;
        }

        .swiper-content .hero.san-fran .top .image.two {
            background: url("../images/nearby/sa02.jpg");
            background-size: cover;
            background-position: center;
        }

        .swiper-content .hero.san-fran .top .image.three {
            background: url("../images/nearby/sa03.jpg");
            background-size: cover;
            background-position: center;
        }

        .swiper-content .hero.san-fran .middle .image.one {
            background: url("../images/nearby/sa04.jpg");
            background-size: cover;
            background-position: center;
        }

        .swiper-content .hero.san-fran .middle .image.two {
            background: url("../images/nearby/sa05.jpg");
            background-size: cover;
            background-position: center;
        }

        .swiper-content .hero.san-fran .middle .image.three {
            background: url("../images/nearby/sa07.jpg");
            background-size: cover;
            background-position: center;
        }
    /*.swiper-content .hero.san-fran .bottom .image.one {
            background: url("../images/blossom1460.jpg");
            background-size: cover;
            background-position: center;
        }
        .swiper-content .hero.san-fran .bottom .image.two {
            background: url("../images/blossom1460.jpg");
            background-size: cover;
            background-position: center;
        }
        .swiper-content .hero.san-fran .bottom .image.three {
            background: url("../images/blossom1460.jpg");
            background-size: cover;
            background-position: center;
}*/

    .swiper-content .hero.chicago {
        background: url("../images/furtherafield/dirleton.jpg");
        background-position: center;
        background-size: cover;
    }

        .swiper-content .hero.chicago .top .image.one {
            background: url("../images/furtherafield/eyemouth.jpg");
            background-size: cover;
            background-position: center;
        }

        .swiper-content .hero.chicago .top .image.two {
            background: url("../images/furtherafield/flight.jpg");
            background-size: cover;
            background-position: center;
        }

        .swiper-content .hero.chicago .top .image.three {
            background: url("../images/furtherafield/prestonmill.jpg");
            background-size: cover;
            background-position: center;
        }

        .swiper-content .hero.chicago .middle .image.one {
            background: url("../images/furtherafield/tantallon.jpg");
            background-size: cover;
            background-position: center;
        }
    /*.swiper-content .hero.chicago .middle .image.two {
            background: url("../images/blossom1460.jpg");
            background-size: cover;
            background-position: center;
        }
        .swiper-content .hero.chicago .middle .image.three {
            background: url("../images/blossom1460.jpg");
            background-size: cover;
            background-position: center;
        }
        .swiper-content .hero.chicago .bottom .image.one {
            background: url("../images/blossom1460.jpg");
            background-size: cover;
            background-position: center;
        }
        .swiper-content .hero.chicago .bottom .image.two {
            background: url("../images/blossom1460.jpg");
            background-size: cover;
            background-position: center;*/
}
/*.swiper-content .hero.chicago .bottom .image.three {
      background: url("https://www.martplaza.com/resourcefiles/things-to-do-slider-slider/navy-pier-at-chicago-th.jpg");
      background-size: cover;
      background-position: center;
}*/


/*Require color to be set before padding is applied !!*/
.swipertext {
    color: graytext;
    padding: 10px;
}

/*Applies to all acreen sizes except iphone SE below */
.swiper-content .swipertext {
    padding: 10px;
}



    .swiper-content .footer {
        position: absolute;
        bottom: 0;
        margin-bottom: 35px;
        color: graytext;
    }

        .swiper-content .footer .time {
            display: inline-block;
        }

        .swiper-content .footer .comments {
            display: inline-block;
            margin-left: 20px;
            cursor: pointer;
            transition: 0.2s all;
        }

            .swiper-content .footer .comments:hover {
                color: darkred;
                transition: 0.2s all;
            }

        

/*Iphone 11 414 Iphone 12 390*/

/*Iphone 11*/
@media screen and (min-width : 391px) and (max-width: 420px) {
    .swiper-container {
        height: 58rem;
    }

    .swiper-wrapper {
        height: 58rem;
    }

    .swiper-slide {
        height: 56rem;
    }

    .swipertext > h1 {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .swipertext > h3 {
        padding: 0;
        padding-left: 1rem;
        padding-right: 1rem;
        margin: 0px 0 6rem 0;
    }

    .swiper-button-next, .swiper-button-prev {
        width: 4rem;
        height: 3rem;
        margin-top: 2rem;
     }

    .swipertext > p {
        /*line-height: 1.5em;*/
        font-size: 1.65rem;
        padding-left: 1rem;
        padding-right: 1rem;
        margin: 0px 0 6rem 0;
    }

    .fa-camera {
        padding-left: 1rem;
    }
}

/*Iphpone 12  390 Galaxy S10 360*/
@media screen and (min-width : 360px) and (max-width: 390px) {
   
    .swipertext > h1 {
        padding-left: 3rem;
        padding-right: 2rem;
    }

    .swipertext > h3 {
        padding-left: 3rem;
        padding-right: 2rem;
        margin-bottom: 4.5rem;
    }

    .swiper-button-next, .swiper-button-prev {
        width: 4rem;
        height: 3rem;
        margin-top: 3rem;
    }

    .swipertext > p {
        /*line-height: 1.5em;*/
        /*font-size: 1.65rem;*/
        padding-left: 3rem;
        padding-right: 2rem;
    }
   
    .fa-camera {
        padding-left: 3rem;
    }
    .swiper-content .hero .photo-btn {
        padding-left: 3rem;
    }
 }

    /*Changed for mobile iphone SE*/

/*Iphone SE IPhone5 320 */
@media screen and (min-width : 321px) and (max-width: 359px) {
    .header__image {
        height: unset;
    }

        .swipertext > h1 {
        padding-left: 5rem;
        padding-right: 2rem;
        font-size: 2rem;
    }

    .swipertext > h3 {
        padding-left: 5rem;
        padding-right: 2rem;
        font-size: 2rem;
    }

    .swipertext > p {
        /*line-height: 1.5em;*/
        /*font-size: 1.65rem;*/
        padding-left: 5rem;
        padding-right: 2rem;
        padding-top: 3rem;
    }

    .swiper-button-next, .swiper-button-prev {
        width: 4rem;
        height: 3rem;
        margin-top: .3rem;
    }

    .fa-camera {
        padding-left: 5rem;
    }

    .swiper-content {
        background-color: #e2dfdf;
    }
    /*Default 60 rem*/
    /*.infopadding {
        margin-top: 8rem;
    }*/
    .swiper-content .hero .photo-btn {
        padding-left: 5rem;
    }
}

/*Iphpone 5 */
@media screen and (max-width: 320px) {
    .header__image {
        height: unset;
    }
    .swipertext > h1 {
        padding-left: 5rem;
        padding-right: 2rem;
        font-size: 2rem;
    }

    .swipertext > h3 {
        padding-left: 5rem;
        padding-right: 2rem;
        font-size: 2rem;
    }
    .swipertext > p {
        /*line-height: 1.5em;*/
        /*font-size: 1.65rem;*/
        padding-left: 5rem;
        padding-right: 2rem;
        padding-top:3rem;
    }
    .swiper-button-next, .swiper-button-prev {
        width: 4rem;
        height: 3rem;
        margin-top: .3rem;
    }
    .fa-camera {
        padding-left: 5rem;
    }
    .swiper-content {
        background-color: #e2dfdf;
    }
    /*Default 60 rem*/
    /*.infopadding {
        margin-top: 8rem;
    }*/
    .swiper-content .hero .photo-btn {
        padding-left: 5rem;
    }
}

    /*For Ipad air or something similar in portrait*/
    @media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {

        .swiper-container {
            height: 80rem;
        }

        .swiper-wrapper {
            height: 80rem;
        }

        .swiper-slide {
            height: 70rem;
        }

        .swipertext > h1 {
            font-size: 3.5em;
        }

        .swipertext > h3 {
            font-size: 2.6em;
        }

        .swipertext > p {
            font-size: 1.6em;
        }

        .swiper__link {
            font-size: 1.6em;
        }
    }