/*!
 * LEGEND - Free Responsive One Page Template
 *
 * Copyright 2015
 * Designed and built based on Twitter Bootstrap. */

/* ===============socialFeeds=============*/

.twitter-timeline
{
	padding:50px;
}

/*================headwrap================*/
#headwraper{
	background:url(images/background.jpg) #0b333f no-repeat center center fixed;
	height:800px;
	text-align:center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	min-height: 800px;
	z-index: 10000;
	margin-top: -60px;
	padding-top:160px;
	box-shadow: 0 5px 16px rgba(0, 0, 0, 0.3); /* offset-x | offset-y | blur-radius | spread-radius | color */
	-moz-box-shadow: 0 5px 16px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0 5px 16px rgba(0, 0, 0, 0.3);
}
.icon img{
	width:52px;
	height:52px;
	opacity:0.5;
}
.icon img:hover{
	opacity:1.0;
}
.icon li{
	display:inline-block;
	padding:5px;
	margin:0.5em 0 0.5em 0;
}
div, article, section, header, footer, nav, li {
	position:relative;
}
h1{
	font-family:'Patua One', "Comic Sans MS", cursive, sans-serif;
	font-size:65px;
	font-weight:bold;
	color:#FFD700;
	line-height:1em;
}
/* #headwraper p {
	font-family: 'Patua One', cursive;
	font-size: 1.5em;
	margin-bottom: 4%;
	line-height: 1.35;
	color:#FFD700;
	text-align:bottom; 
} */
#headwraper h2{
	color: white;
	font-family:'Quattrocento', serif;
	font-size:30px;
	width: 100%;
	padding: 0.5em;
	margin-bottom:0.5em;
	letter-spacing: 0.05em;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;

}
body {
				padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
			}



/*========================inspiration==============*/

#insp{
	background-color:#FFD700;
	background-size:100% 100%;
	height:700px;
	text-align:center;


}
#insp h2{
	font-family:'Patua One',"Comic Sans MS", cursive, sans-serif;
	font-weight:bold;
	font-size:50px;
	color:white;
}
.wrap p{
	display:none;
}


/* ================== devlopment =============*/

#dev{
	background-color:white;
	background-size:cover;	
}
.top{
	text-align: center;
}
.top img{
	width:100px;
	height:100px;
	margin:40px;
	opacity:0.5;
}
.top img:hover{

	opacity:1.0;
}
.top p{
	color:#ff5774;
	font-family:'Patua One',"Comic Sans MS", cursive, sans-serif;
	font-weight:bold;
	font-size:50px;
}
section img{
	width:150px;
	height:150px;
	opacity:0.8;
	border:5px solid black;
	border-radius:10px;
}
section img:hover{
	opacity:1.0;
}

section{
	display:inline-block;
}
#dev h3{
	font-family:"Comic Sans MS", cursive, sans-seri;
	font-weight:bold;
	color:black;
}
 p{
	text-align: center;
	margin: 1em 0 2.5em;
	font-family:Arial;
	font-size:20px;
}

section{
	display:inline-block;
	padding:10px;
	text-align:center;
}
strong{
	font-size:22px;
	font-family: 'Open Sans', sans-serif;

}

/* ========================anchor ===============*/

a.back-to-top {
	display: none;
	width: 60px;
	height: 60px;
	text-indent: -9999px;
	position: fixed;
	z-index: 999;
	right: 20px;
	bottom: 20px;
	background: #27AE61 url("images/up-arrow.png") no-repeat center 43%;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
}


/* ======================= footer =============== */

footer{
	color:#F1505A;
	font-family:Comic Sans, Comic Sans MS, cursive;
	font-size:20px;
	padding:20px;
	

}


/* ==================== responsive =============== */

@media screen and (max-width: 1024px) {
 #headwraper h1{
 	font-size:65px;
 }
 #headwraper h2{
 	font-size: 30px;
 }
 .twitter-handle{
 	display:none;
 }

}
/* ipads and tabs  */
@media screen and (max-width: 950px) {
 #headwraper h1{
 	font-size:40px;
 }
 #headwraper h2{
 	font-size:25px;
 }
 .twitter-handle{
 	display:none;
 }

}

