/*
Theme Name: methproject
Theme URI: https://wordpress.org/themes/methproject/
*/

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700);
  @import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700);


 /*====================== 1. General CSS ========================== */
 
 body, html {
     color: #eee;
     background: #000;
    font-family: 'Roboto', sans-serif;
    font-size: 17px;
    line-height: 28px;
    font-weight: 400;


 }
 ::selection {
     background: #1a1a1a;
     color: #ffffff;
 }
 ::-moz-selection {
     background: #1a1a1a;
     color: #ffffff;
 }
 .hide {
     opacity: 0;
 }
 #lazyload {
     width: 100%;
     height: 100%;
     position: fixed;
     z-index: 1031;
     background: #000;
 }
 .wrapper {
     max-width: 960px;
     margin: 0 auto;
 }
 .wrapper a {
 color:#a61b1b;
}
 .wrapper .white a {
 color:#fff;
 text-decoration:underline;
}
 .text-center {
     text-align: center;
 }
 .white {
     color: #FFF !important;
 }
 .theme-color {
 color:#a61b1b;
 }
 
  .col-centered{
float: none;
margin: 0 auto;
}
.footnotes {
font-size:12px;
}


.responsive-video {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 60px; overflow: hidden;}
.responsive-video iframe, .responsive-video object, .responsive-video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;}


 /* ==================== FLOAT ================ */
 .fleft {
     float: left;
 }
 .fright {
     float: right;
 }


/*
    ACCORDION
*/
 .panel-group .panel {
    margin-bottom: 5px;
}
.panel-group p {
    font-size: 16px;
}
.panel-group .panel {
    border:0;
    border-radius: 0;
    margin-top: 0 !important;
}
.panel-heading {
    border-radius: 0;
    border-top:1px solid transparent;
    padding: 0;
}
.panel-default>.panel-heading {
    color: #ccc;
    background-color: #2b2c2d;
    border-color: transparent;
}
.panel-title {
    font-size: 16px;
    color: inherit;
    font-weight: 400;
    display: block;
}
.panel-title a {
color:#fff;
    display: block;
    padding: 20px;
}
.panel-body {
  background: #0f0f0f;

}
.panel-body p{
    font-size: 16px;
    line-height: 24px;
    font-weight: 300;
    margin-bottom: 10px;
}

.panel-group .panel-heading+.panel-collapse .panel-body {
    border-top: 0;
}

/*

 /* ================== TYPHOGRAPHY =================*/
 p, ul {
        font-size: 17px;
    line-height: 28px;

     margin-bottom: 25px;
 }
  h1 {
     font-size: 34px;
     line-height: 38px;
      margin-top:28px;
     margin-bottom:38px;
     font-weight: 300;
      text-transform: uppercase;
 }
 h2 {
     font-size: 28px;
     line-height: 34px;
       margin-bottom:28px;
        margin-top:28px;
         font-weight: 300;
          text-transform: uppercase;
 }
 h3 {
     font-size: 24px;
     line-height: 30px;
       margin-bottom:10px;
        margin-top:28px;
         font-weight: 300;
          text-transform: uppercase;
 }
 h4 {
     font-size: 18px;
     line-height: 25px;
      text-transform: uppercase;
     
 }
 h5 {
     font-size: 15px;
     line-height: 23px;
      font-weight: 300;
       text-transform: uppercase;
 }
 h6 {
     font-size: 14px;
     line-height: 14px;
      font-weight: 300;
       text-transform: uppercase;
 }
 
 h1, h2, h3, h4, h5, h6 {
 font-family: 'Oswald', sans-serif;
     color: #fff;
     letter-spacing: 0.1em;
     text-transform: uppercase;
 
 }
 h1.black, h2.black, h3.black, h4.black, h5.black, h6.black {
     color: #000;
 }
 h1.white, h2.white, h3.white, h4.white, h5.white, h6.white {
     color: #FFF;
 }
 .grey {
     color: #c0c0c0;
 }
 .normal {
     color: #000;
 }
.clearfix {
clear: both;
}
 a, a:hover, i, i:hover, a img, a img:hover, input[type="button"], input[type="submit"], button {
     -webkit-transition: all .1s ease-in-out;
     -moz-transition: all .1s ease-in-out;
     -ms-transition: all .1s ease-in-out;
     -o-transition: all .1s ease-in-out;
     transition: all .1s ease-in-out;
     text-decoration:none;
 }
 a i, a i:hover {
     -webkit-transition: none;
     -moz-transition: none;
     -ms-transition: none;
     -o-transition: none;
     transition: none;
     text-decoration:none;
 }

 .uppercase {
     text-transform: uppercase;
 }
 .hovercolor:hover {
     color:#a61b1b;
     -webkit-transition: all .4s ease;
     -moz-transition: all .4s ease;
     -ms-transition: all .4s ease;
     -o-transition: all .4s ease;
     transition: all .4s ease;
 }
