style.css

/*
Theme Name: Saunders Technology
Author: Saunders Technology
Author URI: https://saunderstechnology.com/
Description: This is a custom theme for our own website.  It was created from raw HTML and CSS without a framework.
Version: 1.0
Tags: Responsive, Mobile first

----------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Color reference numbers
2.0 Base
    2.1 Alignments
    2.2 Clearings
3.0 Layout
    3.1 Header
    3.2 Navigation
    3.3 Splash Page
    3.4 Content
    3.5 Pages
    3.6 Sidebars
    3.7 Footer
4.0 Modules
    4.1 Tables
    4.2 Links
    4.3 Forms
    4.4 Lists
    4.5 Buttons
    4.6 Widgets
5.0 Typography
6.0 Media
*/

/*--------------------------------------------------------------
  _____     __           
 / ___/__  / /__  _______
/ /__/ _ \/ / _ \/ __(_-<
\___/\___/_/\___/_/ /___/
                         
    1.0 Colors
--------------------------------------------------------------*/


/*--------------------------------------------------------------
   ___              
  / _ )___ ____ ___ 
 / _  / _ `(_-</ -_)
/____/\_,_/___/\__/ 
                    
    2.0 Base
--------------------------------------------------------------*/
/*--------------------------------------------------------------
    2.1 Alignments
--------------------------------------------------------------*/

* {
  box-sizing: border-box;
  margin: 0;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.flexcon {
  display: flex;
}
#wrapper {
  min-height: 100%; /* Footer stays at bottom with short content */
	position: relative;
}
.align-left {
	text-align: left;
}
/*--------------------------------------------------------------
    2.2 Clearings
--------------------------------------------------------------*/
/* Keep images within their elements */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/*--------------------------------------------------------------
    2.3 Global Elements
--------------------------------------------------------------*/
body {
  background-color: #ddd;
  background-image: url('theme/crumpled.jpg');
  text-align: center;
}
/*--------------------------------------------------------------
   __                       __ 
  / /  ___ ___ _____  __ __/ /_
 / /__/ _ `/ // / _ \/ // / __/
/____/\_,_/\_, /\___/\_,_/\__/ 
          /___/                
    3.0 Layout
--------------------------------------------------------------*/
/*--------------------------------------------------------------
    3.1 Header
--------------------------------------------------------------*/
header h1 {
  text-align: center;
  background-color: #eee;
  color: navy;
  margin: 0;
  padding: 10px;
}
#banner {
  font-family: Cinzel, sans-serif;
  font-size: 2em;
  text-shadow: 5px 5px #aaa;
}

  /* On larger screens */
@media only screen and (min-width: 1239px) {
  #banner {
    height: 150px;
    font-size: 5em;
    font-weight: bold;
    line-height: 125px;
  }
}
/*--------------------------------------------------------------
    3.2 Navigation and menus
--------------------------------------------------------------*/
nav {
  background-color: #222;
  text-align: center;
  color: white;
  padding: 5px;
  margin-bottom: 20px;
}
.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.menu li a {
  text-decoration: none;
}
#main-menu li {
  padding: 5px;
  margin: 0 10px;
}
#main-menu li a{
  color: white;
}
#main-menu li a:visited {
  color: white;
}
#main-menu, #tm {
  display: none;    /* Hides menu until turned on */
  flex-direction: column;
  justify-content: center;
}
#tm:checked + #main-menu {
  display: flex;    /* Turns on menu */
}

  /* On larger screens */
@media only screen and (min-width: 768px) {
  nav {
    height: 40px;
  }
  #main-menu {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  #toggle-menu {
    display: none;
  }
}
/*--------------------------------------------------------------
    3.3 Splash Page
--------------------------------------------------------------*/

@media only screen and (min-width:992px) {
	.splash {
		margin: 0 100px;
	}
}

/*--------------------------------------------------------------
    3.4 Content
--------------------------------------------------------------*/
#content {
	padding-bottom: 3em;
}

  /* On larger screens */
@media only screen and (min-width: 768px) {
  .half {
   width: 50%;
   float: left;
  }
}
/*--------------------------------------------------------------
    3.5 Pages
--------------------------------------------------------------*/

@media only screen and (min-width: 992px) {
	.page {
		width: 60%;
		margin: auto;
	}
}

#animations {
  display: block;
}

  /* On larger screens */
@media only screen and (min-width: 768px) {
  #animations {
    display: block;
  }
  #alt-msg {
    display: none;
  }
}
/*--------------------------------------------------------------
    3.6 Sidebars
--------------------------------------------------------------*/

