Setting Validate Copy Format

/*
* Prosperity
* Copyright 2013, xThemes
*/
/* Table of Content
==================================================
#Site Styles
#Header
#Page Styles
#Home Pages
#Contact Pages
#About Pages
#Portfolio Pages
#Blog Pages
#404 Page
#Shortcodes
#Footer
#Media Queries */
/* #Site Styles
================================================== */
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{
  border:0;
  font-size:100%;
  font:inherit;
  vertical-align:baseline;
  margin:0;
  padding:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
  display:block}
body{
  line-height:1}
ol,ul{
  list-style:none}
blockquote,q{
  quotes:none}
blockquote:before,blockquote:after,q:before,q:after{
  content:none}
table{
  border-collapse:collapse;
  border-spacing:0}


body {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  color: #999999;
}

::-moz-selection {
  background: #444;
  color: #fff;
  text-shadow: none;
}
::selection {
  background: #444;
  color: #fff;
  text-shadow: none;
}

span{
  color: #0ec4ff;
}



i {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}


/**
* Typography
*
* Basic HTML elements
*/

h1{
  font-size:32px;
}
h2{
  font-size:28px;
}
h3{
  font-size:24px;
}
h4{
  font-size:22px;
}
h5{
  font-size:19px;
}
h6{
  font-size:14px;
}
small{
  font-size:11px;
}
strong{
  font-weight: 600;
  color: #444;
}
ol{
  list-style: decimal;
}
tr{
  color: #444;
}
p{
  line-height:20px;
  font-size:13px;
  margin-top: 10px;
  text-align: justify;
}
hr {
  display:block;
  height:1px;
  border:0;
  border-top:1px solid #cccccc;
  margin:1em 0;
  padding:0;
}
iframe {
  border: none;
}


.h5-dark{
  color: #444444;
}

.h5-colored{
  color: #0ec4ff;
}

/**
* Links
*/
a {
  color: #0ec4ff;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
a:hover,
a:focus {
  color: #444;
  text-decoration: none;
}
/**
* Forms
*/
input,
button,
select,
textarea {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

/**
* Buttons
*/

.btn{
  color: #fff;
  text-shadow: none;
  background-image: none;
  background-color: #0ec4ff;
  padding: 5px 10px 5px 10px;
  border: none;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -o-border-radius: 0px;
  -ms-border-radius: 0px;
  border-bottom: 2px solid #0baade;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.btn:hover{
  background-color: #2b3336;
  border-bottom: 2px solid #1b2022;
  color: #fff;
}

.small{
  padding: 3px 10px 3px 10px;
  font-size: 11px;
}

.medium{
  font-size: 13px;
}

.big{
  padding: 7px 10px 7px 10px;
  font-size: 18px;
}

.white{
  color: #8c8d8d;
  text-shadow: none;
  background-image: none;
  background-color: #fff;
  padding: 5px 10px 5px 10px;
  border: none;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -o-border-radius: 0px;
  -ms-border-radius: 0px;
  border-bottom: 2px solid #cfcfcf;
}


/* #Header
================================================== */
header{
  background-color: #3a4549;
  color: #fff;
}

header a{
  color: #adadad;
}

header a:hover{
  color: #0ec4ff;
}

header .logo a{
  color: #fff;
  font-weight: 600;
}

header .logo{
  margin-top: 15px;
}

/**
* Main Menu
*/

/* nav ul{
float: right;
}

nav ul li{
display: inline;
margin-left: 55px;
z-index: 50;
}
*/

.selected{
  
}

/* #Page Styles
================================================== */

/* Spacing Settings */

.clear{
  margin: 30px;
}

/* End Spacing Settings */


.page-entrance{
  border-top: 6px solid #0baade;
  background-color: #0ec4ff;
  color: #fff;
  padding: 20px 0px 20px 0px;
}

.page-entrance p{
  margin-bottom: 5px;
  margin-top: 5px;
  font-size: 18px;
  font-weight: 100;
}

.page-entrance span{
  font-weight: 600;
  font-size: 21px;
  color: #fff;
}


.section-title h5{
  color: #444;
  font-weight: 100;
  border-bottom: 1px solid #d7d7d7;
  padding-bottom: 15px;
}

.services h5{
  color: #555;
  font-weight: 600;
}

.services p{
  margin-top: 5px;
}

.services p:last-of-type{
  margin-top: 0px;
}

/* Pagination */

.pagination-ul li{
  display: inline;
  
}

.pagination-ul a{
  padding: 4px 8px 4px 8px;
  font-size: 12px;
  font-weight: 500;
  font-family: Open Sans;
  color: #b6b6b6;
  border: 1px solid #fff;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.pagination-ul a:hover{
  color: #0ec4ff;
  border: 1px solid #e3e3e3;
}

.pagination-ul #active{
  background-color: #0ec4ff;
  color: #fff;
  padding: 4px 8px 4px 8px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.pagination-ul #active:hover{
  background-color: #444444;
}

/* End Pagination */

#back-to-top {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 9999;
  width: 45px;
  height: 45px;
  background: #404c50;
  text-align: center;
  line-height: 45px;
}
#back-to-top i {
  color: #fff;
}

#back-to-top:hover{
  background: #0ec4ff;
}

/* #Home Pages
================================================== */

.rev-bg{
  width:1370px;
  height: 450px;
  background-color: #0ec4ff;
  opacity: 0.6;
}

/**
* Features
*/

.features-icons{
  border: 1px solid #0ec4ff;
  padding: 20px 15px 20px 20px;
  width: 140px;
  position: absolute;
  display: block;
}

.features-icons i{
  color: #0ec4ff;
  font-size: 55px;
  left: 0px;
  right: 0px;
}

.features-icons i:first-of-type{
  border-right: 1px solid #0ec4ff;
  padding-right: 15px;
  margin-right: 10px;
}

.features-text{
  padding-left: 200px;
}


.features-text h4{
  color: #0ec4ff;
  font-weight: 300;
}

#feature{
  margin-bottom: 30px;
}

.feature:last-of-type{
  margin-bottom: 0px;
}

/**
* Sections
*/

#home_overlay_content i{
  z-index: 55;
  margin-left: 30px;
}

#home_overlay_content i:last-of-type{
  z-index: 55;
  margin-left: 40px;
}

.section-desc .btn{
  margin-top: 10px;
  float: right;
}

.jcarousel-scroll{
  position: ;
  float: right;
  margin: 0px;
  padding: 0px;
}

.jcarousel-scroll i{
  background-color: #dddddd;
  color: #fff;
  padding: 2px 7px 2px 7px;
  border-bottom: 1px solid #ababab;
  text-align: center;
  top: 15px;
}

.jcarousel-scroll i:hover{
  background-color: #0ec4ff;
  border-bottom: 1px solid #0baade;
}

#mycarousel{
  width: 200px;
  margin-left: 30px;
}


.mycarousel ul li img{
  width: 270px;
  height: 233px;
}

.mycarousel ul li{
  width: 190px;
}

.mycarousel2 ul li{
  width: 420px;
}

.mycarousel2 ul li img{
  width: 420px;
  height: 250px;
}

.mycarousel3 ul li img{
  width: 190px;
  margin-top: 20px;
}

#home-blog-post-slider{
  width: 420px;
  height: 300px;
}

/**
* Image Overlay Hover
*/

.full_overlay {
  position:relative;
  display: block;
  /* Set the width and the height according to the size of your pictures */
}
.full_overlay p {
  color:#FFFFFF;
}
.full_overlay .content {
  position: absolute;
  left: 0px;
  /* Set the width and the height according to the size of your pictures */
  width: 100%;
  height: 100%;
  /* Set a 0 opacity to hide the content */
  filter: alpha(opacity=0);
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  /* Semi-transparent background for modern browsers, black for older browsers */
  background:#000000;
  background: rgba(30,165,219,0.7);
  /* CSS3 transitions, creates the fading effect */
  -webkit-transition: opacity 0.4s ease-in-out;
  -moz-transition: opacity 0.4s ease-in-out;
  -o-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
}
.content i{
  font-size: 30px;
  color: #fff;
}
.content i:first-of-type{
  margin-left: 65px;
}
.content i:last-of-type{
  margin-left: 40px;
}
.content i small{
  margin-top: 10px;
  margin-left: 10px;
  position: absolute;
}
.content p{
  margin-bottom: 15px;
}
.content h6{
  margin-top: 63px;
}
.content h6, .content p {
  /* Text styling */
  color:#ffffff;
  text-align: center;
}
.full_overlay:hover .content {
  /* Setting a 100% opacity on mouse hover to show the content */
  filter: alpha(opacity=100);
  cursor: pointer;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.full_overlay2{
  position: relative;
  display: block;
}

.full_overlay2 .content2 {
  position: absolute;
  left: 0px;
  /* Set the width and the height according to the size of your pictures */
  width: 100%;
  height: 100%;
  /* Set a 0 opacity to hide the content */
  filter: alpha(opacity=0);
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  /* Semi-transparent background for modern browsers, black for older browsers */
  background:#000000;
  background: rgba(30,165,219,0.7);
  /* CSS3 transitions, creates the fading effect */
  -webkit-transition: opacity 0.4s ease-in-out;
  -moz-transition: opacity 0.4s ease-in-out;
  -o-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
}

.full_overlay2:hover .content2 {
  /* Setting a 100% opacity on mouse hover to show the content */
  filter: alpha(opacity=100);
  cursor: pointer;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.content2 i{
  color: #fff;
  font-size: 25px;
  position: absolute;
  padding: 10px;
  border: 1px solid #fff;
  border-radius: 1000px;
  -webkit-border-radius: 1000px;
  -moz-border-radius: 1000px;
  -o-border-radius: 1000px;
  -ms-border-radius: 1000px;
  display: block;
  top: 40%;
  left: 40%;
  text-align: center;
  z-index: 99;
  
}

.content2 i:hover{
  -webkit-transform: scale(1.2,1.2);
}

/**
* Latest Posts
*/


#home-blog-post-category{
  display: block;
  margin-top: 223px;
}

.blog-post-category p{
  padding-left: 8px;
  margin-top: 3px;
}

.blog-post-text{
  border-bottom: 1px solid #e7e7e7;
  padding-bottom: 15px;
}

.blog-post-text{
  margin-top: -3px;
}

#home-blog-post-text p{
  width: 420px;
}


/**
* Client Test
*/

.client-test{
  background-image: url(../img/test-bg.png);
}

.cbp-qtrotator {
  position: relative;
  margin: 20px auto 20px auto;
}

.cbp-qtrotator .cbp-qtcontent {
  position: absolute;
  min-height: 100px;
  top: 0;
  z-index: 0;
  opacity: 0;
  width: 100%;
}

.no-js .cbp-qtrotator .cbp-qtcontent {
  border-bottom: none;
}

