/**************** homepage *************/
header{
	margin-top: 50px;
	margin-bottom: 100px;
}
body{
	background-color: #f5f4f3;
	margin:0;
}
footer{
	margin: 0% 25% 5% 25%;
}
#name{
	font-family: 'Share','Arvo';
	font-size: 1.5em;
	/*font-weight: bolder;*/
	color: rgb(196,66,74);
	text-align:center;
}
.decoration{
	color:gray;
	text-align:center;
}
main{
	top: 0px;
	display: block;
	width: 982px;
	height: 1000px;
	padding: 0px;
	position: relative;
	margin: auto;
	z-index: 2;
}
.container{
    width: 1080px;
    height: 600px;
    padding-left: 15%;
}
.copyright{
	font-family: 'Share','Abel';
	font-size: 12px;
	padding-top: 2%;
	color: gray;
}
.sectionsize{
	height:550px;
/*    width: 100%;*/
	overflow: hidden;
}
#museumism, #mathers,#hangingroll,#flashlight,#renewingframe,#venue,#clutteringmanager,#magiccube,#graphic,#methods{
	display: block;
	position: absolute;
}

#hangingroll,#renewingframe,#magiccube,#graphic{
	width: 145px;
	height:145px;
	background-repeat: no-repeat;
	transition: 0.3s ease-in-out;
	padding:6px;
}
#venue,#mathers,#museumism,#clutteringmanager,#flashlight,#methods{
	width:306px;
	height:306px;	
	background-repeat: no-repeat;
	transition: 0.3s ease-in-out;
	padding: 6px;
}
#museumism{
	left: 0px;
}
#mathers{
	left: 322px;
}
#hangingroll{
	left: 644px;
}
#renewingframe{
	left: 805px;
}
#venue{
	top: 322px;
}
#methods{
    top:644px;
}
#clutteringmanager{
	left: 322px;
	top: 322px;
}
#flashlight{
	left: 644px;
	top: 161px;
}
#magiccube{
	left: 644px;
	top: 483px;
}
#graphic{
	left:805px;
	top: 483px;
}
#museumism{
	background-image: url(../image/thumbnail_museumism_0.png);
}
#museumism:hover{
	background-image: url(../image/thumbnail_museumism_1.png);
}
#mathers{
	background-image:url(../image/thumbnail_mathers_0.png);
}
#mathers:hover{
	background-image:url(../image/thumbnail_mathers_1.png);
}
#renewingframe{
	background-image:url(../image/thumbnail_renewingframe_0.png);
}
#renewingframe:hover{
	background-image:url(../image/thumbnail_renewingframe_1.png);
}
#hangingroll{
	background-image:url(../image/thumbnail_hangingroll_0.png);
}
#hangingroll:hover{
	background-image:url(../image/thumbnail_hangingroll_1.png);
}
#flashlight{
	background-image:url(../image/thumbnail_flashlight_0.png);
}
#flashlight:hover{
	background-image: url(../image/thumbnail_flashlight_1.png);
}
#graphic{
	background-image:url(../image/thumbnail_graphic_0.png);
}
#graphic:hover{
	background-image:url(../image/thumbnail_graphic_1.png);
}
#venue{
	background-image:url(../image/thumbnail_venue_0.png);
}
#venue:hover{
	background-image:url(../image/thumbnail_venue_1.png);
}
#clutteringmanager{
	background-image:url(../image/thumbnail_clutteringmanager_0.png);
}
#clutteringmanager:hover{
	background-image:url(../image/thumbnail_clutteringmanager_1.png);
}
#magiccube{
	background-image: url(../image/thumbnail_magiccube_0.png);
}
#magiccube:hover{
	background-image:url(../image/thumbnail_magiccube_1.png);
}
#methods {
    background-image: url('../image/thumbnail_methods_0.png');
}
#methods:hover {
    background-image: url('../image/thumbnail_methods_1.png');
}

#headshot{
	position: relative;
	top: -140px;
	width: 18%;
}
.footerintro{
	margin-top: 5%;
	font-size: 15px;
	font-family: 'Abel';
	color:gray;
	line-height: 25px;
}
.link{
	border-bottom: 1px dotted gray;
}
.link>a{
	text-decoration:none;
	color: gray;
}
.link>a:hover{
	color:rgb(196,66,74);
}
.go{
	color: rgb(196,66,74);
}