/*--------------------------------------------------------------
    3.7 Footer
--------------------------------------------------------------*/
footer {
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 0;
  height: 2em;
  width: 100%;
  background-color: #222;
  color: white;
  justify-content: center;
  margin-top: 0.5em;
}

  /* For larger screens */
@media only screen and (min-width: 768px) {
  footer {
    flex-direction: row;

  }
}
/*--------------------------------------------------------------
   __  ___        __     __   
  /  |/  /__  ___/ /_ __/ /__ 
 / /|_/ / _ \/ _  / // / / -_)
/_/  /_/\___/\_,_/\_,_/_/\__/ 
                                                            
    4.0 Module
--------------------------------------------------------------*/
/*--------------------------------------------------------------
    4.1 Tables
--------------------------------------------------------------*/

/*--------------------------------------------------------------
    4.2 Animations
--------------------------------------------------------------*/
/* Define a space to contain the animations */
#box-path {
  height: 450px;
  width: 350px;
  margin: auto;
}
#box {
  display: block;
  left: 25px;
  width: 50px;
  height: 50px;
  font-size: 16px;
  line-height: 50px;    /* Centers the text in the box */
  margin-top: 15px;     /* Box won't roll through the control buttons */
  position: relative;
  background-color: dodgerblue;
  animation-duration: 4s;
  transition-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes rolling {
  0% {transform: rotate(0deg); left: 25px;}
  50% {transform: rotate(360deg); left: 300px;}
  100% {transform: rotate(0deg); left: 25px;}
}

.roll {
  animation-name: rolling;
}
@keyframes box {
  0%   {left: 25px; top: 0;}
  25%  {left: 300px; top: 0;}
  50%  {left: 300px; top: 300px;}
  75%  {left: 25px; top: 300px;}
  100% {left: 25px; top: 0;}
}
.box {
  animation-name: box;
}

@keyframes fade {
  0%   {opacity: 0.5;}
  100% {opacity: 1.0;}
}

  /* On larger screens */
@media only screen and (min-width: 992px) {
  #box-path {
    height: 500px;
    width: 900px;
    margin: auto;
  }
  #box {
    display: block;
    height: 100px;
    width: 100px;
    left: 0;
    font-size: 20px;
    line-height: 100px;   /* Centers the text inside the box */
    margin-top: 30px;     /* Box won't roll through the control buttons */
  }
  @keyframes rolling{
    0%   {transform: rotate(0deg); left: 0;}
    50%  {transform: rotate(720deg); left: 800px;}
    100% {transform: rotate(0deg); left: 0;}
  }
  @keyframes box{
    0%   {left: 0; top: 0;}
    33%  {left: 800px; top: 0;}
    50%  {left: 800px; top: 350px;}
    83%  {left: 0; top: 350px;}
    100% {left: 0; top: 0;}
  }
}
/*--------------------------------------------------------------
    4.3 Forms
--------------------------------------------------------------*/

/*  Contact page  */
#contact {
  padding: 10px;
  text-align: left;
}
input {
  width: 100%;
}
#message {
  height: 100px;
  width: 100%;
}
.error {
  color: red;
}
textarea {
	height: 100px;
	width: 100%;
}

/* For larger screens */
@media only screen and (min-width: 768px) {
  #contact, input, textarea {
    width: 500px;
    margin: auto;
  }
  textarea {
  	height: 200px;
  }
  #send {
    width: 30%;
    margin-left: 35%;
  }
}
   
/*--------------------------------------------------------------
    4.4 Lists
--------------------------------------------------------------*/
ul li {
  margin: 1em;
}
/*--------------------------------------------------------------
    4.5 Buttons
--------------------------------------------------------------*/
button, .button {
  background-color: navy;
  color: white;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 5px 5px #666;
}
@media only screen and (min-width: 992px) {
  button, .button {
    padding: 20px;
    border-radius: 20px;
    box-shadow: 10px 10px #666;
  }
}
/*--------------------------------------------------------------
    4.6 Widgets
--------------------------------------------------------------*/
#widget-date {
  position: absolute;
  bottom: 50px;
  left: 50%;        /* Centers horizontally */
  transform: translateX(-50%);  /* adjusts for width of widget */
}
@media only screen and (min-width: 992px) {
  #widget-date {
    bottom: 100px;
  }
}
/*--------------------------------------------------------------
    4.7 Modals
--------------------------------------------------------------*/
.modal {
  display: block;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  overflow: auto;
  background-color: black;
  background-color: rgba(0,0,0,0.8);
}
.modal-content {
  background-color: black;
  padding: 20px;
  color: white;
  margin: auto;
  width: 80%;
}
.close {
  color: white;
  position: absolute;
  top: 5px;
  right: 15px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}
