/*common tags*/

html,
body {
	width: 100%;
}

body {
	font-size: 10pt;
	font-family: 'Exo', sans-serif;
	font-weight: normal;
	background: #f0f0f0;
}

body:before {
	content: "";
	display: block;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	xz-index: -10;
	xbackground: url('img/home.jpg') #ccc no-repeat center top;
	background-size: cover;
}

img {
	max-width: 100%
}

h1,h2,h4,th {
	xtext-transform: uppercase;
	margin: 0;
	padding: 0;
}

h1,h2,h3,h4,th {
	font-style: italic;
}

h1 {
	font-size: 45pt;
}

h2 {
	font-size: 30pt;
}

h3.heading {
	font-size: 20pt
}

h2.heading {
	font-weight: 800
}

a {
	text-decoration: none;
	color: #0006f3;
	font-weight: bold
}

a:hover {
	background: #eee;
}

div,h1,h2,h3,h4,h5,img,p,a,span {
	transition: all 0.5s ease-out;
	line-height: 1.5em;
}

video {
	cursor: pointer;
}


/*common custom classes*/

.text-center {
	text-align: center;
}

.bold {font-weight: 600 !important}

.uppercase {text-transform: uppercase}

.nowrapping {
	white-space: nowrap;
}

.no-margin {
	margin-left: 0 !important; margin-right: 0 !important;
}

.align-top {vertical-align: top !important}

.centered, .section {
	text-align: center;
}

.section {
	padding: 18pt
}

.smaller {
	font-size: 0.8em
}

.fp-tooltip {
	background: rgba(20, 20, 20, .5);
	padding: .2em .5em;
	border-radius: .3em;
	transition: all 0.1s ease-out;
}

.visibleoverflow>.fp-slides {
	xoverflow: visible;
}
.visibleoverflow>.fp-tableCell, .visibleoverflow .fp-tableCell {
	padding-top: 2em;
	xmargin-top: -2em;
     padding-bottom: 3em;
}
.visibleoverflow {
	padding-top:0 !important;
	padding-bottom:0 !important;
}

.fp-controlArrow.fp-next {
	margin-right: 3.5em
}

.fp-controlArrow.fp-next {
	border-color: transparent transparent transparent rgba(0, 0, 0, 0.3)
}

.fp-controlArrow.fp-prev {
	border-color: transparent rgba(0, 0, 0, 0.3) transparent transparent
}

.fp-controlArrow.fp-next:before,
.fp-controlArrow.fp-prev:before {
	content: " ";
	position: absolute;
	border-style: solid;
}

.fp-controlArrow.fp-next:before {
	right: 1px;
	top: -35px;
	border-width: 35px 0 35px 32px;
	border-color: transparent transparent transparent #fff;
}

.fp-controlArrow.fp-prev:before {
	left: 1px;
	top: -35px;
	border-width: 35px 32px 35px 0;
	border-color: transparent #fff transparent transparent;
}
#fp-nav a:hover {
	background: transparent;
}

.heading {
	font-weight: 500
}

.inline {
	display: inline-block;
	width: 46%;
	min-width: 300px;
	vertical-align: middle;
	/*margin-left: 0.7%;*/
	margin-left: 1.5%;
	margin-right: 1.5%;
}

.left {
	text-align: left
}

.right {
	text-align: right
}

.noshadow {box-shadow:none !important;}

.btn {
	padding: .35em 1.3em;
	border-radius: 3px;
	font-size: 16pt;
	font-style: italic;
	cursor: pointer;
	/*background-color: rgba(255,255,255,0.2);*/
	background-color: rgba(155, 155, 155, 0.35);
	color: #000;
/*	white-space: nowrap;*/
	display: inline-block;
}

.btn:hover {
	background: #555;
	color: #fff
}

.btn-border {
	border: solid 2px;
}

.btn-dark {
	background-color: #000;
	color: #fff;
}

.symbol, .symbol img {
	font-size: 50pt;
	line-height: 1.35em;
	width: 1.5em;
	height: 1.5em;
	margin: auto;
	border-radius: 50%;
	background: #000;
	color: #ddd;
}

.chevron::after {
	content: ' ';
	width: 50pt;
	height: 50pt;
	background: url('img/chevrondown.svg');
	background-size: contain;
	display: inline-block;
	xposition: sticky;
	xbottom: 10px;
	cursor: pointer;
}


#lookmore {
	height:37pt;
}
#lookmore .chevron {
	animation-name: look-more;
	animation-duration: 0.8s;
	animation-timing-function: ease-in;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	position: absolute;
	width: 100%;
	height: 45pt;
	bottom:0;
	left:0;
}
@keyframes look-more {
	0% {
		transform: translateY(0pt);
	}
	100% {
		transform: translateY(10pt);
	}
}

