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

.logo-mask{
	position:                relative;
	left:      				 0;
	top: 					 0;
	bottom:                  0;
	height: 				 500px;
	margin: 				auto;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style:     preserve-3d;
	transform-style:         preserve-3d;
	-webkit-transform:       translateY(50%);
	-ms-transform:           translateY(50%);
	transform:               translateY(50%);
	opacity:                 0.6;
	z-index:                 -1;
}

.logo-mask svg {
    width: 				100%;
    -webkit-transform:  scale(1.1);
	-moz-transform:  	scale(1.1);
	-ms-transform:      scale(1.1);
    transform: 			scale(1.1);
    }
@property --rotate {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}

:root {
  --card-height: 65vh;
  --card-width: calc(var(--card-height) / 1.5);
}
.logo-mask::after{
	position: absolute;
	content: " ";
	top: 0; 
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	margin: 0 auto;
	transform: scale(2.5);
	filter: blur(calc(var(--card-height) / 6));
	background-image: linear-gradient(var(--rotate), #af93c5, #ed2dd4 43%, #5647a4);
	opacity: 1;
	transition: opacity 0.5s;
	animation: spin 2.5s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    --rotate: 0deg;
  }
  100% {
    --rotate: 360deg;
  }
}
@keyframes spin {
  0% {
    --rotate: 0deg;
  }
  100% {
    --rotate: 360deg;
  }
}




@media all and (min-width: 1024px){
	.logo-mask svg {
			width: 				100%;
			-webkit-transform:  scale(2);
			-moz-transform:  	scale(2);
			-ms-transform:      scale(2);
			transform: 			scale(2);
    }
}

#q-logo { 
 	stroke: 						#fff;
	stroke-width: 				1;
	stroke-opacity:             0.5;
	stroke-dashArray: 			1500;
    stroke-dashoffset: 			1500;
	animation-timing-function:  ease-in-out;
    animation-fill-mode:        forwards;
    animation-iteration-count:        1;
	animation-name: 				DrawLine, FadeStroke, FillIn;
    animation-duration: 			2s, 1s, 1s;
    animation-delay: 			0, 2s, 2s;
	-webkit-animation-name:     DrawLine, FadeStroke, FillIn;
    -webkit-animation-duration: 2s, 1s, 1s;
    -webkit-animation-delay:    0,  2s, 2s;
	-moz-animation-name:        DrawLine, FadeStroke, FillIn;
    -moz-animation-duration:    2s, 1s, 1s;
    -moz-animation-delay:       0, 2s, 2s;
	-ms-animation-name:         DrawLine, FadeStroke, FillIn;
    -ms-animation-duration:        2s, 1s, 1s;
    -ms-animation-delay:       0, 2s, 2s;
}
/******Load********/
.loader {
	position: absolute;
	padding: 14% 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	background-color: #5647a4;
	pointer-events: none;
    animation: slide 4s linear forwards;
	}
.loader #q-logo { 
 	stroke: 						#fff;
	stroke-width: 				1;
	stroke-opacity:             0.5;
	stroke-dashArray: 			1500;
    stroke-dashoffset: 			1500;
	animation-timing-function:  ease-in-out;
    animation-fill-mode:        forwards;
    animation-iteration-count:        1;
	animation-name: 				DrawLine, FadeStroke, FillIn;
    animation-duration: 			4s, 3s, 4s;
    animation-delay: 			0, 2s, 0;
	-webkit-animation-name:     DrawLine, FadeStroke, FillIn;
    -webkit-animation-duration: 4s, 3s, 4s;
    -webkit-animation-delay:    0, 2s, 0;
	-moz-animation-name:        DrawLine, FadeStroke, FillIn;
    -moz-animation-duration:     4s, 3s, 4s;
    -moz-animation-delay:      0, 2s, 0;
	-ms-animation-name:         DrawLine, FadeStroke, FillIn;
    -ms-animation-duration:   4s, 3s, 4s;
    -ms-animation-delay:       0, 2s, 0;
}
@keyframes slide {
    0% { opacity: 1; }
	 50% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes DrawLine {
  to { stroke-dashoffset: 0; }
}

@keyframes FadeStroke {
  to { stroke-opacity: 0; }
}

@keyframes FillIn {
  from { fill-opacity: 0; }
  to { fill-opacity: 1; }
}
@-webkit-keyframes DrawLine {
  to { stroke-dashoffset: 0; }
}

@-webkit-keyframes FadeStroke {
  to { stroke-opacity: 0; }
}

@-webkit-keyframes FillIn {
  from { fill-opacity: 0; }
  to { fill-opacity: 1; }
}
@-moz-keyframes DrawLine {
  to { stroke-dashOffset: 0; }
}

@-moz-keyframes FadeStroke {
  to { stroke-opacity: 0; }
}

@-moz-keyframes FillIn {
  from { fill-opacity: 0; }
  to { fill-opacity: 1; }
}
@-ms-keyframes DrawLine {
  to { stroke-dashoffset: 0; }
}

@-ms-keyframes FadeStroke {
  to { stroke-opacity: 0; }
}

@-ms-keyframes FillIn {
  from { fill-opacity: 0; }
  to { fill-opacity: 1; }
}

/*** Hearder ***/
.jumbotron h1 {
	font-size: 			30px;
	padding-bottom:		30px;
	font-weight: 		600;
	}
.jumbotron-heading {
	height: 150px;
	}
.h-joanet-text-intro {
	position: absolute;
	height: 400px;
	width: 280px;
	top: 0;
	bottom: 0;
	margin: auto;
	}
.jumbotron p {
	font-size:     13px;
	margin-bottom: 5px;
	}
.h-joanet-intro {
	margin-left: -15px;
	padding-left: 0px;
	}
	
/*** Portfolio entry & exit animated ***/
#portAnim1 img,
#portAnim2 img,
#portAnim3 img,
#portAnim4 img,
#portAnim5 img,
#portAnim6 img,
#portAnim7 img,
#portAnim8 img,
#portAnim9 img  {
	-webkit-transition: all 2s ease-in-out;
	-moz-transition: all 2s ease-in-out;
	-o-transition: all 2s ease-in-out;
  	transition: all 2s ease-in-out;
}
.portImgUKDS {
	position: 			absolute;
	top:					5vw;
	right:				0;
	-webkit-transform:  	translate3d(1500px, 0, 0);
	-ms-transform:  	    translate3d(1500px, 0, 0);
  	transform:  			translate3d(1500px, 0, 0);
	opacity:				0;
	width: 				100%;
	margin-right:		0;
	z-index:				0;
}
.portImgUKDSTop {
	position: 			absolute;
	top:				5vw;
	right:				0;
	opacity:			0;
	width: 				100%;
	margin-right:		0;
	z-index:				1;
	-webkit-transform:  	translate3d(100px, 0, 0);
	-ms-transform:  	    translate3d(100px, 0, 0);
	transform:  			translate3d(100px, 0, 0);
	opacity:				0;
}
.portImgQD {
	position: 			absolute;
	top:					5vw;
	right:				0;
	-webkit-transform:  	translate3d(1500px, 0, 0);
	-moz-transform:  	translate3d(1500px, 0, 0);
	-ms-transform:  	    translate3d(1500px, 0, 0);
  	transform:  			translate3d(1500px, 0, 0);
	opacity:				0;
	width: 				100%;
	margin-right:		0;
	z-index:				-3;
}
.portImgQDTop {
	position: 			absolute;
	top:					5vw;
	right:				0;
	opacity:				0;
	width: 				100%;
	margin-right:		0;
	z-index:				-2;
	-webkit-transform:  	translate3d(100px, 0, 0);
	-moz-transform:  	    translate3d(100px, 0, 0);
	-ms-transform:  	    translate3d(100px, 0, 0);
	transform:  			translate3d(100px, 0, 0);
	opacity:				0;
}
.portImgQDBottom {
	position: 			absolute;
	top:					5vw;
	right:				0;
	opacity:				0;
	width: 				100%;
	margin-right:		0;
	z-index:				-1;
	-webkit-transform:  	translate3d(0, -50px, 0);
	-moz-transform:  	translate3d(0, -50px, 0);
	-ms-transform:  	    translate3d(0, -50px, 0);
	transform:  			translate3d(0, -50px, 0);
	opacity:				0;
}
.portImgQDLeft {
	position: 			absolute;
	top:					5vw;
	right:				0;
	opacity:				0;
	width: 				100%;
	margin-right:		0;
	z-index:				-4;
	-webkit-transform:  	translate3d(100px, -50px, -50px);
	-moz-transform:  		translate3d(100px, -50px, -50px);
	-ms-transform:  	    translate3d(100px, -50px, -50px);
	transform:  			translate3d(100px, -50px, -50px);
	opacity:				0;
}
.portImgQDRight{
	position: 			absolute;
	top:					5vw;
	right:				0;
	opacity:				0;
	width: 				100%;
	margin-right:		0;
	z-index:				-4;
	-webkit-transform:  	translate3d(-150px, 50px, -50px);
	-moz-transform:  		translate3d(-150px, 50px, -50px);
	-ms-transform:  	    translate3d(-150px, 50px, -50px);
	transform:  			translate3d(-150px, 50px, -50px);
	opacity:				0;
}
.portImgTop  {
	position: 			absolute;
	top:					0;
	right:				-10vw;
	-webkit-transform:  	translate3d(1500px, 0, 0);
	-moz-transform:  		translate3d(1500px, 0, 0);
	-ms-transform:  	    translate3d(1500px, 0, 0);
  	transform:  			translate3d(1500px, 0, 0);
	opacity:				0;
	width: 				100%;
}

