@import url("hover.css");

/* ####################
   BODY
   #################### */
body {
	margin:0; padding:0;
	font-family: 'Open Sans', sans-serif;
	font-weight:300;
	color:#484e6f;
}


a { color:#0068a2; }

h2 { color:#4f376d; }

h2 {
	font-size:3em;
	font-weight:800;
	margin:0 auto;
	text-align:center;
}
h3 { color:#484e6f; }

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

a.button {
	border-radius: 10px;
	border:solid 2px #4f376d;
	padding:10px 30px;;
	color:#4f376d;
	display:inline-block;
	margin:0 auto;
	text-align:center;
	text-decoration:none;
	font-weight:800;
}

a.button:hover {
	background:#ede9ee;
    -webkit-transition: background-color .5s, color .5s;
    -moz-transition: background-color .5s, color .5s;
    -o-transition: background-color .5s, color .5s;
    -ms-transition: background-color .5s, color .5s;
    transition: background-color .5s, color .5s;
}

.button span {
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: 30px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 30px;
}

.button:hover span:after {
	color:#4f376d;

  opacity: 1;
  right: 0;
}

/* ####################
   HERO
   #################### */


#hero {
	background:url(../images/header-photo.jpg) top center fixed;
	background-size:cover;
	position:relative;
	margin:0;
	padding:30px 0 0 0;

 }

#logo {
	background-image: url(../images/de-logo.png);
	background-size: 90px 90px;
	background-repeat: no-repeat;
	display: block;
	width: 90px;
	height: 90px;
	margin:30px auto 0 auto;
	display:block;
}

#logo a { width:90px; height:90px; display:block; text-indent:-9999px; }

#back {
	background-image: url(../images/icon-back.png);
	background-size: 90px 90px;
	background-repeat: no-repeat;
	width: 90px;
	height: 90px;
	margin:30px auto 0 auto;
	display:block;
}

#back a { width:90px; height:90px; display:block; text-indent:-9999px; }
#back.margin-20 { margin-bottom:30px; }
#logo h1 { margin:0; padding:0; text-indent:-9999px; }
 #header {
  width:100%;
  font-weight:300;
  color:#fff;
font-size:50px;
height:60%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
    -ms-flex-align: center;
        align-items: center;
 }

#header img {

    max-width: 100%;
    height: auto;
	margin:0 auto;
	padding:0;

}
 #header strong { font-weight:800; }

 #header > div {
    max-width:1280px;
    margin:0 auto;
	padding:0 50px;
 }
 #header div > div {
	width:70%;
}

#header div.element { display:inline; text-decoration:underline;}
#header p {margin:0; }
#downArrow {
  padding:20px 0;
  display:block;
  width:100%;
  position:absolute;
  bottom:50px;
color:#fff;
}

#downArrow div {
	margin:0 auto;
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 30px solid #ffffff;
}

/* ####################
   FORM
   #################### */

input[type="text"], input[type="password"], select, textarea {
	padding:15px;
	display:inline-block;
	border:solid 2px #999;
	border-radius:7px;
	font-size:20px;
  font-family:robotolight;
	color:#333;
  width:150px;
  margin-right:20px;
	background:#fff;
}


input[type="submit"] {
	border:solid 2px #6eb642;
	border-radius:7px;
	background:#7ebe40;
	font-size:20px;
  font-family:robotolight;
	color:#fff;
	padding:15px 50px;
	cursor:pointer;
	-webkit-appearance: none;
	-moz-appearance: none;

}

input[type="submit"]:hover {
	background:#94d555;
}



/* ####################
   My Experience
   #################### */

#myExperience {
  background:#fff;
	font-size:1.3em;
}



#myExperience > div {
  max-width:1280px;
  padding:75px 50px;
  margin:0 auto;
  text-align:left;
}
.center.bound { margin: 0 30%; font-size:1.5em; }

#myExperience p.center {
	text-align:center;
}
#myExperience section {
	float:left;
	width:30%;
	padding-right:5%;
	font-size:.8em;
	line-height:1.6em;
}

#myExperience section:last-of-type {
	width:30%;
	padding-right:0;
}

#myExperience h3 {
	font-size:2em;
	margin:.5em 0 0 0;
	text-align:center;
}


.icon:before {
	content:" ";
	display: block;
	width: 100px;
	height: 100px;
	margin:30px auto 0 auto;
	display:block;
}

