/* default global attributes */
html {
    scroll-behavior: auto !important;
}

.preloader {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 99;
   background-position: center;
   background-image: url("../imgs/logo-preloader.gif"); ;
   background-size: 55px;
   background-repeat: no-repeat;
   background-position: center;
}



#home{background-color: #0f557d;}

#about{background-color: #0f557d;}

#project-01, #project-02, #project-03, #project-04, #project-05, #project-06, #project-07, #project-08, #project-09, #project-10, #project-11, #project-12{background-color: #0f557d;}

#main{visibility:hidden;}


.page-bkg-fade{
	position: fixed;
	background-color: #0f557d;
	z-index:-2;
	width:100%;
	height:100%;
}

.vertical-line {
  background-color:#ffffff;
  opacity: 0;
  width:1px;
  display: block;
  z-index:-2;
  left:50%;
  position:absolute;
}



.scrollbar{
cursor:pointer;
	opacity: 0;
	
	/* paddings to increase clickable area*/
	padding-right: 20px;
	padding-left:23px;
}

.back-to-top{
	cursor:pointer;
}

.back-to-top h4{
	text-align:center;
	padding-top:15px;
}


.back-to-top-bar{
	padding:0;
	width:3px;
	height:40px;
	position:relative;
	left:1px;
	background-color:#ff475d;
}


.red-line{
	background-color: #ff475d;
	background-clip: content-box;
	width:60px;
	height:3px;
	transition: all 0.3s;
}



/*hover states*/
#thumb-01:hover > div > div >  .module-project-title > .red-line {width:120px;}
#thumb-02:hover > div > div >  .module-project-title > .red-line {width:120px;}
#thumb-03:hover > div > div >  .module-project-title > .red-line {width:120px;}
#thumb-04:hover > div > div >  .module-project-title > .red-line {width:120px;}
#thumb-05:hover > div > div >  .module-project-title > .red-line {width:120px;}
#thumb-06:hover > div > div >  .module-project-title > .red-line {width:120px;}
#thumb-07:hover > div > div >  .module-project-title > .red-line {width:120px;}
#thumb-08:hover > div > div >  .module-project-title > .red-line {width:120px;}
#thumb-09:hover > div > div >  .module-project-title > .red-line {width:120px;}
#thumb-10:hover > div > div >  .module-project-title > .red-line {width:120px;}
#thumb-11:hover > div > div >  .module-project-title > .red-line {width:120px;}
#thumb-12:hover > div > div >  .module-project-title > .red-line {width:120px;}

/*project modules on the home page*/

.module-padding{
	padding-left: 4em;padding-right: 4em;padding-top:2em;padding-bottom:2em;
}


.module-project-title{
	margin-top:30px;
	display: inline-flex;
	white-space: nowrap;
}

.module-project-title > h3{
	margin-right:10px;
	margin-bottom:0px;
  font-weight: 300;
}



/*project modules on the project page*/

.project-section-margin{
	margin-bottom: 2em;
}

#project-title, #project-description{
	opacity:0;
	position:relative;
	top:10px;
}



#project-info{
	margin-top:0.5em;
	opacity:0;
	position:relative;
	top:10px;
}

.project-tag{
	font-family: 'Helvetica';
	font-weight: bolder;
	font-size: 9px;
	letter-spacing:1px;
	line-height:1.5em;
	color: #fff;
	opacity: 85%;
	padding-bottom: 1em;
	padding-top: 1em;
	border-top: 1px solid rgba(255, 255, 255, .25);
	margin-bottom: 0px;
}

#project-subtitle-01, #project-subtitle-02, #project-subtitle-03{
	opacity:0;
}


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


.img-corner-tr{
	border-radius: 0px 50px 0px 0px;
}

.img-corner-tl{
	border-radius: 50px 0px 0px 0px;
}

.img-corner-br{
	border-radius: 0px 0px 50px 0px;
}

.img-corner-bl{
	border-radius: 0px 0px 0px 50px;
}



h1{
	font-family: 'Unbounded';
	font-weight: 300;
	color: #fff;
	line-height:1.3em;
	margin-bottom:0.3em;

}