@media only screen and (min-width: 700px) {
  .modal {
    display: none;
  }
}
/*--------------------------------------------------------------
 ______                                  __       
/_  __/_ _____  ___  ___ ________ ____  / /  __ __
 / / / // / _ \/ _ \/ _ `/ __/ _ `/ _ \/ _ \/ // /
/_/  \_, / .__/\___/\_, /_/  \_,_/ .__/_//_/\_, / 
    /___/_/        /___/        /_/        /___/  

    5.0 Typography
--------------------------------------------------------------*/
p {
  margin: 10px;

}
h1 {
  margin: 1em;
}
blockquote {
  margin: 0 20px 20px;
  padding: 0 15px 0 25px;
  background-color: navy;
  color: white;
  font-size: 16px;
  font-style: italic;
  text-align: left;
  line-height: 1.5em;
}
.attribution {
  text-align: right;
}
.attribution:before {
  content: "~ ";
}
.quote:before, .attribution:after {
  display: inline;
  margin: 0;
  content: open-quote;
  font-size: 50px;
  color: white;
}
.quote:before {
  position: relative;
  top: 20px;
  left: -20px;
}
.attribution:after {
  display: block;
  content: close-quote;
  text-align: right;
  position: relative;
}
 /* For larger screens */
@media only screen and (min-width:992px) {
  .attribution:after {
    display: inline;
  }
  blockquote {
    margin: 20px 500px;
    padding: 50px;
  }
}
/*--------------------------------------------------------------
   __  ___       ___     
  /  |/  /__ ___/ (_)__ _
 / /|_/ / -_) _  / / _ `/
/_/  /_/\__/\_,_/_/\_,_/                         

    6.0 Media
--------------------------------------------------------------*/
.grid {
  display: flex;
  flex-wrap: wrap;
}
.container {
  width: 100%;
  position: relative;
  text-align: left;
  margin-top: 10px;
}
.portrait {
  max-width: 400px;
  max-height: 640px;
  position: relative;
  margin: 0 auto;
}
.landscape {
  position: relative;
  max-width: 640px;
  max-height: 400px;
  margin: 0 auto;
}
.grid img {
  height:100%;
}
.my-slides-2 {
  position: relative;
  animation: frombottom 0.4s;
}
@keyframes frombottom {
  0%   {top:400px; opacity: 0;}
  100% {top: 0; opacity: 1;}
}
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}
.numbertext {
  position: absolute;
  left: 5px;
  top: 5px;
  background-color: rgba(0,0,0,0.6);
  color: white;
  font-size: 1.2em;
  padding: 5px;
}
.prev, .next {
  position: absolute;
  text-align: left;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  font-size: 3em;
  padding: 15px;
  border-radius: 0 15px 15px 0;
}
.next {
  right: 0;
  border-radius: 15px 0 0 15px;
}
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.7);
}
.caption, #caption {
  color: white;
  text-align: center;
  padding: 5px;
  width: 100%;
  margin: 0;
}
.caption {
  background-color: rgba(0,0,0,0.7);
  bottom: 20px;
  position: absolute;
}
#caption {
  background-color: black;
}
.gallery {
  max-width: 400px;
  margin: 10px auto;
}
.thumbnails {
  flex-direction: row;
  padding: 0;
  cursor: pointer;
}

.thumbnails img:hover {
  opacity: 1.0;
}

.splash img {
	width: 100%;
	max-width: 700px;
	height: auto;
}
.page img {
	max-width: 320px;
	float: left;
	margin: 0 20px 10px 0;
}

@media only screen and (min-width: 1200px) {
  .container {
    width: 50%;
    float: left;
  }
  .gallery {
    margin: -230px auto 10px;
  }
  
}

/*--------------------------------------------------------------
   ___                             _         
  / _ \___ ___ ___  ___  ___  ___ (_)  _____ 
 / , _/ -_|_-</ _ \/ _ \/ _ \(_-</ / |/ / -_)
/_/|_|\__/___/ .__/\___/_//_/___/_/|___/\__/ 
            /_/                              
    7.0 Responsive
--------------------------------------------------------------*/
/*--------------------------------------------------------------
    7.1 Tablets > 768px
--------------------------------------------------------------*/

/*--------------------------------------------------------------
    7.2 Small desktop > 992px
--------------------------------------------------------------*/

/*--------------------------------------------------------------
    7.3 Large desktop > 1200px
--------------------------------------------------------------*/