@charset "utf-8";

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #3d3d3d;
	font-weight: 400;
	line-height: 1.6;
	margin: auto;
	text-size-adjust: 100%;
}

* { box-sizing: border-box; }

h1 {
	margin: 8px 0;
	font-size: 36px;
	font-weight: bold;
	line-height: 1.4;
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
}
h2 {
	font-weight: bold;
	color: #ff8800;
	font-size: 22px;
	line-height: 1.3;
	margin: 15px 0 0 0;
}
h3 {
	margin: 0 20px 0 130px;
	line-height: 1.2;
	font-size: 16px;
	font-weight: bold;
}
h4 {
	margin: 0 20px 0 130px;
	line-height: 1.3;
	font-size: 18px;
	color: #ff8800;
}
h5 {
	position: absolute;
	right: 10px;
	bottom: 10px;
	color: #ffffff;
	font-weight: bold;
	font-size: 11px;
	line-height: 1.3;
	padding: 3px 7px;
	margin: 0;
}

a { color: #ff8800; }

a:hover { color: #d800d8; }

span {
	float: left;
	font-size: 150px;
	font-weight: 500;
	padding-top: 8px;
	padding-right: 15px;
	line-height: 80%;
	font-family: Arial, Helvetica, sans-serif;
	color: #ff9933;
}
 
/* HEADER */
.header {
	background-position: center top;
	position: relative;
}

.header img { 
	border-bottom: none;
	vertical-align: middle;
}

/* HERO-Block */
.hero {
	position: absolute;
	padding: 15px 0 15px 20px;
	top: 40%;
	left: 10%;
	border: 2px solid #fff;
	width: 500px;
}

.hero p {
	color: #fff;
	font-size: 22px;
	margin-top: 10px;
	font-weight: 600;
	font-family: Arial, Helvetica, sans-serif;
}	

/* HERO-Trip */
.hero-trip {
	position: absolute;
	padding: 15px 0;
	bottom: 5%;
	left: 10%;
}
.hero-trip h1 {
	color: #fff;
}
.hero-trip p {
	color: #fff;
	font-size: 26px;
	line-height: 1.4;
	font-weight: 600;
	margin-top: 0;
}	
h2 trip a {
	text-decoration: underline;
}

/* NAVIGATION-Top */
.navtop {
	position: absolute;
	top: 0;
	left: 1px;
	width: 100%;
	 }
.navtop ul {
	list-style-type: none;
	background: rgba(255,153,51,.5);
	margin: 0;
	padding: 0;
	width: 100%;
	overflow: hidden;
	top: -3px;
	left: 20px;
}
.navtop li { 
	float: left;
	font-size: 18px;
	font-weight: bold;
}
.navtop li a {
    display: block;
	color: white;
	text-align: center;
	padding: 5px 16px;
    text-decoration: none; 
}	
.navtop .active { 
	background: #ff9933;
}
.navtop li a:hover:not(.active) {
    background: #d800d8; 
}

/* NAVIGATION-Dropdown */
.dropbtn {
  background: #d800d8;
  color: white;
  padding: 5px 16px;
  font-size: 18px;
  font-weight: bold;
  line-height: 24px;
  border: none;
  cursor: pointer;
}

/* Container Position Dropdown Content */
.dropdown {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}
.dropdown .active { background-color: #ff9933; }

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  font-weight: bold;
  background-color: rgba(255,153,51,.4);
  width: 120px;
  z-index: 2;
}

/* Links Inside Dropdown */
.dropdown-content a {
  color: #fff;
  padding: 4px 16px;
  line-height: 18px;
  text-decoration: none;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #fff;
  color: #d800d8; 
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change background color of dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #ff00ff;
}

/* SECTIONS-All */ 
section::after { content:''; display: block; clear: both; }

/* SECTION-Main */
section.main {
	margin: 25px 10% 20px 10%;
}
section.main .hero-body p {
	font-size: 22px;
	line-height: 1.4;
}
section.main p { 
	font-size: 20px;
	line-height: 1.7;
	margin-top: 0;
	margin-bottom: 0;
	font-family: Georgia, "Times New Roman", Times, serif; 
}
section.main p img {
	max-width: 45%;
	height: auto;
	float: right;
	margin: 10px 0 10px 15px;
	box-shadow: 5px 5px 5px rgba(85,85,85,0.6);
}
section.main .trip-block {
	float: left;
	padding: 0;
	margin: 0 auto;
}
	
section.background {
	position: relative;
	float: left;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
	margin-bottom: 15px;
}
section.background p {
	color: #fff;
	margin: 25px 10%;
	font-size: 20px;
}

/* TRIP TEMPLATE */

.image {
	margin: 0 10% 15px 10%;
	padding: 0;
	clear: both;
}
.image p, .wide-image p {
	font-size: 16px;
	line-height: 1.4;
	padding: 0 10px;
	margin-bottom: 0;
	margin-top: 5px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
}
.image img{
	width: 100%;
	height: auto;
}
.photo-tri {
	float: left;
	width: 33.333%;
	height: auto;
}
.photo-tri img {
	padding: 0 4px 0 0;
}
.photo-bi {
	float: left;
	width: 50%;
	height: auto;
}
.photo-bi img {
	padding: 0 4px 0 0;
}
.photo-col img {
	width: 100%;
	height: auto;	
}

/* USING FLEX BOX */
.container {
	display: flex;
	flex-direction: row;
	width: 100%;
}
.image-half {
	width: 50%;
	background-color: black;
	overflow: hidden;
}
.image-half img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.text-half {
	width: 50%;
	padding: 40px;
	box-sizing: border-box;
	background-color: black;
	color: #fff;
}
.text-half h2 { 
	margin-top: 0;
	color: #fff; 
}

.text-half p {
	font-size: 20px;
	margin-top: 0;
	margin-bottom: 0;
	line-height: 1.7;
	font-family: Georgia, "Times New Roman", Times, serif;
}

/* INSET-Figure-Caption*/
figure {
	float: right;
	margin: 0;
	padding-left: 20px;
}
figure img {
	height: auto;
	float: right;
	margin: 10px 0 10px 15px;
	box-shadow: 5px 5px 5px rgba(85,85,85,0.6);
}
figcaption {
	font-size: 15px;
	line-height: 1.3;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding: 5px 0;
	clear: both;
	max-width: 300px;
}

/* FOOTER */
footer {
	float: left;
	width: 100%;
	clear: both;
}
footer .content {
	width: 100%;
	color: white;
	background-color: #ff9933;
	padding: 20px 0px;
	text-align: center;
	font-size: 14px;	
}
footer .content a { 
	color: #fff; 
	font-weight: bold;
	padding: 5px;
	width: 220px;
	margin: 10px auto 5px auto;
	text-decoration: none;
	border: 1px solid #fff;
	display: block;
	font-size: 16px; 
}
footer .content a:hover {
  background-color: #d800d8;
}
footer .content ul {
	margin: 20px 0 0 0;
	padding: 0;
}
footer .content li {
	line-height: 34px;
	text-align: center;
	display: block;
	margin: 5px 25px;
}
footer .content li a:hover {
	background-color: #d800d8;
}

#myBtn {
  position: fixed;
  bottom: 120px;
  right: 8px;
  z-index: 99;
  font-size: 14px;
  font-weight: bold;
  border: none;
  outline: none;
  background: rgba(85,85,85,.5);
  color: white;
  cursor: pointer;
  padding: 16px 13px;
  border-radius: 50%;
  user-select: none;
  transition: 0.6s ease;
}

#myBtn:hover {
  background: #669900;
}

