/*style.css*/

/* web font */
@font-face {
    font-family: 'roboto_slabthin';
    src: url('../fonts/RobotoSlab-Thin-webfont.eot');
    src: url('../fonts/RobotoSlab-Thin-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/RobotoSlab-Thin-webfont.woff') format('woff'),
url('../fonts/RobotoSlab-Thin-webfont.ttf') format('truetype'),
url('../fonts/RobotoSlab-Thin-webfont.svg#roboto_slabthin') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'roboto_slabregular';
    src: url('../fonts/RobotoSlab-Regular-webfont.eot');
    src: url('../fonts/RobotoSlab-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/RobotoSlab-Regular-webfont.woff') format('woff'),
url('../fonts/RobotoSlab-Regular-webfont.ttf') format('truetype'),
url('../fonts/RobotoSlab-Regular-webfont.svg#roboto_slabregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* animate removing the placeholder text from the input fields when on focus*/
[placeholder]:focus::-webkit-input-placeholder {
  transition: opacity 0.5s 0.5s ease; 
  opacity: 0;
}

/* generic styles */
body {
    width: 100%;
    height: 100%;
}

html {
    width: 100%;
    height: 100%;
}

a { color: #ff4e00; -webkit-transition: color 2s; transition: color 2s;}
a:hover, a:focus { color:#3c3c3c; text-decoration: none;}
a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active { border-color: #3c3c3c;}


/* headings */

h1, h2, h3 { font-family: 'roboto_slabthin', sans-serif;}

.lead { font-family: 'roboto_slabregular', sans-serif; font-size: 19px; }
/* main nav section */
.navbar { background-color: #bf6e4e;}
.nav a { color: #fff; }
.nav>li>a:hover, .nav>li>a:focus { color: #ff4e00; background-color: transparent;}

.navbar-inverse { border-color: #bf6e4e; }
.navbar-inverse .navbar-nav>li>a { color: #fff; }
.navbar-inverse .navbar-nav>li>a .glyphicon { margin-right: 8px; }
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #ff4e00;}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { background-color: transparent; color: #ffe4cc; }
.top-nav-collapse .navbar-nav>.active>a, .top-nav-collapse .navbar-nav>.active>a:hover, .top-nav-collapse .navbar-nav>.active>a:focus { background-color: #371e08; color: #ffe4cc; }
.navbar-inverse .navbar-brand { padding-top: 5px; }



/* main sections */
.intro-section, .services-section, .contact-section, .about-section, .demos-section {  padding: 10% 0 5%; text-align: center; background: #fff; }
.about-section, .demos-section { background: #ebe4dd; }
.contact-section { margin-bottom: 100px; }
section.add-height { height: 100%; }

/* contact form */
.controls { margin: 18px 0; }

/* footer */
#footer { position: fixed; bottom: 0; width: 100%; background-color:#3c3c3c; border-top:1px solid #bf6e4e; color:#ebe4dd; }
#footer .fa { width: 30px; text-align: center;}
#footer a { padding: 0 5px;}
#footer .pull-left { margin-right: 8px; }


/* media queries */

@media(min-width:767px) {
    .navbar {
        padding: 20px 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }

    .top-nav-collapse {
        padding: 0;
    }
}

@media (max-width: 400px) {
    #footer a { padding: 0;}
}