.portImgMid  {
	position: 			absolute;
	top:                30vw;
	-webkit-transform:  	translate3d(1500px, 0, 0);
	-moz-transform:  		translate3d(1500px, 0, 0);
	-ms-transform:  	    translate3d(1500px, 0, 0);
  	transform:  			translate3d(1500px, 0, 0);
	opacity:				0;
	width: 				90%;
	margin: 				auto;
}
.portImg3D {
	position: 			absolute;
	top:                20vw;
	-webkit-transform:  	rotate3d(2, 2, -3, 45deg) translate3d(0, 0, 0);
	-moz-transform:  		rotate3d(2, 2, -3, 45deg) translate3d(0, 0, 0);
	-ms-transform:  	    rotate3d(2, 2, -3, 45deg) translate3d(0, 0, 0);
  	transform:  			rotate3d(2, 2, -3, 45deg) translate3d(0, 0, 0);
	opacity:				0;
	width: 				100%;
	margin: 				auto;
}

.logo .portImgMid  {
	width: 				80%;
	margin:             0 5%;
}
.portImgFields  {
	position: 			absolute;
	top:                30vw;
	-webkit-transform:  	translate3d(1500px, 0, 0);
	-moz-transform:  		translate3d(1500px, 0, 0);
	-ms-transform:  	    translate3d(1500px, 0, 0);
  	transform:  			translate3d(1500px, 0, 0);
	opacity:				0;
	width: 				90%;
	margin:             auto;
}
.portImgCal  {
	position: 			absolute;
	top:                20vw;
	-webkit-transform:  	translate3d(1500px, 0, 0);
	-moz-transform:  	translate3d(1500px, 0, 0);
	-ms-transform:  	    translate3d(1500px, 0, 0);
  	transform:  			translate3d(1500px, 0, 0);
	opacity:				0;
	width: 				110%;
	margin: 				0;
}


.viewing-page-2 #portAnim1 img,
.viewing-page-3 #portAnim2 img,
.viewing-page-4 #portAnim3 img,
.viewing-page-5 #portAnim4 img,
.viewing-page-6 #portAnim5 img,
.viewing-page-7 #portAnim6 img,
.viewing-page-8 #portAnim7 img,
.viewing-page-9 #portAnim8 img {
	-webkit-transform:  translate3d(0, 0, 0);
	-moz-transform:  	translate3d(0, 0, 0);
	-ms-transform:  	translate3d(0, 0, 0);
  	transform: 			translate3d(0, 0, 0);
	transition-delay:  0.3s;
	opacity:			1;	
}
.viewing-page-2 #portAnim1 img.portImg3D ,
.viewing-page-3 #portAnim2 img.portImg3D ,
.viewing-page-4 #portAnim3 img.portImg3D ,
.viewing-page-5 #portAnim4 img.portImg3D ,
.viewing-page-6 #portAnim5 img.portImg3D ,
.viewing-page-7 #portAnim6 img.portImg3D ,
.viewing-page-8 #portAnim7 img.portImg3D ,
.viewing-page-9 #portAnim8 img.portImg3D  {
	-webkit-transform:  rotate3d(2, 2, -3, 45deg) translate3d(40px, -40px, 0);
	-moz-transform:  	rotate3d(2, 2, -3, 45deg) translate3d(40px, -40px, 0);
	-ms-transform:  	rotate3d(2, 2, -3, 45deg) translate3d(40px, -40px, 0);
  	transform: 			rotate3d(2, 2, -3, 45deg) translate3d(40px, -40px, 0);
	transition-delay:  0.3s;
	opacity:			1;	
}

