/* style article */
h2.showLodgesHeader {
margin: 0;
font-size: 36pt;
padding: 0;
width: 100% !important;
margin-top: 30px;
margin-bottom: -20px;
}
.countyContainer {
display: flex;
justify-content: space-between;
}
.shortDescriptionMob {
color: black;
font-size: 10pt;
font-weight: normal;
}
.countyContainerLeft, .countyContainerRight {
width: CALC(50% - 15px);
}
.countyContainerLeft img {
border-radius: 20px;
}
.rightColWhiteBGLodgesGuide {
margin: 0;
width: 100%;
padding: 30px 40px;
font-weight: normal !important;
}
.topText {
font-size: 1em;
width: 100%;
padding: 0;
border: 1px solid white;
font-weight: normal !important;
}
.topText img {
max-width: 100%;
}
.topText .wp-caption-text {
font-size: 0.9em;
margin-top: 10px;
text-align: center;
}
.topText H2, .topText H3 {
font-weight: 700;
font-size: 2em;
}
.topText H4 {
font-weight: 700;
font-size: 1.6em;
}
.topText H3 {
font-size: 1.3em;
}
.topText ul li {
line-height: 40px;
}
.topText li {
/*margin: 30px;*/
}
.topText h2 {
background: #2f9cd4;
color: white;
padding: 20px 0 20px 60px;
margin-left: -40px;
width: CALC(100% + 80px);
font-size: 16pt !important;
margin-bottom: 30px;
margin-top: 30px;
}
.topText hr {
border: 0;
border-bottom: 4px solid #bae2f7;
margin-bottom: 30px;
margin-top: 30px;
}
.topText img {
margin: 30px auto;
max-width: 100%;
display: block;
}
.topText table {
margin: auto;
width: 100%;
border-collapse: collapse;
}
.topText table tr:nth-child(odd) {
background-color: #d0edf7;
}
.topText table thead tr {
border: 1px dashed #60568f;
padding: 10px;
}
.topText table td, .topText table th {
border: 1px dashed #60568f;
padding: 10px;
}
.topText table th {
background: #2f9cd4;
font-weight: bold;
color: white;
height: 20px;
}
.topText ol {
counter-reset: fancy-counter;
list-style: none;
padding-left: 0;
margin-left: 0;
width: 100%;
}
.topText ol li {
width: 100%;
margin-left: 15px;
counter-increment: fancy-counter;
background: linear-gradient(90deg, rgba(0,87,147,1) 14%, rgba(47,156,212,1) 100%);
color: #ffffff;
border-radius: 5px;
padding: 10px 20px;
position: relative;
}
.topText ol li::before {
content: counter(fancy-counter) '.';
font-weight: bold;
position: absolute;
left: -30px;
top: 0;
background-color: #555;
color: #fff;
height: 100%;
width: 25px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px 0 0 5px;
}
.topText ol li:hover {
background: linear-gradient(90deg, rgba(23,138,217,1) 14%, rgba(47,169,212,1) 100%);
}
.availabilityBackground {
margin-top: -2px;
}
.imageLeft {
float: left;
margin: 20px 20px 20px 0;
max-width: 60%;
}
.imageRight {
float: right;
margin: 20px 0 20px 20px;
border: 1px solid black;
max-width: 60%;
}
.milesAway {
border: 1px solid #52A4CC;
padding: 9px;
color: #52A4CC;
font-weight: bold;
border-radius: 4px;
margin: 5px 0 10px 0;
display: inline-block;
}
.imageCenter {
margin: auto;
padding: 10px;
border: 1px solid #ccc;
max-width: 100%;
}
.sortByBox {
width: 100%;
}
.sortByLeft, .sortByRight {
width: 50%;
text-align: center;
padding: 0 50px;
}
/* MEDIA QUERIES */
@media only screen and (max-width: 1200px) {
.sortByLeft, .sortByRight {
padding: 0;
}
}
@media only screen and (max-width: 1100px) {
h1.showLodgesHeader {
font-size: 30pt;
padding: 10px;
}
.leftCol {
width: 25%;
}
.rightCol {
width: CALC(75% - 20px);
}
.sortByRight .availBoxSelect {
width: 100%;
}
}
@media only screen and (max-width: 900px) {
.under900Hide {
display: none;
}
}
@media only screen and (max-width: 849px) {
.sortByBox {
flex-direction: column;
}
.sortByLeft, .sortByRight {
margin: 5px;
}
}
@media only screen and (max-width: 800px) {
.topText h2 {
background: #2f9cd4;
color: white;
padding: 20px 0 20px 60px;
width: CALC(100% + 60px);
font-size: 16pt !important;
margin-bottom: 30px;
margin-top: 30px;
}
.topText {
}
.topText li {
margin: 10px 30px;
}
}
@media only screen and (max-width: 700px) {
.topText h2 {
margin-left: -20px;
padding: 20px;
width: CALC(100% + 40px);
text-align: center;
}
.rightColWhiteBGLodgesGuide {
padding: 20px;
}
.countyContainer {
padding: 0;
margin-bottom: -30px;
}
.topText table {
font-size: 11pt;
}
.countyContainer {
flex-direction: column;
}
.countyContainerLeft, .countyContainerRight {
width: 100%;
margin-top: -80px;
}
.countyContainerLeft img {
border-radius: 5px;
margin: 0;
padding: 0;
}
.imageLeft {
clear: both;
max-width: 100%;
margin: 10px 0;
}
.imageRight {
clear: both;
max-width: 100%;
margin: 10px 0;
}
}
@media only screen and (max-width: 600px) {
.rightColWhiteBGLodgesGuide {
padding: 25px;
}
.milesAway {
border: 1px solid #52A4CC;
padding: 4px;
width: 100%;
font-weight: normal;
border-radius: 3px;
margin: 5px 0 10px 0;
font-size: 9pt;
}
.imageLeft {
margin-bottom: 20px;
display: block;
width: 100%;
clear: both;
}
.sortByRight select.availBoxSelect {
border: 1px solid #668579;
}
.availabilityBackground {
margin-top: 10px;
}
.leftCol {
width: 100%;
display: block;
margin-top: 20px;
}
.rightCol {
width: 100%;
}
.topText h2 {
margin-left: -25px;
width: CALC(100% + 50px);
}
}
@media only screen and (max-width: 500px) {
.topText h2 {
background: #2f9cd4;
color: white;
padding: 25px 35px;
margin-left: -30px;
width: CALC(100% + 60px);
font-size: 16pt !important;
margin-bottom: 30px;
margin-top: 30px;
border-top: 1px solid #06578a;
border-bottom: 1px solid #06578a;
}
h2.showLodgesHeader {
display: block !important;
font-size: 22pt;
}
.topText table {
width: CALC(100% + 40px);
margin-left: -20px;
font-size: 10pt;
}
.topText table thead tr {
padding: 3px;
}
.topText table td, .topText table th {
padding: 3px;
}
}
@media only screen and (max-width: 500px) {
.foundNum {
margin: 0;
padding: 0;
color: white;
font-size: 14pt;
border: none;
font-weight: normal;
}
.sortByBox {
flex-direction: row;
}
.sortByBox {
flex-direction: row !important;
-webkit-flex-direction: row !important;
justify-content: space-between !important;
}
.sortByBox select.availBoxSelect {
width: 100%;
}
.sortByLeft {
width: 40% !important;
}
.sortByRight {
width: 60% !important;
}
}
}