.cbp-qtrotator .cbp-qtcontent.cbp-qtcurrent,
.no-js .cbp-qtrotator .cbp-qtcontent {
  position: relative;
  
  z-index: ;
  pointer-events: auto;
  opacity: 1;
}

.cbp-qtrotator .cbp-qtcontent:before,
.cbp-qtrotator .cbp-qtcontent:after {
  content: " ";
  display: table;
}

.cbp-qtrotator .cbp-qtcontent:after {
  clear: both;
}

.cbp-qtprogress {
  position: absolute;
  background: #0ec4ff;
  height: 2px;
  width: 0%;
  top: 140px;
  z-index: 1000;
  margin-left: 200px;
}

.cbp-qtrotator .client-words {
  padding-bottom: 50px;
  background-color: #fff;
  margin-left: 200px;
}

.cbp-qtrotator .client-words p {
  font-size: 18px;
  color: #999999;
  font-weight: 100;
  margin-right: 20px;
}

.cbp-qtrotator .client-words p:nth-child(1){
  margin-left: 50px;
  padding-top: 20px;
  line-height: 25px;
}

.cbp-qtrotator .client-words p span{
  color: #9a9a9a;
  font-size: 60px;
  position: absolute;
  margin-left: -30px;
  margin-top: 15px;
}

.cbp-qtrotator .client-words .client{
  color: #0ec4ff;
  font-size: 18px;
  float: right;
}

.cbp-qtrotator .client-words .client:before {
  content: 'â€• ';
}

.triangle{
  background-image: url(../img/client-test-triangle.png) !important;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: ;
  width: 30px;
  height: 30px;
  position: absolute;
  margin-left: 170px;
  margin-top: 100px;
}

.cbp-qtrotator .cbp-qtcontent img {
  float: left;
  border-radius: 999px;
  -webkit-border-radius: 999px;
  -moz-border-radius: 999px;
  -o-border-radius: 999px;
  -ms-border-radius: 999px;
  margin-right: 70px;
  border: 3px solid #0ec4ff;
}



/**
* Twitter
*/

.subscribe{
  background-color: #0ec4ff;
  padding-bottom: 40px;
}

.subscribe h4 ,.subscribe h3{
  font-weight: 100;
  color: #fff;
  line-height: 30px;
  margin: 30px 0px 0px 0px;
}

.subscribe h4{
  font-size: 18px;
}

.subscribe h4 span a{
  color: #444444;
}

.subscribe h4:last-of-type{
  font-size: 16px;
  margin-top: 5px;
}

.subscribe h6{
  font-weight: 100;
  color: #fff;
  font-size: 16px;
  margin: 8px 0px 15px 0px;
}

.twitter-account-image{
  border: 1px solid #fff;
  width: 106px;
  height: 107px;
  border-radius: 999px;
  -webkit-border-radius: 999px;
  -moz-border-radius: 999px;
  -o-border-radius: 999px;
  -ms-border-radius: 999px;
  margin-top: 30px;
  position: absolute;
}

.twitter-account-image img{
  background-color: #fff;
  width: 100px;
  height: 100px;
  border-radius: 999px;
  -webkit-border-radius: 999px;
  -moz-border-radius: 999px;
  -o-border-radius: 999px;
  -ms-border-radius: 999px;
  border: 3px solid #0baade;
}

.twitter-account-text{
  margin-left: 120px;
}

.twitter-account-text button:last-of-type{
  margin-left: 6px;
}

/* #About Page
================================================== */

.nav-tabs{
  background-color: #e6e7e8;
  margin-top: 20px;
  padding-left: 38px;
  
}

.nav-tabs li{
  background-color: #e6e7e8;
}

.nav-tabs li:first-of-type{
  margin-left: 50px;
}

.nav-tabs li a{
  padding: 50px 105px 30px 105px;
  color: #868686;
  font-size: 16px;
}

.nav-tabs-text{
  margin-top: 20px;
}

.nav-tabs li a i{
  margin-left: 20px;
  margin-top: -30px;
  font-size: 45px;
  position: absolute;
}

.nav-tabs .active a{
  color: #0ec4ff;
}

.tab-content {
  margin-top: -20px;
}

.tab-content div{
  padding: 30px;
  background-color: #0ec4ff;
  color: #fff;
}

.tab1 h5{
  font-weight: 100;
  margin-top: 20px;
  font-size: 20px;
}

.tab2 h3{
  text-align: center;
}

.tab2 p{
  text-align: center;
}

.tab2-img img{
  margin-top: 10px;
  margin-left: 100px;
  margin-bottom: -32px;
}

.tab3-img img{
  width: 365px;
}


.tab-button {
  padding: 10px 40px 10px 40px;
  color: #fff;
  font-size: 18px;
  background-color: #0ec4ff;
  border: 1px solid #0baade;
  border-bottom: 3px solid #0baade;
}

.tab-buttons p{
  position: absolute;
  margin-left: 195px;
  margin-top: -30px;
}

.tab-buttons{
  margin-top: 30px;
  margin-left: 180px;
}

.tab-buttons button:last-of-type{
  margin-left: 60px;
}

.tab-content .features-icons{
  background-color: #fff;
}

.tab-content .feature{
  margin-top: 20px;
}

.tab-content .feature:last-of-type{
  margin-top: -20px;
}

.tab-content h4{
  color: #fff;
}



/* #Single Project
================================================== */

.single-project-titles h5{
  font-size: 18px;
  color: #444;
}

.single-project-information .info{
  color: #999999;
  border-bottom: 1px solid #e7e7e7;
  padding-bottom: 5px;
}

.single-project-information .type{
  color: #444;
  margin-top: 5px;
}

#description p{
  margin-top: 5px;
}

.single-project-titles .btn{
  margin-left: auto;
  margin-right: auto;
  display: block;
  margin-top: 20px;
}

.single-project-slider{
  margin-bottom: -60px;
}


/* #Team Page
================================================== */

.team-text{
  margin-top: 15px;
}

.team-text h6 {
  text-align: center;
  margin-bottom: 9px;
}

.team-text p{
  margin-top: -5px;
  line-height: 24px;
  text-align: center;
}

.team-text h6:first-of-type{
  color: #444444;
  font-size: 15px;
}

.team-text .btn{
  margin-left: auto;
  margin-right: auto;
  display: block;
  margin-top: 10px;
}

.team-image .content2 i:last-of-type{
  margin-left: 35px;
  border-radius: 330px;
  -webkit-border-radius: 330px;
  -moz-border-radius: 330px;
  -o-border-radius: 330px;
  -ms-border-radius: 330px;
  padding-left: 17px;
  padding-right: 17px;
}

.team-image .content2 i{
  margin-left: -20px;
}

.team-image .content2 i:hover{
  background-color: #fff;
  color: rgba(44,173,214,1);
  -webkit-transform: scale(1,1);
}


/* #Portfolio Pages
================================================== */

.title h6:first-of-type:hover{
  color: #0ec4ff;
}

.title{
  position: relative;
  margin-top: 10px;
  text-align: center;
}

.title h6:first-of-type{
  margin-bottom: 11px;
  color: #444444;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.title h6:last-of-type{
  padding-bottom: 1px;
}

.sorting .active{
  background-color: #2b3336;
  border-bottom: 2px solid #1b2022;
  color: #fff;
}

.btn-group button a{
  color: #fff;
}

#portfolio_4c section {
  margin-right: 30px;
  margin-bottom: 30px;
}

#portfolio_4c .content h6{
  margin-top: 80px;
}

#portfolio_2c section{
  margin-right: 30px;
  margin-bottom: 30px;
}

#portfolio_3c section{
  margin-right: 30px;
  margin-bottom: 30px;
}
#portfolio_2c .full_overlay2 .content2 i{
  top: 46%;
  left: 46%;
}


#portfolio_2c , #portfolio_3c , #portfolio_4c{
  width: 1200px;
}



#portfolio_2c section .content h6{
  margin-top: 250px;
}

#portfolio_3c section .content h6{
  margin-top: 160px;
}

#portfolio_3c .full_overlay2 .content2 i{
  top: 43%;
  left: 43%;
}

#portfolio_2c section .content i:first-of-type{
  margin-left: 220px;
}

#portfolio_3c section .content i:first-of-type{
  margin-left: 120px;
}


.portf_shape {
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  width:100%;
  z-index:50;
  height:100%;
  background-size:100% 100%;
  background-position:0 0;
  background-repeat:no-repeat;
  opacity: 1;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}
.hexagon_shape .portf_shape {
  background-image:url(../img/hexagon.png);
}
.hexagon_shape-2c .portf_shape {
  background-image:url(../img/hexagon-2c.png);
}
.hexagon_shape-3c .portf_shape {
  background-image:url(../img/hexagon-3c.png);
}
.hexagon_shape_home .portf_shape {
  background-image:url(../img/hexagon-home.png);
}

/**
**Portfolio Sorting Menu 
**/

#sort a.dropdown-toggle {
  color: #fff;
  font-size: 12px;
  background-color: #0ec4ff;
  border: 1px solid #0ea5d6;
  padding: 10px;
}


#sort .caret{
  border-top-color: #fff;
  border-bottom-color: #fff;
}

#sort .dropdown-menu{
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -o-border-radius: 0px;
  -ms-border-radius: 0px;
  font-size: 12px;
  background-color: #0ec4ff;
  border: 1px solid #0ea5d6;
  margin-top: 14px;
}

#sort .dropdown-menu li a{
  color: #fff;
}

#sort .dropdown-menu li a:hover{
  background-image: none;
  background-color: #444;
  color: #fff;
}

#sort .dropdown-menu li a.sortactive{
  background-color: #444;
  color: #fff;
}

/**** Isotope filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property:    -moz-transform, opacity;
  transition-property:         transform, opacity;
}




/* #Contact Pages
================================================== */

.map{
  height: 500px;
  border: 1px solid #e1e1e1;
}

.contact .input-block{
  margin-top: -10px;
}

.contact .textarea-block{
  margin-top: -10px;
}

.contact .input-block .info{
  color: #999999;
  border-bottom: 1px solid #e7e7e7;
  padding-bottom: 5px;
}

.contact .textarea-block .info{
  color: #999999;
  border-bottom: 1px solid #e7e7e7;
  padding-bottom: 5px;
}

.contact .input-block input{
  margin-top: 10px;
  border: none;
  padding: 0px;
  color: #7e7e7e;
  font-size: 13px;
  width: 100%;
}

.contact .textarea-block textarea{
  margin-top: 10px;
}

textarea{
  margin-top: 10px;
  border: none;
  padding: 0px;
  color: #7e7e7e;
  font-size: 13px;
  width: 100%;
  resize:vertical
}

.contact .input-block ::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #7e7e7e;
  font-size: 13px;
}
.contact .input-block :-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #7e7e7e;
  font-size: 13px;
}
.contact .input-block ::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #7e7e7e;
  font-size: 13px;
}
.contact .input-block :-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #7e7e7e;
  font-size: 13px;
}

