body{
  /* background-color: #010723; */
  font-family: 'Roboto', Helvetica;
  margin: 0 auto;
  color:white;
}







.rate-btn {
	background-color: transparent;
	font-family: 'Roboto';
	color: rgb(10,129,147);
	font-size: 20px;
	border: none;
}

.amp-btn {
	background-color: transparent;
	font-family: 'Roboto';
	color: rgb(146, 72, 153);
	font-size: 20px;
	border: none;
}

.enter-name{
	font-family: 'Roboto';
	color: #959595;
	font-size: 30px;
	font-weight: 100;
	border: none;
	padding-bottom: 10px;
}

.enter-port{
	font-family: 'Roboto';
	color: #959595;
	font-size: 20px;
/*	font-weight: 100;*/
	border: none;
	letter-spacing: 11.5px;
}

.title-text {
	font-family: 'Roboto';
/*	color: #a36ab7;*/
	color: #177f84;
	font-size: 30px;
	font-weight: 100;
	letter-spacing: 12px;
}

.title-subtext {
	font-family: 'Roboto';
	color: #9e9e9e;
	font-size: 15px;
/*	font-weight: 100;*/
	letter-spacing: 5px;
}

.text-hide, .div-hide {
	visibility: hidden;
}

.text-vis, .div-vis {
	visibility: visible;
}

/*---PAGE 0 - SERVICES-------------------*/
#services{
	position: absolute;
	height: 50%; 
	width: 100%;
	margin: 20px auto;
	flex-wrap: wrap;
	display: flex;
	flex-direction: row;
	justify-content: center;
	line-height: 50px;
	align-items: space-between;
	z-index: 10;
}

.service1{
	display: flex;
	flex-direction: column;
	justify-content: center;
	transition: opacity 1.2s ease-in-out;
    -moz-transition: opacity 1.2s ease-in-out;
    -webkit-transition: opacity 1.2s ease-in-out;
	padding: 20px;
	margin: 20px;
	width: 200px;
/*	background-color: #303030;*/
	background-color: #010723;
	font-family: 'Roboto';
	font-weight: 100;
	font-size: 50px;
	overflow: hidden;
}

.services-1A, .services-1B {
	border-right: 1px solid white;
}

.services-1B {
	border-right: 1px solid white;
	padding-right: 40px;
}

.service2{
	display: flex;
	flex-direction: column;
	justify-content: center;
	transition: opacity 1.5s ease-in-out;
    -moz-transition: opacity 1.5s ease-in-out;
    -webkit-transition: opacity 1.5s ease-in-out;
	padding: 20px;
	width: 480px;
	margin: 20px;
/*	background-color: #303030;*/
	background-color: #010723;
	font-family: 'Roboto';
	font-weight: 100;
	font-size: 45px;
	overflow: hidden;
}

#services-behind{
	position: absolute;
	height: 50%; 
	width: 100%;
	margin: 20px auto;
	flex-wrap: wrap;
	display: flex;
	flex-direction: row;
	justify-content: center;
/*	line-height: 50px;*/
/*	align-items: space-between;*/
/*	visibility: hidden;*/
}

.service1-behind{
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 20px;
	margin: 20px;
	width: 200px;
/*	background-color: #303030;*/
	font-family: 'Roboto';
	font-weight: 100;
	font-size: 20px;
	line-height: 30px;
	overflow: hidden;
/*	visibility: hidden;*/
}
.service2-behind{
	display: flex;
	flex-direction: column;
	justify-content: center;
/*	color: #3f3f3f;*/
	padding: 20px;
	width: 480px;
	margin: 20px;
/*	background-color: #303030;*/
	font-family: 'Roboto';
	font-weight: 100;
	font-size: 22px;
	line-height: 35px;
	overflow: hidden;
/*	visibility: hidden;*/
}


@media only screen and (max-width: 550px) {
	.services-1B, .services-1A {
		border: none;
	};
}

@media only screen and (max-width: 1100px) {
	.services-1B {
		border: none;
	};
}

@media only screen and (min-width: 1100px) {
	
}

.purple{
/*	color: #a36ab7; original theme purple*/
	color: #177f84;
	font-size: 60px;
	font-weight: normal;
}

.purple2{
	color: #177f84;
	font-size: 20px;
/*	font-weight: bold;*/
}

.service1:hover, .service2:hover{
	opacity: 0;
	transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out;
/*
    transition: opacity .35s ease-in-out;
    -moz-transition: opacity .35s ease-in-out;
    -webkit-transition: opacity .35s ease-in-out;
*/
}

/*
.service1-behind:hover, .service2-behind:hover{
	color: white;
}
*/

.font-grow-slow{
/*    letter-spacing: 2px;*/
    -webkit-animation: mymove 250s infinite;
    animation: mymove 250s infinite;
/*	NOTE; CHROME SAFARI OPERA*/
}

.font-grow-fast{
/*    letter-spacing: 2px;*/
    -webkit-animation: mymove 25s infinite;
    animation: mymove 25s infinite;
/*	NOTE; CHROME SAFARI OPERA*/
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    80% {letter-spacing: 80px;}
}

/* Standard syntax */
@keyframes mymove {
    80% {letter-spacing: 80px;}
}

/*---PAGE 1 - ILLUSTRATIONS-------------------*/

#illustrations{
/*	border: 1px solid white;*/
	position: absolute; /*TRY relative*/
	width: 100%;
	height: 550px;
	overflow: hidden;
