@charset "utf-8";

body {
    font-family: Verdana, Geneva, sans-serif;
    color: rgb(91, 91, 91);
    background-color: rgb(29, 147, 207);
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    padding: 0

}

  ul {
    list-style-type: square;
}

header {
    text-align: center;
    padding: 20px;
    text-shadow: 4px 6px 5px gray;
}

a#navicon{
    display: none;
}

h1, h2 {
    font-size: 1.3em;
    text-shadow: 4px 6px 5px gray;
}

nav ul{
list-style:none;
margin: 0;
padding: 0;

}

nav a{
    text-decoration:none;
    display:block;
    background-color:rgb(150, 187, 245);
    line-height: 2.8em;
    text-decoration: none;
    text-align: center;
    color:rgb(24, 79, 230);
}
nav a:hover {
background-color: rgb(161, 245, 113);
color: ivory;
font-size: 1.2em;
transition: background-color 0.5s ease-in 0.2s, color 0.5s ease-in 0.2s, font-size 1s ease;
}

main > img {
    width: 25%;
    padding: 20px;
    float: right;
}

main {
  padding: 20px;
  margin-top: 70px;
}

header img {
    width: 100%;
}

body > footer{
background-color:rgba(134, 204, 232) ;
color: rgba(255,255,255,0.7);
font-weight: bold;
font-size: 0.9em; 
line-height: 3em;
text-align: center;
margin-top: 10px;
padding: 10px;
clear: both;
}

/*Flexbox styles for Vacation images*/
div.gallery{
    display: flex;
    flex-flow: wrap;
}

div.imgGallery{
    flex: 23%;
    max-width: 25%;
    padding: 0 4px;
}

div.imgGallery img{
    width: 100%;
}

/* ==========================================================================
   1. GLOBAL STYLES (Applies to all screen sizes, including mobile)
   ========================================================================== */

   @media only screen and (max-width: 768px) {
main {
  padding: 20px;
  margin-top: 35px;
}


body {
    margin: 0;
    width: 100%;
}

h1, h2, h3 {
    color: #111111;
}

a {
    text-decoration: none;
    color: #0066cc;
}

nav li{
    display: block;
    width: 100%;
    float: none;
}


nav a{
    display: block;
    padding: 15px;
    border-bottom: 1px solid #444;
    flex-direction: column;
}

 
main > img{
    width: 90%;
    float: none;

}

div.imgGallery{
flex: 100%;
max-width: 100%;
padding: 0 4px;
}

a#navicon{
    display: block;
}

nav.horizontal ul{
    display: none;
}

a#navicon:hover+ul, nav.horizontal ul:hover{
    display: block;
}
}

/*Media Query for Styles for Tablets - screen sizes up to max-width 1100px*/  
@media only screen and (max-width:1100px){

    body {
    margin: 0;
    width: 100%;
} 

main > img{
    width: 90%;
    float: none;
}

nav li{
    display: block;
    width: 20%;
    float: left;
}

nav a{
    display: block;
    padding: 15px;
    border-bottom: 1px solid #444;
}

div.imgGallery{
flex: 48%;
max-width: 50%;
padding: 0 4px;
}

}

/* Mobile Screen Sizes */

@media screen and (max-width: 768px) {
   
    form {
        width: 100%;
        font-size: large;
    }

   
    fieldset {
        width: 100%;
        padding: 5px;
        margin: 0;
    }

  
    input, select {
        position: inherit;
        display: block;
        height: 50px;
        padding: 5px;
        width: 90%;
    }

   
    label {
        position: inherit;
        display: block;
        height: 50px;
        width: 90%;
    }

   
    input[type="submit"], input[type="reset"] {
        float: none;
        width: 90%;
        margin: 10px;
        font-size: 1.2em;
    }
}


/*Media Query for Styles for Desktops - screen sizes 769px and wider*/
@media only screen and (min-width: 769px){

html {
    background:rgb(27, 4, 205) url(background_image.jpg) center center / cover no-repeat fixed;

}
nav li{
    display: block;
    width: 20%;
    float: left;
}

}


/*Table Styles*/


table{
     width: 100%;
     border: 10px double rgb(161, 245, 113);
     border-collapse:collapse;
}

th, td{
    height: 25px;
    border: 1px solid black;
    padding: 10px;
}

thead, tfoot{
    background-color: #0066cc;
    color: white;
}

tbody tr:nth-of-type(even){
   background-color: snow;
}

/* - - - - - Styles for Tablets and Mobile Devices  - - - - - -*/
@media only screen and (max-width:768px){
    body{
        width: 100%;
        margin: 0;
    }

    a#navicon{
        display: block;
        text-align: center;
    }

    nav.horizontal ul{
        display:none;
    }

    a#navicon:hover+utl, nav.horizontal ul:hover{
        display: block;
    }

    nav li{
        float: none;
        font-size: x-large;
        width: 100%;
    }
    
    nav a{
        border-bottom:solid black 1px;
    }

    main>img{
        width: 90%;
        float: none;
        padding: 0px;
    }

    div.imgGallery{
        flex: 100%;
        max-width: 100%;
    }

    table, tbody, tr, td, th{
        display: block;
    }

    thead, tfoot{
        display: none;
    }

    tbody td{
        position: relative;
        padding-left: 40%;
        overflow: visible;
        height: auto;
    }

    td::before{
        content: attr(data-label);
        position:absolute;
        top: 0px;
        left:0px;
        padding: 10px;
        width: 40%;
        white-space: nowrap;


    }
}


/* Validation Styles */
input:focus, select:focus, textarea:focus{
    background-color: rgb(220, 255, 220);
}

input#name:focus:valid,
input#zip:focus:valid,
input#phone:focus:valid,
input#mail:focus:valid{
    background: rgb(220, 255, 220) url(rb_valid.png) bottom right/contain no-repeat;
}

input#name:focus:invalid,
input#zip:focus:invalid,
input#phone:focus:invalid,
input#mail:focus:invalid{
    background: rgb(220, 255, 220) url(rb_valid.png) bottom right/contain no-repeat;
}

/* Form Styles */

form{
    width: 90%;
}

fieldset{
    width: 90%;
    padding: 5px;
    margin: 0px 10px 10px 0px;
}

input, select{
    display: block;
    position: relative;
    left: 30%;
    padding: 5px;
    height: auto;
    width: 60%;
}

label{
    display: block;
    position: absolute;
    padding: 5px;
    width: 30%;
}

input[type="radio"]{
    display: inline;
    position: inherit;
    left: 0;
    width: auto;
}

label.radio{
    display: inline;
    position: inherit;
}

input[type="submit"], 
input[type="reset"] {
  display: block;
  float: left;
  left: 0;
  text-align: center;
  width: 40%;
  padding: 10px;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 10px;
}