.contact .btn{
  float: right;
}

#contact_2 .input-block{
  margin-top: 10px;
}

#contact_2 .textarea-block{
  margin-top: 10px;
}

#contact_3 section{
  margin-bottom: 30px;
}

#contact_3 .services h5{
  font-size: 18px;
  font-weight: normal;
}

#contact_3 #contact-info p:nth-child(2){
  margin-top: 5px;
}

#contact_3 #contact-info p{
  margin-top: 0px;
}

#contact_3 .map{
}


#response{
  margin-top: 30px;
}

#contact_2 #response{
  position: absolute;
  margin-top: 230px;
  width: 45%;
}


/* #Blog Pages
================================================== */

.blog-title .blog-post-date{
  color: #fff;
  background-color: #0ec4ff;
  margin-top: 1px;
  padding: 2px 10px 6px 10px;
  position: absolute;
}

.blog-title .blog-post-date-border{
  border-top: 5px solid #0ec4ff;
  width: 11%;
}

.blog-title h3{
  color: #444;
  margin-top: -10px;
  margin-left: 55px;
}

.blog-title p{
  margin-top: 6px;
  margin-left: 55px;
  margin-bottom: 10px;
}

.blog-post-category{
  background-color: #0ec4ff;
  color: #fff;
  width: 65px;
  height: 27px;
  position: absolute;
  z-index: 1;
}

.blog-post-info{
  border-bottom: 1px solid #e7e7e7;
  margin-bottom: 15px;
  padding-bottom: 10px;
  margin-top: 20px;
}

.blog-post-info #comments{
  margin-top: -30px;
  margin-left: 125px;
}

.blog-post-info #favorite{
  margin-top: -30px;
  margin-left: 245px;
}

.blog-post-info #share{
  margin-top: -30px;
  margin-left: 340px;
}

.blog-post-info section p{
  margin-left: 25px;
}

.blog-post-info section i{
  color: #0ec4ff;
  font-size: 14px;
  position: absolute;
  margin-top: 5px;
}

.blog-post-slider{
  margin-bottom: -55px;
}

#fullwidth-blog-post-category{
  margin-top: 373px;
}

#slider-blog-post-category{
  margin-top: 423px;
  width: auto;
  padding-right: 10px;
}

#blog-post-2c-category{
  margin-top: 220px;
}

#blog_full_width button{
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 15px;
  margin-bottom: 20px;
}

#blog_2c_3c button{
  margin-top: 15px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#blog_2c_3c .blog-title h3{
  margin-top: -3px;
}

#blog_2c_3c .blog-post-slider ul li img{
  height: 250px;
}

#blog_2c_3c .blog-post-date-border{
  width: 46px;
}

#blog_full_width .blog-post-date-border{
  width: 46px;
}

#blog_full_width .blog-title h3{
  margin-top: -5px;
}

/**
** Sidebar
**/

.sidebar-widget{
  margin-bottom: 20px;
  
}

.sidebar-widget .info{
  border-bottom: 1px solid #e7e7e7;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.sidebar-widget input{
  border: none;
  padding: 0px;
  color: #0baade;
  font-size: 13px;
  margin: 0px;
}

.sidebar-widget ::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #0baade;
  font-size: 13px;
}
.sidebar-widget :-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #0baade;
  font-size: 13px;
}
.sidebar-widget ::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #0baade;
  font-size: 13px;
}
.sidebar-widget :-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #0baade;
  font-size: 13px;
}

.sidebar-widget ul li{
  font-size: 13px;
  margin-bottom: 10px;
}

.sidebar-widget ul li a{
  color: #999;
}

.sidebar-widget ul li a:hover{
  margin-left: 5px;
  color: #54cbff;
}

#recent_posts p:nth-child(2){
  margin-top: -5px;
}

#recent_posts p:nth-child(4){
  margin-top: 5px;
  margin-bottom: -5px;
  font-size: 14px;
}

#dribbble .flickr-widget-sidebar img{
  margin-right: 5px;
  margin-bottom: 10px;
}

#twitter .icon-twitter{
  color: #0ec4ff;
  font-size: 30px;
  position: absolute;
}

#twitter .tweet p{
  margin-left: 35px;
}

.size1{
  font-size: 11px;
}
.size2{
  font-size: 12px;
}
.size3{
  font-size: 13px;
}
.size4{
  font-size: 14px;
}
.size5{
  font-size: 21px;
}

#tags a{
  margin-bottom: 10px;
}

/**
** Blog Post
**/

.blog_post_list i{
  position: absolute;
  color: #0baade;
}

.blog_post_list i:nth-child(2){
  margin-top: 20px;
}
.blog_post_list i:nth-child(3){
  margin-top: 40px;
}

.blog_post_list p{
  display: block;
  margin-bottom: -10px;
  margin-left: 15px;
}

.blog_post_list{
  margin-bottom: 20px;
}

.blog-post-quote{
  background-color: #f5f5f5;
  color: #0baade;
  margin-right: 165px;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 15px 30px 20px 30px;
}

.blog-post-quote i{
  position: absolute;
  font-size: 30px;
}

.blog-post-quote p {
  padding-left: 40px;
  font-size: 18px;
  font-weight: 100;
  display: block;
  margin: 0;
  font-style: italic;
}

#blog-post-comments h3{
  margin-bottom: 30px;
  color: #444;
}

#blog-post-comments p{
  margin-left: 60px;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

#comments2{
  margin-left: 60px;
}

#comments2 p , #comments3 p{
  border-bottom: none;
}

#comments3{
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
}

.comment-icon{
  padding: 0px;
  margin-right: 10px;
  width: 45px;
  height: 45px;
  float: left;
  border-radius: 300px;
  -webkit-border-radius: 300px;
  -moz-border-radius: 300px;
  -o-border-radius: 300px;
  -ms-border-radius: 300px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#blog_post .blog-post-date-border{
  width: 46px;
}


/* #404 Page
================================================== */

.oops{
  text-align: center;
  font-size: 250px;
  font-weight: 600;
  color: rgb(14, 196, 255);
}

.error-page h5{
  text-align: center;
  margin-bottom: 10px;
}

.line-anchor input{
  font-size: 13px;
  color: #7e7e7e;
  border: none;
  border-bottom: 1px solid #e7e7e7;
  padding-bottom: 10px;
}

.error-page-buttons{
  margin-left: 350px;
  margin-top: 20px;
}

.error-page-buttons span{
  position: absolute;
  margin-left: 20px;
  margin-top: 10px;
}

.error-page-buttons	.line-anchor input{
  margin-top: -43px;
  margin-left: 235px;
}

/* #Pricing Tables Page
================================================== */

