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


/**********************************************************\
************************* RESET ****************************
\**********************************************************/
* {
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
}



/**********************************************************\
************************ DEFAULT ***************************
\**********************************************************/

/***************** GLOBAL *****************/
body {
    font-family: 'Roboto', Helvetica, Arial, "sans-serif";
    font-size: 100%;
    color: #0F292B;
}
.bannercontent,
.footermain {
    margin: 0 auto;
}
.container {
    margin: 0 auto;
}
ul,
ol {
    margin-left: 25px;
}
img {
    width: 100%;
}
.noerrors {
    display: none;
}
.haserrors {
    margin-top: 0.5em;
    margin-bottom: -0.5em;
    font-size: 0.9em;
    color: darkred;;
    display: block;
}

/***************** NAV *****************/
nav {
    background-color: #0F292B;
}
.navcontent {
    display: flex;
}
nav ul {
    list-style-type: none;
}
nav ul li {
    font-weight: 300;
    text-transform: uppercase;
}
nav ul li a {
    text-decoration: none;
}
nav ul li a:link,
nav ul li a:visited {
    color: #fff;
    transition: 0.2s;
}
nav ul li a:focus,
nav ul li a:hover,
nav ul li a:active {
    color: #04DEC4;
}
.navuser a {
    color: #04BAA5;
    text-decoration: none;
    border: 1px solid #04BAA5;
    display: inline-block;
}
.navuser a:focus,
.navuser a:hover,
.navuser a:active {
    color: #fff;
    border: 1px solid #fff;
}



/***************** 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: #04DEC4;
    font-weight: 100;
    text-transform: uppercase;
}

/***************** ABOUT *****************/
.aboutbanner {
    background: url(../images/about-banner.jpg) center center;
    background-size: cover;
    position: relative;
}
.about h1 {
    color: #04DEC4;
    font-weight: 300;
    text-transform: uppercase;
}

/***************** LATEST MEMBERS *****************/
.latestmembers {
    background-color: #04BAA5;
}
.latestmembers a {
    text-decoration: none;
    transition: 0.3s;
}
.latestmembers a:hover {
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 999;
}
.latestmembers h2 {
    text-transform: uppercase;
    font-weight: 400;
    color: #fff;
}
.homecard .cardimg {
    background-size: cover;
    background-position: center;
}
.homecard .cardtext {
    background-color: #fff;
}
.homecard h4 {
    color: #0F8779;
    font-weight: 500;
    border-bottom: 2px solid #DBDFDF;
}
.homecard h5 {
    color: #545454;
    font-weight: 500;
}
.homecard h6 {
    color: #545454;
    font-weight: 400;
}


/***************** COSPLAYERS BY STATE *****************/
.states h2 {
    text-transform: uppercase;
    font-weight: 400;
    color: #0F292B;
}
.states h3 {
    text-align: center;
    text-transform: uppercase;
}
.state a:link,
.state a:visited {
    text-decoration: none;
    color: #0F8779;
}
.state a:hover {
    color: #04BAA5;
}


/***************** TITLE BAR *****************/
.titlebar {
    background-color: #04BAA5;
}
.titlebar .container h1 {
    color: #fff;
    text-transform: uppercase;
    font-weight: 500;
}
.titlebar .container h3 {
    text-transform: uppercase;
    color: #B5F3EC;
    font-weight: 400;
}
.sort label {
    text-transform: uppercase;
    color: #B5F3EC;
    font-weight: 400;
    white-space: nowrap;
}
.sort select {
    background-color: #0F8779;
    color: #fff;
    text-transform: uppercase;
    border: none;
    border-radius: 0px;
    font-family: inherit;
}


/***************** 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 li a:link,
.statesort ul li a:visited {
    color: #BEBEBE;
    transition: 0.2s;
}
.statesort ul li a:focus,
.statesort ul li a:hover,
.statesort ul li a:active {
    color: #04DEC4;
}
.statesort ul li .selected,
.statesort ul li .selected:link,
.statesort ul li .selected:visited,
.statesort ul li .selected:hover,
.statesort ul li .selected:focus,
.statesort ul li .selected:active {
    color: #04BAA5;
}


/***************** CARDS *****************/
.cards {
    display: flex;
    flex-wrap: wrap;
}
.cards a {
    text-decoration: none;
    transition: 0.3s;
}
.cards a:hover {
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 999;
}
.card .cardimg {
    background-size: cover;
    background-position: center;
}
.card .cardtext {
    background-color: #F5F5F5;
}
.card h4 {
    color: #0F8779;
    font-weight: 500;
    border-bottom: 2px solid #DBDFDF;
}
.card h5 {
    color: #545454;
    font-weight: 500;
}
.card h6 {
    color: #545454;
    font-weight: 400;
}