.title h1 {
    font-size: 38px;
    font-weight: 300;
    color: #a0a0a0;
     margin-top:0px;
     margin-bottom:15px;
}
.title h2 {
    margin: 0;
}
.title hr {
    width: 250px;
    height: 25px;
    background:url('/wp-content/themes/methproject/assets/images/rect_s1.png');
    margin: 10px auto 30px;
}

hr {
    width: 100%;
    height: 10px;
    background:url('/wp-content/themes/methproject/assets/images/rect_s1.png');
    margin: 40px auto 50px;
    border:none;
}

.title hr.white {
    width: 250px;
    height: 25px;
    background:url('/wp-content/themes/methproject/assets/images/rect_s2.png');
    margin: 20px auto 30px;
    border:none;
}
.img-circle {
    border-radius: 50%;
}
/* ================ BUTTON & ICON ================= */
 button {
   
    background-color: #a61b1b;
}
.button {
    color: #FFF;
    display: inline-block;
    padding: 8px 14px 7px;
    margin: 3px 5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 12px;
    cursor:pointer;
}
.button.theme-color {
    color: #FFF;
    padding: 10px 16px 9px;
    background-color: #a61b1b;
}
.outline {
border:2px solid #fff;
}
.button.theme-color:hover {
    -moz-box-shadow: inset 1px 1px 19px 15px rgba(255, 255, 255, 0.3);
    -webkit-box-shadow: inset 1px 1px 19px 15px rgba(255, 255, 255, 0.3);
    box-shadow: inset 1px 1px 19px 15px rgba(255, 255, 255, 0.3);
    text-decoration:none;
}
.button.theme-color i {
    font-style: 16px;
    margin-right: 5px;
}
.button.black {
    background: rgba(0, 0, 0, 1);
    border: 2px solid rgba(0, 0, 0, 1);
    color: #FFF;
}
.button.black:hover {
    background: rgba(25, 25, 25, 1);
    border:2px solid rgba(25, 25, 25, 1);
}
.button-white-side {
    border: 2px solid #FFF;
    color: #FFF;
}
.button-white-side:hover {
    color: #FFF;
    -moz-box-shadow: inset 1px 1px 19px 15px rgba(255, 255, 255, 0.3);
    -webkit-box-shadow: inset 1px 1px 19px 15px rgba(255, 255, 255, 0.3);
    box-shadow: inset 1px 1px 19px 15px rgba(255, 255, 255, 0.3);
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}
.black-border {
    border: 2px solid #333;
    color: #333;
}
.black-border:hover {
    color: #333;
    -moz-box-shadow: inset 1px 1px 19px 8px rgba(15, 15, 15, 0.2);
    -webkit-box-shadow: inset 1px 1px 19px 8px rgba(15, 15, 15, 0.2);
    box-shadow: inset 1px 1px 19px 8px rgba(15, 15, 15, 0.2);
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}
i.icon-social {
    width: 35px;
    height: 35px;
    display: inline-block;
    border-radius: 50%;
    vertical-align: middle;
    text-align: center;
    font-size: 18px;
    line-height: 33px;
    margin: 15px 3px;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}
i.icon-mini {
    width: 32px;
    height: 32px;
    border: 1px solid #111;
    display: inline-block;
    border-radius: 50%;
    vertical-align: middle;
    text-align: center;
    font-size: 16px;
    line-height: 31px;
    background: transparent;
    color: #111;
    margin: 15px 3px;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}
i.icon-mini:hover {
    background: #111;
    color: #FFF;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}
/* =============== NAVBAR ==================*/
 .navbar .wrapper {
/*   border-right: 1px solid #666;
    border-left: 1px solid #666;
    */
}
.navbar-default {
    background-color: rgba(0, 0, 0, 1);
    border: none;
 /*   border-bottom: 1px solid #666; */
    -webkit-transition:all .7s ease;
    -moz-transition:all .7s ease;
    color: #ddd;
    font-family: 'Oswald', sans-serif;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
  border-top-color: #888;
  border-bottom-color: #888;
  
}
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
  border-top-color: #888;
  border-bottom-color: #888;
}

.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
  border-top-color: #888;
  border-bottom-color: #888;
}

.navbar-default .navbar-nav > .dropdown > a .caret {
  border-top-color: #888;
  border-bottom-color: #888;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
    color: #999;
    background-color: transparent;
}
.navbar-nav>li>.dropdown-menu {
    border-radius: 0;
    background: rgba(0, 0, 0, 1);
    padding: 10px 0 15px;
    border-bottom: 2px solid #a61b1b;
    border-top:1px solid #666;
    -webkit-box-shadow:none;
    box-shadow: none;
    font-family: 'Oswald', sans-serif;
}

.dropdown-menu li a {
font-family: 'Oswald', sans-serif;
    color: #bbb;
    padding: 6px 25px;
    border-top:0px;
    font-size: 14px;
    border-bottom: 1px solid rgba(55, 55, 55, 0.08);
    -webkit-transition:all .7s ease;
    -moz-transition:all .7s ease;
}
.dropdown-menu li a:hover {
    background: rgba(55, 55, 55, 1);
    color: #a61b1b;
}