.pricing-content-1{
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.pricing-content-2{
  margin-top: -10px;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.pricing-content-3{
  -webkit-transinlineition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.pricing-content-4{
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.pricing-content-2 .pricing-button{
  background-color: #0baade;
}



.pricing-header-1 , .pricing-header-2 , .pricing-header-3 , .pricing-header-4{
  background-color: #d5d5d5;
  padding: 10px 20px 20px 20px;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.pricing-header-2{
  background-color: #1bacd9;
  margin-top: 10px;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}


.pricing-heading-1 , .pricing-heading-2 , .pricing-heading-3 , .pricing-heading-4{
  text-align: center;
  font-size: 30px;
  color: #fff;
  font-weight: 100;
}

.pricing-heading-1 ,.pricing-heading-3 , .pricing-heading-4{
  color: #949494;
}

.pricing-price-1 , .pricing-price-3 , .pricing-price-4{
  background-color: #e1e1e1;
  padding: 30px 30px;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.pricing-price-1 p , .pricing-price-3 p , .pricing-price-4 p{
  color: #949494;
  font-weight: 100;
  font-size: 18px;
}

.pricing-price-1 p span , .pricing-price-3 p span , .pricing-price-4 p span{
  font-size: 48px;
  color: #949494;
}

.pricing-price-1 p:last-of-type , .pricing-price-3 p:last-of-type , .pricing-price-4 p:last-of-type{
  font-size: 11px;
  margin-top: 10px;
  text-align: center;
}

.pricing-price-2{
  background-color: #2ec4e4;
  padding: 30px 30px;
}

.pricing-price-2 p{
  color: #fff;
  font-weight: 100;
  font-size: 18px;
}

.pricing-price-2 p span{
  font-size: 48px;
  color: #fff;
}

.pricing-price-2 p:last-of-type{
  font-size: 11px;
  margin-top: 10px;
  text-align: center;
}

.pricing-price{
  text-align: center;
}

.pricing-content-1 .pricing-features-list , .pricing-content-3 .pricing-features-list , .pricing-content-4 .pricing-features-list{
  border: 1px solid #c8c8c8;
}


.pricing-content-1 .pricing-gradient-border:before , 
.pricing-content-3 .pricing-gradient-border:before ,
.pricing-content-4 .pricing-gradient-border:before {
  content:"";
  
  height:1px;
  background:-moz-linear-gradient(left, #FFFFFF 0%,#d5d5d5 50%,#FFFFFF 100%);
  
  background:-webkit-linear-gradient(left, #FFFFFF 0%,#d5d5d5 50%,#FFFFFF 100%);
  
  background:linear-gradient(left, #FFFFFF 0%,#d5d5d5 50%,#FFFFFF 100%);
  width:100%;
  display:block;
}

.pricing-content-1 button , 
.pricing-content-3 button ,
.pricing-content-4 button {
  background-color: #e1e1e1;
  border-bottom: 2px solid #d5d5d5;
  color: #949494;
}

.pricing-features-list{
  border: 1px solid #2ec4e4;
}

.pricing-features-list ul li{
  font-size: 14px;
  color: #949494;
  text-align: center;
  margin: 3px 3px;
  padding: 15px 15px;
}

.pricing-gradient-border:before{
  content:"";
  
  height:1px;
  background:-moz-linear-gradient(left, #FFFFFF 0%,#35c6e5 50%,#FFFFFF 100%);
  
  background:-webkit-linear-gradient(left, #FFFFFF 0%,#35c6e5 50%,#FFFFFF 100%);
  
  background:linear-gradient(left, #FFFFFF 0%,#35c6e5 50%,#FFFFFF 100%);
  width:100%;
  display:block;
}

.pricing-button{
  text-align: center;
}

.pricing-button button{
  width: 100%;
  cursor: pointer;
  color: #fff;
  padding: 12px 10px;
  font-size: 18px;
  font-weight: 100;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.pricing-button input:hover{
  background-color: #0baade;
}

/* #Elements Page Styles
================================================== */

#accordion{
  margin-top: 30px;
}

.acc-trigger {
  border-top: 1px solid #ced8df;
  cursor: pointer;
  display: block;
  margin: 0;
  
}

.acc-trigger:first-of-type{
  border-top: none;
}

.no-js .acc-trigger:last-of-type {
  border-bottom: none;
}

.acc-trigger a {
  background: url(../img/accordion-content-buttons.png) no-repeat;
  background-position: 10px 11px;
  display: block;
  color: #444444;
  outline: medium none;
  padding-top: 20px;
  padding-bottom: 10px;
  padding-left: 55px;
  text-decoration: none;
  text-shadow: none;
  -webkit-transition: all 0s ease-out;
  -moz-transition: all 0s ease-out;
  -o-transition: all 0s ease-out;
  -ms-transition: all 0s ease-out;
  transition: all 0s ease-out;
}

h3.acc-trigger a, h4.acc-trigger a {
  background-position: 20px 24px;
}

h6.acc-trigger a {
  background-position: 20px 21px;
}

.acc-trigger a:hover, .acc-trigger.active a, .acc-trigger.active a:hover {
  color: #0baade;
}

.acc-trigger.active a:hover {
  background-color: transparent;
}

.acc-trigger.active {
  cursor: default;
}

.acc-trigger.active:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

.acc-trigger.active a {
  background-position: 10px -99px;
  cursor: default;
}

h3.acc-trigger.active a, h4.acc-trigger.active a {
  background-position: 20px -87px;
}

h6.acc-trigger.active a {
  background-position: 20px -90px;
}

.acc-container #paragraph {
  padding: 0 20px 25px 2px;
}

.js .acc-container {
  margin-top: 5px;
  font-size: 13px;
  line-height: 15px;
}

.dropcaps1{
  color: #0baade;
  font-weight: 600;
  font-size:20px;
  padding: 10px 10px 10px 10px;
  float:left;
  margin-right: 10px;
  margin-top: 5px;
  background-color: #efefef;
}

.dropcaps2{
  color: #efefef;
  font-weight: 600;
  font-size:20px;
  padding: 10px 10px 10px 10px;
  float:left;
  margin-right: 10px;
  margin-top: 5px;
  background-color: #666666;
}

.message-box{
  background-color: #f5f5f5;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  margin-top: 10px;
}

.message-box button{
  margin-top: 20px;
}

.highlight{
  background-color: #0baade;
  color: #fff;
}

.highlight2{
  background-color: #444;
  color: #fff;
}

.list-types div{
  color: #0baade;
  display: inline-block;
  margin-bottom: 6px;
}

.list-types div small{
  color: #999999;
  margin-left: 5px;
  font-size: 13px;
  font-family: Open Sans;
}

.blockquotes{
  background-color: #f5f5f5;
  color: #0baade;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 15px 30px 20px 30px;
}

.blockquotes i{
  position: absolute;
  font-size: 30px;
}

.blockquotes p {
  padding-left: 40px;
  font-size: 18px;
  font-weight: 100;
  display: block;
  margin: 0;
  font-style: italic;
}

.alert{
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -o-border-radius: 0px;
  -ms-border-radius: 0px;
}

/**
**Tabs
**/

.tabs-nav2 {
  margin-top: 10px;
  list-style: none;
  overflow: hidden;
  padding: 0;
  width: 100%;
}

.tabs-nav2 li {
  float: left;
  line-height: 32px;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}

.tabs-nav2 li.active {
  line-height: 31px;
}

.tabs-nav2 li a {
  background: #ffffff;
  border: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea;
  border-left: none;
  color: #444444;
  display: block;
  letter-spacing: 0;
  outline: none;
  padding: 0 16px;
  text-decoration: none;
  text-shadow: 0 1px 0 #fff;
}

.tabs-nav2 li:first-child a {
  border-left: 1px solid #eaeaea;
}

.tabs-nav2 li a:hover {
  background: #f0f0f0;
}

.tabs-nav2 li a:hover, .tabs-nav li.active a {
  color: #0baade;
}

.tabs-nav2 li.active a  {
  background: #fff;
  border-bottom: 2px solid #fff;
  border-top: 3px solid #0baade;
}

.tabs-container2 {
  border: 1px solid #eaeaea;
  margin: -3px 0 20px;
  overflow: hidden;
  width: 100%;
  font-family: Open Sans;
  font-weight: light;
  font-size: 13px;
  color: #999999;
}

.tab-content2 {
  padding: 20px;
  line-height: 20px;
}

#content {
  display: none;
  /* required */
  font-family: Open Sans;
  font-size: 11px;
  font-weight: light;
  position: absolute;
  /* required */
  margin-left: -180px;
  padding: 5px;
  
  color: #fff;
  background-color: #000;
  opacity: 0.6;
  border-radius: 3px;
}

#content:after {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

#content:after {
  border-color: rgba(0, 0, 0, 0);
  border-top-color: #000000;
  border-width: 5px;
  left: 50%;
  margin-left: -5px;
}


/* #Footer
================================================== */

footer{
  background-color: #3a4549;
}

.line-vertical{
  height: 238px;
  border-right:1px solid #283033;
  /* layer fill content + color overlay */
  position: absolute;
  margin-left: 314px;
}

#lv2{
  margin-left: 610px;
}

#lv3{
  margin-left: 914px;
}

.footer-widget{
  margin-top: 20px;
  display: block;
}

footer h5{
  font-size: 16px;
  color: #e5e5e5;
}

.flickr-widget {
  margin-top: 20px;
}

.flickr-widget .flickr_badge_image {
  margin: 0 1px 1px 0;
}

.flickr-widget a {
  border: none !important;
  line-height: 1 !important;
}

.flickr-widget .flickr_badge_image,
.flickr-widget .flickr_badge_image a {
  float: left;
}

.flickr-widget .flickr_badge_image,
.flickr-widget .flickr_badge_image a,
.flickr-widget .flickr_badge_image img {
  display: block;
  width: 82px;
  height: 73px;
  margin-bottom: 8px;
  margin-right: 8px;
}

.social-icons i {
  font-size: 30px;
  color: #acacac;
  margin-right: 10px;
  cursor: pointer;
}

.social-icons{
  margin-top: 15px;
}

.social-icons .icon-facebook-2:hover{
  color: #436eac;
}

.social-icons .icon-twitter-2:hover{
  color: #0ec4ff;
}

.social-icons .icon-dribbble-2:hover{
  color: #e33b7e;
}

.social-icons .icon-google-plus:hover{
  color: #282828;
}

.social-icons .icon-feed:hover{
  color: #ec7422;
}

.social-icons .subscribe-input{
  width: 260px;
}

footer input{
  background-color: #2f383c;
  border: none;
  display: inline-block;
  height: 20px;
  padding: 4px 6px;
  width: 95%;
  display: block;
  margin: 15px 0px 20px 0px;
  font-size: 12px;
  line-height: 20px;
  color: #a6a6a6;
  vertical-align: middle;
}

footer input:focus{
  border-color: none;
  outline: 0;
  outline: thin dotted \9;
}

footer .btn{
  float: right;
  color: #636768;
  border-bottom: 2px solid #242729;
  background-color: #2f393b;
}

footer .btn:hover{
  background-color: #262c2e;
}


.copyrights{
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #283033;
  background-color: #2b3336;
}

.tinynav{
  display: none;
}
/* #Media Queries
================================================== */

/* Large desktop
@media (min-width: 1200px) {



}

Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 979px) {


.lblack{
display: none;
}

.tinynav{
display: block;
width: 100px;
margin-top: 70px;
width: 500px;
margin-left: -60px;
width: 100%;
-webkit-appearance: none;
Fix for Mobile Safari
background-color: #f8f8f8;
border: 1px solid #e8e8e8;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
color: #8f8f8f;
font: 12px/1.5 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
padding: 5px 10px;
border-radius: 0;
background-image: url(../img/responsive-nav-bg.png);
background-position: center right;
background-repeat: no-repeat;
}

.logo a{
margin-left: 300px;
text-align: center;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal{
width: 400px;
}

.line-vertical{
display: none;
}

footer .footer-widget:last-of-type{
margin-left: 0px;
}

.footer-widget:nth-child(3){
display: none;
}

.flickr-widget-footer{
margin-left: -10px;
}

.flickr-widget-footer img{
margin-top: 10px;
margin-right: 10px;
margin-bottom: 0px;
width: 70px;
height: 70px;
}

footer .footer-subscribe{
margin-left: -30px;
}

footer .footer-widget .social-icons i{
margin-left: 0px;
font-size: 20px;
margin-right: 0px;
}

}

Landscape phone to portrait tablet
@media (max-width: 767px) {

.container{
padding: 30px;
}

.lblack{
display: none;
}

.tinynav{
display: block;
margin-top: 25px;
width: 600px;
margin-left: 30px;
-webkit-appearance: none;
Fix for Mobile Safari
background-color: #f8f8f8;
border: 1px solid #e8e8e8;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
color: #8f8f8f;
font: 12px/1.5 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
padding: 5px 10px;
border-radius: 0;
background-image: url(../img/responsive-nav-bg.png);
background-position: center right;
background-repeat: no-repeat;
}

.logo a{
margin-left: 260px;
text-align: center;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal{
margin-top: 60px;
margin-left: -30px;
width: 600px;
}

.section-desc button{
position: absolute;
}

.line-vertical{
display: none;
}

}

Landscape phones and down
@media (max-width: 480px) {

.container{
padding: 30px;
}


.lblack{
display: none;
}

.tinynav{
display: block;
margin-top: 25px;
width: 300px;
margin-left: 30px;
-webkit-appearance: none;
Fix for Mobile Safari
background-color: #f8f8f8;
border: 1px solid #e8e8e8;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
color: #8f8f8f;
font: 12px/1.5 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
padding: 5px 10px;
border-radius: 0;
background-image: url(../img/responsive-nav-bg.png);
background-position: center right;
background-repeat: no-repeat;
}

.logo a{
margin-left: 60px;
text-align: center;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal{
margin-top: 60px;
margin-left: -30px;
width: 600px;
}

.clear{
margin: 0px;
}

section{
margin-bottom: 30px;
}

}

*/


/* @media (min-width:1281px) {

}
@media (min-width:1025px) {
.wrapper{
background-color: red;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
width:  650px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-left: 0;
margin-right: 30px;
}
.line-vertical{
display: none;
}
}
@media (min-width:961px) {
.wrapper{
background-color: green;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
width:  420px;
margin-left: 160px;
margin-top: 30px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-left: 0;
margin-right: 30px;
}
.line-vertical{
display: none;
}

.lblack{
display: none;
}

.tinynav{
display: block;
margin-top: 60px;
width: 600px;
margin-left: 60px;
-webkit-appearance: none;
Fix for Mobile Safari
background-color: #f8f8f8;
border: 1px solid #e8e8e8;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
color: #8f8f8f;
font: 12px/1.5 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
padding: 5px 10px;
border-radius: 0;
background-image: url(../img/responsive-nav-bg.png);
background-position: center right;
background-repeat: no-repeat;
}

.logo a{
margin-left: 450px;
}

}
@media (min-width:641px) {
.wrapper{
background-color: yellow;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
width:  420px;
margin-left: 130px;
margin-top: 30px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-left: 0;
margin-right: 30px;
}
.line-vertical{
display: none;
}

.cbp-qtprogress {
display: none;

}

.lblack{
display: none;
}

.tinynav{
display: block;
margin-top: 60px;
width: 600px;
margin-left: -30px;
-webkit-appearance: none;
Fix for Mobile Safari
background-color: #f8f8f8;
border: 1px solid #e8e8e8;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
color: #8f8f8f;
font: 12px/1.5 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
padding: 5px 10px;
border-radius: 0;
background-image: url(../img/responsive-nav-bg.png);
background-position: center right;
background-repeat: no-repeat;
}

.logo a{
margin-left: 300px;
}


.medium{
font-size: 11px;
}

.twitter-account-text button:last-of-type{
margin-top: 5px;
margin-left: 0px;
}


}
@media (min-width:481px) {
.wrapper{
background: orange;
}

.section-desc{
margin-bottom: 30px;
}

.twitter-account-image{
margin-top: 0px;
}

.twitter-account-text button:last-of-type{
margin-top: 0px;
margin-left: 0px;
}

.tinynav{
display: block;
margin-top: 20px;
width: 600px;
margin-left: 60px;
-webkit-appearance: none;
Fix for Mobile Safari
background-color: #f8f8f8;
border: 1px solid #e8e8e8;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
color: #8f8f8f;
font: 12px/1.5 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
padding: 5px 10px;
border-radius: 0;
background-image: url(../img/responsive-nav-bg.png);
background-position: center right;
background-repeat: no-repeat;
}

.logo a{
margin-left: 300px;
}

.features section{
margin-bottom: 10px;
}

#subscribe-us-footer{
margin-top: 110px;
}
}
@media (min-width:320px) {

.wrapper{
background-color: blue;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
width:  420px;
margin-left: 50px;
margin-top: 60px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-left: 0;
margin-right: 30px;
}
.line-vertical{
display: none;
}

.cbp-qtprogress {
display: none;

}

.lblack{
display: none;
}

.tinynav{
display: block;
margin-top: 20px;
width: 90%;
margin-left: 30px;
-webkit-appearance: none;
Fix for Mobile Safari
background-color: #f8f8f8;
border: 1px solid #e8e8e8;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
color: #8f8f8f;
font: 12px/1.5 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
padding: 5px 10px;
border-radius: 0;
background-image: url(../img/responsive-nav-bg.png);
background-position: center right;
background-repeat: no-repeat;
}

.logo a{
margin-left: 230px;
}


.medium{
font-size: 11px;
}

.twitter-account-text button:last-of-type{
margin-top: 0px;
margin-left: 0px;
}
}
*/

/* Landscape phones and down */
@media (min-width: 0px) and (max-width: 613px) {
  
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
  
  .lblack{
    display: none;
  }
  
  .tinynav{
    display: block;
    margin-top: 20px;
    width: 100%;
    margin-left: 0px;
    -webkit-appearance: none;
    Fix for Mobile Safari
      background-color: #f8f8f8;
    border: 1px solid #e8e8e8;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: #8f8f8f;
    font: 12px/1.5 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
    padding: 5px 10px;
    border-radius: 0;
    background-image: url(../img/responsive-nav-bg.png);
    background-position: center right;
    background-repeat: no-repeat;
  }
  
  .logo a{
    margin-left: 0px;
  }
  
  .jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  200%;
    margin-left: -30px;
  }
  
  
  .section-desc .btn{
    margin-bottom: 30px;
    float: left;
  }
  
  .jcarousel-skin-tango .jcarousel-item-horizontal {
    margin-left: 0;
    margin-right: 30px;
  }
  
  .line-vertical{
    display: none;
  }
  
  .medium{
    font-size: 11px;
  }
  
  .twitter-account-text button:last-of-type{
    margin-top: 5px;
    margin-left: 0px;
  }
  
  .cbp-qtprogress {
    display: none;
	
  }
  
  .cbp-qtrotator .client-words p {
    font-size: 15px;
    color: #999999;
    font-weight: 100;
    margin-right: 60px;
  }
  
  
  .footer-widget .social-icons i {
    font-size: 30px;
    color: #acacac;
    margin-right: 0px;
    cursor: pointer;
  }
  
  .twitter-account-image{
    margin-top: 0px;
  }
  
  .twitter-account-text button:last-of-type{
    margin-top: 5px;
    margin-left: 0px;
  }
  
  #subscribe-us-footer{
    margin-top: 190px;
  }
  
  .container{
    margin-left: 100px;
    margin-right: 100px;
  }
  
  #feature{
    margin-bottom: 60px;
  }
  
  .services{
    margin-bottom: 30px;
  }
  
  .services:last-of-type{
    margin-bottom: 0px;
  }
  
  #member{
    margin-bottom: 30px;
  }
  
  #member:last-of-type{
    margin-bottom: 0px;
  }
  
  .single-project-titles{
    margin-top: 90px;
  }
  
  #portfolio_2c{
    width: 767px;
  }
  
  
  #portfolio_3c{
    width: 500px;
  }
  
  
  #portfolio_4c{
    width: 700px;
  }
  
  #quicksand ul li{
    width: 250px;
    margin-left: 200px;
    margin-bottom: 10px;
  }
  
  .contact p{
    margin-bottom: 10px;
  }
  
  .contact p:last-of-type{
    margin-bottom: -10px;
  }
  
  #elements-page .h5-dark{
    margin-top: 30px;
  }
  
  #elements-page #list-types{
    margin-top: 630px;
  }
  
  .pricing-content-1 , .pricing-content-2 , .pricing-content-3 , .pricing-content-4{
    margin-bottom: 20px;
  }
  
  .oops{
    font-size: 160px;
  }
  
  .error-page-buttons{
    margin-left: 50px;
  }
  
  .cbp-qtrotator .cbp-qtcontent img {
    width: 120px;
    height:  120px;
  }
  
  .cbp-qtrotator .client-words {
    padding-bottom: 50px;
    background-color: #fff;
    margin-left: 150px;
  }
  
  .triangle{
    background-image: url(../img/client-test-triangle.png) !important;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: ;
    width: 30px;
    height: 30px;
    position: absolute;
    margin-left: 130px;
    margin-top: 100px;
  }
  
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
  
  .lblack{
    display: none;
  }
  
  .tinynav{
    display: block;
    margin-top: 60px;
    width: 100%;
    margin-left: -40px;
    -webkit-appearance: none;
    Fix for Mobile Safari
      background-color: #f8f8f8;
    border: 1px solid #e8e8e8;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: #8f8f8f;
    font: 12px/1.5 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
    padding: 5px 10px;
    border-radius: 0;
    background-image: url(../img/responsive-nav-bg.png);
    background-position: center right;
    background-repeat: no-repeat;
  }
  
  .logo a{
    margin-left: 300px;
  }
  
  .jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  530px;
    margin-left: ;
    margin-top: 0px;
  }
  
  .jcarousel-skin-tango .jcarousel-item-horizontal {
    margin-left: 0;
    margin-right: 30px;
  }
  
  .line-vertical{
    display: none;
  }
  
  .medium{
    font-size: 11px;
  }
  
  .twitter-account-text button:last-of-type{
    margin-top: 5px;
    margin-left: 0px;
  }
  
  .cbp-qtprogress {
    display: none;
	
  }
  
  .footer-widget .social-icons i {
    font-size: 30px;
    color: #acacac;
    margin-right: 0px;
    cursor: pointer;
  }
  
  #portfolio_2c{
    width: 768px;
  }
  
  
  #portfolio_3c{
    width: 800px;
  }
  
  
  #portfolio_4c{
    width: 800px;
  }
  
  .oops{
    font-size: 160px;
  }
  
  .error-page-buttons{
    margin-left: 150px;
  }
  
}