.icon-design:before {
	background:url(../images/icon-design.png) no-repeat;
	background-size: 100px 100px;
}

.icon-web:before {
	background:url(../images/icon-web.png) no-repeat;
	background-size: 100px 100px;
}

.icon-collaborate:before {
	background:url(../images/icon-collaborate.png) no-repeat;
	background-size: 100px 100px;
}

/* ####################
   My Portfolio
   #################### */
#myPortfolio {
  background:#ede9ee;
	font-size:1.3em;
}


#myPortfolio > div {
  max-width:1280px;
  padding:75px 50px;
  margin:0 auto;
  text-align:left;
}

#myPortfolio section {
float:left;
width:48%;
}

#myPortfolio section:nth-child(odd) {
padding-right:4%;
}




#myPortfolio section img {
    max-width: 100%;
    height: auto;
	margin:0 auto;
	padding:0;
}

/* ####################
   CTA
   #################### */
#CTA {
  background:url(../images/icons.png)  fixed;
	font-size:1.3em;
}


#CTA > div {
  max-width:1280px;
  padding:75px 50px;
  margin:0 auto;
  text-align:left;
}

/* ####################
   Footer
   #################### */
#footer {
  background:#594870;
	font-size:1em;
	color:#847993;
	font-weight:800;
}

#footer a { color:#847993; }
#footer a:hover { color:#8f82a0;  }

#footer > div {
  max-width:480px;
  padding:75px 50px;
  margin:0 auto;
  text-align:left;
}


#logoFooter {
	background-image: url(../images/de-logo-20percent.png);
	background-size: 90px 90px;
	background-repeat: no-repeat;
	display: block;
	width: 90px;
	height: 90px;
	margin:0 auto 50px auto;
	display:block;
}

/* ####################
   Case Study
   #################### */

#caseStudy {
  background:#fff;
	font-size:1.3em;
}


#caseStudy > div {
  max-width:680px;
  padding:220px 50px 200px 50px;
  margin:0 auto;
  text-align:left;
}

#caseStudy h2 { font-size:2em; font-weight:500; border-bottom:solid 1px #ccc; padding-bottom:15px;  }


.portfolioSlide {
	padding:75px 50px;
	text-align:center;
}

.portfolioSlide img {
    width: 100%;
    height: auto;
	margin:0 auto;
	padding:0;
	display:block;
}

.portfolioSlide img.noresize { width:auto; max-width:100%; }

.portfolioSlide .extraInfo {
	width:20%;
	float:left;
	text-align:left;
}



.portfolioSlide .portImg {
	width:80%;
	float:left;
}
.portfolioSlide .p50 {
	width:50%;
}
.portfolioSlide .t50 {
	width:40%;
	padding:0 5%;
}

.portfolioSlide .p40 {
	width:40%;
}
.portfolioSlide .t60 {
	width:50%;
	padding:0 5%;
}

.portfolioSlide .portImgLeft {
	width:60%;
	float:left;
}
.portfolioSlide .portImgLeft video, .portfolioSlide .portImg video {
max-height:842px;
}
.portfolioSlide .extraInfoRight {
	width:40%;

	float:left;
	text-align:left;
}
.portfolioSlide .extraInfoRight div {
max-width:300px;
}



/* ####################
   Ventura County Wine Trail
   #################### */

.vcwt#hero {
	background:url(../../work/venturacountywinetrail/images/vcwt.png) top center;
	background-size:cover;
 }

.vcwt #header { color:#743300; }
.vcwt #header strong { color:#76a6bc; }

.vcwt #header div > div {
	width:55%;
}

/* ####################
   TurboTax
   #################### */

.tt#hero, .kal#hero {
	background:url(../../work/turbotax/images/tt-bg.jpg) top center;
	background-size:cover;
 }

.tt #header { color:#005bbb; }
.tt #header strong { color:#ce171f; }

.tt #header div > div, .kal #header div > div  {
	width:50%;
	float:left;
}


.kal #header { color:#333; }
.kal #header strong { color:#54b948; }
/* ####################
   Let Freedom Ring
   #################### */

.lfr#hero {
	background:url(../../work/letfreedomring/images/lfr.jpg) top center;
	background-size:cover;
 }

.lfr #header { color:#307fa2; }
.lfr #header strong { color:#df354a; }

.lfr #header div > div {
	width:50%;
	float:left;
}

/* ####################
   Innovation Conference
   #################### */

