/* SASS */
/*GLOBAL STYLES */
@import url("https://fonts.googleapis.com/css?family=Lat|Open+Sans|Rock+Salt");
body {
  margin: 0;
  font-family: "Open Sans";
  font-size: 16px;
  overflow-x: hiden; }

* {
  box-sizing: border-box; }

.container:after,
.container:before {
  content: "";
  display: table;
  clear: both; }

.row:after,
.row:before {
  content: "";
  display: table;
  clear: both; }

.container {
  width: 100%;
  max-width: 900px;
  margin: 20px auto;
  text-align: center; }

.row {
  width: 100%; }

a {
  text-decoration: none;
  color: inherit; }

/*HEADER */
#navbar {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between; }

#logo {
  font-size: 0;
  float: left; }

header {
  background-color: #313332; }

header img {
  max-height: 100px; }

header > nav > ul {
  float: right;
  padding: 0;
  list-style-type: none;
  margin: 0; }

header > nav > ul > li {
  display: inline-block; }

header > nav > ul > li > a {
  display: block;
  padding: 20px 20px;
  color: #fff;
  text-transform: uppercase;
  font-family: "Open Sans";
  font-weight: bold; }

header > nav > ul > li > a:hover {
  color: #03cbec; }

header > nav > img {
  padding: 10px 0; }

#hamburger-menu {
  display: none; }

.hamburger-nav {
  display: none;
  color: white;
  float: left;
  font-size: 4em; }

#hamburger-menu:checked ~ .main-nav {
  display: block; }

/*SLIDER */
.hero {
  position: relative;
  height: 400px;
  background: url("https://4.bp.blogspot.com/-7xaT-F0a0-Q/VtXVOR6ZcMI/AAAAAAAAPV8/To9FbPhEEDE/s1600/04.jpg") 0/cover; }

.slogan {
  position: absolute;
  right: 0;
  bottom: 40%;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px 10% 10px 10px;
  color: #fff;
  text-transform: uppercase; }

.slogan span {
  font-weight: normal;
  letter-spacing: 2px;
  font-style: italic; }

/*3 ICONS SECTION */
/*COLUMNS GRID */
.col-1 {
  width: 8.33%; }

.col-2 {
  width: 16.66%; }

.col-3 {
  width: 25%; }

.col-4 {
  width: 33.33%; }

.col-5 {
  width: 41.66%; }

.col-6 {
  width: 50%; }

.col-7 {
  width: 58.33%; }

.col-8 {
  width: 66.66%; }

.col-9 {
  width: 75%; }

.col-10 {
  width: 83.33%; }

.col-11 {
  width: 91.66%; }

.col-12 {
  width: 100%; }

.col-20 {
  width: 20%; }

.col-40 {
  width: 40%; }

.col-offset-0 {
  margin-left: 0; }

.col-offset-1 {
  margin-left: 8.33%; }

.col-offset-2 {
  margin-left: 16.66%; }

.col-offset-3 {
  margin-left: 25%; }

.col-offset-4 {
  margin-left: 33.33%; }

.col-offset-5 {
  margin-left: 41.66%; }

.col-offset-6 {
  margin-left: 50%; }

.col-offset-7 {
  margin-left: 58.33%; }

.col-offset-8 {
  margin-left: 66.66%; }

.col-offset-9 {
  margin-left: 75%; }

.col-offset-10 {
  margin-left: 83.33%; }

.col-offset-11 {
  margin-left: 91.66%; }

[class*="col-"] {
  float: left;
  min-height: 1px;
  padding: 0 20px; }

/*ICONS */
.icons {
  text-align: center; }