/**************** musuemism *************/

.museumismsection{
	background-color:#72C4C0; 
	overflow: hidden;
}
#museumismproblem{
	width: 80%;
    position:relative;
    padding-left: 10%;
    top: -10px;
}
#problemtitle{
	font-family:'Roboto Slab','Arvo';
	font-size:1.8em;
	z-index:10; 
	position:relative;
	top: 20px;
	color: white;
	}
#problemlist{
	position: relative;
	top: -710px;
	z-index: 99;
    right:-50px;
}
#problemlist>h4>a{
	text-decoration: none;
	color: #333333;
	font-size: 18px;
}
.museumismintro{
	padding-left: 64%;
	color: gray;
	font-family: 'Abel';
	font-size: 15px;
	line-height: 20px;
}
#museumismtaskflow{
	height: 75%;
    position: relative;
    top: -70px;
	display: block;
    padding-left: 10%;
}
.maincentertext{
	font-family:'Abel';
	font-size:18px; 
	margin:5% 15% 5% 10%; 
	color:gray; 
	line-height:26px;
	letter-spacing:1.2px;
}
#museumismsketch{
	width: 75%;
    display: block;
    position: relative;
    top: -40px;
    padding-left: 10%;
}
.collapse {
  display: none;
}

.collapse.in {
  display: block;
}

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition: height 0.35s ease;
          transition: height 0.35s ease;
}

/**************** hangingroll *************/

.hangingrollsection{
	background-color: #ABABA4;
	display: block;
}
#hangingrolltitleimg{
	width: 45%;
	position: relative;
	top: -300px;
	right: -40%;
}
#hangingrollbackground{
	width: 35%;
	margin-left: 8%;
	vertical-align: middle;
	position: relative;
	top: -180px;
}
#hangingrolluser{
	width: 55%;
	padding-left: 25%;
    position: relative;
    top: -60px;
}
.column{
	font-family: 'Abel';
	font-size: 15px;
	color: gray;
	display: inline-block;
	width: 250px;
	padding-top: 0;
	padding-right: 5%;
	line-height: 20px;
	vertical-align: top;
}
.hangingrollslide{
	width: 85%;
	padding-left: 5%;
}