.viewing-page-1 #portAnim1 img,
.viewing-page-3 #portAnim1 img,
.viewing-page-4 #portAnim1 img,
.viewing-page-5 #portAnim1 img,
.viewing-page-6 #portAnim1 img,
.viewing-page-7 #portAnim1 img,
.viewing-page-8 #portAnim1 img,
.viewing-page-9 #portAnim1 img  {
	-webkit-transform:  translate3d(0, 100000000, 0);
	-moz-transform:  	translate3d(0, 100000000, 0);
	-ms-transform:  	translate3d(0, 100000000, 0);
  	transform: 			translate3d(0, 100000000, 0);
	opacity:			0;
	transition-delay:  1.5s;
}
.viewing-page-1 #portAnim2 img,
.viewing-page-2 #portAnim2 img,
.viewing-page-4 #portAnim2 img,
.viewing-page-5 #portAnim2 img,
.viewing-page-6 #portAnim2 img,
.viewing-page-7 #portAnim2 img,
.viewing-page-8 #portAnim2 img,
.viewing-page-9 #portAnim1 img  {
	-webkit-transform:  translate3d(0, 100000000, 0);
	-moz-transform:  	translate3d(0, 100000000, 0);
	-ms-transform:  	translate3d(0, 100000000, 0);
  	transform: 			translate3d(0, 100000000, 0);
	opacity:			0;
	transition-delay:  1.5s;
}

.viewing-page-2 #portAnim3 img,
.viewing-page-3 #portAnim3 img,
.viewing-page-5 #portAnim3 img,
.viewing-page-6 #portAnim3 img,
.viewing-page-7 #portAnim3 img,
.viewing-page-8 #portAnim3 img,
.viewing-page-9 #portAnim3 img  {
	-webkit-transform:  translate3d(1500, 100000000, 0);
	-moz-transform:  	translate3d(1500, 100000000, 0);
	-ms-transform:  	translate3d(1500, 100000000, 0);
  	transform: 			translate3d(1500, 100000000, 0);
	opacity:			0;
	transition-delay:  1.5s;
}

.viewing-page-2 #portAnim4 img,
.viewing-page-3 #portAnim4 img,
.viewing-page-4 #portAnim4 img,
.viewing-page-6 #portAnim4 img,
.viewing-page-7 #portAnim4 img,
.viewing-page-8 #portAnim4 img,
.viewing-page-9 #portAnim4 img  {
	-webkit-transform:  translate3d(1500, 100000000, 0);
	-moz-transform:  translate3d(1500, 100000000, 0);
	-ms-transform:  	translate3d(1500, 100000000, 0);
  	transform: 			translate3d(1500, 100000000, 0);
	transition-delay:  1.5s;
	opacity:			0;
}

.viewing-page-2 #portAnim5 img,
.viewing-page-3 #portAnim5 img,
.viewing-page-4 #portAnim5 img,
.viewing-page-5 #portAnim5 img,
.viewing-page-7 #portAnim5 img,
.viewing-page-8 #portAnim5 img,
.viewing-page-9 #portAnim5 img  {
	-webkit-transform:  translate3d(1500, 100000000, 0);
	-moz-transform:  translate3d(1500, 100000000, 0);
	-ms-transform:  	translate3d(1500, 100000000, 0);
  	transform: 			translate3d(1500, 100000000, 0);
	transition-delay:  1.5s;
	opacity:			0;
}
.viewing-page-2 #portAnim6 img,
.viewing-page-3 #portAnim6 img,
.viewing-page-4 #portAnim6 img,
.viewing-page-5 #portAnim6 img,
.viewing-page-6 #portAnim6 img,
.viewing-page-8 #portAnim6 img,
.viewing-page-9 #portAnim6 img  {
	-webkit-transform:  translate3d(1500, 100000000, 0);
	-moz-transform:  	translate3d(1500, 100000000, 0);
	-ms-transform:  	translate3d(1500, 100000000, 0);
  	transform: 			translate3d(1500, 100000000, 0);
	transition-delay:  2s;
	opacity:			0;
}
.viewing-page-2 #portAnim7 img,
.viewing-page-3 #portAnim7 img,
.viewing-page-4 #portAnim7 img,
.viewing-page-5 #portAnim7 img,
.viewing-page-6 #portAnim7 img,
.viewing-page-7 #portAnim7 img,
.viewing-page-9 #portAnim7 img  {
	-webkit-transform:  translate3d(1500, 100000000, 0);
	-moz-transform:  	translate3d(1500, 100000000, 0);
	-ms-transform:  	translate3d(1500, 100000000, 0);
  	transform: 			translate3d(1500, 100000000, 0);
	transition-delay:  2s;
	opacity:			0;
}
.viewing-page-2 #portAnim8 img,
.viewing-page-3 #portAnim8 img,
.viewing-page-4 #portAnim8 img,
.viewing-page-5 #portAnim8 img,
.viewing-page-6 #portAnim8 img,
.viewing-page-7 #portAnim8 img,
.viewing-page-8 #portAnim8 img  {
	-webkit-transform:  translate3d(1500, 100000000, 0);
	-moz-transform:  translate3d(1500, 100000000, 0);
	-ms-transform:  	translate3d(1500, 100000000, 0);
  	transform: 			translate3d(1500, 100000000, 0);
	transition-delay:  2s;
	opacity:			0;
}


#landingHead h1{
	-webkit-transition: all 1s ease-in-out 1s;
	-moz-transition: 	all 1s ease-in-out 1s;
	-ms-transition: 	all 1s ease-in-out 1s;
	transition:			all 1s ease-in-out 1s;
	}