/* phablets */
@media screen and (max-width: 650px) {
 #headwraper h1{
 	font-size:40px;
 }
 #headwraper h2{
 	font-size:22px;
 }
 .twitter-handle{
 	display:none;
 }


}

/* smartphone's */
@media screen and (max-width: 480px) {
 #headwraper h1{
 	font-size:35px;
 	font-family: 'Verdana', Arial, Helvetica, sans-serif;
 }
 #headwraper h2{
 	font-size:22px;
 	color:black;
 }
 #insp h2{
 	font-family: 'Verdana', Arial, Helvetica, sans-serif;

 }
 #headwraper,#dev,#insp{
 	 margin-right: auto;
     margin-left: auto;
     width: 340px;
     display: block;
     text-align:center;
 }
 .twitter-handle{
 	display:none;
 }

}

@media screen and (max-width: 300px){
#headwraper,#dev,#insp{
 	 margin-right: auto;
     margin-left: auto;
     width: 250px;
     display: block;
     text-align:center;
 }
 #insp h2{
 	font-size:40px;
 }
 .twitter-handle{
 	display:none;
 }

}


/* ===================== */

.animation-element {
  opacity: 0;
  position: relative;
}
/*animation element sliding left*/

.animation-element.slide-left {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(-100px, 0px, 0px);
  -webkit-transform: translate3d(-100px, 0px, 0px);
  -o-transform: translate(-100px, 0px);
  -ms-transform: translate(-100px, 0px);
  transform: translate3d(-100px, 0px, 0px);
}

.animation-element.slide-left.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}
/*animation slide left styled for testimonials*/

.animation-element.slide-left.testimonial {
  float: left;
  width: 47%;
  margin: 0% 1.5% 3% 1.5%;
  background: #F5F5F5;
  padding: 15px;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
  border: solid 1px #EAEAEA;
}
.animation-element.slide-left.testimonial:hover,
.animation-element.slide-left.testimonial:active{
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
}

.animation-element.slide-left.testimonial:nth-of-type(odd) {
  width: 48.5%;
  margin: 0% 1.5% 3.0% 0%;
}

.animation-element.slide-left.testimonial:nth-of-type(even) {
  width: 48.5%;
  margin: 0% 0% 3.0% 1.5%;
}

.animation-element.slide-left.testimonial .header{
  float: left;
  width: 100%;
  margin-bottom: 10px;
}
.animation-element.slide-left.testimonial .left{
  float: left;
  margin-right: 15px;
}
.animation-element.slide-left.testimonial .right{
  float: left;
}

.animation-element.slide-left.testimonial img {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  box-shadow: 0px 1px 3px rgba(51, 51, 51, 0.5);
}

.animation-element.slide-left.testimonial h3 {
  margin: 0px 0px 5px 0px;
}

.animation-element.slide-left.testimonial h4 {
  margin: 0px 0px 5px 0px;
}

.animation-element.slide-left.testimonial .content {
  float: left;
  width:100%;
  margin-bottom: 10px;
}

.animation-element.slide-left.testimonial .rating{}

.animation-element.slide-left.testimonial i {
  color: #aaa;
  margin-right: 5px;
}

/*media queries for small devices*/
@media screen and (max-width: 678px){
  /*testimonials*/
  .animation-element.slide-left.testimonial,
  .animation-element.slide-left.testimonial:nth-of-type(odd),
  .animation-element.slide-left.testimonial:nth-of-type(even){
    width: 100%;
    margin: 0px 0px 20px 0px;
  }
  .animation-element.slide-left.testimonial .right,
  .animation-element.slide-left.testimonial .left,
  .animation-element.slide-left.testimonial .content,
  .animation-element.slide-left.testimonial .rating{
    text-align: center;
    float: none;
  }
  .animation-element.slide-left.testimonial img{
    width: 85px;
    height: 85px;
    margin-bottom: 5px;
  }
  
}
.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}