@import"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap";
body,
html {
font-size: 1vw;
font-weight: 300;
line-height: 1.8;
overflow-x: hidden;
text-rendering: optimizeLegibility;
color: #111;
font-family: "Lato", sans-serif;
background-color: #fff
}
img {
max-width: 100%;
height: auto
}
a {
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
color: #0d63ae
}
a:hover {
text-decoration: underline;
color: #1D6321
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.4;
font-weight: 300;
font-family: "Lato", sans-serif
}
h1 strong,
h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong {
font-weight: bold
}
section {
padding: 3rem 0rem
}
.white-bg {
background-color: #fff
}
.offwhite-bg {
background-color: #f2f2f2
}
.primary-bg {
background-color: #1D6321
}
.secondary-bg {
background-color: #0d63ae
}
b,
strong {
font-weight: bold
}
.modal-backdrop.fade {
opacity: .5
}
.primary {
color: #1D6321
}
.secondary {
color: #0d63ae
}
.gray {
color: #aaa9a9
}
h1.big-title {
font-weight: 900;
font-size: 3rem;
text-transform: uppercase;
letter-spacing: 2px
}
h3.big-title {
font-weight: 900;
font-size: 1.75rem;
text-transform: uppercase;
letter-spacing: 2px
}
p {
font-size: 1.15rem
}
.container {
max-width: 1299px
}
.btn {
font-size: 1rem;
padding: .25rem 1rem;
border-radius: .25rem;
font-weight: 300;
letter-spacing: 3px;
text-transform: lowercase
}
.btn-primary {
background-color: #1D6321;
border-color: #1D6321;
color: #111
}
.btn-primary:hover {
background-color: #fff;
border-color: #fff;
color: #111
}
.btn-default {
color: #fff;
background-color: #0d63ae;
border-color: #0d63ae
}
.btn-default:hover {
color: #fff;
background-color: #0d63ae;
border-color: #0d63ae
}
.btn-outline-light {
border-width: 1px;
font-weight: 300
}
.btn-outline-light:hover {
color: #111;
background-color: #fff;
border-color: #fff
}
.btn-outline-primary {
border-width: 1px;
font-weight: 300;
border-color: #1D6321;
color: #1D6321
}
.btn-outline-primary:hover {
color: #111;
background-color: #1D6321;
border-color: #1D6321
}
.btn-outline-dark {
border-width: 1px;
font-weight: 300;
border-color: #aaa9a9;
color: #aaa9a9
}
.btn-outline-dark:hover {
color: #fff;
background-color: #aaa9a9;
border-color: #aaa9a9
}
.btn-outline-black {
border-width: 1px;
font-weight: 300;
border-color: #111;
color: #111
}
.btn-outline-black:hover {
color: #fff;
background-color: #111;
border-color: #111
}
.top-nav {
padding: .75rem 1rem;
background-color: #0d63ae;
text-align: center
}
.top-nav .btn {
font-size: .75rem;
letter-spacing: 2px;
line-height: 1.4;
margin: 0 .25rem
}
.navbar {
background-color: #fff;
border-bottom: 1px solid #e1e1e1;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
position: absolute;
width: 100%;
z-index: 20;
padding: 0
}
.navbar .navbar-brand {
margin-right: 0;
padding: 0 1rem;
position: relative
}
.navbar .navbar-brand img {
max-height: 3.5rem;
width: auto;
height: auto;
} .chad-bio img {
height: auto;
} .booking-form .desktopshow {
min-height: 94px;
}
@media (max-width: 991px) {
.booking-form .desktopshow {
min-height: 167px;
}
}
@media (max-width: 767px) {
.booking-form .desktopshow {
min-height: 362px;
}
} .main-bg .video-frame video {
object-fit: cover;
} @media (max-width: 767px) {
body.home .main-bg .video-frame video#bgvid {
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
}
.navbar .navbar-wrap {
padding: 1rem;
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center
}
.navbar .navbar-wrap ul.nav .nav-item {
display: flex;
flex-direction: column;
justify-content: center
}
.navbar .navbar-wrap ul.nav .nav-item .nav-link {
padding-left: 1rem;
padding-right: 1rem;
font-weight: 700;
font-size: .8rem;
letter-spacing: 1px;
text-transform: uppercase;
color: #111
}
.navbar .navbar-wrap ul.nav .nav-item .nav-link:hover {
color: #1D6321
}
.navbar .navbar-wrap ul.nav .active .nav-link {
color: #1D6321
}
.navbar .toggle-menu {
display: none
}
.cbp-spmenu-left {
z-index: 1500;
background-color: #fff;
border-right: 2px solid #1D6321
}
.cbp-spmenu-left .navbar-brand {
margin-right: 0;
border-color: #e1e1e1
}
.cbp-spmenu-left ul {
padding-left: 0;
margin-bottom: 0;
list-style: none
}
.cbp-spmenu-left ul li a {
border-color: #e1e1e1;
font-weight: 300;
font-size: .85rem;
text-transform: uppercase;
letter-spacing: 2px;
color: #0d63ae
}
.main-bg {
padding: 33.25% 0 0 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center 20%;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
background-color: transparent;
overflow: hidden
}
.main-bg .video-frame {
padding: 56.25% 0 0 0;
position: absolute;
width: 100%;
z-index: 0;
top: -6rem;
left: 0
}
.main-bg .video-frame video {
position: absolute;
top: 0;
left: 0;
width: 100%
}
.main-bg .content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #0d63ae;
background: linear-gradient(145deg, rgba(13, 99, 174, 0.35) 40%, rgba(46, 163, 54, 0.35) 100%)
}
.main-bg .content h1 {
font-weight: 900;
color: #fff;
text-transform: uppercase;
font-family: "Lato", sans-serif;
font-size: 3.5rem;
}
.main-bg .content h3 {
font-weight: 300;
text-transform: uppercase;
letter-spacing: .5rem;
margin-bottom: 1.15rem;
font-size: 1.5rem;
color: #fff;
}
.main-bg .content p {
color: #fff;
letter-spacing: 1px;
}
.main-bg .content .btn {
padding: .75rem 1.5rem
}
.main-bg .content .arrow-down {
position: absolute;
left: 0;
right: 0;
bottom: 2rem;
color: #fff;
font-size: 2rem
}
.welcome {
text-align: center
}
.welcome .affiliate-logos {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
margin-bottom: 3rem
}
.welcome .affiliate-logos .logo {
padding: 1rem
}
.welcome h1 {
text-align: center;
font-size: 4rem;
font-weight: 900;
text-transform: uppercase;
color: #0d63ae;
margin-bottom: 2rem
}
.welcome h1 span {
display: block;
font-size: 1.25rem;
font-weight: 400;
letter-spacing: .5rem;
text-transform: uppercase;
color: #1D6321
}
.ocean-bg {
padding: 4rem 0rem;
position: relative
}
.ocean-bg .overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(0, 147, 221, .45)
}
.ocean-bg .icons-wrap {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
position: relative;
z-index: 5;
padding: 3rem 0
}
.ocean-bg .icons-wrap .icon-large {
max-width: 25%;
flex: 0 0 25%;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
align-items: center;
color: #fff;
font-size: 3rem
}
.ocean-bg .icons-wrap .icon-large h3 {
margin-top: 1rem;
font-size: 1rem;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 2px
}
.ocean-bg .icons-wrap .icon-large a {
color: #fff
}
.ocean-bg .icons-wrap .icon-large a:hover {
text-shadow: 0 0 5px #fff
}
.alt-image img {
max-width: 75%
}
.alt-content {
display: flex;
flex-direction: column;
justify-content: center
}
.alt-content .btn {
font-size: 1.25rem;
padding: .75rem 2rem
}
.content-padding {
padding-top: 8rem
}
.filters {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between
}
.filters ul.nav-pills {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin-left: 2rem
}
.filters .btn {
padding: .375rem .75rem
}
.filters .nav-link {
height: calc(1.5em + .75rem + 2px);
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0;
border: 1px solid #0d63ae
}
.filters .nav-link.active {
border-right: none;
border-color: #0d63ae;
background-color: #0d63ae
}
.properties .grid-view.active {
margin-top: 2rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
grid-column-gap: 1rem;
grid-row-gap: 1rem
}
.properties .grid-view.active .property {
display: flex;
flex-direction: column;
border: 1px solid #e1e1e1
}
.properties .grid-view.active .property .image {
background-size: cover;
background-position: center;
height: 14rem
}
.properties .grid-view.active .property .info {
display: flex;
flex-direction: column;
justify-content: center;
padding: 1rem
}
.properties .grid-view.active .property .info h4 {
font-size: 1.25rem;
color: #0d63ae
}
.properties .grid-view.active .property .info .btn-link {
border: 1px solid #e1e1e1;
color: #1D6321
}
.properties .grid-view.active .property .info ul {
list-style: none;
margin: 0;
padding: 0
}
.properties .grid-view.active .property .info ul li {
display: inline-block;
padding-right: 1.5rem
}
.properties .list-view.active {
margin-top: 2rem
}
.properties .list-view.active .property {
margin-bottom: 2rem;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
border: 1px solid #e1e1e1
}
.properties .list-view.active .property .image {
background-size: cover;
background-position: center;
height: 14rem;
flex: 0 0 25%;
max-width: 25%
}
.properties .list-view.active .property .info {
flex: 0 0 75%;
max-width: 75%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 2rem
}
.properties .list-view.active .property .info .btn-link {
border: 1px solid #e1e1e1;
color: #1D6321
}
.properties .list-view.active .property .info ul {
list-style: none;
margin: 0;
padding: 0
}
.properties .list-view.active .property .info ul li {
display: inline-block;
padding-right: 1.5rem
}
.listing-content .image-gallery .slick-next {
right: -0.75rem
}
.listing-content .image-gallery .slick-prev {
left: -0.75rem
}
.listing-content .image-gallery .slick-prev,
.listing-content .image-gallery .slick-next {
width: 1.75rem;
height: 1.75rem;
z-index: 20;
transform: none;
top: calc(50% - 1rem)
}
.listing-content .image-gallery .slick-prev:before,
.listing-content .image-gallery .slick-next:before {
color: #111;
font-size: 1.5rem;
opacity: 1
}
.listing-content .image-gallery .slider-nav .slick-active.slick-slide.slick-current {
opacity: 1
}
.listing-content .image-gallery .slider-nav .slick-active.slick-slide {
opacity: .5
}
.listing-content iframe {
display: block;
max-width: 100%
}
.listing-content svg {
color: #555
}
.listing-content .video-frame {
position: relative;
width: 100%;
max-width: 100%;
padding-bottom: 56.25%
}
.listing-content .video-frame iframe {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0
}
.listing-content .content h3 {
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 1.5rem
}
.listing-content .heading {
font-size: 3rem;
text-align: left
}
.listing-content .alternating-content .heading {
text-align: center
}
.listing-content .rental-info .content {
border-right: 3px solid #fff
}
.listing-content .property-features {
border-top: 3px solid #fff
}
.listing-content .property-features .content {
border-right: 3px solid #fff
}
table.table tbody tr:first-child td,
table.table tbody tr:first-child th {
border-top: none
}
table.table tbody tr td,
table.table tbody tr th {
vertical-align: middle
}
table.table tbody tr th {
font-weight: 400
}
.videos .video-wrap {
position: relative
}
.videos .video-wrap a {
display: block;
position: relative;
z-index: 5
}
.videos .video-wrap a .play-icon {
position: absolute;
background-color: rgba(0, 0, 0, .25);
z-index: 2;
color: #fff;
width: 100%;
height: 100%;
left: 0;
top: 0;
font-size: 4rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center
}
.property-features svg {
color: #1D6321
}
footer {
padding: 4rem 2rem 2rem 2rem;
border-top: 1px solid #e1e1e1
}
footer h4 {
color: #0d63ae;
margin-bottom: 1.5rem
}
footer .links .link-wrap {
display: flex;
flex-direction: row;
flex-wrap: nowrap
}
footer .links .footerlinks {
margin-bottom: 0;
padding-left: 0;
list-style: none;
flex: 0 0 50%;
max-width: 50%
}
footer .links .footerlinks .nav-item {
display: block
}
footer .links .footerlinks .nav-item .nav-link {
font-family: "Lato", sans-serif;
font-weight: 300;
font-size: .85rem;
padding: .25rem 0;
color: #111
}
footer .links .footerlinks .nav-item .nav-link:hover {
color: #1D6321
}
footer .about p {
font-family: "Lato", sans-serif;
font-weight: 300;
font-size: .85rem
}
footer .about .social {
list-style: none;
padding: 0;
margin: 0;
margin-top: 1rem;
display: flex;
flex-direction: row;
align-items: center
}
footer .about .social li a {
display: flex;
flex-direction: column;
justify-content: center;
color: #aaa9a9;
font-size: 1.75rem;
padding: 0 .75rem 0 0
}
footer .about .social li a:hover {
color: #0d63ae
}
footer .contact p {
font-family: "Lato", sans-serif;
font-weight: 300;
font-size: .85rem
}
footer .contact a {
color: #1D6321
}
footer .newsletter p {
font-family: "Lato", sans-serif;
font-weight: 300;
font-size: .85rem
}
.south-padre-management {
text-align: center;
}
footer .management {
text-align: center;
margin-top: 4rem;
border-top: 1px solid #e1e1e1;
padding-top: 2rem
}
footer .management p,
.south-padre-management p {
font-family: "Lato", sans-serif;
font-weight: 300;
font-size: .75rem
}
footer .management h6,
.south-padre-management h6 {
color: #111;
font-size: .85rem;
text-transform: uppercase;
letter-spacing: 2px
}
.copyright {
font-size: 10px;
color: #111;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #e1e1e1
}
.copyright a {
font-size: 10px;
color: #111
}
@media screen and (min-width: 1440px) {
.container {
max-width: 75vw
}
}
@media screen and (max-width: 1024px) {
.alt-image {
text-align: center
}
.alt-image img {
display: block;
margin: 0 auto;
max-width: 80%
}
body,
html {
font-size: 14px
}
.navbar .navbar-wrap ul.nav .nav-item .nav-link {
padding-left: .5rem;
padding-right: .5rem;
font-weight: 700;
font-size: 10px
}
.main-bg {
padding: 40.25% 0 0 0
}
.main-bg .content h1 {
font-size: 2.5rem
}
.main-bg .content h3 {
font-size: 1.25rem
}
.main-bg .content .arrow-down {
bottom: 1rem
}
}
@media screen and (max-width: 1023px) {
.navbar {
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between
}
.navbar .toggle-menu {
display: block;
color: #1D6321;
padding-right: 1rem;
background-color: transparent;
border: none;
font-size: 1.8rem
}
.navbar .navbar-wrap {
position: relative;
padding: .25rem 1rem;
justify-content: flex-start
}
.navbar .navbar-wrap .nav {
display: none
}
.navbar .navbar-brand {
padding-top: .5rem;
padding-bottom: .5rem;
padding-left: .5rem
}
.navbar .navbar-brand img {
max-height: 3rem
}
footer .newsletter,
footer .contact {
margin-top: 2rem
}
.properties .grid-view.active {
grid-template-columns: repeat(2, 1fr)
}
.content-padding {
padding-top: 7rem
}
.image-gallery {
margin-bottom: 2rem
}
.videos .col-lg-4 {
margin-bottom: 2rem
}
}
@media screen and (max-width: 768px) {
section {
padding: 2rem 1rem
}
.btn {
white-space: nowrap
}
.main-bg {
padding: 50.25% 0 0 0
}
.main-bg .video-frame {
padding: 75.25% 0 0 0;
width: 135%
}
h2 {
font-size: 1.8rem
}
}
@media screen and (max-width: 767px) {
.cbp-spmenu-left .navbar-brand img {
max-width: 8rem;
margin: 0 auto;
display: block
}
.main-bg {
height: 95vh;
min-height: 35rem;
padding: 1rem
}
.main-bg .content {
padding: 1rem
}
.main-bg .content h1 {
font-size: 2rem
}
.main-bg .content h3 {
font-size: 1rem;
letter-spacing: 5px;
line-height: 1.8
}
.main-bg .video-frame {
display: none
}
.listing-content table.table tbody tr {
display: flex;
flex-direction: row;
flex-wrap: wrap
}
.listing-content table.table tbody tr th,
.listing-content table.table tbody tr td {
display: flex;
flex-direction: row;
align-items: center;
flex: 0 0 50%;
max-width: 50%
}
.welcome h1 {
font-size: 3rem
}
.welcome .affiliate-logos {
flex-wrap: wrap
}
.welcome .affiliate-logos .logo {
flex: 0 0 33.333%
}
.ocean-bg .icons-wrap {
flex-wrap: wrap
}
.ocean-bg .icons-wrap .icon-large {
margin: 1.5rem 0;
max-width: 50%;
flex: 0 0 50%
}
.ocean-bg .icons-wrap .icon-large h3 {
font-size: .85rem
}
.alt-image {
margin-bottom: 2rem
}
.alt-image img {
max-width: 60%
}
.alt-content {
text-align: center
}
footer .links,
footer .about,
footer .contact,
footer .newsletter {
margin-bottom: 2rem;
margin-top: 0
}
.properties .grid-view.active {
grid-template-columns: repeat(1, 1fr)
}
.filters {
flex-direction: column
}
.filters ul.nav-pills {
margin-left: 0;
margin-top: 1rem
}
.filters ul.nav-pills li.nav-item {
flex: 0 0 50%;
text-align: center
}
.filters ul.nav-pills li.nav-item a {
font-size: 1.25rem
}
.properties .list-view.active .property .image {
height: 12rem;
flex: 0 0 30%;
max-width: 30%
}
.properties .list-view.active .property .info {
padding: 1rem;
flex: 0 0 70%;
max-width: 70%
}
.properties .list-view.active .property .info h4 {
font-size: 1rem;
margin-bottom: 0
}
.properties .list-view.active .property .info .table tbody tr td {
font-size: .85rem
}
.properties .list-view.active .property .info .btn {
width: 100%
}
}
.welcome2 .welrevmain {
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
display: -moz-box;
align-items: center;
justify-content: space-around;
}
ul.dropdown-menu #menu-item-97 {
display: none !important;
}
@media screen and (max-width:479px) {
.phone_social {
display: none !important;
}
.header_social .fab {
font-size: 22px;
}
}
.DateInput_input {
font-weight: 400 !important;
}