.righttri:after {
	content: "\25b6";
	font-style: normal;
	font-size: 1.5em;
	vertical-align: middle;
}

.halfheight .fp-slide,
.halfheight .fp-tableCell {
	height: 60vh !important;
}

.phone {
	font-size: 7.5vh;
	xmax-height: 75vh;
	max-width: 100%;
	border-left: solid #111 .2em;
	border-right: solid #111 .2em;
	xvertical-align: bottom;
	border-top: solid #111 .9em;
	border-bottom: solid #111 .9em;
	border-radius: 0.8em;
	box-shadow: grey 0.1em .1em 1em;
	box-sizing: border-box;
	margin: 0.5em 0;
}

.shadow {
	box-shadow: grey 0.1em .1em 1em;
	margin: .5em;
	background-color: rgba(180,180,180,0.5);
}

.lazy {
	opacity: 0;
	xmargin-bottom: 100px;
	transform: translateY(90px) scale(0.9, 0.9);
	width: 300px;
	height: 80vmin;
}

img {
	/*for lazy load anitmation*/
	transition: all 0.6s ease;
	xtransition-delay: 0.1s;
	
}

.img-sizefit {
	max-height: 85vh;
	max-width: 100%;
}

.role {
	xfont-style: italic;
	font-weight: bold;
	opacity: 0.8;
	padding-bottom: 11pt;
}

.subtitle {
	font-style: normal;
}

.highlight-text span {
	background-color: aliceblue;
	padding: 0.2em;
}

.fullheight-centered {
	display: table-cell;
	vertical-align: middle;
}

.section {
	background: #f0f0f0;
}

.section.active {
	background-color: white;
}
.splash-section {
	background-size: cover;
	color: #fff;
	text-shadow: 0 0 1em gray;	
}
.half-inline {
	display: inline-block;
	width: 47%;
}
.half-inline:first-child {
	margin-right: 4.6%;
}
.half-inline .phone {
	font-size:3.5vh;
}
.inline-third {
	width:30%;
}
.top {
	vertical-align: top;
}
a.linkless {
	color: inherit;
	font-weight: inherit;
}
.morehidden {
	opacity: 0;
	transform: translateY(150px);
	height: 0;
	overflow: hidden;
}


/*specific styles*/

#bq {
	color: #fff;
	xtext-shadow: #222 0pt 0pt 10pt;
	xtext-shadow: #222 0pt 0pt 16pt;
	font-weight: 500;
	text-align: center;
	xmargin-bottom: 100pt;
	xposition: absolute;
	xtop: 9%;
	xwidth: 100%;
	padding: 7vh;
	position: sticky;
	bottom: 98vh;
	/* animate homesection */
	transform: translateY(-5vh);
}
#bq.loaded {
	/* animate homesection */
	transform: none;
	opacity: 1;
}
#bq, #infotext h3 {
	/* animate homesection */
	transition: all .69s ease-out;
	opacity: 0;
}
#bq span {
	display: inline-block;
	xborder: 5pt white solid;
	xbox-shadow: #555 0pt 0pt 30pt;
	box-shadow: rgba(0,0,0,0.5) 0pt 10pt 30pt;
	padding-top: 43pt;
	padding-bottom: 27pt;
	padding-left: 33pt;
	padding-right: 37pt;
	height: 125pt;
	width: 125pt;
	text-align: center;
	border-radius: 50%;
	line-height: 55pt;
	background: #222;
}

#homesection .fp-tableCell {
	text-align: center;
	padding: 0;
	xvertical-align: bottom;
	
}


#homesection {
	padding: 16pt !important;
	xbackground: linear-gradient(#D8777B,#96D3EE);
	xbackground: linear-gradient(#3a5bff,#fb7b4b);
	xbackground: linear-gradient(#fb7b4b,#0a1a6d,#323);
	background: linear-gradient(#3b7bfb,#111);
}

#infotext h3 {
	margin-bottom: 5vh;
	margin-left: 7%;
	margin-right: 7%;
	font-style: normal;
	font-weight: normal;
	color:#fff;
}
#infotext h3 a {color: #eee}
#infotext h3 a:hover {color: #11b}
#infotext h3 {
	/* animate homesection */
	transform: translateY(10vh);
}
#infotext h3.loaded {
	/* animate homesection */
	transform: none;
	opacity: 1;		
}

.clebcabout {
	background: #059;
	color: white;
	margin: 0;
	padding: 1em;
	position: sticky;
	top: 0px;
	z-index: 5;
}

x.section {
	z-index: 6
}

x.cle-z {
	z-index: 0
}

.clebcabout h3 {
	font-size: 1.6em;
	margin-bottom: 0.3em;
	margin-top: 0.3em;
}

#contactsection p {
	font-size: 15pt
}

#aboutme {
	background-color: #000;
	color: #fff;
	xpadding: 1em 10%;
}

