/**************
* Caroline Erez Design
* Copyright 2018, Caroline Erez Design
* Author: Alyse Webb;
***************
Fonts
***************/

@font-face {
	font-family: SinkinSans Bold;
	src: url("../fonts/sinkinSans/SinkinSans-Bold.otf") format("opentype");
	font-style: normal; }

@font-face {
	font-family: SinkinSans Light;
	src: url("../fonts/sinkinSans/SinkinSans-Light.otf") format("opentype");
	font-style: normal; }

@font-face {
	font-family: SinkinSans Medium;
	src: url("../fonts/sinkinSans/SinkinSans-Light.otf") format("opentype");
	font-style: normal; }


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

img {
	width: 100%;
}

html, body {
	height: 100%;
}

main {
	padding-top: 80px;
}


/***************************
Headings, body font
**************************/
html, body {
	font-size: 16px;
	font-family: SinkinSans Medium;
	text-align: left;
	color: #171717;
}

p {
	font-size: 1em;
}

a {
	text-decoration: underline;
	font-family: inherit;
	font-size: 20px;
}

h1, h2, h3, h4 {
	color: #171717;
	font-family: SinkinSans Medium;
}

h1 {
	font-size: 2.4em;
}

h2 {
	margin-top: 1em;
	font-size: 2em;
}

h3 {
	font-size: 1.4em;
	margin-bottom: 2.5em;
}


@media (min-width: 450px) {

}

@media (min-width: 650px) {
	
}

@media (min-width: 950px) {
	h3 {
	font-size: 1.6em;
	}
}


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

.center {
	text-align: center;
}

.fit {
	height: 100vh;
	display: flex;
	align-items: center;
}

@media (min-width: 650px) {
	.flex {
		display: flex;
		align-items: center;
	}
}

.end {
	justify-content: flex-end;
}

.fit img {
	max-width: 100%;
}


.full-width-container {
	width: 100%;
	max-width: 100%;
	clear: both;
	margin: 0 auto;
	position: relative;
}

.inline {
	display: inline-block;
}

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

/**************************
Portfolio gallery
/**************************/
button, button:visited, button:active {
	padding: 0.5em 1.5em;
	color: black;
	background: none;
	border: solid 1px black;
	border-radius: 1px;
	text-transform: uppercase;
	font-size: 0.6em;
	position: absolute;
	bottom: 1em;
	transition: 0.7s ease;
}

.portfolio article:hover button {
	background: black;
	color: white;
}

.portfolio article:hover .thumbnail img{
	-webkit-transform: translate(-50%,-50%) scale(1.05);
      -ms-transform: translate(-50%,-50%) scale(1.05);
          transform: translate(-50%,-50%) scale(1.05);
}

.portfolio article {
	margin-bottom: 1.5em;
	background: #F9F9F9;
	border-radius: 6px;
	position: relative;
}

.portfolio article .description {
	padding: 1.5em 1em 1em 1em;
}

@media (min-width: 750px) {
	.portfolio article .description {
	padding: 3em 1em 1em 0;
	}
}

.thumbnail {
  position: relative;
  width: 100%;
  height: 230px;
  border-radius: 6px;
  overflow: hidden;
}

.thumbnail img {
  position: absolute;
  left: 50%;
  top: 50%;
  min-height:100%;
  min-width:100%;
  transition: 0.7s ease;
  -webkit-transform: translate(-50%,-50%) scale(1);
      -ms-transform: translate(-50%,-50%) scale(1);
          transform: translate(-50%,-50%) scale(1);
}

@media (min-width: 750px) {
	.thumbnail {
	  height: 260px;
	}
}

@media (min-width: 1050px) {
	.thumbnail {
	  height: 360px;
	}
}
/*
.gallery .row div {
  position: relative;
  width: 100%;
  height: 700px;
  overflow: hidden;
}

.gallery .row div img {
  position: absolute;
  left: 50%;
  top: 50%;
  min-height:100%;
  min-width:100%;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}*/

.gallery img {
	width: 100%;
}

