@charset "UTF-8";
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

body { line-height: 1; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

nav ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

/* change colours to suit your needs */
ins { background-color: #ff9; color: #000; text-decoration: none; }

/* change colours to suit your needs */
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }

table { border-collapse: collapse; border-spacing: 0; }

/* change border colour to suit your needs */
hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; }

input, select { vertical-align: middle; }

/* Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.  */
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

/*  apply a natural box layout model to all elements  */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body, p, h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0; }

body { font-family: "Source Sans Pro", sans-serif; font-weight: 400; font-size: 16px; margin: 0 auto; }

div#headerWrapper { background-color: #00bfff; margin: auto; }

header { height: 115px; position: relative; display: flex; }
header figure.logo { position: absolute; bottom: 0; left: 2%; top: 8%; margin: auto; }

div#headerWrapper h1 { text-align: right; font-size: 24px; font-style: italic; margin-right: 2%; padding-bottom: 2%; }
div#headerWrapper h1 a#phoneNumber { text-decoration: none; color: #fafad2; }

div#navWrapper { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#d8e0de+0,aebfbc+22,99afab+33,8ea6a2+50,829d98+67,4e5c5a+82,0e0e0e+100;Grey+3D */ background: #d8e0de; /* Old browsers */ background: -moz-linear-gradient(top, #d8e0de 0%, #aebfbc 22%, #99afab 33%, #8ea6a2 50%, #829d98 67%, #4e5c5a 82%, #0e0e0e 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #d8e0de 0%, #aebfbc 22%, #99afab 33%, #8ea6a2 50%, #829d98 67%, #4e5c5a 82%, #0e0e0e 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #d8e0de 0%, #aebfbc 22%, #99afab 33%, #8ea6a2 50%, #829d98 67%, #4e5c5a 82%, #0e0e0e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8e0de', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */ border-bottom: 1px solid rgba(0, 0, 0, 0.3); }