/***************** PROFILE *****************/
.profileheader .avatar {
    background-size: cover;
    background-position: center;
}
.profileheader h1 {
    color: #fff;
    font-weight: 300;
}
.profileheader h3 {
    color: #fff;
    font-weight: 400;
}
.profileheader .profiledetails h4 {
    font-weight: 400;
}
.profilesites .container {
    border-bottom: 2px solid #E4E4E4;
    border-top: 2px solid #E4E4E4;
}
.profilesites .container .link a:link {
    text-decoration: none;
}
.profilesites .container .link a .siteicon {
    color: #04BAA5;
}
.profilesites .container .link a .sitetext {
    color: #606060;
}
.profilesites .container .link a .siteicon:hover,
.profilesites .container .link a .siteicon:active,
.profilesites .container .link a .siteicon:focus,
.profilesites .container .link a .sitetext:hover,
.profilesites .container .link a .sitetext:hover,
.profilesites .container .link a .sitetext:active,
.profilesites .container .link a .sitetext:focus {
    color: #04DEC4;
}
.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;
}


/***************** FORM *****************/
.editheader {
    background-color: #04BAA5;
    color: #fff;
}
.profileform h2 {
    color: #04BAA5;
    font-weight: 500;
}
label {
    color: #7D7D7D;
    display: inline-block;
}
input,
select,
textarea {
    background-color: #FBFBFB;
    border: 1px solid #D9D9D9;
    border-radius: 5px;
    width: 100%;
}
input[type=file] {
    cursor: pointer;
}
.formgroup {
    border-bottom: 2px solid #E4E4E4;
}
.profileform button,
.profileform button:link,
.profileform button:visited {
    color: #fff;
    background-color: #0F8779;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
}
.profileform button:hover, 
.profileform button:active, 
.profileform button:focus {
    background-color: #04DEC4;
}
.submitbutton {
    display: flex;
    flex-direction: row-reverse;
}
textarea {
    font-family: inherit;
    font-size: 0.9em;
}

