/* ----------------------------------------------------------------------------*/
/*  styles.css v3.00 : Module 10 : Last Edited : 2019.09.24
/* ----------------------------------------------------------------------------*/
html { 
    min-height:100vh;
    position:relative;
}

body {
    margin:0;
    padding:0;
    min-height:100vh;
    background-image: url("../images/backgroundpaper.jpg");
    background-color:#e0e0e0;
    background-attachment:fixed;
    font-family:Futura,'Trebuchet MS',Arial,sans-serif; 
    font-family:'Red Hat Display', sans-serif;
    /*font-size:17px;*/
    font-size:1.06rem;
    color:#414141;
}

/* Main Content Container */
.mainwrapper {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    position:relative;
}

/* HTML5 compatability for older IE Browsers */
article, aside details, figcaption, figure, footer, header, hgroup, menu, nav, section{
    display:block;
}


/* ----------------------------------------------------------------------------*/
/*  Headings & Font Styles
/* ----------------------------------------------------------------------------*/
h1 {
    font-family:'Rancho', cursive;
    /*font-size:45px;*/
    font-size:2.81rem;
    color:#1B479E;
    line-height:2.81rem;
    margin-top:20px;
    margin-bottom:0px;
    word-spacing:0.12em;
}

h2 {
    font-family:'Caveat', cursive;
    /*font-size:25px;*/
    font-size:1.56rem;
    font-weight:700;
    color:#12306b;
    margin-top:25px;  
    margin-bottom:0px;  
    padding-top:5px;
    padding-bottom:7px; 
}

.quote {    
    font-family:'Caveat', cursive;
    /*font-size:25px;*/
    font-size:1.56rem;
    color:#12306b;
    margin-top:3px;
    margin-bottom:3px;  
    padding-top:0;
    padding-bottom:3px;
}

/* Adds quotes which face the right direction */
  .quote::before {
    content: open-quote;
  }

  .quote:after {
    content: close-quote;
  }

/* Removes quotes from general notes, eg. Thanks so much for visiting. */
  .note::before {
    content: no-open-quote;
  }

  .note:after {
    content: no-close-quote;
  }


/* ----------------------------------------------------------------------------*/
/*  Text link section
/* ----------------------------------------------------------------------------*/
a:link {
    font-family:'Caveat', cursive;
    /*font-size:20px;*/
    font-size:1.25rem;
    color:#245ed1;
    text-decoration:none
}

a:visited {
    font-family:'Caveat', cursive;
    /*font-size:20px;*/
    font-size:1.25rem;
    color:#245ed1;
    text-decoration:none
}

a:hover {
    font-family:'Caveat', cursive;
    /*font-size:20px;*/
    font-size:1.25rem;
    color:#6a99f7;
    text-decoration:none
}

a:active {
    font-family:'Caveat', cursive;
    /*font-size:20px;*/
    font-size:1.25rem;
    color:#6a99f7;
    text-decoration:none
}


/* ----------------------------------------------------------------------------*/
/*  TopNav Bar for Small/Medium Devices (ie. Mobile & Tablet)
/* ----------------------------------------------------------------------------*/
/* Top Navigation Container */
#mobiletopnav {
    margin:0;
    border:0;
    height:50px;
    overflow:hidden;
}

/* Top Navigation Bar */
.topnav {
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    margin:0;
    border:0;
    background-color:#333;
    text-align:left;
    overflow:hidden;
}

/* Hides Home in dropdown menu when button shows */
#dropdownhome {
	display:none;
}

/* Shows Home on top nav bar */
#topnavhomebtn {
    display:block;
}

/* Selected Topnav link (current page) */
.active {
	background-color:#555;
	color:white;
}

/* Nav Bar Links, ie. Home */
.topnav a {
	display:block;
    padding:15px 16px;
    font-size: 17px;
    color:#f2f2f2;
    text-decoration: none;
    text-align:left;
}

/* Position of Hamburger Menu Icon*/
.dropdown {
    margin:0;
    border:0;
    overflow:hidden;
}

/* Hamburger Menu Icon */
.dropdown .dropbtn {
    margin:0;
    border:none;
	outline:none;   
    padding:13px 16px;
	background-color:#333;
    font-family:inherit;   
	font-size:17px;
	color:white;
}

