/* ==========================================================================
   GLOBAL
   ========================================================================== */

/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }
 
 html, body {
     height: 100%;
 }
 
 body {
 	font-family: "futura-pt",sans-serif;
 	font-family: "Lato", serif;
 	font-weight: 400;
  	font-style: normal;
 	padding-top: 50px;
 	webkit-box-sizing: content-box;
 	-moz-box-sizing: content-box;
 	box-sizing: content-box;
 }
 
 img {
 	max-width: 100%;
 }
 
 a {
 	color: #111;
 }
 
 section {
 	padding: 100px 0px;
 	min-height: 100%;
 }

 #work .col-md-12 {
 	text-align: left;
 }

 #work a {
 	font-size: 1.1em;
 	text-decoration: underline;
 }
 
 #work h2 {
 	text-align: center;
 }
  
 /* ==========================================================================
    Typography
    ========================================================================== */
    
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
 	font-family: "futura-pt",sans-serif;
 	font-style: normal;
 	font-weight: 700;
 	letter-spacing: 2px;
 	
 }
 
 h1 {
 	font-size: 3em;
 }
 
 h2 {
 	font-size: 3em;
	letter-spacing: 2px;
 }
 
 h3 {
 	font-size: 1.5em;
 	color: #111;
 	text-transform: uppercase;
 	font-weight: 700;
 	letter-spacing: 2px;
 	margin-top: 3em;
 }
 
  
 p {
 	font-family: "Lato", serif;
 	font-weight: 400;
  	font-style: normal;
 	font-size: 1.1em;
 	line-height: 1.5;
 	margin-top: 1.1em;
	color: #111;
 }
 

 .services {
 	background: #fff;
 	display: inline;
 	font-size: 1.1em;
 	letter-spacing: 3px;
 	color: #444;
 	font-weight: 300;
 	padding: .25em .75em;
 	line-height: 2.5;
 }
 
 .described {
 	font-family: "Lato", serif;
 	font-weight: 400;
 	font-size: 1.1em;
 	letter-spacing: 1px;
 	font-weight: 300;
 	padding: 0em;
 	line-height: 1.5;
 	text-align: left;
 }

 .what {
	color: #fff;
 }

 .talk {
	color: #111;
 }


.fa-angle-double-down {
	font-size: 1.3em;
	margin-bottom: 1em;
}

.fa-long-arrow-down {
}


/* ==========================================================================
   Navigation
   ========================================================================== */
   
.navbar {
	background: #fff;
	border-bottom: 1px solid #eee;
}

.navbar-brand {
	font-family: "Lato", serif;
 	font-weight: 400;
	font-style: normal;
	font-weight: 900;
	color: #111;
	letter-spacing: 3px;
}

.navbar-brand:hover {
	color: #111;
}

.nav li a {
	font-size: 1em;
	color: #333;
	-o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
	transition:.5s;
	letter-spacing: 2px;
}

.nav li a:hover {
	color: #111;
	background: transparent;
}

.navbar-toggle {
	border: 1px solid #ccc;
}

.icon-bar {
	background: #ccc;
}


/* ==========================================================================
   Layout
   ========================================================================== */

#intro {
	max-width: 100%;
	min-height: 100%;
	text-align: center;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	padding-top:20%;
	color: #fff;
	background: url(../img/intro-bg.jpg) no-repeat bottom center scroll;
	background-color: #000;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-o-background-size: cover;
	margin-top: -50px;
}

.intro-body {
	width: 60%;
	margin: 0 auto;
	text-align: center;
	padding: 0;
	margin-top: 8%;
}

.brand-heading {
	font-family: "futura-pt",sans-serif;
	font-size: 4.3em;
	color: #fff;
	letter-spacing: 8px;
	margin-top: .8em;
}

#divider {
	background: #fff;
	width: 10%;
	height: 3px;
	margin: 0 auto;
}

.intro-text {
	font-size: 1.1em;
	color: #fff;
	letter-spacing: 4px;
	margin-top: .5em;
	font-weight: 300;
}

.strong {
	font-weight: 700;
}

#features {
	margin: 4em 0 0 0;
	
}

.btn {
	font-family: "futura-pt",sans-serif;
	background: transparent;
	border: 2px solid #111;
	padding: 1em 3em;
	border-radius: 0px;
	letter-spacing: 2px;
	margin-top: 1em;
	font-weight: 700;
}

.btn:hover {
	background: #111;
	color: #fff;
}

.btn-circle {
    width: 50px;
    height: 50px;
    margin-top: 15px;
    padding: 13px 16px;
    border: 1px solid #fff;
    border-radius: 35px;
    font-size: 20px;
    color: #fff;
    background: 0 0;
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
    opacity: .8;
}

