/*
 * Author: EI
 * URL: http://ianedelist.com
 *
 * Project Name: The Future
 * Version: 1.0
 * Date: 06/01/2014
 */


/* ==========================================================================
   Base Styles and Bootstrap Modifications
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #f2c2c9;
    color: #a4003a;
    text-shadow: none;
}

::selection {
    background: #eee;
    color: #000;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

 hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}


 img {
    vertical-align: middle;
}

/*
 * Allow only vertical resizing of textareas.
 */

 textarea {
    resize: vertical;
}

.btn-primary {
color: #fff;
background-color: #000;
border-color: #777;
}

.btn-primary:hover{
color: #fff;
background-color: #999;
border-color: #000;
}

/* ==========================================================================
   General styles
   ========================================================================== */

html,
body {
    height: 100%;
}

body {
    font-family: "Lato";
    font-weight: 300;
    font-size: 16px;
    color: #555;

    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
}

.col-md-4 {
	padding-bottom: 20px;
}

.row {
margin-right: 0px;
margin-left: -15px;
}

.modal-header {
	background: #000;
}

.modal-header h4 {
	color: white;
}

.modal-footer {
	background: #2b2b2b;
}


.navbar {
background-color: #fff;
border-color: #eee;
color: #000;
min-height: 90px;
margin-bottom: 20px;
border: 1px solid transparent;
}

.nav > li > a{
text-decoration: none;
color: #000;
text-transform: uppercase;
}

.nav > li > a:hover, .nav > li > a:active, .nav > li > a:focus {
text-decoration: underline;
background-color: transparent;
}

.navbar-default {
border-color: transparent;
background-color: #dadada;
}


.navbar-toggle {
border-color: transparent;
border: 0px solid transparent;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
	background-color: #16a085;
	color: white;
}

@media (min-width: 768px) { .navbar-nav > li > a {
padding-top: 35px;
padding-bottom: 35px;
}}

hr {
    position: relative;
    border: none;
}

a img {
    background: url('../img/ccbg.png');
}

.odd a img {
    background: #f5f5f5;
}

/* Titles */
h1, h2, h3, h4, h5, h6 {
    font-family: "lato";
    font-weight: 300;
    color: #333;
}

h1{font-size: 30px;padding-bottom: 30px;}


.cnd{text-align: center;letter-spacing: 3px;}


/* Paragraph & Typographic */
p {
    line-height: 28px;
    margin-bottom: 25px;
}

ul{
 list-style: none;
}

.centered {
    text-align: center;
}

.centerblk{
	text-align: center;
	color: #000;
}

.centercap{
	text-align: center;
	text-transform: uppercase;
	margin-top: 60px;
}

.title{font-weight: bolder;}

.conlink a{color: #000;}

.border{
 background: none repeat scroll 0 0 #999999;
 display: block;
 height: 2px;
 margin: 0 auto;
 width: 100px;
 margin-bottom: 40px;
}

.newsbtn{
 width: 100px;
 border: 1px solid;
 margin: 0 auto;
}

.whitejustify{
 color: #fff;
 text-align: justify;
}

.top30{margin-top: 30px;}

.paragraph-lead {
    font-size: 20px;
    color: #3498db;
}

strong {
    font-weight: 700;
}

em {
    font-weight: 300;
}

pre {
    background: #ebebeb;
    border: none;
    font-family: "Monaco";
    font-size: 16px;
    color: #666;
    padding: 20px;
    line-height: 28px;
}

small {
    font-size: 12px;
}


/* Links */
a {
    color: #3498db;
    word-wrap: break-word;

    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}

a:hover,
a:focus {
    color: #c0392b;
    text-decoration: none;
    outline: 0;
}

a:before,
a:after {
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}

/* ==========================================================================
   Sections
   ========================================================================== */

.headertop{margin-top: 100px;}

/* ==========================================================================
   Media 
   ========================================================================== */

@media screen and (max-width:1050px), screen and (max-device-width:1050px){
	body .header{background-attachment: scroll;}
}


/*ipad portrait*/
@media only screen and (min-device-width:768px) and (max-device-width : 1024px) and (orientation : portrait){
	.header{background-attachment: scroll;}
}

@media screen and (max-width:769px) {
	#headerwrap h1 {
		font-size: 80px;
	}
	#headerwrap p {
		font-size: 30px;
		line-height: 38px;
	}
}

/* ==========================================================================
   Portfolio
   ========================================================================== */
.photo-wrapper {
display: block;
}

.photo{max-height:300px;width: 100%;}

.project:hover .photo {
  opacity: 10;
  filter: alpha(opacity=4000);
  opacity: 0.1;
  filter: alpha(opacity=40);
}
.project:hover .overlay {
  opacity: 100;
  filter: alpha(opacity=10000);
  opacity: 1;
  filter: alpha(opacity=100);
}

.project:hover .photo-wrapper{
	background-image: url(../img/ccbg.png);
	background-position: center;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	position: relative;
	opacity: .8;
}