nav form#searchBar { margin-top: 5px; float: right; margin-right: 20px; top: 50px; }
nav form#searchBar input { font-size: 16px; padding: 1.8% 0.3%; margin-bottom: 5%; border-radius: .5rem; border: solid 1.5px #fafad2; background-color: #2f4f4f; color: #fafad2; width: 100px; height: 35px; }
nav form#searchBar ::placeholder { color: #fafad2; }
nav form#searchBar button { font-size: 1.1rem; padding-top: 2.6%; color: #fafad2; background-color: #2f4f4f; border: solid 1px #fafad2; width: 3rem; border-radius: 5px; top: 25px; }
nav ul li a { display: block; text-align: center; font-weight: 700; padding: .5rem 0; color: white; text-decoration: none; transition: background 0.75s ease, color 0.75s ease; }
nav ul li.active a { background-color: #4c7f7f; }
nav ul li a:hover { color: #f5f5a4; background-color: #00bfff; }

main { padding-bottom: 1rem; padding-top: 2rem; margin: 0 auto; margin-top: 5%; /* ----- Slick Slider ---- */ /* ---- Cards ---- */ /* --- Agent page stuff --- */ /* --- Cruises Page Stuff --- */ /* --- Book Page Stuff --- */ }
main h1 { font-size: 1.5rem; margin: 0.75rem 0 0 2%; color: #33ccff; padding-bottom: 1rem; }
main h2 { font-size: 1.2rem; margin: 0.75rem 0 0 2%; color: #33ccff; padding-bottom: 1rem; }
main h3 { font-size: 1.0rem; margin: 0.75rem 0 0 2%; color: #33ccff; padding-bottom: 1rem; }
main p { margin: 0.5rem 2%; color: #2f4f4f; }
main div.myslider div { width: 100%; }
main div.myslider div img { width: 100%; }
main div.container { display: grid; display: -ms-grid; grid-template-columns: 1fr 1fr 1fr; -ms-grid-columns: 1fr 1fr 1fr; grid-column-gap: 10px; grid-row-gap: 10px; margin: 4%; }
main div.container div.card1 { grid-row: 1; grid-column: 1 /span 2; position: relative; width: 400px; height: 450px; }
main div.container div.card1 img { width: 100%; opacity: 0.9; }
main div.container div.card1 img:hover { opacity: 1; }
main div.container div.card1 span { position: absolute; font-size: 2rem; font-style: italic; color: skyblue; background-color: black; opacity: 0.8; padding-bottom: .2em; padding-left: .1em; display: block; top: 14.5rem; text-align: left; width: 100%; }
main div.container div.card2 { grid-row: 2; grid-column: 1 /span 2; position: relative; width: 400px; height: 450px; }
main div.container div.card2 img { width: 100%; opacity: 0.9; }
main div.container div.card2 img:hover { opacity: 1; }
main div.container div.card2 span { position: absolute; font-size: 2rem; font-style: italic; color: skyblue; background-color: black; opacity: 0.8; padding-bottom: .2em; padding-left: .1em; display: block; top: 14.5rem; text-align: left; width: 100%; }
main div.container div.card3 { grid-row: 3; grid-column: 1 /span 2; position: relative; width: 400px; height: 450px; }
main div.container div.card3 img { width: 100%; opacity: 0.9; }
main div.container div.card3 img:hover { opacity: 1; }
main div.container div.card3 span { position: absolute; font-size: 2rem; font-style: italic; color: skyblue; background-color: black; opacity: 0.8; padding-bottom: .2em; padding-left: .1em; display: block; top: 14.5rem; text-align: left; width: 100%; }
main div.container div.card4 { grid-row: 4; grid-column: 1 /span 2; position: relative; width: 400px; height: 450px; }
main div.container div.card4 img { width: 100%; opacity: 0.9; }
main div.container div.card4 img:hover { opacity: 1; }
main div.container div.card4 span { position: absolute; font-size: 2rem; font-style: italic; color: skyblue; background-color: black; opacity: 0.8; padding-bottom: .2em; padding-left: .1em; display: block; top: 14.5rem; text-align: left; width: 100%; }
main figure#agent img { width: 75%; }
main figure#agent { width: 100%; height: 45%; margin: 0 2%; margin-bottom: 1rem; }
main figure#agent figcaption { text-align: center; font-weight: 700; color: #2f4f4f; }
main div#bio { margin-left: 2%; }
main div#customerComments p.comment { font-size: .8rem; font-style: italic; }
main div.cruiseContainer { margin-left: 2%; }
main div.cruiseContainer h2 { margin-top: 20px; }
main div.cruiseContainer figure#norway { width: 400px; height: 250px; }
main div.cruiseContainer figure#norway img { width: 100%; }
main div.cruiseContainer figure#alaska { width: 400px; height: 250px; }
main div.cruiseContainer figure#alaska img { width: 100%; }
main div.cruiseContainer figure#greece { width: 400px; height: 250px; }
main div.cruiseContainer figure#greece img { width: 100%; }
main div.cruiseContainer figure#bahamas { width: 400px; height: 250px; }
main div.cruiseContainer figure#bahamas img { width: 100%; }
main div.cruiseContainer p { margin-left: 2%; font-size: 16px; color: #2f4f4f; float: right; }
main div.cruiseContainer button { background-color: #2f4f4f; color: #fafad2; font-weight: 700; border: solid 1px #00bfff; border-radius: 10px; margin: 4%; font-size: 16px; text-align: center; padding: .4rem 10rem; }
main form#booking { margin: 1em 3%; /* HTML Validation */ }
main form#booking fieldset { background-color: #00bfff; border-radius: .8rem; margin: 1.5em 0; border: white solid 1px; }
main form#booking fieldset legend { color: #2f4f4f; margin-left: 6%; padding: .5rem; font-size: .9rem; }
main form#booking fieldset label { display: block; margin: .5em; }
main form#booking fieldset label span { display: block; color: #fafad2; padding-top: .9rem; padding-bottom: .2em; }
main form#booking fieldset label select { display: block; border-radius: 8px; color: #2f4f4f; padding: .8em 4em; margin: .5em; font-size: .9rem; }
main form#booking label input { background-color: white; color: #2f4f4f; padding: .3em .3em .3em 2em; border: solid 1px white; border-radius: 8px; font-size: .9em; width: 90%; max-width: 500px; background-image: url(../images/ico_validation.png); background-repeat: no-repeat; background-position: 4px -11px; }
main form#booking input:focus { box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5) inset; }
main form#booking input:required { background-position: 4px -61px; }
main form#booking input:focus:invalid { background-position: 4px -111px; }
main form#booking input:required:valid { background-color: white; background-position: 4px -161px; }
main form#booking input.submitBtn { -webkit-appearance: none; color: #fafad2; border: solid 1px black; border-radius: 7px; width: 250px; margin: .5em 0; font-size: 1.5em; padding: .3rem .6rem; background: #2f4f4f; }

div#footerWrapper { background-color: #00bfff; margin: auto; }

footer { padding: 1rem 2%; width: 100%; }
footer div.footerLinks { display: grid; grid-template-columns: 1fr; }
footer div.footerLinks h2 { text-align: center; font-size: 1.2rem; color: #fafad2; margin-top: 2%; }
footer div.footerLinks ul li { list-style-type: none; margin-top: 2%; color: #fafad2; font-size: 1rem; text-align: center; }
footer div.footerLinks div.newsletter { grid-row: 2; grid-column: 1; margin-left: 4%; }
footer div.footerLinks div.newsletter p { font-size: 16px; }
footer div.footerLinks div.newsletter input { border-radius: .5rem; padding: .8em 4em; text-align: center; }
footer div.footerLinks div.newsletter button { margin: 2%; border-radius: .3rem; background-color: #2f4f4f; color: #fafad2; font-size: 14px; padding: .9em 2em; }
footer div.footerLinks div.info { margin-bottom: 8%; }
footer div.footerLinks div.info p { font-size: 16px; }
footer ul.social { list-style-type: none; display: flex; flex-direction: row; justify-content: center; background-color: #2f4f4f; width: 100%; padding: 1% 3%; }
footer ul li a { font-size: 2.8em; padding: .2em .5em; color: #fafad2; }
footer ul li a:hover { background: #1c2f2f; }
footer p { margin-top: 4%; text-align: center; color: #fafad2; padding: .75rem 0; font-size: 1rem; }

.keepOpen { clear: both; }

.clearfix:after { content: ""; display: table; clear: both; margin: auto; }

/*Change the menubar color on line 23 */
/*Change the dropdown menu color on line 49*/
/*If you have a light background color then change the background image on lines 30 and 37 to load menuOpenBlack and menuCloseBlack*/
/*Adjust the media query max-width value on line 12 to match your breakpoint between the small and medium screens OR between the medium and large screens*/
/*  apply a natural box layout model to all elements  */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

#hamburgerBtn { display: none; }

/* hide the navigation button by default */
@media only screen and (max-width: 64rem) { /* Navigation Button  -------------------------------------------------------- */
  body { padding-top: 50px; }
  nav { position: absolute; top: 0; left: 0; width: 100%; height: 3rem; background-color: #1e90ff; /* change the menu color */ }
  #hamburgerBtn { display: block; width: 7.0rem; height: 2.50rem; background-image: url("../images/menuOpenWhite.png"); background-color: rgba(0, 0, 0, 0.1); background-position: 2vw center; background-repeat: no-repeat; border: 0 none; }
  #hamburgerBtn.open { background: url("../images/menuCloseWhite.png"); background-position: 2vw center; background-repeat: no-repeat; }
  /* Navigation Bar -------------------------------------------------------- */
  #primaryNav { height: 0; overflow: hidden; width: 100%; background-color: #1e90ff; /* change the menu color */ margin: 0; padding: 0; z-index: 998; font-family: Verdana; font-weight: normal; }
  #primaryNav li.active a { background-color: rgba(0, 0, 0, 0.25); }
  #primaryNav li a { display: block; width: 100%; padding: .75rem 2vw; font-size: 14px; text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.15); color: white; text-decoration: none; border-top: 1px solid rgba(0, 0, 0, 0.2); }
  #primaryNav li a:hover { background-color: rgba(0, 0, 0, 0.5); }
  /* Toggle the navigation bar to expand down  */
  #primaryNav.open { height: auto; }
  /* Submenus – optional .parent class indicates dropdowns */
  #primaryNav > li:hover > a { background: rgba(0, 0, 0, 0.5); }
  #primaryNav li.parent > a:after { font-size: .75rem; content: "\25BC"; color: rgba(255, 255, 255, 0.5); float: right; }
  #primaryNav li.parent > a:hover { background: rgba(0, 0, 0, 0.75); }
  /*hide the sub menu items by default*/
  #primaryNav li ul { display: none; background: rgba(0, 0, 0, 0.3); padding: 0; }
  #primaryNav li ul a { border-top: solid 1px rgba(0, 0, 0, 0.2); font-size: 12px; padding: 10px 5%; font-weight: normal; }
  #primaryNav li:hover ul { display: block; } }
/* End Mobile Styles */
@media only screen and (min-width: 650px) { header { height: 130px; }
  div#headerWrapper h1 { margin-right: 4%; }
  div#headerWrapper h1 h1 a#phoneNumber:hover { background: #f5f5a4; }
  form#searchBar { margin-right: 10px; padding: 0.3% rem 0.4% rem; }
  form#searchBar button { font-size: 1.2rem; }
  main { /* --- Agent page stuff --- */ /* --- Cruises Page Stuff --- */ }
  main div.container { grid-template-columns: 1fr 1fr; -ms-grid-columns: 1fr 1fr; margin-left: 2%; }
  main div.container div.card1 { grid-row: 1; grid-column: 1 /span 2; }
  main div.container div.card2 { grid-row: 1; grid-column: 2 /span 2; }
  main div.container div.card3 { grid-row: 2; grid-column: 1 /span 2; }
  main div.container div.card4 { grid-row: 2; grid-column: 2 /span 2; }
  main figure#agent { width: 75%; float: right; }
  main figure#agent figure#agent img { width: 40%; }
  main div.cruiseContainer { display: grid; grid-template-columns: 1fr 1fr; -ms-grid-columns: 1fr 1fr; margin-left: 2%; }
  main div.cruiseContainer figure#norway { grid-row: 1; grid-column: 1; margin-bottom: 2%; }
  main div.cruiseContainer div#norwayDescription { grid-row: 1; grid-column: 2; }
  main div.cruiseContainer div#norwayDescription button#norwayBtn { padding: .4rem 1.8rem; float: right; }
  main div.cruiseContainer figure#alaska { grid-row: 2; grid-column: 1; margin-bottom: 2%; }
  main div.cruiseContainer div#alaskaDescription { grid-row: 2; grid-column: 2; }
  main div.cruiseContainer div#alaskaDescription button#alaskaBtn { padding: .4rem 1.8rem; float: right; }
  main div.cruiseContainer figure#greece { grid-row: 3; grid-column: 1; margin-bottom: 2%; }
  main div.cruiseContainer div#greeceDescription { grid-row: 3; grid-column: 2; }
  main div.cruiseContainer div#greeceDescription button#greeceBtn { padding: .4rem 1.8rem; float: right; }
  main div.cruiseContainer figure#bahamas { grid-row: 4; grid-column: 1; margin-bottom: 2%; }
  main div.cruiseContainer div#bahamasDescription { grid-row: 4; grid-column: 2; }
  main div.cruiseContainer div#bahamasDescription button#bahamasBtn { padding: .4rem 1.8rem; float: right; }
  footer div.footerLinks { grid-template-columns: 1fr 1fr; margin: 4%; }
  footer div.footerLinks ul.social { justify-content: center; }
  footer ul.social { padding: 1% 40%; } }
@media only screen and (min-width: 1020px) { nav div#searchBar input span { display: inline; width: 200px; }
  nav ul { margin-left: 2%; border-left: 1px solid rgba(0, 0, 0, 0.2); }
  nav ul li { float: left; }
  nav ul li a { display: block; border: none; border-right: 1px solid rgba(0, 0, 0, 0.2); background: none; font-size: .9em; padding: .7em .9em; color: white; text-decoration: none; /*transition*/ -webkit-transition: background 0.3s linear; transition: background 0.3s linear; }
  nav ul li a:hover { background: #0583ff; }
  nav ul li ul { /*rules for the sub menu items*/ z-index: 99; position: absolute; background-color: #51a9ff; left: -999em; /* pushes the menu way off to the side */ width: 10em; }
  nav ul li ul li { /* overides the float and line from the parent ul */ float: none; border-right: none; border-top: solid 1px rgba(0, 0, 0, 0.2); }
  nav ul li:hover ul { /* this displays the menus as drop downs  */ left: auto; margin-left: 0; }
  main { max-width: 64rem; }
  main div.container { grid-template-columns: 1fr 1fr 1fr 1fr; -ms-grid-columns: 1fr 1fr 1fr 1fr; margin-left: 2%; }
  main div.container div.card1 { grid-row: 1; grid-column: 1 /span 4; }
  main div.container div.card2 { grid-row: 1; grid-column: 3 /span 4; }
  main div.container div.card3 { grid-row: 2; grid-column: 1 /span 4; }
  main div.container div.card4 { grid-row: 2; grid-column: 3/span 4; }
  main div.cruiseContainer { grid-template-columns: 1fr 1fr 1fr 1fr; -ms-grid-template-columns: 1fr 1fr 1fr 1fr; }
  main div.cruiseContainer div#norwayDescription { grid-column: 2 /span 4; }
  main div.cruiseContainer div#alaskaDescription { grid-column: 2 /span 4; }
  main div.cruiseContainer div#greeceDescription { grid-column: 2 /span 4; }
  main div.cruiseContainer div#bahamasDescription { grid-column: 2 /span 4; }
  footer { max-width: 100%; }
  footer div.footerLinks { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; margin-left: 100px; }
  footer div.footerLinks div.contact { grid-row: 1; grid-column: 1 /span 2; }
  footer div.footerLinks div.newsletter { grid-row: 1; grid-column: 4 /span 2; }
  footer div.footerLinks div.newsletter button { margin-left: 25%; }
  footer div.footerLinks div.info { grid-row: 1; grid-column: 7 /span 2; }
  footer div.footerLinks ul.social { justify-content: center; grid-column: 1 /span 4; padding: 4% 10%; } }

/*# sourceMappingURL=styles.css.map */