@charset "UTF-8";
/* CSS Document */

/*	A CSS rule has the following syntax:
selector { property: style; property: style; property: style; }
For a list of CSS properties, see the w3Schools website @ https://www.w3schools.com/cssref/default.asp 

Navigation Tutorial: https://www.w3schools.com/howto/howto_js_topnav_responsive.asp
*/

/*	S. Beth Sperlik - Tomyworx website
    Dec 16, 2019
==================================================
Table of Contents
==================================================
:: Typography
:: Navigation
:: Structure
:: Backgrounds and Borders
:: Slideshow
:: Media Queries
*/

/*	Typography
================================================== */
@import url('https://fonts.googleapis.com/css?family=Roboto|Righteous');

* {box-sizing: border-box; }

body { 
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    line-height: 22px;
    color: #344231;
}

h1 {
    /* font-size: 1.75em; */
    line-height: 1.5em;
    margin: 0 auto;
    font-size: 5vw; 
}

h2 {
    font-size: 1em;
    line-height: 1.5em;
    margin: 0 auto;
    }
h3 {font-size: 1.5em;
    line-height: 1em}

h1, h2, h3 {
    font-family: 'Righteous', serif;
    color: #344231;
}

h2 {margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
}

p {
    margin-top: 15px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 15px;
    text-align: center;
}

.caption    {
    font-size: 0.75em;
    text-align: center;
}

.material-icons { display: block; text-align: center; margin-top: 30px; font-size: 3em; }

a:link { color: #9e7878; }
a:visited { color: #4e3639; }
a:hover { color: #4e3639; text-decoration: none; }
a:active { color: #9e7878; text-decoration: none; }

/* More information links */
a:link.more-info, a:visited.more-info {
    background-color: #4e3639;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

a:hover.more-info {
    background-color: #3f1c32;    
}

footer {
    text-align: center;
    font-size: 0.75em;
}

/*	Navigation
================================================== */
.navbar {
  width: 100%;
  background-color: #5A846A;
  overflow: auto;
}

.navbar a {
  float: left;
  display: block;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 15px 12px 15px 12px;
  color: white;
  text-decoration: none;
  font-size: 12px;
  width: 12.5%; /* x number of links evenly spaced in 100% */
  text-align: center;
  
}

.navbar a:hover {
  background-color: #344231;
}

.navbar a.active {
  background-color: #344231;
}

@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
    width: 100%;
    text-align: left;
  }
}


/* Add a background color to the top navigation */
.topnav {
    background-color: #5A846A;
    overflow: hidden;
    margin-bottom: 10px;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    color: #f2f2f2;
    text-align: center;
    width: 12.5%;
    padding: 14px 25px;
    text-decoration: none;
}

.topnav a.current {
    background-color: #344231;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
.topnav a:not(:first-child) {
    display: none;
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
.topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
}

.topnav.responsive {
    position: relative;
}

.topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #344231;
    color: #f2f2f2;
}

/* Add an active class to highlight the current page */
.active {
    background-color: #3D2A2C;
    color: white;
}

/* The link that should open and close the topnav on small screens */
.topnav a.icon {
    float: right;
    display: block;
}

/*	Structure
================================================== */
.pagewrap {
    width: 96%;
    margin: 40px;
    padding: 20px;
    border-radius: 50px;
 /* border: 2px solid #3D2A2C; Border is for visual aid only in coding */
    background-color: #deefdd;
    width: 86%;
    margin: 0 auto;
}

header {
    height: auto;
    text-align: center;
}

.logo { 
    margin-bottom: 20px;
    margin-top: 20px;  
    /* width: 380px; */ /* factor of 2.13 */
    /* height: 187.8px; */
    text-align: center;
    width: 100%;
    height: auto; 
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
/*    text-align: center;*/
}

.center1    {
    text-align: center;
    
}

.content-three, .content-two { 
    display: grid;
    grid-template-columns: auto;
    grid-gap: 40px;
}

img.responsive-image, .center { 
    width: 99%;
    max-width: 500px;
    height: auto;
}

.div1   {
    padding: 40px, 40px, 60px, 0;
}

/*	Backgrounds and Borders
================================================== */
body, html { 
    height: 100%;
    background-image: url(../images/GreenRustyMetalBackground.jpg);
    background-color: #b3ada2;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
  /*background-size: auto;*/
   
}

/* To add border to bottom of items when in single columns */
/*.item1, .item2 {*/
/*    border-bottom: 1px dotted #666;*/
/*    padding-bottom: 20px;*/

}

hr {
    border-bottom: 5px dotted #050505;
    border-width: 650px;    
}

/*	Slideshow
================================================== */
body {
  font-family: Roboto;
  margin: 0;
}

* {
  box-sizing: border-box;
}

/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(52, 66, 49, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #344231;
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  float: left;
  width: 16.66%; /* change this if adding more than six*/
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

/*  Contact Form
================================================== */
input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #181E17;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
  text-decoration-color: #344231;
}

input[type=submit] {
  background-color: #344231;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #3F1C32;
}

.container {
  border-radius: 5px;
  background-color: #deefdd;
  padding: 20px;
}

/*	Media Queries
================================================== */

/* for 800px to 1200px—medium viewports */
@media only screen and (max-width: 1199px) and (min-width: 800px) {
    .pagewrap {
        margin-top: 40px;
    }
    
    .logo { 
        width: 300px;
        height: 141px;
    }
    
    h1 {
        margin-bottom: 40px;        
    }
    
    .topnav {
        clear: both;
        margin-top: 0px;
        margin-bottom: 30px;
    }
    
    /* For two column layout */
    .content-three, content-two { 
        grid-template-columns: auto auto;
    }
    
    .content-two .item1 {
        grid-column: 1 / 2;
        border-bottom: none;
        text-align: center;
    }
    
    .content-two .item2 {
        grid-column: 2 / 3;
        text-align: center;
    }
    
    /* To make item one span two columns on medium viewports */
    .content-three .item1 {
        grid-column: 1 / 3;
    }
    
    .item2, .item3 {
        border-bottom: none;
    }
}

/* for 1200px or more */
@media screen and (min-width: 1200px) {
    .pagewrap {
        max-width: 1400px;
        margin-top: 40px;
    }
    
    .logo { 
        width: 400px;
        height: 188px;
    }
    
    h1 {
        margin-bottom: 40px;
    }
    
    .topnav a {
        padding: 14px 19px;
    }
    
    /* To setup three columns */
    .content-three { 
        grid-template-columns: auto auto auto;
    }
    
    /* To setup two columns */
    .content-two { 
        grid-template-columns: auto auto;
    }
    
    /* To remove border at bottom of items when in three columns */
    .item1, .item2, .item3 {
        border-bottom: none;
    }
    
    .topnav {
        clear: both;
        margin-top: 20px;
        margin-bottom: 30px;
    }
    
    .topnav a:not(:first-child) {
        display: initial;
    }

    /* Hide the link that should open and close the topnav on small screens */
    .topnav .icon {
        visibility: hidden;
    }
}