h2{
	font-family: 'Unbounded';
	font-weight: 300;
	color: #fff;
	line-height:1.5em;
	font-kerning: -1em;
}


h3{
	font-family: 'Unbounded';
	font-weight: 300;
	font-size: 16px;
	color: #fff;
	line-height:1.5em;
	/*letter-spacing: 0.01em;*/
	opacity: 1;
}


h4{
	font-family: 'Unbounded';
	font-weight: 300;
	font-size: 13px;
	color: #fff;
	opacity: 100%;
	margin:0;
}


p{
	font-family: 'Comfortaa', cursive;
	font-weight: 300;
	font-size: 13px;
	color: #fff;
	opacity: 75%;
	line-height:2em;
}


a:link, a:visited,a:hover, a:active{
	font-family: 'Unbounded';
	font-weight: 300;
	font-size: 13px;
	color: #fff;
	opacity: 1;
	line-height:2em;
	text-decoration: none;
	padding:0px;
}

#about-link
{
	font-family: 'Unbounded';
	font-weight: 300;
	font-size: 13px;
	color: #fff;
	opacity: 1;
	line-height:2em;
	text-decoration: none;
	padding:0px;
	float:left;
	margin-right:20px;
	cursor:pointer;
}


.link-icon{
	width:15px;
	height:auto;
	opacity: 1;
	margin-right:0.5em;
	padding-bottom:2px;
	margin-right:10px;
}


.social-icon{
	width:35px;
	height:auto;
	opacity: 1;
}


.close-icon{
	width:15px;
	height:auto;
	opacity: 1;
}



.cta-url{
	display:inline-block;
	width:120px;
	position:relative;
	/*margin-left:100%;
	transform: translatex(-100%);*/
}

.cta-button{
	height:50px;
	display:inline-block;;
	padding-left: 50px;
	padding-right: 50px;
	padding-top:16px;
	background-color: none;
	border: solid 2px #ff475d;
	border-radius: 25px 25px 25px 25px;
	text-align: center;
	position:absolute;
	/*below code center an inline-block element*/
	left: 50%;
	transform: translatex(-50%);
	overflow: hidden;
}

.cta-wipe{
	display:inline-block;;
	background-color: #ff475d;;
	position:absolute;
	width:100%;
	height:50px;
	top:-1px;
	left:-100%;
	border: solid 1px #ed1e55;
	border-radius: 25px 25px 25px 25px;
	z-index:-1;
}


.toggle{
	display: inline-block;
	margin-bottom: 40px;
	cursor: pointer;
}

.toggle-list{
	height:30px;
	/*background-color: green;*/
	background-clip: content-box;
	display: inline-flex;
	flex-wrap: nowrap;
	flex-direction: row;
}

.toggle-line{
	background-color: #0b3d5a;
	width:100%;
	height:3px;
}

.toggle-redline{
	background-color: #ff475d;
	width:50%;
	height:3px;
	position:relative;
	
}

.toggle-list h4{
	padding:8px 15px;
}


#tophead{
	position: relative;
	opacity:0;
	padding: 4em;
	padding-top: 3em;
	z-index: 0;
}


#tophead > div { /*remove unnecessary paddings around links*/
	padding: 0em;
}


#logo{
	cursor:pointer;
	width:55px;
}


#header{
	/*margin-top:2em;
	margin-bottom:2em;*/
}

#headline {
	position: relative;
	opacity:0;
	text-align: center;
	padding-bottom: 0em;
}


#intro {
	position: relative;
	opacity:0;
	text-align:center;
}


#about-intro{
	margin-top: 50px;
	margin-bottom:100px;
}

#about-pic, #about-description-1, #about-description-2, #about-resume{
	opacity:0;
	position:relative;
	top:10px;
}


#project-header {
	position:relative;
}

#project-header > .module-padding{
	padding-top: 25px;
}


#thumb-01, #thumb-02, #thumb-03, #thumb-04, #thumb-05, #thumb-06, #thumb-07, #thumb-08, #thumb-09, #thumb-10, #thumb-11, #thumb-12{
	position: relative;
	opacity: 0;
	top:50px;
}

.thumnb-clickable
{	cursor: pointer;}


/*#thumb-12{margin-bottom:0px;}*/


