html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body,h1,h2,h3,h4,h5,h6 {font-family: "Open-Sans", sans-serif}

body {
    min-height: 100vh;
}

body {
	line-height: 1.0;
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* The container */
.container-10 {
  display: block;
  position: relative;
  padding-left: 35px;
  bottom: 0;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container-10 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  margin-top: 0px;
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
    /*background-color: indianred;*/
}

/* When the checkbox is checked, add a red background */
.container-10 input:checked ~ .checkmark {
  background-color: indianred;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container-10 input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container-10 .checkmark:after {
  left: 9px;
  top: 5px;
  width: 8px;
  height: 15px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}   

/*.container-10 input ~ .crate-nopadding:after {
    display: block!important;
    font-size: 16px;
    font-weight: 600;
    color: black;
    content: "Select";
}
    
.container-10 input:checked ~ .crate-nopadding:after {
    display: block!important;
    font-size: 16px;
    font-weight: 700;
    color: firebrick;
    content: "SELECTED";
    letter-spacing: -1px!important;
}
*/
.texter {
  display: none;
    color: black;
}

.container-10 input:checked + .texter {
  display: inline-block
}

label {
display: inline-block;
padding: 0;
white-space: nowrap;
border: 0px solid blue;
vertical-align: middle
}
input { 
  vertical-align: middle;
}
    
label span {
display: inline-block;
border: 0px solid red;
} 
    
.extra { 
    display: inline-block;
    border: 0px solid red;
    vertical-align: middle;
    height: 20px;
    font-size: 0.6em;
    padding-top: 1px;
}
    
.jumbotron {
    width: 100%; 
    padding: 20px 0px 0px 0px; 
    margin-bottom: 0px;
    position: fixed;
    top: 0;
    margin-top: 40px;
    z-index: 40
    }
    
#demo {margin: 0 auto; width: 70%; text-align: center; border: 0; height: 25px}
#demo li {display: inline}

/* ============= display-new starts =========== */

h1, h2 {text-align: center}

.btn-t03 {margin: 0 auto!important}

.display-new, .display-4 {
    font-family: open-sans, sans-serif;
    font-weight: 100;
    font-style: normal;
    font-size: 48px;
    }

.lead-01 {
    margin: 8px auto;
    font-family: open-sans, sans-serif;
    font-weight: 550;
    font-style: normal;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    width: 80%
    }
/* ============ display-new ends =============*/
.fa {
  font-size: 12px;
  color: black;
  cursor: pointer;
}

.fa-solid {
  color: black;
}
    
.lead {width: 70%; margin: 0 auto; font-size: 13px; font-weight: 700; opacity: 0.7; line-height: 2.0}
.lead-button{text-align: center; padding: 15px}

/* ============================= Individual Cards start ================================*/
.rounded {
    border: thin solid!important;
    border-color: rgba(224,224,224,1.00)!important;
    border-bottom: 0!important;
    border-top-left-radius: 20px!important;
    border-top-right-radius: 20px!important;
    border-bottom-left-radius: 0!important;
    border-bottom-right-radius: 0!important
    }
    
.bordered {
    border: thin solid!important;
    border-color: rgba(224,224,224,1.00)!important;
    border-top: 0!important;
    border-bottom: 0!important;
    padding: 10px 15px
    }

.bordered-footer {
    border: thin solid!important;
    border-color: rgba(224,224,224,1.00)!important;
    }

.icon-a {color: grey; font-size: 8px}
.icon-b {color: orange; font-size: 8px}
.icon-c {color: indianred; font-size: 8px}
.icon-d {color: navy; font-size: 8px}

/* Number of beds */
.sale-div {
    background-color: #269abc;
    color: white;
    bottom: -30px;
    right: 15px;
}

/* Rooms Available!! */
.sale-div-02 {
    background-color: #00c851;
    top: 0px;
    left: 0px;
}

.btn-01 {
    border-radius: 5px; 
    color: #fff;
    font-size: 12px; 
    min-width: 60px;
    /*line-height: 20px;*/
    text-align: center;
    }

.btn-01:hover {opacity: 0.4; background-color: darkblue!important}

.active {
  opacity: 1.0
}
 
.inactive {
  opacity: 1.0
}

.select {
  opacity: 0.9
}   

.deselect {
  opacity: 0.3
}

.btn-02 {
    margin-top: 4px;
    border-radius: 5px; 
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    width: 60px;
    height: 18px;
    text-align: center;
    padding: 0;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1)!important;
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
    }

.btn-02:hover {opacity: 0.4}
    
.btn-03 {
    border-radius: 5px; 
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    padding: 3px 5px;
    margin: 0 auto;  
    background-color: firebrick; 
    text-decoration: none; 
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1)!important; 
    transition: all 0.3s ease 0s;
    cursor: pointer; 
    outline: none;
    }

