@import url('https://fonts.googleapis.com/css?family=Philosopher:400,700');
h1 {
    font-family: 'Philosopher', sans-serif;
}
body {
background: #FFFFFF;
}

header {
    display: -ms-flexbox;
    display: flex;
    width:100%;
    max-width:1000px;
    margin:0 auto;
    border-bottom:1px solid #cccccc;
    padding-bottom:20px;
}
#logo {
    width:37%;
}
nav {
    width:63%;
    display: -ms-flexbox;
    display: flex;
    justify-content:flex-end;
    align-items:center;
}
nav a {
    font-family: 'Philosopher', sans-serif;
    font-size:20px;
    padding-left:10px;
    padding-right:10px;
    color:#000000;
    text-decoration:none;
}
nav a:hover {
    color:#14914B;
}
#wrapper {
    width:100%;
    max-width:900px;
    margin:20px auto;
    font-size:18px;
}
.flex-wrap {
    display: -ms-flexbox;
    display: flex;
    width:100%;    
    align-items:flex-start;
    padding-bottom:20px;
}
.flex-wrap-buy {
    display: -ms-flexbox;
    display: flex;
    width:100%;    
    align-items:center;
    flex-direction: row;
    padding-bottom:20px;
}
.flex-wrap:nth-child(odd) {
    flex-direction: row;
}
.flex-wrap:nth-child(even) {
    flex-direction: row-reverse;
}
.flex-image {
    width:28%;
}
.flex-image img {
    width:96%;
    max-width:218px;
}
.flex-body {
    width:72%;
}
footer {
    display: -ms-flexbox;
    display: flex;
    width:100%;
    max-width:1000px;
    margin:20px auto;
    border-top:1px solid #cccccc;
    padding-top:20px;
    align-items:center;
}
.footer-social {
    width:10%;
}
.footer-copyright {
    width:90%;
    display: -ms-flexbox;
    display: flex;
    justify-content:flex-end;
}
textarea {
    width: 320px;
    height:200px;
}




#banner , #mainbody{
background: white;
margin: auto auto;
width: 800px;
}

#banner {
background: url('images/title.png') white no-repeat;
margin-top: 50px;
height: 125px;
padding: 0 01px 0 0;
width: 799px;
}

#banner li {
display: block;
float: right;
margin: 85px 0px 0 05px;
height: 25px;
padding-top: 5px;
text-align: center;
}

#frontcover {
float: left;
margin: 0 50px 25px 0;
}

#frontcover h2 {
margin: 0 0 0 0;
}

#mainbody {
font-size: 18px;
padding: 25px 50px 25px 50px;
min-height: 400px;
width: 700px;
}

@media all and (max-width:800px) {
    header {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        border-bottom:none;
        padding-bottom:0;
    }
    #logo {
        width:100%;
    }
    nav {
        width:100%;
        margin-top:20px;
        border-top:1px solid #cccccc;
        border-bottom:1px solid #cccccc;
    }
}
@media all and (max-width:767px) {
    .flex-wrap, .flex-wrap-buy {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .flex-wrap:nth-child(even) {
        flex-direction: row;
    }
    .flex-image {
        width:100%;
        text-align:center;
    }
    .flex-image img {
        width:96%;
        max-width:218px;
        margin:auto auto;
    }
    .flex-body {
        width:100%;
    }
}