@charset "UTF-8";
/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v30-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-900 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/roboto-v30-latin-900.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-900.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-900.svg#Roboto') format('svg'); /* Legacy iOS */
}


.topgreenline {
  background: #1A361E;
}

.vorstellungteam {
	padding-left: 14rem;
	padding-right: 14rem;
	width: 100%;
}
.vorstellungteam h1 {
	padding-top: 0.5%;
	padding-bottom: 3%;
	text-align: left;
}
.vorstellungteam p {
	font-size: 2rem;
}
.vorstellungteam img {
	margin-left: 15%;
	margin-right: 15%;
	width: 70%;
}
    @media only all and (min-width: 60em) and (max-width: 74.938em) {
.vorstellungteam {
	padding-left: 7rem;
	padding-right: 7rem;
	width: 100%;
}
.vorstellungteam h1 {
	padding-top: 0.5%;
	padding-bottom: 3%;
	text-align: left;
}
.vorstellungteam p {
	font-size: 2rem;
}
.vorstellungteam img {
	margin-left: 5%;
	margin-right: 5%;
	width: 90%;
}}

@media only all and (min-width: 48em) and (max-width: 59.938em) { 
.vorstellungteam {
	padding-left: 7rem;
	padding-right: 7rem;
	width: 100%;
}
.vorstellungteam h1 {
	padding-top: 0.5%;
	padding-bottom: 3%;
	text-align: left;
}
.vorstellungteam p {
	font-size: 2rem;
}
.vorstellungteam img {
	margin-left: 5%;
	margin-right: 5%;
	width: 90%;
}}
	 
@media only all and (max-width: 47.938em) {	 
.vorstellungteam {
	padding-left: 0;
	padding-right: 0;
	width: 100%;
}
.vorstellungteam h1 {
	padding-top: 0.5%;
	padding-bottom: 3%;
	text-align: left;
}
.vorstellungteam p {
	font-size: 1rem;
}
.vorstellungteam img {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
}}


.modular-row.team {
	border-bottom-color: white;
	border-bottom-width: 0rem;
	border-bottom-style: solid;
}

.membername {
	height: 4rem;
	margin-top: 0.5rem;
}
.membername p {
	font-size: 1.5rem !important;
	line-height: 2rem;
	color: #1a361e !important;
}
.membertitle {
	margin-top: 1rem;
	height: 2rem;
}
.membertitle p {
	font-size: 1rem !important;
	line-height: 1rem;
	color: #1a361e !important;
	font-weight: bold;
}
.memberinfo {
	margin-top: 1rem;
	margin-bottom: 0.5rem;
	height: 4.5rem;
}
.memberinfo p {
	font-size: 1rem !important;
	line-height: 1rem;
	color: #1a361e !important;
}

.eventbubble {
}

.contact-left {
	position: relative;
	width: 100%;
	max-height: 50rem;
	margin-bottom: 6rem;
}
.contact-left img {
	width: 100%;
	object-fit: cover;
	height: 50rem;
}

.contact-right {
}

.contact-right h1 {
	font-size: 2.5rem;
	text-align: left;
}

.portfolio h2 {
	font-size: 1.7rem;
	color: #1A361E !important;
}

.individuelleprogrammierung h2 {
	font-size: 1.7rem;
	color: #1A361E !important;
}

.services-slide {
	
}

.services-slide-picture {
	height: auto;
}

.service-slide-text {
	padding: 5rem !important;
}
.font-white {
	color: white !important;
}

.service-slide-text h1 {
	font-size: 5rem;
	color: white !important;
}

.service-slide-text p {
	font-size: 2rem;
	text-align: center;
	color: white !important;
	
}


.service-liste h3 {
	font-size: 1.5rem;
	color: #1a361e !important;
}
.modular .bottom .services .service .fa {
	color: #1a361e !important;
}
.service-feature-content {
	text-align: left !important;
}
.modular .features h2 {
	margin-top: 20rem;
	color: #1a361e !important;
	font-size: 2 rem;
	text-transform: none !important;
}
.footer h4 {
	font-size: 1.5rem;
	color: #1a361e !important;
}

.footer .quickmenu i {
	color: #1a361e !important;
}

.job {
    padding: 0rem;
    word-wrap: break-word;
}


	

@media only all and (max-width: 75em) { 
.job .job {
	width: 100% !important;
}}