.iic#hero {
	background:url(../../work/intuitinnovationconference/images/iic.jpg) top center;
	background-size:cover;
 }

.bigd#hero {
	background:url(../../work/bigdesign/images/bigd.jpg) top center;
	background-size:cover;
 }

.diin#hero {
	background:url(../../work/diinnovationconference/images/diin.jpg) top center;
	background-size:cover;
 }

.diin #header div > div {
	width:50%;
}


.fd#hero {
	background:url(../../work/firstdigital/images/fd.jpg) top center;
	background-size:cover;
 }

.fd #header div > div {
	width:50%;
}

.es#hero {
	background:url(../../work/easystart/images/es.jpg) top center;
	background-size:cover;
 }

.es #header div > div {
	width:50%;
}

.ds#hero {
	background:url(../../work/marketingdesignsystem/images/ds.png) top center;
	background-size:cover;
 }

.ds #header div > div {
	width:50%;
}

.di#hero {
	background:url(../../work/digitalinsight/images/di.jpg) top center;
	background-size:cover;
 }

.hrz#hero {
	background:url(../../work/herzog/images/hrz.jpg) top center;
	background-size:cover;
 }

.lac#hero {
	background:url(../../work/lacare/images/lac.jpg) top center;
	background-size:cover;
 }

 .rt#hero {
 	background:url(../../work/rapidtesting/images/rt.jpg) top center;
 	background-size:cover;
  }

 .rt #header {
	 color:#333;
 }
.downArrow {
  padding:20px 0;
  display:block;
  width:100%;

color:#ccc;
}

.downArrow div {
	margin:0 auto;
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 30px solid #ccc;
}

.animatedArrow {
  -webkit-animation-name: bounceIn;
  -webkit-animation-duration: 6s;
  -webkit-animation-iteration-count: 20;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;

  animation-name: bounceIn;
  animation-duration: 6s;
  animation-iteration-count: 20;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

/*
 * Animation for webkit
*/
@-webkit-keyframes bounce {
    0%, 100% {-webkit-transform: translateY(0);}
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateY(-10px);}
    20%, 40%, 60%, 80% {-webkit-transform: translateY(0px);}
}

@keyframes bounce {
    0%, 100% {transform: translateY(0);}
    10%, 30%, 50%, 70%, 90% {transform: translateY(-10px);}
    20%, 40%, 60%, 80% {transform: translateY(0px);}
}

/*
 * Adding the animation to our element
*/
.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
}
/* ############################################################################# */
/* RESPONSIVE */
/* ############################################################################# */
@media screen and (max-width: 768px),
(max-device-width: 768px) {

.portfolioSlide .extraInfo {
	width:100%;
	float:none;
	text-align:left;

}

.portfolioSlide .portImg {
	width:100%;
	float:none;
}



	input[type="text"], input[type="password"], select, textarea {
	padding:10px;
	display:block;
	font-size:18px;
  margin:0 auto 5px auto;
}


input[type="submit"] {
	font-size:18px;
	padding:10px 40px;

}
#hero {
  background-size:cover;
  position:relative;
 }
		#login div span { display:block; }

.50  { width: 100%; }


/* ####################
   My Experience
   #################### */

 #header div > div, .vcwt #header div > div, .lfr #header div > div, .tt #header div > div, .kal #header div > div, .diin #header div > div {
	width:auto;
}

.vcwt #header, .lfr #header, .tt #header, .kal #header, .diin #header {
}
#myExperience {

}
#myExperience section {
	float:none;
	width:100%;
	padding-right:0;
}

#myExperience section:last-of-type {
	width:auto;
}

#myExperience h3 {
	font-size:2em;
	margin:.5em 0 0 0;
	text-align:center;
}




}

@media screen and (max-width: 480px),
(max-device-width: 480px),
(-o-min-device-pixel-ratio: 3/2), print {

#caseStudy > div {    padding:120px 50px 100px 50px; }
.vcwt#hero, .lfr#hero, .iic#hero, .tt#hero, .di#hero, .fd#hero, .diin#hero, .kal#hero, .lac#hero, .hrz#hero      { padding-bottom:150px;  }
#downArrow { display:none; }
#myPortfolio section {
float:none;
width:100%;
}

#myPortfolio section:nth-child(odd) {
padding-right:0%;
}

.portfolioSlide .extraInfo {
-webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
}
	 #header { font-size:2em; }
	.popUpDiv {
 max-width:300px;
}

h2 {
	font-size:2.2em;
}

}