/**************** mathers *************/
.matherssection{
	background-color: rgb(196,50,74);
}
.eightsection{
background-color: #f5f4f3;
}
.mathersmainintro{
	font-family:'Abel';
	letter-spacing:1px;
	font-size: 16px;
	line-height: 20px;
	color: white;
	width: 300px;
}
#matherstitleimg{
	width: 58%;
	position: relative;
	top: -365px;
	margin-left: 38%;
}
#addie{
	width: 45%;
	position: relative;
	vertical-align: top;
	padding-left: 3%;
}
#matherscurrent{
	width: 55%;
	position: relative;
	top: -70px;
	vertical-align: top;
	padding-left: 3%;
}
#matherscardsort{
	width: 50%;
	position: relative;
	top: -100px;
	vertical-align: middle;
	padding-left: 3%;
}
#mathersmockup{
	width: 90%;
	position: relative;
	padding: 2% 5% 3%;
}
#mathersvisual{
	width: 80%;
	position: relative;
	padding: 2% 5% 3%;
}
/**************** renewingframe *************/
.framesection{
	background-color: rgb(166,160,236);
}
#framebackground{
	width: 28%;
	position: relative;
	padding-left: 10%;
	vertical-align: middle;
	top: -100px;
}
#framestoryboard{
	width: 80%;
}
#framewireframe{
	width: 90%;
	padding-top: 2%;
}
/**************** flashlight *************/
.flashlightsection{
	background-color:#b6b147;
}
#flashlighttitleimg{
	width: 42%;
	position: relative;
	top: -380px;
	margin-left: 45%;
}
#flashlightsketch{
	width: 70%;
    padding-left: 10%;
    position: relative;
    top: -40px;
}
#flashlightmaterial{
	width: 55%;
    padding-left: 5%;
}
#flashlightbrainstorming{
	width: 60%;
	padding-left: 15%;
    position: relative;
    top: -30px;
}
#flashlightideation1{
	width: 42%;
	padding-left: 8%;
	position: relative;
	vertical-align: middle;
}
#flashlightideation2{
	width: 45%;
	padding-left: 8%;
	position: relative;
	vertical-align: middle;
}
.subtitle{
	color: gray;
	font-family: 'Arvo';
	font-size: 18px;
	line-height: 25px;
	padding-top: 1%;
}
#flashlightflow1{
	width: 80%;
	padding:2% 5% 5%;
}
#flashlightflow2{
	width: 75%;
	padding: 2% 5% 0;
}
#flideationintro{
	width: 350px;
}
#flashlighteffect1{
	width: 35%;
	padding-left: 8%;
	vertical-align: top;
}
/**************** venue *************/
.venuesection{
	background-image: url(../image/venuetitleimg.png); 
}
#venuebackground{
	width: 40%;
	margin-left: 10%;
	vertical-align: top;
}
#venuecurrent{
	width: 55%;
	margin-left: 4%;
	vertical-align: top;
	position: relative;
	top: -80px;
}
#venuevisualdesign{
	width: 100%;
}
/**************** clutteringmanager *************/
.clutteringsection{
	background-color:#FF6600;
}
.mainhead{
	font-family:'Roboto Slab';
	font-size: 2.4em;
	color: white;
	padding:7% 0 3%;
	margin:0;
}
.mainintro{
	font-family:'Abel';
	letter-spacing:1.5px;
	font-weight: lighter;
	font-size: 18px;
	color: white;
	width: 300px;
	line-height: 25px;
}
#clutteringtitleimg{
	height: 105%;
	position: relative;
	top: -300px;
	right: -55%;
}
.secondsection{
	background-color: white;
}
.sectiontitle{
	font-family:'Roboto Slab';
	font-size: 1.8em;
	color: #313131;
	padding: 3% 0;
}
.nobottommargin{
	margin-bottom: 0;
}
.sectionintro, .visualintro{
	font-size: 17px;
	font-family: 'Abel';
	color: gray;
	line-height: 22px;
}
.leftside{
	width:400px;
	display: inline-block;
}
.centertext{
	text-align: center;
    margin: 2% 20% 0 10%;
}
#clutteringresearch{
	float: right;
	margin-right: 15%;
	display: inline-block;
	width: 40%;
    position: relative;
    top: -100px;
}
.thirdsection{
	background-color:#f5f4f3;
}
.fourthsection{
	background-color:white;
}
#clutteringflowchart{
	width:90%;
	position: relative;
    top:-40px;
}
#flowtitle{
	margin-bottom: 0;
}
.storyboard{
	border-radius: 8px;
	margin-top: 2%;
    position: relative;
}
#sd1{
    padding-top: 2%;
	margin-left: 5%;
    height: 30%;
}
#sd2,#sd3{
    padding-top: 2%;
	margin-left: 2%;
    height: 30%;
}

.fifthsection{
	background-color:#f5f4f3;
}
#clutteringsketch{
    padding-left: 5%;
	width: 85%;
}
.sixthsection{
	background-color:white;
}
#clutteringmockup{
	width: 70%;
	padding-left: 10%;
}
.seventhsection{
	background-color: #f5f4f3;
}
#clutteringwireframe{
	padding-left: 10%; 
    width:70%;	
    position: relative;
    top: -50px;
}
#visualtitle{
	color:white;
}
.visualintro{
	vertical-align: baseline;
}
#clutteringvisual{
	width: 60%;
	position: relative;
	top:-200px;
    padding-left: 25%;
}
.lastsection{
	height: 250px;
	width: 1440px;
	background-color:#f5f4f3;
}
.backhome{
	font-family: 'Share';
	font-size: 1.5em;
	padding-top: 5%;
}
.backhome>a{
	text-decoration: none;
	color:rgb(196,66,74);
}
.lastsectionintro{
	margin-left: 1%;
	vertical-align:top;
}
.up{
	margin-left: 10%;
	font-family: 'Share';
	font-size: 0.8em;
	vertical-align:top;
}
.up>a{
	text-decoration: none;
	color:rgb(196,66,74);
}
/**************** magiccube *************/
.magiccubesection{
	background-image: url(../image/magiccubetitleimg.png);
}
#magiccubegraphic{
	padding-left: 8%;
	width: 42%;
	vertical-align: top;
	position: relative;
	top: -90px;
}
#magiccubeprocess{
	width: 85%;
    position: relative;
    top:-30px;
}
#magiccubefinal{
	width: 48%;
	padding-left: 8%;
}
/**************** graphic *************/
.graphicsection{
	background-color: black;
}
#graphictitleimg{
	width: 45%;
	position: relative;
	top: -255px;
	right: -40%;
}
#candyear, #divingincity{
	width: 45%;
	padding-left: 2%;
	vertical-align: baseline;
	position: relative;
	top: -410px;
	right: -450px;
}
.label{
	padding-left: 30%;
	padding-top: 4%;
	color: gray;
	font-family: 'Abel';
	font-size: 13px;
}
/**************** about *************/
#aboutsection{
	margin-left: 15%;
	margin-right: 15%;
}
.abouttitle{
	padding: 0 15% 2%;
	color: rgb(196,60,74);
	font-family:'Roboto Slab';
	font-size: 1em;
}
.aboutintro{
	font-size:15px; 
	padding: 0 15% 3%;
}
hr{
	width: 250px;
	border: 1px dotted #C4C3C2;
}
#abouttag{
	margin: 0 20% 2%;
	width: 60%;
}