.gallery .row {
	margin-bottom: 1em;
}


/**************************
Slider
/**************************/

main .slider {
	height: calc(100vh - 200px);
	max-height: 300px;
	display: block;
	font-size: 0;
	overflow: hidden;
}

.slider div {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slider div img {
  position: absolute;
  left: 50%;
  top: 50%;
  min-height:100%;
  min-width:100%;
  transition: 0.7s ease;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}

@media (min-width: 550px) {
	main .slider {
		max-height: 400px;
	}
}

@media (min-width: 750px) {
	main .slider {
		max-height: 500px;
	}
}

@media (min-width: 1050px) {
	main .slider {
		max-height: 1000px;
	}
}

.full-width-container .container {
	padding: 0;
}

.slick-prev, .slick-next {
	width: 30px;
	height: 30px;
}


.slick-prev {
	left: 10px;
	z-index: 100;
}

.slick-next {
	z-index: 100;
	right: 20px;
}

.slick-dots {
	bottom: 0;
}

.slick-dotted.slick-slider {
	margin: 0;
}

.slick-dots li.slick-active button:before {
	color: white;
}

.slick-dots li button:before {
	color: white;
	font-size: 10px;
}

.slick-prev:before, .slick-next:before {
	font-size: 30px;
}


/***************************
Nav (adapted from: https://codepen.io/mutedblues/pen/MmPNPG)
**************************/

.nav #logo {
	height: 34px;
	width: auto;
	float: left;
}

.nav .container {
	padding-top: 1.2em;
	padding-bottom: 1.2em;
}

.nav {
	background: rgba(255, 255, 255, 0.95);
  position: fixed;
  width: 100%;
  z-index: 100;
  top: 0;
  transition: top 0.2s ease-in-out;
  -webkit-transition: top 0.2s ease-in-out;
}

.nav-up {
    top: -64px;
}

.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.nav li {
	margin: 0;
}

.nav li a {
  display: block;
  text-align: right;
  text-decoration: none;
  padding: 15px 0 15px 0;
  font-family: SinkinSans Light;
  font-size: 14px;
  text-transform: uppercase;
  color: black;
  transition: 0.1s ease;
}

.nav li a:hover,
.nav .menu-btn:hover {
  font-weight: normal;
  text-shadow:0.3px 0 0 black;
}

.nav li a.active {
	text-shadow:1px 0 0 black; 
}

.nav i.fab {
	font-size: 1.1em;
}

/* menu */

.nav .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.nav .menu-icon {
  cursor: pointer;
  float: right;
  padding: auto;
  position: relative;
  user-select: none;
  top: auto;
  display: inline-block;
  padding: 15px 0 15px 0;
}

.nav .menu-icon .navicon {
  background: black;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.nav .menu-icon .navicon:before,
.nav .menu-icon .navicon:after {
  background: black;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.nav .menu-icon .navicon:before {
  top: 5px;
}

.nav .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

.nav .menu-btn {
  display: none;
}

.nav .menu-btn:checked ~ .menu {
  max-height: 300px;
}

.nav .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.nav .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.nav .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

@media (min-width: 950px) {
	.nav ul {
		display: flex;
	}
	.nav li {
		float: right;
		justify-content: flex-end;
		margin-left: 40px;
	}
	.nav li a {
		padding: 0;
	}
	.nav .menu {
		clear: none;
		float: right;
		max-height: none;
	}
	.nav .menu-icon {
		display: none;
	}
}


/***************************
Footer
**************************/

footer .container {
	padding-bottom: 0;
	position: relative;
}

footer {
	padding: 2em 0 2em 0;
	text-transform: uppercase;
}

footer p, footer p a {
	font-size: 0.7em;
}

footer p, footer .six:nth-child(2) p {
	text-align: center;
}

footer p {
	margin: 0;
}

footer p span {
	padding: 0 10px;
}

@media (min-width: 650px) {
	footer .six:nth-child(2) p {
		text-align: right;
	}

	footer p {
		text-align: left;
	}
}