.btn-03:hover {opacity: 0.6}

.btn-021 {
    margin-top: 4px;
    border: 1px solid rgba(85,80,80,0.3)!important;
    border-radius: 5px; 
    /*color: #fff;*/
    font-size: 12px;
    font-weight: 700;
    width: 70px;
    height: 18px;
    text-align: center;
    padding: 0;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1)!important;
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
    }

.btn-021:hover {opacity: 0.4}

#short {background-color: red}
#long {background-color: blue}

#personal {background-color: rgba(5,1,255,1)}
#nursing {background-color: blue}
#dementia {background-color: seagreen}
#clear {background-color: #fff; color: black}
    
.spanner-01 {float: left; font-size: 12px; font-weight: 700; padding: 5px 0px 0px 0px; opacity: 0.4}
.spanner-02 {float: right; border: 1px solid black; padding: 0px 5px 6px 5px; background-color: #fff; border-radius: 10px}
.spanner-03 {margin-left: 5px; color: black; font-size: 12px; font-weight: 700; opacity: 0.5}
    
.list-group-item {
	width: 100%;
	margin: 0!important;
}

.btn-info {background-color: #0182e6}
    
.long {width: 90px; color: #fff; background-color: darkblue}
.short {width: 90px; color: black; background-color: lightblue}

#filter {padding-bottom: 20px}

/* -- iPhone --*/
@media (max-width: 767px) {
    
h2.lead-02 {
        width: 90%;
        color: black!important;
        font-size: 12px!important; 
        line-height: 1.1!important; 
        font-weight: 500!important; 
        opacity: 0.8!important; 
        letter-spacing: 0px!important; 
        margin: 10px auto 0!important;
        }
}

/* -- 2 across --*/
@media (min-width: 768px) and (max-width: 949px) {
	.list-group-item {
		width: 47%;
		margin: 5px 1.5% !important;
	}
    h1.display-new {font-size: 30px!important}
    h2.lead-02 {
        font-size: 12px!important; 
        line-height: 1.2!important; 
        font-weight: 550!important; 
        opacity: 0.7!important; 
        letter-spacing: 0px!important; 
        padding: 10px 60px!important
        }

    .sec {display: none!important}
    .premier {padding-top: 15px!important; padding-bottom: 1px!important}
    
    p.lead-02 {
        margin: 0 auto!important; 
        width: 90%!important; 
        line-height: 1.2!important; 
        text-align: center!important; 
        font-size: 12px!important; 
        font-weight: 500!important; 
        letter-spacing: 0px!important; 
        opacity: 1.0!important;
        color: black!important
    }
        }

/* -- 3 across --*/
@media (min-width: 950px) and (max-width: 1249px) {
	.list-group-item {
		width: 31.333%;
		margin: 5px 1% !important;
	}
    h1.display-new {font-size: 36px!important}
    h2.lead-02 {
        margin: 0 auto!important;
        width: 90%!important;
        line-height: 1.2!important; 
        font-size: 13px!important; 
        font-weight: 600!important; 
        opacity: 0.7!important; 
        letter-spacing: 0px!important; 
        padding: 10px 0px!important
        }
    
    .sec {display: none!important}
    .premier {padding-top: 15px!important; padding-bottom: 1px!important}
}

/* -- 4 across --*/
@media (min-width: 1250px) and (max-width: 1599px) {
	.list-group-item {
		width: 23%;
		margin: 5px 1% !important;
	}
    h2.lead-02 {
        margin: 0 auto!important;
        width: 90%!important;
        /*line-height: 1.2!important;*/
        font-size: 14px!important; 
        font-weight: 600!important; 
        opacity: 0.7!important; 
        letter-spacing: 0px!important; 
        padding: 10px 0px!important
        }
    
    .sec {display: none!important}
    .premier {padding-top: 15px!important; padding-bottom: 1px!important}
}

/* -- 5 across --*/
@media (min-width: 1600px) and (max-width: 1999px) {
	.list-group-item {
		width: 18%;
		margin: 5px 1% !important;
	}
    h2.lead-02 {font-weight: 700!important; padding: 15px 0px!important; opacity: 0.7!important}
    .sec {display: none!important}
}

/* -- 6 across --*/
@media (min-width: 2000px) {
	.list-group-item {
		width: 15.666%;
		margin: 5px 0.5% !important;
	}
    h2.lead-02 {font-weight: 700!important; padding: 20px 0px!important; opacity: 0.7!important}
    .sec {display: none!important}
}

table.inner01 {
    width: 100%;
    border: 0px solid red;
    }
    
/*.tbody {text-align: left!important}*/

.row01 {line-height: 1.3; border: 0px solid red; text-align: left!important}   
.row02 {line-height: 1.5; border: 0px solid red; text-align: left!important}   
.row03 {line-height: 1.5; border: 0px solid red; text-align: left!important}   
.row04 {line-height: 1.0; border: 0px solid red; text-align: left!important}
.row05 {line-height: 0.8; border: 0px solid green; text-align: left!important}
.row06 {line-height: 2.0; border: 0px solid red; text-align: left!important}
.row07 {line-height: 1.0; border: 0px solid red}
.row08 {line-height: 1.0; border: 0px solid red}
.row09 {}
.row10 {height: 20px; border: 0px solid red}
    
.line01 {font-size: 18px; font-weight: 500; letter-spacing: 0px}
.line02 {font-size: 10px; font-weight: 500; padding: 0}
.line03 {}
.line04 {font-size: 12px; text-align: left!important}
.line05 {font-size: 10px; font-weight: 500; padding: 0!important} 
.line06 {font-size: 12px; font-weight: 600; padding: 0}
.line07 {font-size: 12px; font-weight: 500; padding: 0}
.line07 span:first-child {color: black; float: left}
.line07 span:last-child {color: black; float: right}
.line08 {font-size: 12px; font-weight: 700; padding: 0}
.line09 {}
.line10 {padding: 0; border: 0px solid red!important}

#checkboxes{
    width: 100%;
    height: 100%;
    max-height: 450px;
    padding-top: 6px; 
    background-color: #fff;
    z-index: 999;
    overflow-y: scroll;
    }

.card-footer {max-height: 85px}

@media only screen and (min-width: 721px) {
    
#checkboxes{
    /*width: 100%;
    height: 100%;*/
    /*min-height: 450px!important;*/
    max-height: 1000px!important;
    padding: 6px 0px 30px 0px; 
    background-color: #fff;
    /*z-index: 999;*/
    overflow-y: scroll;
    }
}
nav-01{display: none}

nav-01 {opacity: 0.5}

.spacer-02 {display: none}

@media screen and (max-width: 1200px) {
    
.header-container {height: 40px!important}
nav {display: none!important}
nav-01 {display: block!important}
    
.sub-menu-02 li a {
    color: navy!important;
    font-size: 13px!important;
    font-weight: 400!important;
    margin-left: 80px!important;
    text-decoration: none!important
    }
}
    
@media screen and (max-width: 900px) {
.header-container {height: 40px!important}
/*.main-logo {width: 300px!important} */
    
.button{color:#fff!important}
}

@media only screen and (max-width: 767px) {
    
/*.sub-menu-02 li a {
    color: navy!important;
    font-size: 13px!important;
    font-weight: 400!important;
    margin-left: 80px!important;
    text-decoration: none!important
    }*/

/*.breadcrumb {padding: 0px 10px!important}
.breadcrumb-item a {font-size: 10px!important } */

.premier {padding: 10px 0px 10px 0px!important }
    
.btn-02 {display:inline-block!important}
    
.display-new {font-size: 20px!important; font-weight: 350; font-weight: 500!important; opacity: 0.8!important}
.display-4 {font-size: 18px!important; font-weight: 350; font-weight: 500!important; opacity: 0.8!important}
    
.lead {display: none!important}
.lead-button{padding: 15px 0px 15px 0px!important}
    
p.lead-01 {margin: 0 auto; width: 90%; font-size: 12px; font-weight: 500; letter-spacing: 0px; color: black}
p.lead-02 {margin: 0 auto!important; width: 90%!important; line-height: 1.2!important; text-align: center!important; font-size: 12px!important; font-weight: 300!important; letter-spacing: 0px!important; opacity: 1.0!important; border: 0px solid red; color: black!important}
    
hr.my-4 {display: none!important}

.shift {display: none!important}
.row03 {display: block!important}

.card-img-top {display: none!important}
.bordered {border-top: thin solid rgba(230,230,230,1.00)!important}
.bordered {border-top-left-radius: 20px!important; border-top-right-radius: 20px!important}
.rounded {overflow: hidden!important}
.list-group-item {margin: 0!important}
.card {margin: 0!important}
.card-body {background-color: lemonchiffon; overflow: hidden!important}
.container {width: 20%!important; padding: 0px 0px 0px 5px!important}
.spanner-01 {padding: 3px!important}
/*p#counting {text-align: center!important}*/
#filter {padding-bottom: 15px!important}
.butt-01 {padding: 0!important; border-radius: 5px!important; min-width: 70px!important; line-height: 20px!important; text-align: center!important; font-size: 10px!important}
.filtering {width: 100%!important}
#notice {font-size: 14px!important}
.liner {padding: 0!important}
.spacer-01 {display: none!important}
.spacer-02 {display: block!important}
    
.header-container {padding: 0!important}
    
.logo {margin: 0 auto!important; padding-left: 40px!important}
    
.menuButton {float: right!important; width:25px!important}

.btn.btn-secondary {font-size: 11px!important; padding: 5px 10px!important}
.butt-02 {margin-left: 0px!important; margin-top: 10px!important; font-size: 10px!important; font-weight: 600!important; padding: 5px 20px!important}

.flex-container {width: 90%!important; flex-direction: column!important}

.wrapper {width: 90%!important}
.flex-child-green {width: 270px!important; border: 0px solid green!important; padding: 0!important}
.row-01 {margin: 0 auto!important; width: 90%!important; padding: 0!important}

}

@media only screen and (max-height: 500px) {
    #home{display: none!important}
    }

/* reset padding and margin, set document font */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
 
body{
    width: 100%;
    height: 100%;
    background-color: #333;
}

/* Sets color of link texts to white */
a {
    text-decoration: none;
    color: black;
    font-weight: 700;
}

@media (hover: hover) {
/* Change color of link texts on hover */
a:hover {opacity: 0.7}
    }
    
li {list-style-type: none;}


header {
    width: 100%;
    padding: 0 1%;
    background-color: #fff;
    position: fixed;
    z-index: 99;
}
 
/* Display logo and nav side by side to each other (flex) */
.header-container {
    width: 100%;
    border: 0px solid red;
    /*max-width: 1800px;*/
    margin: 0 auto;
    padding: 0px 20px 0px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px!important;
    /*min-height: 50px;*/
    /*height: 5vh;*/
}
 
/* Set color for Font Awesome icons */
.fas {color: navy}
 
.logo a {font-size: 40px}
 
.menu {display: flex}
 
.menu li {margin-left: 60px}
 
.menu li a { padding: 20px 0}
    
/* Also change color of icon when hover on link */
/*.menu li a:hover - .fas{color: #fb743e}*/
 
/* Hide all sub nav links by default, display children in column when displayed */
.nav-items-1, .nav-items-2, .nav-items-3, .nav-items-4 {
  text-align: center;
  display: none;
  flex-direction: column;
  background-color: white;
}

.menu li a {
    font-size: 13px;
    color: black; 
    text-decoration: none; 
    opacity: 0.7;
    }
    
.nav-items-1, .nav-items-2, .nav-items-3 , .nav-items-4 {
    width: 100%;
    /*max-width: 270px;*/
    position: absolute;
    top: 50px!important;
    padding: 10px 10px;
    text-align: left;
    z-index: 4;
    /*height: 300px;*/ 
    border-style: solid; 
    border-width: 0 thin thin thin; 
    border-color: blue blue blue blue; 
}
.nav-items-1 {
    width: 300px!important;
    max-height: 400px!important;
    overflow-y: auto!important;
    scroll-padding: 50px 0!important;
    padding: 10px 0 20px 0!important
}

#nav ul li ul li a {
    font-size: 12px!important;
}

.nav-items-2 {
    max-width: 180px!important;
    max-height: 270px!important
    /*overflow-y: scroll*/
}
.nav-items-3 {
    max-width: 180px!important;
    max-height: 270px!important
}

.nav-items-1 ul li {margin-left: 20px!important}
    
    
.nav-items-4 {
    max-width: 180px!important;
    max-height: 180px!important
}

.navActive {
  display: flex;
    }
    
@media (hover: hover) {
/* Change color of link texts on hover */
a:hover {opacity: 0.7}
    
.menu li a:hover {
    color: #0182e6; 
    opacity: 0.8}

.nav-1:hover .nav-items-1{
    display: block
    }
    
.nav-2:hover .nav-items-2{
    display: block
    }
    
.nav-3:hover .nav-items-3{
    display: block
    }
    
.nav-4:hover .nav-items-4{
    display: block
    }
}

.menuButton {
  background-color: transparent; /* Blue background */
  border: none; /* Remove borders */
  color: black; /* White text */
  padding: 0px; /* Some padding */
  opacity: 1.0!important;
}

#burger-links {
    display: none;
    background-color: #fff;
    }