#brands{
	margin-top:150px;
	margin-bottom: 50px;
}

#brands-header{
	opacity:0;
	top:10px;
	position:relative;
}

#brands-list-01, #brands-list-02{
  height:400px;
}

#brands-list-01 > div > p, #brands-list-02 > div > p{
  padding-bottom:40px;
}

#footer{
	padding-top:50px;
	padding-bottom:100px;
}

#footer > .col-12{
	margin-bottom:20px;
}

#footer-header{
	text-align: center;
	opacity: 0;
	top:10px;
	position:relative;
}


#footer-socials{
	position:absolute;
	disply: block;
	left: 50%;
	transform: translatex(-50%);
	padding-top:30px;
}


#footer-socials > p{
margin:0;
margin-right:10px;
margin-top:6px;
float:left;
}


/*dropdown for mobile*/

#dropdown{
	width:100%;
	height:400px;
	background-color:#0f557d;
	position:fixed;
	top:-400px;
	z-index:6;
}

#dropdown > div{
	padding:0;
	display:flex;
	border-bottom: 1px solid rgba(255, 255, 255, .25);
	margin-left:30px;
	margin-right:30px;
	padding-bottom:15px;
	padding-top:15px;
}



#dropdown > div > a{
font-size: 16px;
}


.overlay{
	width:100%;
	height:100%;
	background-color: #000000;
	opacity:0;
	position: fixed;
	z-index:4;
	top:0;
	left:0;
	display:none;
}




/*shapes*/

.wipe{
	position: absolute;
	z-index:4;
	background-color: #0f557d;
	opacity:1;
}

.wipe-home{
	border-radius: 0px 50px 0px 0px;
}


.jh-shape-01 {
	width:210px;
	height:100%;
	position: absolute;
	z-index: -1;
	background-image: url("../imgs/jh-shape-01.svg"); 
	background-repeat: no-repeat; 
	background-size: contain;
	opacity:0;
}

.jh-shape-02 {
	width:165px;
	height:100%;
	position: absolute;
	z-index: -1;
	background-image: url("../imgs/jh-shape-02.svg"); 
	background-repeat: no-repeat; 
	background-size: contain;
	opacity:0;
}

.jh-shape-03 {
	width:165px;
	height:100%;
	position: absolute;
	z-index: -1;
	background-image: url("../imgs/jh-shape-03.svg"); 
	background-repeat: no-repeat; 
	background-size: contain;
	opacity:0;
}

#home > #main > .jh-shape-01{right:-5%;top:25%;}
#home > #main > .jh-shape-02{right:5%;top:190%;}
#home > #main > .jh-shape-03{left:15%;top:70%;}


.swipe-r1{
	width:100vw;
	height:100vh;
	background-color:#0f557d;
	display:block;
	position:fixed;
	z-index:4;
	left:100vw;
}


.swipe-r2{
	width:100vw;
	height:100vh;
	background-color:#0f557d;
	display:block;
	position:fixed;
	z-index:4;
	left:100vw;
}


.swipe-l1{
	width:100vw;
	height:100vh;
	background-color:#0f557d;
	display:block;
	position:fixed;
	z-index:4;
	right:100vw;
}


.swipe-l2{
	width:100vw;
	height:100vh;
	background-color:#0f557d;
	display:block;
	position:fixed;
	z-index:4;
	right:100vw;
}



/*background gradient animation elements*/

.grad-b01 {
	position:fixed;
	width:3000px;
	height:3000px;
	z-index:-6;
  background-image: radial-gradient(rgba(0,174,148,1),rgba(0,174,148,0)50%);
    left:-70%;
    top:-30%;
  /*animation: grad-animate-01 5s ease infinite;*/
}


.grad-r01 {
	position:fixed;
	width:3000px;
	height:3000px;
	z-index:-6;
  background-image: radial-gradient(rgba(247,26,28,1),rgba(247,26,28,0) 50%);
  left:-20%;
  top:-30%;
}