.job .job {
	text-align: left;
	width: 45%;
	float: left;
    padding-top: 2rem;
	padding-bottom: 2rem;
    word-wrap: break-word;
	margin-top: 5rem;
	margin-bottom: 5rem;
	margin-right: 4rem;
}

.job h1 {
	font-size: 2.5rem;
	color: #1a361e !important;
	line-height: 5rem;
	text-align: left;
}

.job h2 {
	font-size: 2rem;
	color: #1a361e !important;
	min-height: 5rem;
	line-height: 4rem;
	text-align: left;
}
.job h3 {
	font-size: 1.5rem;
	color: #1a361e !important;
	line-height: 3rem;
	text-align: left;
}






















#header > .grid ul.social-icons,
#header #navbar ul.social-icons,
#header .logo ul.social-icons,
#header .social-navigation ul.social-icons, #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, .button-secondary {
  display: inline-block;
  padding: 7px 20px; }
  .button-small.button, .archive-list button.button-small, .button-small.button-secondary {
    padding: 3px 10px;
    font-size: 0.9rem; }

html, body {
  height: 100%; }

body {
  background: #fff;
  color: #353D3E;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

a {
  color: #356D3F; }
  a:hover {
    color: #142817; }

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: 13rem; }

.left {
  float: left; }

.right {
  float: right; }

.default-animation, #body, .modal, .archive-list button, .modular .bottom .button, .modular .bottom .archive-list button, .archive-list .modular .bottom 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, .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 step-start;
  -moz-transition: all 0.5s step-start;
  transition: all 0.5s step-start; }

.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-verti {
  padding-top: 1rem;
  padding-bottom: 1rem; }

.padding-above, #header {
  padding-top: 1rem; }

.padding-below {
  padding-bottom: 1rem; }

.hyphenate, .modular .features p, .modular .bottom p, .modular .bottom .services .service p, .portfolio .notebooks .notebook-row .notebook p, .modular-row .bottom p, .sc-columns dl, dt, .sc-columns dl dd, .modular-row .bottom h1, .sc-columns table thead tr, .sc-columns table tbody tr, .referenzen tr th, .referenzen tr td {
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto; }
.sc-columns table thead tr th {
  column-span: all;
}
#header {
  position: absolute;
  z-index: 10000;
  width: 100%;
  height: 12rem;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0.05rem 1rem rgba(0, 0, 0, 0.15); }
  @media only all and (max-width: 30em) {
    #header {
      height: 6rem; } }
  #header > .grid,
  #header #navbar,
  #header .logo,
  #header .social-navigation {
    height: 50%; }
    @media only all and (max-width: 30em) {
      #header > .grid,
      #header #navbar,
      #header .logo,
      #header .social-navigation {
        height: 100%; } }
    #header > .grid .fixed,
    #header #navbar .fixed,
    #header .logo .fixed,
    #header .social-navigation .fixed {
      background: #fff;
      padding-left: 7rem;
      padding-right: 7rem;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      opacity: 0.9;
      box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2); }
      @media only all and (max-width: 47.938em) {
        #header > .grid .fixed,
        #header #navbar .fixed,
        #header .logo .fixed,
        #header .social-navigation .fixed {
          padding-left: 10px;
          padding-right: 10px; } }
    #header > .grid ul.social-icons,
    #header #navbar ul.social-icons,
    #header .logo ul.social-icons,
    #header .social-navigation ul.social-icons {
      font-size: 1.2rem;
      top: 62%; }
  #header #navbar {
    font-size: 1.2rem; }
    @media only all and (max-width: 47.938em) {
      #header #navbar {
        margin-left: -1rem;
        margin-right: -1rem; }
        #header #navbar.fixed {
          margin: 0; } }
    #header #navbar ul {
      margin: 0;
      padding: 0;
      list-style: none; }
      #header #navbar ul.navigation {
        letter-spacing: 0.056rem;
        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: "Roboto", "Lucida Grande", "Calibri", Helvetica, Arial, sans-serif;
            font-weight: 900;
            display: inline-block;
            padding: 0.3rem 0.6rem; }
            #header #navbar ul.navigation li a.active {
              color: #356D3F; }
            #header #navbar ul.navigation li a:hover {
              color: #4FA45B; }
          #header #navbar ul.navigation li:first-child a {
            padding-left: 0; }
          #header #navbar ul.navigation li:last-child a {
            padding-right: 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(233, 244, 235, 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.6rem;
              display: block; }
              #header #navbar ul.navigation li:hover li a:after, #header #navbar ul.navigation li:hover li a:before {
                display: none; }
            #header #navbar ul.navigation li:hover li.active > a {
              background: #356D3F;
              color: #e9f4eb; }
        @media only all and (max-width: 59.938em) {
          #header #navbar ul.navigation {
            display: none; } }
    #header #navbar .panel-activation {
      display: none;
      font-size: 1.82rem;
      cursor: pointer;
      float: right; }
      @media only all and (min-width: 60em) and (max-width: 74.938em) {
        #header #navbar .panel-activation {
          left: 7rem; } }
      @media only all and (min-width: 48em) and (max-width: 59.938em) {
        #header #navbar .panel-activation {
          left: 7rem;
          top: 64.46%; } }
      @media only all and (min-width: 30.063em) and (max-width: 47.938em) {
        #header #navbar .panel-activation {
          left: 1rem;
          top: 64.46%; } }
      @media only all and (max-width: 59.938em) {
        #header #navbar .panel-activation {
          display: inline-block;
          position: absolute;
          -webkit-transform: translateY(0);
          -moz-transform: translateY(0);
          -ms-transform: translateY(0);
          -o-transform: translateY(0);
          transform: translateY(0); } }
      @media only all and (max-width: 30em) {
        #header #navbar .panel-activation {
          left: 1rem;
          top: 124.46%; } }