.burger-01 {
    background-color: #fff;
    font-size: 14px;
    font-weight: 400;
    color: navy;
    text-decoration: none
    }
    
.burger-02 {
    background-color: #fff;
    font-size: 13px;
    font-weight: 400;
    color: navy;
    text-decoration: none!important;
    margin-left: 50px;
    }
    
.burger-03 {
    background-color: #fff;
    font-size: 13px;
    font-weight: 400;
    color: navy;
    text-decoration: none;
    margin-left: 80px;
    line-height: 24px;
    }
    
.burger-04 {
    background-color: #fff;
    font-size: 12px;
    font-weight: 400;
    color: black;
    text-decoration: none;
    margin-left: 100px
    }
   
button {
  border: none!important;
  box-shadow: none!important;
  background-color: #fff;
  padding: 0;
  font-size: 12px;
  cursor: pointer;
  display: inline-block;
  outline: none!important;
}

.another-button {
    width: 100px;
    height: 30px;
    border: 1px solid grey!important;
    border-radius: 10px;
    box-shadow: none!important;
    background-color: #bbb;
    padding: 0;
    font-size: 12px;
    cursor: pointer;
    display: inline-block;
    outline: none!important;
    color: navy
    }

label {
      display: inline-block;
      margin-bottom: .5rem;
    }

