/***************************************************************************************************************************************

	S2F Base Catalogue CSS
	
		1. General Reset
		2. Typography
		3. Grid / Layout
		4. Inputs, buttons & Forms
		5. Menu
		6. Colours
		7. Tooltips
		8. Modals
		9. Sliders
		10. Quick Links
		11. Pagination 
		12. Autocomplete
		13. Header
		14. Footer
		15. Homepage
		16. Page.php
		17. Custom CSS
		18. Responsive
		
		
***************************************************************************************************************************************/
/***************************************************************************************************************************************

	1. General Reset
		
***************************************************************************************************************************************/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  -webkit-font-smoothing: antialiased; }

html, body {
  height: 100%;
  min-height: 100%; }

body {
  animation: s2ffadein 0.5s;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  color: #000000;
  margin: 0;
  line-height: 1.15em; }
  body.fancybox-active {
    height: 100%; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: #0e0500;
  letter-spacing: -0.025em; }

h1, h2, h3, h4, h5, p, ul, li, img {
  margin: 0;
  padding: 0;
  border: none;
  list-style: none; }

p {
  font-size: 1rem;
  line-height: 1.3em;
  color: #151515;
  padding-bottom: 1.3rem; }
  p a {
    display: inline-block;
    color: #03bb67;
    position: relative;
    text-decoration: none; }
    p a:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 1px;
      background-color: #03bb67;
      transition: 0.3s all ease; }
    p a:hover:after {
      width: 100%; }

img {
  max-width: 100%;
  height: auto; }

.full-image img,
img.full-image {
  width: 100%;
  height: auto; }

::-moz-selection {
  color: #ffffff;
  background: #333333; }

::selection {
  color: #ffffff;
  background: #333333; }

.wrapper {
  height: 100%;
  border: 1rem solid #0e0500; }
  @media all and (max-width: 700px) {
    .wrapper {
      border-width: 0.5rem; } }

.container {
  height: 100%;
  padding: 0;
  margin: 0;
  width: 95%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-around; }
  .container .intro {
    width: 100%; }
    .container .intro h1 {
      font-size: 4rem;
      font-size: clamp(4rem, 12vw, 15rem);
      line-height: 0.8em;
      text-transform: uppercase;
      transform: translateX(-0.9vw); }
      @media all and (max-width: 700px) {
        .container .intro h1 {
          font-size: 4rem;
          font-size: clamp(4rem, 12vw, 15rem);
          transform: translateX(-0.5rem); } }
    .container .intro p {
      font-size: 1.5rem;
      line-height: 1.2em;
      padding: 1rem; }
  .container .details {
    margin-left: auto;
    padding: 1rem;
    line-height: 1.3em;
    max-width: 400px;
    font-family: 'Lato', sans-serif; }

form label {
  display: block; }

form input[type=text],
form input[type=email],
form textarea {
  display: block;
  width: 100%;
  padding: 1.25rem;
  font-size: 1rem;
  transition: 0.3s all ease;
  border: 1px solid #a4a4a4;
  border-radius: 2px;
  -webkit-appearance: none;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  color: #000000; }
  form input[type=text]:focus,
  form input[type=email]:focus,
  form textarea:focus {
    outline: none;
    border-color: #03bb67; }

form input[type=submit] {
  display: inline-block;
  padding: 1rem;
  background-color: #03bb67;
  color: #ffffff;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
  border-radius: 2px; }
  form input[type=submit]:focus {
    outline: none; }
  form input[type=submit]:hover {
    background-color: #03d475; }

.modal {
  border-radius: 3px;
  box-shadow: 0 4.3px 3.3px rgba(0, 0, 0, 0.065), 0 10.9px 8.3px rgba(0, 0, 0, 0.093), 0 22.3px 17px rgba(0, 0, 0, 0.117), 0 46px 35px rgba(0, 0, 0, 0.145), 0 126px 96px rgba(0, 0, 0, 0.21); }

.fancybox-bg {
  background-color: #03bb67; }

/*
	.fancybox-slide {
		transition: 0.5s all ease;
		transform: translateY(100%);
		opacity: 0;
	}
	*/
.fancybox-fx-slide-in-out.fancybox-slide--next,
.fancybox-fx-slide-in-out.fancybox-slide--previous {
  transform: translateY(100%);
  opacity: 0; }

.fancybox-fx-slide-in-out.fancybox-slide--current {
  transform: translateY(0);
  opacity: 1; }

.wpcf7-form .wpcf7-response-output.wpcf7-validation-errors {
  color: #D8000C;
  background-color: #FFBABA;
  border: 0;
  padding: 10px; }

.wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok {
  color: #4F8A10;
  background-color: #DFF2BF;
  border: 0;
  padding: 10px; }

div.wpcf7-mail-sent-ok:before, div.wpcf7-validation-errors:before {
  font: 26px/30px dashicons;
  margin-right: 16px;
  vertical-align: middle; }

div.wpcf7-mail-sent-ok:before {
  content: "\f147"; }

div.wpcf7-validation-errors:before {
  content: "\f158"; }