/*
* File: public.css
* Created 11/3/2021
* 05/02/22 Meet Us mods
* 05/16/23 Meet Us mods - div.partners a img
*/

/* GLOBAL*/
.container {max-width: 1000px;}
.row { margin: 0px; }
.col-sm-4, .col-xs-12 { padding-right: 0; padding-left: 0; }
.maincontentdiv h1 {text-align:center;}
.maincontentdiv.padded {padding-left: 15px;padding-right: 15px;}
.maincontentdiv p {margin:20px 0;}
.error_header, .error_small, .error_medium {color:var(--orange);font-weight:700;}
.error_red {color:red; font-weight:700;}
img { max-width: 100%; height: auto; display: block; }
legend {border:0px;}
input {border: 1px solid var(--lightgray);}


/*BS sticky footer*/
html {position: relative;min-height: 100%;}
body {margin-bottom: 180px;} /* Margin bottom by footer height */
.mynavbar {
position: absolute;
bottom: 0;
width: 100%;
height: 180px; /*Set the fixed height of the footer here */
}


/*NAV MENU*/
.navbar-default .navbar-nav>li>a {
    color: var(--black);
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    color: var(--blue); border-bottom:3px solid; background-color: var(--white);font-weight: bold;
}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    color: var(--blue);
    /*background-color: var(--verylightgray);*/
}
.navbar-default {
    background-color: var(--white);
    border-color: var(--white);
}
.navbar { 
    max-width: 1100px;
    margin: auto;
}
.navbar-toggle {
    margin-top: 25px!important; 
}

/*change line pos*/
.navbar-nav>li>a {
    padding-bottom: 0;
}
.nav>li>a {
    padding: 8px 15px;
}
.bbline {width:100%;height:1px;border-top: 1px solid var(--lightergray);}

/*FOOTER*/
.mynavbar {
    padding: 60px 0;
    margin-bottom: 0;
    padding: 10px 0px;
    margin-bottom: 0px;
    background: var(--white);
    border-top: 1px solid var(--lightergray);
}
.address { padding-left: 30px; padding-bottom: 30px; background: none;}
.address p { font-size: 16px; line-height: 23px }
.social p { color: var(--gray);  margin: 30px 0 0 25px; }
.footerlink, .address, .social { margin-left: 0; padding-top: 14px; }
.footerlink ul { list-style: none; }
.footerlink ul li a { font-size: 16px; line-height: 30px; }
.footerlink ul li a:hover { text-decoration: underline; }
.footerlink,  .social {padding-top: 10px;}
.footerlink ul li a, .address p, .fab, .social p {color: var(--gray); cursor:pointer;}
.fab {font-size:40px; color: var(--gray); margin-left: 10px;} /*font awesome social icon mods*/
.footerlink ul li a:hover, .fab:hover {color: var(--lightgray);}
.dcenter { width:215px;  margin-left: auto; margin-right: auto;}
.dcenterlink { width:130px;  margin-left: auto; margin-right: auto;}

.scrollToTop { /*bottom scroll up icon*/
    width: 80px;
    height: 30px;
    margin: 10px auto;
    text-align: center;
    color: #FFF;
    border: 1px solid #FFF;
    padding: 0px 10px;
    display: block;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 400;
    border-radius: 90px;
}
    .scrollToTop:hover {
        text-decoration: none;
        border: 1px solid var(--blue);
        color: var(--blue);
        background: #fff;
        border: 1px solid var(--gray);
    }


/* PUBLIC WEBSITE HOMEPAGE */
.donateonline {
    width:100%;
    text-align:center;
    background:url(../../images/public/litm/midline.png) center center no-repeat;
}

.donateonline a {
    text-align: center;
    background: var(--blue);
    color: var(--white);
    border: none;
    font-family: calibri, serif;
    font-size: 24px;
    border-radius: 90px;
    outline: none;
    padding: 10px 25px;
}

.donateonline a:hover {
    background: var(--blueicb);
    border:#fff 1px solid;
    outline:0;
    text-decoration:none;
}

.features {
    margin: 50px 0;
}

.featuresdiv {
    float: left;
    text-align: center;
    width: 30%;
    max-width: 295px;
    margin: 20px 1.6%;
    border: 0;
    height: 210px;
}

.features.gi .featuresdiv { height: 165px;}
.features.ma .featuresdiv { height:310px;}

.shad_circ {
    align-content: center;
    border-radius: 50%;
    width: 230px;
    height: 230px;
    /*line-height: 230px;*/
    text-align: center;
    background-color: var(--white);
    color: var(--black);
    font-weight: 700;
    font-family: calibri;
    border: 1px solid var(--verylightgray);
    box-shadow: 5px 5px 10px var(--lightergray);
    font-size: 28px;
    margin: auto !important;
}