.icons .fa {
  font-size: 52px;
  padding: 20px;
  min-width: 100px;
  border-radius: 15px;
  color: #fff;
  background-color: #313332; }

.i-hover:hover i {
  background-color: #00c7e8;
  transition: ease-out 0.4s; }

.i-hover:hover h3 {
  color: #00c7e8;
  transition: ease-out 0.5s; }

/*PARAGRAPH */
h1 {
  text-transform: uppercase;
  font-weight: bold;
  font-family: "Open Sans";
  letter-spacing: 2px;
  font-size: 1.4em; }

.paragraph p {
  color: grey; }

/*GALLERY */
.gallery [class*="col-"] {
  padding: 0;
  position: relative; }

.gallery [class*="col-"]:hover .layer {
  opacity: 1;
  transform: translate(0, -160px);
  transition: ease-out 0.5s; }

.gallery img {
  width: 100%;
  float: left; }

.layer {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
  height: 100%;
  width: 100%;
  opacity: 0;
  position: absolute;
  top: 160px;
  margin: 0 auto;
  transition: ease-out 0.5s; }

.layer i {
  font-size: 1.5em;
  padding: 5px;
  cursor: pointer;
  background-color: #fff;
  color: grey;
  margin: 3px;
  border-radius: 5px; }

.gallery .row {
  overflow: hidden; }

/*TEAM */
.photo {
  position: relative; }

.photo > div {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: 0;
  transition: 0.8s; }

.photo h3 {
  color: #fff;
  font-family: "Rock Salt";
  letter-spacing: 1px;
  cursor: context-menu; }

.photo:hover div {
  opacity: 1;
  transition: 0.8s; }

.team img {
  display: block;
  width: 100%;
  border-radius: 50%; }

/*PROMOTION */
.promotion {
  background: url("https://images.freecreatives.com/wp-content/uploads/2015/05/Brick-Pattern-7.jpg"); }

.promotion h2 {
  margin-top: 20px;
  text-transform: uppercase;
  font-family: "Rock Salt";
  color: #fff;
  text-shadow: 2px 5px 3px black; }

.promotion p {
  background: rgba(0, 0, 0, 0.4);
  padding: 24px;
  margin: 0;
  color: #fff;
  text-shadow: 0px 3px 9px black; }

.promotion img {
  margin: 15px 0;
  width: 100%;
  border-radius: 15px;
  float: left; }

/*NUMBERS */
.numbers h2 {
  font-family: "Rock Salt", cursive;
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 0;
  cursor: context-menu;
  transition: ease-in-out 0.6s; }

.numbers p {
  color: #03cbec;
  text-transform: uppercase;
  font-weight: bold; }

.numbers div:hover h2 {
  transform: scale(1.6);
  transition: ease-out 0.6s;
  color: green; }

/*FOOTER */
.contact {
  background: rgba(49, 51, 50, 0.8);
  color: #fff; }

.footer-bottom {
  background: #313332;
  color: #fff;
  text-align: center;
  padding: 10px; }

.contact h1 {
  text-transform: uppercase;
  float: left; }

.contact .line {
  float: left;
  margin: 25px 0 0 20px;
  width: 20%;
  height: 3px;
  background-color: #fff; }

.contact p {
  content: "";
  display: table;
  clear: both; }

.contact h4 {
  text-align: right; }

.social i {
  font-size: 1.2em;
  background-color: #03cbec;
  width: 40px;
  height: 40px;
  margin-right: 3px;
  text-align: center;
  line-height: 40px; }

/*MEDIA QUERIES */
@media (max-width: 960px) {
  /*TABLET */
  .col-m-1 {
    width: 8.33%; }

  .col-m-2 {
    width: 16.66%; }

  .col-m-3 {
    width: 25%; }

  .col-m-4 {
    width: 33.33%; }

  .col-m-5 {
    width: 41.66%; }

  .col-m-6 {
    width: 50%; }

  .col-m-7 {
    width: 58.33%; }

  .col-m-8 {
    width: 66.66%; }

  .col-m-9 {
    width: 75%; }

  .col-m-10 {
    width: 83.33%; }

  .col-m-11 {
    width: 91.66%; }

  .col-m-12 {
    width: 100%; }

  .slogan {
    left: 50%;
    top: 20%; }

  .icons h3, .icons p {
    margin: 0; }

  .i-hover {
    margin-bottom: 15px; }

  .numbers h2 {
    font-size: 1em; }

  .contact h4 {
    text-align: start; }

  .social {
    display: flex;
    justify-content: space-around; }

  .social i {
    font-size: 2.2em;
    width: 60px;
    height: 60px;
    line-height: 60px; }

  .layer i {
    font-size: 10vw;
    padding: 1vw; }

  .photo {
    width: 50%;
    margin: 0 auto; }

  .numbers div:hover h2 {
    transform: none;
    transition: ease-out 0.6s;
    color: initial; }

  .m-hidden {
    display: none; } }
@media (max-width: 767px) {
  /* MOBILE */
  font-size: 12px;
  .col-s-1 {
    width: 8.33%; }

  .col-s-2 {
    width: 16.66%; }

  .col-s-3 {
    width: 25%; }

  .col-s-4 {
    width: 33.33%; }

  .col-s-5 {
    width: 41.66%; }

  .col-s-6 {
    width: 50%; }

  .col-s-7 {
    width: 58.33%; }

  .col-s-8 {
    width: 66.66%; }

  .col-s-9 {
    width: 75%; }

  .col-s-10 {
    width: 83.33%; }

  .col-s-11 {
    width: 91.66%; }

  .col-s-12 {
    width: 100%; }

  #navbar {
    display: block; }

  .main-nav {
    display: none; }

  .hamburger-nav {
    display: inline;
    font-size: 60px; }

  #logo {
    float: none;
    margin: 0 auto; }

  header > nav > ul {
    float: none; }

  header > nav > ul > li {
    display: block; }

  header > nav > ul > li > a {
    padding: 15px 20px;
    border-bottom: 1px solid silver; }

  .s-hidden {
    display: none; } }

/*# sourceMappingURL=style.css.map */