@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Ubuntu');

/** * Layout */
 html {
	 scroll-behavior: smooth;
}
 body {
    color: #8c8c8c;
    scroll-behavior: smooth;
    background-color: black;
    height: 100vh;
}
 .navbar-burger {
	 background-color: transparent;
	 border: 0;
	 display: block;
}
 .navbar-burger:hover {
	 color: #8dc176;
}
 .navbar-burger span {
	 height: 2px;
}
 .navbar-brand {
	 position: absolute;
	 height: 100%;
}
 .navbar-brand.is-active {
	 display: none;
}
 .section .is-small {
	 padding: 0rem 1.5rem;
}
 .is-top-paddingless {
	 padding-top: 0 !important;
}
 .is-vertical-paddingless {
	 padding-top: 0 !important;
	 padding-bottom: 0 !important;
}
/** * Layout - Align */
 .has-items-end {
	 align-items: flex-end;
	 display: flex;
}
 .has-vertical-center {
	 display: flex;
	 align-items: center;
}
/** * Buttons */
 .button.is-spaced-top {
	 margin-top: 1.25rem;
}
/** * Fonts */
 h1 {
	 font-family: 'Ubuntu', sans-serif;
	 font-weight: lighter;
	 font-size: 3rem;
}
 h2 {
	 font-family: 'Open Sans', sans-serif;
	 font-size: 1.5rem;
	 color: #8c8c8c;
}
 p {
	 font-family: 'Open Sans', sans-serif;
	 font-weight: lighter;
}
 a {
	 text-decoration: underline;
	 color: #639467;
}
 a:hover {
	 color: white;
}
 .header-title {
	 color: white;
	 text-transform: uppercase;
	 text-align: center;
	 line-height: 1.1;
}
 .slogan {
	 text-align: center;
	 color: white;
}
 span {
	 font-weight: 800;
}
/** * Stuff */
 .navbar {
	 position: -webkit-sticky;
	/* Safari */
	 position: sticky;
	 top: 0;
	 border-bottom: 2px solid #8ac376;
}
 .navbar .navbar-end {
	 text-transform: uppercase;
}
 .navbar .navbar-end .navbar-item {
	 text-decoration: none;
}
 .navbar .navbar-end .navbar-item:hover {
	 background-color: #8ac376;
	 color: white;
}
 .hero-bg {
	 background: url('img/header.jpg');
	 background-position: 0% 50%;
	 background-size: cover;
	 background-attachment: fixed;
	 width: 100%;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 position: relative;
}
 .hero-bg .logo {
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 margin-bottom: 2em;
}
 .hero-bg .hero-div {
	 text-align: center;
}
 .hero-bg .hero-div button {
	 text-transform: uppercase;
	 background-color: #6ec272;
	 font-weight: 600;
	 border: none;
	 text-align: center;
	 margin-top: 2em;
	 border-radius: 1px;
	 padding: 3px 15px;
}
 .hero-bg .hero-div button a {
	 color: white;
	 text-decoration: none;
}
 .hero-bg .hero-div button:hover {
	 background-color: rgba(255, 255, 255, .0);
	 border: 2px solid white;
}
 .hero-bg * {
	 position: relative;
}
 .overlay:before {
	 position: absolute;
	 content: " ";
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 display: block;
	 z-index: 0;
	 opacity: 0.8;
	 background-image: linear-gradient(to bottom right, #000, #000);
}
 .section-about {
	 display: flex;
	 justify-content: center;
	 align-items: center;
}
 .section-about .about-info {
	/* max-width: 400px;*/
}
 .section-about .about-info-image {
	 /*margin-top: 2em;*/
}
 .section-about .columns {
	 max-width: 1000px;
}
 .section-us {
	 background: url('img/header.jpg');
	 background-position: 0% 50%;
	 background-size: cover;
	 background-attachment: fixed;
	 width: 100%;
	 position: relative;
}
 .section-us h2 {
	 color: white;
	 margin-bottom: 2em;
}
 .section-us p {
	 color: white;
}
 .section-us .profile {
	 border-radius: 50%;
	 height: 200px;
	 max-width: 200px;
	 border: 1px solid rgba(0, 0, 0, .7);
}
 .section-us .us-title {
	 text-align: center;
}
 .section-us .images-us .first-profile .text-background {
	 background-color: rgba(0, 0, 0, .7);
	 height: 200px;
	 width: 320px;
	 position: absolute;
	 right: 145px;
}
 .section-us .images-us .second-profile .text-background {
	 background-color: rgba(0, 0, 0, .7);
	 height: 200px;
	 width: 320px;
	 position: absolute;
	 left: 145px;
}
 .section-us .images-us .first-profile, .section-us .images-us .second-profile {
	 text-align: center;
	 max-width: 290px;
}
 .section-us .images-us .first-profile .profile-background .profile-some, .section-us .images-us .second-profile .profile-background .profile-some {
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 height: 100%;
}
 .section-us * {
	 position: relative;
}
 .section-principals {
	 text-align: center;
}
 .section-principals .principals-columns {
	 margin-top: 1.5em;
}
 .section-principals .principals-columns .principals-column {
	 background-color: #fafafa;
	 margin: 2em;
	 height: 350px;
	 max-width: 350px;
	 display: grid;
}
 .section-principals svg {
	 font-size: 2.5em;
}
 .section-principals .icon-column {
	 width: 70px;
	 height: 70px;
	 background-color: white;
	 border-radius: 50%;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 margin: auto;
}
 .section-principals .principals-title {
	 font-size: 1.4em;
	 text-transform: uppercase;
}
 .section-principals hr {
	 background-color: #8c8c8c;
	 margin: -0.4em 5em 0em 5em;
}
 .section-information .columns {
	 border-bottom: 5px solid #8dc176;
}
 .section-information h2, .section-information h3 {
	 color: white;
	 font-size: 1.3em;
	 font-weight: bold;
	 margin-bottom: 10px;
}
 .section-information .information {
	 display: flex;
	 margin-left: 1em;
	 padding-bottom: 1em;
	 margin-top: 1.5em;
}
 .section-information .information svg {
	 font-size: 30px;
	 width: 60px;
	 height: 60px;
	 margin: 20px;
	 padding: 5px;
	 margin-top: 40px;
	 display: none;
}
 .section-information .information-text {
	 background-color: #65b369;
	 padding: 2em;
	 color: white;
	 display: flex;
	 justify-content: center;
	 align-items: center;
}
 .section-information .information-text .columns {
	 margin: 1em 0em;
	 display: block;
	 max-width: 500px;
}
 .section-information .information-image {
	 text-align: center;
	 width: 100%;
}
 .section-information .information-image h2 {
	 color: #8c8c8c;
	 font-weight: normal;
	 font-size: 1.5rem;
}
 .section-information .information-image h2 span {
	 font-weight: 800;
}
 .section-information .information-image .information-image-logo {
	 border-top: 10px solid #8dc176;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 height: 100%;
	 padding: 2em 0em;
}
 .section-information .information-image .information-image-logo img {
	 max-height: 300px;
}
 .section-information .information-image .information-image-logo .information-wrapper {
	 display: grid;
}
 .section-information .information-image button {
	 text-transform: uppercase;
	 background-color: #6ec272;
	 border: 2px solid white;
	 color: white;
	 font-weight: 600;
	 text-align: center;
	 margin-top: 2em;
	 border-radius: 1px;
	 padding: 3px 15px;
}
 .section-information .information-image button:hover {
	 background-color: rgba(255, 255, 255, .0);
	 border: 2px solid #8dc176;
	 color: #8dc176;
}
 .footer {
	 background-color: #2e2e2e;
	 color: white;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 padding-bottom: 2em;
	 min-height: 300px;
}
 .footer p {
	 font-size: 0.8em;
}
 .footer h2 {
	 font-size: 1.5em;
	 color: white;
	 padding-bottom: 10px;
	 border-bottom: 1.2px solid white;
}
 .footer .content {
	 width: 1000px;
}
 .footer .columns .column.contact-information {
	 text-align: left;
	 line-height: 0.9;
}
 .footer .columns .contact-column {
	 text-align: right;
}
 .footer .columns .column .first-contact, .footer .columns .column .second-contact {
	 text-align: right;
	 line-height: 0.5;
}
 .footer .columns .column .first-contact {
	 padding-bottom: 1.5em;
}
 .is-centered {
	 text-align: center;
 }

/* Medium devices (landscape tablets, 768px and up) */
 @media only screen and (max-width: 768px) {
	 .principals-column {
		 max-width: unset !important;
	 }
	 .about-info-image {
		 display: none;
	 }
	 .hero-div h1 {
		 font-size: 2rem;
	}
	 .hero-div h2 {
		 margin-top: 1em;
		 font-size: 1.2rem;
	}
	 .section-us .images-us .first-profile .profile-background, .section-us .images-us .second-profile .profile-background {
		 transform: translate(150%, -10%);
		 height: 50px;
		 width: 50px;
		 border-radius: 0;
		 background-color: rgba(138, 195, 118, 0.9);
	}
	 .section-us .first-profile .profile-background .profile-some svg, .section-us .images-us .second-profile .profile-background .profile-some svg {
		 display: block;
		 color: white;
		 height: 40px;
		 width: auto;
	}
	 .section-us .images-us .first-profile .profile, .section-us .images-us .second-profile .profile {
		 margin-bottom: -2em;
	}
	 .section-us .images-us .first-profile, .section-us .images-us .second-profile {
		 margin-bottom: 2em;
	}
	 .section-us .team-wrapper {
		 display: flex;
		 justify-content: center;
		 align-items: center;
	}
	 .section-principals .principals-wrapper {
		 display: flex;
		 justify-content: center;
		 align-items: center;
	}
	 .footer .columns .column.contact-information {
		 text-align: center;
	}
	 .footer .columns .column .first-contact, .footer .columns .column .second-contact {
		 text-align: center;
	}
	 .footer .columns .contact-column {
		 text-align: center;
	}
	 .footer .logo-column {
		 padding: 3em 0em;
	}
	 .section-information .information {
		 margin-left: 0;
	}
	 .columns {
		 margin: 0;
	}
}
 @media only screen and (min-width: 768px) {
	 .images-us .first-profile, .images-us .second-profile {
		 text-align: center;
		 max-width: 290px;
	}
	 .images-us .first-profile .profile-background .profile-some svg, .images-us .second-profile .profile-background .profile-some svg {
		 display: none;
		 color: white;
		 height: 40px;
		 width: auto;
		 transition: display 2s;
	}
	 .images-us .first-profile .profile-background .profile-some svg:hover, .images-us .second-profile .profile-background .profile-some svg:hover {
		 color: #515355;
		 cursor: pointer;
	}
	 .images-us .first-profile:hover .profile-background .profile-some svg, .images-us .second-profile:hover .profile-background .profile-some svg {
		 display: block;
		 transition: display 2s;
	}
	 .images-us .first-profile .profile, .images-us .second-profile .profile {
		 transition: background-color 1s;
		 background-color: rgba(255, 255, 255, 0);
	}
	 .images-us .first-profile:hover .profile-background, .images-us .second-profile:hover .profile-background {
		 background-color: rgba(138, 195, 118, .7);
		 transition: background-color 1s;
		 border-radius: 50%;
		 height: 200px;
		 width: 200px;
		 transform: translate(16.5%, 6%);
		 position: absolute;
		 top: 0;
	}
}
 @media only screen and (min-width: 1088px) {
	 .navbar-burger {
		 display: none;
	}
}