.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #ffffff;
  text-decoration: none;
  background: rgba(77, 77, 77, 1);
  outline: 0;
}

.dropdown-menu li:last-child a {
    border-bottom: none;
}
.navbig {
    padding: 20px 0;
    background-color: rgba(0, 0, 0, 0.3);
}
.dropbig {
    margin-top: 0 !important;
}
.navbar-brand {
    font-size: 21px;
    font-weight: 300;
   
}
.navbar-default .navbar-brand {
    color: #ddd;
}
.navbar-default .navbar-brand:hover {
    color: #a61b1b;
}
.navbar-default .navbar-nav>li>a {
    color: #ddd;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 14px;
}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li.active>a, .navbar-default .navbar-nav>li.visited>a {
    color: #a61b1b;
     font-family: 'Oswald', sans-serif;
     
}
.navbar-brand span, .logo span {
    color: rgba(152, 197, 80, 255);
    font-size: 50px;
}
.navbar-brand img.logo {
    position:relative;
    margin-top: -5px;
    padding-right: 5px;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
    background: rgba(55, 55, 55, 1);
    color: #fff;
    font-weight: 400;
}
/* @media (max-width: 979px) {
    .navbar {
        position: static;
        margin-bottom: 0;
        background: rgba(0, 0, 0, 1);
    }
}
*/
.navbar-nav>li>a.nav-spacer {
    height: 100%;
    display: inline-block;
    content:" ";
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 0;
    padding-right: 0;
    border-left: 1px solid #E5E5E5;
    margin-right: 0px;
    margin-left: 14px;
}


/* ====================== HEADER TEXT WITH -ARROW ========================*/
 .flatmain {
    position: relative;
}
.flatmain:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content:" ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-top-color: #a61b1b;
    border-width: 30px;
    margin-left: -30px
}
.flatmain-wrapper {
    background: #a61b1b;
    padding-top: 40px;
    padding-bottom: 20px;
}
.flatmain p {
    font-size: 18px;
    line-height: 31px; 
}
.flatmain a {
    color:#fff;
    text-decoration:underline; 
}

/* ======================== HEADER WITH BACKGROUND IMGS ====================== */
 .header-default {
 margin-top:10px;
    padding-top: 100px;
    padding-bottom: 60px;
    background-color:rgba(0, 0, 0, 0.0);
    height:320px;
}
.header-default-wrapper {
/*    background: url('/wp-content/themes/methproject/assets/images/bg_service.jpg') fixed; */
     background-image: url('/wp-content/themes/methproject/assets/images/header7.jpg');
    background-size: cover;
    background-position: center center;
}

.header1-wrapper {

     background-image: url('/wp-content/themes/methproject/assets/images/header1.jpg');
    background-size: cover;
    background-position: center center;
}

.header2-wrapper {

     background-image: url('/wp-content/themes/methproject/assets/images/header2.jpg');
    background-size: cover;
    background-position: center center;
}
.header3-wrapper {

     background-image: url('/wp-content/themes/methproject/assets/images/header3.jpg');
    background-size: cover;
    background-position: center center;
}

.header4-wrapper {

     background-image: url('/wp-content/themes/methproject/assets/images/header4.jpg');
    background-size: cover;
    background-position: center center;
}

.header5-wrapper {

     background-image: url('/wp-content/themes/methproject/assets/images/header5.jpg');
    background-size: cover;
    background-position: center center;
}

.header6-wrapper {

     background-image: url('/wp-content/themes/methproject/assets/images/header6.jpg');
    background-size: cover;
    background-position: center center;
}
.header7-wrapper {

     background-image: url('/wp-content/themes/methproject/assets/images/header7.jpg');
    background-size: cover;
    background-position: center center;
}

/* text on white bg */
.main-wrapper {
    padding-top: 30px;
    padding-bottom: 60px;
    z-index: inherit;
    background: #ddd;
}

.main-wrapper-black-bg {
/*    background: url('/wp-content/themes/methproject/assets/images/bg_service.jpg') fixed; */
     background: url('/wp-content/themes/methproject/assets/images/bg-how-dangerous-is-meth.jpg') fixed; 
    background-size: cover;
    background-position: center center;
}
.main-wrapper-black{
    padding-top: 30px;
    padding-bottom: 60px;
    z-index: inherit;
   background-color:rgba(0, 0, 0, 0.7);
    color:#fff;
}

.theme-color-wrapper {
    padding-top: 25px;
    padding-bottom: 40px;
    z-index: inherit;
background-color:#a61b1b;
    
}
.theme-color-wrapper a{
   color:#fff;
   text-decoration:underline;
    
}
.partners-wrapper{
    padding-top: 30px;
    padding-bottom: 60px;
    z-index: inherit;
background-color:#a61b1b;
    
}
.gethelp-wrapper{
    padding-top: 30px;
    padding-bottom: 60px;
    z-index: inherit;
background-color:#a61b1b;
   
}
.partners-wrapper p{
   font-size:12px;
   line-height:16px;
    color:#fff;
    margin:10px 0 20px 0;
    text-transform:uppercase;
}