.modular.header-image #header .fixed {
  background: #1A361E;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out; }

.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: -13.5rem;
  padding-top: 16rem; }
.header-image #breadcrumbs {
  margin-top: 1rem; }
.header-image #header {
  background-color: rgba(221, 229, 230, 0);
  box-shadow: none; }
  .header-image #header #logo a,
  .header-image #header #logo h3 {
    color: #dde5e6; }
  .header-image #header .menu-btn,
  .header-image #header a {
    color: #dde5e6; }
  .header-image #header a:after,
  .header-image #header a:before {
    background-color: rgba(221, 229, 230, 0.7) !important; }
  .header-image #header #navbar ul.navigation ul li a {
    color: #356D3F; }
    .header-image #header #navbar ul.navigation ul li a:hover {
      color: #142817; }

.header-lite #body {
  padding-top: 12rem; }
  @media only all and (max-width: 30em) {
    .header-lite #body {
      height: 6rem; } }
.header-lite #header {
  box-shadow: none;
  color: #6B7A7D; }
  .header-lite #header .menu-btn,
  .header-lite #header a {
    color: #6B7A7D; }
  .header-lite #header li.active a {
    color: #356D3F; }
  .header-lite #header .logo img {
    height: 4.5rem; }
  .header-lite #header .logo ul.social-icons li {
    background: rgba(107, 122, 125, 0.12); }
    .header-lite #header .logo ul.social-icons li:hover {
      background: #356D3F; }
    .header-lite #header .logo ul.social-icons li a,
    .header-lite #header .logo ul.social-icons li i {
      color: #353D3E; }
    .header-lite #header .logo ul.social-icons li:hover a,
    .header-lite #header .logo ul.social-icons li:hover i {
      color: white; }
    .header-lite #header .logo ul.social-icons li .fa-ambulance::before {
      position: relative;
      top: 1px; }
    .header-lite #header .logo ul.social-icons li .fa-comment::before {
      position: relative;
      bottom: 1px; }

.social-text {
  vertical-align: -3%; }
  @media only all and (max-width: 30em) {
    .social-text {
      display: none; } }