.btn-circle:hover,
.btn-circle:focus {
    outline: 0;
    background: transparent;
    opacity: 1;
}

#logos {
	margin-top: 2em;
}

.works {
	margin-top: 1em;
}

.badge {
	background: transparent;
	width: 65%;
}


/* ==========================================================================
   Contact Form
   ========================================================================== */

#contact {
	margin-top: 1.5em;
}

#name, #email, #message {
	padding: 1.5em .75em;
	border-radius: 0px;
}

.btn-primary {
	width: 100%;
	color: #aaa;
	text-transform: uppercase;
	text-shadow: none;
	letter-spacing: 2px;
	border: 1px solid #ccc;
	box-shadow: none;
}

.btn-primary:hover {
	border: 1px solid #aaa;
}



/* ==========================================================================
   Sections
   ========================================================================== */
 
 #about {
 	background: #fff;
 	color: #111;
 }  
 
 #about p {
 	color: #111;
 }
 
 
 #services {
 	background: #222;
 	color: #aaa;
 	max-width: 100%;
 	min-height: 100%;
 	text-align: center;
 	color: #fff;
 	background: url(../img/stu.png) no-repeat bottom center scroll;
 	-webkit-background-size: cover;
 	-moz-background-size: cover;
 	background-size: cover;
 	-o-background-size: cover;
 }
 
 #work {
 	background: #f3f5f8;
 	color: #111;
 }
 
 #contact {
 	background: #222;
 	margin-top: 0;
 	color: #aaa;
 	max-width: 100%;
 	min-height: 100%;
 	text-align: center;
 	color: #fff;
 	background: url(../img/con.png) no-repeat bottom center scroll;
 	-webkit-background-size: cover;
 	-moz-background-size: cover;
 	background-size: cover;
 	-o-background-size: cover;
 }
 
 .connect {
 	font-size: 1.1em;
 	color: #111;
 	text-align: right;
 }
 
 .fa-linkedin, .fa-twitter {
 	background: #eee;
 	padding: .75em;
 	margin-right: .25em;
 }
 
 .fa:hover {
 	text-decoration: none;
 	color: #222;
 	background: #dfdfdf;
 }
 

/* ==========================================================================
   Footer
   ========================================================================== */

footer {
	background: #f7f7f7;
	padding: .5em 0;
}

footer p {
	color: #111;
	font-weight: 500;
	font-size: 1.5em;
	letter-spacing: 2px;
	width: 100%;
	text-align: center;
}

.left {
	width: 100%;
	float: left;
	margin-top: 1em;
	text-align: center;
}

.right {
	width: 20%;
	float: right;
	margin-top: -.5em;
}

.sift {
	font-size: 1.5em;
}

.col-md-6 {
	padding-left: 0;
	padding-right: 0;
}



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

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
.intro-body {width: 80%;}
.brand-heading {font-size: 4.75em; letter-spacing: 6px;}
h3 {
	margin-top: 1em;
}
.described {
    font-size: 1.1em;
    letter-spacing: 2px;
}

.sift {
	font-size: 1.1em;
    letter-spacing: 2px;
    text-align: left;
}

.col-md-4 {
        width: 42%;
        text-align: left;
 }

 .col-md-offset-1 {
        margin-left: 2%;
}

}


/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
.col-xs-3 {width: 28%;}
.intro-body {width: 80%;}
}


@media (max-width: 768px) {

.intro-body {
    margin-top: 15%;
}



.brand-heading {
	font-size: 4em;
}

#logos .col-xs-2 {
    width: 32%;
    margin-bottom: 2em;
}

#logos {
	margin-top: 2em;
	margin-bottom: 2em;
}

.col-xs-3 {
     width: 28%;
 }
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
body {
	font-size: 1.5em;
}

.nav li a {
	font-size: 1.5em;
	border-bottom: 1px solid #f0f0f0;
}

#last {
	border-bottom: none;
}


.intro-body {
	width: 90%;
	margin-top: 50%;
}

.brand-heading {
	font-size: 2.5em;
	letter-spacing: 5px;
}

section {
	padding-top: 50px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	letter-spacing: 3px;
}


p {
	letter-spacing: 1px;
	font-size: 1.5em;
}

.described {
	font-size: 1.5em;
	letter-spacing: 1px;
}


.btn {
	margin-bottom: 4em;
}

.fa-linkedin, .fa-twitter {
	background: #eee;
	padding: 1em;
	margin-right: .25em;
}

.right {
	width: 0%;
}

.badge {
	margin-bottom: 2em;
}

.left {
    width: 100%;
    float: left;
    margin-top: 1em;
    text-align: center;
    font-size: 1em;
    letter-spacing: 1px;
}

h2 {
	font-size: 2em !important;
}

#work a {
    font-size: 1.5em;
}


}