@charset "UTF-8";
/* CSS Document */
	
	html{
		scroll-behavior: smooth;
		transition: 3s;
	}
	
	body{
		font-family: 'Ovo', serif;
		color: #315315;
		font-size: 24px;
		background-color: #FFFDF9;
		padding: 0% 2%;
		
		
	}
	
	
	.topnav-contain{
		width: 100%;
		float: left;
		margin: 1% 0 0 0;
		padding: 0 0 2% 0;
		text-align: center;
		
	}

	.topnav-contain img{
		width: 20%;
		height: auto;
		margin-bottom: 2%;
	}


	
	.topnav a{
		color: #47682b;
		text-decoration: none;
		margin: 1%;
	}
	
	.topnav-divider{
		border-bottom: 1px solid #ccc;
		margin-bottom: 5%;
		float:left;
		height: auto;
		width: 50%;
		margin: 0% 25% 5% 25%;
	}
	
	.main{
		width: 100%;
		text-align: left;	
	}
	
	.intro-container{
		display:flex;
		margin: auto 0;
	}
	
	.intro-divider{
		border-bottom: 1px solid #ccc;
		float:right;
		width: 100%;
		margin-top: 8%;
		height: auto;
	}
	
	.rotating-sentence-container{
		width: 60%;
		margin: auto -25%;
		
	}
	
	.rotating-sentence{
		width: 100%;
		margin: 0px;
	}
	
	.rotating-word{
		font-family: "ovo", serif;
		width:auto;
		display: inline-block;
	}
	
	.highlight{
	  text-align: center;
	  background: linear-gradient(180deg, #FAF3DF 50%, #FAF3DF 50%, #FAF3DF 80%, #FAF3DF 80%);
	}
	
	.main-intro{
		font-size: 46px;
		margin: 0px;
	}
	
	.main-intro p{
		margin: 0px;
	}
	
	.sub-intro{
		font-size: 24px !important;
		color: gray;
	}
	
	.sub-intro a{
		text-decoration: none;
		color:#315315;
	}

	.sub-intro a:hover{
		color:#7d9669 !important;
	}
	
	
	 .cls-1 {
        fill: #315315;
      }

      .cls-2 {
        fill: #7d9669;
      }
	
	.svg-logo{
		width: 62%;
		margin: auto 0;
	}
	
	.fade-in {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;	
	animation-timing-function: ease-in;
	animation-duration: 5s;

}

	@keyframes fadeInOpacity {
		0% {
			opacity: 0;
		}
		
		70% {
			opacity: 0;
		}
		
		100% {
			opacity: 1;
		}
	}
	
	.portfolio-container{
		margin-top: 5%;
		display:flex;
		flex-direction: row;
		flex-wrap: wrap;
		overflow: scroll;
		visibility: hidden;
		text-align: center;
	}
	
	.portfolio-items{
		width: 55%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		
	}
	
	.portfolio-items .top{
		margin-top: 0 !important;
		margin-bottom: 4%;
	}
	
	.portfolio-items .bottom{
		margin-bottom: 0 !important;
	}
	
	.portfolio-special{
		width: 45%;
	}
	
	.portfolio-feature{
		width: 43%;
		margin: auto;
		transition: margin 2s ease-in-out;
	}
	
	.portfolio-feature .title, .portfolio-highlight .title, .portfolio-banner .title{
		font-size: 18px !important;
	}
	
	.portfolio-feature:hover, .portfolio-banner:hover, .portfolio-highlight:hover{
		opacity: .85;
		
	}
	
	.portfolio-banner{
		width: 82%;
		margin:3% auto;
	}
	
	
	.cta{
		font-size: 32px;
	}
	
	.cta a{
		padding: 2% 1%;
		border-radius: 5px;
		color: #315315;
	}

	.cta a:hover{
		color:#7d9669;
	}
	
	.portfolio-highlight{
		width: 82%;
		margin: auto;
		transition: margin 2s ease-in-out;
	}
	
	.preview img{
		width: 100%;
		margin:auto ;
		border-radius: 10%;
		opacity: 1;
	}
	
	.portfolio-banner .preview img{
		border-radius: 5px;
	}
	
	.portfolio-cta{
		width: 82%;
		height: auto;
		margin: 1% 9%;
		float: left;
		text-align: center;
		background-color: #FAF3DF;
		border-radius: 4px !important;
	}

	.portfolio-cta a{
		color: #315315;
	}

	.portfolio-cta a:hover{
		color: #7d9669 !important;
	}
	
	.portfolio-cta p{
		margin: 2% 0 !important;
	}
	
	.slideUp {
	  animation-name: slideUp;
	  animation-name: slideUp;
	  animation-duration: 2s;
	  animation-duration: 2s;
	  visibility: visible;
	}

	.slideDown {
	  animation-name: slideDown;
	  animation-name: slideDown;
	  animation-duration: 1.5s;
	  animation-duration: 1.5s;
	  visibility: hidden;
	  opacity: 0;	
	}
	
	@keyframes slideUp {
	  0% {
		opacity: 0;
		transform: translateY(100%);
	  } 
	  100% {
		opacity: 1;
		transform: translateY(0%);
	  }
	}
	
	.portfolio-feature .preview:hover{
		opacity: 1;
		transition: .8s ease;
	}
	
	
	.more-divider{
		border-top: 1px solid #ccc;
		width: 50%;
		margin: 5% 25% 3% 25%;;
	}
	
	.container-more{
		width: 100%; 
		float: left;
		text-align: center;
	}
	
	.container-more p{
		
	}
	
	
	@media only screen and (max-width: 800px) {
	
	.topnav-contain{
		text-align: center;
	}
		
	.topnav-contain img{
		width: 40%;
	}	
		
	.topnav a{
		font-size: 18px;
	}
	
	.topnav-divider{
		width: 90%;
		margin: 0 5%;
	}
	
	/*Intro */
		
	.main{
		width: 100%;
		text-align: left;
		
	}
	
	.intro-container{
		width: 100%;
		float:left;
		margin: 0;
		display:inline;
	}
	
	.intro-divider{
		border-bottom: 1px solid #ccc;
		float:left;
		width: 90%;
		margin: 8% 0 5% 5%;
		height: auto;
	}
	
	#ezOsHj2c9Ny1{
		margin: auto auto auto 33%;	
	}	
		
	.svg-logo{
		width: 100% !important;
		float:left;
	}	
		
	.rotating-sentence-container{
		width: 100%;
		float:left;
		margin: 0px;
		text-align: center;
	}
	
	.rotating-word{
		font-family: "ovo", serif;
		width:auto;
		display: inline-block;
	}
	
	.main-intro{
		font-size: 28px;
		margin: 0px;
	}
	
	.main-intro p{
		margin: 0px;
	}
	
	.sub-intro{
		font-size: 18px !important;
		color: gray;
	}
	
		
	.portfolio-container{
		margin-top: 2%;
		visibility: visible;
	}	
	
	
	.portfolio-container{
		margin-top: 5%;
		display:inline;
		float: left;
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
		overflow: scroll;
		visibility: visible;
	}
	
	.portfolio-items{
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	
	
	.portfolio-special{
		width: 100%;
		float:left;
		background-color: #ffffff !important;
		height: auto;
	}
	
	
	.portfolio-banner{
		width: 90%;
		margin: 2% 5%;
		float:left;
	}
	
	.portfolio-cta{
		width: 90%;
		margin: 5% 5%;
		float: left;
		text-align: center;
		background-color: #FAF3DF;	
	}
		
	
	
	.portfolio-highlight{
		width: 90%;
		margin: 5%;
		float:left;
		transition: margin 2s ease-in-out;
	}
	
	.preview img{
		width: 100%;
		margin:auto ;
		border-radius: 10%;
		opacity: 1;
	}	
	
	.more-divider{
		border-top: 1px solid #ccc;
		width: 90%;
		margin: 0 5%;
		display:inline;
		float:left;
	}
		
	}