/*general*/
/*@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');*/
/*@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700');*/
@import url('https://fonts.googleapis.com/css?family=Lusitana:400,700');


html{
	height: 100vh;
	font-family: 'Roboto', sans-serif;

}

.center{
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.left{
	text-align: left;
}

.container{
	color:rgb(64, 64, 64);
}

ul{
	/*margin-left: 5rem;*/
	list-style: disc;
}

a{
	text-align: center;
}
h1,h2,h3,h4,h5,h6{
	font-family: 'Lato', sans-serif;
	/*font-family: 'Lusitana', serif;*/
	/*font-family: 'Roboto', sans-serif;*/
	/*font-family: 'Montserrat', sans-serif;*/
}

h1
{
	text-align:center;
	margin-top: 1em;
	margin-bottom:1em;
	font-weight:900;
}

h2,h3,h4,h5,h6{
	font-size: 2.0rem;
	font-weight: 700;
	margin-bottom: 4rem;

}

h4{
	font-size: 2.4rem;

	margin-bottom: 2rem;
}

h5{font-size:2.4rem;}

h2{
	font-size: 3.2rem;
	letter-spacing: 1px;
	text-align: left;

}

h3{
color: rgb(181, 181, 181);
font-size: 2rem;
text-align:  left;
font-weight: 300;
}


p{
	margin-top: 0;
	/*font-family: 'Roboto', sans-serif;*/

}

section{

	padding-top: 8%;
	padding-bottom: 8%;
}

.red{
	color: #F88469;
}
/*.center{
	margin:0 auto;
}*/

.light{
	color:rgba(219, 219, 219,0.9);
}

.fadeInBlock {
    opacity:0;
}

.padding{
	margin-top: 12rem;
	margin-bottom: 6rem;
}

div.box{
	padding: 2rem 1rem 0;
	border:solid 1px rgb(227, 221, 221);
}

ul li{
	list-style-position: outside;
	margin-left: 1em;
}
img{
	margin-bottom: 4rem;
}

.shadow{
	box-shadow: 0px 0px 36px lightgrey;
}

.section{
	padding-bottom: 12%;
}

/*--------------------*/

/*navigation bar*/

.navbar {
    position: fixed;
		width: 100vw;
    top: 0;
    left: 0;
		z-index: 100;
	}

div.nav{
		width: 100vw;
		top: 0;
		padding-top: 1em;
		padding-bottom: 0.4em;
}


#name{
	font-size: 2.4rem;
	color:rgb(61, 61, 61);
	font-weight: 700;
	text-align: left;
}

a.header-nav{
	font-size: 0.7em;
	font-weight: 300;
	color:rgb(131, 131, 131);
}

a.header-nav:hover{
	font-weight:700;
	color:rgb(61,61,61);
}



/*coverpage*/
svg{
	z-index: 1;
	position: absolute;
	left: 0;
	top: 0;
}

.coverpage-text{


padding: 0;
margin: 0;
text-align: left;
}

div.coverpage-text{
	padding-top: 40vh;
	}
.coverpage-text{
	z-index: 20;
}
h1.coverpage-text{

padding-top: 0.2em;
padding-bottom: 0.4em;
font-size: 5.4rem;
font-weight: 700;
text-align: center;
letter-spacing: 2px;


}
h1.coverpage-text,h6.coverpage-text{
	position:relative;
}

div.coverpage{
	margin-top:5%;
	height: 90vh;
	background-color: rgb(249, 244, 244);

	background-size:contain;
	background-repeat: no-repeat;
	overflow: hidden;
}

div.coverpage-text{
	margin-top: 10%;

}

/*--------------*/


/*footer*/

p.copyright{

	font-size: 1.2rem;
	color: rgb(139, 139, 139);

}

footer{
	position: relative;
	bottom: 0%;
	padding: 1%;
}

.socialmedia{
	padding: 16px;
	width: 24px;
	margin-bottom: 0;
}



/*--------------*/



.project{
	padding: 3%;
}

.projectfigure{
	/*border-radius: 2%;*/
	margin-bottom: 0;
}

/*index project animation*/

div.project-tooltip{
	text-align: center;
	position: relative;
}

.project-tooltip .project-caption{
	text-align: left;
	display: none;
	position: absolute;
	bottom: 7px;
	padding-left: 10%;
	padding-right: 40%;
	padding-top:22%;
	padding-bottom: 15%;
	/*margin:10px;*/
	color:rgba(232, 232, 232, 0.8);

background-color: rgba(0,0,0,0.6);


	border:2px;
}
div.project-caption{
	height:50%;
}