@media (min-width:979px) and (max-width:1200px){
  
  
  .jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  420px;
    margin-left: 150px;
    margin-top: 0px;
  }
  
  .jcarousel-skin-tango .jcarousel-item-horizontal {
    margin-left: 0;
    margin-right: 30px;
  }
  
  .line-vertical{
    display: none;
  }
  
  .medium{
    font-size: 11px;
  }
  
  .twitter-account-text button:last-of-type{
    margin-top: 5px;
    margin-left: 0px;
  }
  
  .cbp-qtprogress {
    display: none;
	
  }
  
  #portfolio_2c{
    width: 979px;
  }
  
  
  #portfolio_3c{
    width: 979px;
  }
  
  #portfolio_4c{
    width: 979px;
  }
  
  
  .error-page-buttons{
    margin-left: 50px;
  }
  
  
}

/* Large desktop */
@media (min-width: 1200px) {
}

Setting Validate Copy Format

<!doctype html>
<html lang="en">
<head>

	<!-- Meta -->
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- Title -->
	<title>Prosperity</title>
	
	<!-- Twitter Bootstrap -->
	<link rel="stylesheet" href="css/bootstrap.css">

	<!-- Jquery-Js-Theme Plugins Styles -->
	<link rel="stylesheet" href="css/plugins.css">

	<!-- Style Selectors And Color Variations -->

	<link rel="stylesheet" href="css/wide.css" id="layout" />

	<link rel="stylesheet" href="css/colors/color-blue.css" id="colors" />

	<link rel="stylesheet" href="css/styleselector.css" />

	<!-- Main Theme Styling -->
	<link rel="stylesheet" href="css/main.css">

	<!-- Dark And Light Footer & Header -->
	<link rel="stylesheet" href="css/dark.css" id="layout-colors">

	<!-- Google Fonts -->
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,600,300,700' rel='stylesheet'>

	<!-- Font Awesome (Retina Icons) -->
	<link rel="stylesheet" href="css/font-awesome.css">

	<!-- IcoMoon (Retina Icons) -->
	<link rel="stylesheet" href="css/icomoon.css">

	<!--[if IE 7]>
		<link rel="stylesheet" href="css/font-awesome-ie7.css">
	<![endif]-->
	<!--[if lt IE 9]>
    	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!--[if lte IE 6]>  
		<link rel="stylesheet" href="http://universal-ie6-css.googlecode.com/files/ie6.1.1.css" media="screen, projection">  
	<![endif]-->
	<!--[if lte IE 9]>
		<script src="js/menu.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" charset="utf-8">
			$(function() {
				$("#menu").menu({'effect' : 'slide'});
			});
		</script>
	<![endif]-->

	<script src="js/modernizr.custom.js"></script>