/**************** carousel - bootstrap *************/
.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-inner > .item {
  position: relative;
  display: none;
  -webkit-transition: 0.6s ease-in-out left;
          transition: 0.6s ease-in-out left;
}

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  height: auto;
  max-width: 100%;
  line-height: 1;
}

.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
  display: block;
}

.carousel-inner > .active {
  left: 0;
}

.carousel-inner > .next,
.carousel-inner > .prev {
  position: absolute;
  top: 0;
  width: 100%;
}

.carousel-inner > .next {
  left: 100%;
}

.carousel-inner > .prev {
  left: -100%;
}

.carousel-inner > .next.left,
.carousel-inner > .prev.right {
  left: 0;
}

.carousel-inner > .active.left {
  left: -100%;
}

.carousel-inner > .active.right {
  left: 100%;
}

.carousel-control {
  position: relative;
  top: 50%;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  opacity: 0.5;
  filter: alpha(opacity=50);
}

.carousel-control:hover,
.carousel-control:focus {
  color: #ffffff;
  text-decoration: none;
  outline: none;
  opacity: 0.9;
  filter: alpha(opacity=90);
}

.carousel-indicators {
  position: relative;
  left: 50%;
  z-index: 15;
  width: 60%;
  margin-left: -30%;
  text-align: center;
  list-style: none;
  top: 700px;
}

.carousel-indicators li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 1px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #000 \9;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #DF4F4F;
  border-radius: 10px;
}

.carousel-indicators .active {
  width: 12px;
  height: 12px;
  margin: 0;
  background-color: #DF4F4F;
}

.fa-chevron-left, .fa-chevron-right{
	display: inline-block;
    top: -400px;
}
.fa-chevron-left{
    position: absolute;
    right: -120px;
}
.fa-chevron-right{
    position: absolute;
    right: -900px;
}

#matherstest {
    width: 35%;
    padding-left: 8%;
    vertical-align: top;
    position: relative;
    top: -40px;
}

#museumismvisual {
    width: 95%;
    display: block;
    position: relative;
    top: -20px;
}

#museumismtitleimg {
    width:42%;
    padding-left: 10%;
    position: relative;
    top:-360px;
    right: -40%;
}

#museumismstoryboard {
    width: 90%;
    position: relative;
    top: -70px;
}

#museumismresearch {
    width:53%;
    padding-left: 3%;
    vertical-align: top;
    position: relative;
    top: -75px;
}

#museumismvideo {
    margin-left: 50%;
    position: relative;
    top: -320px;
    vertical-align: top;
}

#venuewireframe {
    width: 100%;
}

#titleimgmac {
    width:80%;
    padding-left: 5%;
    position: relative;
    top:-335px;
    right: -25%;
}

#venuesitemap {
    width: 65%;
    padding-left: 13%;
    top: -70px;
    position: relative;
}

#venueganttchart {
    width: 70%;
    padding-left: 10%;
}

.smartkitchensection {
    background-image: url(../image/skbackground.png);
}

.skcarousel {
}

.skprocedure {
  width: 50%;
  padding-left: 5%;
}

.skcarouselcontainer {
    width:500px;
    padding-left: 7%;
    position: relative;
    top: -55%;
    right: -40%;
}