h2.caption,h4.caption,h5.caption,p.caption{

padding: 0;
margin: 0;

}
h4.caption{
		color:rgba(232, 232, 232,0.9);
	/*color:rgb(53,53,53);*/
}
p.caption{
	font-style: italic;
	font-size: 1.4rem;
}


hr.caption{
	padding: 0;
	border-style: none;
  height: 4px;
  background-color: rgba(235, 235, 235, 0.9);
	/*background-color: rgba(238, 58, 38, 0.5);*/
  width:40%;
}

.project_description{
	text-align: center;
	color: rgb(106, 106, 106);
	padding: 0;
	margin: 0;
	font-size: 1.6rem;
}

p.project_description{
	font-weight: 300;
	opacity: 0.8;
}
h6.project_description{
	padding-top: 1.8rem;
	font-weight: 700;

}



/*Project page*/

/*project overview section*/

div.project-coverpage{
	margin-top:5%;
	height: 80vh;
	background-size: cover;
	background-repeat: no-repeat;
}


.overview-text{
padding: 0;
margin: 0;
text-align: center;
}
h1.overview-text{

padding-top: 0.2em;
padding-bottom: 0.4em;
margin-bottom: 0;
font-weight: 700;

}

.aboutme-text{
	line-height: 6rem;
	color: white;
	text-align: left;
}

h2.aboutme-text{
	font-weight: 200;
	font-size:3.2rem;
	padding-top: 30vh;

}

div.overview-text{
	padding-top: 40vh;
	}


div.vline{
   padding: 0 20px;
  border-width: 0 1px;
  border-style: solid;
  border-color: rgb(181, 181, 181);
}
.emphasis{
  font-weight: bold;
  color: black;
}
.greenemphasis{
  /*font-weight: bold;*/
  color: #51bbdd;
}
.reefemphasis{
	color: #F47474;
}

.reefhighlight{
	 background-color: rgba(244, 116, 116, 0.5);
}
span.superemphasis, p.superemphasis{
  font-weight: bold;
  /*color: #EE3A26;*/
	/*background-color: rgb(226, 230, 69);*/
}

.overview{
	font-size: 1.8rem;
}

h4.overview{
	margin-top: 0;
}

div.overview{
	margin-top: 5em;
}

.sliding{
	display: block;
	position: relative;

	padding-bottom: 3px;
	border: none;
}

.sliding:after {
	content: '';
	display: block;
	margin: auto;
	height: 3px;
	width: 0px;
	background: transparent;
	transition: width .5s ease, background-color .5s ease;
}

.sliding:hover:after{
	width: 100%;
	background-color: #ffce21;
}
/*reef*/


img{
	width: 100%;

}

img.spic{

  width: 30%;
	margin-bottom: 2rem;

}

img.sspic{

  width: 20%;
	margin-bottom: 2rem;

}

img.mpic{
	display: block;
  width: 75%;
	margin-bottom: 2rem;
}


img.sign{

  /*width: 20%;*/
	width: 60%;
	margin-left: 20%;
	margin-right: auto;
	margin-bottom: 0;
}

hr.title{
	margin-left: 0;
	margin-top: 0.5rem;
	margin-bottom: 2.4rem;
	padding: 0;
	border-style: none;
  height: 4px;
	background-color: #ffce21;
  /*background-color: #EE3A26;*/
  width:5%;

}

hr.reeftitle{
	margin-left: 0;
	margin-top: 0.5rem;
	margin-bottom: 2.4rem;
	padding: 0;
	border-style: none;
  height: 4px;
	background-color: #4BCBAE;
  /*background-color: #EE3A26;*/
  width:5%;
}
hr.sectionline{
	margin-left: 0;
	margin-top: 0.5rem;
	margin-bottom: 2.4rem;
	padding: 0;
	border-style: none;
  height: 1px;
	background-color: #e7e7e7;
  /*background-color: #EE3A26;*/
  width:100%;
}

hr.titlecenter{
	margin-left: auto;
	margin-right: auto;
	margin-top: 0.5rem;
	margin-bottom: 4.8rem;
	padding: 0;
	border-style: none;
  height: 4px;
	background-color: #ffce21;
  /*background-color: #EE3A26;*/
  width:5%;

}

