@charset "UTF-8";
/* CSS Document */
body {
    background-color: #294D45;
}

#navcolor {
    background-color: #294D45;
}

h2 {
    color: darkgray;
}

footer {
    color: darkgray;
    clear: both;
}

.card-img-top {
    width: 20.625em; /* 330px converted to em */
    height: 13.375em; /* 214px converted to em */
    border-radius: 0.3125em; /* 5px converted to em */
    display: block;
    margin: 0.3125em auto; /* 5px converted to em */
    background-size: 100%;
    background-repeat: none;
    z-index: 5;
    opacity: .5;
    transition: opacity 2s;
}

.card-img-top:hover {
    opacity: 1.0;
}

#slideshow-wrapper {
    width: 100%;
    height: 27.5625em; /* 441px converted to em */
}

#slideshow {
    width: 100%;
    height: 27.5625em; /* 441px converted to em */
    overflow: hidden;
    white-space: nowrap;
}

#banner {
    background-image: url("../up-north-supplemental-materials/up-north-supplemental-materials/images/attractions/Harbor.png");
    height: 27.5625em; /* 440px converted to em */
    width: 100%;
}

.listing {
    width: 90%;
    border: 0.0625em solid #a32973; /* 1px converted to em */
    float: left;
    padding: 0.625em; /* 10px converted to em */
    margin: 0.625em; /* 10px converted to em */
    background-color: #f2f2f2;
}

.listing h2 {
    font-size: 1.5em;
    color: #a32973;
    text-align: center;
}

.listing img {
    float: left;
    margin-right: 0.875em; /* 14px converted to em */
}

.listing p {
    margin-bottom: 0.625em; /* 10px converted to em */
    line-height: 1.25;
    font-size: 1em;
    color: black;
    padding: 0.625em 0; /* 10px converted to em */
}

.listing-container {
    display: flex;
    flex-wrap: wrap;
}

.listing-container .col {
    flex-basis: calc(33.33% - 1.25em); /* Adjust width and margin */
    margin-right: 1.25em; /* Adjust margin */
}

.tile {
    background-color: tan;
    padding: 1.25em; /* 20px converted to em */
    margin-bottom: 1.25em; /* 20px converted to em */
    width: 30%; /* Width adjusted */
    float: left;
    margin-left: 0.625em; /* 10px converted to em */
    height: 50em; /* 800px converted to em */
}

.tile img {
    max-width: 100%;
    height: auto;
}

.book-now-btn {
    margin-top: 1.25em; /* 20px converted to em */
}

#booking-modal {
    position: fixed; /* Change position to fixed */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Center exactly */
    width: 70%;
}

.modal-content {
    height: 12.5em; /* 200px converted to em */
    background-color: #D9BBA0;
}

.modal-content h2 {
    text-align: center;
	color: black ;
}

.modal-content input {
    margin: 0.625em 0.625em; /* 10px converted to em */
}

.modal-content label {
    margin: 0.625em 0.625em; /* 10px converted to em */
}


@media only screen and (max-width:1024px) 
{.card-img-top{width:10.526em;}
.tile {width:45%;}
	
}
@media only all and (max-width:480px) { .tile {float:none;width:90%;}
	}