a {
      cursor: pointer;
      color: #f6416c;
      text-decoration: none!important;
    }

p {
      margin-bottom: 30px;
    }

.flex-container {
    margin: 0;
    width: 90%;
    display: flex;
    flex-direction: row;
    border: 0px solid yellow;
    justify-content: left;
    padding: 0;
}

.flex-child-magenta{
    width: 300px;
    justify-content: left;
    padding: 0;
    border: 0px solid magenta;
}  

.flex-child-green {
    width: 300px;
    justify-content: left;
    padding: 0;
    border: 0px solid green
} 
.row-01 {
    padding: 2px 0px; 
    text-align: left
    }

.input-icons i {
    position: absolute;
    }
          
.input-icons {
    width: 100%;
    margin-top: 30px;
    margin-left: 25px
    }
          
.icon {
    padding: 10px;
    color: grey;
    min-width: 50px;
    text-align: center;
    }
          
#addressSearch {
    font-size: 22px!important;
    border-radius: 5px;
    border: 0px solid lightgray;
    width: 270px;
    /*height: 40px;*/
    padding: 0px 20px 0px 20px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    text-align: center!important;
    color: black;
    background-color: white
}

button {border: 0; box-shadow: none}
    
.butt-01 {
    color: #fff;
    background-color: #0182e6; 
    font-size: 16px; 
    border: thin solid grey!important; 
    padding: 3px 20px; 
    border-radius: 10px;
    box-shadow: 5px 10px 8px 10px #888888;
    }
    
