/*


	The dimensions of the breakpoints we have chosen are:

	Phones: <= 600px,
	Tablets: <= 900px,
	Tablets(landscape): <= 1200px
	desktop(big): >= 1800px

	NOTE: Our responsive mixin will be passed two value types, namely; The breakpoint category and
	the responsive styles of the selector where the mixin is called[The styles are accessed via the @content sass directive].

*/
@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-2rem); }
  80% {
    transform: translateX(1rem); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(2rem); }
  80% {
    transform: translateX(-1rem); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

@keyframes moveInBottom {
  0% {
    opacity: 0;
    transform: translateY(10rem); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0.2, 0.2); }
  40% {
    opacity: 0;
    transform: scale(0.5, 0.5); }
  60% {
    opacity: 0;
    transform: scale(0.7, 0.7); }
  100% {
    opacity: 1; } }

@keyframes shake-shake {
  0% {
    border-bottom: solid 2px #C90; }
  40% {
    border-bottom: solid 2px #F3F3F3; }
  60% {
    border-bottom: solid 2px #F00; }
  80% {
    border-bottom: solid 2px #000; }
  90% {
    border-bottom: solid 2px #C90; }
  90% {
    border-bottom: solid 2px #FFF; } }

/*

	Colors:
	
	#096 = Dark Green
	#C90 = Gold
	#F00 = Red;
	#F7F7F7 = Light grey
	
*/
/* Below, Create a basic reset of the browser applied styles */
*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

/* ========================================================================================================

	The html element below will be used to set a root font-size for the project. This base font-size will
	be used as the base for all the measurements we are going to set on the page. This powerfull technique
	will make it easier for us to modify and mantain the code since we are only going to have a single place
	where we make a change and automatically any related code. To enable users the chance to modify our styles,
	we are going to use percentage values-a really recommended practice.
	
   =======================================================================================================*/
html {
  font-size: 62.5%; }
  @media only screen and (max-width: 1200px) {
    html {
      font-size: 56.5%; } }
  @media only screen and (max-width: 900px) {
    html {
      font-size: 50%; } }

/* Below, Create a project wide font-definitions */
body {
  box-sizing: border-box; }
  @media only screen and (max-width: 900px) {
    body {
      overflow-x: hidden; } }

.hidden {
  opacity: 0; }

.showElements {
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-timing-function: easein;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.collage-shrink {
  animation-name: shrink;
  animation-delay: .2s;
  animation-duration: 6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

body {
  color: #666;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400; }

.heading-secondary {
  font-size: 2.5rem;
  text-transform: uppercase;
  display: inline-block;
  color: #096;
  transition: all .2s; }
  @supports (-webkit-background-clip: text) or (background-clip: text) {
    .heading-secondary {
      -webkit-background-clip: text;
      background-clip: text;
      background-image: linear-gradient(to right bottom, rgba(0, 153, 102, 0.7), rgba(204, 153, 0, 0.5));
      background-color: #096;
      color: transparent; } }
  .heading-secondary:hover {
    transform: skewX(20deg);
    box-shadow: 0 0.5rem 4rem rgba(255, 0, 0, 0.3); }
  @media only screen and (max-width: 600px) {
    .heading-secondary {
      font-size: 2.3rem; } }

.heading-tertiary {
  font-size: 1.8rem;
  text-transform: uppercase; }

.bg-grey-light {
  background-color: #F3F3F3; }

.form-input-bg {
  background-color: #096; }

.form-input-border {
  border: solid 1px #096 !important; }

.form-input-width {
  width: 50% !important; }

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

.u-text-center {
  text-align: center; }

.u-text-lead {
  font-size: 1.6rem;
  margin-bottom: 1.4rem; }

.u-text-center {
  padding-left: 5rem; }

.u-margin-small {
  margin-bottom: 1.6rem; }

.u-margin-top-small {
  margin-top: 3rem; }

.u-margin-top-medium {
  margin-top: 6rem; }

.u-margin-left-small {
  margin-left: 6rem; }

.u-margin-medium {
  margin-bottom: 10rem; }

.u-margin-big {
  margin-bottom: 20rem; }
  @media only screen and (max-width: 900px) {
    .u-margin-big {
      margin-bottom: 10rem; } }

.background-video {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: .5;
  top: 0;
  left: 0;
  z-index: -1; }
  .background-video__content {
    height: 100%;
    width: 100%;
    object-fit: cover; }

.btn:link,
.btn:visited {
  border-radius: 10rem;
  display: inline-block;
  font-size: 1.8rem;
  font-weight: 600;
  margin-top: 1.5rem;
  padding: 1.5rem 4rem;
  position: relative;
  text-decoration: none;
  transition: all .2s; }

.btn:hover {
  box-shadow: 0 1rem 2rem rgba(255, 0, 0, 0.3);
  transform: translateY(-0.3rem); }

.btn:active {
  box-shadow: 0 0.5rem 1rem rgba(255, 0, 0, 0.3);
  transform: translateY(-0.1rem); }

.btn--white {
  background-color: #FFF;
  color: #096; }

.btn::after {
  content: "";
  display: inline-block;
  border-radius: 10rem;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  transition: all .4s;
  left: 0;
  z-index: -1; }

.btn--white::after {
  background-color: #FFF; }

.btn:hover::after {
  transform: scaleX(1.4) scaleY(1.6);
  opacity: 0; }

.btn--animated {
  animation-name: moveInBottom;
  animation-duration: 3s;
  animation-timing-function: ease-out;
  animation-delay: .75s;
  animation-fill-mode: backwards; }

.collage {
  margin: 0 auto;
  margin-top: 5rem;
  position: relative;
  height: 75rem;
  padding-bottom: 10rem;
  width: 80%; }
  @media only screen and (max-width: 600px) {
    .collage {
      padding-bottom: 5rem; } }
  .collage__item {
    position: absolute;
    width: 20rem; }
    @media only screen and (max-width: 600px) {
      .collage__item {
        width: 14rem; } }
    .collage__item-image {
      height: 30rem; }
      @media only screen and (max-width: 900px) {
        .collage__item-image {
          height: 25rem; } }
      @media only screen and (max-width: 600px) {
        .collage__item-image {
          height: 14rem; } }
    @media only screen and (max-width: 600px) {
      .collage__item--1 {
        top: -5%; } }
    .collage__item--2 {
      top: 10%;
      left: 18.5%; }
      @media only screen and (max-width: 600px) {
        .collage__item--2 {
          left: 15.5%;
          top: 5%; } }
    .collage__item--3 {
      top: 20%;
      left: 37%; }
      @media only screen and (max-width: 600px) {
        .collage__item--3 {
          left: 30%;
          top: 1%; } }
      @media only screen and (max-width: 450px) {
        .collage__item--3 {
          left: 35%;
          top: -3%; } }
    .collage__item--4 {
      top: 50%;
      left: 50%; }
      @media only screen and (max-width: 600px) {
        .collage__item--4 {
          top: 30%;
          left: 40%; } }
      @media only screen and (max-width: 450px) {
        .collage__item--4 {
          top: 30%;
          left: 25%; } }
    .collage__item--5 {
      top: 20%;
      left: 65%; }
      @media only screen and (max-width: 600px) {
        .collage__item--5 {
          left: 50%; } }
      @media only screen and (max-width: 450px) {
        .collage__item--5 {
          top: 27%;
          left: 45%; } }
    .collage__item--6 {
      top: 10%;
      left: 83.5%; }
      @media only screen and (max-width: 600px) {
        .collage__item--6 {
          left: 68%;
          top: 20%; } }
    .collage__item--7 {
      top: 70%;
      left: 32%; }
      @media only screen and (max-width: 600px) {
        .collage__item--7 {
          top: 48%;
          left: 25%; } }
      @media only screen and (max-width: 450px) {
        .collage__item--7 {
          top: 40%;
          left: 5%; } }
    .collage__item-title {
      display: inline-block;
      font-size: 1.5rem;
      padding-left: 2rem;
      width: 100%; }
      @media only screen and (max-width: 900px) {
        .collage__item-title {
          color: #C90; } }
      .collage__item-title small {
        color: #096; }

.composition {
  position: relative; }
  @media only screen and (max-width: 900px) {
    .composition {
      margin-top: 10rem;
      margin-bottom: 10rem; } }
  .composition:hover :not(:hover) {
    transform: scale(0.9);
    transition: transform .2s; }
  @media only screen and (max-width: 900px) {
    .composition {
      padding-left: 20%; } }
  .composition__photo {
    border-radius: 2rem;
    position: absolute;
    transition: all .3s;
    outline-offset: 1rem;
    width: 30%;
    z-index: 5; }
    @media only screen and (max-width: 900px) {
      .composition__photo {
        width: 20%;
        position: relative; } }
    @media only screen and (max-width: 600px) {
      .composition__photo {
        width: 25%; } }
    .composition__photo--p1 {
      top: -5rem;
      left: 25%; }
    .composition__photo--p2 {
      right: 15%; }
      @media only screen and (max-width: 600px) {
        .composition__photo--p2 {
          right: 20%; } }
    .composition__photo--p3 {
      top: 0; }
      @media only screen and (max-width: 600px) {
        .composition__photo--p3 {
          left: -2%; } }
    .composition__photo--p4 {
      left: 28%;
      top: 15rem; }
      .composition__photo--p4:hover {
        top: 0; }
      @media only screen and (max-width: 900px) {
        .composition__photo--p4 {
          left: -37%;
          top: 15rem; } }
      @media only screen and (max-width: 600px) {
        .composition__photo--p4 {
          left: 28%;
          top: -7rem; } }
    .composition__photo:hover {
      box-shadow: 0 1rem 2rem rgba(255, 0, 0, 0.3);
      transform: scale(1.6);
      outline: 3px solid #009966;
      z-index: 10; }

.form {
  position: relative;
  width: 100%; }
  .form__group {
    display: block;
    margin-bottom: 2rem;
    width: 80%; }
    @media only screen and (max-width: 600px) {
      .form__group {
        width: 95%; } }
  .form__input {
    border: none;
    border-bottom: solid 1px #fff;
    display: inline-block;
    height: 3rem;
    padding: .5rem 1rem;
    width: 85%; }
    @media only screen and (max-width: 600px) {
      .form__input {
        width: 100%; } }
    .form__input::input-placeholder {
      color: red; }
    .form__input:focus {
      border: none;
      border-bottom: solid 1px #C90;
      transition: all .5s; }
    .form__input:invalid {
      border: none;
      border-bottom: solid 1px red;
      transition: all .5s; }
  .form__label {
    display: block;
    padding: 1rem;
    transition: all .4s; }
  .form__input:placeholder-shown + .form__label {
    opacity: 0;
    transform: translateY(-3rem);
    visibility: hidden; }
  .form__select__group {
    display: inline-block;
    width: 40%; }
    @media only screen and (max-width: 600px) {
      .form__select__group {
        display: block;
        width: 80%; } }
  .form__select__group:not(:last-child) {
    margin-right: 5%; }
  .form__select__label {
    color: #096;
    display: block;
    font-size: 1.2rem;
    margin-bottom: 1.1rem; }
  .form__select {
    border: none;
    display: block;
    height: 3rem;
    width: 100%; }
  .form__radio__group {
    display: inline-block;
    position: relative; }
  .form__radio__group:not(:last-child) {
    margin-right: 5rem; }
  .form__radio__group__title {
    display: inline-block;
    margin-right: 5rem; }
  .form__radio {
    display: none; }
  .form__radio:checked + .form__radio__label .form__radio__button::after {
    opacity: 1; }
  .form__radio__label {
    font-size: 1.2rem; }
  .form__radio__button {
    border: solid 3px #096;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    top: 0;
    left: -2rem;
    width: 1.5rem;
    height: 1.5rem; }
    .form__radio__button::after {
      content: "";
      display: block;
      background-color: #C90;
      height: .5rem;
      width: .5rem;
      position: relative;
      opacity: 0;
      top: .2rem;
      transition: opacity .4s;
      left: .2rem;
      border-radius: 50%; }
      @media only screen and (max-width: 900px) {
        .form__radio__button::after {
          left: .1rem;
          top: .1rem; } }
  .form__checkbox__group__title {
    display: inline-block; }
  .form__checkbox__group {
    display: inline-block;
    position: relative; }
  .form__checkbox {
    display: none; }
  .form__checkbox:checked ~ .form__checkbox__label small {
    opacity: 1; }
  .form__checkbox__label {
    bottom: 1.5rem;
    font-size: 1.1rem; }
  .form__checkbox__button {
    border: solid 3px #096;
    border-radius: 2px;
    display: inline-block;
    font-size: 1.2rem;
    position: absolute;
    bottom: 0;
    left: 17rem;
    width: 1.5rem;
    height: 1.5rem; }
    .form__checkbox__button small {
      position: relative;
      color: #C90;
      font-size: 1.6rem;
      font-weight: 700;
      opacity: 0;
      transition: opacity .4s;
      top: -1rem; }
  .form__submit_btn {
    margin-top: 3rem;
    position: absolute;
    right: 30%; }
  .form__submit-btn {
    border: none;
    border-radius: 2px;
    background-color: #096;
    color: #FFF;
    font-size: 2rem;
    padding: 1rem;
    transition: all .4s;
    width: 15rem; }
    .form__submit-btn:hover {
      background-color: #FFF;
      color: #096; }
  .form__hidden {
    opacity: 0; }

.rotating-card {
  -moz-perspective: 150rem;
  perspective: 150rem;
  height: 50rem;
  position: relative; }
  @media only screen and (max-width: 1200px) {
    .rotating-card {
      height: auto; } }
  @media only screen and (max-width: 900px) {
    .rotating-card {
      margin-bottom: 5rem; } }
  .rotating-card__side {
    backface-visibility: hidden;
    border-radius: 3px;
    height: 50rem;
    overflow: hidden;
    transition: all .8s ease;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0; }
    @media only screen and (max-width: 1200px) {
      .rotating-card__side {
        position: relative; } }
    @media only screen and (max-width: 900px) {
      .rotating-card__side {
        width: 60%;
        margin: 0 auto; } }
    @media only screen and (max-width: 600px) {
      .rotating-card__side {
        width: 80%;
        margin: 0 auto; } }
  .rotating-card__side--front {
    background-color: #FFF; }
    .rotating-card__side--front__head {
      height: 20rem;
      background-position: top;
      background-size: cover;
      margin-bottom: 5rem;
      position: relative;
      -webkit-background-blend-mode: linear;
      -moz-background-blend-mode: linear;
      background-blend-mode: linear;
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 10vh, 0 100%);
      -moz-clip-path: polygon(0 0, 100% 0, 100% 10vh, 0 100%);
      clip-path: polygon(0 0, 100% 0, 100% 20vh, 0 100%); }
      .rotating-card__side--front__head span {
        color: #FFF;
        display: block;
        font-size: 2.5rem;
        width: 12rem;
        background-image: linear-gradient(to right bottom, rgba(0, 153, 102, 0.7), rgba(204, 153, 0, 0.5));
        margin-right: .5rem;
        position: absolute;
        top: 20%;
        right: 0; }
    .rotating-card__side--front__body ul {
      list-style-type: none;
      margin: 0 auto;
      padding: 0 0 0 1rem;
      width: 90%; }
      .rotating-card__side--front__body ul li {
        border-bottom: solid 1px rgba(0, 0, 0, 0.2);
        font-size: 1.8rem;
        font-weight: 600;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
        width: 100%; }
        .rotating-card__side--front__body ul li span {
          display: inline-block; }
        .rotating-card__side--front__body ul li span:first-child {
          font-size: 1.4rem;
          margin-right: 5%;
          width: 35%; }
        .rotating-card__side--front__body ul li span:nth-child(2) {
          color: #096;
          margin-right: 5%; }
    .rotating-card__side--front__head--1 {
      background-image: url("../imgs/composite_1_res_back.jpg"); }
      @media only screen and (min-resolution: 192dpi) and (min-width: 600px), (min-device-pixel-ratio: 2) {
        .rotating-card__side--front__head--1 {
          background-image: url("../imgs/composite_1.jpg"); } }
    .rotating-card__side--front__head--2 {
      background-image: url("../imgs/composite_2_res_back.jpg"); }
      @media only screen and (min-resolution: 192dpi) and (min-width: 600px), (min-device-pixel-ratio: 2) {
        .rotating-card__side--front__head--2 {
          background-image: url("../imgs/composite_2.jpg"); } }
    .rotating-card__side--front__head--3 {
      background-image: url("../imgs/composite_3_res_back.jpg"); }
      @media only screen and (min-resolution: 192dpi) and (min-width: 600px), (min-device-pixel-ratio: 2) {
        .rotating-card__side--front__head--3 {
          background-image: url("../imgs/composite_3.jpeg"); } }
  .rotating-card__side--back {
    background-color: #C90;
    transform: rotateY(180deg); }
    @media only screen and (max-width: 1200px) {
      .rotating-card__side--back {
        transform: rotateY(0); } }
    .rotating-card__side--back__head {
      height: 40rem;
      background-position: top;
      background-size: cover;
      margin-bottom: 5rem;
      position: relative; }
      .rotating-card__side--back__head span {
        color: transparent;
        display: block;
        font-size: 2.5rem;
        font-weight: 800;
        width: 15rem;
        color: rgba(204, 153, 0, 0.6);
        margin-right: .5rem;
        position: absolute;
        transform: rotate(90deg);
        top: 20%;
        right: 0; }
        @supports (background-clip: text) or (-webkit-background-clip: text) {
          .rotating-card__side--back__head span {
            background-clip: text;
            -webkit-background-clip: text;
            background-image: linear-gradient(to right bottom, rgba(204, 204, 0, 0.8), rgba(255, 255, 255, 0.9));
            color: transparent; } }
    .rotating-card__side--back__body {
      padding-bottom: 3rem;
      outline-offset: .3rem;
      position: relative; }
      @media only screen and (max-width: 900px) {
        .rotating-card__side--back__body {
          text-align: center; } }
      .rotating-card__side--back__body .btn-card {
        text-decoration: none;
        color: #FFF;
        position: absolute;
        bottom: 40%;
        transform: translate(55%);
        outline: solid 1px #FFF; }
        @media only screen and (max-width: 900px) {
          .rotating-card__side--back__body .btn-card {
            display: inline-block;
            position: relative;
            transform: translate(0);
            bottom: 4rem; } }
        .rotating-card__side--back__body .btn-card:hover {
          outline: none; }
    .rotating-card__side--back__head--1 {
      background-image: url("../imgs/composite_1_res_back.jpg"); }
      @media only screen and (min-resolution: 192dpi) and (min-width: 600px), (min-device-pixel-ratio: 2) {
        .rotating-card__side--back__head--1 {
          background-image: url("../imgs/composite_1.jpg"); } }
    .rotating-card__side--back__head--2 {
      background-image: url("../imgs/composite_2_res_back.jpg"); }
      @media only screen and (min-resolution: 192dpi) and (min-width: 600px), (min-device-pixel-ratio: 2) {
        .rotating-card__side--back__head--2 {
          background-image: url("../imgs/composite_2.jpg"); } }
    .rotating-card__side--back__head--3 {
      background-image: url("../imgs/composite_3_res_back.jpg"); }
      @media only screen and (min-resolution: 192dpi) and (min-width: 600px), (min-device-pixel-ratio: 2) {
        .rotating-card__side--back__head--3 {
          background-image: url("../imgs/composite_3.jpeg"); } }
      .rotating-card__side--back__head--3 span {
        background-image: linear-gradient(to right bottom, rgba(204, 153, 0, 0.8), rgba(204, 153, 0, 0.9)); }
  .rotating-card:hover .rotating-card__side--front {
    transform: rotateY(-180deg); }
    @media only screen and (max-width: 1200px) {
      .rotating-card:hover .rotating-card__side--front {
        transform: rotateY(0); } }
  .rotating-card:hover .rotating-card__side--back {
    transform: rotateY(0); }
  .rotating-card__btn {
    margin: 0 auto;
    margin-top: 6rem;
    width: 40%; }
    @media only screen and (max-width: 900px) {
      .rotating-card__btn {
        width: 60%; } }
    @media only screen and (max-width: 600px) {
      .rotating-card__btn {
        text-align: center;
        width: 100%; } }
    .rotating-card__btn a {
      color: #FFF;
      text-decoration: none;
      transform: translate(50%);
      background-color: #096;
      box-shadow: 0 .3rem 5rem #fff;
      transition: all .8s ease;
      width: 30rem; }
      @media only screen and (max-width: 900px) {
        .rotating-card__btn a {
          transform: translate(0); } }
      .rotating-card__btn a:hover {
        color: #096;
        background-color: #F3F3F3;
        transform: translate(50%); }
        @media only screen and (max-width: 900px) {
          .rotating-card__btn a:hover {
            transform: translate(0) !important; } }

.stories {
  margin: 0 auto;
  width: 60%; }
  @media only screen and (max-width: 1200px) {
    .stories {
      width: 80%; } }
  @media only screen and (max-width: 450px) {
    .stories {
      width: 72%; } }
  .stories__story {
    background-color: rgba(0, 153, 102, 0.5);
    color: #FFF;
    margin-bottom: 6rem;
    padding: 4rem 1.5rem 3rem 6rem;
    transform: skewX(-12deg);
    content: "";
    display: table;
    clear: both; }
    .stories__story > * {
      transform: skewX(12deg); }
    .stories__story-shape {
      border-radius: 50%;
      width: 15rem;
      height: 15rem;
      overflow: hidden;
      position: relative;
      clip-path: circle(50% at 50% 50%);
      -webkit-shape-outside: circle(50% at 50% 50%); }
      @media only screen and (max-width: 900px) {
        .stories__story-shape {
          width: 10rem;
          height: 10rem; } }
      @media only screen and (max-width: 600px) {
        .stories__story-shape {
          left: 30%; } }
      @media only screen and (max-width: 450px) {
        .stories__story-shape {
          left: 10%; } }
      @supports (filter: blur(2px) brightness(95%)) {
        .stories__story-shape:hover .stories__story-shape-image {
          filter: blur(2px) brightness(95%); } }
      .stories__story-shape:hover .stories__story-shape-title {
        opacity: 1; }
      .stories__story-shape-image {
        height: 100%;
        transition: all .20s; }
      .stories__story-shape-title {
        color: #C90;
        display: inline-block;
        font-size: 1.4rem;
        opacity: 0;
        position: absolute;
        transition: all .20s;
        top: 40%;
        left: 30%;
        width: 50%; }
        @media only screen and (max-width: 900px) {
          .stories__story-shape-title {
            width: 60%; } }
        @media only screen and (max-width: 600px) {
          .stories__story-shape-title {
            font-size: 1.2rem; } }
    .stories__story-shape, .stories__story-text {
      float: left; }
    .stories__story-text {
      padding-top: 1.6rem;
      width: 60%; }
      @media only screen and (max-width: 900px) {
        .stories__story-text {
          width: 70%;
          padding-left: 2rem; } }
      @media only screen and (max-width: 600px) {
        .stories__story-text {
          width: 100%;
          padding-left: 0; } }
      .stories__story-text p {
        font-size: 1.1rem;
        padding-left: 1.2rem; }

.trendy-model {
  position: relative; }
  .trendy-model::after {
    content: "";
    display: table;
    clear: both; }
  .trendy-model > * {
    float: left;
    position: relative;
    width: 50%; }
    @media only screen and (max-width: 900px) {
      .trendy-model > * {
        float: none;
        margin: 0 auto;
        width: 60%; } }
    @media only screen and (max-width: 600px) {
      .trendy-model > * {
        width: 70%; } }
    @media only screen and (max-width: 450px) {
      .trendy-model > * {
        width: 90%; } }
  .trendy-model__image {
    border: solid 1px #f3f3f3;
    border-radius: 3px;
    width: 100%; }
  .trendy-model__tag {
    background-color: #C90;
    color: #FFF;
    display: inline-block;
    height: 10rem;
    position: absolute;
    text-align: center;
    top: 15%;
    left: 10%;
    width: 10rem;
    border-radius: 50%; }
    @media only screen and (max-width: 600px) {
      .trendy-model__tag {
        height: 6.5rem;
        width: 6.5rem; } }
  .trendy-model__text {
    display: inline-block;
    font-size: 2rem;
    font-weight: 700;
    position: absolute;
    top: 40%;
    left: 15%;
    transform: skewY(10deg); }
    @media only screen and (max-width: 600px) {
      .trendy-model__text {
        font-size: 1.5rem;
        left: 7%; } }
  .trendy-model__gallery {
    background-color: #F3F3F3;
    position: relative;
    width: 100%; }
    .trendy-model__gallery-item:first-of-type {
      margin-left: 15%; }
    .trendy-model__gallery::after {
      content: "";
      display: inline-block;
      background-color: #C90;
      position: absolute;
      top: 0;
      right: 0;
      height: 8.5rem;
      width: 4%; }
      @media only screen and (max-width: 600px) {
        .trendy-model__gallery::after {
          height: auto; } }
    .trendy-model__gallery-item {
      backface-visibility: hidden;
      border-top: solid 1px #C90;
      display: inline-block;
      width: 20%; }
      @media only screen and (max-width: 600px) {
        .trendy-model__gallery-item {
          border-top: none; } }
      .trendy-model__gallery-item img {
        border-radius: 3px;
        height: 8.5rem;
        transition: transform .3s; }
        .trendy-model__gallery-item img:hover {
          transform: scaleY(1.02); }
        @media only screen and (max-width: 600px) {
          .trendy-model__gallery-item img {
            height: auto; } }
  .trendy-model__bio {
    padding: 5rem 0 0 4rem; }
    .trendy-model__bio-tag {
      color: #096;
      font-size: 1.5rem;
      font-style: italic; }
    .trendy-model__bio-content {
      margin: 2rem 0 0 0;
      padding: 0 0 0 2rem; }
      @media only screen and (max-width: 450px) {
        .trendy-model__bio-content {
          padding: 0  1rem 0 0; } }
      .trendy-model__bio-content-title {
        font-style: italic;
        font-size: 2.5rem;
        margin-bottom: 2rem; }
      .trendy-model__bio-content-text {
        font-size: 1.2rem;
        margin-bottom: 2rem;
        width: 40%;
        text-align: justify; }
        @media only screen and (max-width: 900px) {
          .trendy-model__bio-content-text {
            width: 100%; } }
      .trendy-model__bio-content-profile {
        list-style-type: none;
        margin-bottom: 3rem;
        padding: 0 0 0 0;
        width: 90%; }
        @media only screen and (max-width: 450px) {
          .trendy-model__bio-content-profile {
            width: 100%; } }
        .trendy-model__bio-content-profile li {
          font-size: 1.2rem;
          font-weight: 600;
          padding-bottom: 1rem;
          margin-bottom: 1rem; }
          .trendy-model__bio-content-profile li span {
            display: inline-block; }
          .trendy-model__bio-content-profile li span:first-child {
            font-size: 1.3rem;
            margin-right: 2%;
            width: 20%; }
            @media only screen and (max-width: 450px) {
              .trendy-model__bio-content-profile li span:first-child {
                width: 30%; } }
          .trendy-model__bio-content-profile li span:nth-child(2) {
            color: #096;
            margin-right: 2%; }
      .trendy-model__bio-content a {
        background-color: #F3F3F3;
        border-bottom: solid 1px #C90;
        color: #096;
        padding-left: 0; }
        .trendy-model__bio-content a:hover {
          border: 0; }

.footer-content {
  position: relative; }
  .footer-content__style {
    background-color: #096;
    color: #FFF;
    font-size: 1.7rem;
    display: block;
    position: relative; }
    @media only screen and (max-width: 900px) {
      .footer-content__style {
        font-size: 2rem; } }
    .footer-content__style span {
      display: block;
      margin: 0 auto;
      width: 80%; }
      @media only screen and (max-width: 600px) {
        .footer-content__style span {
          width: 100%; } }
      .footer-content__style span small {
        display: inline-block;
        padding-bottom: 1rem; }
        @media only screen and (max-width: 600px) {
          .footer-content__style span small {
            display: block;
            padding-left: 33%; } }
      .footer-content__style span small:not(:last-child) {
        margin-right: 25rem; }
        @media only screen and (max-width: 900px) {
          .footer-content__style span small:not(:last-child) {
            margin-right: 60%; } }
      @media only screen and (max-width: 600px) {
        .footer-content__style span small:last-child {
          top: 25rem;
          position: absolute;
          background-color: #096;
          width: 100%; } }
  .footer-content__navigation {
    width: 80%;
    margin: 0 auto; }
    .footer-content__navigationinclude responsive(phone) {
      width: 100%; }
    .footer-content__navigation section {
      display: inline-block; }
      @media only screen and (max-width: 600px) {
        .footer-content__navigation section {
          display: block;
          padding-left: 30%; } }
      @media only screen and (max-width: 600px) {
        .footer-content__navigation section:last-child {
          margin-top: 15rem; } }
      .footer-content__navigation section ul {
        list-style-type: none;
        margin: 0;
        padding: 0; }
        .footer-content__navigation section ul li {
          font-size: 1.2rem;
          margin-bottom: 2rem; }
          @media only screen and (max-width: 900px) {
            .footer-content__navigation section ul li {
              font-size: 1.5rem; } }
          .footer-content__navigation section ul li a {
            text-decoration: none;
            color: #000; }
    .footer-content__navigation section:not(:last-child) {
      margin-right: 25rem; }
      @media only screen and (max-width: 900px) {
        .footer-content__navigation section:not(:last-child) {
          margin-right: 60%; } }
  .footer-content__brand {
    margin-left: 20%; }
    @media only screen and (max-width: 900px) {
      .footer-content__brand {
        margin-left: 10%;
        margin-top: 5rem; } }
    .footer-content__brand p {
      position: relative; }
    .footer-content__brand p:not(:last-child) {
      margin-bottom: 3rem; }
    .footer-content__brand label {
      display: block;
      margin-bottom: 1rem;
      font-size: 1.5rem; }
      @media only screen and (max-width: 900px) {
        .footer-content__brand label {
          display: inline-block; } }
    .footer-content__brand img {
      border-radius: 2px;
      width: 4.1rem;
      vertical-align: middle; }
    .footer-content__brand span {
      display: inline-block;
      margin-right: 1rem;
      top: -2rem;
      font-size: 1.4rem;
      positon: relative; }
    .footer-content__brand .input-modify {
      font-size: 1.2rem;
      padding: .8rem;
      border: solid 1px #FFF; }
      .footer-content__brand .input-modify:hover {
        border: solid 1px #096; }

.grid-row {
  margin: 0 auto;
  max-width: 150rem;
  position: relative;
  width: 100%;
  content: "";
  display: table;
  clear: both; }
  .grid-row:not(:last-child) {
    margin-bottom: 0.2rem; }
  .grid-row > :not(:last-child) {
    margin-right: 1rem;
    padding-left: 1%; }
    @media only screen and (max-width: 900px) {
      .grid-row > :not(:last-child) {
        margin-right: 0 !important; } }
  .grid-row [class^="grid-col-"] {
    float: left; }
    @media only screen and (max-width: 900px) {
      .grid-row [class^="grid-col-"] {
        width: 100% !important; } }
  .grid-row .grid-col-12 {
    width: 100%; }
  .grid-row .grid-col-11 {
    width: calc(100% - (8.33333% * 1) - 1rem);
    background-color: yellow; }
  .grid-row .grid-col-10 {
    width: calc(100% - (8.33333%* 2) - 1rem); }
  .grid-row .grid-col-9 {
    width: calc(100% - (8.33333% * 3) - 1rem); }
  .grid-row .grid-col-8 {
    width: calc(100% - (8.33333% * 4) - 1rem); }
  .grid-row .grid-col-7 {
    width: calc(100% - (8.33333% * 5) - 1rem); }
  .grid-row .grid-col-6 {
    width: calc(100% - (8.33333% * 6) - 1rem); }
  .grid-row .grid-col-5 {
    width: calc(100% - (8.33333% * 7) - 1rem); }
  .grid-row .grid-col-4 {
    width: calc(100% - (8.33333% * 8) - 1rem); }
  .grid-row .grid-col-3 {
    width: calc(100% - (8.33333% * 9) - 1rem); }
  .grid-row .grid-col-2 {
    width: calc(100% - (8.33333% * 10) -  1rem); }
  .grid-row .grid-col-1 {
    width: calc(100% - (8.33333% * 11) - 1rem); }
  .grid-row .grid-offset-11 {
    left: 40%;
    position: relative; }

.header {
  height: 85vh;
  /* Set the height to 95% of the total device viewport */
  background-image: linear-gradient(to right bottom, rgba(0, 153, 102, 0.7), rgba(204, 153, 0, 0.5)), url("../imgs/hero_res.jpg");
  background-position: top;
  background-size: cover;
  padding: 2rem;
  position: relative; }
  @media only screen and (max-width: 900px) {
    .header {
      height: 75vh; } }
  @media only screen and (min-resolution: 192dpi) and (min-width: 600px), (min-device-pixel-ratio: 2) {
    .header {
      height: 95vh;
      /* Set the height to 95% of the total device viewport */
      background-image: linear-gradient(to right bottom, rgba(0, 153, 102, 0.7), rgba(204, 153, 0, 0.5)), url("../imgs/hero.jpg"); } }
  @supports (clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%)) {
    .header {
      clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%); } }
  .header__brand-logo {
    width: 7rem; }
    @media only screen and (max-width: 900px) {
      .header__brand-logo {
        width: 5.5rem; } }
    @media only screen and (max-width: 600px) {
      .header__brand-logo {
        width: 5rem; } }

.brand-content {
  left: 90%;
  position: absolute;
  top: 4rem; }
  @media only screen and (max-width: 900px) {
    .brand-content {
      top: 1rem; } }
  @media only screen and (max-width: 600px) {
    .brand-content {
      left: 85%; } }

.hero-content {
  left: 50%;
  position: absolute;
  text-align: center;
  top: 45%;
  transform: translate(-50%, -50%); }
  @media only screen and (max-width: 900px) {
    .hero-content {
      left: 30%;
      transform: translate(-30%, -50%); } }
  @media only screen and (max-width: 600px) {
    .hero-content {
      left: 15%;
      transform: translate(-15%, -50%); } }

.hero-heading {
  backface-visibilty: hidden; }

.hero-sub-head-1,
.hero-sub-head-2 {
  color: #FFF;
  display: inline-block;
  margin-bottom: 1.5rem; }

.hero-sub-head-1 {
  left: 2%;
  letter-spacing: .2rem;
  font-size: 5rem;
  font-weight: 800;
  position: relative;
  animation-name: moveInLeft;
  animation-duration: 3s;
  animation-timing-function: linear; }
  @media only screen and (max-width: 1200px) {
    .hero-sub-head-1 {
      font-size: 4rem;
      letter-spacing: .1rem; } }
  @media only screen and (max-width: 900px) {
    .hero-sub-head-1 {
      font-size: 3.2rem; } }
  @media only screen and (max-width: 600px) {
    .hero-sub-head-1 {
      font-size: 2.8rem; } }

.hero-sub-head-2 {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 2rem;
  letter-spacing: .2rem;
  animation-name: moveInRight;
  animation-duration: 2s;
  animation-timing-function: linear; }
  @media only screen and (max-width: 1200px) {
    .hero-sub-head-2 {
      font-size: 1.8rem;
      letter-spacing: .1rem; } }
  @media only screen and (max-width: 900px) {
    .hero-sub-head-2 {
      font-size: 1.6rem; } }
  @media only screen and (max-width: 600px) {
    .hero-sub-head-2 {
      font-size: 1.7rem; } }

.navigation_checkbox {
  display: none; }

.navigation_checkbox:checked ~ .navigation_background {
  transform: scale(80); }

.navigation_checkbox:checked ~ .navigation_nav {
  opacity: 1;
  width: 50%; }

.navigation_checkbox:checked ~ .navigation_button > .navigation_bar::after {
  opacity: 0; }

.navigation_checkbox:checked ~ .navigation_button > .navigation_bar {
  top: 2.5rem;
  background-color: #000;
  transform: rotate(135deg); }

.navigation_checkbox:checked ~ .navigation_button > .navigation_bar::before {
  top: 0;
  transform: rotate(-90deg); }

.navigation_button {
  background-color: #FFF;
  border: none;
  border-radius: 50%;
  height: 5rem;
  position: fixed;
  left: 3rem;
  top: 3rem;
  transition: transform .4s;
  width: 5rem;
  z-index: 500; }
  .navigation_button:hover {
    cursor: pointer; }
  .navigation_button:hover > * {
    background-color: #096; }

.navigation_bar {
  display: block;
  background-color: #000;
  width: 2.5rem;
  height: .2rem;
  position: relative;
  top: 1.6rem;
  transition: transform .3s;
  left: 1.3rem; }
  .navigation_bar::before, .navigation_bar::after {
    background-color: #000;
    content: "";
    display: block;
    position: absolute;
    width: 2.5rem;
    height: .2rem; }
  .navigation_bar::before {
    top: .7rem; }
  .navigation_bar::after {
    top: 1.5rem; }

.navigation_background {
  background-color: #096;
  background-image: linear-gradient(to right bottom, rgba(0, 153, 102, 0.7), rgba(204, 153, 0, 0.5));
  border: none;
  border-radius: 50%;
  height: 4rem;
  position: fixed;
  left: 3.5rem;
  top: 3.5rem;
  transition: all .4s;
  width: 4rem;
  z-index: 400; }

.navigation_nav {
  left: 50%;
  opacity: 0;
  position: fixed;
  transform: translate(-50%, -50%);
  top: 50%;
  transition: opacity .3s;
  width: 0;
  z-index: 450; }

.navigation_list {
  left: 35%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: relative; }
  @media only screen and (max-width: 600px) {
    .navigation_list {
      left: 0; } }

.navigation_item {
  background-image: linear-gradient(105deg, #C90 0%, #C90 50%, #FFF 50%);
  background-size: 195%;
  display: inline-block;
  font-size: 2rem;
  height: 5rem;
  margin: 0 auto;
  padding-top: 1rem;
  transition: all .4s;
  width: 50%; }
  .navigation_item:hover {
    background-position: 100%; }
  @media only screen and (max-width: 900px) {
    .navigation_item {
      width: 60%; } }
  @media only screen and (max-width: 600px) {
    .navigation_item {
      width: 100%; } }

.navigation_item:hover > .navigation_link {
  color: black; }

.navigation_item:not(:last-child) {
  margin-bottom: 1rem; }

.navigation_link:link, .navigation_link:visited, .navigation_link:active {
  color: #FFF;
  display: block;
  text-decoration: none;
  margin: 0 auto;
  width: 50%; }
  @media only screen and (max-width: 600px) {
    .navigation_link:link, .navigation_link:visited, .navigation_link:active {
      width: 70%; } }

.about-content {
  margin-top: -20vh;
  padding: 20rem 0 50rem 0; }
  @media only screen and (max-width: 1200px) {
    .about-content {
      padding: 20rem 0 20rem 0; } }
  @media only screen and (max-width: 600px) {
    .about-content {
      padding: 20rem 0 5rem 0; } }
  .about-content__text {
    width: 80%; }
    .about-content__text p {
      text-align: justify; }
    @media only screen and (max-width: 900px) {
      .about-content__text {
        width: 70%;
        margin: 0 auto; } }
  .about-content__text:not(:last-child) {
    margin-bottom: 7rem; }

.feature-content {
  height: 85vh;
  /* Set the height to 95% of the total device viewport */
  background-image: linear-gradient(to right bottom, rgba(0, 153, 102, 0.7), rgba(204, 153, 0, 0.5)), url("../imgs/hero_2_res.jpg");
  background-position: top;
  background-size: cover;
  padding: 20rem 0 10rem 0;
  margin-top: -10rem;
  transform: skewY(7deg); }
  @media only screen and (min-resolution: 192dpi) and (min-width: 600px), (min-device-pixe-ration: 2) {
    .feature-content {
      background-image: linear-gradient(to right bottom, rgba(0, 153, 102, 0.7), rgba(204, 153, 0, 0.5)), url("../imgs/hero_2.jpeg"); } }
  @media only screen and (max-width: 1200px) {
    .feature-content {
      height: 90vh;
      /* Set the height to 95% of the total device viewport */ } }
  @media only screen and (max-width: 1200px) {
    .feature-content {
      height: auto;
      padding: 15rem 0 10rem 0; } }
  .feature-content > * {
    transform: skewY(-7deg); }
  .feature-content__feature {
    width: 100%;
    background-color: #FFF;
    padding: 2rem; }
    .feature-content__feature:hover {
      box-shadow: 0 1rem 2rem rgba(255, 0, 0, 0.3);
      transform: scale(1.02) translateY(-2px);
      transition: all .3s ease; }
    @media only screen and (max-width: 900px) {
      .feature-content__feature {
        width: 60%;
        margin: 0 auto;
        margin-bottom: 3rem; } }

.profile-content {
  margin-top: -15vh;
  padding: 20rem 0 10rem 0; }
  @media only screen and (max-width: 1200px) {
    .profile-content {
      padding: 30rem 0 5rem 0; } }

.trendy-content {
  background-color: #C90; }
  .trendy-content__layer {
    padding-bottom: 20rem;
    padding-top: 10rem;
    background-color: #F3F3F3; }
    @media only screen and (max-width: 1200px) {
      .trendy-content__layer {
        padding-bottom: 7rem; } }
    .trendy-content__layer-heading {
      margin-left: 10%;
      font-style: italic; }

.top-model-content {
  background-color: #F3F3F3;
  padding: 10rem 0 10rem 0; }
  @media only screen and (max-width: 600px) {
    .top-model-content {
      padding: 10rem 0 0 0; } }

.stories-content {
  padding: 10rem 0 10rem 0;
  position: relative; }

.Booking-content {
  padding: 10rem 0 10rem 0;
  background-color: rgba(0, 153, 102, 0.7); }
  .Booking-content_model-book {
    background-image: linear-gradient(90deg, rgba(243, 243, 243, 0.9) 0%, rgba(243, 243, 243, 0.9) 2%, #f3f3f3 60%, transparent 40%), url(../imgs/booking2.jpg);
    background-size: 100%;
    margin: 0 auto;
    height: 60rem;
    width: 90%; }
    @media only screen and (max-width: 900px) {
      .Booking-content_model-book {
        background-size: cover;
        background-image: linear-gradient(90deg, rgba(243, 243, 243, 0.9) 0%, rgba(243, 243, 243, 0.9) 2%, #f3f3f3 80%, transparent 20%), url(../imgs/booking2.jpg); } }
    @media only screen and (max-width: 600px) {
      .Booking-content_model-book {
        height: 70rem;
        width: 95%;
        background-size: cover;
        background-image: linear-gradient(90deg, rgba(243, 243, 243, 0.7) 0%, rgba(243, 243, 243, 0.7) 2%, rgba(243, 243, 243, 0.8) 100%, transparent 0%), url(../imgs/booking2_res.jpg); } }
  .Booking-content_book-form {
    margin-top: 4rem;
    padding-left: 5.5rem;
    width: 60%; }
    @media only screen and (max-width: 900px) {
      .Booking-content_book-form {
        width: 80%; } }

.contact-content {
  padding: 10rem 0 10rem 0; }
  .contact-content__halo {
    background-color: #000;
    border-radius: 2px;
    color: #FFF;
    margin: 0 auto;
    width: 80%; }
    @media only screen and (max-width: 600px) {
      .contact-content__halo {
        width: 90%; } }
    .contact-content__halo h3 {
      font-size: 2rem;
      margin-left: 30%;
      padding-top: 1.5rem;
      margin-bottom: 3rem; }
    .contact-content__halo p {
      margin-bottom: 2rem;
      margin-left: 20%; }
      .contact-content__halo p b {
        color: #096;
        font-size: 1.7rem; }
      .contact-content__halo p small {
        font-size: 1.3rem; }
    .contact-content__halo p:nth-child(3) {
      position: relative; }
      .contact-content__halo p:nth-child(3) span {
        display: block;
        width: 50%;
        position: relative;
        top: -2rem;
        left: 10%; }
      .contact-content__halo p:nth-child(3) small {
        display: block;
        margin-bottom: 1rem; }
  .contact-content__location {
    margin: 0 auto;
    margin-top: 4rem;
    width: 60%; }
    .contact-content__location p {
      font-size: 1.8rem;
      margin-bottom: 1.5rem; }
  .contact-content .social-list {
    list-style-type: none;
    margin: 0;
    margin-top: 6rem;
    margin-left: 6rem;
    padding: 0; }
    .contact-content .social-list li {
      display: inline-block;
      width: 15%; }
      .contact-content .social-list li a {
        text-decoration: none; }
        .contact-content .social-list li a img {
          width: 5rem;
          display: inline-block;
          transition: all .2s;
          backface-visibility: hidden;
          border-bottom: solid 1px #096; }
          .contact-content .social-list li a img:hover {
            transform: scale(1.1); }

.footer-content {
  padding: 10rem 0 5rem 0; }
  .footer-content footer__brand-logo {
    width: 4rem; }

#preloader {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: #096;
  z-index: 3000; }
  #preloader .loader {
    width: 10rem;
    height: 3rem;
    background-color: #FFF;
    backface-visibility: hidden;
    border-bottom: solid 2px transparent;
    position: absolute;
    top: 50%;
    left: 45%;
    transfrom: translate(-50%, -50%);
    transform: skewX(-12deg);
    position: relative;
    animation-name: shake-shake;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in; }
    #preloader .loader p {
      padding-top: 5%;
      position: relative;
      color: #F00; }
    #preloader .loader > * {
      transform: skewX(12deg);
      text-align: center;
      font-size: 1.1rem; }