ol,
ul {
    list-style: none
}


a img {
    border: none
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary {
    display: block
}

a img {
    border: none
}

a {
    text-decoration: none;
    transition: color 0.4s ease-in-out 0s;
    -moz-transition: color 0.4s ease-in-out 0s;
    -webkit-transition: color 0.4s ease-in-out 0s;
    -o-transition: color 0.4s ease-in-out 0s;
}



html {
    overflow-y: auto;
    text-rendering: optimizeLegibility
}

/*body {
    background-color: #70bb36;
}*/



body {

background-color: #70bb36;
  animation: bg-color 120s infinite;
  -webkit-animation: bg-color 120s infinite;
}

@-webkit-keyframes bg-color {
  0% { background-color: #70bb36; }
  20% { background-color: #EA6E06; }
  40% { background-color: #6112B6; }
  60% { background-color: #323AC1; }
  80% { background-color: #91113B; }
  100% { background-color: #70bb36; }
}

@keyframes bg-color {
  0% { background-color: #70bb36; }
  20% { background-color: #EA6E06; }
  40% { background-color: #6112B6; }
  60% { background-color: #323AC1; }
  80% { background-color: #91113B; }
  100% { background-color: #70bb36; }
}

@viewport {
    width: device-width
}

p {
	font-size:16px;
    margin-bottom: 1.3em
}

small {
    font-size: 0.618em
}

h1 {
    font-size: 3.998em;
}

h2 {
    font-size: 2.9em;
	color:#474544;
}

h3 {
    font-size: 1.9em
}

h4 {
    font-size: 1.4em
}

h5 {
    font-size: 1.2em
}

.wrapper {
    width: 100%;
}

hr {
padding-top: 3em;
 margin-bottom: 1em;
}

/*************************************For Top Bar+++++++++++++++++++++++++*/

.wrapper.banner {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
/*    border-bottom: 8px solid #fff;
*/    background: #fff
}

.wrapper.inline {
    position: relative;
    height: 700px;
    background: none
}

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

nav {
    padding: 27px 0 42px;
    width: 100%
}

nav[role="navigation"] ul {
    float: right
}

nav[role="navigation"] ul li {
    float: left;
	font-family: 'Open Sans';
    color: #000;
    padding: 0 0 0 10px
}

nav[role="navigation"]  li  {
    margin: 0;
    font-size: 1.1em;
    text-transform: uppercase;
    color: #000;
    padding: 10px 5px
}



nav[role="navigation"] ul li a {
    margin: 0;
    font-size: 1.1em;
    text-transform: uppercase;
    color: #000;
    padding: 10px 5px
}

nav[role="navigation"] ul li a:hover,
nav[role="navigation"] ul li a:active {
    margin: 0;
    color: #474544
}
nav[role="navigation"] ul li a:visited,{
    margin: 0;
    color: #70bb36
}


a.logo {
    background: #474544;
    color: #eee;
    display: block;
    float: left;
    font-size: 26px;
    margin: -28px 0 0;
    padding: 25px 25px 15px 25px;
    letter-spacing: 2px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-style: normal;
    -webkit-font-smoothing: antialiased
}
a.logo:hover, a.logo:focus {
    color: #777;
 }

/*************************************toggle+++++++++++++++++++++++++*/
.title-bar {
    padding: 0.5rem;
    background: #474544;
    color: #fefefe;
}


.top-bar  a {
     font-family: 'Open Sans';
	    font-size: 1.1em;
    margin-bottom: 1.1em;
	color: #000
	
}
.top-bar  a:hover, a:visited, a:active{
     font-family: 'Open Sans', sans-serif;
	    font-size: 1.1em;
    margin-bottom: 1.1em;
	color: #474544
}
.top-bar  a:visited{
     font-family: 'Open Sans', sans-serif;
	    font-size: 1.1em;
    margin-bottom: 1.1em;
	color: #70bb36
}




/*************************************Buttons+++++++++++++++++++++++++*/


.button.talk {
 background: none;
border-width:1px;
	border-color:#eee;
    color: #eee; 
	font-weight:600;
	text-transform: uppercase;}

	
  .button.talk:hover,
  .button.talk:focus {
    background: #555;
    color: #fff;
	border-width:1px;
	border-color:#d5d0c0;
	border-style:dashed}





/*************************************For Content Section+++++++++++++++++++++++++*/
/* The target CSS ID with :before pseudo class */
.offset:before { 
  display: block; 
  content: " "; 
  height: 100px;      /* Give height of your fixed element */
  margin-top: -100px; /* Give negative margin of your fixed element */   
  visibility: hidden; 
}
.wrapper.main {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 -3px 3px rgba(150, 150, 150, 0.1);
    padding: 50px 0;
    background: #fff
}

.lt-ie9 .wrapper.main {
    border-top: 1px solid #e8e8e8
}


/************************************* Sections  +++++++++++++++++++++++++*/
header[role="banner"],
#intro .wrapper,
footer .wrapper {
    width: 98%;
    padding: 0 3%;
    overflow: hidden;
    margin: 0 auto;
    max-width: 1311px;
    * zoom: 1;
    clear: both
}


/************************************* Intro  +++++++++++++++++++++++++*/
#intro h1 {
	font-family: 'Open Sans', sans-serif;
	color: #eee;
	line-height: 1.1em;
     padding-bottom: .5em;
	}
		
	#intro p {
     font-family: 'Open Sans', sans-serif;
    font-weight: 200;
    font-size: 1.4em;
    line-height: 1.5em;
    padding-bottom: 25px;
    margin: 0;
	color: #eee;
}

section#intro .wrapper {
    padding: 150px 0 50px;
    width: 100%
}

/************************************* Work  +++++++++++++++++++++++++*/

#work h2 {
	font-family: 'Open Sans', sans-serif;
    margin-top: 80px;
    margin-bottom: 60px;
	font-weight: 400;
	line-height: 1em;
	letter-spacing: -2px
}

.side p {
	     font-family: 'Open Sans', sans-serif;
	    font-size: 1.1em;
    margin-bottom: 1.1em;
}

.side h3 {
	 font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-style: normal;
    letter-spacing: -2;
    font-size: 1.55em;
    line-height: 1.1em;
    margin-top: 1em;
   margin-bottom: .25em;
}

/************************************* Row styles  +++++++++++++++++++++++++*/
.quick {
	padding-top:4em;
	padding-bottom:4em;
	width:100%;
	background-color: #f3f0f0;
}


.portfolio {
	padding-top:4em;
	padding-bottom:4em;
	width:100%;
}


/************************************* Do  +++++++++++++++++++++++++*/

#do  h2 {
	font-family: 'Open Sans', sans-serif;
    margin-top: 40px;
    margin-bottom: 40px;
	font-weight: 400;
	line-height: 1em;
	letter-spacing: -2px
}

#do h3 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-style: normal;
    letter-spacing: -2px;
    font-size: 1.55em;
    line-height: 1.1em;
    margin-top: 1em;
}

#do  p {
     font-family: 'Open Sans', sans-serif;
	    font-size: 1.1em;
    letter-spacing: -.5px;
    margin-bottom: 1.1em;
}
#do ul {
     font-family: 'Open Sans', sans-serif;
	font-size: 1.1em; 
	


}


/************************************* About  +++++++++++++++++++++++++*/

#about  h2 {
	font-family: 'Open Sans', sans-serif;
    margin-top: 40px;
    margin-bottom: 40px;
	font-weight: 400;
	line-height: 1em;
	letter-spacing: -2px
}

#about h3 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-style: normal;
    letter-spacing: -2;
    font-size: 1.55em;
    line-height: 1.1em;
    margin-top: 1em;
}

#about  p {
     font-family: 'Open Sans', sans-serif;
	    font-size: 1.1em;
    margin-bottom: 1.1em;
}
#about ul {
     font-family: 'Open Sans', sans-serif;
	font-size: 1.1em; 

}

/************************************* Dont  +++++++++++++++++++++++++*/

#dont  h2 {
	font-family: 'Open Sans', sans-serif;
    margin-top: 40px;
    margin-bottom: 40px;
	font-weight: 400;
	line-height: 1em;
	letter-spacing: -2px
}