.butt-01:hover { opacity: 0.4; background-color: navy; }
    
.butt-02 {
    color: #fff;
    background-color: #0182e6; 
    font-size: 16px;
    border: thin solid grey; 
    padding: 6px 20px; 
    border-radius: 10px;
    text-transform: uppercase;
    transition: 0.3s;
    cursor: pointer;
    box-shadow: 5px 10px 8px 10px #888888;
    margin-top: 0px;
    margin-left: 10px

    }
    
.butt-02:hover { opacity: 0.8 }
    
.newone { 
  display:none;
}

.headline {
    font-size: 28px;
    font-weight: 700;
    color: navy
    }
    
p {
    font-size: 14px;
    text-align: center;
    vertical-align: top;
    opacity: 0.7;
    line-height: 1.1;
    padding: 0px 25px
    }
    
.new-steps {
    width: 80%;
    margin: 0 auto; 
    display: flex; 
    background-color: whitesmoke;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    border: 0px solid grey; 
    padding: 10px; 
    text-align: center;
    }
    
#step-01, #step-02, #step-03, #step-04, #step-05, #step-06, #step-07, #step-08 {
    
    background-color: transparent;
    margin: 10px 0px;
    width: 32%
}
    
.internal {
    width: 100%; 
    margin: 0px; 
    border: 0px solid navy;
}
    