</head>
<body>

	<section class="wrapper"><!-- Wrapper -->
		
		<header><!-- Header -->
			
			<section class="container"><!-- Container -->

				<section class="row-fluid">
				
					<section class="logo span2"><!-- Logo -->

						<h3><a href="index.html">Prosperity</a></h3>
						
					</section><!-- End Logo -->

					<nav class="main-nav span10"><!-- Main Navigation Menu -->

						<ul class="menu lblack slide" id="menu">
							<li>
								<a href="index.html" class="active">Home</a>
								<ul>
									<li>
										<a href="#">Home Versions</a>
										<ul>
											<li><a href="index.html">Home Standard</a></li>
											<li><a href="index-minimal.html">Home Minimal</a></li>
											<li><a href="index-blog.html">Home Blog</a></li>
											<li><a href="index-portfolio.html">Home Portfolio</a></li>
										</ul>
									</li>
									<li>
										<a href="#">Home Sliders</a>
										<ul>
											<li><a href="one_by_one_slider.html">One By One Slider</a></li>
											<li><a href="index.html">Revolution Slider</a></li>
											<li><a href="layer_slider.html">Layer Slider</a></li>
											<li><a href="royal_slider.html">Royal Slider</a></li>
											<li><a href="nivo_slider.html">Nivo Slider</a></li>
											<li><a href="camera_slider.html">Camera Slider</a></li>
											<li><a href="camera_slider - thumbs.html">Camera Slider Thumbs</a></li>
											<li><a href="rhino_slider.html">Rhino Slider</a></li>
										</ul>
									</li>
								</ul>
							</li>
							<li>
								<a href="about.html">About</a>
								<ul>
									<li><a href="about.html">About</a></li>
									<li><a href="team.html">Team</a></li>
									<li><a href="services.html">Services</a></li>
								</ul>
							</li>
							<li>
								<a href="#">Portfolio</a>
								<ul>
									<li><a href="portfolio_2.html">Portfolio 2C</a></li>
									<li><a href="portfolio_3.html">Portfolio 3C</a></li>
									<li><a href="portfolio_4.html">Portfolio 4C</a></li>
									<li><a href="portfolio_quicksand.html">Portfolio Quicksand</a></li>
									<li><a href="single_project.html">Single Project</a></li>
								</ul>
							</li>
							<li>
								<a href="#">Blog</a>
								<ul>
									<li><a href="blog_full_width.html">Blog Full Width</a></li>
									<li><a href="blog_1c.html">Blog 1C</a></li>
									<li><a href="blog_1c - leftsb.html">Blog 1C Left Sb</a></li>
									<li><a href="blog_post.html">Blog Post</a></li>
								</ul>
							</li>
							<li>
								<a href="#">Contact</a>
								<ul>
									<li><a href="contact_1.html">Contact 1</a></li>
									<li><a href="contact_2.html">Contact 2</a></li>
									<li><a href="contact_3.html">Contact 3</a></li>
									<li><a href="contact_4.html">Contact 4</a></li>
								</ul>
							</li>
							<li>
								<a href="#">Features</a>
								<ul>
									<li><a href="elements.html">Elements</a></li>
									<li><a href="404.html">404 Page</a></li>
									<li><a href="pricing_tables.html">Pricing Tables</a></li>
									<li><a href="typography.html">Typography</a></li>
									<li><a href="columns.html">Columns</a></li>
									<li><a href="videos.html">Videos</a></li>
								</ul>
							</li>
						</ul>
						
					</nav><!-- End Main Navigation Menu -->

				</section>

			</section><!-- End Container -->

		</header><!-- End Header -->

		<section class="slider-wrapper"><!-- Slider Wrapper -->

			<section class="bannercontainer responsive"><!-- Banner Container -->

				<section class="banner">

					<ul>

						 <li data-transition="fade">
							<img src="img/sliders/background.png"/>
							<div class="rev-bg"></div>
							<div class="caption lfb big_white" data-x="346" data-y="80" data-speed="1200" data-start="1700" data-easing="easeOutBack">Itâ€™s Not About The Design</div>
							<div class="caption lfb medium_white" data-x="425" data-y="150" data-speed="1200" data-start="2500" data-easing="easeOutBack">Itâ€™s About Well Documented Files, Easy-to Edit</div>
							<div class="caption lfb medium_white_paragraph" data-x="241" data-y="200" data-speed="1200" data-start="3300" data-easing="easeOutBack"><span>Prosperity</span> is a responsive, mobile app website HTML5 template Coded using the latest HTML5 and CSS3 standards,<br> Prosperity also features a 8 jQuery slider and PHP contact form. and is based on twitter bootstrap<br> Also has retina ready and boxed and wide layout and many more features ;)</div>
							<div class="caption sfb" data-x="590" data-y="315" data-speed="1200" data-start="4300" data-easing="easeOutBack"><a href="#" target="_blank" class="button">Buy The Theme</a></div>

						
						</li> 
						<li data-transition="fade" data-slotamount="20" data-speed="103000">
							<img src="img/sliders/background.png"/>
							<div class="rev-bg"></div>
							<div class="caption lfr" data-x="110" data-y="60" data-speed="1300" data-start="1200" data-easing="easeOutElastic"><img src="img/sliders/rev/html5.png" /></div>
							<div class="caption lfr" data-x="420" data-y="60" data-speed="1300" data-start="2200" data-easing="easeOutElastic"><img src="img/sliders/rev/css3.png" /></div>
							<div class="caption lfb big_white" data-x="755" data-y="60" data-speed="1200" data-start="3500" data-easing="easeOutExpo" style="font-weight: 100;">HTML5 and CSS3</div>
							<div class="caption lfb medium_white" data-x="745" data-y="120" data-speed="1200" data-start="4500" data-easing="easeOutBack">Using the latest features of html5 and css3</div>
							<div class="caption lfb medium_white_paragraph start" data-x="735" data-y="170" data-speed="1200" data-start="5500" data-easing="easeOutBack" style="font-size: 16px; padding: 1px 4px 0px; margin: 0px; border: 0px; line-height: 30px; white-space: nowrap; opacity: 1; left: 400px; top: 200px;"><span>Prosperity</span> is a responsive, mobile app website HTML5 template <br>  Prosperity also features a 8 jQuery slider and PHP contact form.<br> and is based on twitter bootstrap Also has retina ready and boxed <br> and wide layout and many more features ;) .</div>
							<div class="caption sfb" data-x="900" data-y="300" data-speed="1200" data-start="6500" data-easing="easeOutBounce"><a href="#" target="_blank" class="button">Buy The Theme</a></div>
							<div class="caption lfb small_white" data-x="830" data-y="350" data-speed="1200" data-start="7500" data-easing="easeOutSine">Available for Mac, Windows, iOS, and Android.</div>
						</li> 
						<li data-transition="fade" data-slotamount="20" data-speed="103000">
							<img src="img/sliders/background.png"/>
							<div class="rev-bg"></div>
							<div class="caption lfr" data-x="80" data-y="40" data-speed="500" data-start="1200" data-easing="easeOutExpo"><img src="img/sliders/rev/devices.png" /></div>
							<div class="caption lfr big_white" data-x="740" data-y="80" data-speed="400" data-start="2500" data-easing="easeInOutExpo">Responsive Design</span></div>
							<div class="caption lfr medium_white" data-x="790" data-y="140" data-speed="400" data-start="3500" data-easing="easeOutExpo">An easy way to organize your work.</div>
							<div class="caption lfb medium_white_paragraph start" data-x="725" data-y="190" data-speed="1200" data-start="5500" data-easing="easeOutBack" style="font-size: 16px; padding: 1px 4px 0px; margin: 0px; border: 0px; line-height: 30px; white-space: nowrap; opacity: 1; left: 400px; top: 200px;"><span>Prosperity</span> is a responsive, mobile app website HTML5 template <br>  Prosperity also features a 8 jQuery slider and PHP contact form.<br> and is based on twitter bootstrap Also has retina ready and boxed <br> and wide layout. and many more features ;)</div>
							<div class="caption lfr" data-x="890" data-y="320" data-speed="400" data-start="5500" data-easing="easeOutExpo"><a href="#" target="_blank" class="button">Buy The Theme</a></div>
						</li>
						
					</ul>

				</section>

			</section><!-- End Banner Container -->

		</section><!-- End Slider Wrapper -->

		<section class="clear"></section>

		<section class="container"><!-- Container -->

			<section class="features"><!-- Features -->

				<section class="feature row-fluid"><!-- Row Fluid -->
					
					<section class="span6" id="feature">
						
						<section class="features-icons">
							
							<i class="icon-mobile-2"></i>
							<i class="icon-mobile"></i>

						</section>

						<section class="features-text">
						
							<h4>Responsive Design</h4>
							<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit mec.Neque porro quisquam. consectetur adipiscing elit. Donec mauris turpis, lacinia non luctus vestibulum, elementum sed ligula nunc non sem ante</p>

						</section>

					</section>

					<section class="span6" id="feature">
						
						<section class="features-icons">
							
							<i class="icon-drawer"></i>
							<i class="icon-copy"></i>

						</section>

						<section class="features-text">
						
							<h4>Easy-To Edit Files</h4>
							<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit mec.Neque porro quisquam. consectetur adipiscing elit. Donec mauris turpis, lacinia non luctus vestibulum, elementum sed ligula nunc non sem ante</p>

						</section>

					</section>

				</section><!-- End Row Fluid -->

				<section class="feature row-fluid"><!-- Row Fluid -->
					
					<section class="span6" id="feature">
						
						<section class="features-icons">
							
							<i class="icon-twitter"></i>
							<i class="icon-dribbble"></i>

						</section>

						<section class="features-text">
						
							<h4>Twitter & Dribbble Widget</h4>
							<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit mec.Neque porro quisquam. consectetur adipiscing elit. Donec mauris turpis, lacinia non luctus vestibulum, elementum sed ligula nunc non sem ante</p>

						</section>

					</section>

					<section class="span6" id="feature">
						
						<section class="features-icons">
							
							<i class="icon-file-xml"></i>
							<i class="icon-file-css"></i>

						</section>

						<section class="features-text">
						
							<h4>+35 HTML5 Files</h4>
							<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit mec.Neque porro quisquam. consectetur adipiscing elit. Donec mauris turpis, lacinia non luctus vestibulum, elementum sed ligula nunc non sem ante</p>

						</section>

					</section>

				</section><!-- End Row Fluid -->

				<section class="feature row-fluid"><!-- Row Fluid -->
					
					<section class="span6" id="feature">
						
						<section class="features-icons">
							
							<i class="icon-html5"></i>
							<i class="icon-css3"></i>

						</section>

						<section class="features-text">
						
							<h4>HTML5 & CSS3</h4>
							<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit mec.Neque porro quisquam. consectetur adipiscing elit. Donec mauris turpis, lacinia non luctus vestibulum, elementum sed ligula nunc non sem ante</p>

						</section>

					</section>

					<section class="span6">
						
						<section class="features-icons" id="feature">
							
							<i class="icon-stats"></i>
							<i class="icon-user"></i>

						</section>

						<section class="features-text">
						
							<h4>24/7 Support</h4>
							<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit mec.Neque porro quisquam. consectetur adipiscing elit. Donec mauris turpis, lacinia non luctus vestibulum, elementum sed ligula nunc non sem ante</p>

						</section>

					</section>

				</section><!-- End Row Fluid -->

			</section><!-- End Features -->

			<section class="clear"></section>

			<section class="row-fluid"><!-- Recent Work -->
				
				<section class="section-desc span3">

					<section class="jcarousel-scroll"><!-- Carousel Buttons -->
				        <a href="#" id="mycarousel-prev"><i class="icon-angle-left"></i></a>
				        <a href="#" id="mycarousel-next"><i class="icon-angle-right"></i></a>
			    	</section><!-- End Carousel Buttons -->

					<section class="section-title"><!-- Section Title -->

						<h5>Recent Work</h5>

					</section><!-- End Section Title -->

					<p>Suspendisse in dolor dui. Curabitur diam est, bibendum ut congue nec, posuere at nisl, Vivamus commodo velit sit amet dui.</p>

					<button class="btn medium">See More</button>
					

				</section>

				<section id="mycarousel" class="mycarousel jcarousel-skin-tango span9"><!-- Carousel -->

					<ul>

					  <li class="hexagon_shape_home">
					  	<section class="full_overlay">
						  	<div class="content" id="home_overlay_content">
					           <h6>Project Title</h6>
					            <p>Lorem ipsum dolor sit amet,<br> consectetur elit. </p>
					            <i class="icon-eye"><small>100</small></i>
					            <i class="icon-bubbles"><small>100</small></i>
					        </div>
					        <div class="overlay-img" id="home_portfolio">
							  	<img style="width:230px;" src="img/sliders/camera/slides/sea.jpg" alt="" />
							  	<div class="portf_shape"></div>
					        </div>
					    </section>
				        
					  </li>

					  <li class="hexagon_shape_home">
					  	<section class="full_overlay">
						  	<div class="content" id="home_overlay_content">
					           <h6>Project Title</h6>
					            <p>Lorem ipsum dolor sit amet,<br> consectetur elit. </p>
					            <i class="icon-eye"><small>100</small></i>
					            <i class="icon-bubbles"><small>100</small></i>
					        </div>
					        <div class="overlay-img" id="home_portfolio">
							  	<img style="width:230px;" src="img/sliders/camera/slides/road.jpg" alt="" />
							  	<div class="portf_shape"></div>
					        </div>
					    </section>
					  </li>

					  <li class="hexagon_shape_home">
					  	<section class="full_overlay">
						  	<div class="content" id="home_overlay_content">
					           <h6>Project Title</h6>
					            <p>Lorem ipsum dolor sit amet,<br> consectetur elit. </p>
					            <i class="icon-eye"><small>100</small></i>
					            <i class="icon-bubbles"><small>100</small></i>
					        </div>
					        <div class="overlay-img" id="home_portfolio">
							  	<img style="width:230px;" src="img/sliders/camera/slides/shelter.jpg" alt="" />
							  	<div class="portf_shape"></div>
					        </div>
					    </section>
					  </li>

					  <li class="hexagon_shape_home">
					  	<section class="full_overlay">
						  	<div class="content" id="home_overlay_content">
					           <h6>Project Title</h6>
					            <p>Lorem ipsum dolor sit amet,<br> consectetur elit. </p>
					            <i class="icon-eye"><small>100</small></i>
					            <i class="icon-bubbles"><small>100</small></i>
					        </div>
					        <div class="overlay-img" id="home_portfolio">
							  	<img style="width:230px;" src="img/sliders/camera/slides/bridge.jpg" alt="" />
							  	<div class="portf_shape"></div>
					        </div>
					    </section>
					  </li>

					  <li class="hexagon_shape_home">
					  	<section class="full_overlay">
						  	<div class="content" id="home_overlay_content">
					           <h6>Project Title</h6>
					            <p>Lorem ipsum dolor sit amet,<br> consectetur elit. </p>
					            <i class="icon-eye"><small>100</small></i>
					            <i class="icon-bubbles"><small>100</small></i>
					        </div>
					        <div class="overlay-img" id="home_portfolio">
							  	<img style="width:230px;" src="img/sliders/camera/slides/leaf.jpg" alt="" />
							  	<div class="portf_shape"></div>
					        </div>
					    </section>
					  </li>

					</ul>

				</section><!-- End Carousel -->

			</section><!-- End Recent Work  -->

			<section class="clear"></section>

			<section class="row-fluid"><!-- Latest Posts -->
				
				<section class="section-desc span3">

					<section class="jcarousel-scroll"><!-- Carousel Buttons -->
				        <a href="#" id="mycarousel-prev2"><i class="icon-angle-left"></i></a>
				        <a href="#" id="mycarousel-next2"><i class="icon-angle-right"></i></a>
			    	</section><!-- End Carousel Buttons -->

					<section class="section-title"><!-- Section Title -->

						<h5>Latest Posts</h5>

					</section><!-- End Section Title -->

					<p>Suspendisse in dolor dui. Curabitur diam est, bibendum ut congue nec, posuere at nisl, Vivamus commodo velit sit amet dui.</p>
					
					<button class="btn medium">See More</button>

				</section>

				<section id="mycarousel" class="mycarousel2 jcarousel-skin-tango span9 home-blog-carousel"><!-- Carousel -->

					<ul>
					 	<li id="blog_full_width">
					 		<section class="blog-title">
					 			<section class="blog-post-date-border">
						 			<section class="blog-post-date">
						 				<h4>22</h4>
						 				<small>May</small>
						 			</section>
					 			</section>
					 			<h3>This is an image post</h3>
					 			<p>Written By <span><a href="#">Hesham Emara</a></span></p>
					 		</section>
					 		<section class="blog-post-info" id="home-blog-post-info">
					 			<section id="date">
					 				<i class="icon-calendar-empty"></i>
					 				<p>22 Hours Ago</p>
					 			</section>
					 			<section id="comments">
					 				<i class="icon-bubbles"></i>
					 				<p>4 Comments</p>
					 			</section>
					 			<section id="favorite">
					 				<i class="icon-heart"></i>
					 				<p>Favorite</p>
					 			</section>
					 			<section id="share">
					 				<i class="icon-share-alt"></i>
					 				<p>Share It</p>
					 			</section>
					 		</section>
					 		<div class="blog-post-category" id="home-blog-post-category"><p>Designs</p></div>
					 		<section class="blog-post-img full_overlay2" id="home-blog-post-img">
					 			<div class="content2"><a href="img/sliders/camera/slides/leaf.jpg" class="icon-image folio" rel="gallery"><i class="icon-search"></i></a></div>
					 			<img src="img/sliders/camera/slides/leaf.jpg" alt="" >
					 		</section>
							<section class="blog-post-text" id="home-blog-post-text">
					 			<p><span>Works On iPhones, iPad And More Devices.</span><br>Neque porro quisquam est, qui dolorem ipsum quia dolor sit mec.Neque porro quisquam. consectetur adipiscing elit. Donec mauris turpis, lacinia non luctus vestibulum, elementum sed ligula</p>
							</section>

							<button class="btn medium">Read More</button>
					 	</li>

					 	<li class="full_overlay2" id="blog_full_width">
					 		<section class="blog-title">
					 			<section class="blog-post-date-border">
						 			<section class="blog-post-date">
						 				<h4>22</h4>
						 				<small>May</small>
						 			</section>
					 			</section>
					 			<h3>This is a video post</h3>
					 			<p>Written By <span><a href="#">Hesham Emara</a></span></p>
					 		</section>
					 		
					 		<section class="blog-post-info" id="home-blog-post-info">
					 			<section id="date">
					 				<i class="icon-calendar-empty"></i>
					 				<p>22 Hours Ago</p>
					 			</section>
					 			<section id="comments">
					 				<i class="icon-bubbles"></i>
					 				<p>4 Comments</p>
					 			</section>
					 			<section id="favorite">
					 				<i class="icon-heart"></i>
					 				<p>Favorite</p>
					 			</section>
					 			<section id="share">
					 				<i class="icon-share-alt"></i>
					 				<p>Share It</p>
					 			</section>
					 		</section>
					 	
					 		<iframe src="http://player.vimeo.com/video/65353988" width="500" height="300" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

					 		<section class="blog-post-text" id="home-blog-post-text">
					 			<p><span>Works On iPhones, iPad And More Devices.</span><br>Neque porro quisquam est, qui dolorem ipsum quia dolor sit mec.Neque porro quisquam. consectetur adipiscing elit. Donec mauris turpis, lacinia non luctus vestibulum, elementum sed ligula</p>
							</section>

							<button class="btn medium">Read More</button>

					 	</li>

					 	<li id="blog_full_width">
					 		<section class="blog-title">
					 			<section class="blog-post-date-border">
						 			<section class="blog-post-date">
						 				<h4>22</h4>
						 				<small>May</small>
						 			</section>
					 			</section>
					 			<h3>This is an text post</h3>
					 			<p>Written By <span><a href="#">Hesham Emara</a></span></p>
					 		</section>
					
					 		<section class="blog-post-info" id="home-blog-post-info">
					 			<section id="date">
					 				<i class="icon-calendar-empty"></i>
					 				<p>22 Hours Ago</p>
					 			</section>
					 			<section id="comments">
					 				<i class="icon-bubbles"></i>
					 				<p>4 Comments</p>
					 			</section>
					 			<section id="favorite">
					 				<i class="icon-heart"></i>
					 				<p>Favorite</p>
					 			</section>
					 			<section id="share">
					 				<i class="icon-share-alt"></i>
					 				<p>Share It</p>
					 			</section>
					 		</section>

							<section class="blog-post-text" id="home-blog-post-text">
					 			<p><span>Works On iPhones, iPad And More Devices.</span><br>Neque porro quisquam est, qui dolorem ipsum quia dolor sit mec.Neque porro quisquam. consectetur adipiscing elit. Donec mauris turpis, lacinia non luctus vestibulum, elementum sed ligula</p>
							</section>

							<button class="btn medium">Read More</button>
					 	</li>

					 	<li class="full_overlay2" id="blog_full_width">

					 		<section class="blog-title">
					 			<section class="blog-post-date-border">
						 			<section class="blog-post-date">
						 				<h4>22</h4>
						 				<small>May</small>
						 			</section>
					 			</section>
					 			<h3>This is a gallery post</h3>
					 			<p>Written By <span><a href="#">Hesham Emara</a></span></p>
					 		</section>

					 		<section class="blog-post-info" id="home-blog-post-info">
					 			<section id="date">
					 				<i class="icon-calendar-empty"></i>
					 				<p>22 Hours Ago</p>
					 			</section>
					 			<section id="comments">
					 				<i class="icon-bubbles"></i>
					 				<p>4 Comments</p>
					 			</section>
					 			<section id="favorite">
					 				<i class="icon-heart"></i>
					 				<p>Favorite</p>
					 			</section>
					 			<section id="share">
					 				<i class="icon-share-alt"></i>
					 				<p>Share It</p>
					 			</section>
					 		</section>
					 		
					 		<section class="blog-post-slider" id="home-blog-post-slider">

					 			<div class="flexslider">
					 			<div class="blog-post-category" id="slider-blog-post-category" style="margin-top: 223px;"><p>Illustrations</p></div>
						          <ul class="slides">
						            <li>
						  	    	    <img src="img/slider_1.jpg" />
					  	    		</li>
					  	    		<li>
						  	    	    <img src="img/slider_2.jpg" />
						    		</li>
					  	    		<li>
						  	    	    <img src="img/slider_3.jpg" />
						    		</li>
					  	    		<li>
						  	    	    <img src="img/slider_4.jpg" />
					  	    		</li>
						          </ul>
						        </div>

					 		</section>

					 		<section class="blog-post-text" id="home-blog-post-text">
					 			<p><span>Works On iPhones, iPad And More Devices.</span><br>Neque porro quisquam est, qui dolorem ipsum quia dolor sit mec.Neque porro quisquam. consectetur adipiscing elit. Donec mauris turpis, lacinia non luctus vestibulum, elementum sed ligula</p>
							</section>

							<button class="btn medium">Read More</button>

					 	</li>

					</ul>

				</section><!-- End Carousel -->

			</section><!-- End Latest Posts  -->

			<section class="clear"></section>

			<section class="row-fluid"><!-- Our Clients -->
				
				<section class="section-desc span3">

					<section class="jcarousel-scroll"><!-- Carousel Buttons -->
				        <a href="#" id="mycarousel-prev3"><i class="icon-angle-left"></i></a>
				        <a href="#" id="mycarousel-next3"><i class="icon-angle-right"></i></a>
			    	</section><!-- End Carousel Buttons -->

					<section class="section-title"><!-- Section Title -->

						<h5>Our Clients</h5>

					</section><!-- End Section Title -->

					<p>Suspendisse in dolor dui. Curabitur diam est, bibendum ut congue nec, posuere at nisl, Vivamus commodo velit sit amet dui.</p>
					
				</section>

		    	<section id="mycarousel" class="mycarousel3 jcarousel-skin-tango span9"><!-- Carousel -->

					<ul>
						<li><img src="img/clients/Client1.png" alt=""></li>
						<li><img src="img/clients/Client2.png" alt=""></li>
						<li><img src="img/clients/Client4.png" alt=""></li>
						<li><img src="img/clients/Client1.png" alt=""></li>
						<li><img src="img/clients/Client2.png" alt=""></li>
					</ul>
				
		    	</section>


			</section><!-- End Our Clients -->

		</section><!-- End Container -->

		<section class="clear"></section>

		<section class="client-test"><!-- Client Test -->

			<section class="container">

				<section class="row-fluid">
					
					<section class="span12">
							<section class="triangle"></section>
							<div id="cbp-qtrotator" class="cbp-qtrotator">
							<div class="cbp-qtcontent">
								<img src="img/Testmonials/Testmonials1.png" alt="img01" />
								<section class="client-words">
								  <p><span>"</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, sapiente, quam debitis ut modi alias quae perferendis ratione nihil fugiat ab veniam neque illo minus optio dolore velit incidunt voluptatem!</p>
								  <p class="client">Stefan Salvatore</p>
								</section>
							</div>
							<div class="cbp-qtcontent">
								<img src="img/Testmonials/Testmonials2.png" alt="img01" />
								<section class="client-words">
								  <p><span>"</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, sapiente, quam debitis ut modi alias quae perferendis ratione nihil fugiat ab veniam neque illo minus optio dolore velit incidunt voluptatem!</p>
								  <p class="client">Elena Gilbert</p>
								</section>
							</div>
							<div class="cbp-qtcontent">
								<img src="img/Testmonials/Testmonials3.png" alt="img01" />
								<section class="client-words">
								 <p><span>"</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, sapiente, quam debitis ut modi alias quae perferendis ratione nihil fugiat ab veniam neque illo minus optio dolore velit incidunt voluptatem!</p>
								  <p class="client">Damon Salvatore</p>
								</section>
							</div>
						</div>

					</section>

				</section>

			</section>			

		</section><!-- End Client Test -->

		<section class="subscribe"><!-- Subscribe -->

			<section class="container">

				<section class="row-fluid">

					<section class="span4 twitter-account">
						
						<section class="twitter-account-image">
							
							<img src="img/team/3.jpg" alt="">

						</section>

						<section class="twitter-account-text">
							
							<h3>Hesham Emara</h3>
							<h6>2432 Followers  |  453 Following</h6>
							<button class="btn white medium">Follow Me On Twitter</button>
							<button class="btn white medium">Retweet</button>

						</section>


					</section>

					<section class="span8">

						<h4><span><a href="#">@EhabAlaa</a></span> A Good business theme for iPhone, Android and more. Made by xThemes dudes.<br> You can subscribe now :)</h4>
						<h4>2 Minutes Ago</h4>
						
					</section>

				</section>

			</section>			

		</section><!-- Subscribe -->

		<footer>
			
			<section class="container">

				<section class="row">
					
					<section class="footer-widget span3">
						
						<h5>Text Widget</h5>
						<p>JavaScript makes websites interactive. HTML & CSS will let you make nice looking webpages, but they'll be static; this programming language will allow you to ask users to input information, move elements around on the page, and make your website more functional overall.</p>

					</section>

					<div class="line-vertical"></div>

					<section class="footer-widget span3">
						
						<h5>Flickr Widget</h5>
						
						<div class="flickr-widget">
                                                    
                            <div id="flickr_widget" class="flickrfeed" data-id="52617155@N08" data-count="6" data-type="user"></div>
                        
                        </div>

					</section>

					<div class="line-vertical" id="lv2"></div>

					<section class="footer-widget span3" id="subscribe-us-footer">
						
						<h5>Subscribe Us</h5>
						<p>JavaScript makes websites interactive. HTML will let you make.</p>

						<input class="subscribe-input">

						<button class="btn">Subscribe</button>

					</section>

					<div class="line-vertical" id="lv3"></div>

					<section class="footer-widget span3">
						
						<h5>Social Media</h5>
						<p>We are so active on our social sites, Donâ€™t forget to follow us.</p>

						<section class="social-icons">
							
							<i class="icon-facebook-2"></i>
							<i class="icon-twitter-2"></i>
							<i class="icon-dribbble-2"></i>
							<i class="icon-google-plus"></i>
							<i class="icon-feed"></i>

						</section>

					</section>

				</section>

			</section>

			<section class="copyrights">
				
				<section class="container">
					
					<section class="row-fluid">
						
						<section class="span12">
							
							<h5>Â© 2013 Prosperity</h5>

						</section>

					</section>

				</section>

			</section>

		</footer>

	</section><!-- End Wrapper -->