.featuresdiv h5 {
margin:15px 0;
}

.featuresdiv p {
margin-bottom:30px;
}

.featuresdiv a {
background:#FFF;
border:#e0e0e0 2px solid;
border-radius:3px;
color:#7a7a7a;
font-size:14px;
padding:8px 15px;
}

    .featuresdiv a.no_circle {
        border:0;
    }

.videodiv {
width:100%;
background:url(../../images/public/litm/video_bg.png) top center no-repeat;
padding:30px 0; 
margin-top: 30px;
height:510px;
}

.videoframe {
width:48%;
float:left;
padding-left:20px;
}

.videotitle {
width:45%;
float:right;
margin-top:75px;
}

.videotitle h1 {
line-height:90px;
font-size: 90px;
width:500px;
margin-top: 100px;
border:0;
}

.videodiv .inner {margin:auto;width:1020px;border:0;}
.slides {float:left;width:500px; border:0;}

.spotlightfulldiv {
width:1000px;
margin:0 auto;
padding:100px 0;
}

.spotlighttitle {
width:48%;
float:left;
background:url(../../images/public/litm/sportlight_arrow_bg.png) top right no-repeat;
height:351px;
}

.spotlighttitle h1 {
line-height:90px;
margin-top:110px;
}

.spotlighttitle h1 span {
color:#2d67b2;
}

.spotlightdata {
width:45%;
float:right;
}

.spotnews {
width:100%;
border-bottom:#dfdfdf 1px solid;
padding:20px 0;
}

.spotdata {
width:90%;
float:left;
}

.padign {
padding-top:0;
}

.spotdata a {
color:#000;
font-size:22px;
font-weight:700;
}

.spotarrow {
width:7%;
float:right;
}

.us_kid {
width:100%;
background:url(../../images/public/litm/16million_kid.jpg) top center no-repeat;
}

.kidtext {
width:45%;
float:right;
text-align:left;
margin:130px 0;
}

.kidtext h4 {
line-height:60px;
}

.twitter {
background-position:-43px 0;
}

.twitter:hover {
background-position:-43px -43px;
}

.google {
background-position:-86px 0;
}

.google:hover {
background-position:-86px -43px;
}

.wordpress {
background-position:-129px 0;
}

.wordpress:hover {
background-position:-129px -43px;
}

p.tagline {
margin-top:-70px!important;
}

.tagline {
    font-family:var(--ffam)!important;
    font-size: 90px;
    margin: -93px auto -20px;
    font-weight: 700;
    text-shadow:none;
    text-align:center;
    color:#fff;
}

.mission {
    width: 80%;
    font-weight: 300;
    margin: 30px auto;
    text-align: center;
}

.featuresdiv h3, .featuresdiv h4 {
    margin: 15px 0;
    text-align: center;
}

.featuresdiv p {
    margin-bottom: 15px;
}

.featuresdiv a {
    background: var(--white);
    border: 1px solid var(--lightergray);
    border-radius: 90px;
    color: var(--darkgray);
    font-size: 14px;
    padding: 8px 15px;
}

.featuresdiv a:hover {
    background: var(--lightergray);
    border: 1px solid var(--lightergray);
    text-decoration:none;
}

.spotlighttitle h1 {
    font-size: 90px;
}

.spotlighttitle h1 span {
    color: var(--blue);
}

.spotarrow img {
    display: none;
}

.spotdata {
    padding-top: 10px;
}

.spotdata a:hover {
   color: var(--darygray);
}

.spotlighttitle {
    margin-top: 50px;
}

.kidtext {
    margin: 108px 0;
}

.videotitle h1 span,.kidtext h4 span {
    color: var(--white);
}

h4.subtagline.covid {font-size: 36px;font-weight: bold;  text-align: center;color: var(--black);}
.donateonline {margin-top:20px;}
p.slides {color: var(--white); font-size: 12px; text-decoration:none; text-align:center}
p.slides a {color: var(--white);}


/*LOGIN*/
#loginform, #loginform h2, #loginform h3 { text-align:center!important;}
input.login {margin: 12px 0;padding: 5px;width: 200px;}
#login_reset {text-align:center;}
#login_reset h1 {text-align:center;}
.lostpwd {margin: 10px 0px; width: 250px;}