.left  {float: left; padding: 0; }
.right {
    float: right; 
    padding: 10px 0px; 
    border: 0px solid red!important;
    text-align: center;
    max-height: 220px;
    font-size: 15px; 
    font-weight: 700
    }

/* Extra large devices (large laptops and desktops, 1201px and up) */    
@media screen and (min-width: 1351px)  {
.heads {
    font-size: 15px;
    }
}


@media (min-width:1201px) and (max-width:1350px) {
.headline {font-size: 26px}
.heads {
    font-size: 14px;
  }
}

    
/* Large devices (laptops/desktops, 992px to 1200px) LIGHT GREEN*/
@media (min-width: 992px) and (max-width: 1200px) {
.headline {font-size: 25px}
.new-steps {width: 55%!important; background-color: whitesmoke}
.heads {
    font-size: 15px;
  }
p {
    font-size:14px;
    text-align: left;
    padding: 0px 0px;
    }
.steppy img {width: 75%!important; min-width: 105px; height: auto}    
   
.left {width: 25%!important; padding: 0!important}
.right {width: 75% !important; padding: 0!important; text-align: left!important}   

#step-01, #step-02, #step-03 {width: 100% !important}
}

/* Medium devices (landscape tablets, 768px to 991px)  GOLD*/
@media (min-width: 768px) and (max-width: 991px) {
.headline {font-size: 26px}
.new-steps {width: 80%!important; background-color: whitesmoke}
.heads {
    font-size: 14px;
  }
p {
    font-size:13px;
    text-align: left;
    padding: 0px 5px;
    }
.steppy img {width: 70%!important; min-width: 100px; height: auto}
    
.left {width: 25%!important; padding: 0!important}
.right {width: 75% !important; padding: 0!important; text-align: left!important}
    
#step-01, #step-02, #step-03 {width: 100% !important}
}

/* Small devices (portrait tablets and large phones, 601px to 767px) */
@media (min-width:601px) and (max-width:767px) {
.headline {font-size: 24px}
.new-steps {width: 100%!important; background-color: whitesmoke; margin-top: 20px!important}
.heads {
    font-size: 14px;
  }
p {
    font-size:12px;
    text-align: left;
    padding: 0!important;
    }
.steppy img {width: 70%!important; min-width: 85px; height: auto}
    
.left {width: 25%!important; padding: 0!important}
.right {width: 75% !important; padding: 0!important; text-align: left!important}
    
#step-01, #step-02, #step-03 {width: 100% !important}
.setup-button{font-size: 16px; padding: 5px 15px}
}
    