#dont h3 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-style: normal;
    letter-spacing: -2;
    font-size: 1.55em;
    line-height: 1.1em;
    margin-top: 1em;
}

#dont  p {
     font-family: 'Open Sans', sans-serif;
	    font-size: 1.1em;
    margin-bottom: 1.1em;
}
#dont ul {
     font-family: 'Open Sans', sans-serif;
	font-size: 1.1em; 
}

#dont  li{
 padding-left: 2.28571429em;
 text-indent:  -2.28571429em;
}
	
#dont {
margin-top: 30px;
    margin-bottom: 60px;
	}

/************************************* Contact  +++++++++++++++++++++++++*/





#contact  h2 {
	font-family: 'Open Sans', sans-serif;
    margin-top: 40px;
    margin-bottom: 40px;
	font-weight: 400;
	line-height: 1em;
	letter-spacing: -2px
}

#contact  p {
     font-family:'Open Sans', sans-serif;
	    font-size: 1.1em;
    margin-bottom: 1.1em;
}
#contact  a {
     font-family: 'Open Sans';
	    font-size: 1.1em;
    margin-bottom: 1.1em;
	color: #909090
	
}
#contact  a:hover, a:visited, a:active{
     font-family: 'Open Sans', sans-serif;
	    font-size: 1.1em;
    margin-bottom: 1.1em;
	color: #eee
}
#contact  a:visited{
     font-family: 'Open Sans', sans-serif;
	    font-size: 1.1em;
    margin-bottom: 1.1em;
	color: #333
}