hr.ufotitle{
	margin-left: 0;
	margin-top: 0.5rem;
	margin-bottom: 2.4rem;
	padding: 0;
	border-style: none;
  height: 4px;
	background-color: #D0C20F;
  width:5%;

}

.greybackground{
	/*margin: 3% 0%;
	padding:2% 0%;*/
	background-color: rgb(246, 246, 246);
}

.ufodarkbackground{
	background-color: rgb(34,34,34);
}

.darkbackground{
	/*margin: 3% 0%;
	padding:2% 0%;*/
	background-color: rgb(45, 45, 45);
}

.cargobackground{
	/*margin: 3% 0%;
	padding:2% 0%;*/
	background-image: url("../img/cargo-finalbackground.jpg");
}

.greenbackground{
	background-color: #4BCBAE;
}
#reef{
	background-image: url("../img/reefcoverpage.jpg");
	/*background-size: contain;
  background-attachment: fixed;*/
}

#reefaffinity{
	background-image: url("../img/reef-affinitywall-w.jpg");
	background-size: cover;
  background-attachment: fixed;
}

p.note{
	font-size: 1.4rem;
	color: grey;
}

/*Touch in*/

#touch{
	background-image: url("../img/touch_bg.jpg");
}

/*Touch in*/

#cargo{
	background-image: url("../img/cargo_header.jpg");
}

#aore{
	background-image: url("../img/aore_header.jpg");
}

#about{
	background-image: url("../img/about_background.png");
}

#aboutme{
	background-image: url("../img/aboutme_background.png");
	background-attachment: fixed;
}


div.block{
	padding: 1em 2em 0 2em;
	background-color: rgb(244, 241, 241);
}

img.cargo{
	margin: 1.8em auto;
	width: 60%;
}

iframe.cargo{
	margin-top: 1rem;
}

	 #wrap { width: 262.8px; height: 558px; padding: 0; overflow: hidden; }

    #cargo_proto {
			width: 438px; height: 930px; border: none; }
    #cargo_proto {
        -ms-zoom: 0.6;
        -moz-transform: scale(0.6);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.6);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.6);
        -webkit-transform-origin: 0 0;
    }


iframe.aore{
	display: block;
	margin: 0 auto;
}



/*graphic design*/
.circle{

	border-radius: 50%;
	width: 10px;
	height: 10px;
}

#graphicdesign{
	background-image: url("../img/graphic_background.jpg");
}

#bms{
	background-image: url("../img/graphic_background.jpg");
}

#ufo{
	background-image: url("../img/ufo_background.jpg");
}

.ufo{
	color:#D0C20F;
}

a.resume{
	display: block;
	width: 23%;
	font-size: 1.6rem;
	font-weight: bold;
	margin:0 auto;
}
#dowload{
	float:right;
}
#tresume{
	font-size: 2rem;
	text-align: center;
}
#QOC:hover{
	width: 60%;
}

.website a{
	text-align: center;
}
#sketch:hover{
	width:100%;
}
#myphoto{

	margin-left: 22%;
	width: 56%;
	border-radius: 50%;
}
#self_intro{
	margin-top:5%;
}
#prob_photo {
/*box-shadow: 3px 3px 2px grey;*/
margin-bottom: 5%;
}
.reefquote{
	/*border-left: solid 4px rgb(244, 116, 116);*/
	/*padding-left: 2rem;*/
	font-family: "Lusitana", serif;
	color: rgb(122, 122, 122);
}
/*#quote{
	margin: 10em auto;
}
#quote_content{

	font-family: 'Playfair Display', serif;
	font-style: italic;
	font-weight: 400;
	font-size: 1.5em;
}*/
a{
	text-decoration: none;
}
ul.ux_methods{
	list-style: none;
	color: rgb(102, 102, 102);
}
p.ux_methods{
	text-align: center;
	color: rgb(117, 200, 190);
	font-family: 'Open Sans', sans-serif;
}





li.insight{
	list-style: none;
	font-weight: bolder;
}
.test_figure{
	margin-bottom: 5%;
}

#test1{
	margin-top:15%;
	font-weight: bolder;
}
#concepttest1{
	font-weight: bolder;
}
#test3{
	/*margin-top:15%;*/
font-weight: bolder;}

@media (min-width: 400px) {
	/*.socialmedia{
		width: 10%;
	}*/


}


@media screen and (max-width: 600px) {

  .callbacks_nav {
    top: 47%;
    }