/* Extra small devices (phones, 600px and down) */
@media screen and (max-width: 600px) {
.headline {font-size: 22px}
.new-steps {width: 100%!important; background-color: whitesmoke; margin-top: 20px!important}
.heads {
    font-size: 14px;
    margin-left: 5px;
  }
p {
    font-size:12px;
    text-align: left;
    padding: 0px 5px;
    }
.steppy img {width: 100%!important; height: auto}
    
.left {width: 25%!important; padding: 0!important}
.right {width: 75% !important; padding: 0!important; text-align: left!important}  

#step-01, #step-02, #step-03 {width: 100% !important}
.setup-button{font-size: 1.1em; padding: 15px 25px}
/*.simple-steps{display: none!important}*/
}

#demo{font-size: 16px; font-weight: 700; color: black}
   
ul,
#myUL {
  list-style-type: none;
}

#myUL {
  margin: 0;
  padding: 0;
}

.caret{font-size: 14px!important; margin-top: 3px!important; cursor: pointer!important; color: navy!important}
.caret:hover{opacity: 0.3!important}
/*.fa-solid:hover{opacity: 0.3!important}*/

.city{
    padding: 0!important;
    font-size: 14px!important; 
    font-weight: 700!important; 
    color: black!important; 
    cursor: pointer!important;
    list-style-type: square!important;
    list-style-position: inside!important;
    opacity: 0.7!important;
    display: list-item!important;
    line-height: 2.0!important
    }

.city:hover{opacity: 0.3!important}
    
.city a {
    /*list-style-type: square!important;
    //list-style-position: inside!important;*/
    }
    
.box {
  cursor: pointer;
  -webkit-user-select: none;
  /* Safari 3.1+ */
  -moz-user-select: none;
  /* Firefox 2+ */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
}

.box::before {
  content: "\2610";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

.check-box::before {
  content: "\2611";
  color: dodgerblue;
}

.nested {
    display: none;
    
}

.active {
  display: block;
}

.panel {
    border-radius: 0.3rem;
    padding: 10px;
    text-align: center
    }
.panel-blue {
    background-color: #0087FF;
  }
  
.panel-yellow{
    background-color: yellow;
  }
  
.panel-white{
    background-color: transparent;
  }
  
.panel-purple {
    background-color: purple;
  }

.row-01 {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #fff;
    margin-bottom: 10px
    }

.stay-type {
    background-color: #f1f1f1;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    line-height: 25px;
    font-size: 20px;
    }
    
#stay-type {
    font-weight: 700;
    text-transform: uppercase
    }
#care-type {
    font-weight: 700;
    text-transform: uppercase
    }
.row-100,
.row-101
    {
    display: none;
    text-align: center;
    }

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 18px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

.material-icons:hover {opacity: 0.7}
    
.mi-01 {color: black}


#f_1 {
    display: none;
    font-size: 18px;
    font-weight: 700;
    color: navy;
    line-height: 1.2
    }
    
.trigger_popup_fricc:hover {opacity: 0.5}
    
#demo,
#lead-button{
    display: none;
    }
    
#notice {
    display: none;
    opacity: 1.0;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0px;
    color: firebrick;
    text-transform: uppercase;
    text-align: center
    }
    
.hidden {
     display:none;
}

.stan {color: grey!important; opacity: 1.0!important; font-size: 10px; font-weight: 700!important}
.delu {color: orange!important; opacity: 1.0!important; font-size: 10px; font-weight: 700!important}
.prem {color: indianred!important; opacity: 1.0!important; font-size: 10px; font-weight: 700!important}
.luxy {color: navy!important; opacity: 1.0!important; font-size: 10px; font-weight: 700!important}

/*---- SHOW/HIDE SELECT BOXES IN CARDS -------*/
.container {display: none}
.main {
  margin-top: 235px;
}
.mainExtra {
  margin-top: 330px;
    }

#form1 input[type="submit"] {display: none}

.footer-00 {
   position: fixed;
   left: 0;
   bottom: 0;
   height: 120px;
   width: 100%;
   background-color: rgba(234,236,239,1.0);
   color: navy;
   text-align: center;
   padding: 100px 0px 0px 0px;
   display: none!important
}

.breadcrumb-item a {
    color: black;
    font-size: 11px;
    font-weight: bold;
    opacity: 0.4
}

@media screen and (max-width: 767px) {
    
.breadcrumb {padding: 0; margin: 0!important}
.breadcrumb-item a {font-size: 10px}

}