/*
@keyframes grad-animate-01 {
	0% {left:10%;top:-5%;opacity:1;scale:2;}
	50% {left:5%;top:10%;opacity:1;scale:1;}
	100% {left:10%;top:-5%;opacity:1;scale:2;}
}

@keyframes grad-animate-02 {
	0% {left:35%;top:10%;;opacity:1;scale:1.5;}
	35% {left:2å0%;top:-5%;;opacity:1;}
	75% {left:30%;top:-10%;;opacity:1;}
	100% {left:35%;top:10%;;opacity:1;scale:1.5;}
}

@keyframes grad-animate-03 {
	0% {right:10%;top:-30%;opacity:1;scale:1;}
	50% {right:5%;top:-20%;opacity:1;scale:2;}
	100% {right:10%;top:-30%;opacity:1;scale:1;}
}

@keyframes grad-animate-04 {
	0% {left:0%;top:40%;;opacity:1;scale:1.5;}
	35% {left:-20%;top:50%;;opacity:1;}
	75% {left:-10%;top:30%;;opacity:1;}
	100% {left:0%;top:40%;;opacity:1;scale:1.5;}
}

*/


/*xx-large*/
@media (min-width: 1400px){
	h1{font-size: 70px;}
	h2{font-size: 40px;}
}

/* xlarge to xx-large*/
@media (min-width: 1200px) and (max-width: 1400px){
	h1{font-size: 70px;}
	.project-padding{padding-left:4em;padding-right:4em;}
}

/* large to xlarge */
@media (min-width: 992px) and (max-width: 1200px){
	h1{font-size: 60px;}
	#header{margin-top:0em;margin-bottom:0em;}
	.project-padding{padding-left:4em;padding-right:4em;}
}

/* mid to large */
@media (min-width: 768px) and (max-width: 992px){
	h1{font-size:60px;}
	.module-padding{padding:2em;padding-top:0em;}
	#logo{float: center;}
	#tophead{padding:2em;}
	#header{margin-top:4em;margin-bottom:4em;}
	#intro {margin-top:0px;}
	.project-padding{padding-left:2em;padding-right:2em;}
	#project-info{margin-top:2em;margin-bottom:2em;}
	#project-header{margin-top:2em;margin-bottom:2em;}
	#footer{margin-top:50px;}
}


/* small to mid */
@media (min-width: 576px) and (max-width: 768px){
	h1{font-size:50px;}
  h2{font-size:20px;}
  p{font-size: 12px;}
	.module-padding{padding:2em;padding-top:0em;}
	#logo{float: center;}
	#tophead{padding:2em;}
	#header{margin-top:4em;margin-bottom:4em;}
	#intro {margin-top:0px;}
	.project-padding{padding-left:2em;padding-right:2em;}
	#project-info{margin-top:2em;margin-bottom:2em;}
	#project-header{margin-top:2em;margin-bottom:2em;}
	#footer{margin-top:50px;}
}


/* xsmall to small */
@media (min-width: 0px) and (max-width: 576px){
	h1{font-size: 40px;}
	h2{font-size: 20px;}
	p{font-size: 12px;}
	.module-padding{padding: 2em;padding-top:0em;}
	#logo{float: left;}
	#tophead{padding:2em;}
	#header{margin-top:4em;margin-bottom:4em;}
	#intro {margin-top: 0px;}
	.project-padding{padding-left:2em;padding-right:2em;}
	.cta-url{margin-top:2em;}
	.cta-button{padding-left: 30px;padding-right: 30px}
	#project-info{margin-top:2em;margin-bottom:0;}
	#project-header{margin-top:2em;margin-bottom:2em;}
	#project-title{padding-bottom: 0;}
	#brands{margin-top:0;}
	#brands > .module-padding{padding-bottom: 0;}
	#footer{margin-top:50px;}
	.grad-r01{width:1500px;height:1500px;top:10%;left:-100%;}
	.grad-b01{width:1500px;height:1500px;top:10%;left:-200%;}

	#project-subtitle-01{margin-bottom: -2em;}
	#project-subtitle-02{margin-bottom: -2em;}
	#project-subtitle-03{margin-bottom: -2em;}
	#project-subtitle-04{margin-bottom: -2em;}
	#project-subtitle-05{margin-bottom: -2em;}
	#project-subtitle-06{margin-bottom: -2em;}
	#project-subtitle-07{margin-bottom: -2em;}

	.sub-link{margin-bottom: 2em;}

	}


}