/* Dropdown List */
.dropdown-content {
    display:none;
    margin:0;    
    border:0;
    left:0;
	min-width:160px;
	background-color:#fc8d42;
	box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index:400;
    position:absolute;
}

/* Hover state for topnav links (ie. Home) and Hamburger Menu Icon */
.topnav a:hover, .dropdown:hover .dropbtn {
	background-color:#f06100;
	color:white;
}

/* Dropdown List Links */
.dropdown-content a {
    display:block;
    padding:14px 16px;
    margin:0;
    float:none;
    color:white;
	text-decoration: none;
	text-align:left;
}

/* Dropdown List Links Hover State */
.dropdown-content a:hover {
	background-color:#f06100;
	color:white;
}

/* Show Menu on Hover */
.dropdown:hover .dropdown-content {
	display:block;
	z-index:400;
}

/* Remove "highlight" state from hamburger icon */
.topnav.responsive .dropdown:hover .dropbtn {
	background-color:#333;
}

/* Hide menu when hamburger button is clicked again */
.topnav.responsive .dropdown-content {
	display:none;
}


/* ----------------------------------------------------------------------------*/
/*  Logo Section
/* ----------------------------------------------------------------------------*/
/* Logo Container */
header {
    margin-top:1%;
    width:40vw;
    text-align:center;
    /* Added for IE compatibility */
    min-height:1px;
}

/* Logo */
header img {
    width:100%; 
    max-width:882px;
}


/* ----------------------------------------------------------------------------*/
/*  Main Image Section Collages
/* ----------------------------------------------------------------------------*/
/* Large device version of Collage */
.collagelrg {
    padding-top:1%;
    padding-bottom:1%;
    text-align:center;
    /* Added for IE compatibility */
    width:100%;
    min-height:1px;
}

.collagelrg img {
    box-sizing:border-box;    
    width:100%;
    max-width:1336px;
    padding-left:2%;
    padding-right:2%;
}

/* Small/Medium device version of Collage */
.collagesml {
    display:none;
    text-align:center;
    padding-bottom:1%;
    /* Added for IE compatibility */
    width:100%;
    min-height:1px;
}

.collagesml img {
    box-sizing:border-box;
    width:100%;
    max-width:924px;
    padding:3%;
    padding-bottom:2%;
}


/* ----------------------------------------------------------------------------*/
/*  404 Page Collage
/* ----------------------------------------------------------------------------*/
/* Collage on 404 page */
.failcollage {
    margin-top:0;
    margin-bottom:1.5%;
}


/* ----------------------------------------------------------------------------*/
/*  Contact Page Collage
/* ----------------------------------------------------------------------------*/
/* Polaroid Beach Collage Container on Contact page */
.contactpolaroidcollage {
    margin-top:0;
    margin-left:2%;
    margin-right:2%;
    text-align:center;
    z-index:100;
    /* Added for IE compatibility */
    width:100%;
    width:initial;
    min-height:1px;
}

/* Polaroid Beach Collage on Contact page */
.contactpolaroidcollage img {
    width:90%;
    max-width:900px;
}

/* Large device version of Collage on Contact page */
.contactcollagelrg {
    margin-top:1%;
    margin-bottom:110px;
}

/* Small/Medium device version of Collage on Contact page */
.contactcollagesml {
    margin-bottom:75px;
}


/* ----------------------------------------------------------------------------*/
/*  Buttons
/* ----------------------------------------------------------------------------*/
/* Main Navigation Buttons */
.navbuttons {
    display:flex;   
    justify-content:space-between;
    flex-direction:row;
    align-items:center;
    margin-top:1%;
    margin-bottom:1%;
    width:80vw;
    max-width:900px;
    position:relative;
}

/* Each individual button uses this class */
.lrgbuttons {
    display:block; 
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    margin-bottom:2%;
    width:30vw;
    max-width:250px;
    height:7vh;
    min-height:40px;
    position:relative; 
}

/* Adds a left-side margin to the button on the far left */
.navbuttons .lrgbuttons:first-child {
    margin-left:2%;
    margin-right:0;
    padding-left:0;
}

/* Adds a right-side margin to the button on the far right */
.navbuttons .lrgbuttons:last-child {
    margin-left:0;
    margin-right:2%;
    padding-right:0;
}