/***************** DELETE *****************/
.deleteform {
    background-color: #04BAA5;
    color: #fff;
    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,
.deleteform button:link,
.deleteform button:visited {
    color: #fff;
    background-color: #0F8779;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
}
.deleteform button:hover,
.deleteform button:active,
.deleteform button:focus {
    background-color: #04DEC4;
}
.deleteform .deletebutton,
.deleteform .deletebutton:link,
.deleteform .deletebutton:visited {
    margin-left: 2.5%;
    background-color: #bb2a2a;
}
.deleteform .deletebutton:hover,
.deleteform .deletebutton:active,
.deleteform .deletebutton:focus {
    background-color: #ff0000;
}

/***************** FOOTER *****************/
footer {
    background-color: #0F292B;
}

/* left */
.socialicons .icon a:link,
.socialicons .icon a:visited {
    color: #04BAA5;
}
.socialicons .icon a:hover,
.socialicons .icon a:active,
.socialicons .icon a:focus {
    color: #fff;
}

/* right */
.footerright a:link,
.footerright a:visited {
    text-decoration: none;
    color: #fff;
}
.footerright a:hover,
.footerright a:active,
.footerright a:focus {
    color: #04BAA5;
}
.footermain h4 {
    text-transform: uppercase;
    font-weight: 300;
}
.footermain ul {
    list-style-type: none;
}
.footermain ul li a:link,
.footermain ul li a:visited {
    text-decoration: none;
    color: #04BAA5;
}
.footermain ul li a:hover {
    color: #fff;
}

/* bottom */
.footerbottom {
    text-align: center;
    background-color: #244442;
    color: #fff;
}




/**********************************************************\
************************* PHONE ***************************
\**********************************************************/
@media screen and (max-width: 400px) {
    /***************** GLOBAL *****************/
    body {
        line-height: 1.4;
    }
    .bannercontent,
    .footermain {
        width: 90%;
    }
    .container {
        width: 90%;
    }

    
    /***************** NAV *****************/
    nav {
        padding: 15px 5%;
    }
    .navcontent {
        display: flex;
        justify-content: space-between
    }
    .logo {
        width: 140px;
    }
    .logo img {
        display: block;
    }
    nav ul {
        margin: auto 0;
        padding-top: 1.5em;
    }
    nav ul li {
        font-size: 1em;
        margin-bottom: 0.5em;
    }
    .navusermobile {
        margin: auto 0;
        font-size: 1em;
    }
    .navusermobile a {
        color: #04BAA5;
        text-decoration: none;
        border: 1px solid #04BAA5;
        display: inline-block;
    }
    .navusermobile a:focus,
    .navusermobile a:hover,
    .navusermobile a:active {
        color: #fff;
        border: 1px solid #fff;
    }
    .navusermobile a {
        padding: 0.4em;
    }
    .hamburger {
        margin: auto 0;
        font-size: 1.2em;
        color: #fff;
        cursor: pointer;
    }
    .navlinks {
        display: none;
    }
    .navuser {
        display: none;
    }
    
    #navlinks-mobile {
        display: none;
    }



    /***************** BANNER *****************/
    .banner {
        height: 16em;
    }
    .bannercontent h1 {
        font-size: 1.8em;
    }

    /***************** ABOUT *****************/
    .aboutbanner {
        height: 15em;
    }
    .about {
        padding: 2em 0;
    }
    .about h1 {
        font-size: 1.5em;
        font-weight: 400;
        margin-bottom: 0.3em;
    }
    .about p {
        font-size: 0.8em;
    }


    /***************** LATEST MEMBERS *****************/
    .latestmembers {
        padding: 1.5em 0;
    }
    .latestmembers h2 {
        font-size: 1.4em;
 
    }
    .homecard:nth-child(1) {
        margin-bottom: 1.5em;
        margin-right: 2.5%;
    }
    .homecard:nth-child(3), .homecard:nth-child(4) {
        display: none;
    }
    .homecard .cardimg {
        height: 250px;
    }
    .homecard .cardtext {
        padding: 0.8em;
    }
    .homecard h4 {
        font-size: 1.1em;
        padding-bottom: 0.2em;
        margin-bottom: 0.2em;
    }
    .homecard h5, .homecard h6 {
        font-size: 0.9em;
    }


    /***************** COSPLAYERS BY STATE *****************/
    .states {
        padding: 1.5em 0;
    }
    .states h2 {
        font-size: 1.4em;
        margin-bottom: 0.8em;
    }
    .state {
        width: 21%;
        margin-bottom: 1.5em;
    }
    .states h3 {
        font-size: 0.93em;
    }
    .stateicon {
        margin-bottom: 1em;
    }
    .statesrow {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }


    /***************** TITLE BAR *****************/
    .titlebar {
        padding: 1em 0;
    }
    .titlebar .container {
        justify-content: space-between;
    }
    .titlebar .container div:first-child {
        display: flex;
        margin-bottom: 0.5em;
    }
    .titlebar .container div {
        margin: auto 0;
    }
    .titlebar .container h1 {
        margin-right: 0.8em;
        padding-right: 0.8em;
        font-size: 1.1em;
        border-right: 2px solid #39CCBA;
    }
    .titlebar .container h3 {
        margin: auto 0;
        font-size: 1.0em;
    }
    .sort form {
        margin: auto;
        display: flex;
    }
    .sort label {
        font-size: 0.9em;
        margin: auto 0.6em auto 0;
    }
    .sort select {
        padding: 0.4em;
        font-size: 0.7em;
    }


    /***************** STATE SORT *****************/
    .statesort ul {
        margin: auto 0;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .statesort {
        padding: 1em 0;
    }
    .statesort ul li {
        font-size:0.85em;
        width: 24%;
        text-align: center;
        margin-bottom: 0.9em;
    }
    .statesort ul .line {
        border-right: 2px solid #E2E2E2;
        width: 1%;
    }
    .statesort ul .line:nth-child(8) {
        border: none;
        width: 0%;
    }


    /***************** CARDS *****************/
    .card {
        width: 47%;
        margin-right: 6%;
        margin-bottom: 1.2em;
    }
    .card:nth-child(2n) {
        margin-right: 0;
    }
    .card .cardimg {
        height: 160px;
    }
    .card .cardtext {
        padding: 0.6em 0.8em;
    }
    .card h4 {
        font-size: 1.05em;
        padding-bottom: 0.2em;
        margin-bottom: 0.2em;
    }
    .card h5, .card h6 {
        font-size: 0.85em;
    }


    /***************** PROFILE *****************/
    .profileheader {
        padding: 1em 0;
        background: linear-gradient(#04BAA5 65%, white 40%);
    }
    .profileheader .avatar {
        height: 150px;
        width: 150px;
        min-width: 150px;
        margin-right: 2em;
        margin: 0 auto;
    }
    .profileheader h1 {
        margin-top: 0.3em;
        font-size: 2em;
        color: #fff;
        text-align: center;
    }
    .profileheader h3 {
        font-size: 1.1em;
        margin-bottom: 2em;
        text-align: center;
    }
    .profileheader .profiledetails {
        font-size: 1em;
    }
    .profileheader .profiledetails h4 {
        text-align: center;
        margin-bottom: 0.3em;
    }
    .profilebio {
        font-size: 0.95em;
        margin-bottom: 1.5em;
    }
    .profilesites .container {
        padding: 1em 0;
        margin: 1.5em auto;
    }
    .profilesites .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .profilesites .container .link a:link {
        display: flex;
    }
    .profilesites .container .link a .siteicon {
        font-size: 1.3em;
        margin-right: 0.4em;
    }
    .profilesites .container .link a .sitetext {
        font-size: 1.0em;
        margin: auto 0;
        margin-right: 2em;
    }
    .profilepref {
        margin-bottom: 2em;
    }
    .profilepref .container div:first-child {
        margin-bottom: 1em;
    }
    .profilepref h3 {
        font-size: 1.1em;
        padding-bottom: 0.3em;
        margin-bottom: 0.3em;
    }
    .profilepref p {
        font-size: 0.95em;
    }
    .profilebuttons .container{
        margin-bottom: 1.5em;
    }



    /***************** FORM *****************/
    .editheader .container {
        padding: 0.7em 0;
        margin-bottom: 2em;
    }
    .editheader .container h1 {
        font-size: 1.3em;
    }
    .profileform h2 {
        margin-top: 1em;
        margin-bottom: 0.5em;
    }
    .profileform .container form .formgroup {
        padding-bottom: 1.2em;
    }
    label {
        margin-bottom: 0.3em;
    }
    input,
    select,
    textarea {
        padding: 0.7em;
    }
    .input {
        margin-bottom: 1em;
    }
    .profileform button {
        font-size: 1em;
        padding: 0.7em;
    }
    .submitbutton {
        padding: 2em 0;
    }


    /***************** DELETE *****************/
    .deleteform {
        height: 80vh;
    }
    .deleteform h2 {
        font-size: 1.7em;
        margin-bottom: 0.5em;
    }
    .deleteform button {
        font-size: 0.8em;
        padding: 0.7em 1.2em;
    }

    /***************** FOOTER *****************/
    .footermain {
        padding: 2em 0;
    }
    
    /* left */
    .footerleft {
        border-bottom: 2px solid #33494B;
        padding-bottom: 1em;
        margin-bottom: 1em;
    }
    .footerleft .logo {
        margin-bottom: 1.3em;
    }
    .socialicons {
        display: flex;
    }
    .socialicons .icon {
        font-size: 1.4em;
        padding-right: 2em;
    }
    .socialicons .icon:last-child {
        padding-right: 0;
    }


    /* right */
    .footerright {
        display: flex;
        flex-wrap: wrap        
    }
    .col1, .col2, .col3, .col4 {
        width: 50%;
    }
    .col1, .col2 {
        margin-bottom: 1em;
    }
    .footermain h4 {
        font-size: 1.2em;
        margin-bottom: 0.5em;
    }
    .footermain ul {
        margin: auto 0;
    }
    .footermain ul li {
        margin-bottom: 0.4em;
    }
    .footermain ul li a:link,
    .footermain ul li a:visited {
        font-size: 0.9em;
    }

    /* bottom */
    .footerbottom {
        padding: 0.8em 0;
        font-size: 0.6em;
    }
    
}



/**********************************************************\
************************* TABLET ***************************
\**********************************************************/
@media screen and (min-width: 401px) and (max-width: 768px) {
    /***************** GLOBAL *****************/
    body {
        line-height: 1.4;
    }
    .bannercontent,
    .footermain {
        width: 90%;
    }
    .container {
        width: 90%;
    }

    
    /***************** NAV *****************/
    nav {
        padding: 20px 5%;
    }
    .navcontent {
        display: flex;
        justify-content: space-between
    }
    .logo {
        width: 160px;
    }
    .logo img {
        display: block;
    }
    nav ul {
        margin: auto 0;
        padding-top: 1.5em;
    }
    nav ul li {
        font-size: 1em;
        margin-bottom: 0.5em;
    }
    .navusermobile {
        margin: auto 0;
        font-size: 1em;
    }
    .navusermobile a {
        color: #04BAA5;
        text-decoration: none;
        border: 1px solid #04BAA5;
        display: inline-block;
    }
    .navusermobile a:focus,
    .navusermobile a:hover,
    .navusermobile a:active {
        color: #fff;
        border: 1px solid #fff;
    }
    .navusermobile a {
        padding: 0.4em;
    }
    .hamburger {
        margin: auto 0;
        font-size: 1.2em;
        color: #fff;
        cursor: pointer;
    }
    .navlinks {
        display: none;
    }
    .navuser {
        display: none;
    }
    
    #navlinks-mobile {
        display: none;
    }



    /***************** BANNER *****************/
    .banner {
        height: 18em;
    }
    .bannercontent h1 {
        font-size: 2.3em;
    }

    /***************** ABOUT *****************/
    .aboutbanner {
        height: 18em;
    }
    .about {
        padding: 2.5em 0;
    }
    .about h1 {
        font-size: 2em;
        margin-bottom: 0.3em;
    }
    .about p {
        font-size: 1em;
    }


    /***************** LATEST MEMBERS *****************/
    .latestmembers {
        padding: 1.5em 0;
    }
    .latestmembers h2 {
        font-size: 1.4em;
        margin-bottom: 0.8em;
    }
    .homecards {
        display: flex;
        flex-wrap: wrap;
    }
    .homecard {
        width: 47.5%;
    }
    .homecard:nth-child(1), .homecard:nth-child(2) {
        margin-bottom: 1.5em;
    }
    .homecard:nth-child(2n-1){
        margin-right: 2.5%;
    }
    .homecard:nth-child(2n){
        margin-left: 2.5%;
    }
    .homecard .cardimg {
        height: 170px;
    }
    .homecard .cardtext {
        padding: 0.8em;
    }
    .homecard h4 {
        font-size: 1.1em;
        padding-bottom: 0.2em;
        margin-bottom: 0.2em;
    }
    .homecard h5, .homecard h6 {
        font-size: 0.9em;
    }


    /***************** COSPLAYERS BY STATE *****************/
    .states {
        padding: 1.5em 0;
    }
    .states h2 {
        font-size: 1.4em;
        margin-bottom: 0.8em;
    }
    .state {
        width: 21%;
        margin-bottom: 1.5em;
    }
    .states h3 {
        font-size: 0.93em;
    }
    .stateicon {
        margin-bottom: 1em;
    }
    .statesrow {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }


    /***************** TITLE BAR *****************/
    .titlebar {
        padding: 1em 0;
    }
    .titlebar .container {
        justify-content: space-between;
    }
    .titlebar .container div:first-child {
        display: flex;
        margin-bottom: 0.5em;
    }
    .titlebar .container div {
        margin: auto 0;
    }
    .titlebar .container h1 {
        margin-right: 0.8em;
        padding-right: 0.8em;
        font-size: 1.1em;
        border-right: 2px solid #39CCBA;
    }
    .titlebar .container h3 {
        margin: auto 0;
        font-size: 1.0em;
    }
    .sort form {
        margin: auto;
        display: flex;
    }
    .sort label {
        font-size: 0.9em;
        margin: auto 0.6em auto 0;
    }
    .sort select {
        padding: 0.4em;
        font-size: 0.7em;
    }


    /***************** STATE SORT *****************/
    .statesort ul {
        margin: auto 0;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .statesort {
        padding: 1em 0;
    }
    .statesort ul li {
        font-size: 1em;
        width: 24%;
        text-align: center;
        margin-bottom: 0.75em;
    }
    .statesort ul .line {
        border-right: 2px solid #E2E2E2;
        width: 1%;
    }
    .statesort ul .line:nth-child(8) {
        border: none;
        width: 0%;
    }


    /***************** CARDS *****************/
    .card {
        width: 47%;
        margin-right: 6%;
        margin-bottom: 2em;
    }
    .card:nth-child(2n) {
        margin-right: 0;
    }
    .card .cardimg {
        height: 190px;
    }
    .card .cardtext {
        padding: 0.6em 0.8em;
    }
    .card h4 {
        font-size: 1.05em;
        padding-bottom: 0.2em;
        margin-bottom: 0.2em;
    }
    .card h5, .card h6 {
        font-size: 0.85em;
    }


    /***************** PROFILE *****************/
    .profileheader {
        padding: 1.5em 0;
        background: linear-gradient(#04BAA5 60%, white 40%);
    }
    .profileheader .container {
        display: flex;
    }
    .profileheader .avatar {
        height: 150px;
        width: 150px;
        min-width: 150px;
        margin-right: 2em;
    }
    .profileheader h1 {
        margin-top: 0.3em;
        font-size: 2.3em;
        color: #fff;
    }
    .profileheader h3 {
        font-size: 1.1em;
        margin-bottom: 1em;
    }
    .profileheader .profiledetails {
        font-size: 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;
    }
    .profilebio {
        font-size: 0.95em;
        margin-bottom: 1.5em;
    }
    .profilesites .container {
        padding: 1em 0;
        margin: 1.5em auto;
    }
    .profilesites .container {
        display: flex;
        flex-wrap: wrap;
    }
    .profilesites .container .link a:link {
        display: flex;
    }
    .profilesites .container .link a .siteicon {
        font-size: 1.3em;
        margin-right: 0.4em;
    }
    .profilesites .container .link a .sitetext {
        font-size: 1.0em;
        margin: auto 0;
        margin-right: 2em;
    }
    .profilepref {
        margin-bottom: 2em;
    }
    .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 {
        font-size: 1.1em;
        padding-bottom: 0.3em;
        margin-bottom: 0.3em;
    }
    .profilepref p {
        font-size: 0.95em;
    }
    .profilebuttons .container{
        margin-bottom: 2em;
    }



    /***************** FORM *****************/
    .editheader .container {
        padding: 0.7em 0;
        margin-bottom: 2em;
    }
    .editheader .container h1 {
        font-size: 1.3em;
    }
    .profileform h2 {
        margin-top: 1em;
        margin-bottom: 0.5em;
    }
    .profileform .container form .formgroup {
        padding-bottom: 1.2em;
    }
    label {
        margin-bottom: 0.3em;
    }
    input,
    select,
    textarea {
        padding: 0.7em;
    }
    .input {
        margin-bottom: 1em;
    }
    .profileform button {
        font-size: 1em;
        padding: 0.7em;
    }
    .submitbutton {
        padding: 2em 0;
    }


    /***************** DELETE *****************/
    .deleteform {
        height: 49vh;
    }
    .deleteform h2 {
        font-size: 1.5em;
        margin-bottom: 0.8em;
    }
    .deleteform button {
        font-size: 0.8em;
        padding: 0.6em 1.2em;
    }


    /***************** FOOTER *****************/
    .footermain {
        padding: 2em 0;
    }
    
    /* left */
    .footerleft {
        border-bottom: 2px solid #33494B;
        padding-bottom: 1em;
        margin-bottom: 1em;
    }
    .footerleft .logo {
        margin-bottom: 1.3em;
    }
    .socialicons {
        display: flex;
    }
    .socialicons .icon {
        font-size: 1.4em;
        padding-right: 2em;
    }
    .socialicons .icon:last-child {
        padding-right: 0;
    }


    /* right */
    .footerright {
        display: flex;
        flex-wrap: wrap        
    }
    .col1, .col2, .col3, .col4 {
        width: 50%;
    }
    .col1, .col2 {
        margin-bottom: 1em;
    }
    .footermain h4 {
        font-size: 1.2em;
        margin-bottom: 0.5em;
    }
    .footermain ul {
        margin: auto 0;
    }
    .footermain ul li {
        margin-bottom: 0.4em;
    }
    .footermain ul li a:link,
    .footermain ul li a:visited {
        font-size: 0.9em;
    }

    /* bottom */
    .footerbottom {
        padding: 0.8em 0;
        font-size: 0.9em;
    }
    
}




/**********************************************************\
********************* DESKTOP SMALL ************************
\**********************************************************/
@media screen and (min-width: 769px) and (max-width: 1023px) {
    /***************** GLOBAL *****************/
    body {
        line-height: 1.4;
    }
    .bannercontent,
    .footermain {
        width: 90%;
    }
    .container {
        width: 90%;
    }

    
    /***************** NAV *****************/
    nav {
        padding: 20px 3em;
    }
    .navcontent {
        display: flex;
        justify-content: space-between
    }
    .logo {
        width: 180px;
    }
    .logo img {
        display: block;
    }
    nav ul {
        margin: auto 0;
        padding-top: 1.5em;
    }
    nav ul li {
        font-size: 1.1em;
        margin-bottom: 0.5em;
    }
    .navusermobile {
        margin: auto 0;
        font-size: 1em;
    }
    .navusermobile a {
        color: #04BAA5;
        text-decoration: none;
        border: 1px solid #04BAA5;
        display: inline-block;
    }
    .navusermobile a:focus,
    .navusermobile a:hover,
    .navusermobile a:active {
        color: #fff;
        border: 1px solid #fff;
    }
    .navusermobile a {
        padding: 0.4em;
    }
    .hamburger {
        margin: auto 0;
        font-size: 1.2em;
        color: #fff;
        cursor: pointer;
    }
    .navlinks {
        display: none;
    }
    .navuser {
        display: none;
    }
    
    #navlinks-mobile {
        display: none;
    }



    /***************** BANNER *****************/
    .banner {
        height: 20em;
    }
    .bannercontent h1 {
        font-size: 3em;
    }


    /***************** ABOUT *****************/
    .aboutbanner {
        height: 20em;
    }
    .about {
        padding: 3em 0;
    }
    .about h1 {
        font-size: 2.5em;
        margin-bottom: 0.3em;
    }
    .about p {
        font-size: 1em;
    }


    /***************** LATEST MEMBERS *****************/
    .latestmembers {
        padding: 2em 0;
    }
    .latestmembers h2 {
        font-size: 1.6em;
        margin-bottom: 0.8em;
    }
    .homecards {
        display: flex;
        justify-content: space-between;
    }
    .homecard {
        width: 23%;
    }
    .homecard .cardimg {
        height: 160px;
    }
    .homecard .cardtext {
        padding: 0.8em;
    }
    .homecard h4 {
        font-size: 1.1em;
        padding-bottom: 0.2em;
        margin-bottom: 0.2em;
    }
    .homecard h5, .homecard h6 {
        font-size: 0.9em;
    }


    /***************** COSPLAYERS BY STATE *****************/
    .states {
        padding: 2em 0;
    }
    .states h2 {
        font-size: 1.6em;
        margin-bottom: 0.8em;
    }
    .state {
        width: 10%;
    }
    .states h3 {
        font-size: 0.93em;
    }
    .stateicon {
        margin-bottom: 1em;
    }
    .statesrow {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }


    /***************** TITLE BAR *****************/
    .titlebar {
        padding: 1em 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.1em;
        border-right: 2px solid #39CCBA;
    }
    .titlebar .container h3 {
        margin: auto 0;
        font-size: 1.0em;
    }
    .sort form {
        margin: auto;
        display: flex;
    }
    .sort label {
        font-size: 0.9em;
        margin: auto 0.6em auto;
    }
    .sort select {
        padding: 0.4em;
        font-size: 0.7em;
    }


    /***************** STATE SORT *****************/
    .statesort ul {
        margin: auto 0;
        display: flex;
        justify-content: space-between;
    }
    .statesort {
        padding: 1.5em 0;
    }
    .statesort ul li {
        font-size: 1em;
    }
    .statesort ul .line {
        border-right: 2px solid #E2E2E2;
    }


    /***************** CARDS *****************/
    .card {
        width: 23.125%;
        margin-right: 2.5%;
        margin-bottom: 2em;
    }
    .card:nth-child(4n) {
        margin-right: 0;
    }
    .card .cardimg {
        height: 175px;
    }
    .card .cardtext {
        padding: 0.8em 1em;
    }
    .card h4 {
        font-size: 1.05em;
        padding-bottom: 0.2em;
        margin-bottom: 0.2em;
    }
    .card h5, .card h6 {
        font-size: 0.85em;
    }


    /***************** PROFILE *****************/
    .profileheader {
        padding: 1.5em 0;
        background: linear-gradient(#04BAA5 60%, white 40%);
    }
    .profileheader .container {
        display: flex;
    }
    .profileheader .avatar {
        height: 150px;
        width: 150px;
        min-width: 150px;
        margin-right: 2em;
    }
    .profileheader h1 {
        margin-top: 0.3em;
        font-size: 2.3em;
        color: #fff;
    }
    .profileheader h3 {
        font-size: 1.1em;
        margin-bottom: 1em;
    }
    .profileheader .profiledetails {
        font-size: 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;
    }
    .profilebio {
        font-size: 0.95em;
        margin-bottom: 1.5em;
    }
    .profilesites .container {
        padding: 1em 0;
        margin: 1.5em auto;
    }
    .profilesites .container {
        display: flex;
        flex-wrap: wrap;
    }
    .profilesites .container .link a:link {
        display: flex;
    }
    .profilesites .container .link a .siteicon {
        font-size: 1.3em;
        margin-right: 0.4em;
    }
    .profilesites .container .link a .sitetext {
        font-size: 1.0em;
        margin: auto 0;
        margin-right: 2em;
    }
    .profilepref {
        margin-bottom: 2em;
    }
    .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 {
        font-size: 1.1em;
        padding-bottom: 0.3em;
        margin-bottom: 0.3em;
    }
    .profilepref p {
        font-size: 0.95em;
    }
    .profilebuttons .container{
        margin-bottom: 2em;
    }



    /***************** FORM *****************/
    .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 {
        height: 56vh;
    }
    .deleteform h2 {
        font-size: 2em;
        margin-bottom: 1em;
    }
    .deleteform button {
        font-size: 0.9em;
        padding: 1em 2em;
    }

    /***************** FOOTER *****************/
    .footermain {
        padding: 2em 0;
    }
    
    /* left */
    .footerleft {
        border-bottom: 2px solid #33494B;
        padding-bottom: 1em;
        margin-bottom: 1em;
    }
    .footerleft .logo {
        margin-bottom: 1.3em;
    }
    .socialicons {
        display: flex;
    }
    .socialicons .icon {
        font-size: 1.4em;
        padding-right: 2em;
    }
    .socialicons .icon:last-child {
        padding-right: 0;
    }


    /* right */
    .footerright {
        display: flex;
        justify-content: space-between;
    }
    .footermain h4 {
        font-size: 1.2em;
        margin-bottom: 0.5em;
    }
    .footermain ul {
        margin: auto 0;
    }
    .footermain ul li {
        margin-bottom: 0.4em;
    }
    .footermain ul li a:link,
    .footermain ul li a:visited {
        font-size: 0.9em;
    }

    /* bottom */
    .footerbottom {
        padding: 0.8em 0;
        font-size: 0.9em;
    }
}




/**********************************************************\
************************ DESKTOP ***************************
\**********************************************************/
@media screen and (min-width: 1024px) {

    /***************** GLOBAL *****************/
    body {
        line-height: 1.4;
    }
    .bannercontent,
    .footermain {
        width: 90%;
        max-width: 1260px;
        min-width: 768px;
    }
    .container {
        width: 80%;
        max-width: 1260px;
        min-width: 768px;
    }

    
    /***************** NAV *****************/
    nav {
        height: 90px;
        padding: 20px 3em;
        display: flex;
        justify-content: space-between;
    }
    .navcontent {
        display: flex;
    }
    .logo {
        width: 180px;
    }
    .logo img {
        display: block;
    }
    nav ul {
        margin: auto 0;
        display: flex;
        justify-content: space-between;
    }
    nav ul li {
        font-size: 1.1em;
        margin-left: 2em;
    }
    .navuser {
        margin: auto 0;
        font-size: 1em;
    }
    .navuser a {
        padding: 0.4em;
    }
    .hamburger {
        display: none;
    }  
    #navlinks-mobile {
        display: none;
    }


    /***************** BANNER *****************/
    .banner {
        height: 25em;
    }
    .bannercontent h1 {
        font-size: 3.3em;
    }


    /***************** ABOUT *****************/
    .aboutbanner {
        height: 25em;
    }
    .about {
        padding: 3em 0;
    }
    .about h1 {
        font-size: 2.5em;
        margin-bottom: 0.3em;
    }
    .about p {
        font-size: 1em;
    }


    /***************** LATEST MEMBERS *****************/
    .latestmembers {
        padding: 3em 0;
    }
    .latestmembers h2 {
        font-size: 1.8em;
        margin-bottom: 1em;
    }
    .homecards {
        display: flex;
        justify-content: space-between;
    }
    .homecard {
        width: 23%;
    }
    .homecard .cardimg {
        height: 250px;
    }
    .homecard .cardtext {
        padding: 1em;
    }
    .homecard h4 {
        font-size: 1.3em;
        padding-bottom: 0.2em;
        margin-bottom: 0.2em;
    }
    .homecard h5, .homecard h6 {
        font-size: 1em;
    }


    /***************** COSPLAYERS BY STATE *****************/
    .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 {
        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 #39CCBA;
    }
    .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 {
        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 *****************/
    .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 {
        padding: 2em 0;
        background: linear-gradient(#04BAA5 65%, white 35%);
    }
    .profileheader .container {
        display: flex;
    }
    .profileheader .avatar {
        height: 200px;
        width: 200px;
        min-width: 200px;
        margin-right: 2em;
    }
    .profileheader h1 {
        margin-top: 0.5em;
        font-size: 2.6em;
        color: #fff;
    }
    .profileheader h3 {
        font-size: 1.3em;
        margin-bottom: 2.5em;
    }
    .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 *****************/
    .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 {
        height: 64vh;
    }
    .deleteform h2 {
        font-size: 2.5em;
        margin-bottom: 1em;
    }
    .deleteform button {
        font-size: 0.9em;
        padding: 1em 2em;
    }

    /***************** FOOTER *****************/
    .footermain {
        display: flex;
        padding: 3em 0;
    }
    
    /* left */
    .footerleft {
        border-right: 2px solid #33494B;
        width: 30%;
    }
    .footerleft .logo {
        margin-bottom: 1.7em;
    }
    .socialicons {
        display: flex;
    }
    .socialicons .icon {
        font-size: 1.6em;
        padding-right: 2em;
    }

    /* right */
    .footerright {
        padding-left: 3em;
        display: flex;
        justify-content: space-between;
        width: 70%;
    }
    .footermain h4 {
        font-size: 1.2em;
        margin-bottom: 0.5em;
    }
    .footermain ul {
        margin: auto 0;
    }
    .footermain ul li {
        margin-bottom: 0.4em;
    }
    .footermain ul li a:link,
    .footermain ul li a:visited {
        font-size: 0.9em;
    }

    /* bottom */
    .footerbottom {
        padding: 0.8em 0;
        font-size: 0.9em;
    }
}