.gethelp-top-wrapper{
    padding-top: 30px;
    padding-bottom: 60px;
    z-index: inherit;
 background-color:rgba(0, 0, 0, 0.6);
   
}

.gethelp-top-wrapper-bg {
 
   background: url('/wp-content/themes/methproject/assets/images/bg-gethelp.jpg')  fixed;
    background-size: cover;
    background-position: top right;
}

.sharestory-wrapper{
    padding-top: 30px;
    padding-bottom: 60px;
    z-index: inherit;
 background-color:rgba(0, 0, 0, 0.9);
   
}

.sharestory-wrapper-bg {
 
   background: url('/wp-content/themes/methproject/assets/images/bg-sharestory.jpg')  fixed;
    background-size: cover;
    background-position: top right;
}

.bg-school-wrapper {
/*    background: url('/wp-content/themes/methproject/assets/images/bg_service.jpg') fixed; */
     background: url('/wp-content/themes/methproject/assets/images/background.jpg') fixed;
    background-size: cover;
}
.bg-school {
     padding-top: 30px;
    padding-bottom: 60px;
    background-color:rgba(0, 0, 0, 0.6);
}

.bg-volunteer-wrapper {
/*    background: url('/wp-content/themes/methproject/assets/images/bg_service.jpg') fixed; */
     background: url('/wp-content/themes/methproject/assets/images/volunteer.jpg') fixed;
    background-size: cover;
}
.bg-volunteer {
     padding-top: 30px;
    padding-bottom: 60px;
    background-color:rgba(0, 0, 0, 0.8);
}

.bg-get-involved-wrapper {
/*    background: url('/wp-content/themes/methproject/assets/images/bg_service.jpg') fixed; */
     background: url('/wp-content/themes/methproject/assets/images/background.jpg') fixed;
    background-size: cover;
}
.bg-get-involved {
     padding-top: 30px;
    padding-bottom: 60px;
    background-color:rgba(0, 0, 0, 0.6);
}

.docs-wrapper{
    padding-top: 30px;
    padding-bottom: 60px;
    z-index: inherit;
 background-color:rgba(0, 0, 0, 0.3);
   
}

.docs-wrapper-bg {
 
   background: url('/wp-content/themes/methproject/assets/images/background.jpg')  fixed;
    background-size: cover;
    background-position: top right;
}

.tac-volunteer-wrapper{
    padding-top: 30px;
    padding-bottom: 40px;
background-color:#a61b1b;
    
}
.mobilize-wrapper{
    padding-top: 30px;
    padding-bottom: 60px;
 background-color:rgba(0, 0, 0, 0.6);
    
}
.bg-mobilize {
/*    background: url('/wp-content/themes/methproject/assets/images/bg_service.jpg') fixed; */
     background: url('/wp-content/themes/methproject/assets/images/background.jpg') fixed;
    background-size: cover;
}

/* home whats happening */
 .bg-whats-hap {
     padding-top: 30px;
    padding-bottom: 60px;
    background-color:rgba(0, 0, 0, 0.6);
}
.bg-whats-hap-wrapper {
/*    background: url('/wp-content/themes/methproject/assets/images/bg_service.jpg') fixed; */
     background: url('/wp-content/themes/methproject/assets/images/background.jpg') fixed;
    background-size: cover;
}

/* home our work */
 .bg-our-work {
     padding-top: 30px;
    padding-bottom: 60px;
    background-color:rgba(0, 0, 0, 0.6);
}
.bg-our-work-wrapper {
/*    background: url('/wp-content/themes/methproject/assets/images/bg_service.jpg') fixed; */
     background: url('/wp-content/themes/methproject/assets/images/cell-bg.jpg') fixed;
    background-size: cover;
}

.bg-black {
     padding-top: 30px;
    padding-bottom: 60px;
    background-color:rgba(0, 0, 0, 1);
}

.bg-map-wrapper {
background-color:#a61b1b;

}
.bg-red{
    padding-top: 20px;
    padding-bottom: 60px;
    z-index: inherit;
 background-image: url('/wp-content/themes/methproject/assets/images/usmap.png');
 background-position: center center;
    background-size: cover;
    
}

 .bg-default {
     padding-top: 30px;
    padding-bottom: 60px;
    background-color:rgba(0, 0, 0, 0.6);
}
.bg-default-wrapper {
/*    background: url('/wp-content/themes/methproject/assets/images/bg_service.jpg') fixed; */
     background: url('/wp-content/themes/methproject/assets/images/bg-how-can-meth-lead-to-unwanted-sex.jpg') fixed;
    background-size: cover;
}
 .bg-events {
     padding-top: 30px;
    padding-bottom: 60px;
    background-color:rgba(0, 0, 0, 0.5);
}
.bg-events-wrapper {
/*    background: url('/wp-content/themes/methproject/assets/images/bg_service.jpg') fixed; */
     background: url('/wp-content/themes/methproject/assets/images/background.jpg')  fixed;
    background-size: cover;
}
 .bg-thenews {
     padding-top: 30px;
    padding-bottom: 60px;
    background-color:rgba(0, 0, 0, 0.7);
}
.bg-thenews-wrapper {
/*    background: url('/wp-content/themes/methproject/assets/images/bg_service.jpg') fixed; */
  background: url('/wp-content/themes/methproject/assets/images/events-bg.jpg') fixed;
   
    background-size: cover;
    background-position: top right;
}

