/* Theme Name: Boat Rental Custom */

@font-face { font-family: Lato;src: url(fonts/lato-regular.ttf); }
@font-face { font-family: Lato Bold;src: url(fonts/lato-bold.ttf); }
@font-face { font-family: Lato Semibold;src: url(fonts/Lato-Semibold.ttf); }
@font-face { font-family: Lato Heavy;src: url(fonts/Lato-Heavy.ttf); }
@font-face { font-family: Montserrat;src: url(fonts/Montserrat-Regular.ttf); }
@font-face { font-family: Merriweather;src: url(fonts/Merriweather-Regular.ttf); }

body { padding:0;margin:0; }
* { font-family:Lato; } 
h1 { font-size:45px; }
h2 { font-size:35px; }
h3 { font-size:25px; }
p { font:21px Lato;line-height:1.5em }

a { text-decoration:none; }
a.btn-blue { background:#4fafed;color:white;font:18px Lato Bold;padding:20px 30px;box-sizing:border-box;display: inline-block; }
a.btn-blue.availability { background:#4fafed;border-radius:5px; }
a.btn-orange,.btn-orange { background:#ff6000;border-radius:5px;color:white;font:28px Lato Bold;padding:10px 20px;box-sizing:border-box;display: inline-block;cursor:pointer; }
ul { padding:0;margin:5px 0;list-style-type:none; }

.flex { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between }
.wrap { max-width:1200px;width:100%;margin:0 auto; }
figure.aligncenter img { display:block;margin:0 auto;width:100%;height: auto; }
figure.alignleft { display:inline-block;float:left; }
figure.alignright { display:inline-block;float:right; }
.has-text-align-center { text-align:center; }

header { padding:10px 0;position: sticky;top: 0;background: white;z-index: 99999; }
header img { width:120px;box-sizing:border-box }
header .flex>a:last-child { max-width:280px; }

nav { width:calc(100% - 120px - 300px); }
nav ul { list-style-type:none;justify-content:space-evenly !important;box-sizing:border-box }
nav>ul>li { position:relative }
nav ul li a { font:24px Lato Semibold;color:black;padding:0 0 20px 0 }
nav>ul>li:hover>a { border-bottom:3px solid #ff6000; }
nav i.fas.fa-bars,.nav-mobile,.mobile { display:none; }
nav>ul>li>ul { position: absolute;background: white; padding:0px 20px; top: 46px;display:none;left:0;width:300px; }
nav>ul>li.active>ul.submenu { display:inline-block; }
nav>ul>li>ul>li { margin:15px 0; }
nav>ul>li>ul>li:hover a { color:#ff6000; }

.hero-banner { padding:250px 0;text-align:center; }
.hero-banner h1 { color:white!important;font-family:Lato Heavy; margin-top: -100px}
.hero-banner h3 { color:#4fafed;font-family:Montserrat;font-style:italic }
.hero-banner .button-box { justify-content: center;align-items:stretch;max-width:552px;width:100%;margin:0 auto;position:relative;cursor:pointer; }
.hero-banner .button-box span,.hero-banner .button-box i { background:#ff6000;padding:10px 20px;border:1px solid white;color:white; }
.hero-banner .button-box span { font:18px Montserrat }
.hero-banner .button-box i { display:flex;align-items:center; } 
.hero-banner .button-box span br { display:none; }
.hero-banner .button-box ul{ width:100%;padding:20px 0;box-sizing:border-box;background:#ff6000;position: absolute;top: 40px;border: 1px solid white;display:none; }
.hero-banner .button-box.active ul { display:block }
.hero-banner .button-box li{ margin:10px 0; }
.hero-banner .button-box li:after{ content: "";margin: 10px auto;border-bottom: 1px solid white;width: 50%;display: block; }
.hero-banner .button-box li:last-child:after{ border-bottom: 0 }
.hero-banner .button-box li:hover a{ text-decoration:underlineq; }
.hero-banner .button-box li a{ color:white;font: 20px Montserrat;font-weight: bold; }

.featured-image { padding:80px 0; }

section.about .flex{ padding:40px 0;align-items:flex-start }
section.about .flex div{ width:50%; }
section.about img{ width:43%; }
section.about h2 { font-family:Lato Bold;color:#444343;margin-top:0; }
section.about h3 { font-family:Lato;line-height:1.5em;padding-left:0px!important;color:#666975; }
section.about h2 span,section.about h3 span{ color:#1289d5; }
section.about a.btn-blue { margin-top:60px; }

section.paradiso { background:#ededed }
section.paradiso .flex{ justify-content:flex-start;align-items:flex-start }
section.paradiso.reverse { margin-top:40px; }
section.paradiso.reverse .flex{ justify-content:flex-end;align-items:flex-start }
section.paradiso .flex div { width:600px;padding:20px 0 20px 40px;box-sizing:border-box;text-align:center; }
section.paradiso.reverse .flex div { padding:10px; }
section.paradiso .flex img { width:50%; }
section.paradiso ul li { color:#31343e;font:20px Merriweather;line-height:30px;margin: 20px;display:flex;text-align:left; }
section.paradiso ul li:before { content: "\2022";color:#4fafed;margin-right:13px;font-weight: 900;font-size:50px; }
section.paradiso a.btn-orange { margin:10px auto;font:18px Lato Bold;border-radius:5px; }
section.paradiso h2 { color:#434344; }

section.packages { margin-top:40px;background:#ededed;text-align:center;padding-bottom:50px; }
section.packages h2 { color:#434344;padding:50px; }
section.packages h2 span{ color:#4fafed; }
section.packages>.wrap>#packages>.flex{ background:white;margin:20px 0; }
section.packages>.wrap>#packages>.flex>img{ width:282px;height:295px;object-fit:cover }
section.packages>.wrap>#packages>.flex>div { width:calc(100% -  282px);display:flex;align-items:center; }
section.packages>.wrap>#packages>.flex>div>div:last-child { font-size:15px;width:250px; }
section.packages>.wrap>#packages>.flex>div>div:last-child a.btn-orange{ font-size:15px; }
section.packages>.wrap>#packages>.flex>div>div:last-child span{ font:14px Lato;color:#7e7e7e; }
section.packages>.wrap>#packages>.flex>div>div:first-child { width:calc(100% - 250px);padding:20px 40px;box-sizing:border-box }
section.packages>.wrap>#packages>.flex>div>div:first-child>.flex { align-items:flex-start; }
section.packages h3 { color:#4fafed;font:25px Lato Semibold;margin-top:0; }
section.packages h4 { color:#31343e;font:20px Merriweather;margin:5px auto 10px auto;width: 450px;  }
section.packages h5{ color:#4fafed;font:25px Lato Heavy;text-decoration:underline;margin:20px 0 }
section.packages b { color:#31343e;font:20px Merriweather;font-weight:bold;margin-top:5px; }
section.packages ul{ width:50%;margin-top:10px;display:block; }
section.packages ul li { text-align:left;display:flex;align-items:flex-start;font:16px Merriweather;line-height:24px; }
section.packages ul li:before { content: "\2022";color:#4fafed;margin-right:10px;font-weight: 900;font-size:35px; }

section.portfolio { padding:50px 0;text-align:center; }
section.portfolio h2 { color:#434344;padding:50px;padding:0;margin:10px }
section.portfolio h2 span{ color:#ff6000; }
section.portfolio h3 { color:#434344;font:24px Merriweather;width:70%;margin:0 auto;line-height:34px; }

section.form { color:white;padding:40px 0;text-align:center; }
section.form h2{ font-size:48px; }
section.form div.flex{ width:100%;max-width:800px;margin:20px auto;box-sizing:border-box }
section.form div.nnflex{ width:100%;max-width:100%!important;margin:20px auto;box-sizing:border-box}
section.form div.flex>*{ width:auto;align-items:center; }
section.form div.flex>div.flex>i{ width:50px;font-size:40px;color:#fa6837; }
section.form div.flex>div.flex>span,section.form div.flex>div.flex>a{ width:calc(100% - 50px);font-size:24px;text-align:left;color:white; }
section.form form { justify-content:space-between;box-sizing:border-box }
section.form form input{ padding:15px;font-size:18px;margin:9px 0;width:48%;box-sizing:border-box }
section.form form textarea{ padding:15px;font-size:18px;margin:9px 0;width:100%;box-sizing:border-box }
section.form form p{ width:100%;text-align:center;box-sizing:border-box }
section.form p a{ color: #007bff;text-decoration: underline; }

section.content h1 { font-weight: 500;font-family:Lato Heavy; color: #000; font-size:48px;text-align:center; }
section.content .wp-block-columns { display:flex;align-items:flex-start;justify-content:center }
section.content .wp-block-columns>.wp-block-column { width:50%;box-sizing:border-box;padding:10px; }

.faq { padding:40px 0; }
.faq .faqs { position:relative;margin-bottom:20px; }
.faq .faqs .question { cursor:pointer; }
.faq .faqs .answer { padding:20px;margin:10px 0 0 0;display:none; }
.faq h4 { background: #ebebeb;padding:20px;box-sizing:border-box;font:24px Lato Heavy;margin:0; }
.faq i { position:absolute;right:20px;color:#495da3 }
.faq p,.faq li { font:16px Lato;line-height:24px; }

#home-slider { width:100%;display:block; }
#home-slider li { max-height:300px; }
#home-slider li img{ max-height:300px; }
.home-slider { width:100%;padding:150px 0;margin-top:100px; }
.home-slider .slick-list.draggable{ padding:0 !important; }
.home-slider .slick-prev { left: 5% !important;z-index: 100 !important; }
.home-slider .slick-next { right: 5% !important;z-index: 100 !important; }

footer { background:#4fafed;padding:30px 0;color:white;font:14px Lato Bold }
footer>.flex>*{ width:30%; }
footer a { color:white; }
footer ul li { margin:0 10px; }
footer ul.social { justify-content:center }
footer ul.social li { margin:0 10px; }
footer ul.social li a { height:30px;width:30px;background:white;border-radius:50%;display:flex;align-items:center;justify-content:center; }
footer ul.social li a i{ color:#333333 }
.external { background:black;width:100%;padding:5px 0; }
.external ul { display:block; }

.palapa.hero-banner { background:url(/wp-content/themes/boatrentals/images/palapa/banner-hero.jpg) no-repeat center;background-size:cover }
.left p {text-align:left!important;}
.right p {text-align:right!important;}
.center p {text-align:center!important;}
.center {text-align:center!important;}
div.nnpackages h5 { color:#4fafed;font:25px Lato Heavy;text-decoration:underline;margin:20px 0 }
h1.nn-h1{color: #fefefe!important;}

/*Mobile Version*/


/*IphoneX*/

@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) { section.form div.flex>div.flex>i{ width:50px;font-size:32px!important;color:#fa6837; }
section.form div.flex>div.flex>span,section.form div.flex>div.flex>a{ width:calc(100%);font-size:17px!important;text-align:left;color:white; }
section.form div.flex{ max-width:100%!important; }

}

/*End IphoneX*/

/*--Nina added*/
@media (max-width:1200px){

section.paradiso .flex div { width:600px;padding:10px;box-sizing:border-box;text-align:center; }}
@media (max-width: 600px){
h2 {font-size: 25px}
.hero-banner h1 {font-size: 30px!important;margin-top: -30px!important;}
.left p {text-align:left!important;}
.right p {text-align:right!important;}
.center p {text-align:center!important;}
div .btn-blue a {text-align: center;}
#nnbtn .btn-blue a{text-align: center;}
section.portfolio h2 { margin: -35px 10px 10px 10px;}
section.packages>.wrap>#packages>.flex>div>div:first-child {padding: 13px!important}
section.packages h4 {margin: .8em 0 .8em 0!important;}
section.paradiso ul li {font: 17px Merriweather;}
section.paradiso ul li:before {margin-top: -20px;}
section.form div.flex{ max-width:100%!important; }
}
/*--End Nina added*/


@media (max-width:1200px){
	nav ul li a { font-size: 17px }
	.wrap { width:95%;margin:0 auto; }
	.home-slider { width:100%;padding:200px 0;margin-top:100px;background-size:90% }
	.home-slider { margin-top:0px; }
	#home-slider li { max-height:250px; }
	#home-slider li img{ max-height:250px; }
	section.paradiso .flex img { width:100%;;object-fit:cover }
	section.paradiso .flex div { width:50%; }
	section.packages>.wrap>.flex>img { height: 377px; }
	section.packages ul { width: 100%; margin:0 }
	section.packages h4 { width:100%; }
}
@media (max-width:1024px){
	header>.flex>* { width:33%; }
	header .flex>a:last-child { text-align:center; }
	nav { order:2;position:relative;width:auto;text-align:right }
	nav i.fas.fa-bars { display:inline-block;order:2 }
	nav ul { display:none !important; }
	.nav-mobile.active { display:block; }
	.nav-mobile { width:100%;background:white;position:absolute;top:78px;background:white; }
	.nav-mobile li{ width:100%;margin:10px; }
	.nav-mobile li a{ color:black }
	section.about .flex>*,section.paradiso .flex>* { width:100% !important; }
	section.about img { margin:20px auto;max-width:400px; }
	section.packages>.wrap>.flex>*{ width:100% !important; }
	section.packages>.wrap>#packages>.flex>div { flex-wrap:wrap; }
	section.packages>.wrap>#packages>.flex>div>* { width:100% !important; }
}
@media (max-width:930px){
	footer .flex ul:last-child { display:none; }
	footer>.flex>*{ width:auto; }
}
@media (max-width:768px) {	
	nav { width:15px !important; }
	.desktop { display:none; }
	.mobile { display:block; }
	section.packages { margin:0; background:white;padding-bottom:20px }
	section.packages h2.mobile { font:35px Lato Heavy;color:#012b71;margin-top:0;text-align:center;padding:20px 10px; }
	section.packages h2 { padding:10px!important; }
	section.packages #packages { display:flex;flex-wrap:wrap;justify-content:space-between }
	section.packages #packages h3{ margin:0 !important;color:#012b71;font:18px Lato Semibold }
	section.packages #packages>.flex{ width:48%;background:#ededed !important;padding-bottom:20px;align-items:flex-start }
	section.packages #packages>.flex>*{ width:100% !important; }
	section.packages #packages>.flex>div>*{ width:100% !important;padding:10px 0 !important; }
	section.packages>.wrap>#packages>.flex>div>div:last-child a.btn-orange { font:16px Lato Bold !important;background:#ff6000 !important; }
	.home-slider { background-size:cover !important;margin-top:50px; }
	section.portfolio h3 { width:90%; margin-top: 33px;}
	section.packages>.wrap>#packages>.flex>img { height:250px !important }
	header img { width: 80px; }
	header .flex>a:last-child { font-size:20px;max-width:calc(100% - 95px) !important;width:auto; }
	section.packages ul,section.content h1 { padding:20px; font-size: 35px; padding: 0px }
	.faq h4 { padding-right:40px;font-size:18px; }
	.faq p,.faq li { font-size:14px; }
	.palapa.paradiso .flex img{ width:100%;height:auto; }
}
@media (max-width:600px) {
.hero-banner .button-box span br { display:block; }
section.form form input { width:100% }
section.form div.flex>div.flex>i{ width:50px;font-size:40px!important;color:#fa6837; }
section.form div.flex>div.flex>span,section.form div.flex>div.flex>a{ width:calc(100%);font-size:24px!important;text-align:left;color:white; }
section.form div.nnflex{ max-width:100%!important; }
section.form {padding: 0px!important;}
}


@media (max-width:400px) {
	.hero-banner { padding:50px 0; }
	section.packages #packages>.flex{ width:100%; }
}

@media (max-width:375px) {
	section.packages h2.mobile { font: 30px Lato Heavy;margin:0; }
	section.packages>.wrap>#packages>.flex { margin:10px 0; }
	
	section.portfolio { padding:30px 0 0 0; }
	section.about .flex	{ padding:0 10px; }
	.home-slider { margin-top:10px;padding:0; }
	footer { padding:10px 0; }
	.external a { font-size:14px; }
	section.content h1  { margin-bottom:10px; }
	section.about h2 { font-size:21px }
	section.paradiso { margin-top:15px; }
	section.about a.btn-blue { margin-top:0 }
	section.paradiso ul li { margin:5px; }
	section.paradiso ul li:before { height:50px; }
	section.form div.flex>div.flex>span { width:calc(100% - 60px); }
}