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

@import url('https://fonts.googleapis.com/css?family=Alike, serif');
@import url('https://fonts.googleapis.com/css?family=Sriracha');
@import url('https://fonts.googleapis.com/css?family=Satisfy');
@import url('https://fonts.googleapis.com/css?family=IM+Fell+Double+Pica:400i');
@import url('https://fonts.googleapis.com/css?family=Roboto');

body {
    font-family: "Arial", serif;
    background-color: #fff;
    overflow-x: block;
}

header h1,
h3,
h4,
p {
    text-align: center;
    margin-left: 10px;
    margin-right: 5px;
}

header h1 {
    font-size: 100%
}
   
h5 {
    font-size: 40%
}

.opening-p {
    font-family: 'Sriracha', cursive;
    font-size: 120%;
}

.number1 {
    color: #fff;
    float: none;
}

.number2 {
    color: #fff;
    float: none;
}

.riseup {
    float: left;
}

.smallkeyword {
    text-align: center;
    padding-top: 10px;
    font-size: 150%;
    color: white;
    font-family: 'Alike', serif;
}

.largekeyword {
    text-align: center;
    font-size: 250%;
    color: white;
    font-family: 'Roboto', sans-serif;
    z-index: -0;
    top: 10px;
    position: absolute;
    width: 80px;
    height: 55px;
    left: none;
}

#tellmemore {
    text-align: center;
    padding-top: 20px;
}

#tellmemore a:hover {
    background-color: palegreen;
    color: #000;
    transition: 0.7s;
}

.corporate {
    float: left;
    margin-left: 40px;
    margin-bottom: 10px;
}

.homeoffice {
    float: left;
    margin-left: 40px;
    margin-bottom: 10px;
}

header {
    height: 550px;
}

.navbar {
    background-color: deepskyblue;
    font-size: 100%;
    overflow: hidden;
    height: 64px;
}

.navbar a {
    float: right;
    display: block;
    color: #fff;
    text-align: center;
    padding: 18px 8px;
    text-decoration: none;
    font-size: 15px;
    margin-right: none;
}

.navbar ul {
    margin: 8px 0 0 0;
    list-style: none;
}

.navbar a:hover {
    background-color: palegreen;
    color: #000;
    transition: 0.8s;
}

.side-nav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    opacity: 0.8;
    overflow-x: hidden;
    padding-top: 60px;
    transition: 0.8s;
}

.side-nav a {
    padding: 10px 10px 10px 30px;
    text-decoration: none;
    font-size: 22px;
    color: orange;
    display: block;
    transition: 0.5s;
}

.side-nav a:hover {
    color: #fff;
    transition: 0.5s;
}

.side-nav .btn-close {
    position: absolute;
    top: 0;
    right: 22px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: 0.8s;
    padding: 20px;
    overflow: hidden;
    width: 100%;
}

/* Image and text responsiveness controlled on all other pages through dedicated special named css documents.  Responsiveness on this page is controlled by reponsiveslidercss page .img and .responsive classes.  Background selector code option below is for use on providing background image on all other pages. */

/* #backgroundimage {
background: ****NOT USED ON THIS PAGE**** SEE ABOVE COMMENT
margin-top: none;
margin-left: none;
background-size: cover;
width: 100%;
height: 460px;
background-repeat: no-repeat;
display: block;
position: absolute;
background-position: 30%;
z-index: -1;
}*/

nav {
    overflow: hidden;
}

section {
    height: 1500px;
}

article {
    height: 100px;
    text-align: center;
    padding-top: 50px;
    border: solid 3px black;
    background-color: oldlace;
}

footer {
    text-align: center;
    height: 100px;
    color: white;
    background-color: black;
    padding-top: 50px;
}

#spacer-id {
    padding-top: 20px;
}

img {
    width: auto;
    height: auto;
    z-index: -1;
}

#logotry {
    z-index: -0;
    position: absolute;
    width: 80px;
    height: 55px;
    left: 10px;
    top: 5px;
}

#logotry-about {
    text-align: none;
    padding-top: 150px;
}

#quotesymbol {
    text-align: center;
}

.sectionopens {
    text-decoration: underline;
    text-align: center;
}

.rightside {

    padding-top: 30px;
    float: none;
    margin: 0 auto;
    ;
}

.leftside {
    margin-left: 10px;
    text-decoration: none;
}

.green6 {
    color: green;
    font-family: 'IM Fell Double Pica', serif;
    font-size: 150%;
}

.mini-nav a {
    text-decoration: none;
    font-size: 80%;
}

.strong {
    font-weight: bold;
}

/*Special optional CSS styling for 
Final Project versus Future Use.
SEE EXPLANATION BELOW*/

/*.exp1 {
    margin-left: 10px;
}

.exp2 { 
    float: left;
}

.exp3 {
    margin-left: 20px;
    float: left;
}*/

/*#wrapper {
    width: 1010px;
    margin: 0 auto;
    margin-left: 30px;
}
*/

/*#wrapper {
    margin:0;
    padding:0;
    text-align: center;	
    list-style:none;
}

#wrapper ul, li {
     padding: 2px 5px;				
}*/

#middle {
    /*float: none;
    float:right;
    width: 330px;*/
    background: orange
    /*padding-left: 10px;
    padding-right: 10px;
*/
}

#left {
    /*float: none;
    float:left;
    width: 330px;*/
    background: #9F9;
}

#right {
    /*float: none;
    float:right;
    width: 330px;*/
    background: deepskyblue;
}

/*CSS is coded here to make editing easier at a later point
should I find it desirable or necessary to edit qualification
strongpoints or change the page appearance*/

.linedup {
    text-align: center;
}

.formcenter {
    text-align: center;
}

.inthenews {
    margin: 0 auto;
    margin-top: 650px;
}

.underline {
    text-decoration: underline;
}

#hours {
    text-align: center;
    text-decoration: underline;
}

#city {
    text-align: center;
}

.metalking1 {
    font-family: 'Sriracha', cursive;
}

.themtalking1 {
    font-family: 'Satisfy', cursive;
    font-size: 120%;
    color: palevioletred
}

.metalking2 {
    font-family: 'Sriracha', cursive;
    text-decoration: underline;
    font-size: 120%;
}

#wrapper {
    text-align: center;
    list-style: none;
    text-decoration: none;
}

.slider2 {
    background: #fff;
    max-width: 300;
    max-height: 00;
    text-align: center;
    margin: 0 auto;
    padding: 50px;
}

@media(max-width: 480px) {
    .navbar-nav {
        display: none;
    }
}

@media(min-width: 768px) {
    .open-slide{
        display:none;
    }
}