#portAnim1 h1,
#portAnim2 h1,
#portAnim3 h1,
#portAnim4 h1,
#portAnim5 h1,
#portAnim6 h1,
#portAnim7 h1,
#portAnim8 h1,
#skillIntro h1,
#experiDegree h1{
	-webkit-transition: all 1s ease-in-out 0.5s;
	-moz-transition: 	all 1s ease-in-out 0.5s;
	-ms-transition: 	all 1s ease-in-out 0.5s;
	transition:			all 1s ease-in-out 0.5s;
	}
.jumbotron-heading {
	opacity: 			0;
    -webkit-transform:  translateY(30px);
	-moz-transform: 	translateY(30px);
	-ms-transform:      translateY(30px);
    transform: 			translateY(30px); 		
	}	
	
.portfolio-heading{
	opacity: 			0;
    -webkit-transform:  translateY(80px);
	-moz-transform:  	translateY(80px);
	-ms-transform:      translateY(80px);
    transform: 			translateY(80px); 		
	}

.viewing-page-1 #landingHead h1,	
.viewing-page-2 #portAnim1 h1,
.viewing-page-3 #portAnim2 h1,
.viewing-page-4 #portAnim3 h1,
.viewing-page-5 #portAnim4 h1,
.viewing-page-6 #portAnim5 h1,
.viewing-page-7 #portAnim6 h1,
.viewing-page-8 #portAnim7 h1,
.viewing-page-9 #portAnim8 h1,
.viewing-page-10 #skillIntro h1,
.viewing-page-11 #experiDegree h1{
  	opacity: 			1;
    -webkit-transform:  translateY(0);
	-moz-transform:  	translateY(0);
	-ms-transform:      translateY(0);
    transform: 			translateY(0); 	
}

#landingHead p{
	-webkit-transition: all 1s ease-in-out 1.6s;
	-moz-transition: 	all 1s ease-in-out 1.6s;
	-ms-transition: 	all 1s ease-in-out 1.6s;
	transition:			all 1s ease-in-out 1.6s;
	}
#portAnim1 p,
#portAnim2 p,
#portAnim3 p,
#portAnim4 p,
#portAnim5 p,
#portAnim6 p,
#portAnim7 p,
#portAnim8 p,
#skillIntro p,
#experiDegree p {
	-webkit-transition: all 1s ease-in-out 0.6s;
	-moz-transition: 	all 1s ease-in-out 0.6s;
	-ms-transition: 	all 1s ease-in-out 0.6s;
	transition:			all 1s ease-in-out 0.6s;
	}
.h-joanet-intro{
	opacity: 			0;
    -webkit-transform:  translateY(50px);
	-moz-transform:  	translateY(50px);
	-ms-transform:      translateY(50px);
    transform: 			translateY(50px);		
	}
.portfolio-brief{
	opacity: 			0;
    -webkit-transform:  translateY(80px);
	-moz-transform:  translateY(80px);
	-ms-transform:      translateY(80px);
    transform: 			translateY(80px);		
	}
.viewing-page-1 #landingHead p,	
.viewing-page-2 #portAnim1 p,
.viewing-page-3 #portAnim2 p,
.viewing-page-4 #portAnim3 p,
.viewing-page-5 #portAnim4 p,
.viewing-page-6 #portAnim5 p,
.viewing-page-7 #portAnim6 p,
.viewing-page-8 #portAnim7 p,
.viewing-page-9 #portAnim8 p,
.viewing-page-10 #skillIntro p,
.viewing-page-11 #experiDegree p{
  	opacity: 			1;
    -webkit-transform:  translateY(0);
	-moz-transform:  	translateY(0);
	-ms-transform:      translateY(0);
    transform: 			translateY(0); 	
}

#portAnim1 button,
#portAnim2 button,
#portAnim3 button,
#portAnim4 button,
#portAnim5 button,
#portAnim6 button,
#portAnim7 button,
#portAnim8 button,
#skillIntro button{
	-webkit-transition:	all 1s ease-in-out 0.7s;
	-moz-transition:	all 1s ease-in-out 0.7s;
	-ms-transition:		all 1s ease-in-out 0.7s;
	transition:			all 1s ease-in-out 0.7s;
	}
	
.portfolio .btn{
	opacity: 			0;
    -webkit-transform:  translateY(80px);
	-moz-transform:  	translateY(80px);
	-ms-transform: 		translateY(80px);
    transform: 			translateY(80px); 		
	}
	
.viewing-page-2 #portAnim1 button,
.viewing-page-3 #portAnim2 button,
.viewing-page-4 #portAnim3 button,
.viewing-page-5 #portAnim4 button,
.viewing-page-6 #portAnim5 button,
.viewing-page-7 #portAnim6 button,
.viewing-page-8 #portAnim7 button,
.viewing-page-9 #portAnim8 button,
.viewing-page-10 #skillIntro button {
  	opacity: 			1;
    -webkit-transform:  translateY(0);
	-moz-transform:  	translateY(0);
	-ms-transform:  	translateY(0);
    transform: 			translateY(0);	
}

#portAnim1 svg,
#portAnim2 svg,
#portAnim3 svg,
#portAnim4 svg,
#portAnim5 svg,
#portAnim6 svg,
#portAnim7 svg,
#portAnim8 svg,
#skillIntro svg{
	-webkit-transition:	all 1s ease-in-out 0.7s;
	-moz-transition:	all 1s ease-in-out 0.7s;
	-ms-transition:	all 1s ease-in-out 0.7s;
	transition:			all 1s ease-in-out 0.7s;
	
	}
	
.portfolio svg{
	opacity: 			0;
    -webkit-transform:  translateY(80px);
	-moz-transform:  	translateY(80px);
	-ms-transform:  	translateY(80px);
    transform: 			translateY(80px); 		
	}
	
.viewing-page-2 #portAnim1 svg,
.viewing-page-3 #portAnim2 svg,
.viewing-page-4 #portAnim3 svg,
.viewing-page-5 #portAnim4 svg,
.viewing-page-6 #portAnim5 svg,
.viewing-page-7 #portAnim6 svg,
.viewing-page-8 #portAnim7 svg,
.viewing-page-9 #portAnim8 svg,
.viewing-page-10 #skillIntro svg {
  	opacity: 			1;
    -webkit-transform:  translateY(0);
	-moz-transform:  	translateY(0);
	-ms-transform:  	translateY(0);
    transform: 			translateY(0); 	
}

