:root {
	--background: #fcf8ef;
	--background-accent: #fff4db;
	--text: #4f4f4f;
	--text-accent: #ff9e44;

	--font: "Literata", serif;
	--font-logo: "Kumbh Sans", sans-serif;
}
  
html,
body {
	background: var(--background);
	color: var(--text);
	font-family: var(--font);
	padding: 0;
	margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; 
}

main {
  flex: 1;
}

a {
	color: var(--text);
	text-decoration: underline;
	text-decoration-color: var(--text-accent);
}

a:hover,
a:active,
a:focus {
	color: var(--text-accent);
}

h1 {
	padding: 0;
	margin-bottom: 68px;
}
h3{
	font-family: var(--font-logo);
	font-size: 20px;
	font-weight:700;
	text-transform: uppercase;
	text-align: left;
}
p {
font-size: 20px;
font-weight: 400;
line-height: normal;
	margin: 0;
	padding-bottom: 20px;
}
.biggy{
	max-width:1600px;max-height:900px;width:100%;height:900px;
}

/****HOME PAGE****/
.waving-hand {
        color: black;
        font-size: 55px;
        font-family: 'Kumbh Sans', sans-serif;
        font-weight: 800;
        word-wrap: break-word;
        transform-origin: bottom right;
        animation: wave 400ms ease-in-out infinite;
        display: inline-flex;
      }

.frame1 {
        /*width: 187px;*/
        height: 95px;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        display: inline-flex;
        margin: auto;
      }

      @keyframes wave {
        0%, 100% {
          transform: rotate(25deg);
        }
        25% {
          transform: rotate(35deg);
        }
        50% {
          transform: rotate(25deg);
        }
        75% {
          transform: rotate(15deg);
        }
      }

 .Hi .hello{
 	color: var(--text); 
 	font-size: 55px; 
 	font-family: Kumbh Sans, sans-serif; 
 	font-weight: 800; 
 	word-wrap: break-word;
 }

.Line1{
	width: 187.68px; 
	height: 0px; 
	transform: rotate(-4.89deg); 
	transform-origin: 0 0; 
	border: 8px var(--text-accent) solid; 
	background-color:var(--text-accent);
}

/**END HOME PAGE**/

@media (min-width: 800px) {
	p {
		font-size: 32px;
		padding-bottom: 32px;
	}
}

ul, ol {
	margin: 0 0 0 20px;
	padding: 0;
}

@media (min-width: 800px) {
	margin: 0 0 0 32px;
}

li {
font-size: 20px;
font-weight: 400;
line-height: normal;
	margin: 0 0 0 20px;
	padding-bottom: 20px;

}

@media (min-width: 800px) {
	li {
		font-size: 32px;
		padding-bottom: 32px;
		margin: 0 0 0 32px;
	}
}

main {
	position: relative;
}

.site-header {
	display: flex;
	justify-content: space-between;
	padding: 27px;
}

.site-header__logo {
	font-family: var(--font-logo);
	font-weight: 700;
	text-decoration: none;
}