<!-- Back to Top -->
<a href="#" id="back-to-top"><i class="icon-chevron-up"></i></a>

<!-- Styles Selector
================================================== -->
<div id="style-selector">
    <div class="style-selector-wrapper">
        <h2>Style Selector</h2>
        <div>
             
            <h3>Layout Style</h3>
            <div class="layout">
                <select id="layout-selector">
                    <option value="css/boxed">Boxed</option>
                    <option value="css/wide">Wide</option>
                </select>
            </div>

            <h3>Header & Footer Colors</h3>
            <div class="layout">
                <select id="layout-color-selector">
                    <option value="css/dark">Dark</option>
                    <option value="css/light">Light</option>
                </select>
            </div>
            
            <div id="bg-image">
                <h3>Images for Boxed Version</h3>
                 <ul class="styles">
                    <li><a href="#" class="bg-img01"><img src="img/backgrounds/bg_img01_small.jpg" alt="" /></a></li>
                    <li><a href="#" class="bg-img02"><img src="img/backgrounds/bg_img02_small.jpg" alt="" /></a></li>
                    <li><a href="#" class="bg-img03"><img src="img/backgrounds/bg_img03_small.jpg" alt="" /></a></li>
                    <li><a href="#" class="bg-img04"><img src="img/backgrounds/bg_img04_small.jpg" alt="" /></a></li>
                    <li><a href="#" class="bg-img05"><img src="img/backgrounds/bg_img05_small.jpg" alt="" /></a></li>
                </ul>
            </div>

            <div id="bg-pattern">
                <h3>Patterns for Boxed Version</h3>
                <ul class="styles">
                    <li><a href="#" class="bg-pat01"></a></li>
                    <li><a href="#" class="bg-pat02"></a></li>
                    <li><a href="#" class="bg-pat03"></a></li>
                    <li><a href="#" class="bg-pat04"></a></li>
                    <li><a href="#" class="bg-pat05"></a></li>
                    <li><a href="#" class="bg-pat06"></a></li>
                    <li><a href="#" class="bg-pat07"></a></li>
                    <li><a href="#" class="bg-pat08"></a></li>
                    <li><a href="#" class="bg-pat09 active"></a></li>
                    <li><a href="#" class="bg-pat10"></a></li>
                </ul>
            </div>
        </div>
    </div>
    <a href="#" class="close icon-chevron-left"></a>  