.bg-comm-action {
     padding-top: 30px;
    padding-bottom: 60px;
    background-color:rgba(0, 0, 0, 0.8);
}
.bg-comm-action-wrapper {
/*    background: url('/wp-content/themes/methproject/assets/images/bg_service.jpg') fixed; */
     background: url('/wp-content/themes/methproject/assets/images/commaction-bg.jpg') fixed;
    background-size: cover;
}

.leadership-wrapper{
    padding-top: 30px;
    padding-bottom: 60px;
    z-index: inherit;
 background-color:rgba(0, 0, 0, 0.4);
   
}

.leadership-wrapper-bg {
 
   background: url('/wp-content/themes/methproject/assets/images/background.jpg')  fixed;
    background-size: cover;
    background-position: top right;
}

leaders-box {
 background-color:rgba(255, 255, 255, 0.7);
    transition: all 0.7s ease;
    -ms-transition: all 0.7s ease;
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
 
}
.leaders-box img {
    width: 100%;
    height: auto;
}
.leaders-box p {
    font-size:15px;
    padding:5px 0;
    margin:0;
}
.leaders-box h3 {
padding:7px 0 10px 0;
margin-top:0;
    text-align: center; 
    font-size: 16px;
    line-height:24px;
    text-transform: none;
    font-weight:300;
    color:#fff;
    background-color:#000;
}