.site-header__nav {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.site-header__nav__link {
	font-weight: 400;
	text-align: right;
	text-decoration: none;
}

.site-header__nav__link.selected {
	font-weight: 700;
}

.site-footer {
	display: flex;
	justify-content: space-between;
	padding: 27px;
	clear: both;
}

.site-footer__logo {
	font-family: var(--font-logo);
	font-weight: 700;
	text-decoration: none;
}

.site-footer__nav {
	font-size: 14px;
}

.site-footer__nav__link{
	padding:0 0 0 15px;
	display: inline-flex;
} 

.content {
}



.content.fixed-width {
	margin: 0 auto;
	max-width: 1280px;
	padding: 0 27px;
}
.button{
	padding:10px 20px;
	border:2px solid var(--text-accent);
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
	border-radius: 5px;
	display: inline-flex;
	margin-bottom: 5px;
}
.button:hover{
	background-color: var(--background-accent);
		transition: all .3s linear;
}

.content.full-width{
	margin:50px 0 50px 0;
	background-color: var(--background-accent);
	width:100%;
	padding: 25px 0 25px 0;
  text-align: left;
}

.content__home{
	margin-top:75px;
	background-color: var(--background-accent);
	width:100%;
	padding: 95px 0;
  text-align: center;
}

.heading{
		color: var(--text);

	font-size: 48px;
	font-weight: 500;
	display: block;
	line-height: 60.3px; /* 125.625% */
}

.folio_nav.heading {
		color: var(--text);
  padding:50px;
	font-size: 48px;
	font-weight: 500;
	line-height: 60.3px; /* 125.625% */
}

@media (min-width: 800px) {
	.heading {
		font-size: 96px;
		line-height: 111px; /* 115.625% */
	}
}

.subheading {
	color: var(--text);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	display: block;
}

@media (min-width: 800px) {
	.subheading {
		font-size: 20px;
	}
}



.case-study-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.case-study-list li {
	margin: 0;
}

.case-study {
	text-decoration: none;
	display: block;
	padding: 40px 26px 26px;
	background: linear-gradient(
		to right,
		var(--background-accent) 50%,
		var(--background) 50%
	);
	background-size: 200% 100%;
	background-position: right bottom;
	transition: all .5s linear;
}

.case-study:hover,
.case-study:active,
.case-study:focus {
	background-position: left bottom;
}


.case-study__content {
	max-width: 1280px;
	margin: 0 auto;
	display: block;
}

.case-study__title {
	text-decoration: underline;
	text-decoration-color: var(--text-accent);
	margin: 0;
	padding: 0;
}

.case-study__title:hover{
	color: var(--text-accent);
}

@media (min-width: 800px) {
  .case-study__title {
		font-size: 96px;
	}
}

.selfie-section {
	display: flex;
	flex-direction: column-reverse;
}
.selfie-home{
	float:left;
	margin-right: 1rem;
	border-radius: 100%;
	
}

@media (min-width: 950px) {
.selfie-section {
	display: block;
	}
	.selfie {
		float: left;
		shape-outside: circle(60%);
	}
}

.sr-only {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.tallboy{
	max-height: 800px;
	}
/*carousel properties down here*/
/* external css: flickity.css */

* { box-sizing: border-box; }
/*! Flickity v2.3.0
https://flickity.metafizzy.co
---------------------------------------------- */

.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus { outline: none; }

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* draggable */

.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

/* ---- flickity-button ---- */

.flickity-button {
  position: absolute;
  background: hsla(0, 0%, 100%, 0.75);
  border: none;
  color: #333;
}

.flickity-button:hover {
  background: var(--background);
  cursor: pointer;
}

.flickity-button:focus {
  outline: none;
  box-shadow: 0 0 0 5px #19F;
}

.flickity-button:active {
  opacity: 0.6;
}

.flickity-button:disabled {
  opacity: 0.3;
  cursor: auto;
  /* prevent disabled button from capturing pointer up event. #716 */
  pointer-events: none;
}

.flickity-button-icon {
  fill: currentColor;
}

/* ---- previous/next buttons ---- */

.flickity-prev-next-button {
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* vertically center */
  transform: translateY(-50%);
}

.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; }
/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px;
}
.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px;
}

.flickity-prev-next-button .flickity-button-icon {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}

/* ---- page dots ---- */

.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: -25px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
}

.flickity-rtl .flickity-page-dots { direction: rtl; }

.flickity-page-dots .dot {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 8px 20px 8px;
  background: var(--text-accent);
  border-radius: 50%;
  opacity: 0.25;
  cursor: pointer;
  padding: 0;
}

.flickity-page-dots .dot.is-selected {
  opacity: 1;
}

.carousel {
  background: var(--background-accent);
}

/* flickity on by default */
.carousel:after {
  content: 'flickity';
  display: none;
}


 
.carousel-cell {
  width: 600px;
  height:400px;
  padding: 0px;
  margin:0 20px 0 20px;
  counter-increment: carousel-cell;
  display: inline-block; 
}

 .carousel img {
  object-fit: contain;
  object-position: center; 
  max-width: 100%;
}
/* no margin bottom when Flickity enabled */
.flickity-enabled .carousel-cell {
  margin-bottom: 0;
}

/* cell number */
.carousel-cell:before {
  display: none;
  font-family: var(--font-logo);
  content: counter(carousel-cell);
  font-size: 20px;
  color: var(--text);
}
.carousel-cell p{
	font-size: 14px;
	font-family: var(--font-logo);
	color: var(--text);
	text-align: left;
}

.folio_nav{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}
.centering{
	margin:auto;
	text-align: center;
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.centering {
  width: auto;
  max-width: 100%; 
}

@media (max-width: 768px) {
  .centering {
    width: 100%; 
  }
}
@media (max-width: 600px) {
  .carousel-cell h3,
  .carousel-cell p {
    display: none; 
  }
}