#contactme .symbol {
	margin-bottom: -0.3em;
}

#contactme .btn {
	margin-bottom: 16pt;
	display: inline-table;
	width: 35vw;
	max-width: 230pt;
	min-width: 180pt;
}

#xaboutsection .fp-tableCell {
	padding: 0;
	vertical-align: bottom;
}

#contact {
	background-color: gray;
}

#contact .btn {
	color: #000
}

#morelinks a {
	font-size: 1.2em;
}

#portheader {
	text-align: center;
	vertical-align: middle;
	xbackground: rgba(211, 211, 211, 0.8);
	background: linear-gradient(to right, rgba(220, 187, 188, 0.8),rgba(150, 211, 238, 0.8));
	overflow: hidden;

	position: fixed;
	position: sticky;
	top: 0;
	z-index: 90;
	width: 100%;
}

#portheader a:hover {
	padding: 2em
}

#headcircle {
	height: 30pt;
	width: 30pt;
	background: #000;
	display: inline-block;
	border-radius: 50%;
	vertical-align: bottom;
	margin: 5pt;
	xmargin-left: 15pt;
	xcolor: white;
	xcolor: transparent;
	text-align: center;
}

.headtitle {
	color: #111;
	display: inline-block;
	line-height: 30pt;
	font-size: 23pt;
	margin: 5pt;
	margin-left: 1pt;
	font-weight: 300;
}


#projects img {
	max-width: 80%;
	max-height: 39vh;
	font-size: 3.0vh;
	box-shadow: grey 0.1em .1em 1em;
	margin: 0;
}

#projects.active {
	background: #f5f5f5
}

#projects.active .inline {
	background: #fff;
	box-shadow: lightgray 0px 2px 15px;
}

#projects .inline {
	xmin-height: calc(39vh + 222pt);
	padding: 18pt;
	box-sizing: border-box;
	border-radius: 3px;
	margin-top: 8pt;
	margin-bottom: 8pt;
}

#projects h3 {
	font-weight: 600;
	margin-bottom: .5em;
}

#projects .role { font-weight: normal}

#cleIA-splash {
	background-image: url(../port2/img/cleIAsplash.jpg);
	background-size: cover;
	text-shadow: 0 0 1em #ddd;
}
#clestrat-splash {
	background-image: url(../port2/img/clestratSplash.jpg);
	background-size: cover;
	text-shadow: 0 0 1em rgba(190,190,190,0.5);
}

#habgo-splash {
	color: #fff;
	background-color: #2a333c;
	xpadding-bottom: 0 !important;
	background-image: url(../port2/img/Go-devices.jpg);
	background-size: contain;
background-size: calc(80vw + 20vh) auto;
	background-repeat: no-repeat;
	background-position: bottom center;
}

#habgo-splash .fp-tableCell {

}

#habgo-splash-offset {
	margin-bottom: calc((80vw + 20vh)*360/1033 - 80pt);
}

#habgo-splash .chevron {
	xmargin-bottom: 3em;
}
#habgo-splash .chevron:after,  .invert-chevron:after, #homesection .chevron:after {
	filter: invert(100%) drop-shadow(0px 1px 3px #000);
}

#jumptotop {
	position: fixed;
	bottom: 0px;
	right: 2em;
	z-index: 100;
	background-color: rgba(30, 30, 30, 0.6);
	color: rgb(255, 255, 255);
	padding: 0.5em 0.8em;
	border-radius: 0.5em 0.5em 0px 0px;
	display: none;
	cursor: pointer;
	font-style: italic;
	font-size: 11pt;
}

@media (min-width:721px) {

	.larger-body-txt {
		font-size: 1.3em;
	}
	#projects .inline {
		min-height: calc(39vh + 222pt);
	}		
}

@media (max-width:720px) {
	#xaboutsection .heading {
		margin-top: 0
	}
	.about-p {
		padding-bottom: 150pt
	}
	.fp-controlArrow.fp-next {
		margin-right: 0
	}
	.fp-controlArrow.fp-prev {
		margin-left: 0
	}
	.inline {
		min-width: 90%;
		xtext-align: center
	}
	.mobile-centered {
		text-align: center
	}
}

@media (max-width:500px) {
	#xinfotext {
		padding-right: 5em
	}
	.lowersubsection {
		padding-bottom: 15pt;
	}
	#infotext {
		padding-top: 1em;
	}
	.fp-controlArrow.fp-next {
		margin-right: -12px
	}
	.fp-controlArrow.fp-prev {
		margin-left: -12px
	}
	.btn {
		padding: .35em;
	}
	#bq {
		padding: 5pt;
	}
}

@media (max-width:378px) {
	.half-inline:first-child {
		margin-right: auto;
	}
	.half-inline{
		width: 60%;
	}
}