@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400');

/*TYPOGRAPHY*/
body { font-family: 'Open Sans', sans-serif; -webkit-font-smoothing: antialiased;color: #dfdfdf; }
a {
    text-decoration: none;
}

a.cta {
    color: #FFFFFF;
    background-color: #ED2501;
    padding-top: 30px;
    padding-bottom: 30px;
    font-size: 26px;
    line-height: 30px;
    font-weight: 400;
    margin-top: 20px;
    margin-bottom: 20px;
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration:none;
}

a.cta:hover {
    color: #ED2501;
    background-color: #fff;
   
}

.text-content ul {
    margin: 32px;
}
.text-content li {
    list-style: disc;
    color: #ffffff;
    font-size: 18px;
    line-height: 20px;
    margin-bottom: 12px;
   
}

/*size*/

p { font-size: 18px; }
h1 { font-size: 38px; line-height: 40px; text-transform:uppercase;}
h2 {font-size: 30px;}
h3 { font-size: 28px}
h4 {font-size: 26px;}
h5 {font-size: 26px;}
h6 {font-size: 24px;}

@media screen and (max-width: 480px) {
   p { font-size: 17px; }
h1 { font-size: 28px; line-height: 30px; text-transform:uppercase;}
h2 {font-size: 24px;}
h3 { font-size: 24px}
h4 {font-size: 24px;}
h5 {font-size: 22px;}
h6 {font-size: 22px;}

}

h3, .strong { font-weight: 700; }
h1, h2, h3, h4, h5{ font-family: 'Open Sans', sans-serif; font-weight: 700; margin-bottom: 28px; text-transform: uppercase; margin-top: 16px;letter-spacing: 2px;}
h1 {
    background: url(../img/line.png) no-repeat;  
    background-position: bottom left;
    padding-bottom: 12px;
}
p.lead {
  
    font-size: 20px;
    line-height: 24px;
    color: #ffffff;
    margin-top: 12px;
}

.sub-head {
    font-weight: 400; margin-bottom: 20px; text-transform: uppercase; margin-top: 10px;font-size: 20px;
}

p { margin-bottom: 18px; margin-top: 18px;}

#mobile-form-wrap .mob-lead {
    font-size: 18px;
    color: #ffffff;
    line-height: 20px;
    color: #ffffff;
    text-shadow: none;
}

.btn-lg {
    font-size: 32px;
    padding: 13px;
    min-width: 300px;
    width: 100%;
    border: none;
    border-radius: 0;
    font-weight: 400; text-transform: uppercase;
}

.root-dropdown {
    background-color: #000000;
    font-size: 24px;
}


