@import "bootstrap.css";
@import "design_selector.css";

@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);

body {
    font-family: 'Lato', Calibri, Arial, Helvetica, sans-serif;
    font-weight: 300;
    color: #333;
    font-size: 15px;
}
.container {
	max-width: 100%;
	padding-right: 0;
	padding-left: 0;
}

section.services,
section.design,
section.websites,
section.contact,
footer {
    width: 100%;
    text-align: center;
}
section div.inner {
    width: 70%;
    margin: 0 auto 60px auto;
}
section.websites div.inner {
    width: 100%;
}
header {
    padding: 100px 30px 50px;
}
footer {
    padding-top: 48px;
}
section.services, footer {
    background: #fff;
    padding-bottom: 48px;
}
footer {
    background: #f9f9f9;
}
.servrow {
    margin: 80px 0;
}
section.websites {
    background: #f9f9f9;
}
section.design div.inner {
	margin: 0 auto;
}
h2 > span {
    font-size: 20px;
    display: block;
    font-size: 20px;
    font-weight: 300;
}
h3 {
    font-size: 20px;
    line-height: 38px;
    font-weight: 700;
    color: #333;
    margin-bottom: 0rem;
}
section.services p {
    margin-top: 0rem;
    margin-bottom: 1rem;
}
section.contact form label {
    float: left;
}
section.contact form {
    margin: 60px 0 120px 0;
}
.thumb img {
    width: 250px;
    height: 200px;
}
.card {
    margin-bottom: 48px;
}
.card-block h3 {
    margin: 12px 0;
}
.list-group-item:hover {
    background: #f9f9f9;
}
.list-group-item a {
    color: #333;
    font-weight: bold;
}
.list-group-item a:hover {
    text-decoration: none;
}
.card-block {
    position: absolute;
    top: 0;
    padding: 12px 8px 0 8px;
    z-index: 10;
    text-shadow: 1px 1px #fff;
}

.card-block-notshown, 
.card-block-notshown p {
    opacity: 0;
}
div.container .card {
	margin-bottom: 0;
	max-width: 100%;
}
.card-block-shown p {
    opacity: 1;
    color: #333;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}

.card {
    max-width: 250px;
}
.card img {
    max-width: 100%;
    height: auto;
}
.img-faded {
    opacity: 0.1;
}
.btn:hover:enabled {
    background: #333;
    color: #fff;
    cursor: pointer;
}
.ng-invalid:not(form) { 
    border: 1px solid #a94442;
}
.ng-pristine:not(form) {
    border: 1px solid rgba(0,0,0,.125);
}
.formError, .commentError {
    margin-top: 8px;
    color: #a94442;
    float: left;
}
.commentError {
    width: 100%;
    margin-bottom: 32px;
}
#topBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}
#topBtn:hover {
  background-color: #555;
}
.btn-outline-secondary {
	background: #4ecdc4;
	color: #fff;
	border: none;
}
.btn-group a.button, .btn-default {
	-webkit-appearance: button;
	-moz-appearance: button;
	appearance: button;

	text-decoration: none;
	color: initial;			

	position: relative;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
			
	background: #4ecdc4;
	color: #fff;
	border: none;		
	border-radius: 4px;
	padding: 4px 8px;
	cursor: pointer;
  	transition: 0.3s;
}
.btn-group a.button:hover, .btn-default:hover {
	color: #fff;
	background: #55595c;
}
.btn-default {
	padding: 6px 10px;
}
input[type='text'], input[type='email'], #comments {
    border: 0;
    border-bottom: solid 1px #ccc;
    padding: 8px 0 8px 0;
    color: #333;
    font-size: 13px;
    border-radius: 0;
}

.form-control {
  border: 0;
}
textarea {
  width: 100%;
}

/* medium - display 2  */
@media (min-width: 768px) {

}



header.brand {
    background: #f9f9f9;
    padding: 92px 30px;
    text-align: center;
}
header.brand h1 {
    font-weight: 300;
    font-size: 68px;
}
span.brand {
    font-weight: bold;
}
ul.site-menu {
    padding: 0;
    background: #f9f9f9;
    text-align: center;
    padding-bottom: 80px;
}
li.menu-item {
    display: inline-block;
    list-style-type: none;
}
li.menu-item + li.menu-item {
    margin-left: 4px;
    padding-left: 8px;
}
li.menu-item a.active {
    font-weight: bold;
}
li.menu-item a {
    color: #333;
    text-decoration: none;
}
li.menu-item a:hover {
    font-weight: bold;
    text-decoration: none;
}
.grid_wrapper {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.notebook {
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
}
.plant {
	grid-column-start: 3;
	grid-column-end: 5;
	grid-row-start: 1;
	grid-row-end: 2;	
}
.heading_text {
	grid-column-start: 2;
	grid-column-end: 4;
	grid-row-start: 2;
	grid-row-end: 3;
}
.keyboard {
	grid-column-start: 2;
	grid-column-end: 4;
	grid-row-start: 3;
	grid-row-end: 4;
}
@media (max-width: 480px) {
    header {
        padding: 60px 30px 0px;
    }
    #design_list figure {
        padding: 0;
        margin: 1rem auto;
        float: none;
        background-color: transparent;
    }
    .contact figure img {
        width: 100%;
    }
    #contactForm {
        margin-top: 1rem;
    }
    #contactForm .form-group {
        margin-top: 1rem; 
    }
    #contactForm .row {
        margin-top: 0;
    }
}
@media (max-width: 460px) {
	header.brand h1 {
        font-size: 24px;
    }
}
@media (max-width: 540px) {
	.heading_text h1 {
		margin-top: 20px;
	}
}
@media (max-width: 768px) {
    header.brand h1 {
        font-size: 36px;
    }
}
@media (max-width: 860px) {
    .grid_wrapper img {
	  width: 50%;
	}
	.coffee img {
	  display: none;
	}
	.mouse img {
	  display: none;
	}
    header.brand {
        padding: 92px 0;
    }
	.heading_text {
		grid-column-start: 1;
		grid-column-end: -1;
	}
	ul.site-menu {
		padding-bottom: 20px;
	}
}

.contact header img {
    opacity: 0.8;
    margin-top: 2rem;
}

.websites .inner .servrow {
    margin-top: 10px;
}

.invalid-feedback {
    text-align: left;
}

.figure-caption {
    font-family: 'Lato', Calibri, Arial, Helvetica, sans-serif;
    font-weight: 300 !important;
}