body {
    background-color: #173F8F;
    color:white;
    font-size:1.2em;
   
    line-height: 150%;
    overflow-x:hidden;
}

* {
    padding:0;
    margin: 0;
    box-sizing:content-box;
    font-family: 'Karma', serif; /*overided in mobile*/
	font-weight: normal;
    visibility:visible;
}

strong {
	font-weight:600;
	letter-spacing:0.05rem;
}

hr {
    width:4em;
    height:0.2em;
    margin-left: 0;
    background-color:white;
    border:none;
    margin-top:2em;
    margin-bottom:1em;
}

.col-wide{  
    width:auto;
    max-width:50em;
    padding-right:3em; /*overided in mobile*/
    padding-left:3em; /*overided in mobile*/ 
}

.col-narrow {
    max-width:30em;
    width:auto;
    padding-right:3em; /*overided in mobile*/
    padding-left:3em; /*overided in mobile*/
}

.section {
    margin-top:6em;
    margin-bottom:5em;
}

.subsection {
    margin-top:2em;
    margin-bottom:2em;
}

/*big screens*/
@media screen and (min-width:40em) {
    #title-section {
        padding:0;
        height:38em;
        position:relative;
        /*border: 1px solid red*/
    }
    
    #title-image {
        display:block;
        height:38em;
        position:absolute;
        top:2.5em;
    }
    
    #title-image-mobile {
        display:none;
    }
}

/*small screens*/
@media screen and (max-width:40em) {
    #title-section {
        padding:0;
        position:relative;
        padding-left:3em;
        margin-bottom:-2em;
        /*border: 1px solid red*/
    }
    
    
    #title-image {
        display:none;
    }
    
    #title-image-mobile {
        width:100%;
    }
	
	.section {
		margin-top:5rem;
	}
	
	
	.col-narrow {
		padding-right:2em;
		padding-left:2em; 
	}
	
	.col-wide {
		padding-right:2em;
		padding-left:2em; 		
	}
	
	html {
		font-size:80%;
	}
}

.centered {
    margin-right: auto;
    margin-left: auto;
    display:block;
}

#title-section p {
    padding-top:1em;
    position:relative;
}




#rooms {
    display: flex;
    justify-content:center;
}

#rooms img {
    height:7em;
    padding:0.3em;
}

@media screen and (max-width:40em) {
	#rooms {
		flex-direction: column;
	}
	
	#rooms img {
		display:block;
		height:auto;
		max-width:calc(30% + 10rem);
		margin-left:auto;
		margin-right:auto;
		padding:0.5em;
	}
}


#strategy {
    
}

#strategy img{
    width:70%;
    display:block;
}

#video1 {
    border:none;
    width:100%;
    background: linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,40,0.5),rgba(0,0,0,0.5),rgba(40,40,40,0))
}

#video1 video{
	display:block;
    width:100%;
}

.bigImage {
    display:block;
    padding:10em;
}
#floorplan {
	padding-top:2rem;
}

.vidcontainer {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	box-sizing:border-box;
	overflow: hidden;
}

iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;	
}



/*------------------------------- video controlls ------------------------------- */

.play-btn {
    position:relative;
}

.play-btn::before {
    display:block;
    position:absolute;
    height:3rem;
    width:3rem;
    left: 50%;
    top:50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    content:"";
    background-image: url("media/playbtn.png");
    background-size: contain;
    opacity:1;
	
	visibility: visible;
	opacity: 1;
	transition: visibility 0.5s, opacity 0.5s linear;
	
}

.play-btn-off {
    position:relative;
}

.play-btn-off::before {
    display:block;
    position:absolute;
    height:3rem;
    width:3rem;
    left: 50%;
    top:50%;
    transform: translate(-50%, -50%);

    content:" ";
    opacity:0;
    background-image: url("../media/playbtn.png");
    background-size: contain;
	
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.5s, opacity 0.5s linear;	
}

.loading {
    position:relative;
}

.loading::before {
    display:block;
    position:absolute;
    height:3rem;
    width:3rem;
    left: calc(50% - 1.5rem);
    top: calc(50% - 1.5rem);
    pointer-events: none;
    content:"";
    background-image: url("../media/loading-spinner.png");
    background-size: contain;
    opacity:1;
	
	visibility: visible;
	opacity: 1;
	transition: visibility 0.5s, opacity 0.5s linear;
	animation: spin 2s infinite linear;
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}