/************************************* Footer  +++++++++++++++++++++++++*/

footer {
    width: 100%;
    overflow: hidden;
    background: #222;
    padding: 0.5em 0
}

footer .wrapper {
    padding: 0
}

footer .wrapper p {
    margin-bottom: 0
}

footer .wrapper p {
    color: #eee;
    letter-spacing: 1px;
    padding: 0 0 0 2px
}

footer .wrapper p a {
    color: #777;
    padding: 0 8px;
    letter-spacing: 1px;
}

footer .wrapper p a:hover {
    color: #777
}

@media screen and (min-width: 50em) {
	/*+++++++++++++++++++This determines where the  section with content-not the intro starts++++++++++++++*/
        .wrapper.main {
            margin: 780px 0 0;
            position: relative;
            z-index: 10
        }
        .lt-ie8 .wrapper.main {
            margin: 0
        }
        .wrapper.banner {
            left: 0;
            position: fixed;
            top: 0;
            z-index: 100;
            background: rgba(255, 255, 255, 0.93)
        }
       /*+++++++++++++++++++Sections++++++++++++++*/
        section {
/*            padding-top: 100px;
*/            padding-right: 0px;
/*            padding-bottom: 50px;
*/            padding-left: 0px;
        }
        section#intro {
            left: 0;
            max-width: 100%;
            padding: 0;
            position: fixed;
            top: 10px;
            margin-bottom: 20px;
            width: 100%;
            z-index: 1;
            height: auto
        }
        section#intro .wrapper {
            width: 95%;
        }
        .lt-ie8 .wrapper.banner,
        .lt-ie8 section#intro {
            position: relative;
            left: auto;
            top: auto
        }
        section header {
            float: left;
            width: 23.5%;
            margin: 0 1.5% 1.5% 0
        }
		
		 #intro h1 {
	font-size: 6em;
	color: #eee;
            padding-bottom: .5em
			}
			
			#intro p {
	font-size: 2em;
	color: #eee;
            margin-bottom: 1em
			}
			section work {
               max-width: 100%;
            position: fixed;
            top: 10px;
            margin-bottom: 20px;
            width: 100%;
            z-index: 1;
            height: auto}
			
			section about {
            left: 0;
            max-width: 100%;
            padding: 0;
            position: fixed;
            top: 10px;
            margin-bottom: 20px;
            width: 100%;
            z-index: 1;
            height: auto}
			
			h2 {
				margin-top: 600px:
}
}

.slow {
  transition-duration: 5550ms !important;
}