/*
 * Author: Carlos Alvarez
 * URL: http://alvarez.is
 *
 * Project Name: Bolt - Free Bootstrap 3 Theme
 * Version: 1.0
 * URL: http://blacktie.co
 */
 
/* FONTS */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,900);
@import url(http://fonts.googleapis.com/css?family=Raleway:400,300,700,900);

/* OVERALL ASPECT */


/* nt-example1 */

#nt-example1 {
	max-width: 580px;
	margin: auto;
 
}

#nt-example1-container {
	text-align: center;
  
}

#nt-example1-container i {
	font-size: 36px;
	margin: 8px;
	cursor: pointer;
	-webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

#nt-example1-container i:hover {
	color: #063;
}

#nt-example1 li {
     color: #063;    /*color:  #fff;*/
    font-family: 'Titillium Web',Helvetica Neue, sans-serif;
    letter-spacing:1px;
	overflow: hidden;
	height: 80px;
	padding: 10px;
	line-height: 30px;
	list-style: none;
	font-size: 14px;
   font-weight:600;
	text-align: left;
	 border-bottom: 1px dotted #063;                        /*border-bottom: 1px dotted whitesmoke;*/
    margin-left:-35px;
}

#nt-example1 li:hover {
  color:#063;  background-color:#efeff2;  /*color:#ccc;*/
}

/* nt-example2 */
.member {

  font-family: 'Titillium Web',Helvetica Neue, sans-serif;
}
.div123 {
    width: 10px;
    height: 10px;
   background-image:url(../../img/now.jpg); 

}
     
    .div123 img {
        height: 150px;
        width: 100%;
        padding-bottom: 1px;
    }
       

    .div123 ul {
       color:white;
      height:175px;
        width: 100%;
        padding: 8px;
        font-size: 13px;
        font-family: 'Titillium Web',Helvetica Neue, sans-serif;
        list-style: none;
     
    }
    .div123 ul:hover {
       /*background-color: rgba(3,103,49,.75);*/ 
     background-color:whitesmoke;
  
    }
    
    .div123 header {
      /*background-color: rgba(3,103,49,.75);*/ 
      background-color:rgba(254, 0, 0, 0.66);
 
        color: white;
        font-weight: bold;
     
        font-family: 'Titillium Web',Helvetica Neue, sans-serif;
        letter-spacing: 3px;
        font-size: 15px;
        padding: 5px;
       text-align:center;
    }
    .div123 P {
        background-color: #063;
        color: white;
        padding: 3px;   
        font-size: 13px;
        font-family: 'Titillium Web',Helvetica Neue, sans-serif;
    }
    .div123 a {
        font-family: 'Titillium Web',Helvetica Neue, sans-serif;
        text-decoration:none;  color:black;  
        padding: 5px;          
        font-size: 15px;
    }
    .div123 P a:hover {
        color: white;
    }
    .div123 a:hover {
     font-size: 15px; font-weight:bold;
     color:  #2c8162;
    }

    .caption {
    position: relative;
    overflow: hidden;
}
        .caption p {
           text-align:justify; letter-spacing:1px; color:#424040; font-size :16px; font-family: 'Titillium Web',Helvetica Neue, sans-serif;
        }
.caption__media {
    display: block;
    min-width: 100%;
    max-width: 100%;
    height: auto;
}
.caption__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px;
    color: white;
    transform: translateY(100%);
    transition: transform .35s ease-out;
}
.caption:hover .caption__overlay {
    transform: translateY(0);
}
.caption__overlay__title {
    margin: 0;
    padding: 0 0 12px;
    transform: translateY( calc(-100% - 10px) ); /* +10px overlay padding */
    transition: transform .35s ease-out;
     background-color: rgba(3,103,49,.75);
    padding:5px;  
  font-size:22px;   font-weight:normal; letter-spacing:2px;  
}
.caption:hover .caption__overlay__title {
    transform: translateY(0);
}
 
.caption::before {
    content: ' ';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: transparent;
    transition: background .35s ease-out;
}
.caption:hover::before {
    background: rgba(0, 0, 0, .5);
}