.leaders-box .lightbox-item .lightbox-item-overlay-content {
    -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    background-color: #000000;
    background-color: rgba(0, 0, 0, 0.7);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.leaders-box .lightbox-item:hover .lightbox-item-overlay-content {
    -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
   
}

.cprofile {
  
    background-color:rgba(0, 0, 0, 0.7);
    transition: all 0.7s ease;
    -ms-transition: all 0.7s ease;
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
    margin-bottom:10px;
    padding-bottom:8px;
}
.cprofile img {
    width: 100%;
    height: auto;
}



.tv {
padding-bottom:0px;

}

.cprofile h3 {
margin-top:0px;
    text-align: center; 
    font-size: 16px;
    line-height:20px;
    text-transform: none;
    font-weight:400;
    color:#fff;
}
.cprofile p {
    padding: 10px 20px;
}


.lightbox-item {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
    display: table;
    background-color: rgba(0, 0, 0, 0.3);
}

.cprofile .lightbox-item span {
font-family: 'Oswald', sans-serif;
text-transform:uppercase;
display: table-cell;
vertical-align: middle;
 font-size: 18px;
    line-height:27px;
font-style: normal;
    color:#999;
    font-weight:300;
  
  }

.lightbox-item .lightbox-item-overlay-content, .lightbox-item .content {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    padding:  20px 15px;
    text-align: center;
    z-index: 5;
    color:#fff;
  
    /* important */
}
.lightbox-item-overlay-content p {
    color:#fff;
    font-size:16px;
    line-height:18px;
}
.lightbox-item-overlay-content .table {
    display: table;height:100%;width:100%;
}
.lightbox-item-overlay-content .cell {
   display: table-cell;vertical-align: middle;
}

.lightbox-item .lightbox-item-overlay-content {
    -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    background-color: #a61b1b;
    background-color: rgba(0, 0, 0, 0.7);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.lightbox-item:hover .lightbox-item-overlay-content {
    -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
   
}



.modal-content {
background-color:#333;color:#ffffff;font-size:14px;
 box-shadow: inset 0px 0px 8px rgba(0, 0, 0, .5), 0px 1px 0px rgba(0, 0, 0, .8);

}

.modal-body  h2 {font-size:18px;color:#ffffff;line-height:20px;margin-bottom:4px;}

.shareboxStory {
background-color:rgba(0, 0, 0, 0.6);background-image: url('/wp-content/themes/methproject/assets/images/rect_2.png');height:240px;padding:5px 15px;-moz-border-radius: 10px;border-radius: 6px;color:#ffffff;
 box-shadow: inset 0px 0px 8px rgba(0, 0, 0, .5), 0px 1px 0px rgba(88, 88, 88, .8);
 margin-top:20px;
}
.shareboxStory h5{
font-size:15px;color:#fff;margin-bottom:8px;
}
.shareboxStory strong{
font-size:16px; font-weight:400;color:#fff;
}
.shareboxStory p{
font-size:16px;line-height:22px;
overflow:none;font-weight:300;
}
 
.shareboxStory div{
position:absolute; bottom:15px;
font-size:14px; font-family: 'Oswald', sans-serif;
}
.shareboxStory span{
font-size:16px;padding:1px 4px 1px 0;

}


/* ======================== ADD DARK PIXEL TO CONTAINER ====================== */
.dark-pixel {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('/wp-content/themes/methproject/assets/images/rect_1.png');
}


/* ========================== PORTFOLIO ====================*/
.portfolioContainer{
    padding: 5px 15px;
}
 .portfolio, .teen {
    padding-top: 30px;
    padding-bottom: 60px;
   background-color:rgba(0, 0, 0, 0.8);
 
    
}
.portfolio-wrapper {

    background: url('/wp-content/themes/methproject/assets/images/bg-teens.jpg') fixed;
    background-size: cover;
}

.teen-wrapper {

    background: url('/wp-content/themes/methproject/assets/images/teencouncilimg2013.jpg') fixed;
    background-size: cover;
}

.portfolio .portfolio-item {
    opacity: 0;
    display: none;
    margin: 0;
    padding: 0;
}
.portfolio .portfolio-item img {
    max-width: 100%;
}

.portfolio-item {
    position: relative;
    color: #ffffff;
    line-height: 0;
    margin-top: 10px;
    margin-bottom: 10px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.project-hover {
    position: absolute;
    width: 100%;
    max-width: 340px;
    height: 100%;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.0);
    background: rgba(0, 0, 0, 0.0);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-transform: uppercase;
    visibility: visible;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.portfolio-item a:hover > .project-hover {
    color: rgba(255, 255, 255, 1);
    background: rgba(0, 0, 0, 0.5);
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.project-hover span {
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.portfolio-item a:hover > .project-hover span {
    padding: 15px 0;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
}

/* events */
 .detail-toggle:after {
   	content: "";
   	background-image: url(/wp-content/themes/methproject/assets/images/events-icon-nimus.png);
  	width: 21px;
  	height: 21px;
	cursor:pointer;
  	position: absolute;
  	top: 0;
  	right: 15px;}
.detail-toggle.collapsed:after {
  	content: "";
   	background-image: url(/wp-content/themes/methproject/assets/images/events-icon.png);
  	width: 21px;
  	height: 21px;
	cursor:pointer;
  	position: absolute;
  	top: 0;
  	right: 15px;}
.events-circle {
	width: 90px;
   	height: 90px;
   	-moz-border-radius: 70px; 
   	-webkit-border-radius: 70px; 
   	border-radius: 70px;
  	background: #a61b1b;
  	color:#fff;
  	text-align:center;
  	font-size:36px;
  	font-weight:500;
  	padding:12px;
  	line-height:30px;}
.events-circle .little {
	text-transform:uppercase;font-size:22px;}
@media screen and (max-width: 500px) {
	.orange-events-circle {
	width: 80px;
   	height: 80px;
   	-moz-border-radius: 70px; 
   	-webkit-border-radius: 70px; 
   	border-radius: 70px;
  	background: #a61b1b;
  	color:#fff;
  	text-align:center;
  	font-size:36px;
  	font-weight:500;
  	padding:4px;
  	line-height:30px;}}

.events-name {
	color:#fff;
	font-weight: 400;
	cursor:pointer;
	font-size:16px;}
.events-location {
	color:#fff;
	font-weight: 300;
	cursor:pointer;
	font-size:16px;}
.events-date {
	font-weight: 400;
	font-size:16px;
	text-transform: uppercase;
	color:#999;}
.events-details {
	font-size:15px;line-height:21px;
	color:#ddd;
	}
.events-details em{
	
	color:#aaa;
	}	 
.events-details p{

	font-size:15px;line-height:21px;
	color:#ddd;
	}
.hrevents	{
    width: 100%;
    height: 5px;
    background:url('/wp-content/themes/methproject/assets/images/rect_s1.png');
    margin: 20px auto 20px;
    border:none;
}
/* ----------------- // INDEX // -------------------*/

/* JQUERY Superslides */
 #home-slide {
    position: relative;
}
#home-slide .slides-container {
    /*display: none;*/
    margin: 0;
}
#home-slide .front-logo {
    width: 120px;
    height: 135.524px;
    background: url('/wp-content/themes/methproject/assets/images/white-logo.png') center no-repeat;
    content:' ';
    display: block;
    margin: 0 auto;
}
#home-slide hr.white {
    width: 80%;
    height: 10px;
    display: block;
    background:url('/wp-content/themes/methproject/assets/images/rect_s2.png');
    margin: 20px auto 30px auto;
    border:none;
}
.slides-filter {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('/wp-content/themes/methproject/assets/images/rect_1.png');
}
#home-slide .scrollable {
    *zoom: 1;
    position: relative;
    top: 0;
    left: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: 100%;
}
#home-slide .scrollable:after {
    content:"";
    display: table;
    clear: both;
}
/* Slides navigation arrows */
 .slides-navigation {
    margin: 0 auto;
    position: absolute;
    z-index: 21;
    width: 100%;
}
.slides-navigation a {
    position: absolute;
    font-size: 28px;
    line-height: 28px;
    bottom: 21px;
    color: #ffffff;
    zoom: 1;
    filter: alpha(opacity=50);
    opacity: 0.5;
}
.slides-navigation a.prev {
    left: 20px;
}
.slides-navigation a.next {
    right: 20px;
}
.slides-navigation a.prev:hover, .slides-navigation a.next:hover {
    filter: alpha(opacity=100);
    opacity: 1;
}
/* Slides pagination indicators */
 .slides-pagination {
    position: absolute;
    z-index: 20;
    bottom: 30px;
    text-align: center;
    width: 100%;
    color: transparent;
}
.slides-pagination a {
    color: #ffffff;
    background: transparent;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: middle;
    margin: 2px;
    overflow: hidden;
    text-indent: -1000px;
}
.slides-pagination a:hover, .slides-pagination a.current {
    filter: alpha(opacity=100);
    opacity: 1;
    border: 2px solid rgba(255, 255, 255, 1);
}
.bg-parallax {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 100%;
}
.intro {
    padding-top: 60px;
    padding-bottom: 80px;
}
.intro h2 {
    font-weight: 400;
}
/* ===================== HOWTO  ========================== */
/* .howto {
    padding-top: 60px;
    padding-bottom: 80px;
    background: #F4F4F4;
}
.featured-box {
    float: left;
    margin: 0 0 20px 0;
}
.featured-box:hover .featured-icon span {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    opacity: 0;
}
.featured-box:hover .featured-icon span, .featured-box:hover .featured-icon {
    background: #a61b1b;
}
.featured-box:hover .featured-icon i {
    color: #FFF;
}
.featured-box .featured-icon span, .featured-box .featured-icon i, .featured-box .featured-icon {
    -webkit-transition-duration: .8s;
    -moz-transition-duration: .8s;
    -o-transition-duration: .8s;
    -ms-transition-duration: .8s;
    transition-duration: .8s;
}
.featured-icon {
    width: 60px;
    height: 60px;
    display: block;
    border-radius: 50%;
    background-color: #f2f2f2;
    text-align: center;
    float: left;
}
.featured-icon span {
    z-index: 4;
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #E2E2E2;
}
.featured-icon i {
    font-size: 18px;
    margin: 20px 0;
    left: 37%;
    float: left;
    color: #a0a0a0;
    z-index: 5;
    position: relative;
}
.featured-desc {
    float: left;
    margin: -65px 0 0 82px;
}
@media (min-width: 649px) and (max-width: 1199px) {
    .featured-desc {
        float: left;
        margin: 0 0 0 20px;
    }
}
.featured-desc h3 {
    margin: 0 0 10px 0;
    font-weight: 700;
    font-size: 18px;
}
.featured-desc p {
    color: #888;
}
*/
#dp-service {
    margin-bottom: 15px;
}
#dp-service .servicesLink {
    zoom: 1;
    visibility: visible!important;
    filter: alpha(opacity=100);
    opacity: 1!important;
}
#dp-service li img {
   
    display: block;
    margin: 0 auto 0px auto;
}
#dp-service h3 {
    font-size: 18px;
    line-height: 29px;
}
#dp-service p {
    color: #FFF;
    text-align: center;
    padding: 0 30px;
}
.services-indicators {
    margin: 0 auto;
    position: relative;
    margin-bottom:0px;
}
.services-indicators a {
    padding: 10px 20px;
    display: inline-block;
    background: transparent;
    width: 70px;
    height: 70px;
    color: #fff;
    margin: 8px 15px;
    border: 2px solid #FFF;
    border-radius: 4px;
    position: relative;
    font-size: 35px;
}
.services-indicators a.current:after {
     top: 100%;
    left: 50%;
    border: solid transparent;
    content:" ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-top-color: #fff;
    border-width: 20px;
    margin-left: -20px
}
.services-indicators a i {
    vertical-align: middle;
    text-align: center;
    position: absolute;
    left: 15px;
    top: 15px;
}
.services-indicators a:hover, .services-indicators a:visited {
color: #a61b1b;
text-decoration:none;
}
.services-indicators a.current {
    color: #a61b1b;
   border: 2px solid #FFF;
    background: #FFF;
    text-decoration:none;
}