/* ----------------------------------------------------------------------------*/
/*  Main Page Buttons
/* ----------------------------------------------------------------------------*/
/* Button Info [Green #2b8e9e] */
.btn-info {
    background-image:url("../images/imgbtn/btn-info.png");
}

.btn-info:hover,
.btn-info:focus {
    background-image:url("../images/imgbtn/btn-info-rollover.png");  
}

/* Button Dive In! [Orange #ff7438] */
.btn-divein {
    background-image:url("../images/imgbtn/btn-divein.png");  
}

.btn-divein:hover,
.btn-divein:focus { 
    background-image:url("../images/imgbtn/btn-divein-rollover.png"); 
}

/* Button Get in Touch [Blue #245ed1] */
.btn-getintouch {
    background-image:url("../images/imgbtn/btn-getintouch.png");  
}

.btn-getintouch:hover,
.btn-getintouch:focus { 
    background-image:url("../images/imgbtn/btn-getintouch-rollover.png");  
}


/* ----------------------------------------------------------------------------*/
/*  Info Page Buttons
/* ----------------------------------------------------------------------------*/
/* Button Home [Green #2b8e9e] on Info Page */
.btn-home-green {
    background-image:url("../images/imgbtn/btn-home-green.png");
}

.btn-home-green:hover,
.btn-home-green:focus { 
    background-image:url("../images/imgbtn/btn-home-green-rollover.png"); 
}


/* ----------------------------------------------------------------------------*/
/*  Blog Page Buttons
/* ----------------------------------------------------------------------------*/
/* Button Home on Blog Page */
.btn-home {
    background-image:url("../images/imgbtn/btn-home.png");
}

.btn-home:hover,
.btn-home:focus { 
    background-image:url("../images/imgbtn/btn-home-rollover.png"); 
}

/* Button Home on Blog Page for use with Small/Medium devices */
.btn-homemobile {
    display:none;
    background-image:url("../images/imgbtn/btn-home.png");
}

.btn-homemobile:hover,
.btn-homemobile:focus { 
    background-image:url("../images/imgbtn/btn-home-rollover.png"); 
}


/* ----------------------------------------------------------------------------*/
/*  Contact Page Buttons
/* ----------------------------------------------------------------------------*/
/* Single Button Container */
.singlebtn {
    width:30%;
}

/* Button "Send a Mail" on Contact Page */
.btn-sendmail {
    margin:0;
    width:50vw;
    text-align:left;
    max-width:250px;
    min-height:55px;
    background-image:url("../images/imgbtn/btnsml-sendmail.png");
    background-position:center;
}

.btn-sendmail:hover,
.btn-sendmail:focus { 
    background-image:url("../images/imgbtn/btnsml-sendmail-rollover.png"); 
}

/* Button Home [Blue #245ed1] on Contact Page */
.btn-home-blue {
    background-image:url("../images/imgbtn/btn-home-blue.png");
}

.btn-home-blue:hover,
.btn-home-blue:focus { 
    background-image:url("../images/imgbtn/btn-home-blue-rollover.png"); 
}


/* ----------------------------------------------------------------------------*/
/*  404 Page Buttons
/* ----------------------------------------------------------------------------*/
/* Button Home [Blue #245ed1] on Contact Page */
.btn-divein-blue {
    background-image:url("../images/imgbtn/btn-divein-blue.png");
}

.btn-divein-blue:hover,
.btn-divein-blue:focus { 
    background-image:url("../images/imgbtn/btn-divein-blue-rollover.png"); 
}


/* ----------------------------------------------------------------------------*/
/*  Dividers
/* ----------------------------------------------------------------------------*/
/* Large Divider */
.dividerlrg {
    margin:0 auto;
    text-align:center;
    max-width:1000px;   
}

.dividerlrg img {
    width:98%;
    padding-bottom:2%;
}

/* Small Divider */
.dividersml {
    margin:0 auto;
    padding-top:2%;
    text-align:center;
    width:96%;
    height:2px;
}

/* Large Divider images */
.imgdividerlrg {
    margin:0 auto;
    text-align:center;
    max-width:1000px;   
}