/*color*/
h1 {color:#FFFFFF;}
h2 { color: #ffffff; }
h3, h4 { color: #cccccc; }
.pink  {color:#ff0066;}
a:hover {color:red;}
a {color: #ffffff;}
/*BODY*/
body { background: #000000; }

/*HEADER*/
#logo { max-width: 280px; margin-left: 2.5%; margin-top: 20px; }
.header {   width: 100%; height: auto; display:block; }
.bg-img { background: url(../img/bg1-casual.jpg) no-repeat;  background-position: top left; background-size:100% auto;}
.header-contents { display: block; width: 100%; margin-top:80px; padding-bottom:80px; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.55); } 
@media screen and (min-width: 1400px) {
.header-contents { display: block; width: 100%; margin-top:120px; padding-bottom:200px;  }
}
@media screen and (max-width: 736px) {

    .header-contents { display: block; width: 100%; margin-top:38px; padding-bottom:124px;  }
     .hide-phone {
        display: none;
    }

    .bg-img { background: url(../img/mobile-header.jpg) no-repeat; background-size:100% auto;}
    .header-contents { display: block; width: 100%; margin-top:20px; padding-bottom:30px;
    }
}
@media screen and (max-width: 389px) {

   
}

section {z-index:200;}/* z-index to lift it above lightbox */
#mobile-form-wrap {z-index:200; width:90%; margin:auto;}/* z-index to lift it above lightbox on mobile */



/* MENU ///////////////////////////////////////////////////////////// */
/* Top nav bar */

.top-nav {
	background-color:#141414;
	height:80px;
	margin-bottom: 0px;
	display: block;
}
.nav-pills > li > a {
    color: #FFFFFF;
	margin-right: 0px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	padding-top: 14px;
	padding-right: 22px;
	padding-bottom: 14px;
	padding-left: 22px;
}
.nav-pills > li > a:hover {
background-color: #141414;
	
}
.nav-pills > li > a:active {
	background-color: #141414;
	color: #FFFFFF;
	
}

.nav-pills .globe  {
    color: #333333;
    background-image: url(../img/globe-icon.png);
    height: 40px;
    width: 30px;
    background-repeat: no-repeat;
    background-position: 5px 10px;
    background-size: 24px;
    }
@media screen and (max-width: 389px) {
   .nav-pills .globe  {
       display: none;
    }
    .nav-pills > li > a {
    color: #FFFFFF;
	margin-right: 0px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	padding-top: 12px;
	padding-right:18px;
	padding-bottom: 12px;
	padding-left:18px;
        font-size: 14px;
}
}
.nav-pills .login a {
	background-color: #ED2501;
	border-radius: 4px;
    color: #fff;
    padding: 12px;
	}
.nav-pills .login a:hover {
	background-color: #ED2501;
	color: #fff;
	}
.nav-pills {
	position: relative;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 400;
	margin-top: 16px;
	}

.nav-pills .dropdown-menu {
	margin-top:0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	background-color: #141414;
    color: #ffffff;

}
.dropdown-menu {
    width: 266px;
    font-size:18px;
    text-align: left;
    border-radius: 0;
    font-weight: 400;  text-transform: none;
    text-shadow: none;
}
.dropdown-menu > li > a {
    color: #ffffff;
}
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
   background-color: #000000; 
    border-color: none;
}

a.dropdown-toggle:focus {
	background-color: #141414;
}
a.dropdown-toggle:hover {
	background-color: #000000;
}

/* LOGIN ///////////////////////////////////////////////////////////// */
#login { position: absolute; color: #fff; background: #000; padding: 18px 0; width: 15%; bottom: 40px; left: 2.5%; text-align: center; text-transform: uppercase; font-weight: 700; letter-spacing: 3px; font-size: 20px; opacity: 0.5; transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; }
#login:hover { background: #61a0ff; opacity: 1; }

/* /// FORM  /////*/

.questions li > span label {
	
	font-weight: 700;
	font-size:38px;
	letter-spacing:2px;
    padding: 12px;
}
.form-heading{ font-family: 'Open Sans', sans-serif; font-weight: 400; margin-bottom: 12px; text-transform: uppercase; margin-top: 12px;letter-spacing: 2px;font-size: 36px; color: #ffffff; line-height: 38px;display: block;}

.form-subheading {
    font-family: 'Open Sans', sans-serif; font-weight: 700; margin-bottom: 20px; text-transform: uppercase; margin-top: 2px;letter-spacing: 2px;font-size: 18px; color: #ED2501; line-height: 18px;display: block;padding: 1px;
}
@media screen and (max-width: 768px) {
 .form-heading{ font-family: 'Open Sans', sans-serif; font-weight: 400; margin-bottom: 6px; text-transform: uppercase; margin-top: 8px;letter-spacing: 2px;font-size: 24px; color: #ffffff; line-height: 26px;display: block;}

.form-subheading {
    font-family: 'Open Sans', sans-serif; font-weight: 700; margin-bottom: 12px; text-transform: uppercase; margin-top: 2px;letter-spacing: 2px;font-size: 18px; color: #ED2501; line-height: 18px;display: block;padding: 2px;
}   
}
@media screen and (max-width: 389px) {
 .form-heading{ font-family: 'Open Sans', sans-serif; font-weight: 400; margin-bottom: 6px; text-transform: uppercase; margin-top: 8px;letter-spacing: 2px;font-size: 18px; color: #ffffff; line-height: 20px;display: block;}

.form-subheading {
    font-family: 'Open Sans', sans-serif; font-weight: 700; margin-bottom: 12px; text-transform: uppercase; margin-top: 2px;letter-spacing: 2px;font-size: 14px; color: #ED2501; line-height: 18px;display: block;padding: 2px;
}   
}

 /*///////   MEMBER GRID ///////////*/   
.member {
    height: 400px;
    overflow: hidden;
    background-color: #141414;
    padding-top: 12px;
    margin-bottom: 8px;
    margin: 0px;
    

}
 .member .photo {
     width: 160px;
     height: 160px;
     display: block;
     border-radius: 50%;
     background-size: cover;
   
    }

.member-name {
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    color: #ffffff;
}
.member-area {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    color: #ED2501;
}
 .member p {
     font-size: 12px;
 
 }
 .member p, .member .member-name, .member .member-area {
    text-align: center;
}

@media screen and (max-width: 1200px) {

    .member {
        height: 335px;
    }
    .member .photo {
        width: 140px;
        height: 140px;
    }
    .member .photo, .member p, .member .member-name, .member .member-area {
        font-size: 11px;
    }


}

@media screen and (max-width: 998px) {
    .member {
    height: 148px;
}
    .member .photo {
    width: 80px;
        height: 80px;
        float: left;
            margin-right: 10px;
        border-radius: 50%;
    }
        .member .photo, .member p, .member .member-name, .member .member-area {
    text-align: left;
}
    .member p{
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .member {
        height: 152px;
    }
    .member p{
        display: block;
    }

    .member .photo, .member p, .member .member-name, .member .member-area {
        font-size: 14px;
    }

}
@media screen and (max-width: 398px) {
    .member {
    height: 174px;
}
    .member .photo {
    width: 80px;
        height: 80px;
        float: left;
            margin-right: 10px;
        border-radius: 50%;
    }
        .member .photo, .member p, .member .member-name, .member .member-area {
    text-align: left;
}
}

.member-link:hover {  opacity: 0.5; transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; }

/* Area list */

.area-list li {
    width: 100%;
    background-color: #141414;
    padding-left: 12px;
    padding-bottom: 8px;
    padding-top: 8px;
    margin-bottom: 2px;
    color: #ffffff;
}

.breadcrumbs li {
    font-size: 13px;
    display: inline-block;
    padding:7px 17px;
    background-image: url(../img/breadcrumb-bg.png);
    background-position: left, center;
    margin-bottom: 20px;
    color: #999999;
}

.breadcrumbs li a {
    color: #999999;
}

 /*///////   SECTIONS ///////////*/   

    /*ABOUT*/
.about-sec {margin-top: 40px;}

/*FEATURES ICONS*/
.feat-row {
    background-color: #ED2501;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-left: 0px;
    margin-right: 0px;
 
}

/* SIDEBAR //////// */

.right-bar ul {
    margin: 0px;
}
.right-bar li {
    list-style: none;
}
li a {
    font-weight: 400;
}

li {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    padding-left: 5px;
    line-height: 24px;
}
	
/* PROFILES ////////////////////////////////// */



.profile-wrap {
    width:100%;
    background-color: #141414;
    padding: 40px;
    margin-bottom: 4px;
}

.profile-name {
    font-size: 26px;
    display: block;
    color: #ff0066;
   
    text-transform: uppercase;
}
.profile-area {
    font-size: 22px;
    color: #ffffff;
    display: block;
    
    text-transform: uppercase;
    margin-bottom: 12px;
}
.profile-contents {
    color: #cccccc;
    display: block;
    font-size: 18px;
}

a.contact {
    width: 47%;
    margin-left: 1%;
    line-height: 40px;
    height: 40px;
    font-size: 14px;
    text-align: center;
    display: inline-block;
    background-color: #ff0066;
    color: #ffffff;

    text-transform: uppercase;
    margin-top: 12px;
    margin-bottom: 12px;
}
a.contact:hover {
    color: #000000;
    background-color: #ffffff;
}
/* PROFILE MODAL */
.modal-content {
    position: relative;
    background-color: #000000;
    border: 0px;
    border-radius: 6px;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    background-clip: padding-box;
    outline: 0;
}
.btn-success {
    color: #ffffff;
    background-color: #999999;
    border-color: #999999;
}
.btn-danger {
    color: #ffffff;
    background-color: #ff0066;
    border-color: #ff0066;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger {
    color: #ffffff;
    background-color: #ff0066;
    border-color: #ff0066;
}
.modal-header {
    padding: 15px;
    border-bottom: 1px solid #131313;
    min-height: 16.42857143px;
}
.modal-header .close {
    margin-top: -17px;
    color: #ffffff;
    font-size: 32px;
}
/* PAGINATION */
.pagination ul > li > a, .pagination ul > li > span {
    float: left;
    padding: 4px 12px;
    line-height: 20px;
    text-decoration: none;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-left-width: 0;
    background-color: #000000;
}
.textcontent a {
    color: #cccccc;
}

/* FOOTER ///////////////////////////////////////////////////////////// */
footer {
    margin-top: 60px;
    padding-top: 50px;
    padding-bottom: 30px;
    background-color: #141414;
    line-height: 30px;
    
}
.footer-links a {
    background-color: #000000;
    color: #ffffff;
    padding: 10px;
    font-size: 14px;
    
}

footer a {
    color: #ffffff;
    padding: 8px;
}
.footer-logo {
    width: 160px;
    height: 30px;
}

/* LIGHTBOX ///////////////////////////////////////////////////////////// */
.lightbox{position:fixed;height:100%;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,0.7);-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d;z-index:10;display:none}



@media screen and (max-width:736px) {
#logo {  max-width: 250px;margin-top: 9px; }
    
/* MENU ///////////////////////////////////////////////////////////// */
    
    .menu-button {  top: 20px; }
.menu-wrap { position: fixed; z-index: 100; width: 100%; height: 72px; top: -72px; right: 0; background-color: black;  -webkit-transition:top 0.5s ease; -moz-transition:top 0.5s ease; -o-transition:top 0.5s ease; transition:top 0.5s ease;padding-left: 12px; padding-top: 12px; }
.menu-wrap ul { height: 100%; }
.menu-wrap ul li { display: inline-block; height: 40px; }
.menu-wrap ul li a { display: block;  width: 100%; height: 40px; }
.menu-wrap ul li a span { opacity: 100; width: 100%; color: #ffffff; text-transform:uppercase; padding: 8px; line-height: 40px;}

.menu-login {background-color: #61a0ff;}
/* BGs ///////////////////////////////////////////////////////////// */
.item > div { display: none; }

/* EXTRAS ///////////////////////////////////////////////////////////// */
.lightbox{background:rgba(0,0,0,0.5);}
.contents { position: relative; top: auto; margin-top: 20px; box-sizing: border-box; padding: 0 6%; z-index: 1000!important; } 
#login { position: relative; box-sizing: border-box; bottom: inherit; left: inherit; display: inline-block; margin: 0 15%; width: 70%; opacity: 0.9; }

}



.hubwrapper {
    display: block;
    width: 880px;
    margin-bottom: 20px;
    margin-top: 2px;
    padding: 0px;
    margin-left: auto;
    margin-right: auto;
}

.select-gender {
    display: block;
    padding: 12px;
    margin-bottom: 20px;
    width: 100%;
}
.select-gender a {

    --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    padding: 0px;
    text-align: center;
    line-height: 80px;
    height: 80px;
    width: 50%;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin: 0px;
    display: inline-block;
    text-shadow: none;

}

a.male {

    background-color: #fff;
    color: #ED2501;
    border-top-left-radius: 9999px;
    border-bottom-left-radius: 9999px;

}

a.female {
    background-color:#ED2501;
    color: #fff;
    border-top-right-radius: 9999px;
    border-bottom-right-radius: 9999px;

}

.form-gender {
    font-size: 14px;
    display: inline-block;
    float: left;
    margin-top: 8px;
    text-align: right;
    width: 100%;
}

.form-select {

    font-size: 16px;
    text-transform: uppercase;
    color: #fff;
    display: block;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: 1px;
}

.select-icon {
    margin-top: 10px;
    margin-right: 12px;
    position: relative;
    float: left;
    display: inline-block;
}

@media screen and (max-width: 768px) {

    .hubwrapper {
        display: block;
        width: 100%;
        margin-bottom: 40px;
        margin-top: 20px;
        padding: 18px;
    }

    .heading-wrapper {
        margin-left: 10px;
        margin-right: 10px;
    }
    .select-gender {
        padding: 0px;
        margin-bottom: 20px;
        margin-top: 20px;

    }
    .select-gender a {
        height: 70px;
        line-height: 70px;
        font-size: 16px;
        font-weight: 700;

    }
    .form-gender {
        font-size: 14px;
        display: inline-block;
        float: left;
        margin-top: 8px;
        text-align: left;
    }
}

@media screen and (max-width: 390px) {

    .hubwrapper {
        display: block;
        width: 100%;
        margin-bottom: 40px;
        margin-top: 20px;
        padding: 8px;
    }
}