.viewing-page-1 #portAnim1 .portfolio,
.viewing-page-3 #portAnim1 .portfolio,
.viewing-page-4 #portAnim1 .portfolio,
.viewing-page-5 #portAnim1 .portfolio,
.viewing-page-6 #portAnim1 .portfolio,
.viewing-page-7 #portAnim1 .portfolio,
.viewing-page-8 #portAnim1 .portfolio,
.viewing-page-9 #portAnim1 .portfolio  {
	-webkit-animation: 	fade  0.5s 1;
	-moz-animation: 	fade  0.5s 1;
	-ms-animation: 		fade  0.5s 1;
	animation: 			fade  0.5s 1;
}

.viewing-page-2 #portAnim2 .portfolio,
.viewing-page-4 #portAnim2 .portfolio,
.viewing-page-5 #portAnim2 .portfolio,
.viewing-page-6 #portAnim2 .portfolio,
.viewing-page-7 #portAnim2 .portfolio,
.viewing-page-8 #portAnim2 .portfolio,
.viewing-page-9 #portAnim2 .portfolio {
	-webkit-animation: 	fade  0.5s 1;
	-moz-animation: 	fade  0.5s 1;
	-ms-animation: 		fade  0.5s 1;
	animation: 			fade  0.5s 1;
}

.viewing-page-2 #portAnim3 .portfolio,
.viewing-page-3 #portAnim3 .portfolio,
.viewing-page-5 #portAnim3 .portfolio,
.viewing-page-6 #portAnim3 .portfolio,
.viewing-page-7 #portAnim3 .portfolio,
.viewing-page-8 #portAnim3 .portfolio,
.viewing-page-9 #portAnim3 .portfolio {
	-webkit-animation: 	fade  0.5s 1;
	-moz-animation: 	fade  0.5s 1;
	-ms-animation: 		fade  0.5s 1;
	animation: 			fade  0.5s 1;
}

.viewing-page-2 #portAnim4 .portfolio,
.viewing-page-3 #portAnim4 .portfolio,
.viewing-page-4 #portAnim4 .portfolio,
.viewing-page-6 #portAnim4 .portfolio,
.viewing-page-7 #portAnim4 .portfolio,
.viewing-page-8 #portAnim4 .portfolio,
.viewing-page-9 #portAnim4 .portfolio {
	-webkit-animation: 	fade  0.5s 1;
	-moz-animation: 	fade  0.5s 1;
	-ms-animation: 		fade  0.5s 1;
	animation: 			fade  0.5s 1;
}
.viewing-page-2 #portAnim5 .portfolio,
.viewing-page-3 #portAnim5 .portfolio,
.viewing-page-4 #portAnim5 .portfolio,
.viewing-page-5 #portAnim5 .portfolio,
.viewing-page-7 #portAnim5 .portfolio,
.viewing-page-8 #portAnim5 .portfolio,
.viewing-page-9 #portAnim5 .portfolio {
	-webkit-animation: 	fade  0.5s 1;
	-moz-animation: 	fade  0.5s 1;
	-ms-animation: 		fade  0.5s 1;
	animation: 			fade  0.5s 1;
}
.viewing-page-2 #portAnim6 .portfolio,
.viewing-page-3 #portAnim6 .portfolio,
.viewing-page-4 #portAnim6 .portfolio,
.viewing-page-5 #portAnim6 .portfolio,
.viewing-page-6 #portAnim6 .portfolio,
.viewing-page-8 #portAnim6 .portfolio,
.viewing-page-9 #portAnim6 .portfolio {
	-webkit-animation: 	fade  0.5s 1;
	-moz-animation: 	fade  0.5s 1;
	-ms-animation: 		fade  0.5s 1;
	animation: 			fade  0.5s 1;
}
.viewing-page-2 #portAnim7 .portfolio,
.viewing-page-3 #portAnim7 .portfolio,
.viewing-page-4 #portAnim7 .portfolio,
.viewing-page-5 #portAnim7 .portfolio,
.viewing-page-6 #portAnim7 .portfolio,
.viewing-page-7 #portAnim7 .portfolio,
.viewing-page-9 #portAnim7 .portfolio {
	-webkit-animation: 	fade  0.5s 1;
	-moz-animation: 	fade  0.5s 1;
	-ms-animation: 		fade  0.5s 1;
	animation: 			fade  0.5s 1;
}
.viewing-page-2 #portAnim8 .portfolio,
.viewing-page-3 #portAnim8 .portfolio,
.viewing-page-4 #portAnim8 .portfolio,
.viewing-page-5 #portAnim8 .portfolio,
.viewing-page-6 #portAnim8 .portfolio,
.viewing-page-7 #portAnim8 .portfolio,
.viewing-page-8 #portAnim8 .portfolio,
.viewing-page-10 #portAnim8 .portfolio {
	-webkit-animation: 	fade  0.5s 1;
	-moz-animation: 	fade  0.5s 1;
	-ms-animation: 		fade  0.5s 1;
	animation: 			fade  0.5s 1;
}
.viewing-page-1 #skillIntro .pure-css{
	display: none;
	}

@keyframes fade {
  0% {
    opacity: 1;
	-ms-transform: 		translateY(0px); 
	transform: 			translateY(0px);
  }  
   60% {
    opacity: 0;
   }
  100% {
    opacity: 0;
	-ms-transform: 		translateY(500px);
	transform: 			translateY(500px);
  } 
}
@-webkit-keyframes fade {
  0% {
    opacity: 1;
	-webkit-transform: 	translateY(0px); 
	transform: 			translateY(0px);
  }  
   60% {
    opacity: 0;
   }
  100% {
    opacity: 0;
	-webkit-transform: 	translateY(500px);
	transform: 			translateY(0px);
  } 
}
@-moz-keyframes fade {
  0% {
    opacity: 1;
	-moz-transform: 		translateY(0px); 
	transform: 			translateY(0px);
  }  
   60% {
    opacity: 0;
   }
  100% {
    opacity: 0; 
	-moz-transform: 		translateY(500px); 
	transform: 			translateY(500px);
  } 
}
@-ms-keyframes fade {
  0% {
    opacity: 1;
	-ms-transform: 		translateY(0px); 
	transform: 			translateY(0px);
  }  
   60% {
    opacity: 0;
   }
  100% {
    opacity: 0;
	-ms-transform: 		translateY(500px); 
	transform: 			translateY(500px);
  } 
}
/*************************/
/*** circle progress bar***/
/**************************/
#skillIntro .portfolio,
#experiDegree .portfolio{
	padding-top:		20vw;
	}
