/* Small screens */
@media only screen {
    
    .services {
        /*height:80vh;*/
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        flex-direction: column;
    }

    .services-intro {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        justify-content: space-evenly;
        /*height: 20%;*/
        padding: 2vw;
    }

    .services-intro h1 {
        /*font-size: 5em;*/
        letter-spacing: 0em;
        line-height: 1.2em;
    }

    .services-intro p {
        display:none;
        font-style: italic;
        color:#cdcdcd;
    }

    .services-intro .para-2 {
        display:inline;
    }

    .service-card-cont {
        display: flex;
        width: 100%;
        justify-content: space-evenly;
        height: 60%;
        padding: unset;
    }
    .spacer {
        display:flex;
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    .service-card {
        margin: 2vw 0;
        /*background-color: rgb(146, 226, 146);*/
        /*max-height: 50vw;
        max-width: 45vw;*/
        width: 90%;
        height: 100vw;
        position:relative;
        padding: 0;
        overflow: hidden;
        /*border-radius: 5px;*/
        /*border: solid 1px white;*/
        /*cursor: pointer;*/
        /*transition: height .2s ease-in-out, width .2s ease-in-out,max-height .2s ease-in-out, max-width .2s ease-in-out;*/
    }
    /*.service-card:hover {
        max-height: 56vw;
        max-width: 46vw;
        width: 95%;
        height: 100%;
    }*/

    .service-card:before {
        content: ' ';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity:1;
        background-color: rgb(38 38 38 / 42%);
        transition: backdrop-filter .2s ease-in-out;
        /*backdrop-filter: blur(3px) opacity(1);*/
        z-index: 1;
    }
    /*.service-card:hover:before{
        backdrop-filter: blur(3px) opacity(0);
    }*/

    .service-card:hover > .slide-up {
        bottom: 0vw;
    }

    .service-card button {
        padding: 1.5vw 5.8vw;
        background: #4040407a;
        color: #b7b7b7;
    }

    .slide-up {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: white;
        width: 100%;
        height: 50%;
        position: relative;
        /*background-color: rgb(32, 32, 32);*/
        z-index: 1;
        transition: bottom .3s ease-in-out;
        bottom: 0;
    }

    .slide-up section {
        height: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /*padding: 0 1vw;*/
        /*font-size: 1.7em;*/
    }

    .slide-up h6 {
        font-family: 'Montserrat-SemiBold';
        text-align: center;
        background: #1414147a;
        /*height:10%;*/
    }

    /*this may become non specific*/
    .dotdotdot {
        font-weight: normal;
        display:none;
    }
    /* ---------------- */
    .slide-up p {
        color:#cdcdcd;
        text-align: center;
        /*display: inline;*/
        /*background:rgb(146, 161, 226)*/
    }

    .service-card .para-2 {
        display:inline;
    }

    .p-group {
        display: inline;
        text-align: center;
        flex-direction: column;
        padding: 0 1vw;
    }
    

    .basic-btn {
        padding: .5vw .8vw;
        background: #3e3e3e7a;
        text-transform: uppercase;
        color: white;
        font-family: 'Montserrat-SemiBold';
        border: none;
        letter-spacing: .1vw;
        cursor:pointer;
        margin: 0 0 1vmax 0;
    }

    .sc-fibreglass h6, .sc-polyester h6, .sc-underfloor h6, .sc-removal h6 {
        /*font-size: 4em;*/
        height: 4vw;
        justify-content: center;
        display: flex;
        align-items: center;
    }

    .sc-fibreglass, .sc-polyester, .sc-removal, .sc-underfloor {
        background-position: center;
        background-size: cover;
        display:flex;
        justify-content: center;
        height: 50%;
        width:100%;
        position: relative;
        z-index: 1;
    }
    .sc-fibreglass{
        background-image: url(../image/insulation/fibreglass.webp);
    }
    .sc-polyester{
        background-image: url(../image/insulation/Polyester.webp);
    }
    .sc-underfloor{
        background-image: url(../image/insulation/Underfloor.webp);
    }
    .sc-removal{
        background-image: url(../image/insulation/Removal.webp);
    }

    .more-info-popout {
        width: 100%;
        height: 100%;
        display: none;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: fixed;
        top: 0;
        z-index: 3;
        padding: 2vw;
        box-sizing: border-box;
        background-color: rgb(0 0 0 / 82%);
        backdrop-filter: blur(3px) opacity(1);
    }
    .more-info-popout h3{
        text-transform: uppercase;
        letter-spacing: .4vw;
    }

    .popout-container {
        background-color: red;
        /*background-color: black;*/
        width: 100%;
        max-width: 1500px;
        /*height: 100%;*/
    }

    .popout-container article {
        width: 100%;
        /*height: 100%;*/
    }

    .popout-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-sizing: border-box;
        background: #1c1c1c;
        background-image: url(../image/full-size-logo.png);
        background-size: 256px;
        padding: 1vw;
        text-align: center;
        width: 100%;
        /*height: 50%;*/
    }

    .popout-info > p {
        margin: 1vmax 0;
    }

    .popout-container .sc-fibreglass, .popout-container .sc-polyester, .popout-container .sc-removal, .popout-container .sc-underfloor {
        width: 100%;
        /*height: 50%;*/
        height:unset;
    }

    .popout-info section {
        display: flex;
        justify-content: center;
    }

    .popout-info section > section {
        width: 50%;
        margin: 0px 0 0 23%;
        display: initial;
        justify-content: unset;
    }
    .popout-info section > .basic-btn {
        /*width: 23%;*/
    }

    .popout-info button {
        padding: 3.5vmin 3.8vw;
        margin: 0 1vmax 0 1vmax;
    }

    .pop-out-img-scale {
        height: 45vmin;
    }

} /* Define mobile styles */