/* ================================ ABOUT ==================== */
 .slider-about {
    background: rgba(0, 0, 0, 0.8);
}
.slider-about-wrapper {
    background-position: center bottom;
    background-attachment: fixed !important;
    background-size: cover !important;
    background-repeat: no-repeat;
}
.slide-text-wrapper {
    height: 300px;
}
.slide-text {
    height: 55px;
    width: 100%;
    overflow: hidden;
    text-align: center;
    position: absolute;
    top: 45%;
    left: 0px;
    margin: 0 auto;
    list-style: none;
    font-size: 45px;
    color: #FFF;
    font-weight: 300;
    line-height: 50px;
    letter-spacing: 0.1em;
}
@media (max-width: 480px) {
    .slide-text {
        font-size: 17px;
        font-weight: 400;
    }
}



/* ====================== Testimoni ========================*/
 .testimoni {
    background: #a61b1b;
    padding-top: 60px;
    padding-bottom: 60px;
}

#quote-slider .servicesLink {
    zoom: 1;
    visibility: visible!important;
    filter: alpha(opacity=100);
    opacity: 1!important;
}

#quote-slider h2 {
    font-size: 18px;
    padding: 20px;
    color: #fff;
    font-weight: 300;
    text-align: center;
    line-height: 28px;
    letter-spacing: 0.1em;
    width: 100%;
    margin: 0 auto;
    text-transform: none;
    font-family: 'Roboto', sans-serif;
}

