/* ==========================================================================
   Author's custom styles
   ========================================================================== */


body {
    padding-top: 50px;
    padding-bottom: 20px;
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
}

a, a:link{
   color: #FF5050;
}

h1, h2, h3, h4 {
   font-family: 'Raleway', sans-serif;
   font-weight: 300;
   color: #007A7A;
}

h5 {
   font-family: 'Raleway', sans-serif;
   color: #3c3c3c;
   font-weight: 500;
}

.main-logo{
   float: left;
   margin-bottom: 5px;
}

/* Navigation */

.navbar-text, .navbar-text a{
   font-family: 'Raleway', sans-serif;
   font-weight: 500;
   margin-top: 30px;
   margin-left: 35px;
   text-transform: uppercase;
   background-image: none;
}

.navbar-toggle{
   background-color: #aaa;
   border: none;
}

.navbar-toggle a:hover, .navbar-toggle a:active{
   background-color: #FF5050;
}


/* Jumbotron & Content */

.jumbotron{
   padding-bottom: 15px;
   background-color: #E8F3F3;
}

figure{
   float: left;
   margin: 10px;
   width: 300px;
   display: block; 
   position: relative; 
   overflow: hidden; 
}

figure img{
   max-width: 100%;
   border-radius: 2px;
}

figcaption { 
  position: absolute;
  width: 100%;
  background: rgba(255,255,255,0.90);
  padding: 10px 20px;
  bottom: 0;
}

/* Carousal */

.carousel-inner{border-radius: 2px;}

.carousel-control.right, .carousel-control.left{
   background-image: none;
}

.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-left, .carousel-control .icon-next,
.carousel-control .glyphicon-chevron-right {
  color: #fff;
}

/* Design Process Page */

#steps{
  max-width: 90%;
  margin: auto;
  padding-top: 20px;
}

.re-design img{
   max-width: 100%;
}

/* Contact Page */

#right img {float: left; margin-right: 15px; border-radius: 2px;}

#right{margin-top: 55px;}

/* Contact Page Form */
    
label {display: block; margin-top: 20px; font-weight: bold;}
    
input, textarea {
    	width: 100%;
    	height: 30px;
    	background: #E8E8E8;
    	border: 1px solid #E8E8E8;
    	padding: 10px;
    	margin-top: 3px;
    	color: #007A7A;
    	-webkit-border-radius: 2px;
    	-moz-border-radius: 2px;
    	border-radius: 2px;
}
    
textarea {height: 200px;}
     
#submit {
    	clear: both;
    	width: 100px;
    	height: 38px;
    	margin-top: 10px;
    	text-transform: uppercase;
    	font-size: 110%;
    	color: #fff;
    	background-color: #007A7A;
    	border: 1px #007A7A;
    	-webkit-border-radius: 2px;
    	-moz-border-radius: 2px;
    	border-radius: 2px;
		opacity: 0.50;
    	-webkit-transition: opacity 0.2s ease-in;
    	-moz-transition: opacity 0.2s ease-in;
    	-o-transition: opacity 0.2s ease-in;
    	transition: opacity 0.2s ease-in;
}
    
#submit:hover, #submit:focus {opacity: 0.95;}


/* Footer */

footer {
  clear: both;
}

footer h2 {
   color: #666;
   border: none;
}

.social{
   float: right;
   margin: 30px;
}

.social p{
   float: left;
   margin-left: 10px;
}

.spacer{margin: 50px;}

.contact-spacer{margin: 50px;}

.trademark{
  font-size: .8em;
}

/* Media Queries */

@media (max-width:550px){
   .jumbotron{padding-bottom: 10px;}
   #right img{
      width: 40%;
      height: 40%;
   }
}

@media (max-width:768px){ 
   .main-logo{height: 50px; margin: 5px;}
   .navbar-text{padding-right: 10px; float: left; margin-top: 10px;}
   .jumbotron{padding-top: 20px; margin-bottom: 10px;}
   .spacer{margin: 0;}
}

@media (max-width:990px) {
   .social{float: left; margin: 5px;}
   footer{margin-left: -15px;}
}

@media (max-width:1200px) {
   .projects{width: 130%;}
}

@media (max-width:650px) {
   .projects{width: 100%;}
   figure{width: 280px;}
}

@media (max-width:630px) {
   figure{width: 300px;}
}

@media (max-width:570px) {
   figure{width: 100%;}
   .projects{width: 95%;}
}

@media (min-width:990px) {
    .contact-spacer{margin-bottom: 220px;}
}

@media (min-width:1200px) {
    .contact-spacer{margin-bottom: 320px;}
}