#skillIntro {
	background-color: #1d1d1d;
	}
#skillIntro .portfolio h1,
#experiDegree .portfolio h1{
	font-size: 24px;
	padding: 0 0 10px 0;
	}
.infographic{
	top:  0;
}

.rp{
	display:   			block;
	position:  			relative;
	padding:  			0 5px 55px;
}

.pure-css {
  width: 				20vw;
  height: 				20vw;
  border-radius: 		50%;
  background: 			transparent; 
  position: 			 	relative;
  color: 				#fff;
  margin:				0px;
}


.pure-css .semi {
  width: 				50%;
  height: 				100%;
  position: 			relative;
  display: 				inline-block;
  float: 				left;
  overflow: 			hidden;
}

.viewing-page-10 .pure-css .semi.right .circle {
  border-top-left-radius: 		150px;
  border-bottom-left-radius: 	150px;
  border-right: 				    0;
  -webkit-transform: 			rotate(0deg) translate(-100%, 0);
  -moz-transform: 			rotate(0deg) translate(-100%, 0);
  -ms-transform: 				rotate(0deg) translate(-100%, 0); 
  transform: 					rotate(0deg) translate(-100%, 0);
  transform-origin: 			    0% 50%;
}

.viewing-page-10 .pure-css .semi.left .circle {
  border-top-right-radius: 		150px;
  border-bottom-right-radius: 	150px;
  border-left: 					0;
  -webkit-transform: 			rotate(0deg) translate(100%, 0);
  -moz-transform: 				rotate(0deg) translate(100%, 0);
  -ms-transform: 				rotate(0deg) translate(100%, 0); 
  transform: 					rotate(0deg) translate(100%, 0);
  transform-origin: 			    100% 50%;
}

.pure-css .semi .circle {
  width: 						100%;
  height: 						100%;
  box-sizing: 					border-box;
  border: 						3px solid;
}

.pure-css .num img{
  width:   100%;
}

.pure-css .icon {
  position: 		absolute;
  top: 			50%;
  left: 			50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); 
  transform: 	translate(-50%, -50%);
  display: 		fix;
  height: 		2em;
  width:  		2em;
  overflow: 		hidden;
}

.pure-css .text {
	display:     block;
	font-family: 'Raleway', sans-serif; 
	font-size:  10px;
	color: 		#fff;
	margin:		10px 0;
}

.pure-css .shade {
  background: 		transparent;
  width: 			100%;
  height: 			100%;
  border-radius: 	50%;
  box-sizing:     	border-box;
  border: 			none;
}

.list-group-item {
	font-size:        10px;
}

.viewing-page-1 .pure-css,
.viewing-page-2 .pure-css,
.viewing-page-3 .pure-css,
.viewing-page-4 .pure-css,
.viewing-page-5 .pure-css,
.viewing-page-6 .pure-css,
.viewing-page-7 .pure-css,
.viewing-page-8 .pure-css,
.viewing-page-9 .pure-css,
.viewing-page-11 .pure-css  {
	display: none;
	}