/*	padding-left: 30px;*/
/*	line-height: 20px;*/
}

.twoD-text {
	border-left: 5px solid #177f84;
	border-right: 5px solid #177f84;
	text-align: center;
	height: 165px;
	width: 100%;
	line-height: 160px;
	letter-spacing: 3px;
	font-size: 18px;
	font-weight: lighter;
/*	position: absolute;*/
	background-color: #010723;
	margin-top: 5px;
/*	flex-wrap: wrap;*/
	word-wrap: normal;
	-webkit-transition: width 1s ease-in-out; /* For Safari 3.1 to 6.0 */
    transition: width 1s ease-in-out;
}

.title-subtext2 {
	font-family: 'Roboto';
	color: white;
	font-size: 15px;
/*	font-weight: 100;*/
	letter-spacing: 5px;
}

/*
.twoD-text-animate {
	-webkit-transition: letter-spacing 1s ease-in-out;  For Safari 3.1 to 6.0 
    transition: letter-spacing 1s ease-in-out;
}
*/

/*
.twoD-text-animate:hover {
	letter-spacing: 50px;
}
*/

.gif-gallery, .twoD-text-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	overflow: hidden;
	width: 100%;
	
}

.twoD-text-wrapper {
	z-index: 10;
	width: 100%;
}

.twoD-text:hover{
	width: 0;
	border: none;
}


.gif1, .gif2, .gif3{
	border: 1px solid #00041c;
/*	position: absolute;*/
	overflow: hidden;
	height: 163px;
	width: auto;
	margin-top: 5px;
}

/*-------PAGE 2 - MODELING----------------*/
#modeling {
	position: absolute;
	height: 550px;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

.model-content {
	display: flex;
	justify-content: space-between;
	width: 800px;
	height: 270px;
/*	margin: 20px 0;*/
}

.model-text-wrap, .model-img-wrap {
	height: 300px;
/*	width: 40%;*/
	overflow: hidden;
	
}

.model-text-wrap {
	margin-left: 10%;
	margin-top: 25px;
}

.model-img-wrap {
	margin-right: 7%;
}

.model-text {
	font-family: 'Roboto';
	letter-spacing: 3px;
	line-height: 10px;
	font-weight: lighter;
	padding-top: 45px;
	line-height: 25px;
}

.jux-wrapper {
	overflow: hidden;
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.juxtapose {
	width: 800px;
	height: 209px;
}

#jux-cover{
	background-color: #010723;
	position: absolute;
	height: 20px;
	width: 801px;
	margin-top: 185px;
}

/*---------PAGE 3 - INFOGRAPHIC------------*/
#infographics {
	width: 100%;
	height: 550px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
}

.info-text {
	margin-top: 25px;
	font-family: 'Roboto';
	letter-spacing: 3px;
	font-weight: lighter;
}

.info-visual {
	border-left: 3px solid white;
	border-bottom: 3px solid white;
	height: 350px;
	width: 800px;
	background-color: darkgrey;
	opacity: .2;
}

.info-data {
	border: 1px solid white;
	padding: 24px 0;
	width: 99.8%;
	-webkit-transition: background-color 1.2s ease-in; /* For Safari 3.1 to 6.0 */
    transition: background-color 1.2s ease-in;
}

/*
.vertical-div{
	margin-top: 180px;
	margin-left: 15px;
	position: absolute;
	width: 20px;
	height: 170px;
	background-color: navy;
	opacity: .7;
}
*/

.vertical-div:hover {
	background-color: deeppink;
	-webkit-transition: background-color .2s ease-in; /* For Safari 3.1 to 6.0 */
    transition: background-color .2s ease-in;
	
}

.info-data:hover {
	background-color: yellow;
	-webkit-transition: background-color .2s ease-in; /* For Safari 3.1 to 6.0 */
    transition: background-color .2s ease-in;
}

/*---------PAGE 4 - WORK------------*/
#portfolio {
	overflow: scroll;
	width: 760px;
	height: 550px;
	display: flex;
	justify-content: center;
/*	position: absolute;*/
	margin: 0 auto;
/*	align-self: center;*/
	flex-wrap: wrap;
}

.work-slide {
	width: 250px;
	height: 250px;
	text-align: center;
	opacity: .6;
	-webkit-transition: opacity 1.2s ease-in; /* For Safari 3.1 to 6.0 */
    transition: opacity 1.2s ease-in;
	position: relative;
}


.work-img{
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.work-desc {
	position: absolute;
	font-weight: lighter;
	letter-spacing: 3px;
	border-bottom: 1px solid white;
	bottom: 20px;
    left: 50%;
	transform: translate(-50%, -50%);
	padding-bottom: ;
}

.work-sub-desc {
	font-family: 'Roboto';
	color: gray;
	letter-spacing: 2px;
	position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}



.work-slide:hover {
	opacity: 1;
	-webkit-transition: opacity .2s ease-in; /* For Safari 3.1 to 6.0 */
    transition: opacity .2s ease-in;
    box-shadow: 10px 10px 30px #565656;
    transition:  box-shadow .5s ease-in-out;
    -moz-transition:  box-shadow .5s ease-in-out;
    -webkit-transition:  box-shadow .5s ease-in-out;
    transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -webkit-transition: opacity .5s ease-in-out;
}

#portfolio::-webkit-scrollbar {
    width: 3px;
}
 
#portfolio::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(63,0.9);
}
 
#portfolio::-webkit-scrollbar-thumb {
  background-color: white;
  outline: 1px solid slategrey;
}