@charset "UTF-8";
/* MIDWEST COSPLAYER & PHOTOGRAPHER CONNECTION PRINT CSS */

/***************** GLOBAL *****************/
body {
    font-family: 'Roboto', Helvetica, Arial, "sans-serif";
    font-size: 100%;
    color: #000;
    line-height: 1.4;
}
.bannercontent,
.footermain
.container {
    margin: 0 auto;
}
ul,
ol {
    margin-left: 25px;
}
img {
    width: 100%;
}
.bannercontent,
.footermain {
    width: 90%;
    max-width: 1260px;
    min-width: 768px;
}


/***************** NAV *****************/
nav {
    display: none;
}


/***************** BANNER *****************/
.banner {
    background: url(../images/home-banner.jpg) center center;
    background-size: cover;
    position: relative;
}
.bannercontent {
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.bannercontent h1 {
    color: #fff;
    font-weight: 300;
    text-transform: uppercase;
}
.banner {
    height: 25em;
}
.bannercontent h1 {
    font-size: 3.3em;
}


/***************** LATEST MEMBERS *****************/
.latestmembers a {
    text-decoration: none;
}
.latestmembers h2 {
    text-transform: uppercase;
    font-weight: 400;
    color: #000;
    font-size: 1.8em;
}
.homecard .cardimg {
    background-size: cover;
    background-position: center;
    height: 250px;
}
.homecard .cardtext {
    background-color: #fff;
}
.homecard h4 {
    color: #0F8779;
    font-weight: 500;
    border-bottom: 2px solid #DBDFDF;
    font-size: 1.3em;
}
.homecard h5 {
    color: #545454;
    font-weight: 500;
}
.homecard h6 {
    color: #545454;
    font-weight: 400;
}
.homecards {
    display: flex;
    justify-content: space-between;
}
.homecard {
    width: 23%;
}
.homecard h5, .homecard h6 {
    font-size: 1em;
}


/***************** COSPLAYERS BY STATE *****************/
.states h2 {
    text-transform: uppercase;
    font-weight: 400;
    color: #0F292B;
}
.states h3 {
    text-align: center;
    text-transform: uppercase;
}
.states {
    padding: 3em 0;
}
.states h2 {
    font-size: 1.8em;
    margin-bottom: 1em;
}
.state {
    width: 10%;
}
.stateicon {
    margin-bottom: 1em;
}
.statesrow {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}


/***************** TITLE BAR *****************/
.titlebar .container h1 {
    color: #000;
    text-transform: uppercase;
    font-weight: 500;
}
.titlebar .container h3 {
    text-transform: uppercase;
    font-weight: 400;
}
.sort label {
    text-transform: uppercase;
    font-weight: 400;
    white-space: nowrap;
}
.sort select {
    border: none;
    border-radius: 0px;
    font-family: inherit;
}
.titlebar {
    padding: 1.2em 0;
}
.titlebar .container {
    display: flex;
    justify-content: space-between;
}
.titlebar .container div:first-child {
    display: flex;
}
.titlebar .container div {
    margin: auto 0;
}
.titlebar .container h1 {
    margin-right: 0.8em;
    padding-right: 0.8em;
    font-size: 1.2em;
    border-right: 2px solid #000;
}
.titlebar .container h3 {
    margin: auto 0;
    font-size: 1.1em;
}
.sort form {
    margin: auto;
    display: flex;
}
.sort label {
    font-size: 1em;
    margin: auto 0.6em auto;
}
.sort select {
    padding: 0.4em;
    font-size: 0.8em;
}


/***************** STATE SORT *****************/
.statesort ul {
    list-style-type: none;
}
.statesort ul li {
    font-weight: 400;
    text-transform: uppercase;
}
.statesort ul li a {
    text-decoration: none;
}
.statesort ul {
    margin: auto 0;
    display: flex;
    justify-content: space-between;
}
.statesort {
    padding: 2em 0;
}
.statesort ul li {
    font-size: 1.1em;
}
.statesort ul .line {
    border-right: 2px solid #E2E2E2;
}


/***************** CARDS *****************/
.cards {
    display: flex;
    flex-wrap: wrap;
}
.cards a {
    text-decoration: none;
}
.card .cardimg {
    background-size: cover;
    background-position: center;
}
.card h4 {
    font-weight: 500;
    border-bottom: 2px solid #DBDFDF;
}
.card h5 {
    font-weight: 500;
}
.card h6 {
    font-weight: 400;
}
.card {
    width: 18%;
    margin-right: 2.5%;
    margin-bottom: 2em;
}
.card:nth-child(5n) {
    margin-right: 0;
}
.card .cardimg {
    height: 200px;
}
.card .cardtext {
    padding: 0.8em 1em;
}
.card h4 {
    font-size: 1.2em;
    padding-bottom: 0.2em;
    margin-bottom: 0.2em;
}
.card h5, .card h6 {
    font-size: 0.9em;
}


/***************** PROFILE *****************/
.profileheader .avatar {
    background-size: cover;
    background-position: center;
}
.profileheader h1 {
    font-weight: 300;
    margin-top: 0.5em;
    font-size: 2.6em;
}
.profileheader h3 {
    font-weight: 400;
    font-size: 1.3em;
    margin-bottom: 2.5em;
}
.profileheader .profiledetails h4 {
    font-weight: 400;
}
.profilesites .container .link a:link {
    text-decoration: none;
}
.profilesites .container .link a .sitetext {
    color: #606060;
}
.profilepref h3 {
    border-bottom: 2px solid #545454;
    font-weight: 400;
}
.profilebuttons .container{
    display: flex;
    flex-direction: row-reverse;
}
.profilebuttons button,
.profilebuttons button:link,
.profilebuttons button:visited {
    color: #fff;
    font-size: 0.9em;
    padding: 0.7em 1.1em;
    background-color: #0F8779;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    margin-left: 1.5em;
}
.profilebuttons button:hover,
.profilebuttons button:active,
.profilebuttons button:focus {
    background-color: #04DEC4;
}
.profilebio {
    color: #607476;
}
.profileheader {
    padding: 2em 0;
}
.profileheader .container {
    display: flex;
}
.profileheader .avatar {
    height: 200px;
    width: 200px;
    min-width: 200px;
    margin-right: 2em;
}
.profileheader .profiledetails {
    font-size: 1.1em;
    display: flex;
    flex-wrap: wrap
}
.profileheader .profiledetails h4 {
    padding-right: 0.7em;
    margin-right: 0.7em;
    border-right: 2px solid #A4A4A4;
}
.profileheader .profiledetails h4:last-child {
    padding-right: 0;
    margin-right: 0;
    border-right: none;
}
.profilesites .container {
    padding: 1em 0;
    margin-top: 2em;
    margin-bottom: 2em;

}
.profilesites .container {
    display: flex;
    flex-wrap: wrap;
}
.profilesites .container .link a:link {
    display: flex;
}
.profilesites .container .link a .siteicon {
    font-size: 1.5em;
    margin-right: 0.4em;
}
.profilesites .container .link a .sitetext {
    font-size: 1.1em;
    margin: auto 0;
    margin-right: 2em;
}
.profilepref {
    margin-bottom: 3em;
}
.profilepref .container {
    display: flex;
}
.profilepref .container div {
    width: 50%;
}
.profilepref .container div:first-child {
    margin-right: 1em;
}
.profilepref .container div:last-child {
    margin-left: 1em;
}
.profilepref h3 {
    padding-bottom: 0.3em;
    margin-bottom: 0.3em;
}
.profilebio {
    font-size: 1em;
    margin-bottom: 2em;
}
.profilebuttons .container {
    margin-bottom: 2em;
}


/***************** FORM *****************/
.profileform h2 {
    font-weight: 500;
}
label {
    display: inline-block;
}
input,
select,
textarea {
    border: 1px solid #D9D9D9;
    border-radius: 5px;
    width: 100%;
}
.formgroup {
    border-bottom: 2px solid #E4E4E4;
}
.profileform button{
    display: none;
}
.submitbutton {
    display: none;
}
textarea {
    font-family: inherit;
    font-size: 0.9em;
}
.editheader .container {
    padding: 0.7em 0;
    margin-bottom: 2em;
}
.profileform h2 {
    margin-top: 1em;
    margin-bottom: 0.5em;
}
.profileform .container form .formgroup {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 1.2em;
}
label {
    margin-bottom: 0.3em;
}
input,
select,
textarea {
    padding: 0.7em;
}
.input {
    margin-bottom: 1em;
}
.lg-third {
    width: 33.33333%;
}
.lg-third:nth-child(3n-2) {
    padding-right: 0.7em;
}
.lg-third:nth-child(3n-1) {
    padding-right: 0.7em;
    padding-left: 0.7em;
}
.lg-third:nth-child(3n) {
    padding-left: 0.7em;
}
.profileform button {
    font-size: 1em;
    padding: 0.7em;
}
.submitbutton {
    padding: 2em 0;
}

/***************** DELETE *****************/
.deleteform {
    text-align: center;
    display: flex;
    align-items: center;
}
.deleteform h2 {
    font-weight: 300;
}
.deletename {
    font-weight: 500;
}
.deletebuttons {
    display: flex;
    justify-content: center;
}
.deleteform button{
    display: none;
}
.deleteform .deletebutton {
    display: none;
}
.deleteform h2 {
    font-size: 2.5em;
    margin-bottom: 1em;
}
.deleteform button {
    font-size: 0.9em;
    padding: 1em 2em;
}

/***************** FOOTER *****************/

.footerleft {
    display: none;
}
.footerright {
    display: none;
}
.footerbottom {
    text-align: center;
    padding: 0.8em 0;
    font-size: 0.9em;
}