@charset "UTF-8";
/* CSS Document */

html, body {	scroll-behavior: smooth; height: 100%;  margin: 0; overflow: hidden}

* {box-sizing: border-box; font-family: 'Fira Sans', sans-serif; font-weight: 400; color: #516490; font-size: 14px; line-height: 22px;}

section {width: 100%; height: 100vh; /*height:  calc(100vh - 31px);*/ border-top: 1px solid #375599; overflow-y: auto; }
header {position: fixed !important; top: 0px; right: 0px; margin: 40px 15px; color: #375599;  /*background-color:rgba(255,255,255,0.3);*/  text-align: right; z-index: 1000;}

.header-shell {width: 100%; max-width: 1400px;   position: fixed; top: 0px; left: 50%; transform: translateX(-50%); z-index: 1000; height: 1px; }
.shell {width: 100%; max-width: 900px; padding: 50px 10% 87px 10%; margin: auto; position: relative;}
.shell-no-padding {width: 100%; max-width: 900px; margin: auto; position: relative;}
a {text-decoration: none; color: #7c8eb7; white-space: nowrap;}
p {margin: 0px 0px 20px 0px;}
/*. p, ul, li {font-size: 14px; line-height: 22px;}*/

h1 {font-family: 'Fira Sans Extra Condensed', sans-serif; font-size: 36px; font-weight: 300; margin: 0px 0px 4% 0px;  }
h1 span {font-size: 36px; font-weight: 400;}
h2 {font-family: 'Fira Sans Extra Condensed', sans-serif; font-size: 36px;  font-weight: 500}
h3 {font-family: 'Fira Sans Extra Condensed', sans-serif; font-size: 16px; font-weight: 700; }
h4 {font-family: 'Fira Sans Extra Condensed', sans-serif; font-size: 26px; font-weight: 400; margin-top: 0px;}
h5 {font-family: 'Fira Sans Extra Condensed', sans-serif; font-size: 21px; font-weight: 400; margin-top: 3%;}

/*-----SECTIONS-----*/

#intro {background-image: url("images/bg/intro-bg-4.jpg");  background-color: #d6eef5; background-size: cover; background-position: top center; display: flex; justify-content: center;  align-items: center;}
/* #about {background-image: url("images/bg/bg6.jpg");  background-color: #7c8eb7; background-size: cover; background-position: top center;}  */
#about {background-image: url("images/bg/bg-19.jpg");  background-color: #fff; background-size: cover; background-position: top center;}
/* #portfolio {  background-color: #e6f5ff;background-image: url("images/bg/bg-19.jpg"); background-size: cover; background-position: top center;}*/
#skills {background-image: url("images/bg/bg3.jpg");  background-color: #fff; background-size: cover; background-position: top center;}
#experience {background-image: url("images/bg/bg4.jpg");  background-color: #fff; background-size: cover; background-position: top center;}
#contact {background-image: url("images/bg/bg5.jpg");  background-color: #fff; background-size: cover; background-position: top center; border-top: none; }

@media only screen and (max-width: 550px) {
	h2 {font-size: 27px;}
	h1 {font-size: 21px;}

}
/*-----NAV------*/

.nav {display:block; position: relative; transition: 0.3s;  background-color:rgba(255,255,255,0);   height: 16px; /* border-radius: 9px; */}
/*.nav:hover   { background-color:rgba(244,244,244,0.7); width: 140px;}*/

.intro { padding-right: 15px;}

.ck {font-size: 30px; font-weight: 300;  transition:  0.3s; opacity: 1; position: relative; bottom: 6px; right: -4px;}
.ck:hover {opacity: 0;}

.dot {height: 8px; width: 8px; background-color: #7c8eb7; border-radius: 50%; display:inline-block; box-shadow: 0 0 0 0 rgba(0, 78, 255, 1); position: relative;  margin:0px 20px 4px 8px;	}
.nav:hover .dot {transform: scale(.5);	animation: pulse 1.5s infinite; }


.addText { display:inline-block;  width:0; white-space:nowrap; font-size: 11px; line-height: 13px; letter-spacing: 2.5px; position: absolute; margin-top: 1px;  
	direction:rtl; /* change direction so the text overflow on the left */ color: rgba(255,255,255,0);  transition: .5s; transform: translateX(20px); /* put the value you want here */ pointer-events:none; /* to avoid the hover on the text, remove to see the difference */}

.intro:hover { width: 190px;} 
.intro:hover .ck {opacity: 0; width: 190px;} 
.intro:hover .addText {  color: #7c8eb7; transform: translateX(0);}
.about:hover .addText {  color: #7c8eb7; transform: translateX(0);}
.portfolio:hover .addText {  color: #7c8eb7; transform: translateX(0);}
.skills:hover .addText {  color: #7c8eb7; transform: translateX(0);}
.experience:hover .addText {  color: #7c8eb7; transform: translateX(0);}
.contact:hover .addText {  color: #7c8eb7; transform: translateX(0);}

.mobile {display: none; font-size: 30px; font-weight: 300; padding: 9px 9px 9px 7px ; margin: 0px 15px 15px 0px; border: solid 2px #516490; background-color:rgba(244,251,255,.8);  }

.mobile-nav {background-color:rgba(242,246,255,.6); width: 200px; position: relative;  right: -1000px;  padding: 15px 50px; display: block; transform: skewX(20deg); border-top: solid 1px #516490; }
.mobile-nav:last-of-type {border-bottom: solid 1px #516490; }

.mobile-nav:hover {background-color:rgba(255,255,255,1); }
.mobile-nav p {transform: skewX(-20deg); margin-bottom: 0px; text-shadow: 0 0 10px #FFF;}

@media only screen and (max-width: 550px) {
	header {margin: 40px 0px;}
	header .slide {display: none;}
	header .mobile {display: inline-block;}
}



/*------PORTFOLIO---------*/

#portfolio {overflow-y: auto; scroll-behavior: smooth; background-color: #fff; }

::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}

.shell-fixed {position: fixed; top: 0px; height: 1px; width: 100%; overflow: visible; z-index: 1000; display: none;}
.portfolio-menu {position: absolute !important; top: 80px !important; left: 26px; width: auto; font-size: 11px; }
.portfolio-menu h2 {margin-top: 0px;}
.navport {display:block; position: relative; transition: 0.3s;  background-color:rgba(255,255,255,0);   height: 16px; /* border-radius: 9px; */}
.navport:hover   { background-color:rgba(244,244,244,0.7); width: 140px;}

.addTextPort {display: block; font-size: 11px; line-height: 13px; letter-spacing: 1.5px; margin-top: 2px;  }

.portfolio-menu .dot {margin:5px 0px 4px 0px; display: none;}

.portfolio-inner {position: absolute; top: 0px; bottom: 0px; left: 0px; right: -15px; scroll-behavior: smooth;	overflow: auto;}
.portfolio-image {position: relative; padding-bottom: 30px;
  /*opacity: 0.65; */
  background-attachment: fixed;
  background-position: center 32px;
  background-repeat: no-repeat;
  background-size: clamp(280px, 60%, 600px) auto;
min-height: 100vh;}

.port-1 {background-image: url("images/portfolio/grandcraft.jpg");}
.port-2 {background-image: url("images/portfolio/gallagher.jpg");}
.port-3 {background-image: url("images/portfolio/thorndale.jpg");}
.port-4 {background-image: url("images/portfolio/protection1.jpg");}
.port-5 {background-image: url("images/portfolio/komoniwana.jpg");}
.port-6 {background-image: url("images/portfolio/distance-social.jpg");}
.port-7 {background-image: url("images/portfolio/perfect-servings.jpg");}
.port-8 {background-image: url("images/portfolio/ctl.jpg");}
.port-9 {background-image: url("images/portfolio/adt.jpg");}

.caption { position: absolute; left: 0;	  bottom: 0px; /* was 2px */  width: 100%;  text-align: center; color: #000;	background-color: #dfe0ed;	border-top: 1px solid #375599; background-image: url("images/bg/bg-x5.jpg"); background-size: cover; background-position: top center;  }

.title {width: 40%; display: inline-block;  text-align: center; padding: 40px 8%; vertical-align: top; }
.title a img {width: 90%; margin: 40px auto; max-width: 160px;}
.description {width: 60%; display: inline-block; text-align: left; padding: 40px 8%;}

@media only screen and (max-width: 550px) {
	.portfolio-menu {top: 75px; }
	
	.title a img {width: 90%; margin: 20px auto; max-width: 160px;}
	
	.portfolio-menu .dot {display: inline-block;}
	.addTextPort { display:inline-block;  width:0; white-space:nowrap; font-size: 11px; letter-spacing: 1.5px; position: absolute; direction:ltr; /* change direction so the text overflow on the left */ color: rgba(255,255,255,0);  transition: .5s; transform: translateX(20px); /* put the value you want here */  pointer-events:none; }
	
	.thorndale:hover .addTextPort {  color: #7c8eb7; transform: translateX(20px);  }
	.grandcraft:hover .addTextPort {  color: #7c8eb7; transform: translateX(20px);  }
	.distance-social:hover .addTextPort {  color: #7c8eb7; transform: translateX(20px);  }
	.komoniwana:hover .addTextPort {  color: #7c8eb7; transform: translateX(20px);  }
	.gallager:hover .addTextPort {  color: #7c8eb7; transform: translateX(20px);  }
	.protection1:hover .addTextPort {  color: #7c8eb7; transform: translateX(20px);  }
	.perfect-servings:hover .addTextPort {  color: #7c8eb7; transform: translateX(20px);  }
	.ctl:hover .addTextPort {  color: #7c8eb7; transform: translateX(20px);  }
	.adt:hover .addTextPort {  color: #7c8eb7; transform: translateX(20px);  }
	
	.title, .description  {width: 100%; padding: 20px 5%;}
	
	html, body { overflow:visible; }
	section { height: auto; min-height: 100vh;}
	.portfolio-inner {position: relative;}

}

/*--------CONTACT----------*/

.contact-container {width: 380px; margin: auto; }

/*--------FOOOTER----------*/

footer {position: fixed; bottom: 0px; width: 100%;  text-align: center; background-color: #89a0aa;  font-weight: 700; border-top: 0px solid #375599; /*display: none;*/}
footer .shell {padding: 4px 10%; color: #fff; letter-spacing: 2.5px; font-size: 10px; line-height: 12px; }
footer a {color: #fff; font-size: 10px; }
.footer-email {margin: 0px 30px;}


/*--------ANIMATIONS---------*/

@keyframes pulse {
	0% {	transform: scale(0.95);		box-shadow: 0 0 0 0 rgba(0, 78, 255, 0.5);	}
	70% {	transform: scale(1);	box-shadow: 0 0 0 8px rgba(0, 78, 255, 0);	}
	100% {	transform: scale(0.95);	box-shadow: 0 0 0 0 rgba(0, 78, 255, 0);}
}

.slide {top: 40px; position: relative; display:block; opacity: 0;}

[data-inviewport="slide-in"].is-inViewport .slide1 { 
			animation: slide-up 1s ease-out 150ms  forwards;	
}
[data-inviewport="slide-in"].is-inViewport .slide2 { 
			animation: slide-up 1s ease-out 250ms  forwards;	
}
[data-inviewport="slide-in"].is-inViewport .slide3 { 
			animation: slide-up 1s ease-out 350ms  forwards;	
}
[data-inviewport="slide-in"].is-inViewport .slide4 { 
			animation: slide-up 1s ease-out 450ms  forwards;	
}
[data-inviewport="slide-in"].is-inViewport .slide5 { 
			animation: slide-up 1s ease-out 550ms  forwards;	
}
[data-inviewport="slide-in"].is-inViewport .slide6 { 
			animation: slide-up 1s ease-out 650ms  forwards;	
}
[data-inviewport="slide-in"].is-inViewport .slide7 { 
			animation: slide-up 1s ease-out 750ms  forwards;	
}
@keyframes slide-up {
    0% { transform: translateY(0); opacity: 0; }
    100% { transform: translateY(-40px); opacity: 1; }
}