body {
    font-family:'Roboto Condensed', 'Lucida Grande', Helvetica, Arial, Sans-Serif;
    margin:0;
    padding:0;
    background-color: #272f32;
}
p {
    margin: 0;
    font-family:'Roboto Condensed', 'Lucida Grande', Helvetica, Arial, Sans-Serif;
}
a, a:visited, a:hover, a:active {
	color: #8d00d4
}

#intro {
    /*background: url(../images/intro.jpg) 50% 0 no-repeat fixed;*/
    margin: 0;
    position: relative;
    background: #09050F url('../images/bg.png');
    padding-bottom: 40px;
    margin: 0 auto;
    text-align:center;
}


#slides {
    margin: 0 auto;
    }
    
.inner-slide {
    min-height: 400px; 
    max-width: 980px;
    margin: 0 auto;
    padding-top: 20px;
}
.inner-slide img {
  width: 500px; 
  float: left;
  margin-right: 20px;
  }

.green-slide {   
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ededed+0,e0e0e0+100 */
background: #ededed; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #ededed 0%, #e0e0e0 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #ededed 0%,#e0e0e0 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #ededed 0%,#e0e0e0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#e0e0e0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}
.white-slide {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100 */
background: #ffffff; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e5e5e5 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e5e5e5 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #ffffff 0%,#e5e5e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#why-danny-header {
    font-size: 36pt; 
    color: #8c48af; 
    text-shadow: 2px 1px 4px #00FFB7, -2px -1px 4px #FFA600; 
    filter: dropshadow(color=#007743, offx=2, offy=2);
}

#fourth {
    margin: 0;
}

#why {
    margin: 0 auto;
    background: #fff;
}