.imgdividerlrg img {
    width:98%;
    padding-bottom:2%;
}

/* Small Divider images */
.imgdividersml {
    display:none;
    margin:0 auto;
    padding:6px;
    padding-top:10px;
    margin-bottom:0px;
    width:80vw;  
    max-width:900px;
}

/* Divider for blog at the end of an entry */
.blogseparator{
    margin-top:0;
    margin-bottom:3%;
    padding-top:0;
}


/* ----------------------------------------------------------------------------*/
/*  Text Section (Content)
/* ----------------------------------------------------------------------------*/
/* Main Text Sections */
.textbody {
    margin:0 auto;
    padding:6px;
    padding-top:10px;
    margin-bottom:90px;
    width:80vw;
    max-width:900px;
}

/* Text Section Paragraphs */
.textbody p {
    margin-top:0px;
}

/* Adds space between the last paragraph and the next section / footer */
.textbody p:last-of-type {
    padding-bottom:3%; 
}

/* If present, adds space between the last link and the next section / footer */
.textbody a:last-of-type {
    margin-bottom:20px; 
}


/* ----------------------------------------------------------------------------*/
/*  Blog (Dive In) Content
/* ----------------------------------------------------------------------------*/
.entryimage{
    padding-top:1%;
    max-width:900px;
}

.entryimage img{
    margin-top:1%;
    width:25vw;
    box-sizing:border-box;
}

.smltext{
    margin-bottom:0;
    padding-top:0;
    padding-bottom:0;  
}

.smltext p{
    margin-bottom:0;
    padding-top:0;
    padding-bottom:0;  
}

/* Adds space between the last paragraph and the next section / footer */
.smltext p:last-of-type {
    padding-bottom:1%; 
}

/* Subheader on Blog page */
.blogsubheader{
    margin-top:-3%;
    padding-top:0;
}


/* ----------------------------------------------------------------------------*/
/*  Contact (Get in Touch) Content
/* ----------------------------------------------------------------------------*/
/* Wrapper for top section of Contact page */
/* Contains text section and Send Mail button */
.mailme {
    display:flex;
    flex-direction:row;
    align-items:center;
    align-content:center;
    justify-content:space-between;
    margin-bottom:11vh;
    width:55vh;
}

/* Text section on Contact page */
.contact-text {
    margin:0;
    margin-bottom:0;
    padding:0;
    text-align:left;
    /* Added width:auto for IE compatibility */
    width:auto;
    width:initial;
    z-index:200;
}

/* List : Bullet padding */
.contact-text ul {
    padding-inline-start:40px;
}

/* List : Bullet position */
.contact-text ul li {
    list-style-position:inside;
}

/* Last paragraph of Contact text */
/* Adds space between the last paragraph and the next section / footer */
.contact-text p:last-child {
    padding-bottom:10px;
    margin-bottom:0;
}

/* If present, adds space between the last link and the next section / footer */
.contact-text a:last-of-type {
    margin-bottom:20px; 
}


/* ----------------------------------------------------------------------------*/
/*  Misc Text Settings, used by : 404 page
/* ----------------------------------------------------------------------------*/
/* Main Text Sections */
.txtabovebuttons{
    padding-top:10px;
    margin-bottom:0px;
}

/* Adds space between the last paragraph and the next section / footer */
.txtabovebuttons p:last-of-type {
    padding-bottom:1%; 
}

/* When nav buttons occur below the text body */
.buttonsbelowtext{
    margin:0;
    margin-bottom:90px;
}


/* ----------------------------------------------------------------------------*/
/*  Footer
/* ----------------------------------------------------------------------------*/
/* Footer */
footer {
    display:flex;
    flex-direction:row;
    justify-content:center;
    left:0;
    right:0;
    background:rgba(33, 33, 33, 0.8);
    text-align:center;
    bottom:0;
    margin-top:13vh;
    padding-top:9px;
    padding-bottom:25px;
    padding-left:5px;
    padding-right:5px;
    position:absolute;
}

/* Footer Text */
footer p {
    margin:0;
    font-family:'Caveat', cursive;
    /*font-size:25px;*/
    font-size:1.56rem;
    color:#fff;
}

.footerblogentry{
    min-height:initial;
    /* Added for IE compatibility */
    min-height:1px;
}