/*small screens in landscape orientation */
@media only screen and (orientation: landscape) {

    .services-intro p{
        display: inline;
    }

    .service-card {
        height: 55vw;
    }

    .dotdotdot {
        display: inline;
    }

    .service-card .para-2 {
        display:none;
    }

    /*.popout-info {
        height: 40%;
    }*/
    /*.popout-container .sc-fibreglass, .popout-container .sc-polyester, .popout-container .sc-removal, .popout-container .sc-underfloor {
        height: 60%;
    }*/

}

/* Medium screens */
@media only screen and (min-width: 40.063em) {
    .service-card-cont {
        padding: 0 0 2vw 0;
    }

    .services-intro .para-2 {
        display:block;
    }
    .service-card {
        /*max-height: 25vw;
        max-width: 20vw;*/
        width: 90%;
        height: 65vw;
    }
    /*.service-card:hover {
        max-height: 26vw;
        max-width: 21vw;
        width: 95%;
        height: 100%;
    }*/

    .slide-up {
        /*height: 24vh;*/
        /*bottom: -8vw;*/
    }

    .slide-up section {
        /*height: 8vw;*/
        /*font-size: .65em;*/
    }

    .dotdotdot {
        display: none;
    }

    .service-card .para-2 {
        display: inline;
    }

    .sc-fibreglass h6, .sc-polyester h6, .sc-underfloor h6, .sc-removal h6 {
        /*font-size: 2em;*/
        height: 2vw;
    }

    /*.popout-info {
        height: 40%;
    }*/
    /*.popout-container .sc-fibreglass, .popout-container .sc-polyester, .popout-container .sc-removal, .popout-container .sc-underfloor {
        height: 60%;
    }*/
} /* min-width 641px, medium screens */

/*Medium screens in landscape orientation */
@media only screen and (orientation: landscape) and (min-width: 40.063em) {


    .service-card {
        margin: 0;
        /*height: 35vw;*/
    }
    
    .dotdotdot {
        /*display: inline;*/
    }

    .service-card .para-2 {
        /*display: none;*/
    }
    
    .service-card button {
        padding: 0.5vw 2vw;
    }

}

/* Large screens */
@media only screen and (min-width: 64.063em) {
    
    /*.services {
    min-height:85vh;
    }*/

    /*.service-card-cont {
        padding: unset;
    }*/

    .service-card {
        height: 31vw;
        margin: 0;
    }
    
    .dotdotdot {
        display: none;
    }
    
    .service-card .para-2 {
        display:inline;
    }
} /* min-width 1025px, large screens */

/* XLarge screens*/
@media only screen and (min-width: 90.063em) {
    .service-card {
        height: 24vw;
    }

} /* min-width 1441px, xlarge screens */

/* XXLarge screens*/
@media only screen and (min-width: 120.063em) {

} /* min-width 1921px, xxlarge screens */