/* --------------------------------------
   Layout
   -------------------------------------- */


body {font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased;
   text-rendering: optimizelegibility;
   background: url('../../images/body-bg.jpg');
   background-position: center top;
   background-attachment: fixed;
   position: relative;
   letter-spacing: 0px;
 }



 .navbar-inverse { background-color: rgba(141,198,63, 0.9); border:none; font-size: 18px; margin-bottom: 0; border-radius: 0;}
.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { background-color: transparent;}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { background-color: transparent;}
.dropdown-menu { background-color: #FFFFFF}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-color: #FFFFFF;}
.navbar-inverse { background-image: none; }
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-image: none; }
.navbar-inverse { border-color: #DB1276}
.navbar-inverse .navbar-brand { color: #DB1276}
.navbar-inverse .navbar-brand:hover { color: #DB1276}
.navbar-inverse .navbar-nav>li>a { color: #FFFFFF;  font-weight: bolder;}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #FFFFFF;}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #DB1276}
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #FFFFFF}
.dropdown-menu>li>a { color: #333333}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #FFFFFF}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-top-color: #999999}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #FFFFFF}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-bottom-color: #999999}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: #FFFFFF}
nav.collapse.navbar-collapse.bs-navbar-collapse ul.nav.navbar-nav li a {padding-left: 5px;}
.menu-right {float: right; position: relative; margin-right: 50px; text-transform: capitalize !important;}
.menu-spanish {float: right;}
.facebook-icon {position: absolute !important; right: -50px; top:-13px; font-size: 16px; color: green;}
.facebook-icon .fa-circle {color: #005057;}
.facebook-icon .fa-facebook {color: #8ac13e; margin-top: 2px;}
.menu-left {position: relative;}
.menu-left > li > a {margin-left: 20px;}
.menu-left > li > a > i {color: #005057; font-size: 36px; padding-right: 5px; margin-top:5px; position: absolute; left: -16px; top:2px;}
.language-version {font-size: 12px !important; text-transform: uppercase; border-right: 1px solid #FFFFFF; margin-right: 10px;}
.top-jumbotron {
 
  background: url('../../images/bg-top-jumbo1.jpg'); 
  background-position: top right;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #FAFAFA; 
  margin-bottom: 0;
}

.top-jumbotron h1 {color: #8dc63f; line-height: 0.9;}
.top-jumbotron .header-tips {color: #005057; font-weight: italic; }
.jumbo-content {margin-bottom: 160px; margin-top: 50px; }
.jumbo-content2 {margin-top: 50px; }


.below-jumbo {background-color: #c0482e; }
.inc-wrap {padding: 20px 5px; font-size: 22px; color: #FFFFFF; margin-bottom: 0; letter-spacing: 0px; font-weight: bolder;}
.click-yellow {padding-right: 5px; font-size: 24px; color: #ffdd00; text-transform: uppercase;}
.click-yellow:hover { color: #ffdd00; text-decoration: underline; }


.quick-links {background-color: #8dc63f;}
.quick-links-row {margin:60px 2px;}

.about-us {background: url('../../images/about-us-bg.jpg'); 
  background-size: cover;
  background-repeat: no-repeat;}

.about-row {margin: 60px 2px;}
.about-us p {
  font-size: 16px;
  color: #FFFFFF; 
  line-height: 1.2; 
  text-indent: 40px; 
  margin-bottom: 5px; 
  font-weight: 500; 
  text-shadow: 1px 1px 2px rgba(153, 150, 150, 0.64); 

}
#about-heading {background-color: #8dc63f;}



.mission-header {margin-top: 0; color: #8dc63f; font-weight: bolder; margin-left: 20px; margin-bottom: 20px; font-size: 32px;}
.about-list {color: #FFFFFF; font-size: 22px; font-weight: 500; line-height: 1.2;}
.about-list >li {margin-bottom: 20px; text-shadow: 1px 2px 2px rgba(153, 150, 150, 0.24);}

.disctrict-att-row {margin:60px 2px;}
.district-att {
  background: url('../../images/attourney-bg.png');
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: 45%;
  background-color: #FFFFFF; color: #000;}
.district-att p {
  text-indent: 40px; 
  line-height: 1.2; 
  margin-bottom: 5px; 
  font-weight: 500; 
  font-size: 16px; 
  text-shadow: 1px 1px 2px rgba(153, 150, 150, 0.44); 


}
#attorney-heading { background-color: #005057 }





.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
.col-xs-15 {
    width: 20%;
    float: left;
}

p.first-paragraph {text-indent: 0px;}
.cyber-safety-tips {background-color: #c0482e; color: #FFFFFF; }
.tips-row {margin:60px 2px;}
.tips-row .subheading {font-weight: lighter; margin-bottom: 30px; font-size: 40px;  text-shadow: 1px 1px 2px rgba(153, 150, 150, 0.54); }
.tips-row h4 {text-transform: uppercase; margin-bottom: 20px; font-weight: bold; font-size: 17px; text-shadow: 1px 1px 2px rgba(153, 150, 150, 0.54); }
.tips-row img {max-width: 190px; margin-bottom: 20px;}
.tips-list {padding-left: 0px; line-height: 1.2; list-style-type: none;}
.tips-list li {margin-bottom: 10px; font-size: 16px; text-shadow: 1px 1px 2px rgba(153, 150, 150, 0.54); }


#safety-tips-heading {background-color: #FFFFFF; color: #c0482e;}

.resources-container {
  background:url('../../images/resources-bg.jpg'); 
  background-size: cover; 
  color: #FFFFFF;
  line-height: 1.3;
}

#resources-heading {color: #FFFFFF; background-color: #c0482e;}


.resources-row {margin: 60px 2px;}
.resources-row h5 {font-size: 18px; margin-top: 30px; margin-bottom: 20px; text-shadow: 1px 1px 2px rgba(153, 150, 150, 0.64);  }
.resources-row p {color: #FFFFFF; font-size: 16px; text-shadow: 1px 1px 2px rgba(153, 150, 150, 0.64); }

.yellow {color: #c29500;}
a.yellow:hover {color: #c29500;}
.bigger-font {font-size: 20px;}




.faq-container {
  line-height: 1.3; 
  background: url('../../images/faq-bg.jpg');
  background-position: bottom right;
  background-repeat: no-repeat;
  background-color: #FFFFFF; 
  color: #000;
  background-size: 55%;

}
#faq-heading {background-color: #005057;}

.faq-row {margin:60px 2px;}
.faq-row p {font-size: 16px; text-shadow: 1px 1px 2px rgba(153, 150, 150, 0.34); }
.faq-row .question {color: #005057; font-weight: 900;}
.faq-row .answer {color: #000;}


.news-container {
  background: url('../../images/news-bg.jpg');
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: 60%;
  background-color: #8dc63f;

}



#news-heading {color: #8dc63f; background-color: #FFFFFF;}

.news-row {margin:40px 2px;}

.news-right {margin-top: 110px; margin-left: 60px;}
.news-right h2 {color: #FFF; margin-bottom: 20px; text-shadow: 1px 1px 2px rgba(153, 150, 150, 1); }


.contact-container {background-color: #c0482e;}

#contact-heading {background-color: #8dc63f; color: #FFFFFF;}


.contact-row {margin: 40px 2px;}

.contact-form input  {margin-bottom: 10px; padding: 15px; border: 1px solid #182038;}
.contact-form select {margin-bottom: 10px; border:1px solid #182038;}
.contact-form textarea {margin-bottom: 10px; padding:15px; border:1px solid #182038; border-radius: 4px; width: 100%;}


.btn-submit {background-color: transparent; border: 1px solid #182038; padding: 10px 30px; color: #FFFFFF; text-transform: uppercase;}


.left-contact {margin-top: 50px;}
.left-contact p {
  color: #FFFFFF; 
  line-height: 1.3; 
  font-size: 18px; 
  margin-bottom: 30px; 
  font-weight: 100; 
  text-shadow: 1px 1px 2px rgba(153, 150, 150, 0.54); 

}

.main-footer {background-color: #005057;}
.footer-row {margin:40px 2px; margin-bottom: 20px; color: #FFFFFF;}
.footer-nav {font-size: 18px; margin-bottom: 30px;}
.footer-nav a {color: #FFFFFF; font-weight: bold;}
.footer-nav li + li::before {
    content: " | ";
    padding-right: 5px;
}


p.copyright {color: #8dc63f; font-size: 16px; margin-left: 15px; }
p.web-design {float: right; color: #FFFFFF; font-size: 16px; margin-top: 20px;}
.section-heading {
  font-size: 30px;
  color: #FFFFFF; 
  text-transform: uppercase; 
  font-weight: 900; 
  padding: 10px 30px; 
  margin-top: -1px;
  display: inline-block;
  border-radius: 12px;
  padding-right: 2em;
  -webkit-border-bottom-right-radius: 118px;
  -webkit-border-bottom-left-radius: 42px;
  -moz-border-radius-bottomright: 118px;
  -moz-border-radius-bottomleft: 42px;
  border-bottom-right-radius: 118px;
  border-bottom-left-radius: 42px;

}

.section-heading span {font-weight: normal; text-transform: lowercase; }


.btn-quick-link {
  background-color: rgba(26,98,104, 0.9);  
  color: #FFFFFF; 
  border-radius: 50%;
  width: 290px;
  height: 290px; 
  padding:10px;
  font-size: 34px;
  display: table-cell;
  text-align: center;
   }

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/

/*========== . Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
    
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

    .col-sm-15 {
            width: 20%;
            float: left;
        }
   .container-small {
        width: 300px;
    }
    .container-large {
        width: 970px;
    }

    /* Make Navigation Toggle on Desktop Hover */
    .dropdown:hover .dropdown-menu {
        display: block;
    }


}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

      .col-md-15 {
        width: 20%;
        float: left;
    }


   .container-small {
        width: 500px;
    }
    .container-large {
        width: 1170px;
    }
 nav.collapse.navbar-collapse.bs-navbar-collapse ul.nav.navbar-nav li a {padding-left: 5px; font-size: 17px;}
 /* The Spanish labels are far longer than the English ones, so on one line the
    menu sat at 17px next to a 12px "English" link. It now matches that link
    (.language-version). One class more than the rule above, so it wins; the
    Facebook icon keeps its own size, and the collapsed menu below 992px keeps
    the larger text. */
 nav.collapse.navbar-collapse.bs-navbar-collapse ul.nav.navbar-nav.menu-spanish li:not(.facebook-icon) a {font-size: 12px;}






}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

  .col-lg-15 {
        width: 20%;
        float: left;
    }
  .inc-wrap {padding: 20px 5px; font-size: 28px; color: #FFFFFF; margin-bottom: 0; letter-spacing: 0px; font-weight: bolder;}
  .click-yellow {padding-right: 5px; font-size: 30px; color: #ffdd00; text-transform: uppercase;}
  .click-yellow:hover { color: #ffdd00; text-decoration: underline; }


   .container-small {
        width: 700px;
    }
    .container-large {
        width: 1300px;
    }
.top-jumbotron {
 
  background: url('../../images/bg-top-jumbo1.jpg'); 
  background-position: top right;
  background-repeat: no-repeat;
  background-size:  75% ;
  background-color: #FAFAFA; 
  margin-bottom: 0;
}



 nav.collapse.navbar-collapse.bs-navbar-collapse ul.nav.navbar-nav li a {padding-left: 5px; fon}


}


/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
.container {width: 100%;}


}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
  .navbar-inverse { border: none; border-radius: 0px; font-size: 16px; margin-bottom: 0; z-index: 100;}
 
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

.top-jumbotron {height: 400px; background-size: auto 100% ; background-position: bottom left;  background: none; }
 .jumbo-content {margin-bottom: 10px; margin-top: 20px;}
.disctrict-att-row {margin-bottom: 140px;}
.btn-submit {margin-bottom: 40px;}
.news-container {background-image: none; background-color: #8dc63f;}
.news-right {margin-left: 0; margin-top: 40px; margin-bottom: 30px;}

}
/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
    
}

.container-small, .container-large {
    max-width: 100%;
}

.form-control {
height: 45px;
  line-height: 24px;

}