grav-theme-libretic/css-compiled/template.css
2015-09-18 11:23:40 +02:00

1689 lines
71 KiB
CSS

@import url(//fonts.googleapis.com/css?family=Montserrat:400|Raleway:300,400,600|Inconsolata|Pacifico);
#header .logo h3, #header .logo ul.social-icons, #header .search-box, #header #navbar ul.navigation, #header #navbar .panel-activation {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%); }
.button, .archive-list button, .contact button, .button-secondary {
display: inline-block;
padding: 7px 20px; }
.button-small.button, .archive-list button.button-small, .contact button.button-small, .button-small.button-secondary {
padding: 3px 10px;
font-size: 0.9rem; }
html, body {
height: 100%; }
body {
background: #fff;
color: #9A9898;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
a {
color: #87b672; }
a:hover {
color: #558042; }
b, strong, label, th {
font-weight: 600; }
#container {
min-height: 100%;
position: relative; }
.fullwidth #body {
padding-left: 0;
padding-right: 0; }
#body {
background: #fff;
padding-top: 15rem; }
.left {
float: left; }
.right {
float: right; }
@font-face {
font-family: 'novecento_sans_widedemibold';
src: url("../fonts/Novecentosanswide-DemiBold-webfont.eot");
src: url("../fonts/Novecentosanswide-DemiBold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/Novecentosanswide-DemiBold-webfont.woff2") format("woff2"), url("../fonts/Novecentosanswide-DemiBold-webfont.woff") format("woff"), url("../fonts/Novecentosanswide-DemiBold-webfont.ttf") format("truetype"), url("../fonts/Novecentosanswide-DemiBold-webfont.svg#novecento_sans_widedemibold") format("svg");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: 'novecento_sans_widenormal';
src: url("../fonts/Novecentosanswide-Normal-webfont.eot");
src: url("../fonts/Novecentosanswide-Normal-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/Novecentosanswide-Normal-webfont.woff2") format("woff2"), url("../fonts/Novecentosanswide-Normal-webfont.woff") format("woff"), url("../fonts/Novecentosanswide-Normal-webfont.ttf") format("truetype"), url("../fonts/Novecentosanswide-Normal-webfont.svg#novecento_sans_widenormal") format("svg");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: 'novecento_sans_widemedium';
src: url("./fonts/Novecentosanswide-Medium-webfont.eot");
src: url("./fonts/Novecentosanswide-Medium-webfont.eot?#iefix") format("embedded-opentype"), url("./fonts/Novecentosanswide-Medium-webfont.woff2") format("woff2"), url("./fonts/Novecentosanswide-Medium-webfont.woff") format("woff"), url("./fonts/Novecentosanswide-Medium-webfont.ttf") format("truetype"), url("./fonts/Novecentosanswide-Medium-webfont.svg#novecento_sans_widemedium") format("svg");
font-weight: normal;
font-style: normal; }
.default-animation, #body, .modal, .archive-list button, .modular .showcase .button, .modular .showcase .archive-list button, .archive-list .modular .showcase button, .modular .showcase .contact button, .contact .modular .showcase button, .modular .slideme_container .arrow, .modular .slideme_container .pagination .numbers li, .modular .bottom .button, .modular .bottom .archive-list button, .archive-list .modular .bottom button, .modular .bottom .contact button, .contact .modular .bottom button, .contact input, .contact textarea, .contact button, .callout .pricing-container .pricing-item, .callout .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .foot, .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .archive-list button, .archive-list .callout .pricing-container .pricing-item .foot button, .callout .pricing-container .pricing-item .foot .contact button, .contact .callout .pricing-container .pricing-item .foot button, .team .members .social-icons li, .team .members .social-icons li a, .logo h3, .logo ul.social-icons li, .logo ul.social-icons li a, .notebook .screen .screen-content-hover {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease; }
.padding-horiz, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, .footer {
padding-left: 14rem;
padding-right: 14rem; }
@media only all and (min-width: 60em) and (max-width: 74.938em) {
.padding-horiz, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, .footer {
padding-left: 7rem;
padding-right: 7rem; } }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
.padding-horiz, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, .footer {
padding-left: 7rem;
padding-right: 7rem; } }
@media only all and (max-width: 47.938em) {
.padding-horiz, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, .footer {
padding-left: 1rem;
padding-right: 1rem; } }
.padding-vert {
padding-top: 3rem;
padding-bottom: 3rem; }
#header {
position: absolute;
z-index: 10;
width: 100%;
height: 12rem;
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 0 0.05rem 1rem rgba(0, 0, 0, 0.15); }
#header > .grid, #header .logo, #header #navbar, #header .social-navigation {
height: 50%; }
#header .fa {
color: #000; }
@media only all and (max-width: 47.938em) {
#header .logo h3 {
font-size: 1.9rem; } }
#header .search-box {
display: block;
float: right;
text-align: right; }
#header .search-box i {
color: #FFFFFF;
position: absolute;
top: 0.5rem;
right: 0.6rem;
z-index: -1;
cursor: pointer; }
#header .search-box input::-webkit-search-decoration,
#header .search-box input::-webkit-search-cancel-button {
display: none; }
#header .search-box input[type=search] {
outline: none;
cursor: pointer;
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
border: 0 none;
box-shadow: none;
color: transparent;
background: transparent;
width: 4rem;
height: 1.3rem;
margin-bottom: 0;
font-size: 0.9rem;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s; }
#header .search-box input[type=search]:focus {
width: 10rem;
background-color: rgba(255, 255, 255, 0.3);
cursor: auto;
color: #FFFFFF; }
#header .search-box input:-moz-placeholder {
color: transparent; }
#header .search-box input::-webkit-input-placeholder {
color: transparent; }
@media only all and (max-width: 47.938em) {
#header .search-box {
float: left;
text-align: left; }
#header .search-box i {
left: 0.6rem; }
#header .search-box input[type=search] {
padding-left: 2rem; }
#header .search-box input[type=search]:focus {
width: 8rem; } }
#header #navbar {
font-size: 1.1rem; }
#header #navbar ul {
margin: 0;
padding: 0;
list-style: none; }
#header #navbar ul.navigation {
display: inline-block;
float: left; }
#header #navbar ul.navigation li {
float: left;
position: relative;
text-transform: uppercase; }
#header #navbar ul.navigation li a {
font-family: "novecento_sans_widedemibold", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
display: inline-block;
padding: 0.3rem 0.8rem; }
#header #navbar ul.navigation li a.active, #header #navbar ul.navigation li a:hover {
color: #87b672; }
#header #navbar ul.navigation li:first-child a {
padding-left: 0; }
#header #navbar ul.navigation li ul {
display: none;
padding: 0;
box-shadow: 0 0.05rem 1rem rgba(0, 0, 0, 0.15) !important; }
#header #navbar ul.navigation li ul ul {
left: 100%;
top: 0; }
#header #navbar ul.navigation li:hover > ul {
display: block;
position: absolute;
background: rgba(255, 255, 255, 0.9);
width: 10rem; }
#header #navbar ul.navigation li:hover li {
float: none;
margin: 0;
padding: 0; }
#header #navbar ul.navigation li:hover li a {
padding: 0.5rem 0.8rem;
display: block; }
#header #navbar ul.navigation li:hover li a:before, #header #navbar ul.navigation li:hover li a:after {
display: none; }
#header #navbar ul.navigation li:hover li.active > a {
background: #87b672;
color: #fff; }
@media only all and (max-width: 59.938em) {
#header #navbar ul.navigation {
display: none; } }
#header #navbar .panel-activation {
padding: 1rem;
display: none;
font-size: 1.8rem;
cursor: pointer;
float: right; }
@media only all and (max-width: 59.938em) {
#header #navbar .panel-activation {
display: inline-block; } }
.header-image.fullwidth #body {
padding-left: 0;
padding-right: 0; }
.header-image.fullwidth #body > .listing-row {
padding-left: 14rem;
padding-right: 14rem; }
.header-image .listing-row:last-child {
margin-bottom: 2rem; }
.header-image #body .flush-top {
margin-top: -15.5rem;
padding-top: 16rem; }
.header-image #breadcrumbs {
margin-top: 1rem; }
.header-image #header {
background-color: rgba(255, 255, 255, 0);
box-shadow: none; }
.header-image #header #logo h3, .header-image #header #logo a {
color: #FFFFFF; }
.header-image #header a, .header-image #header .menu-btn {
color: #FFFFFF; }
.header-image #header a:before, .header-image #header a:after {
background-color: rgba(255, 255, 255, 0.7) !important; }
.header-image #header #navbar ul.navigation ul li a {
color: #87b672; }
.header-image #header #navbar ul.navigation ul li a:hover {
color: #558042; }
.header-lite #body {
padding-top: 12rem; }
.header-lite #header {
box-shadow: none;
color: #656161; }
.header-lite #header a, .header-lite #header .menu-btn {
color: #656161; }
.header-lite #header .search-box i {
color: #656161; }
.header-lite #header .search-box input[type=search]:focus {
background-color: rgba(101, 97, 97, 0.2); }
.header-lite #header li.active a {
color: #87b672; }
.header-lite #header .logo ul.social-icons li {
background: rgba(101, 97, 97, 0.2); }
.header-lite #header .logo ul.social-icons li .fa {
color: white; }
.header-lite #header .logo ul.social-icons li:hover .fa {
color: #656161; }
.footer {
font-size: 0.9rem;
background: #333;
width: 100%;
padding-top: 2rem; }
.footer:after {
content: "";
display: table;
clear: both; }
.footer a {
color: #9A9898; }
.footer h4, .footer .archive-list label, .archive-list .footer label, .footer .modular .bottom table th, .modular .bottom table .footer th, .footer .contact label, .contact .footer label, .footer .callout .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .footer .name, .footer .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .footer .button, .footer .callout .pricing-container .pricing-item .foot .archive-list button, .callout .pricing-container .pricing-item .foot .archive-list .footer button, .footer .archive-list .callout .pricing-container .pricing-item .foot button, .archive-list .callout .pricing-container .pricing-item .foot .footer button, .footer .callout .pricing-container .pricing-item .foot .contact button, .callout .pricing-container .pricing-item .foot .contact .footer button, .footer .contact .callout .pricing-container .pricing-item .foot button, .contact .callout .pricing-container .pricing-item .foot .footer button {
line-height: 2rem;
margin-top: 0;
text-align: left;
color: #fff; }
.footer hr {
border-color: rgba(154, 152, 152, 0.5); }
@media only all and (max-width: 47.938em) {
.footer .social-icons {
float: none;
clear: both;
width: 100%;
padding-top: 2rem; } }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
.footer .social-icons {
float: none;
clear: both;
width: 100%;
padding-top: 2rem; } }
.footer .footer-items {
margin-top: 2rem; }
@media only all and (max-width: 47.938em) {
.footer .footer-items {
margin-top: 0; } }
@supports not (flex-wrap: wrap) {
.footer .footer-items {
overflow: hidden; } }
.footer .footer-items:after {
content: "";
display: table;
clear: both; }
.footer .footer-module {
display: block;
float: left;
width: 20%;
vertical-align: top;
padding-right: 2rem; }
.footer .footer-module.large {
width: 40%; }
@media only all and (min-width: 30.063em) and (max-width: 47.938em) {
.footer .footer-module {
margin-top: 1rem;
width: 50%; } }
@media only all and (max-width: 30em) {
.footer .footer-module {
margin-top: 1rem;
width: 100%; } }
.footer .footer-module span:after {
content: "";
display: table;
clear: both; }
.footer .footer-module strong, .footer .footer-module label, .footer .footer-module th {
color: #fff; }
@media only all and (max-width: 47.938em) {
.footer .footer-module {
width: 100% !important;
float: none; } }
.footer .logo {
border-bottom: 0 none;
color: #fff; }
.footer .logo:after {
content: "";
display: table;
clear: both; }
.footer .logo h3 a {
color: #fff; }
.footer .quickmenu {
margin: 0;
padding: 0;
list-style: none; }
.footer .quickmenu i {
padding-right: 0.5rem;
color: #fff;
font-size: 0.7rem; }
.footer .footer-modules {
display: block;
padding-bottom: 1.5rem; }
.footer .footer-modules:after {
content: "";
display: table;
clear: both; }
.footer .footer-copyright {
width: 50%;
font-family: "novecento_sans_widedemibold", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
display: inline-block;
float: left;
text-align: left;
text-transform: uppercase; }
@media only all and (max-width: 47.938em) {
.footer .footer-copyright {
width: 100%;
float: none;
text-align: left;
margin-bottom: 1rem; } }
.footer .footer-menu {
float: right;
display: inline-block;
width: 50%;
text-align: right;
text-transform: uppercase;
font-family: "novecento_sans_widedemibold", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; }
@media only all and (max-width: 47.938em) {
.footer .footer-menu {
width: 100%;
float: none;
text-align: left; } }
.footer .footer-menu ul {
margin: 0;
padding: 0;
list-style: none; }
.footer .footer-menu ul li {
display: inline-block; }
.footer .footer-menu ul li:after {
content: "/";
margin: 0 0.5rem;
display: inline-block; }
.footer .footer-menu ul li:last-child:after {
display: none; }
.footer .newsletter input {
display: inline-block;
height: 2.5rem;
border: 0 none; }
.footer .newsletter input[type=text] {
background-color: rgba(255, 255, 255, 0.2);
color: #fff; }
.footer .newsletter input[type=submit] {
background-color: rgba(255, 255, 255, 0.5);
color: #fff;
padding: 0 1.2rem;
vertical-align: top; }
body {
font-family: "Helvetica Neue", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 400; }
h1, h2, h3, h4, .archive-list label, .modular .bottom table th, .contact label, .callout .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .archive-list button, .archive-list .callout .pricing-container .pricing-item .foot button, .callout .pricing-container .pricing-item .foot .contact button, .contact .callout .pricing-container .pricing-item .foot button, h5, h6 {
font-family: "novecento_sans_widedemibold", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
text-rendering: optimizeLegibility; }
h1 {
font-size: 3.2rem; }
@media only all and (max-width: 47.938em) {
h1 {
font-size: 2.5rem;
line-height: 1.2;
margin-bottom: 2.5rem; } }
h2 {
font-weight: normal;
text-transform: uppercase;
font-size: 1.4rem; }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
h2 {
font-size: -1rem; } }
@media only all and (max-width: 47.938em) {
h2 {
font-size: -1.1rem; } }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
h3 {
font-size: -0.9rem; } }
@media only all and (max-width: 47.938em) {
h3 {
font-size: -1rem; } }
h4, .archive-list label, .modular .bottom table th, .contact label, .callout .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .archive-list button, .archive-list .callout .pricing-container .pricing-item .foot button, .callout .pricing-container .pricing-item .foot .contact button, .contact .callout .pricing-container .pricing-item .foot button {
font-size: 1.2rem;
font-weight: normal;
text-align: center;
text-transform: uppercase;
color: #656161; }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
h4, .archive-list label, .modular .bottom table th, .contact label, .callout .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .archive-list button, .archive-list .callout .pricing-container .pricing-item .foot button, .callout .pricing-container .pricing-item .foot .contact button, .contact .callout .pricing-container .pricing-item .foot button {
font-size: 1.35rem; } }
@media only all and (max-width: 47.938em) {
h4, .archive-list label, .modular .bottom table th, .contact label, .callout .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .archive-list button, .archive-list .callout .pricing-container .pricing-item .foot button, .callout .pricing-container .pricing-item .foot .contact button, .contact .callout .pricing-container .pricing-item .foot button {
font-size: 1.25rem; } }
h1 {
text-align: center;
font-weight: normal; }
h3 {
letter-spacing: -1px; }
h1 + h2 {
margin: -2rem 0 2rem 0;
font-size: 1.4rem;
line-height: 1;
text-align: center;
font-family: "Helvetica Neue", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300; }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
h1 + h2 {
font-size: 1.3rem; } }
@media only all and (max-width: 47.938em) {
h1 + h2 {
font-size: 1rem; } }
h2 + h3 {
margin: 0.5rem 0 2rem 0;
font-size: 1.3rem;
line-height: 1;
text-align: center;
font-family: "Helvetica Neue", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: normal; }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
h2 + h3 {
font-size: 1.2rem; } }
@media only all and (max-width: 47.938em) {
h2 + h3 {
font-size: 1.1rem; } }
blockquote {
border-left: 10px solid #F0F2F4; }
blockquote p {
font-size: 1.1rem;
color: #999; }
blockquote cite {
display: block;
text-align: right;
color: #666;
font-size: 1.2rem; }
blockquote > blockquote > blockquote {
margin: 0; }
blockquote > blockquote > blockquote p {
padding: 15px;
display: block;
font-size: 1rem;
margin-top: 0rem;
margin-bottom: 0rem; }
blockquote > blockquote > blockquote > p {
margin-left: -71px;
border-left: 10px solid #F0AD4E;
background: #FCF8F2;
color: #df8a13; }
blockquote > blockquote > blockquote > blockquote > p {
margin-left: -94px;
border-left: 10px solid #D9534F;
background: #FDF7F7;
color: #b52b27; }
blockquote > blockquote > blockquote > blockquote > blockquote > p {
margin-left: -118px;
border-left: 10px solid #5BC0DE;
background: #F4F8FA;
color: #28a1c5; }
blockquote > blockquote > blockquote > blockquote > blockquote > blockquote > p {
margin-left: -142px;
border-left: 10px solid #5CB85C;
background: #F1F9F1;
color: #3d8b3d; }
code,
kbd,
pre,
samp {
font-family: "Inconsolata", monospace; }
code {
background: #f9f2f4;
color: #9c1d3d; }
pre {
padding: 2rem;
background: #f6f6f6;
border: 1px solid #CBCBCB;
border-radius: 3px; }
pre code {
color: #237794;
background: inherit; }
hr {
border-bottom: 1px solid #CBCBCB; }
.page-title {
margin-top: -25px;
padding: 25px;
float: left;
clear: both;
background: #87b672;
color: #fff; }
.label {
vertical-align: middle;
background: #87b672;
border-radius: 100%;
color: #fff;
height: 1rem;
min-width: 1rem;
line-height: 1rem;
display: inline-block;
text-align: center;
font-size: 0.7rem;
font-family: "novecento_sans_widedemibold", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
margin-right: 0.75rem; }
fieldset {
border: 1px solid #CBCBCB; }
textarea, input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], select[multiple=multiple] {
background-color: white;
border: 1px solid #CBCBCB;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06); }
textarea:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="url"]:hover, input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="month"]:hover, input[type="time"]:hover, input[type="week"]:hover, select[multiple=multiple]:hover {
border-color: #b2b2b2; }
textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, select[multiple=multiple]:focus {
border-color: #87b672;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(121, 173, 97, 0.7); }
.form-field .required {
color: #F3443F;
font-size: 3rem;
line-height: 3rem;
vertical-align: top;
height: 1.5rem;
display: inline-block; }
form .buttons {
text-align: center; }
form input {
font-weight: 400; }
table {
border: 1px solid #d8d8d8; }
th {
background: #e5e5e5;
padding: 0.5rem; }
td {
padding: 0.5rem;
border: 1px solid #d8d8d8; }
.button, .archive-list button, .contact button {
background: #87b672;
color: #fff;
border: 1px solid #87b672; }
.button:hover, .archive-list button:hover, .contact button:hover {
background: #fff;
color: #87b672; }
.button:active, .archive-list button:active, .contact button:active {
box-shadow: 0 1px 0 #679b50; }
.button-secondary {
background: #F6635E;
color: #fff;
border: 1px solid #F6635E; }
.button-secondary:hover {
background: #fff;
color: #F6635E; }
.button-secondary:active {
box-shadow: 0 1px 0 #f32b24; }
.bullets {
margin: 1.7rem 0;
margin-left: -0.85rem;
margin-right: -0.85rem;
overflow: auto; }
.bullet {
float: left;
padding: 0 0.85rem; }
.two-column-bullet {
width: 50%; }
@media only all and (max-width: 47.938em) {
.two-column-bullet {
width: 100%; } }
.three-column-bullet {
width: 33.33333%; }
@media only all and (max-width: 47.938em) {
.three-column-bullet {
width: 100%; } }
.four-column-bullet {
width: 25%; }
@media only all and (max-width: 47.938em) {
.four-column-bullet {
width: 100%; } }
.bullet-icon {
float: left;
background: #87b672;
padding: 0.875rem;
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
color: #fff;
font-size: 1.75rem;
text-align: center; }
.bullet-icon-1 {
background: #87b672; }
.bullet-icon-2 {
background: #9eb672; }
.bullet-icon-3 {
background: #b67292; }
.bullet-content {
margin-left: 4.55rem; }
.sb-slidebar {
background-color: #333 !important; }
#panel {
padding-top: 1rem;
color: #ddd; }
#panel .navigation {
list-style: none;
padding: 0;
margin-left: 0; }
#panel .navigation li {
border-bottom: 1px solid #3d3d3d; }
#panel .navigation li a {
color: #ddd;
display: block;
padding: 0.5rem 1rem;
font-weight: 600; }
#panel .navigation li a:hover {
color: white;
background-color: #262626; }
#panel .navigation li a:last-child {
border-bottom: 0; }
#panel .navigation li.active > a {
background: #fff;
color: #9A9898; }
#panel .navigation li.active > a:hover {
color: #9A9898; }
#panel .navigation li:first-child {
border-top: 1px solid #3d3d3d; }
#panel .navigation li ul {
list-style: none;
padding: 0; }
#panel .navigation li ul li {
border: 0 !important; }
#panel .navigation li ul li a {
color: #c4c4c4;
padding: 0.2rem 1rem 0.2rem 2rem;
font-size: 0.9rem; }
#panel .navigation li ul li li a {
padding-left: 3rem; }
#panel .navigation li ul li li a li a {
padding-left: 4rem; }
#panel .navigation li ul li.active > a {
background: #ccc; }
.portfolio-modal .close-modal {
position: absolute;
top: 0;
right: 0;
width: 5rem;
height: 5rem;
background-color: transparent;
cursor: pointer;
font-size: 3rem; }
@media only all and (max-width: 47.938em) {
.portfolio-modal .close-modal {
display: none; } }
.modal {
display: none;
opacity: 0;
overflow: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
-webkit-overflow-scrolling: touch;
outline: 0;
background: #fff;
text-align: center; }
@media only all and (max-width: 47.938em) {
.modal h1 {
margin-bottom: 0.5rem; }
.modal p, .modal ul {
margin: 1rem 0; }
.modal ul {
margin-top: 0; } }
.modal.in {
opacity: 1; }
.modal .client-details {
list-style-type: none; }
.modal .client-details li {
display: inline-block; }
.modal .client-details li strong, .modal .client-details li label, .modal .client-details li th {
color: #87b672;
font-weight: normal; }
.modal .modal-content {
margin: 0 auto;
width: 35rem;
min-height: 100%;
margin-top: 10rem; }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
.modal .modal-content {
width: 100%; } }
@media only all and (max-width: 47.938em) {
.modal .modal-content {
margin-top: 0;
width: 100%; } }
.modal .modal-content img {
max-height: 15rem; }
.blog-header {
padding-top: 1rem !important;
padding-bottom: 1rem;
margin-top: 0 !important; }
.blog-header.blog-header-image {
background-size: cover !important; }
.blog-header.blog-header-image h1, .blog-header.blog-header-image h2 {
color: #FFFFFF;
text-align: left; }
.blog-header h1 {
font-size: 2.5rem;
margin-top: 0;
margin-bottom: 0;
text-transform: uppercase; }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
.blog-header h1 {
font-size: 2rem; } }
@media only all and (max-width: 47.938em) {
.blog-header h1 {
font-size: 1.5rem;
line-height: 1.2; } }
.blog-header + .blog-content {
padding-top: 3rem; }
.list-item {
border-bottom: 1px solid #dadada;
margin-bottom: 3rem; }
.list-item:last-child {
border-bottom: 0; }
.list-item .list-blog-header {
position: relative; }
.list-item .list-blog-header h4, .list-item .list-blog-header .archive-list label, .archive-list .list-item .list-blog-header label, .list-item .list-blog-header .modular .bottom table th, .modular .bottom table .list-item .list-blog-header th, .list-item .list-blog-header .contact label, .contact .list-item .list-blog-header label, .list-item .list-blog-header .callout .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .list-item .list-blog-header .name, .list-item .list-blog-header .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .list-item .list-blog-header .button, .list-item .list-blog-header .callout .pricing-container .pricing-item .foot .archive-list button, .callout .pricing-container .pricing-item .foot .archive-list .list-item .list-blog-header button, .list-item .list-blog-header .archive-list .callout .pricing-container .pricing-item .foot button, .archive-list .callout .pricing-container .pricing-item .foot .list-item .list-blog-header button, .list-item .list-blog-header .callout .pricing-container .pricing-item .foot .contact button, .callout .pricing-container .pricing-item .foot .contact .list-item .list-blog-header button, .list-item .list-blog-header .contact .callout .pricing-container .pricing-item .foot button, .contact .callout .pricing-container .pricing-item .foot .list-item .list-blog-header button {
text-align: left;
margin-bottom: 1.5rem; }
.list-item .list-blog-header h4 a, .list-item .list-blog-header .archive-list label a, .archive-list .list-item .list-blog-header label a, .list-item .list-blog-header .modular .bottom table th a, .modular .bottom table .list-item .list-blog-header th a, .list-item .list-blog-header .contact label a, .contact .list-item .list-blog-header label a, .list-item .list-blog-header .callout .pricing-container .pricing-item .name a, .callout .pricing-container .pricing-item .list-item .list-blog-header .name a, .list-item .list-blog-header .callout .pricing-container .pricing-item .foot .button a, .callout .pricing-container .pricing-item .foot .list-item .list-blog-header .button a, .list-item .list-blog-header .callout .pricing-container .pricing-item .foot .archive-list button a, .callout .pricing-container .pricing-item .foot .archive-list .list-item .list-blog-header button a, .list-item .list-blog-header .archive-list .callout .pricing-container .pricing-item .foot button a, .archive-list .callout .pricing-container .pricing-item .foot .list-item .list-blog-header button a, .list-item .list-blog-header .callout .pricing-container .pricing-item .foot .contact button a, .callout .pricing-container .pricing-item .foot .contact .list-item .list-blog-header button a, .list-item .list-blog-header .contact .callout .pricing-container .pricing-item .foot button a, .contact .callout .pricing-container .pricing-item .foot .list-item .list-blog-header button a {
color: #656161; }
.list-item .list-blog-header h4 a:hover, .list-item .list-blog-header .archive-list label a:hover, .archive-list .list-item .list-blog-header label a:hover, .list-item .list-blog-header .modular .bottom table th a:hover, .modular .bottom table .list-item .list-blog-header th a:hover, .list-item .list-blog-header .contact label a:hover, .contact .list-item .list-blog-header label a:hover, .list-item .list-blog-header .callout .pricing-container .pricing-item .name a:hover, .callout .pricing-container .pricing-item .list-item .list-blog-header .name a:hover, .list-item .list-blog-header .callout .pricing-container .pricing-item .foot .button a:hover, .callout .pricing-container .pricing-item .foot .list-item .list-blog-header .button a:hover, .list-item .list-blog-header .callout .pricing-container .pricing-item .foot .archive-list button a:hover, .callout .pricing-container .pricing-item .foot .archive-list .list-item .list-blog-header button a:hover, .list-item .list-blog-header .archive-list .callout .pricing-container .pricing-item .foot button a:hover, .archive-list .callout .pricing-container .pricing-item .foot .list-item .list-blog-header button a:hover, .list-item .list-blog-header .callout .pricing-container .pricing-item .foot .contact button a:hover, .callout .pricing-container .pricing-item .foot .contact .list-item .list-blog-header button a:hover, .list-item .list-blog-header .contact .callout .pricing-container .pricing-item .foot button a:hover, .contact .callout .pricing-container .pricing-item .foot .list-item .list-blog-header button a:hover {
color: #87b672; }
.list-item .list-blog-header img {
display: block;
margin-top: 1rem;
border-radius: 0; }
.list-item .list-blog-date, .list-item .list-blog-author {
text-align: center;
background-color: rgba(101, 97, 97, 0.1);
padding: 0.7rem 1rem;
margin-bottom: 0.2rem;
margin-right: 0.5rem;
font-size: 1rem;
text-transform: uppercase;
color: #9A9898;
font-family: "novecento_sans_widedemibold", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
.list-item .list-blog-date, .list-item .list-blog-author {
display: block;
width: 100%;
clear: both; } }
@media only all and (max-width: 47.938em) {
.list-item .list-blog-date, .list-item .list-blog-author {
display: block;
width: 100%;
clear: both; } }
.blog-content-item .list-blog-padding > p:nth-child(2) {
font-size: 1.2rem; }
.tags {
margin: 0;
padding: 0;
display: inline;
background-color: rgba(101, 97, 97, 0.1);
padding: 0.7rem 1rem;
margin-bottom: 0.2rem;
list-style: none;
text-align: center; }
.tags li {
display: inline-block;
font-size: 1rem;
text-transform: uppercase;
font-family: "novecento_sans_widedemibold", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; }
.tags li a {
color: #9A9898; }
.tags li a:after {
content: ","; }
.tags li:last-child a:after {
display: none; }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
.tags {
display: block;
width: 100%;
clear: both; } }
@media only all and (max-width: 47.938em) {
.tags {
display: block;
width: 100%;
clear: both; } }
.archives, .related-pages {
margin: 0;
padding: 0;
list-style: none; }
.archives li, .related-pages li {
line-height: 2rem; }
.archives li:last-child, .related-pages li:last-child {
border-bottom: 0; }
.archives a, .related-pages a {
color: #9A9898; }
.archives a:hover, .related-pages a:hover {
color: #87b672; }
.related-pages li a {
display: block; }
.related-pages .score {
display: block;
float: right;
color: #999;
font-size: 85%; }
.syndicate a {
margin-bottom: 1rem; }
div#breadcrumbs {
padding-left: 0; }
@media only all and (max-width: 47.938em) {
div#breadcrumbs {
display: none; } }
#sidebar {
padding-left: 3rem; }
@media only all and (max-width: 47.938em) {
#sidebar {
padding-left: 0; } }
#sidebar .sidebar-content {
margin-bottom: 3rem; }
#sidebar .sidebar-content h4, #sidebar .sidebar-content .archive-list label, .archive-list #sidebar .sidebar-content label, #sidebar .sidebar-content .modular .bottom table th, .modular .bottom table #sidebar .sidebar-content th, #sidebar .sidebar-content .contact label, .contact #sidebar .sidebar-content label, #sidebar .sidebar-content .callout .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item #sidebar .sidebar-content .name, #sidebar .sidebar-content .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot #sidebar .sidebar-content .button, #sidebar .sidebar-content .callout .pricing-container .pricing-item .foot .archive-list button, .callout .pricing-container .pricing-item .foot .archive-list #sidebar .sidebar-content button, #sidebar .sidebar-content .archive-list .callout .pricing-container .pricing-item .foot button, .archive-list .callout .pricing-container .pricing-item .foot #sidebar .sidebar-content button, #sidebar .sidebar-content .callout .pricing-container .pricing-item .foot .contact button, .callout .pricing-container .pricing-item .foot .contact #sidebar .sidebar-content button, #sidebar .sidebar-content .contact .callout .pricing-container .pricing-item .foot button, .contact .callout .pricing-container .pricing-item .foot #sidebar .sidebar-content button {
margin-bottom: 1rem;
text-align: left; }
#sidebar .sidebar-content p, #sidebar .sidebar-content ul {
margin-top: 1rem; }
ul.pagination {
margin: 0 0 3rem;
text-align: center; }
.prev-next {
margin-top: 5rem;
text-align: center; }
.archive-list h4, .archive-list label, .archive-list .modular .bottom table th, .modular .bottom table .archive-list th, .archive-list .callout .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .archive-list .name, .archive-list .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .archive-list .button, .callout .pricing-container .pricing-item .foot .archive-list button, .archive-list .callout .pricing-container .pricing-item .foot button {
text-align: left; }
.archive-list input {
width: 50%;
line-height: 2rem; }
@media only all and (max-width: 47.938em) {
.archive-list input {
min-width: 80%; } }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
.archive-list input {
min-width: 70%; } }
.archive-list textarea {
min-width: 80%;
min-height: 25rem; }
@media only all and (max-width: 47.938em) {
.archive-list textarea {
min-width: 100%; } }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
.archive-list textarea {
min-width: 90%; } }
.archive-list input, .archive-list textarea {
border: 0 none;
background: rgba(154, 152, 152, 0.2);
box-shadow: none; }
.archive-list label {
font-size: 1rem; }
.archive-list button {
font-family: "novecento_sans_widedemibold", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
text-transform: uppercase; }
#error {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding-bottom: 12rem; }
#error h1 {
font-size: 5rem; }
#error p {
margin: 1rem 0; }
.error #body {
padding-top: 16rem; }
.simplesearch h1 {
margin-bottom: 0; }
.simplesearch .center {
text-align: center; }
.simplesearch input {
display: inline-block;
max-width: 30rem;
font-size: 2rem; }
.simplesearch .search-image {
margin-top: 1rem; }
.simplesearch .search-image img {
border-radius: 4px; }
@media only all and (max-width: 47.938em) {
.simplesearch .search-image img {
display: none; } }
@media only all and (max-width: 47.938em) {
.simplesearch .search-item {
margin-left: 0; } }
.simplesearch .search-details {
float: right;
margin-top: -2.5rem;
font-weight: bold;
font-size: 1rem;
color: #cdcccc; }
@media only all and (max-width: 47.938em) {
.simplesearch .search-details {
float: none;
margin-top: -0.2rem;
margin-bottom: 1rem; } }
.simplesearch hr {
border-bottom: 1px solid #eee; }
.grav-lightslider .lSSlideOuter .lSPager.lSpg > li a {
z-index: 1; }
#body > script:first-child + .grav-lightslider {
margin-top: -3rem; }
.modular.header-image #header {
background-color: rgba(255, 255, 255, 0);
box-shadow: none; }
.modular.header-image #header #logo h3 {
color: #FFFFFF; }
.modular.header-image #header #navbar a {
color: #FFFFFF; }
.modular .slideme_container {
overflow: hidden;
margin-top: -15rem;
padding-top: 15rem;
height: 34.7rem; }
.modular .slideme_container:after {
content: "";
display: table;
clear: both; }
.modular .showcase {
position: relative;
z-index: 1;
padding-bottom: 10rem;
background-color: #666;
background-size: cover;
background-position: center;
text-align: center;
color: #FFFFFF; }
.modular .showcase h1 {
font-size: 2.2rem;
margin-top: 0;
padding-left: 14rem;
padding-right: 14rem;
text-transform: uppercase; }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
.modular .showcase h1 {
font-size: 1.5rem; } }
@media only all and (max-width: 47.938em) {
.modular .showcase h1 {
font-size: 1.3rem;
line-height: 1.2;
padding-left: 0;
padding-right: 0;
margin-left: 4rem;
margin-right: 4rem; } }
.modular .showcase h1 strong, .modular .showcase h1 label, .modular .showcase h1 th {
color: #87b672; }
.modular .showcase h2 {
text-transform: none;
padding-left: 14rem;
padding-right: 14rem; }
@media only all and (max-width: 47.938em) {
.modular .showcase h2 {
padding-left: 0;
padding-right: 0;
margin-left: 4rem;
margin-right: 4rem; } }
.modular .showcase .button, .modular .showcase .archive-list button, .archive-list .modular .showcase button, .modular .showcase .contact button, .contact .modular .showcase button {
color: #FFFFFF;
font-family: "novecento_sans_widedemibold", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
padding: 0.3rem 1rem;
background: rgba(255, 255, 255, 0);
border: 2px solid #FFFFFF;
border-radius: 0;
box-shadow: none;
font-size: 1rem; }
.modular .showcase .button:hover, .modular .showcase .archive-list button:hover, .archive-list .modular .showcase button:hover, .modular .showcase .contact button:hover, .contact .modular .showcase button:hover {
background: rgba(255, 255, 255, 0.2); }
.modular .slideme_container .arrow {
position: absolute;
display: block;
width: 3.7rem;
height: 3.7rem;
cursor: pointer;
z-index: 50;
text-align: center;
line-height: 3.8rem;
background: #fff;
top: 50%;
border-radius: 100%;
font-size: 2.5rem;
opacity: 0.5;
color: #000; }
@media only all and (max-width: 47.938em) {
.modular .slideme_container .arrow {
font-size: 1.5rem;
line-height: 2.8rem; } }
.modular .slideme_container .arrow:hover {
opacity: 1; }
.modular .slideme_container .arrow.prev {
left: 4rem; }
@media only all and (max-width: 47.938em) {
.modular .slideme_container .arrow.prev {
left: 1rem; } }
.modular .slideme_container .arrow.next {
right: 4rem; }
@media only all and (max-width: 47.938em) {
.modular .slideme_container .arrow.next {
right: 1rem; } }
.modular .slideme_container .arrow:disabled {
opacity: 0.1; }
@media only all and (max-width: 47.938em) {
.modular .slideme_container .arrow {
width: 2.7rem;
height: 2.7rem; } }
.modular .slideme_container .arrow.next:before {
content: '\f054';
font-family: FontAwesome;
margin-left: 0.4rem; }
.modular .slideme_container .arrow.prev:before {
content: '\f053';
font-family: FontAwesome;
margin-right: 0.5rem; }
.modular .slideme_container .pagination {
text-align: center;
z-index: 10;
position: absolute;
left: 0;
right: 0;
vertical-align: middle;
bottom: 5%; }
.modular .slideme_container .pagination .numbers li {
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
background: #fff;
width: 0.5rem;
height: 0.5rem;
display: inline-block;
border-radius: 100%;
cursor: pointer;
margin: 0 0.2rem;
vertical-align: middle; }
.modular .slideme_container .pagination .numbers li.current {
width: 1rem;
height: 1rem; }
.modular .features {
padding: 4rem 0;
padding-bottom: 1rem;
text-align: center; }
.modular .features:after {
content: "";
display: table;
clear: both; }
.modular .features h2 {
margin: 0;
line-height: 100%;
color: #656161; }
.modular .features hr {
margin-top: 4rem; }
.modular .features p {
margin: 1rem 0; }
@media only all and (max-width: 47.938em) {
.modular .features p {
font-size: 1rem; } }
.modular .features .button, .modular .features .archive-list button, .archive-list .modular .features button, .modular .features .contact button, .contact .modular .features button {
background-color: #87b672;
color: #FFFFFF;
font-family: "novecento_sans_widedemibold", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
border-radius: 0;
box-shadow: none;
font-size: 1rem; }
.modular .features .feature-items {
margin-top: 2rem; }
@supports not (flex-wrap: wrap) {
.modular .features .feature-items {
overflow: hidden; } }
.modular .features .feature {
display: block;
float: left;
width: 25%;
vertical-align: top;
margin-top: 2rem;
margin-bottom: 1rem; }
@media only all and (min-width: 30.063em) and (max-width: 47.938em) {
.modular .features .feature {
margin-top: 1rem;
width: 50%; } }
@media only all and (max-width: 30em) {
.modular .features .feature {
margin-top: 1rem;
width: 100%; } }
.modular .features .feature i.fa {
font-size: 2rem; }
.modular .features .feature h4, .modular .features .feature .archive-list label, .archive-list .modular .features .feature label, .modular .features .feature .bottom table th, .modular .bottom table .features .feature th, .modular .features .feature .contact label, .contact .modular .features .feature label, .modular .features .feature .callout .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .modular .features .feature .name, .modular .features .feature .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .modular .features .feature .button, .modular .features .feature .callout .pricing-container .pricing-item .foot .archive-list button, .callout .pricing-container .pricing-item .foot .archive-list .modular .features .feature button, .modular .features .feature .archive-list .callout .pricing-container .pricing-item .foot button, .archive-list .callout .pricing-container .pricing-item .foot .modular .features .feature button, .modular .features .feature .callout .pricing-container .pricing-item .foot .contact button, .callout .pricing-container .pricing-item .foot .contact .modular .features .feature button, .modular .features .feature .contact .callout .pricing-container .pricing-item .foot button, .contact .callout .pricing-container .pricing-item .foot .modular .features .feature button {
margin: 0;
font-size: 1.1rem; }
.modular .features .feature p {
display: inline-block;
font-size: 1rem;
margin: 0.2rem 0 1rem; }
.modular .features.big {
text-align: center; }
.modular .features.big .feature {
width: 33.33%; }
@media only all and (max-width: 30em) {
.modular .features.big .feature {
margin-top: 1rem;
width: 100%; } }
.modular .features.big i.fa {
font-size: 4.5rem;
margin-bottom: 1.5rem; }
.modular .features.big .feature-content {
padding-right: 2rem; }
.modular .features.big .feature-content.icon-offset {
margin-left: 1rem; }
.modular .features.big .feature-content h4, .modular .features.big .feature-content .archive-list label, .archive-list .modular .features.big .feature-content label, .modular .features.big .feature-content .bottom table th, .modular .bottom table .features.big .feature-content th, .modular .features.big .feature-content .contact label, .contact .modular .features.big .feature-content label, .modular .features.big .feature-content .callout .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .modular .features.big .feature-content .name, .modular .features.big .feature-content .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .modular .features.big .feature-content .button, .modular .features.big .feature-content .callout .pricing-container .pricing-item .foot .archive-list button, .callout .pricing-container .pricing-item .foot .archive-list .modular .features.big .feature-content button, .modular .features.big .feature-content .archive-list .callout .pricing-container .pricing-item .foot button, .archive-list .callout .pricing-container .pricing-item .foot .modular .features.big .feature-content button, .modular .features.big .feature-content .callout .pricing-container .pricing-item .foot .contact button, .callout .pricing-container .pricing-item .foot .contact .modular .features.big .feature-content button, .modular .features.big .feature-content .contact .callout .pricing-container .pricing-item .foot button, .contact .callout .pricing-container .pricing-item .foot .modular .features.big .feature-content button {
font-size: 1.2rem; }
.modular .features.big .feature-content p {
padding: 0; }
.modular .bottom {
text-align: center;
padding-bottom: 4rem; }
.modular .bottom:after {
content: "";
display: table;
clear: both; }
.modular .bottom h2 {
padding-top: 3rem;
margin: 0;
line-height: 100%;
color: #656161; }
.modular .bottom p {
margin: 1rem 0; }
@media only all and (max-width: 47.938em) {
.modular .bottom p {
font-size: 1rem; } }
.modular .bottom .button, .modular .bottom .archive-list button, .archive-list .modular .bottom button, .modular .bottom .contact button, .contact .modular .bottom button {
background-color: #87b672;
color: #FFFFFF;
font-family: "novecento_sans_widedemibold", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
border-radius: 0;
box-shadow: none;
font-size: 1rem;
border: 0 none; }
.modular .bottom .button:hover, .modular .bottom .archive-list button:hover, .archive-list .modular .bottom button:hover, .modular .bottom .contact button:hover, .contact .modular .bottom button:hover {
background-color: #558042; }
.modular .bottom.borderbottom {
padding-bottom: 0; }
.modular .bottom.borderbottom hr {
padding-top: 3rem; }
.modular .bottom table {
border: 0 none; }
.modular .bottom table th {
background: none;
text-align: left; }
@media only all and (max-width: 47.938em) {
.modular .bottom table th {
display: none; } }
.modular .bottom table td {
text-align: left;
vertical-align: top;
border: 0 none; }
@media only all and (max-width: 47.938em) {
.modular .bottom table td {
display: block; } }
.modular .bottom .services {
padding-top: 2rem; }
.modular .bottom .services .service {
width: 50%;
text-align: left;
display: block;
float: left; }
@media only all and (max-width: 47.938em) {
.modular .bottom .services .service {
width: 100%; } }
.modular .bottom .services .service .fa {
margin-top: 0.5rem;
width: 7rem;
height: 6rem;
font-size: 6rem;
float: left; }
.modular .bottom .services .service p {
margin-left: 7rem;
margin-top: 0.5rem;
margin-right: 1rem; }
.modular .bottom .services .service h4, .modular .bottom .services .service .archive-list label, .archive-list .modular .bottom .services .service label, .modular .bottom .services .service table th, .modular .bottom table .services .service th, .modular .bottom .services .service .contact label, .contact .modular .bottom .services .service label, .modular .bottom .services .service .callout .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .modular .bottom .services .service .name, .modular .bottom .services .service .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .modular .bottom .services .service .button, .modular .bottom .services .service .callout .pricing-container .pricing-item .foot .archive-list button, .callout .pricing-container .pricing-item .foot .archive-list .modular .bottom .services .service button, .modular .bottom .services .service .archive-list .callout .pricing-container .pricing-item .foot button, .archive-list .callout .pricing-container .pricing-item .foot .modular .bottom .services .service button, .modular .bottom .services .service .callout .pricing-container .pricing-item .foot .contact button, .callout .pricing-container .pricing-item .foot .contact .modular .bottom .services .service button, .modular .bottom .services .service .contact .callout .pricing-container .pricing-item .foot button, .contact .callout .pricing-container .pricing-item .foot .modular .bottom .services .service button {
text-align: left;
margin-bottom: 0; }
.about hr {
margin: 3rem 0; }
.contact h4, .contact .modular .bottom table th, .modular .bottom table .contact th, .contact label, .contact .callout .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .contact .name, .contact .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .contact .button, .callout .pricing-container .pricing-item .foot .contact button, .contact .callout .pricing-container .pricing-item .foot button {
text-align: left; }
.contact input {
width: 50%;
line-height: 2rem; }
@media only all and (max-width: 47.938em) {
.contact input {
min-width: 80%; } }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
.contact input {
min-width: 70%; } }
.contact textarea {
min-width: 80%;
min-height: 25rem; }
@media only all and (max-width: 47.938em) {
.contact textarea {
min-width: 100%; } }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
.contact textarea {
min-width: 90%; } }
.contact input, .contact textarea {
border: 0 none;
background: rgba(154, 152, 152, 0.2);
box-shadow: none; }
.contact input:focus, .contact textarea:focus {
border-radius: 0 !important;
box-shadow: none;
background: rgba(154, 152, 152, 0.11); }
.contact label {
font-size: 1rem; }
.contact button {
font-family: "novecento_sans_widedemibold", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
text-transform: uppercase;
display: block; }
.contact #simple_form-success, .contact #simple_form-submit {
display: inline-block; }
.contact #simple_form-success strong, .contact #simple_form-success label, .contact #simple_form-success th, .contact #simple_form-submit strong, .contact #simple_form-submit label, .contact #simple_form-submit th {
margin-left: 1rem; }
.contact #simple_form-success .close, .contact #simple_form-submit .close {
display: none; }
.callout {
background: #EEEEEE;
padding: 2rem 0.938rem;
padding-top: 2rem;
padding-bottom: 0;
text-align: center;
overflow: hidden;
clear: both;
position: relative; }
@media only all and (max-width: 59.938em) {
.callout {
text-align: center; } }
.callout .callout-line {
background: #fff;
width: 100%;
height: 7rem;
position: absolute;
left: 0;
bottom: 0;
z-index: 0; }
.callout .pricing-container {
position: relative;
z-index: 10;
margin-top: 2rem;
min-height: 31rem;
text-align: center; }
.callout .pricing-container:after {
content: "";
display: table;
clear: both; }
.callout .pricing-container .pricing-item {
-webkit-transform: translateZ(0);
display: inline-block;
width: 24.3%;
margin-right: 0.3rem;
margin-bottom: 2rem;
position: relative; }
@media only all and (max-width: 47.938em) {
.callout .pricing-container .pricing-item {
width: 100%; } }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
.callout .pricing-container .pricing-item {
width: 100%; } }
@media only all and (min-width: 60em) and (max-width: 74.938em) {
.callout .pricing-container .pricing-item {
width: 22.5%; } }
.callout .pricing-container .pricing-item:hover {
-webkit-transform: scale(1, 1.08);
-moz-transform: scale(1, 1.08);
-ms-transform: scale(1, 1.08);
-o-transform: scale(1, 1.08);
transform: scale(1, 1.08); }
.callout .pricing-container .pricing-item div {
background: #f7f7f7; }
.callout .pricing-container .pricing-item .name {
background: #87b672;
color: #fff;
padding: 0.5rem 0; }
.callout .pricing-container .pricing-item .info {
line-height: 3rem;
border-bottom: #EEEEEE 1px solid; }
.callout .pricing-container .pricing-item .price {
font-weight: bold;
color: #656161;
font-size: 3.5rem;
font-family: "novecento_sans_widedemibold", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
font-weight: normal;
border-bottom: #EEEEEE 1px solid;
line-height: 5rem; }
.callout .pricing-container .pricing-item .foot {
background: #87b672;
color: #fff;
text-align: center;
padding: 1rem 0; }
.callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .archive-list button, .archive-list .callout .pricing-container .pricing-item .foot button, .callout .pricing-container .pricing-item .foot .contact button, .contact .callout .pricing-container .pricing-item .foot button {
margin: 0;
padding: 0;
width: 9rem;
font-size: 1rem;
line-height: 2.5rem;
color: #fff;
display: inline-block;
background: rgba(255, 255, 255, 0.25); }
.callout .pricing-container .pricing-item .foot .button:hover, .callout .pricing-container .pricing-item .foot .archive-list button:hover, .archive-list .callout .pricing-container .pricing-item .foot button:hover, .callout .pricing-container .pricing-item .foot .contact button:hover, .contact .callout .pricing-container .pricing-item .foot button:hover {
background: rgba(255, 255, 255, 0.15); }
.callout .pricing-container .pricing-item sup {
font-size: 2rem; }
.team {
background: #EEEEEE;
padding: 4rem 0;
text-align: center; }
.team:after {
content: "";
display: table;
clear: both; }
.team h2 {
color: #656161;
margin: 0;
line-height: 100%; }
.team p {
margin: 1rem 0; }
.team .members {
width: 100%;
text-align: left;
padding-top: 2rem; }
.team .members .member {
display: inline-block;
float: left;
width: 22%;
margin: 0 1rem;
margin-bottom: 2rem; }
@media only all and (max-width: 47.938em) {
.team .members .member {
display: block;
width: 100%;
text-align: center;
margin: 0;
margin-bottom: 2rem; } }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
.team .members .member {
display: block;
width: 44%;
margin-bottom: 2rem; } }
.team .members .member h4, .team .members .member .archive-list label, .archive-list .team .members .member label, .team .members .member .modular .bottom table th, .modular .bottom table .team .members .member th, .team .members .member .contact label, .contact .team .members .member label, .team .members .member .callout .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .team .members .member .name, .team .members .member .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .team .members .member .button, .team .members .member .callout .pricing-container .pricing-item .foot .archive-list button, .callout .pricing-container .pricing-item .foot .archive-list .team .members .member button, .team .members .member .archive-list .callout .pricing-container .pricing-item .foot button, .archive-list .callout .pricing-container .pricing-item .foot .team .members .member button, .team .members .member .callout .pricing-container .pricing-item .foot .contact button, .callout .pricing-container .pricing-item .foot .contact .team .members .member button, .team .members .member .contact .callout .pricing-container .pricing-item .foot button, .contact .callout .pricing-container .pricing-item .foot .team .members .member button {
text-align: left;
margin-bottom: 0; }
@media only all and (max-width: 47.938em) {
.team .members .member h4, .team .members .member .archive-list label, .archive-list .team .members .member label, .team .members .member .modular .bottom table th, .modular .bottom table .team .members .member th, .team .members .member .contact label, .contact .team .members .member label, .team .members .member .callout .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .team .members .member .name, .team .members .member .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .team .members .member .button, .team .members .member .callout .pricing-container .pricing-item .foot .archive-list button, .callout .pricing-container .pricing-item .foot .archive-list .team .members .member button, .team .members .member .archive-list .callout .pricing-container .pricing-item .foot button, .archive-list .callout .pricing-container .pricing-item .foot .team .members .member button, .team .members .member .callout .pricing-container .pricing-item .foot .contact button, .callout .pricing-container .pricing-item .foot .contact .team .members .member button, .team .members .member .contact .callout .pricing-container .pricing-item .foot button, .contact .callout .pricing-container .pricing-item .foot .team .members .member button {
text-align: center; } }
.team .members .member hr {
margin: 1rem 0; }
.team .members .social-icons {
line-height: 2rem;
margin: 0;
list-style: none; }
@media only all and (max-width: 47.938em) {
.team .members .social-icons {
text-align: center;
display: inline-flex; } }
.team .members .social-icons li {
float: left;
width: 2.1rem;
height: 2.1rem;
background: #fff;
border-radius: 100%;
text-align: center;
margin-right: 0.8rem; }
.team .members .social-icons li a {
color: #000;
display: block;
margin-top: 0.1rem; }
.team .members .social-icons li:hover {
background: rgba(255, 255, 255, 0.5); }
.team .members .social-icons li:hover i {
color: #87b672; }
.portfolio {
padding: 2rem 0.938rem;
padding-top: 2rem;
padding-bottom: 1rem;
text-align: center; }
@media only all and (max-width: 59.938em) {
.portfolio {
text-align: center; } }
.portfolio h2 {
color: #656161; }
.portfolio .notebooks {
margin-top: 4rem; }
.portfolio .notebooks .notebook-row {
box-shadow: inset 0px -90px 0px -20px #f7f7f7;
margin-left: -14rem;
margin-right: -14rem;
padding-left: 14rem;
padding-right: 14rem;
background: #EEEEEE;
padding-bottom: 2rem; }
@media only all and (max-width: 47.938em) {
.portfolio .notebooks .notebook-row {
margin-left: -10rem;
margin-right: -10rem; } }
.portfolio .notebooks .notebook-row .notebook {
min-width: 24%; }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
.portfolio .notebooks .notebook-row .notebook {
width: 100%; } }
@media only all and (min-width: 60em) and (max-width: 74.938em) {
.portfolio .notebooks .notebook-row .notebook {
min-width: 24%;
float: none; } }
@media only all and (max-width: 30em) {
.portfolio .notebooks .notebook-row .notebook {
width: 170%;
margin-left: -4.7rem; } }
.portfolio .notebooks .notebook-row .notebook h4, .portfolio .notebooks .notebook-row .notebook .archive-list label, .archive-list .portfolio .notebooks .notebook-row .notebook label, .portfolio .notebooks .notebook-row .notebook .modular .bottom table th, .modular .bottom table .portfolio .notebooks .notebook-row .notebook th, .portfolio .notebooks .notebook-row .notebook .contact label, .contact .portfolio .notebooks .notebook-row .notebook label, .portfolio .notebooks .notebook-row .notebook .callout .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .portfolio .notebooks .notebook-row .notebook .name, .portfolio .notebooks .notebook-row .notebook .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .portfolio .notebooks .notebook-row .notebook .button, .portfolio .notebooks .notebook-row .notebook .callout .pricing-container .pricing-item .foot .archive-list button, .callout .pricing-container .pricing-item .foot .archive-list .portfolio .notebooks .notebook-row .notebook button, .portfolio .notebooks .notebook-row .notebook .archive-list .callout .pricing-container .pricing-item .foot button, .archive-list .callout .pricing-container .pricing-item .foot .portfolio .notebooks .notebook-row .notebook button, .portfolio .notebooks .notebook-row .notebook .callout .pricing-container .pricing-item .foot .contact button, .callout .pricing-container .pricing-item .foot .contact .portfolio .notebooks .notebook-row .notebook button, .portfolio .notebooks .notebook-row .notebook .contact .callout .pricing-container .pricing-item .foot button, .contact .callout .pricing-container .pricing-item .foot .portfolio .notebooks .notebook-row .notebook button {
text-align: left;
margin-bottom: 0; }
.portfolio .notebooks .notebook-row .notebook p {
margin-top: 0; }
.portfolio .notebooks .notebook-row .notebook .desc {
width: 20rem;
margin-left: 2rem; }
@media only all and (min-width: 60em) and (max-width: 74.938em) {
.portfolio .notebooks .notebook-row .notebook .desc {
width: 100%; } }
@media only all and (max-width: 47.938em) {
.portfolio .notebooks .notebook-row .notebook .desc {
width: 100%; } }
@media only all and (max-width: 30em) {
.portfolio .notebooks .notebook-row .notebook .desc {
width: 90%; } }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
.portfolio .notebooks .notebook-row .notebook .desc {
width: 100%; } }
.logo {
border-bottom: 1px solid #eaeaea; }
.logo h3 {
font-size: 2.5rem;
font-family: "Pacifico", "monospace";
line-height: 2rem;
margin: 0;
float: left; }
.logo h3 a {
color: #9A9898; }
.logo h4, .logo .archive-list label, .archive-list .logo label, .logo .modular .bottom table th, .modular .bottom table .logo th, .logo .contact label, .contact .logo label, .logo .callout .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .logo .name, .logo .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .logo .button, .logo .callout .pricing-container .pricing-item .foot .archive-list button, .callout .pricing-container .pricing-item .foot .archive-list .logo button, .logo .archive-list .callout .pricing-container .pricing-item .foot button, .archive-list .callout .pricing-container .pricing-item .foot .logo button, .logo .callout .pricing-container .pricing-item .foot .contact button, .callout .pricing-container .pricing-item .foot .contact .logo button, .logo .contact .callout .pricing-container .pricing-item .foot button, .contact .callout .pricing-container .pricing-item .foot .logo button {
text-align: left; }
.logo ul {
margin: 0;
padding: 0;
list-style: none; }
.logo ul.social-icons {
float: right;
line-height: 2rem;
margin: 0; }
.logo ul.social-icons li {
float: left;
width: 2.1rem;
height: 2.1rem;
background: #fff;
border-radius: 100%;
text-align: center;
margin-right: 0.8rem; }
.logo ul.social-icons li a {
color: #000;
display: block;
margin-top: 0.1rem; }
.logo ul.social-icons li:hover {
background: rgba(255, 255, 255, 0.5); }
.notebook {
display: inline-block;
text-align: left;
min-width: 33%;
position: relative;
z-index: 10; }
@media only all and (min-width: 60em) and (max-width: 74.938em) {
.notebook {
width: 100%;
float: none; } }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
.notebook {
width: 100%;
float: none; } }
@media only all and (max-width: 47.938em) {
.notebook {
width: 100%;
float: none; } }
@media only all and (max-width: 30em) {
.notebook {
width: 150%;
margin-left: -5.1rem;
float: none; } }
.notebook .screen:before {
content: "";
position: absolute;
border-radius: 50%;
background: #E5EBED;
height: 0.25rem;
width: 0.25rem;
margin: 0.3125rem 0 0 8.625rem; }
.notebook .screen {
background: #464C51;
border-radius: 0.5rem 0.5rem 0 0;
height: 11.72rem;
width: 18.28rem;
margin: 0 auto; }
.notebook .screen .screen-content {
height: 10.1rem;
width: 16.73rem;
position: absolute;
z-index: 1;
margin-top: 0.8rem;
margin-left: 0.8rem;
background-size: cover;
background-repeat: no-repeat; }
.notebook .screen .screen-content-hover {
height: 10.1rem;
width: 16.73rem;
position: absolute;
z-index: 2;
opacity: 0;
margin-top: 0.8rem;
margin-left: 0.8rem;
background-color: #87b672; }
.notebook .screen .screen-content-hover .fa-plus-square {
font-size: 5rem;
color: #464C51;
margin-top: 2.5rem;
margin-left: 5.9rem; }
.notebook .screen .screen-content-hover:hover {
opacity: 0.8; }
.notebook .screen:after {
content: "";
position: absolute;
background: #161B21;
height: 10rem;
width: 16.63rem;
border-radius: 0.125rem;
margin: 0.875rem 0 0 0.8125rem;
transition: background 1s ease-in-out; }
.notebook .keyboard {
background: #DFDCDC;
border-radius: 0 0 0.3125rem 0.3125rem;
height: 1.25rem;
width: 21.88rem;
margin: 0 auto; }
.notebook .keyboard:after {
content: "";
position: absolute;
background: #757979;
height: 0.375rem;
width: 3.125rem;
margin: 0 0 0 9.375rem;
border-radius: 0 0 0.5rem 0.5rem; }
.keyboard:before {
content: "";
position: absolute;
height: 0.5rem;
width: 23.13rem;
margin: 0.4375rem 0 0 -0.625rem;
z-index: -1;
border-radius: 100%; }
/*# sourceMappingURL=template.css.map */