.footer {
  font-size: 0.9rem;
  background: #d7dad8;
  width: 100%;
  padding-top: 2rem; }
  .footer:after {
    content: "";
    display: table;
    clear: both; }
  .footer a {
    color: #353D3E; }
  .footer h2 {
    line-height: 1.88;
    font-weight: 900;
    letter-spacing: 0.14rem;
    margin-bottom: 0; }
  .footer h4, .footer .archive-list label, .archive-list .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 {
    line-height: 1;
    margin-top: 0;
    text-align: left;
    color: #e9f4eb; }
  .footer hr {
    border-color: rgba(53, 61, 62, 0.5); }
  .footer .footer-items {
    margin-top: 6rem; }
    @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: auto;
    vertical-align: top;
    padding-right: 2rem; }
    .footer .footer-module.left {
      width: 44%; }
      .footer .footer-module.left h4, .footer .footer-module.left .archive-list label, .archive-list .footer .footer-module.left label, .footer .footer-module.left .callout .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .footer .footer-module.left .name, .footer .footer-module.left .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .footer .footer-module.left .button, .footer .footer-module.left .callout .pricing-container .pricing-item .foot .archive-list button, .callout .pricing-container .pricing-item .foot .archive-list .footer .footer-module.left button, .footer .footer-module.left .archive-list .callout .pricing-container .pricing-item .foot button, .archive-list .callout .pricing-container .pricing-item .foot .footer .footer-module.left button {
        margin-bottom: 0;
        line-height: 1.06; }
    .footer .footer-module.middle {
      width: 39%; }
    .footer .footer-module.right {
      width: 17%; }
      .footer .footer-module.right h2 {
        color: #e9f4eb; }
        @media only all and (max-width: 47.938em) {
          .footer .footer-module.right h2 {
            float: right;
            margin-top: 3rem;
            line-height: 1; } }
        .footer .footer-module.right h2 i {
          color: #353D3E; }
    .footer .footer-module:last-child {
      padding-right: 0; }
    @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 span.social-text::after {
      display: none;
      clear: none;
      content: none; }
    .footer .footer-module strong, .footer .footer-module label, .footer .footer-module th {
      color: #e9f4eb; }
    @media only all and (max-width: 47.938em) {
      .footer .footer-module {
        width: 100% !important;
        float: none; } }
  .footer .logo {
    border-bottom: 0 none;
    color: #e9f4eb; }
    .footer .logo:after {
      content: "";
      display: table;
      clear: both; }
    .footer .logo a img {
      height: 6rem;
      margin-bottom: 5rem; }
      @media only all and (min-width: 48em) and (max-width: 59.938em) {
        .footer .logo a img {
          margin-bottom: 2.6rem; } }
  .footer .quickmenu {
    margin: 0;
    padding: 0;
    list-style: none; }
    @media only all and (max-width: 47.938em) {
      .footer .quickmenu {
        float: left; } }
    .footer .quickmenu i {
      padding-right: 0.5rem;
      color: #e9f4eb;
      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: 40%;
    font-family: "Roboto", "Lucida Grande", "Calibri", Helvetica, 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: 60%;
    text-align: right;
    text-transform: uppercase;
    font-family: "Roboto", "Lucida Grande", "Calibri", Helvetica, 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; }

body {
  font-family: "Roboto", "Lucida Grande", "Calibri", Helvetica, Arial, sans-serif;
  font-weight: 400; }

h1,
h2,
h3,
h4,
.archive-list 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,
h5,
h6 {
  font-family: "Roboto", "Lucida Grande", "Calibri", Helvetica, 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, .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 {
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  color: #A1B7BC; }
  @media only all and (min-width: 48em) and (max-width: 59.938em) {
    h4, .archive-list 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 {
      font-size: 1.35rem; } }
  @media only all and (max-width: 47.938em) {
    h4, .archive-list 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 {
      font-size: 1.25rem; } }

h1 {
  text-align: center;
  font-weight: normal; }

h3 {
  letter-spacing: -1px; }

h1 + h2 {
  margin: -2rem 0 2rem;
  font-size: 1.4rem;
  line-height: 1;
  text-align: center;
  font-family: "Roboto", "Lucida Grande", "Calibri", Helvetica, Arial, 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;
  font-size: 1.3rem;
  line-height: 1;
  text-align: center;
  font-family: "Roboto", "Lucida Grande", "Calibri", Helvetica, Arial, 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: 0;
    margin-bottom: 0; }
  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: monospace;
  line-height: 1.64;
  font-size: 1.146rem; }

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: #356D3F;
  color: #e9f4eb; }

.label {
  vertical-align: middle;
  background: #356D3F;
  border-radius: 100%;
  color: #e9f4eb;
  height: 1rem;
  min-width: 1rem;
  line-height: 1rem;
  display: inline-block;
  text-align: center;
  font-size: 0.7rem;
  font-family: "Roboto", "Lucida Grande", "Calibri", Helvetica, 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: #356D3F;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(45, 92, 53, 0.7); }

.form-field .required {
  color: #F3443F;
  font-size: 2rem;
  line-height: 2rem;
  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.2rem;
  border: 1px solid #d8d8d8; }

.button, .archive-list button {
  background: #356D3F;
  color: #e9f4eb;
  border: 1px solid #356D3F; }
  .button:hover, .archive-list button:hover {
    background: #e9f4eb;
    color: #356D3F; }
  .button:active, .archive-list button:active {
    box-shadow: 0 1px 0 #214427; }

.button-secondary {
  background: #6B7A7D;
  color: #e9f4eb;
  border: 1px solid #6B7A7D; }
  .button-secondary:hover {
    background: #e9f4eb;
    color: #6B7A7D; }
  .button-secondary:active {
    box-shadow: 0 1px 0 #4f5a5c; }

.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.3333333333%; }
  @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: #356D3F;
  padding: 0.875rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  color: #e9f4eb;
  font-size: 1.75rem;
  text-align: center; }

.bullet-icon-1 {
  background: #356D3F; }

.bullet-icon-2 {
  background: #3e6d35; }

.bullet-icon-3 {
  background: #6d3635; }

.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: #353D3E; }
        #panel .navigation li.active > a:hover {
          color: #353D3E; }
      #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: #e9f4eb;
  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: #356D3F;
        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: #dde5e6;
      text-align: left; }
  .blog-header h1 {
    font-size: 2.5rem;
    font-weight: 300;
    margin-top: 0;
    margin-bottom: -0.05rem;
    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: 1rem; }

.list-item {
  border-bottom: 1px solid #0d1a0f;
  margin-bottom: 1rem; }
  .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 .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 {
      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 .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 {
        color: #A1B7BC; }
        .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 .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 {
          color: #356D3F; }
    .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(161, 183, 188, 0.1);
    padding: 0.7rem 1rem;
    margin-bottom: 0.2rem;
    margin-right: 0.5rem;
    font-size: 1rem;
    text-transform: uppercase;
    color: #353D3E;
    font-family: "Roboto", "Lucida Grande", "Calibri", Helvetica, 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(161, 183, 188, 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: "Roboto", "Lucida Grande", "Calibri", Helvetica, Arial, sans-serif; }
    .tags li a {
      color: #353D3E; }
      .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: #353D3E; }
    .archives a:hover, .related-pages a:hover {
      color: #356D3F; }

.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: 1rem; }
    #sidebar .sidebar-content h4, #sidebar .sidebar-content .archive-list label, .archive-list #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 {
      margin-bottom: 1rem;
      text-align: left; }
    #sidebar .sidebar-content p, #sidebar .sidebar-content ul {
      margin-top: 1rem; }

ul.pagination {
  margin: 0 0 1rem;
  text-align: center; }

.prev-next {
  margin-top: 5rem;
  text-align: center; }

.archive-list h4, .archive-list label, .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(53, 61, 62, 0.2);
  box-shadow: none; }
.archive-list label {
  font-size: 1rem; }
.archive-list button {
  font-family: "Roboto", "Lucida Grande", "Calibri", Helvetica, 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: #647375; }
  @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; }

dl {
  margin: 0;
  font-size: 0.9rem;
  hyphens: none;
  text-align: left; }

dt {
  font-weight: 700; }

dd {
  margin: 0; }

.notices,
.notices.blue,
.notices.green,
.notices.red,
.notices.yellow {
  padding: 1px 3px 1px 3px !important;
  border-right: 3px solid;
  border-left: 3px solid !important;
  display: inline-block; }
  .notices p,
  .notices.blue p,
  .notices.green p,
  .notices.red p,
  .notices.yellow p {
    hyphens: none !important; }

.clearfix::after {
  content: "";
  display: table;
  clear: both; }

table {
  margin-bottom: 2.875rem; }

@media only all and (max-width: 47.938em) {
  .sc-columns {
    columns: 1 auto !important;
    -moz-columns: 1 auto !important; } }
.sc-columns div {
  margin: 0 0 1.15rem;
  padding: 0 !important;
  display: inline-block; }
  .sc-columns div p {
    line-height: 1.4rem; }

iframe {
  width: 99% !important;
  height: 99% !important;
  min-height: 38vh; }

.rrssb-buttons {
  max-width: 24rem;
  margin-bottom: 1.7rem;
  margin-top: 0.2rem !important; }
  @media only all and (max-width: 47.938em) {
    .rrssb-buttons {
      margin-bottom: 2.6rem !important; } }

.features .footer {
  margin-top: 2rem; }

.modular .features {
  padding: 4rem 0 0;
  text-align: center; }
  .modular .features:after {
    content: "";
    display: table;
    clear: both; }
  .modular .features h2 {
    margin: 0 0 1rem;
    line-height: 100%;
    color: #A1B7BC; }
  .modular .features hr {
    margin-top: 2rem; }
  .modular .features p {
    margin: 2rem 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 {
    background-color: #356D3F;
    color: #dde5e6;
    font-family: "Roboto", "Lucida Grande", "Calibri", Helvetica, Arial, sans-serif;
    border-radius: 0;
    box-shadow: none;
    font-size: 1rem; }
  .modular .features .feature-items {
    margin: 0; }
    @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%; } }
    @media only all and (min-width: 60em) and (max-width: 74.938em) {
      .modular .features .feature {
        min-height: 13.2rem; } }
    @media only all and (min-width: 75em) {
      .modular .features .feature {
        min-height: 13.2rem; } }
    .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 .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 {
      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 .feature {
      padding-right: 2rem; }
      .modular .features.big .feature 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: #A1B7BC; }
  .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 {
    background-color: #356D3F;
    color: #dde5e6;
    font-family: "Roboto", "Lucida Grande", "Calibri", Helvetica, 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 {
      background-color: #142817; }
  .modular .bottom.borderbottom {
    padding-bottom: 0; }
    .modular .bottom.borderbottom hr {
      padding-top: 3rem; }
  .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: 1rem;
        width: 6rem;
        height: 6rem;
        font-size: 4rem;
        float: left;
        text-align: right;
        padding-right: 1.8rem; }
      .modular .bottom .services .service p {
        margin: 0.5rem 1rem 1.3rem 6rem;
        min-height: 5.5rem;}
      .modular .bottom .services .service h4, .modular .bottom .services .service .archive-list label, .archive-list .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 {
        text-align: left;
        margin: 1rem 0 0; }
        @media only all and (min-width: 60em) and (max-width: 74.938em) {
          .modular .bottom .services .service h4, .modular .bottom .services .service .archive-list label, .archive-list .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 {
            line-height: 1.15;
            min-height: 3.132rem; } }
        @media only all and (min-width: 48em) and (max-width: 59.938em) {
          .modular .bottom .services .service h4, .modular .bottom .services .service .archive-list label, .archive-list .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 {
            line-height: 1.15;
            min-height: 3.132rem; } }
        @media only all and (max-width: 47.938em) {
          .modular .bottom .services .service h4, .modular .bottom .services .service .archive-list label, .archive-list .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 {
            line-height: 1.15;
            min-height: 3.132rem; } }

.contact {
  padding: 4rem 0 1.5rem; }
  .contact h4, .contact .archive-list label, .archive-list .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, .contact .callout .pricing-container .pricing-item .foot .archive-list button, .callout .pricing-container .pricing-item .foot .archive-list .contact button, .contact .archive-list .callout .pricing-container .pricing-item .foot button, .archive-list .callout .pricing-container .pricing-item .foot .contact button {
    text-align: left; }

.callout {
  background: rgba(175, 175, 175, 0.38);
  padding: 2rem 0.938rem 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: 0;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 0; }
  .callout .pricing-container {
    position: relative;
    z-index: 10;
    margin-top: 2rem;
    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.105%;
      margin-right: 0.3rem;
      margin-bottom: 2rem;
      position: relative; }
      .callout .pricing-container .pricing-item:nth-child(even) {
        margin-right: 0.3rem; }
        @media only all and (min-width: 48em) and (max-width: 59.938em) {
          .callout .pricing-container .pricing-item:nth-child(even) {
            margin-right: 0; } }
      .callout .pricing-container .pricing-item:last-child {
        margin-right: 0 !important; }
      @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: 49.194%; } }
      @media only all and (min-width: 75em) {
        .callout .pricing-container .pricing-item {
          width: 24.124%; } }
      /*.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: #356D3F;
        color: #e9f4eb;
        padding: 0.5rem 0.25rem;
        font-weight: 600; }
      .callout .pricing-container .pricing-item .info {
        line-height: 1.4rem;
        padding: 0.4rem 0.2rem;
        border-bottom: #1A361E 1px solid; }
      .callout .pricing-container .pricing-item .price {
        font-weight: bold;
        color: #A1B7BC;
        font-size: 1.6rem;
        font-family: "Roboto", "Lucida Grande", "Calibri", Helvetica, Arial, sans-serif;
        font-weight: normal;
        border-bottom: #1A361E 1px solid;
        line-height: 2rem;
        padding: 0.8rem 0.2rem; }
      .callout .pricing-container .pricing-item .foot {
        background: #356D3F;
        color: #e9f4eb;
        text-align: center;
        padding: 0.2rem 0;
        margin: -0.2rem 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 {
          margin: 0;
          padding: 0;
          width: 9rem;
          font-size: 1rem;
          line-height: 2.5rem;
          color: #e9f4eb;
          display: inline-block;
          background: rgba(233, 244, 235, 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 {
            background: rgba(233, 244, 235, 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 h5 {
    margin: 0 0 0.86rem; }
  .team h2 {
    color: #A1B7BC;
    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: 21.81%;
      margin: 0 1rem 2rem; }
      @media only all and (min-width: 48em) and (max-width: 59.938em) {
        .team .members .member:nth-child(2n) {
          margin-right: 0; } }
      @media only all and (min-width: 48em) and (max-width: 59.938em) {
        .team .members .member:nth-child(2n+1) {
          margin-left: 0; } }
      @media only all and (min-width: 60em) and (max-width: 74.938em) {
        .team .members .member:nth-child(3n) {
          margin-right: 0; } }
      @media only all and (min-width: 60em) and (max-width: 74.938em) {
        .team .members .member:nth-child(3n+1) {
          margin-left: 0; } }
      @media only all and (min-width: 75em) {
        .team .members .member:nth-child(4n) {
          margin-right: 0; } }
      @media only all and (min-width: 75em) {
        .team .members .member:nth-child(4n+1) {
          margin-left: 0; } }
      @media only all and (max-width: 47.938em) {
        .team .members .member {
          display: block;
          width: 100%;
          text-align: center;
          margin: 0 0 2rem; } }
      @media only all and (min-width: 48em) and (max-width: 59.938em) {
        .team .members .member {
          width: calc(50% - 1rem);
          margin-bottom: 2rem; } }
      @media only all and (min-width: 60em) and (max-width: 74.938em) {
        .team .members .member {
          width: calc(32.61% - 1rem); } }
      @media only all and (min-width: 75em) {
        .team .members .member {
          width: calc(23.938% - 1rem); } }
      .team .members .member h4, .team .members .member .archive-list label, .archive-list .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 {
        text-align: left;
        margin-bottom: 0;
        line-height: 1.15;
        min-height: 3.132rem; }
        @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 .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 {
            text-align: center;
            line-height: 1;
            min-height: inherit; } }
      .team .members .member span {
        display: block;
        line-height: 1.15;
        min-height: 2.3rem; }
        @media only all and (min-width: 75em) {
          .team .members .member span {
            font-size: 0.843rem; } }
      .team .members .member hr {
        margin: 0.6rem 0 1.2rem; }
    .team .members .social-icons {
      line-height: 2rem;
      margin: 0.6rem 0 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: right;
        height: 2.1rem;
        background: #c0e1c4;
        text-align: left; }
        .team .members .social-icons li a {
          color: #353D3E;
          display: block;
          margin: 0.1rem 0.8rem; }
        .team .members .social-icons li i {
          padding-right: 0.6rem;
          position: relative;
          bottom: 1px; }
        .team .members .social-icons li:hover {
          background: rgba(233, 244, 235, 0.38); }
          .team .members .social-icons li:hover a,
          .team .members .social-icons li:hover i {
            color: #356D3F; }

.portfolio {
  padding: 2rem 0.938rem 1rem;
  text-align: center; }
  @media only all and (max-width: 59.938em) {
    .portfolio {
      text-align: center; } }
  .portfolio h2 {
    color: #A1B7BC; }
  .portfolio .notebooks {
    margin-top: 4rem; }
    .portfolio .notebooks .notebook-row {
      box-shadow: inset 0 -90px 0 -20px #f7f7f7;
      margin-left: -14rem;
      margin-right: -14rem;
      padding-left: 14rem;
      padding-right: 14rem;
      background: #EEEEEE;
      padding-bottom: 6rem; }
      @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: 155%;
            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 .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 {
          text-align: left;
          margin: 1.7rem 0 0; }
        .portfolio .notebooks .notebook-row .notebook p {
          margin: 0 0 0.85rem; }
        .portfolio .notebooks .notebook-row .notebook .desc {
          width: 18rem;
          margin: 0 2rem; }
          @media only all and (min-width: 60em) and (max-width: 74.938em) {
            .portfolio .notebooks .notebook-row .notebook .desc {
              width: calc(100% - 4rem); } }
          @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 {
              margin: 0 1rem;
              width: calc(100% - 2rem); } }
          @media only all and (min-width: 48em) and (max-width: 59.938em) {
            .portfolio .notebooks .notebook-row .notebook .desc {
              width: calc(100% - 4rem); } }

.arrows > button {
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;  }

.timeline {
  white-space: nowrap;
  overflow-y: hidden; 
  overflow-y: auto; 
  height: auto;
  margin-bottom: 5rem;
}

.timeline ol {
  font-size: 0;
  width: 100vw;
  padding: 25rem 0;
  transition: all 1s; }

.timeline ol li {
  position: relative;
  display: inline-block;
  list-style-type: none;
  width: 160px;
  height: 3px;
  background: #6B7A7D; }

.timeline ol li:last-child {
  width: 280px; }

.timeline ol li:not(:first-child) {
  margin-left: 14px; }

.timeline ol li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(100% + 1px);
  bottom: 0;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #356D3F; }

.timeline ol li div {
  position: absolute;
  left: calc(100% + 7px);
  width: 20rem;
  padding: 15px;
  font-size: 1rem;
  white-space: normal;
  color: #353D3E;
  background: #e9f4eb; }
  .timeline ol li div p {
    margin: 0.408rem 0 0;
    line-height: 1.394; }

.timeline ol li div::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid; }

.timeline ol li:nth-child(odd) div {
  top: -16px;
  transform: translateY(-100%); }

.timeline ol li:nth-child(odd) div::before {
  top: 100%;
  border-width: 8px 8px 0 0;
  border-color: #e9f4eb transparent transparent transparent; }

.timeline ol li:nth-child(even) div {
  top: calc(100% + 16px); }

.timeline ol li:nth-child(even) div::before {
  top: -8px;
  border-width: 8px 0 0 8px;
  border-color: transparent transparent transparent #e9f4eb; }

.timeline time {
  display: block;
  font-size: 1.2rem;
  font-weight: bold; }

/* TIMELINE ARROWS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.timeline .arrows {
  display: flex;
  justify-content: center;
  margin-bottom: 20px; }

.timeline .arrows .arrow__prev {
  margin-right: 20px; }

.timeline .disabled {
  opacity: .5; }

/* GENERAL MEDIA QUERIES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 1000px) {
  .timeline ol,
  .timeline ol li {
    width: auto; }

  .timeline ol {
    padding: 0;
    transform: none !important; }

  .timeline ol li {
    display: block;
    height: auto;
    background: transparent; }

  .timeline ol li:first-child {
    margin-top: 25px; }

  .timeline ol li:not(:first-child) {
    margin-left: auto; }

  .timeline ol li div {
    width: 94%;
    height: auto !important;
    margin: 0 auto 25px; }

  .timeline ol li div {
    position: static; }

  .timeline ol li:nth-child(odd) div {
    transform: none; }

  .timeline ol li:nth-child(odd) div::before,
  .timeline ol li:nth-child(even) div::before {
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border: none;
    border-left: 1px solid #e9f4eb;
    height: 25px; }

  .timeline ol li:last-child,
  .timeline ol li:nth-last-child(2) div::before,
  .timeline ol li:not(:last-child)::after,
  .timeline .arrows {
    display: none; } }
.logo {
  border-bottom: 1px solid #353D3E; }
  .logo h3 {
    font-size: 2.5rem;
    font-family: "Roboto", "Lucida Grande", "Calibri", Helvetica, Arial, sans-serif;
    line-height: 2rem;
    margin: 0;
    float: left; }
    .logo h3 a {
      color: #353D3E; }
  .logo h4, .logo .archive-list label, .archive-list .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 {
    text-align: left; }
  .logo ul {
    margin: 0;
    padding: 0;
    list-style: none; }
    .logo ul.social-icons {
      float: right;
      line-height: 2.1rem;
      margin: 0; }
      .logo ul.social-icons li {
        float: left;
        background: #e9f4eb;
        text-align: right;
        margin-left: 0.8rem;
        padding: 0 0.64rem; }
        @media only all and (max-width: 30em) {
          .logo ul.social-icons li {
            margin-left: 0.6rem; } }
        .logo ul.social-icons li a {
          color: #353D3E;
          display: block;
          margin-top: 0.08rem; }
        .logo ul.social-icons li:hover {
          background: rgba(233, 244, 235, 0.5); }

.notebook {
  display: inline-flex;
  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: #356D3F; }
    .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: #fff;
  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 */