/*PASS RESET*/
.pass-reset {padding: 20px}
#pwd-reset-form {width: auto; max-width:650px;}
#pwd-reset-form #password_meter input[type="text"], #password_meter input[type="password"] { display: inline-block; margin:15px 0px 7px 0px; width: 350px; font-size: 18px; line-height: 0;}
#pwd-reset-form #password_meter .meter { margin: 0px; width: 353px; height: 10px; }
#pwd-reset-form #password_meter .meter.color_0 { background-color: red; }
#pwd-reset-form #password_meter .meter.color_1 { background-color: yellow; }
#pwd-reset-form #password_meter .meter.color_2 { background-color: orange; }
#pwd-reset-form #password_meter .meter.color_3 { background-color: #05e604; }
#pwd-reset-form #password_meter .meter.color_4 { background-color: green; }
#pwd-reset-form #password_meter .feedback { color: #9ab; font-size: 18px; padding: 0 .25em; margin-top: 1em; }
#pwd-reset-form #password-strength-text {font-size: 18px;}            
#pwd-reset-form #green_check {display:none;float:right;width:25px;margin-top:17px;margin-right:230px;}
#pwd-reset-form td.passdiv {padding-top:40px;}
#pwd-reset-form td.passdiv.mentee {padding-top:15px;}
#pwd-reset-form div.passdiv1 { width:96px; margin-left:350px; float:left; margin-top:70px; margin-bottom:120px; }
#pwd-reset-form div.passdiv2 { border: 1px solid gray; border-radius: 5px; padding:7px; width:428px; float:right}
/*show hide button*/ 
#pwd-reset-form ::-ms-reveal,::-ms-clear {display: none !important;}
#pwd-reset-form .hideShowPassword-toggle {background: transparent;border: 0;border-radius: 0.25em;color: #888;cursor: pointer;font-size: 0.7em;font-weight: bold;margin-top: -9px;margin-right: 0.5em;padding: 0.25em;text-transform: uppercase;-moz-appearance: none;-webkit-appearance: none;}
#pwd-reset-form .hideShowPassword-toggle:hover, button.hideShowPassword-toggle:focus { background-color: #eee; color: #555; outline: transparent; }
#pwd-reset-form .error {color: red; }


/*MEET US*/
p.read_more, span.read_more {margin-top: -10px; color: var(--blueicb); cursor:pointer;} 
p.staff {line-height:150%;}
.read_more_text {font-size: 17px;display:none;}
.inside.maincontentdiv h3.h3left {margin-bottom:15px !important;}
.imgleft {padding-bottom:0px;}
.imgleft img {width:160px;}
.staffbio { float:left; margin-top: 20px;}
.partners {text-align:center;  margin-bottom: 40px;}
.partners p {text-align:center !important;}
.partners p img {display:inline-block !important}
#board h3 {text-align:left !important; margin-bottom:0px;margin-top:30px}
#board p.board {text-align:left;margin-top:0px;margin-bottom:15px !important; } 
#board p.imgleft {margin:0px !important;}
#board img {float:left; width:160px;margin:35px 10px 0px 0px;}
br.cb {clear:both;}
.mu-csp-1 {width: 160px;}
.mu-csp-2 {margin-top:0px;}
.mu-csp-3 {margin-top:-3px;}
.mu-csp-4 {margin-top:17px}    
.mu-csp-5 {font-size:17px;}
.mu-csp-6 {clear:both;padding-top:17px}
 #bod {margin-bottom:-40px;}