#sixth {
    /*background:url('/images/final-background.JPG') 50% 0 no-repeat fixed;*/
    margin: 0;
    height: 500px;
}
#redBox {
   border-top: 1px solid #fab0a5;
   background: #ff2802;
   background: -webkit-gradient(linear, left top, left bottom, from(#ff5335), to(#ff2802));
   background: -webkit-linear-gradient(top, #ff5335, #ff2802);
   background: -moz-linear-gradient(top, #ff5335, #ff2802);
   background: -ms-linear-gradient(top, #ff5335, #ff2802);
   background: -o-linear-gradient(top, #ff5335, #ff2802);
    padding: 20px 40px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    -moz-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
    color: #000000;
    font-size: 24px;
    text-decoration: none;
    vertical-align: middle;
}
#blueBox {
   border-top: 1px solid #96d1f8;
   background: #0aa3d6;
   background: -webkit-gradient(linear, left top, left bottom, from(#43c1eb), to(#0aa3d6));
   background: -webkit-linear-gradient(top, #43c1eb, #0aa3d6);
   background: -moz-linear-gradient(top, #43c1eb, #0aa3d6);
   background: -ms-linear-gradient(top, #43c1eb, #0aa3d6);
   background: -o-linear-gradient(top, #43c1eb, #0aa3d6);
    padding: 20px 40px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    -moz-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
    color: #000000;
    text-decoration: none;
    vertical-align: middle;
}
#orangeBox {
   border-top: 1px solid #fae2aa;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b0cce5+0,849eb5+40 */
background: #b0cce5; /* Old browsers */
background: -moz-linear-gradient(top, #b0cce5 0%, #849eb5 40%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #b0cce5 0%,#849eb5 40%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #b0cce5 0%,#849eb5 40%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0cce5', endColorstr='#849eb5',GradientType=0 ); /* IE6-9 */

    padding: 20px 40px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    -moz-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
    color: #000000;
    text-decoration: none;
    vertical-align: middle;
}
#greenBox {
    border-top: 1px solid #fadfdf;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a4d6c6+0,8bbfa6+40 */
background: #a4d6c6; /* Old browsers */
background: -moz-linear-gradient(top, #a4d6c6 0%, #8bbfa6 40%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #a4d6c6 0%,#8bbfa6 40%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #a4d6c6 0%,#8bbfa6 40%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4d6c6', endColorstr='#8bbfa6',GradientType=0 ); /* IE6-9 */

    padding: 20px 40px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    -moz-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
    color: #000000;
    text-decoration: none;
    vertical-align: middle;
}
#purpleBox {
    border-top: 1px solid #fadfdf;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#81689b+0,6b5b95+40 */
background: #81689b; /* Old browsers */
background: -moz-linear-gradient(top, #81689b 0%, #6b5b95 40%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #81689b 0%,#6b5b95 40%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #81689b 0%,#6b5b95 40%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#81689b', endColorstr='#6b5b95',GradientType=0 ); /* IE6-9 */

    padding: 20px 40px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    -moz-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
    color: #000000;
    text-decoration: none;
    vertical-align: middle;
}
.glow {
    text-shadow: 0px 0px 60px #fff;
    filter: dropshadow(color=#fff, offx=0, offy=0);
    color: white;
}
.story {
    margin: 0 auto;
    min-width: 980px;
    width: 980px;
}
.columncontainer1 {
    width:800px;
    position:relative;
    border:0px;
    overflow:hidden;
}
.columncontainer2 {
    float:left;
    position:relative;
    right:140px;
}
.columncontainer3 {
    float:left;
    position:relative;
    right:140px;
}
.columncontent1 {
    float:left;
    width:225px;
    position:relative;
    left:280px;
    overflow:hidden;
    height: 400px;
}
.columncontent2 {
    float:left;
    width:225px;
    position:relative;
    left:280px;
    overflow:hidden;
    height: 400px;
}
.columncontent3 {
    float:left;
    width:225px;
    position:relative;
    left:280px;
    overflow:hidden;
    height: 400px;
}
.columncontainer1 h2 {
    font-family:'Roboto Condensed';
    font-size: 14pt;
}
.columncontainer1 p {
    font-family:Helvetica, Arial, sans-serif;
    font-size: 12pt;
    text-shadow: none;
    ;
    filter: none;
}
.button {
    border-top: 1px solid #fadfdf;
    background-color: #6fe2ac;
    padding: 20px 40px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    -moz-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    text-shadow: 0px 1px 2px #c4ffea;
   color: #167269;
   text-weight: bold;
   text-transform:uppercase;	
   font-size: 32px;
   font-family:'Roboto Condensed', 'Lucida Grande', Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   width: 310px;
   display: block;
   margin: 0 auto;
   }
.button:hover {
   border-top-color: #fff;
   background-color: #94dfd2;
   color: #25a3b5;
   }
.button:active {
   border-top-color: #6fe2ac;
   background-color: #14d9b8;
   }
.button:visited {
   background-color: #6fe2ac;
   color: #167269;
}
   
  
/* PROGRESS BARS */
.ui-progressbar {
	height: 16px;
	text-align: left;
	overflow: hidden;
}
.ui-progressbar .ui-progressbar-value {
	margin: -1px;
	height: 100%;
}
.ui-progressbar .ui-progressbar-overlay {
	background: url("images/animated-overlay.gif");
	height: 100%;
	filter: alpha(opacity=25);
	opacity: 0.25;
}
.ui-progressbar-indeterminate .ui-progressbar-value {
	background-image: none;
}
.ui-widget-content {
	border: 1px solid #aaaaaa;
	background: #ffffff;
	color: #222222;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-top-left-radius: 4px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	border-top-right-radius: 4px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: 4px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-bottom-right-radius: 4px;
}
.ui-widget-header {
	border: 1px solid #aaaaaa;
    background: rgb(125,185,232); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(125,185,232,1) 0%, rgba(32,124,202,1) 50%, rgba(41,137,216,1) 51%, rgba(30,87,153,1) 97%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,185,232,1)), color-stop(50%,rgba(32,124,202,1)), color-stop(51%,rgba(41,137,216,1)), color-stop(97%,rgba(30,87,153,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(125,185,232,1) 0%,rgba(32,124,202,1) 50%,rgba(41,137,216,1) 51%,rgba(30,87,153,1) 97%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(125,185,232,1) 0%,rgba(32,124,202,1) 50%,rgba(41,137,216,1) 51%,rgba(30,87,153,1) 97%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(125,185,232,1) 0%,rgba(32,124,202,1) 50%,rgba(41,137,216,1) 51%,rgba(30,87,153,1) 97%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(125,185,232,1) 0%,rgba(32,124,202,1) 50%,rgba(41,137,216,1) 51%,rgba(30,87,153,1) 97%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */
	color: #222222;
	font-weight: bold;
}


/* COMPUTER SCREEN */
.container * {
  box-sizing: border-box;
}

.container > .screen {
  width: 460px;
  height: 280px;
  position: relative;  
  background: #ff6860;
  border: 20px solid #474e5d;
  border-radius: 10px;
  -moz-box-sizing:border-box; /* fixes Firefox bug */
}

.monitor > div {
  position: absolute;
}

.monitor:before,
.monitor:after,
.laptop:before{
   content: "";
   position: absolute;
   left: 50%;
 }

.monitor:before,
.laptop:before {
  top: -10px;
  margin: -3px 0 0 -3px;
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background: #a5adbd;
}

.screen:after {
  width: 8px;
  height: 8px;
  border-radius: 8px;
  bottom: -10px;
  margin: 0 0 -4px -4px;
  background: #e8ebf0;
}

.content {
  width: 420px;
  height: 240px;
  /*left: 50%;
  margin-left: -210px;*/
  overflow: hidden;
}


.base {
  width: 90px;
  height: 50px;
  bottom: -70px;
  left: 50%;
  margin-left: -45px;
  background: #e8ebf0;
}

.base:before,
.base:after,
.grey-shadow:before,
.grey-shadow:after{
  content: "";
  position: absolute;
  top: 0;
}

.base:before {
  border-left: 13px solid transparent;
  border-right: 0px solid transparent;
  border-bottom: 50px solid #e8ebf0;
  left: -13px;
}

.base:after {
  border-right: 13px solid transparent;
  border-left: 0px solid transparent;
  border-bottom: 50px solid #e8ebf0;
  right: -13px;
}

.base > div {
   position: absolute; 
}

.grey-shadow {
  width: 90px;
  height: 12px;
  background: #d8dbe1;
  top: 0;
}

.grey-shadow:before {
  border-left: 3px solid transparent;
  border-right: 0px solid transparent;
  border-bottom: 12px solid #d8dbe1;
  left: -3px;
  z-index: 2
}

.grey-shadow:after {
  border-right: 3px solid transparent;
  border-left: 0px solid transparent;
  border-bottom: 12px solid #d8dbe1;
  right: -3px;
  z-index: 2
}

.foot {
  background: #e8ebf0;
  z-index: 1;
}

.foot.top {
  width: 116px;
  height: 5px;
  bottom: -5px;
  left: 50%;
  margin-left: -58px;
}

.foot.top:before,
.foot.top:after,
.foot.bottom:before {
  content: "";
  position: absolute;
  top: 0px;
}

.foot.top:before {
  border-left: 16px solid transparent;
  border-right: 0px solid transparent;
  border-bottom: 5px solid #e8ebf0;
  left: -16px;
}

.foot.top:after {
  border-right: 16px solid transparent;
  border-left: 0px solid transparent;
  border-bottom: 5px solid #e8ebf0;
  right: -16px;
}

.foot.bottom {
  width: 150px;
  height: 5px;
  bottom: -10px;
  left: 50%;
  margin-left: -75px;
  z-index: 999;
}


.keyboard .shadow {
  bottom: -10px;
  height: 10px;
}

.shadow {
  position: absolute;
  width: 350px;
  height: 15px;
  left: 50%;
  margin-left: -175px;
  z-index: -1;
  bottom: -20px;
  background: radial-gradient(ellipse at center, rgba(52,172,108,1) 0%,rgba(52,172,108,1) 53%,rgba(46,204,113,1) 55%,rgba(46,204,113,0) 55%,rgba(46,204,113,0) 100%);
}


/* slideshow controls */
#prev {
  position: relative; 
  left: -300px;
  top: -100px;	
  cursor: pointer;
}

#next {
  position: relative; 
  left: 300px;
  top: -100px;	
  cursor: pointer;
}