@import "node_modules/bootstrap/less/bootstrap";
@import "node_modules/bootstrap/less/theme";
@import "node_modules/ionicons-pre/less/ionicons";
// @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,700);
@import (inline) "node_modules/animate.css/animate.css";
@import (inline) "node_modules/normalize.css/normalize.css";
/* @group Mixins */
.transition(@value) {
-webkit-transition: @value;
-moz-transition: @value;
-o-transition: @value;
-ms-transition: @value;
transition: @value;
}
.box-shadow(@value) {
-webkit-box-shadow: @value;
-moz-box-shadow: @value;
box-shadow: @value;
/* @end Mixins */
/* @group Global */
.btn {
.transition(~"ease-in-out .2s background-color");
html, body{
font-family: 'Roboto', sans-serif;
p {
ol , ul{
font-size: inherit;
& > li {
font-size: inherit
/* @end Global */
/* @group Homepage */
.index {
#header {
height: 100vh;
background: #232323;
background-size: cover;
background-position: fixed;
.jumbotron {
margin-top: 5vh;
text-align: center;
background-color: transparent;
color: white;
padding-bottom: 0;
margin-bottom: 0;
h1 {
margin-bottom: 15px;
#intro-text {
background-color: #232323;
.container {
margin-top: 35px;
margin-bottom: 35px;
font-size: 17px;
#project-images {
background: url(http://catesmechanical.com/images/blueprint-background1.jpg);
.panel-body {
font-size: 16px;
@media screen and (max-width: @screen-xs-max) {
.wrapper,
.wrapper .project {
height: 275px;
width: 275px;
@media screen and (min-width: @screen-sm-min) {
height: 200px;
width: 200px;
@media screen and (min-width: @screen-md-min) {
height: 280px;
width: 280px;
& > div {
margin: 10px 0;
.wrapper {
background-color: black;
margin: 0 auto;
&:hover .project {
opacity: 0.6;
& .project {
opacity: 1;
/* @end Homepage*/