div.partners a img {float:left;width:200px;height:auto; padding:30px;}
div.partners a img.np {padding:0;}
div.partners a img.sm {width:145px;margin-left:50px;}
div.partners .row {display: flex; align-items: center;flex-wrap: wrap;}
div.partners a img.cimg {margin:auto; float:none;}
div.partners a img.fr {float: right;}
div.partners a img.fl {float: left;}
.imgleft {float:left;margin:0px !important; padding-right:10px;padding-bottom:20px;} /* WS STAFF */
.contactdetails a {border:0px; font-size:17px; color:#555}
.pstaff {font-size:14px;}
.faq {padding-left:20px;}
.board {text-align: center;font-weight: bold;font-size: 18px;margin-top:0px !important;padding-top: 0px !important;} /* WS BOARD */
.imgleft img, #board img {border-radius:10px;box-shadow: 0 1px 6px 0 var(--lightgray);}

/*OUR WORK*/
#researchsec .one {width:28%;float:left;margin-left:150px;margin-right:100px;text-align:left !important;} 
#researchsec .two {width:35%;float:left;padding-top:10px;line-height:250%;text-align:left !important;} 
#researchsec .one h4 {color:#555;text-align:left !important; line-height:200%;font-size:18px !important;}
.db-ma {display:block; margin:auto;}
.csp1 {margin-top:0px;padding-top:0px;}
.csp2 {float: left;margin-left: 90px;margin-right: 50px;}
.csp3 {padding-top:50px;line-height:200%;}
.csp4 {padding-bottom:50px;}
.csp5{font-size:10px;line-height:150%;}
div.smler {font-size: 25px;  margin-bottom:20px;}
.featuresdiv.clickable h2 {margin-bottom:0px;}
.featuresdiv span.threelines.lg {font-size:50px;padding-top: 67px;line-height: 51px;} 
.featuresdiv .sm {font-size:18px;padding-top: 0; line-height: 20px;} 
.featuresdiv span {display:inline-block;} 

/*CONTACT US*/
.container.cu {max-width: 1120px;}
.container.cu .maincontentdiv p {
    margin:0;
}
.container.cu hr {
        border-top: 1px solid #eee;
}
.contact {
    display: flex;
    flex-wrap: wrap;
}
.contact div {
    border-radius: 20px;
    box-shadow: 0 1px 6px 0 var(--lightgray);
    padding: 0px 20px 30px 20px;
    margin: 20px 10px;
}
.contact-col {
    flex-basis: 30%;
}


/*DONATE*/
#pub_donation p.don-csp-1 {margin:0px 0px 0px 10px;padding:5px;}
#pub_donation p.don-csp-2 {margin:0px 0px 0px 7px;padding:5px;}
#pub_donation p.don-csp-2 {margin: 8px;}
#pub_donation label {font-weight:normal!important}
.don-csp-8 {float:left;width:40%;margin-right:30px;margin-top:20px;}
.don-csp-9 {float:left;width:42%;}
.don-csp-10 {text-align:left!important;margin-top:110px;}
.don-csp-11 {width:40%;margin:auto;}

/*CODE OF CONDUCT*/
.wrap
{
    white-space: pre-wrap; /* CSS3 */    
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */    
    white-space: -o-pre-wrap; /* Opera 7 */    
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

/*SPOTLIGHT*/
#spotlightart {margin-top:20px;}
#spotlightart p {margin:0px 0px 20px 0px;}
#spotlightart p a {font-weight:bold;color:#000;}
#spotlightart p a span {font-size:10px;}
#spotlightart p:first-line {font-size: 22px;} 

/*VMP INFO*/
.panel-body li {
    margin-top: 10px;
    margin-left: 40px;
}

/*MOBILE -- MIN BELOW*/
@media (min-width: 768px) {
    .headerfight { width: auto; }
    #loginform { width: 500px; margin: 30px auto 30px auto; }
    .container { width: 100%; } /*bootstrap override of 750px*/
}

@media (min-width: 800px) {
    .nav { background: var(--white); margin-top: 9px;}
}

@media (min-width: 768px) and (max-width: 992px) {
    ul#menu li a { padding-right: 5px; padding-left: 10px; font-size: 18px; }
}

@media (min-width: 1200px) {
    .social { margin-left:100px }
    .address {margin-left:50px  }
}

/*MOBILE MAX BELOW*/
@media(max-width: 1024px) {
    .tagline {font-weight:300; font-size:35px; margin-top:-38px; text-shadow:1px 1px #ccc; letter-spacing: -1px;}   /*was font-size:55px; margin-top:-52px;*/
    p.tagline {margin-top:-52px !important;}
    h1.tagline { font-size: 30px; margin-top: -33px; font-weight: bold;}
    h4.subtagline { font-size: 28px; margin-top: 23px; }
    h4.subtagline.covid {font-size: 23px;width: auto;margin-top: 21px;}
    .maincontentdiv h6 { width: 100%; text-align: center; margin: 20px 0px; }
    .slides {float:left;max-width:320px; }
    .owl-pagination { display:none;}
    .spotlightfulldiv {width:auto; padding:15px;}
    .spotlighttitle h1 {font-size:36px; font-weight:300; line-height:40px; margin-top:10px;letter-spacing:0;margin-left:63px;}
    .spotlighttitle {width: auto; float: none; background: url("../../images/public/litm/spotlight_arrow_rotate.jpg") 0px 40px no-repeat; height: 171px;}
    .spotdata { width: auto; float: none; }
    .spotlightdata { width: auto; }
    .spotarrow {margin-top:7px; }
    .kidtext  {margin:10px 0px; width:47%}
    .kidtext h4 {  line-height: 40px;  font-size: 30px;  }
    .us_kid { width: 100%; background: url("../../images/public/litm/16million_kid_mobile_1.jpg") top center no-repeat; background-size: cover;}
    .us_kid { height: 400px; }
    .spotlighttitle { background-position: center 40px !important; text-align: center; }
    .spotlighttitle h1 { margin-left: 0px !important; }
    .videodiv .inner { margin-left: 10px; }
    .videotitle h1 {margin-left:0px;}

     /*Wendy 10-2021 mods*/
    .spotlighttitle {background-position: center 60px !important; text-align: center;}
    .spotlighttitle h1 { text-align: center;} 
    .kidtext h1 {line-height: 30px;font-size: 24px; margin: 0px;}
    .spotlighttitle h1 { text-align: center;} 
    
}

@media (max-width: 992px) {
    .push { height: 150px !important; }
    h2 { font-size: 22px; }
    /*h3 { font-size: 17px; }*/
}

/*override BS3 768px setting for menu breakpoimnt*/
@media (max-width: 900px) {
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }
  .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
      display: none!important;
  }
  .navbar-nav {
      float: none!important;
      margin-top: 7.5px;
  }
  .navbar-nav>li {
      float: none;
      border-bottom: 1px solid rgb(231,231,231);
  }
  .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .collapse.in{
      display:block !important;
  }
}

@media (max-width: 880px) {
    .videotitle h1 {font-size: 30px; line-height:40px;letter-spacing:-1px; font-weight:300; margin-left:340px; margin-bottom:30px;}
    .videotitle {width:auto 20px;margin-top: 0px;float:none;}
    .videodiv {height:430px;}
    .videotitle h1 {margin-top: 0}
    .videodiv .inner {margin:auto; width:auto; max-width:320px;}
}

@media (max-width: 800px) {
    #loginxs { float: right; margin-right: 20px; margin-top: 25px; }
    .logindivxs a { text-align: center; background: #2d67b2; border-radius: 3px; color: #FFF; font-size: 14px; font-weight: 400; padding: 7px 11px; }
}

@media (max-width: 768px) {
    #login { margin-top: -35px; padding-right: 10px;}
    .midcenter {width:320px;margin:auto;} 
    .topnavbar { background: none;}    
    .featuresdiv { width: 230px; margin: 20px 0px;border: 0; }
    .features { text-align: center; padding-left:0; width: 230px; margin: auto; }
    .mynavbar { padding:10px 0px; } /*reduce space above the top link*/
    .videotitle h1 {font-size: 36px; line-height:38px;letter-spacing:-1px; font-weight:300; margin-left:40px; margin-bottom:30px; width:auto;}
    .videotitle { width: 100%;}
    h6.withbadge { font-size: 18px; line-height: 25px;  text-align: left;}
    img.withbadge {margin-right:15px;}
    .free_portal h4 {font-size: 28px; margin-top: 30px;}
    .vmplogo {float:none;width:auto;}
    .vmptext {float:none;width:auto;}
    .featuresdiv.basic-div {padding: 0px 15px 5px 15px;} /*for home page 3 divs*/
    .scrollToTop { background: var(--blue);}
    .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { border-bottom:0px}
    .videotitle h1 { font-weight: 500;} /*Wendy 10-2021 mods*/
    #bod {margin-bottom:0;}

    /* From pub-meet-us.css */
    div.partners {width:300px; margin:auto;}

    .featuresdiv span { line-height: 20px; padding-top: 20px; }
    .featuresdiv span.threelines { padding-top: 10px; line-height: 20px; }
    .featuresdiv h5 {font-size:18px; }    
    
    div.partners a img {float: none; margin: auto;}
    div.partners a img.fr {float: none;}
    div.partners a img.fl {float: none;}
    div.partners a img.sm {margin-left:auto;}

    #board img  {float: none; margin: auto; }
    h1#partners {font-size: 35px;}

    /*donation*/
    .don-csp-10 {text-align:left!important;margin-top:15px;}
    .don-csp-11 {width: 85%;}
    .don-csp-8, .don-csp-9 {width: 100%;}
 
}

@media (max-width: 400px) {
    .us_kid { height: 200px; }
    .kidtext h4 {  line-height: 23px;  font-size: 22px;  }
    .kidtext { margin: 5px 3px; width: 52%; } 
    h4.subtagline { font-size: 22px; margin-top: 23px; }
    h4.subtagline.covid {font-size: 23px; width: auto; margin-top: 21px;}
    .donateonline a {font-size: 20px;}
    .footerlink {margin-left: 0}
    .contact-col {
        min-width: 94%;
        margin: 0 10px;
    }
    .contact div {
       padding: 11px;
       margin: 10px auto;
    }
}

@media (max-width: 330px) {
    .kidtext {
        margin-top: -7px;
    }
}