* {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* color scheme============================================================
color:  #21A179 green, #fff white, #333 black, #f4f4f4 eggshell/greyish */


/* Unversial Styles============================================
============================================================ */
#wrapper {
    width: 100%;
    margin: 0 auto;
    min-width: 560px;
    position: relative;
}

.main-content {
    margin-top: 52px;
}

header {
    position: fixed;
    top: 0;
    background: #444;
    width: 100%;
}

header, footer {
    /* background: #333;     */
    color: #f4f4f4;
    height:52px;
}

footer {
    background: #333;
    clear: both;
    width: 100%;
}

footer p {
    text-align: center;
    padding: 15px;
}

nav {
    position: absolute;
    display: inline-block;    
    top: -16px;
    right: 45px;
    width: 400px;
    padding: 16px;
    text-align: right;
}

header h3 {
    position: relative;
    top: 12px;
    left: 45px;
    display: inline-block;    
    cursor: auto;
}

header li {    
    margin: 0;
    padding: 15px 10px;
}

header li:hover {
    background-color: #555;
}

.active_nav li {
    background-color: #555;
    color: #21a179;
}

header a {    
    color: #f4f4f4;
}

h2 {
    font-size: 2rem;
}


header li {
    display: inline-block;
}

a {    
    text-decoration: none;
}

p {
    padding: 20px 10px;
}


/* Home Page Styling =================================
====================================================*/

.first_home_container {
        background-image: url("img/showcase.jpg");
        height: 400px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;      
}

.first_home_container section {
    text-align: center;
    color: white;
    padding-top: 80px;
    min-width: 500px;
}

.first_home_container h1 {
    font-size: 3rem;
    text-shadow: 1px 1px 2px #21a179;
    margin: 16px 0 -27px 0;
}

.first_home_container span {
    text-shadow: 1px 1px 2px #333;
}

span {
    color: #21a179;
}

.first_home_container p { 
    margin-top: 45px;
}

.first_home_container a {
    background-color: #333;
    color: white;
    padding: 10px;
}

.first_home_container a:hover {
    background-color: #444;
    box-shadow: 1px 1px 3px 1px black;
}

.coins  {
    background-image: url("img/photo-1.jpg");
    width: 50%;
    height: 320px;
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    float: left;
}

.history {
    background: #333;
    color: white;
    width: 44%;
    height: 320px;
    text-align: center;
    padding: 0 3%;
    float: left;
}
.second_home_container {
min-width: 450px;
}
.second_home_container h3 {
    padding-top: 45px;
}

.second_home_container p, .tri_box {
    font-size: .9rem;
}

.second_home_container a {
    background: #F4F4F4;
    color: #333;
    padding: 10px;
}

.second_home_container a:hover {
    background: lightgrey;
    box-shadow: 1px 1px 3px 1px black;
}

.tri_box {
    float: left;
    background: #F4F4F4;
    color: #333;
    width: 29%;
    min-height: 220px;
    text-align: center;
    padding: 2%;
}

.tri_box p {
    padding-top: 10px;
}

.green_bg {
    background: #21a179;
    width: 30%;
}

i {
    font-size: 4rem;
    padding: 20px;
}

/* About Page Styling ================================
====================================================*/

.main-about {
    color: #333;    
    max-width: 1280px;
    margin: auto;
    padding: 25px 60px;
}

.main-about img { 
    float: right;
    margin: 20px;
    width: 350px;
    box-shadow: 1px 1px 3px 1px rgba(51,51,51,.5);
    border-radius: 5px;
}

.ct-container {
    background-image: url("img/test-bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    min-height: 300px;
    box-shadow:inset 0 5px 3px 1px rgba(51,51,51,.75);
    clear: both;
    text-align: center;
    margin: 0 auto;
    padding: 25px;
}

.customer-testimonials {
    padding: 25px;
}

.customer-testimonials h2 { 
    color: #f4f4f4;
    text-shadow: 3px 3px 3px #333;
}

.customer-testimonials aside {
    background-color: rgba(244,244,244,.92);
    color: #333;
    border: 3px solid #21A179;
    border-radius: 80px 10px 40px 80px;
    box-shadow: 5px 5px 3px 1px rgba(51,51,51,.75);
    max-width: 650px;
    min-height: 104px;
    margin: 25px auto;
    padding: 10px;
    text-align: justify;
}

.test-img {    
    background-position: center;
    background-size: cover;
    width: 100px;
    height: 100px;
    border: 2px solid #21A179;
    border-radius: 50%;
    box-shadow: inset 2px 2px 1px 1px rgba(51,51,51,.75);
    margin-right: 10px;
    float: left;
}
/* Add testimonial images here after creating a new class or id for them - add class to html  */
.img-1 {
    background-image: url("img/person-1.jpg");
}

.img-2 {
    background-image: url("img/person-2.jpg");
}

.abt-foot {
    border-top: 1px solid #222;
}

/* Contact Page Styling ================================
====================================================*/

.contact-pg {
    background-image: url("img/test-bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 450px;
    box-shadow:inset 0 5px 3px 1px rgba(51,51,51,.75);
    clear: both;
    text-align: center;
    margin: 0 auto;
    padding: 160px 0 210px 0;
}

.gry-container {
    background-image: url("img/pw_maze_black.png");
    height: 240px;
}
.gry_box {
    display: inline-block;
    float: left;    
    color: #F4F4F4;
    width: 29.33%;
    text-align: center;
    padding: 2%;
}

fieldset {
    background-color: rgba(244,244,244,.92);
    color: #333;
    border: 3px solid #21A179;
    border-radius: 15px 15px 40px 10px;
    box-shadow: 5px 5px 3px 1px rgba(51,51,51,.75);
    width: 650px;   
    margin: 0 auto;
    text-align: left;
}

form {
    margin: o auto;
    width: 95%;
    padding: 1em;
}

form ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

form li {
    font-size: 1.5em;
    margin: 10px;
}

label {
    display: inline-block;
    margin-bottom: 10px;
}

textarea, input {
    width: 99%;
    padding: 5px;
}

input {
    vertical-align: top;
}

.right {
    float: right;
}

.gray_btn {
    background-color: #333;
    color: white;
    padding: 10px;
}

.gray_btn:hover {
    background-color: #444;
    box-shadow: 1px 1px 1px 1px black;
}