/* MEDIA QUERIES */

/* On screens over 1200 px */
@media screen and (min-width: 1200px) {

section.main {
	margin-left: 20%;
	margin-right: 20%;
}
.hero { left: 20%; }
}


/* On screens over 600px */
@media screen and (min-width: 600px) {

.hero-body {
	display: none;
}
}

/* On screens that are 768px or less */
@media screen and (max-width:768px){

.hero { top: 30%; }

.hero-trip p { font-size: 24px; }

h1 { font-size: 30px; }

span { font-size: 100px; }

section.background p {
	margin: 25px 40px;
	font-size: 18px;
}

figure { padding-left: 10px; }

figure img { width: 200px; }

figcaption { width: 200px; }

/* USING FLEX BOX */
.container {
	display: inline-block;
}
.image-half {
	width: 100%;
}
.text-half {
	width: 100%;
	padding: 15px 10% 25px 10%;
}
.text-half p { font-size: 18px; }

}

/* On screens that are 600px or less */
@media screen and (max-width: 600px){
.navtop {	
	display: none;
	}
.hero {
	display: none;
}
.hero-trip {
	display: none;
}
span { 
	font-size: 60px;
	font-weight: bold;
}

section.main {
	padding: 0;
	float: none;
	margin-right: 20px;
	margin-left: 20px;
}
section.background p {
	margin: 25px 20px;
}
.hero-body {
	text-align: center;
	margin-top: 0;
	padding: 15px 15px 20px 15px;
	background-color: #ff9933;
}
h1 { color: #fff; }
h5 { display: none; }

.hero-body p {
	font-size: 22px;
	font-weight: bold;
	line-height: 1.4;
	color: #fff;
	margin-bottom: 0;
	margin-top: 0;
}
.hero-body img {
	width: 130px;
	height: auto;
	display: block;
	margin: 0 auto 20px auto;
	border-radius: 50%;
	border: 7px solid #ff9900;
}

.dropdown {
	display: block;
}

figure img { width: 150px; }

figcaption { 
	width: 150px;
	font-size: 14px;
}

.image p, .wide-image p { font-size: 14px; }

.image { margin: 0 20px 15px 20px; }

/* USING FLEX BOX */
.text-half { padding: 25px 20px; }

}