@keyframes rotate {
  100% {
	transform: rotate(180deg) translate(-100%, 0);
  }
}
@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(180deg) translate(-100%, 0);
	transform: rotate(180deg) translate(-100%, 0);
  }
}
@-moz-keyframes rotate {
  100% {
	-moz-transform: rotate(180deg) translate(-100%, 0);
	transform: rotate(180deg) translate(-100%, 0);
  }
}
@-ms-keyframes rotate {
  100% {
	-ms-transform: rotate(180deg) translate(-100%, 0);
	transform: rotate(180deg) translate(-100%, 0);
  }
}
@keyframes rotate2 {
  100% {
	transform: rotate(145deg) translate(100%, 0);
  }
}
@-webkit-keyframes rotate2 {
  100% {
    -webkit-transform: rotate(145deg) translate(100%, 0);
	transform: rotate(145deg) translate(100%, 0);
  }
}
@-moz-keyframes rotate2 {
  100% {
	-moz-transform: rotate(145deg) translate(100%, 0);
	transform: rotate(145deg) translate(100%, 0);
  }
}
@-ms-keyframes rotate2 {
  100% {
	-ms-transform: rotate(145deg) translate(100%, 0);
	transform: rotate(145deg) translate(100%, 0);
  }
}
@keyframes rotate3 {
  100% {
	transform: rotate(130deg) translate(-100%, 0);
  }
}
@-webkit-keyframes rotate3 {
  100% {
    -webkit-transform: rotate(130deg) translate(-100%, 0);
	transform: rotate(130deg) translate(-100%, 0);
  }
}
@-moz-keyframes rotate3 {
  100% {
    -moz-transform: rotate(130deg) translate(-100%, 0);
	transform: rotate(130deg) translate(-100%, 0);
  }
}
@-ms-keyframes rotate3 {
  100% {
	-ms-transform: rotate(130deg) translate(-100%, 0);
	transform: rotate(130deg) translate(-100%, 0);
  }
}
@keyframes rotate4 {
  100% {
    transform: rotate(180deg) translate(100%, 0);
  }
}
@-webkit-keyframes rotate4 {
  100% {
    -webkit-transform: rotate(180deg) translate(100%, 0);
    transform: rotate(180deg) translate(100%, 0);
  }
}
@-moz-keyframes rotate4 {
  100% {
	-moz-transform: rotate(180deg) translate(100%, 0);
    transform: rotate(180deg) translate(100%, 0);
  }
}
@-ms-keyframes rotate4 {
  100% {
	-ms-transform: rotate(180deg) translate(100%, 0);
    transform: rotate(180deg) translate(100%, 0);
  }
}
@keyframes rotate5 {
  100% {
	transform: rotate(90deg) translate(-100%, 0);
  }
}
@-webkit-keyframes rotate5 {
  100% {
    -webkit-transform: rotate(90deg) translate(-100%, 0);
	transform: rotate(90deg) translate(-100%, 0);
  }
}
@-moz-keyframes rotate5 {
  100% {
	-moz-transform: rotate(90deg) translate(-100%, 0);
	transform: rotate(90deg) translate(-100%, 0);
  }
}
@-ms-keyframes rotate5 {
  100% {
	-ms-transform: rotate(90deg) translate(-100%, 0);
	transform: rotate(90deg) translate(-100%, 0);
  }
}
@keyframes rotate6 {
  100% {
	transform: rotate(40deg) translate(100%, 0);
  }
}
@-webkit-keyframes rotate6 {
  100% {
    -webkit-transform: rotate(40deg) translate(100%, 0);
	transform: rotate(40deg) translate(100%, 0);
  }
}
@-moz-keyframes rotate6 {
  100% {
	-moz-transform: rotate(40deg) translate(100%, 0);
	transform: rotate(40deg) translate(100%, 0);
  }
}
@-ms-keyframes rotate6 {
  100% {
	-ms-transform: rotate(40deg) translate(100%, 0);
	transform: rotate(40deg) translate(100%, 0);
  }
}
@keyframes rotate7 {
  100% {
	transform: rotate(-180deg) translate(-100%, 0);
  }
}
@-webkit-keyframes rotate7 {
  100% {
    -webkit-transform: rotate(-180deg) translate(-100%, 0);
	transform: rotate(-180deg) translate(-100%, 0);
  }
}
@-moz-keyframes rotate7 {
  100% {
	-moz-transform: rotate(-180deg) translate(-100%, 0);
	transform: rotate(-180deg) translate(-100%, 0);
  }
}
@-ms-keyframes rotate7 {
  100% {
	-ms-transform: rotate(-180deg) translate(-100%, 0);
	transform: rotate(-180deg) translate(-100%, 0);
  }
}
@keyframes rotate8 {
  100% {
	transform: rotate(-30deg) translate(100%, 0);
  }
}
@-webkit-keyframes rotate8 {
  100% {
    -webkit-transform: rotate(-30deg) translate(100%, 0);
	transform: rotate(-30deg) translate(100%, 0);
  }
}
@-moz-keyframes rotate8 {
  100% {
	-moz-transform: rotate(-30deg) translate(100%, 0);
	transform: rotate(-30deg) translate(100%, 0);
  }
}
@-ms-keyframes rotate8 {
  100% {
	-ms-transform: rotate(-30deg) translate(100%, 0);
	transform: rotate(-30deg) translate(100%, 0);
  }
}
@keyframes rotate10 {
  100% {
	transform: rotate(-90deg) translate(100%, 0);
  }
}
@-webkit-keyframes rotate10 {
  100% {
    -webkit-transform: rotate(-90deg) translate(100%, 0);
	transform: rotate(-90deg) translate(100%, 0);
  }
}
@-moz-keyframes rotate10 {
  100% {
	-moz-transform: rotate(-90deg) translate(100%, 0);
	transform: rotate(-90deg) translate(100%, 0);
  }
}
@-ms-keyframes rotate10 {
  100% {
	-ms-transform: rotate(-90deg) translate(100%, 0);
	transform: rotate(-90deg) translate(100%, 0);
  }
}
.experience,
.degree {
	padding-top: 0vw;
	margin-top: -7vw;
}
@media screen and (min-width: 374px) {
	
	.jumbotron-heading {
		height: 240px;
		}	
	.jumbotron h1 {
		font-size: 	42px;
		}
	.jumbotron p {
		font-size:     14px;
		}
	.h-joanet-text-intro {
		height: 500px;
		width: 340px;
		}
	.portfolio {
		padding-top: 100vw;
	}
	.portImgTop  {
		width: 95%;
		}
	.portImgUKDS {
		top:					20vw;
	}
	.portImgUKDSTop {
		top:					20vw;
		}
	.portImgQD {
		top: 				20vw;
	}
	.portImgQDTop {
		top: 				20vw;
	}
	.portImgQDBottom {
		top: 				20vw;
	}
	.portImgQDLeft {
		top: 				20vw;
	}
	.portImgQDRight{
		top: 				20vw;
	}
	.portImgFields  {
		top:  40vw;
	}
	.portImgMid  {
		top: 40vw;
	}
	.motion .portImgMid  {
		top: 30vw;
	}
	.portImgCal  {
		top: 40vw;
	}
	.rp{
		padding:  			0 5px 70px;
	}
	.pure-css .text {
		font-size:  12px;
	}
	.experience,
	.degree {
		padding-top: 0vw;
		margin-top: 0vw;
	}
}
@media screen and (min-width: 767px) {
	.logo-mask {
		left: 70vw;}
	.jumbotron-heading {
		height: 350px;
		}

	.jumbotron h1 {
		font-size: 			70px;
	}
	.h-joanet-text-intro {
		height: 500px;
		width: 80%;
		padding-left: 8%;
		}
	.jumbotron p {
		font-size:     14px;
		margin-bottom: 5px;
		}
	.portfolio {
		padding-top: 90vw;
	}
	.portImgTop  {
		top:	   0;
		right: 0;
		width: 80%;
		}

	.portImgUKDS {
		top:					5vw;
	}
	.portImgUKDSTop {
		top:					5vw;
		}
	.portImgFields  {
		top:  20vw;
		width: 80vw;
		margin: 0 10vw;
		}
	.portImgMid  {
		top: 26vw;
		width: 80vw;
		margin: 0 10vw;
		}
	.motion .portImgMid  {
		top: 20vw;
		width: 80vw;
		margin: 0 10vw;
		}
	.logo .portImgMid  {
		width: 				80%;
		margin:             0 8vw;
	}
	.portImgUKDS {
		top:					8vw;
	}
	.portImgUKDSTop {
		top:					8vw;
		}
	.portImgQD {
		top: 				8vw;
	}
	.portImgQDTop {
		top: 				8vw;
	}
	.portImgQDBottom {
		top: 				8vw;
	}
	.portImgQDLeft {
		top: 				8vw;
	}
	.portImgQDRight{
		top: 				8vw;
	}
	.portImgCal  {
		width: 100%;
		top:30vw;
		
	}
	#skillIntro h1 {
		font-size: 38px;
		padding-bottom: 20px;
		}
	.infographic{
		top:  8vw;
		padding: 0 5vw;
	}
	.pure-css {
	  width: 				120px;
	  height: 				120px;
	  margin:				20px auto;
	}
	.viewing-page-10 .pure-css .semi.right .circle {
	  border-top-left-radius: 		120px;
	  border-bottom-left-radius: 	120px;
	}
	.viewing-page-10 .pure-css .semi.left .circle {
	  border-top-right-radius: 		120px;
	  border-bottom-right-radius: 	120px;
	}	
	.pure-css .semi .circle {
	  border: 						6px solid;
	}
	.pure-css .icon {
	  height: 		3em;
	  width:  		3em;
	}
	.pure-css .text {
		font-size:  16px;
	}	
	.list-group-item {
		font-size:        14px;
	}
	.experience,
	.degree {
		padding-top: 5vw;
	}
}