</div>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="js/jquery.themepunch.revolution.min.js"></script>		
<script src="js/jquery.themepunch.plugins.min.js"></script>
<script src="js/layerslider.kreaturamedia.jquery.js"></script>
<script src="js/jquery.onebyone.js"></script>              
<script src="js/jquery.touchwipe.js"></script>
<script src="js/jquery.royalslider.min.js"></script>
<script src="js/jquery.smartStartSlider.min.js"></script>
<script src="js/jquery.nivo.slider.pack.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/jquery.quicksand.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/styleselector.js"></script>
<script src="js/holder.js"></script>
<script src="js/plugins.js"></script>
<script src="js/custom.js"></script>
<script src="js/jquery.cbpQTRotator.js"></script>
<script>
 $(window).load(function(){
  $('.flexslider').flexslider({
    animation: "fade",
    start: function(slider){
      $('body').removeClass('loading');
    }
  });
});
$(".folio").fancybox({
    closeBtn        : true,
    padding         : 0,
    openEffect      : 'fade',
    closeEffect     : 'fade',
    nextEffect      : 'fade',
    prevEffect      : 'fade',
    helpers : {
        overlay : {
            css : {
                'background' : 'rgba(51, 51, 51, 0.8)'
            }
        },
        title : {
            type : 'over'
        }
    }
});
</script>
</body>
</html>

Copy Format

Download