/******************* getting rid of the padding on cols. pbootstrap has a class for this so prob not needed *******************/


.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    padding-left: 0;
    padding-right: 0;
}


/******************* setting up the spacing system used throughout *******************/



/* each section is wrapped in a container-wrapper */

.container-wrapper {
        padding: 0;
        overflow: hidden;
            
}

.container-fluid {
/*      max-width: 1600px;*/
        margin: auto;
        padding: 0;
       
}


/* each module in a column is wrapped in an element-wrapper */

.element-wrapper {
                padding: 2rem;
        }

@media only screen and (min-width: 996px) {
        .element-wrapper {
                padding: 3rem;
        }
}

@media only screen and (min-width: 1200px) {
        .element-wrapper {
                padding: 3rem;
        }
}

@media only screen and (min-width: 1400px) {
        .element-wrapper {
                padding: 5rem;
        }
}


@media only screen and (min-width: 991px) {
    .full-height {
            min-height: 100vh !important;

    }
}


/******************* hero *******************/

.hero {
        background-image: url(../img/header.jpg);
        position: relative;
        background-position: 50% 20%;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;

        
}
.hero .container-fluid {
    max-width: 1600px;
}

/*@media only screen and (max-width: 992px) {
    .hero  {
        background-position: center;
        background-size: cover;
    }
}*/



@media only screen and (max-width: 992px) {
    .intro-copy {
        margin-top: 200px;
    }
}

@media only screen and (max-width: 992px) {
    .logo {
        width: 250px;
    }
}


/******************* colours *******************/
/*
.bg-mid-grey {
        background-color:#ccc;
}
.bg-light-grey {
        background-color:#ebebeb;
}
.bg-dark-grey {
        background-color:#999;
}
.bg-white {
        background-color: white;
}*/


.bg-skin {
    background-color: #EDD2BB;
}

.skin {
    color: #EDD2BB;
}


.bg-peach {
    background-color: #E9C8BA;
}

.peach {
    color: #E9C8BA;
}

.bg-tan {
    background-color: #D7B69F;
}

.tan {
    color: #D7B69F;
}
.bg-trans {
    background-color: transparent;
}

/******************* helpers *******************/

.sticky-top {
        padding-top: 6rem;
}

ul {
        margin: 0; padding: 0;
}



.object-fit-cover { 
    object-fit: cover;
    object-position: 50% 50%; 
    width: 100%;
    height: 100%;

}



.card-header, .card, .card-body {
    margin: 0;
    border: none;
    padding: 0;
     
}


.accordion {
    border-bottom: 1px solid rgba(35, 25, 21, 0.5 );
    padding-top: 5rem;
}

@media only screen and (min-width: 992px) {
    .accordion {
        padding-top: 17rem;
    }
}



.title-icons {
    width: 3rem;
    height: 3rem;
}

@media only screen and (min-width: 1200px) {
    .title-icons {
            width: 4rem;
            height: 4rem;
    }
}




/********************** Fullscreen background image ***********************/


.background-cover {
        background: url('https://images.pexels.com/photos/356286/pexels-photo-356286.jpeg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;

}
.background-cover .overlay {
        position: absolute; top: 0; left: 0;
        height: 100%; width: 100%;
        background: rgba(0, 0, 0, .5);
        z-index: 1;
}
.background-cover .container {
        position: relative;
        z-index: 2;
}









/**********************  Fullscren background video  */


.background-video {
        position: relative;
        background-color: #EDD2BB;
        height: 100%;
        width: 100%;
        overflow: hidden;
        border-collapse: 0;

}

.background-video video,
.background-video iframe {
        position: absolute; top: 50%; left: 50%;
        min-width: 100%; min-height: 100%;
        width: auto; height: auto;
        -ms-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        z-index: 0;
}
.background-video .overlay {
        position: absolute; top: 0; left: 0;
        height: 100%; width: 100%;
        background: rgba(0, 0, 0, .5);
        z-index: 1;
}
.background-video .container {
        position: relative;
        z-index: 2;
}
@media (pointer: coarse) and (hover: none) {
        .background-video {
                /*background: url('../img/face.jpg') black no-repeat center center scroll;*/
                /*height: 400px;*/
        }
        .background-video video,
        .background-video iframe {
                display: none;
        }
}





/******************* Images *******************/



.bg-fixed {
  background-size: 100%;
}
.img-fluid {
    width: 100%;
}

@media only screen and (min-width: 768px) {
        .bg-fixed {
            background-size: 100%;
            background-attachment: fixed;
            background-repeat: no-repeat;

        }
}
@media only screen and (min-width: 1200px) {
        .bg-fixed {
            background-size: 70%;
            background-attachment: fixed;
            background-repeat: no-repeat;

        }
}


.skin-cancer-bg {
    background-image: url('../img/skin.jpg');
    background-position: right top;

}




.breast-surgery-bg {
background-image: url(../img/breast.jpg);
    background-position: left top;
  
}




.body-bg {
background-image: url(../img/body.jpg);
    background-position: right top;

}



.hand-bg {
background-image: url(../img/hand.jpg);
    background-position: left center;

}


.face-bg {
background-image: url(../img/face.jpg);
    background-position: right top;
    
}





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

    .skin-cancer-bg {
        height: 300px;

    }

    .breast-surgery-bg {
         height: 400px;
    }


    .body-bg {
         height: 300px;
    }

    .hand-bg {
         height: 300px;
    }

    .face-bg {
        height: 300px;
    }
}







/******************* Blocks *******************/






.peach-block {
        /*background-image: url(../img/blocks/peachblock.png);*/
        background-size: 100%;
        background-repeat: no-repeat;
        background-color:#E9C8BA;

}


.peach-block2 {
        /*background-image: url(../img/blocks/peachblock2.png);*/
        background-size: 100%;
        background-repeat: no-repeat;
        background-color:#E9C8BA;

}



.skin-block {
        /*background-image: url(../img/blocks/skinblock.png);*/
        background-size: 100%;
        background-repeat: no-repeat;
        background-color:#EDD2BB;
}


.skin-block2 {
        /*background-image: url(../img/blocks/skinblock2.png);*/
        background-size: 100%;
        background-repeat: no-repeat;
        background-color:#EDD2BB;
}


.tan-block {
         /*background-image: url(../img/blocks/tanblock.png);*/
        background-size: 100%;
        background-repeat: no-repeat;
        background-color:#D7B69F;
}



/*.about-block {
         background-image: url(../img/blocks/aboutblock.png);
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-position: bottom left;
}
*/




/*
****************** buttons *******************/



.btn {
   text-align: left;
    width: 100%;
    border-radius: 0px;
    border-top: 1px solid rgba(35, 25, 21,0.5)

}

.btn-link {
    color: #251B18;
    text-align: left;
    text-decoration: none;

}

.btn-link:hover {
    color: #251B18; 
    opacity: 0.8;
    text-decoration: none;
}


.btn-link.focus, .btn-link:focus {
    text-decoration: none;
    box-shadow: none;

}


/******************* footer *******************/





.footer {
        background-image: url(../img/footer.png);
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-position: bottom;
}




/*/******************* links ******************
*/

.link {
  color:#251B18;
  border-bottom: solid 1px rgba(37, 27, 24, 0.5);
   text-decoration: none;
}

.link:hover {
  color:#251B18;
 opacity: 0.5;
 border-bottom: solid 1px rgba(37, 27, 24, 1);
 text-decoration: none;
}