.modal-open .modal{
    z-index: 9001;
}
.modal-header{
    border-bottom: none;
}

.modal-content{
    overflow: hidden;
    background: #1f1e1e;
}

.modal-body img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.close{
    color: white;
}

.modal {
    text-align: center;
    padding: 0!important;
}

.modal:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
}

.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

.modal-body{
    padding: 0;
}
.header-content{
    display: flex;
    justify-content: space-evenly;
    position: relative;
    height:100%;
    align-items: center;
    z-index: 2;
}
#survey, #operations{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color:white;
    text-align: center;
    cursor: pointer;
}
#header-background {
    margin-top:65px;
    display: flex;
    justify-content: space-evenly;
    position: absolute;
    height: -moz-calc(100% - 65px);
    height: -webkit-calc(100% - 65px);
    height: -o-calc(100% - 65px);
    height: calc(100% - 65px);
    width:100%;
    align-items: center;
    z-index: 1;
}
header{
   /*  background: url(img/raster.png),linear-gradient(to right,rgba(24, 72, 92, 0.3), rgba(24, 72, 92, 0.3)), url(assets/img/complete_building_survey_on _mobile.jpg); */
     background:  linear-gradient(0deg,rgba(61, 134, 167,0.7),rgba(61, 134, 167,0.7)),url("/assets/img/complete_building_survey_on _mobile.jpg"); 
}
.titleandtext{
    display:none;
    max-width: 400px;
   /*  background: rgba(12, 12, 12, 0.4);
    border-radius: 5%;
    padding: 2em; */
}
.imgandtitle{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color:white;
}
.imgandtitle > img{
    max-height: 25vh;
}
.imgandtitle > span, .titleandtext > span {
    font-size: xx-large;
    font-weight: bold;
}
.imgandtitle > p, .titleandtext > p {
    padding: 0 10px;
    font-size: 0.9em;
    margin-bottom: 20px;
    margin-top: 10px;
    font-weight: bold;
}
.btn-more-info{
    text-decoration: none;
    color: black;
    background: white;
    padding-left: 40px;
    padding-right: 40px;
    border-radius: 5px;
    text-transform: uppercase;
    box-shadow: 0 2px 2px #888;
    font-weight: 400;
    transition: background-color 0.5s;
}

.header.yellow  > #header-background{
    webkit-clip-path: polygon(100% 0, 0% 100%, 0 0);
    clip-path: polygon(100% 0, 0% 100%, 0 0);
    background: #f0be49;
    animation-duration: 1s;
    animation-name: slidebackgrounddown;
}

.header.enterprise  > #header-background{
    clip-path: polygon(100% 0px, 0% 100%, 100% 100%);
    background: linear-gradient(to right, rgb(79, 58, 127) 0%, rgb(165, 71, 68) 100%);
    animation-duration: 1s;
    animation-name: slidebackgroundup;
    /* transition: all 2s ease 0s; */
}

.header.enterprise > .container > .col-md-6 > #operations > .titleandtext{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color:white;
    position:absolute;
    opacity: 1;
    animation-duration: 1s;
    animation-name: slidein;
    background: rgba(12, 12, 12, 0.4);
    border-radius: 5%;
    padding: 2em;
}

.header.yellow > .container > .col-md-6 > #survey > .titleandtext{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color:white;
    position:absolute;
    opacity: 1;
    animation-duration: 1s;
    animation-name: slidein;
    background: rgba(12, 12, 12, 0.4);
    border-radius: 5%;
    padding: 2em;
}

.header.default > .container > .col-md-6 > div > .imgandtitle{
    transition: all 1s ease;
    opacity: 1;
}
.header.default > .container > .col-md-6 > div > .titleandtext{
    transition: all 1s ease;
    opacity: 0;
}
/* .header.default > #header-background{
    transition: all 5s ease-out ;
} */

.header.yellow > .container > .col-md-6 > #survey > .imgandtitle{
    transition: all 1s ease;
    opacity: 0;
}
.header.yellow > .container > .col-md-6 > #operations > .imgandtitle{
    transition: all 1s ease;
    opacity: 0.4;
}
.header.yellow > .sticky{
    box-shadow:none;
}

.header.enterprise > .container > .col-md-6 > #operations > .imgandtitle{
    transition: all 1s ease;
    opacity: 0;
}
.header.enterprise > .container > .col-md-6 >  #survey > .imgandtitle{
    transition: all 1s ease;
    opacity: 0.4;
}

@keyframes slidein {
from {
    margin-top: 20%;
    height: 0%; 
    background:none;
}
30% {
    background:none;
}
to {
    margin-bottom: 0%;
    height: 100% + 65px;
}
}

@keyframes slidebackgroundup {
from {
    margin-top: 775px;
    height: 0%; 
}

to {
    margin-bottom: 0%;
    height: 100% + 65px;
}
}

@keyframes slidebackgrounddown {
from {
    margin-bottom: 100%;
    height:0;
}

to {
    margin-top: 65px;
    height: 100% - 65px; 
}
}

@keyframes fadeout {
from {
   display: flex;
}

to {
    opacity: 0;
    display: none;
}
}

.footer-heading{
    font-size: 1em;
}
@media (max-width: 820px){
    .featured-content, .featured-content > .row{
        display:none;
        height: 0px;
    } 
    .header-content{
        flex-flow:column;
        justify-content: space-between;
    }
    img{
        max-width: 40vw;
    }
    .imgandtitle > span, .titleandtext > span {
        font-size: xx-large;
    }
    #header-background{
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 0 55%);
        clip-path: polygon(0 0, 100% 0, 100% 50%, 0 55%);
        background: #f0be49;
    }
   header{
        background: linear-gradient(to right, rgb(79, 58, 127) 0%, rgb(165, 71, 68) 100%);
        /* height: 100%; */
        min-height:100vh;
        height: 100%;

   }
   .titleandtext{
       display: block;
   }
   .titleandtext > span, .titleandtext > img{
       display:none;
   }
   .col-md-6{
       padding-top: 5em;
       padding-bottom:2em;
   }
   nav{
       box-shadow: none;
   }
   #survey, #operations{
       cursor:unset;
   }
}