@media screen and (min-width: 1023px) {
	.jumbotron-heading {
		height: 200px;
		}

	.h-joanet-text-intro {
		height: 300px;
		width: 95%;
		padding-left: 8%;
		}
	.logo-mask {
		position: relative;
		top:0;
		bottom: 0;
		height: 130px;
		margin: auto;
		}
	.portfolio {
		padding-top: 15vw;
	}
	.portImgUKDS {
		top: 				3vw;
		width: 				57vw;
		margin-right:		0;
	}
	.portImgUKDSTop {
		top: 				3vw;
		width: 				57vw;
		margin-right:		0;
	}
	.portImgQD {
		top: 				5vw;
		width: 				57vw;
		margin-right:		3vw;
	}
	.portImgQDTop {
		top: 				5vw;
		width: 				57vw;
		margin-right:		3vw;
	}
	.portImgQDBottom {
		top: 				5vw;
		width: 				57vw;
		margin-right:		3vw;
	}
	.portImgQDLeft {
		top: 				5vw;
		width: 				57vw;
		margin-right:		3vw;
	}
	.portImgQDRight{
		top: 				5vw;
		width: 				57vw;
		margin-right:		0vw;
	}
	.portImgTop  {
		width: 				39vw;
		top:  0;
	}
	.portfolio .portImgTop {
		width: 				100%;
		padding-top:  0px;
		margin-right:  100px;
	}
	.portImgFields  {
		top:  6vw;
		width: 46vw; 
		margin:  5vw 0 0 -3vw;
	}
	.motion .portImgMid  {
		top: 5vw;
		width: 100%;
		margin: 0 auto;
		}
	.logo .portImgMid  {
		width: 	 100%;
		margin:  0 0 0 -10vw;
	}
	.portImgMid  {
		top: 10vw;
		width: 	50vw;
		margin:  0 -6vw 0 0;
	}
	.portImgCal  {
		top: 7vw;
		width: 100%; 
		margin: 0;
	}
	.pure-css {
	  width: 	150px;
	  height: 	150px;
	}
	.viewing-page-10 .pure-css .semi.right .circle {
	  border-top-left-radius: 		150px;
	  border-bottom-left-radius: 	150px;
	}
	.viewing-page-10 .pure-css .semi.left .circle {
	  border-top-right-radius: 		150px;
	  border-bottom-right-radius: 	150px;
	}	
	.infographic{
		padding: 0;
		margin: 1vw 0 1vw 3vw;	
	}
	#skillIntro .portfolio,
	#experiDegree .portfolio{
		padding-top:		15vw;
	}
}
@media screen and (min-height: 1366px) {
	.logo-mask {
		height: 500px;}	
	.portfolio {
		padding-top: 90vw;
		left: 30%;
		}
	#skillIntro .portfolio {
		top: 15vw;
		left: 0;
		width: 80vw;
		}
	.infographic {
		top: 20vw;
		left:  5vw;
		width: 80vw;
		}
	#portAnim7 .portfolio {
		left: 10%;
		}
	.portImgUKDS {
		width: 				100vw;
		margin-right:		0;
	}
	.portImgUKDSTop {
		width: 				100vw;
		margin-right:		0;
	}
	.portImgFields  {
		top:  20vw;
		width: 80vw;
		margin-left: -40vw;
		}
	.portImgMid  {
		top: 30vw;
		width: 	80vw;
		margin-left: -30vw;
	}
	.motion .portImgMid  {
		top: 20vw;
		width: 80vw;
		margin: 0 0 0 -40vw;
		}
	.logo .portImgMid  {
		width: 70vw;
		margin: 0 0 0 -43vw;
		}
	.portImgTop  {
		width: 79vw;
		}
	.portImgQD {
		width: 				90vw;
		margin-right:       5vw;
	}
	.portImgQDTop {
		width: 				90vw;
		margin-right:       5vw;
	}
	.portImgQDBottom {
		width: 				90vw;
		margin-right:       5vw;
	}
	.portImgQDLeft {
		width: 				90vw;
		margin-right:       5vw;
	}
	.portImgQDRight{
		width: 				90vw;
		margin-right:       5vw;
	}
	.portImgCal  {
		top: 15vw;
		width: 100vw; 
		margin: 0 0 0 -43vw;
		}
	.experience {
		width: 80vw;
		}
	.degree{
		width: 90vw;
		}
}

@media screen and (min-width: 1279px) {
.jumbotron-heading {
	height: 200px;
	}
.h-joanet-text-intro {
	height: 300px;
	width: 80%;
	padding-left: 8%;
	}
.portImgTop  {
	width: 	39vw;
	}
.experience, .degree { 
	padding-top: 0vw;
	}
	}
@media screen and (min-width: 1365px) {

.jumbotron h1 {
	font-size: 	75px;
	}
.portfolio {
	padding-top: 20vw;
	}
.portImgUKDS {
	top: 				0;
	width: 				57vw;
	margin-right:		0;
}
.portImgUKDSTop {
	top: 				0;
	width: 				57vw;
	margin-right:		0;
}
.portImgQD {
	top: 				0;
}
.portImgQDTop {
	top: 				0;
}
.portImgQDBottom {
	top: 				0;
}
.portImgQDLeft {
	top: 				0;
}
.portImgQDRight{
	top: 				0;
}
.portImgTop  {
	width: 				36vw;
	top:  0;
}
.portImgFields  { 
	top:   10vw;
	margin:  0 0 0 -3vw;
}
.infographic { 
   margin: 5vw 0 5vw 3vw;
}

#experiDegree .portfolio {
	padding-top: 20vw;
	}
.experience, .degree { 
	padding-top: 0vw;
	}
}
.section-content{
	overflow: hidden
}
@media all and (-ms-high-contrast:none){
	.logo-mask{
		height: 500px;
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
}