#testimoni #controls {
   text-align:center;
  
}
#testimoni #controls a{
   color:#fff;
  
}
.quote-left-indicator, .quote-right-indicator {
    display: inline-block;
    width: 40px;
    height: 40px;
    color: #c0c0c0;
    border: 1px solid #fff;
    background-color:#333;
    font-size: 14px;
    line-height: 34px;
    text-align: center;
    z-index: 24;
}


.quote-left-indicator:hover, .quote-right-indicator:hover { 
    color: #a61b1b;
    text-decoration:none;
}

/* ==================== CONTACT & FOOTER ========== */
 .contact {
    background-position: center bottom;
    background-attachment: fixed !important;
    background-size: cover !important;
    background-repeat: no-repeat;
    color: #FFF;
    text-align: center;
}

.contact-wrapper {
    background: rgba(0, 0, 0, 0.7);
    padding-top: 50px;
    padding-bottom: 60px;
}
.contact a{
    color: #a61b1b;
    margin: 0;
    text-decoration:none;
}

.contact .visit {
    margin: 0;
    margin-top: 20px;
    font-size: 35px;
    line-height: 30px;
    font-weight: 600;
}
 .form-control {
    outline: 0;
    background: url('/wp-content/themes/methproject/assets/images/rect_2.png') rgba(0, 0, 0, 0);
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: transparent;
    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, 0.4);
    margin-bottom: 8px;
    color: #FFF;
    height:46px;
    padding:10px;
}
 .form-control:focus {
    border: 1px solid rgba(255, 255, 255, 1);
}

 .form-control:-moz-placeholder {
    color:#E5E5E5;
    font-weight: 400;
    font-size: 16px;
}
 .form-control::-moz-placeholder {
    color:#E5E5E5;
    font-weight: 400;
    font-size: 16px;
}
.form-control:-ms-input-placeholder {
    color:#E5E5E5;
    font-weight: 400;
    font-size: 16px;
}
.form-control::-webkit-input-placeholder {
    color:#E5E5E5;
    font-weight: 400;
    font-size: 16px;
}
.contact .bio {
    text-align: left;
    font-size: 14px;
}
.contact .bio h3 {
    margin-top: 0;
    font-weight: 300;
    letter-spacing: 4px;
    font-size: 22px;
    color: #FFF;
}
.contact button {
    margin: 35px 0;
}
.contact .return-to {
    font-size: 13px;
}
.contact .bioextra {
    padding: 0;
    list-style: none;
    font-size: 14px;
}
.contact .bioextra li {
    padding: 6px 0 6px 0;
    border-bottom: 1px dotted #D5D5D5;
}
.contact .bioextra li:last-child {
    border-bottom: none;
}
.contact .bioextra li strong {
    display: inline-table;
    vertical-align: middle;
    text-align: left;
    width: 30%;
    letter-spacing: -0.5px;
}
.contact .bioextra li i {
    text-align: left;
    display: inline-table;
    width: 68%;
    font-style: normal;
}
/* =============== CREDITS ==================*/
 .credits {
    position: relative;
    padding: 30px 0 20px;
}
.credits .credits-title, .credits .credits-title-link {
    text-align: center;
    color: #FFF;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}
@media (max-width: 480px) {
    .credits .credits-title, .credits .credits-title-link {
        width: 90%;
        position: relative;
        bottom: 90px;
        text-align: center;
        color: #FFF;
        margin: 8px;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.2em;
    }
}
.credits .credits-title-link a {
    color: #FFF;
}
.credits .credits-title a {
    color: #FFF;
    font-weight: 700;
}
.credits  a:hover {
    color: #a61b1b;
}
.credits .scroll-up {
    position: absolute;
    bottom: -40px;
    left: 51%;
    margin-left: -31px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #FFF;
    font-size: 29px;
    line-height: 37px;
    text-align: center;
    transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    -ms-transition: all 0.2s ease-in-out 0s;
}
.credits .scroll-up a {
    color: #FFF;
    display: block;
    padding-bottom: 5px;
}
.credits .scroll-up:hover {
    background: #a61b1b;
    border: 1px solid #fff;
}
.credits .scroll-up a:hover {
    color: #fff;
}
.map-wrapper {
    width: 80%;
    padding: 20px;
    background: url('/wp-content/themes/methproject/assets/images/rect_2.png');
    border: 1px solid #FFF;
    margin: 0 auto 35px auto;
}
#map {
    height: 350px;
}