/**********************************************************************************

    Project Name: Clasius - Responsive Parallax One Page
    Project Description: Clasius - Responsive Parallax One Page
    File Name: style.css
    Author: ClasDesign
    Author URI: http://www.clas-design.com
    Version: 1.0.0
    
**********************************************************************************/


/***********************************************************************************************/
/* Table of contents */
/***********************************************************************************************/
/*
    =Common Style
    =Form
    =Typography
    =Buttons
    =Page Loader
    =Navbar      
    =Content - home-section          
    =Content - about-section 
    =Content - parallax-1-section  
    =Content - team-section        
    =Content - statistics-section 
    =Content - skills-section    
    =Content - parallax-2-section
    =Content - services-section     
    =Content - portfolio-section   
    =Content - action-section    
    =Content - tweet-section     
    =Content - blog-section       
    =Content - pricing-section    
    =Content - contact-section         
    =Blog Page
        -Header Blog     
        -Breadcrumbs    
        - Main  
            - Blog Post
            - Page-navi
            - Blog Post footer
            - Comments
        - Sidebar
            -Widgets
                - Search Form
                - Categories
                - Recent posts
                - Tweets Feeds
                - Tags
    =Footer
*/


/***********************************************************************************************/
/* =Common Styles */
/***********************************************************************************************/

body, #wrapper {
    width:100%;
}

body {
	font-family: 'Source Sans Pro', Arial, Sans-serif;
	color: #818181;
	font-size: 13px;
}

ul, 
ol, 
li, 
h1,
h2, 
h3, 
h4, 
h5, 
h6, 
p, 
label {
  margin: 0;
  padding: 0;
}


ol, 
ul, 
li { 
  list-style:none;
}

a {
    color: #00cfb0;
}

a:hover {
    color: #00AF99;
}

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

.text-right {
    text-align: right;
}

.no-mb {
    margin-bottom: 0!important;
}

hr {
    margin: 15px auto;
    width: 14%;
    border-top: 1px solid #D5D5D5;
}

/***********************************************************************************************/
/* =Form*/
/***********************************************************************************************/

/* Fix for Mobile Safari */
input[type="checkbox"]  { -webkit-appearance: checkbox; }
input[type="radio"]     { -webkit-appearance: radio; }

/* Chrome, Safari */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { color: #999; }

/* Firefox */
input:-moz-placeholder,
textarea:-moz-placeholder { color: #999; }


/***********************************************************************************************/
/* =Typography */
/***********************************************************************************************/

h2,
h3 {
	font-weight: 300;
}


h1 {
    font-size: 42px;
    color: white;
    font-weight: 200;
}

h2 {

    font-size: 38px;
    color: #fff;
    line-height: 48px;
}

h3 {
	font-size: 36px;

}

h4 {
	font-size: 16px;
	color: #757575;
    text-transform: uppercase;
	font-weight: 400;
}

h5 {
	font-size: 16px;
    font-weight: 400;
}

p {
	line-height: 20px;
    margin-bottom: 10px;
    font-size: 15px;
}

/***********************************************************************************************/
/* =Buttons */
/***********************************************************************************************/

.button {
   display: inline-block;
   vertical-align: top;
   padding: 10px 35px;
   outline: none;
   border: 1px solid transparent;
   background-color: transparent;
   color: #fff;
   vertical-align: baseline;
   text-align: center;
   text-decoration: none;
   text-transform: uppercase;
   font-weight: 400;
   font-size: 18px;
   cursor: pointer;
   border-radius: 3px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -o-border-radius: 3px;
   -webkit-transition: all .4s ease-in;
      -moz-transition: all .4s ease-in;
       -ms-transition: all .4s ease-in;
        -o-transition: all .4s ease-in;
           transition: all .4s ease-in;
}

.button.middle {
    padding: 12px 45px;
}

.button.small {
    padding: 10px 30px;
    font-size: 16px;
}

.button.default {
    border-color: #cfcfcf;
    color: #00c2a9;
}
.button.default:hover {
    border-color: transparent;
    background-color: #00c2a9;
    color: #fff;
    text-decoration: none;
}

.button.turquoise {
background-color: #00c2a9;
}

.turquoise:hover {
    border: 1px solid #cfcfcf!important;
    background-color: #fff;
    color: #00c2a9;
    text-decoration: none;
}

.button.clean {
    color: #fff;
    border: 1px solid rgba(255,255,255,.4);
    -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
    -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
    -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
    -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}

.button.clean:hover {
    background: rgba(255,255,255,.08);
    text-decoration: none;
}

.button.darkblue {
    background: #2a5a71;
    color: white;
    border-radius: 0;
}

.darkblue:hover {
    text-decoration: none;
    background-color: #00c2a9;
}


/***********************************************************************************************/
/* =Page Loader */
/***********************************************************************************************/

.animationload {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
z-index: 9999999;
}

.loader {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 50%;
    top: 37%;
    margin: -100px 0 0 -100px;
}

.bokeh {
    font-size: 100px;
    width: 1em;
    height: 1em;
    position: relative;
    margin: 100px auto;
    border-radius: 50%;
    list-style: none;
    }

.bokeh li {
    position: absolute;
    width: .2em;
    height: .2em;
    border-radius: 50%;
}

.bokeh li:nth-child(1) {
    left: 50%;
    top: 0;
    margin: 0 0 0 -.1em;
    background: #00cccc;
    -webkit-transform-origin: 50% 250%;
    -moz-transform-origin: 50% 250%;
    -ms-transform-origin: 50% 250%;
    -o-transform-origin: 50% 250%;
    transform-origin: 50% 250%;
    -webkit-animation: 
        rota 1.13s linear infinite,
        opa 3.67s ease-in-out infinite alternate;
    -moz-animation: 
        rota 1.13s linear infinite,
        opa 3.67s ease-in-out infinite alternate;
    -ms-animation: 
        rota 1.13s linear infinite,
        opa 3.67s ease-in-out infinite alternate;
    -o-animation: 
        rota 1.13s linear infinite,
        opa 3.67s ease-in-out infinite alternate;
    animation: 
        rota 1.13s linear infinite,
        opa 3.67s ease-in-out infinite alternate;
}

.bokeh li:nth-child(2) {
    top: 50%; 
    right: 0;
    margin: -.1em 0 0 0;
    background: #FF003C;
    -webkit-transform-origin: -150% 50%;
    -moz-transform-origin: -150% 50%;
    -ms-transform-origin: -150% 50%;
    -o-transform-origin: -150% 50%;
    transform-origin: -150% 50%;
    -webkit-animation: 
        rota 1.86s linear infinite,
        opa 4.29s ease-in-out infinite alternate;
    -moz-animation: 
        rota 1.86s linear infinite,
        opa 4.29s ease-in-out infinite alternate;
    -ms-animation: 
        rota 1.86s linear infinite,
        opa 4.29s ease-in-out infinite alternate;
    -o-animation: 
        rota 1.86s linear infinite,
        opa 4.29s ease-in-out infinite alternate;
    animation: 
        rota 1.86s linear infinite,
        opa 4.29s ease-in-out infinite alternate;
}

.bokeh li:nth-child(3) {
    left: 50%; 
    bottom: 0;
    margin: 0 0 0 -.1em;
    background: #FABE28;
    -webkit-transform-origin: 50% -150%;
    -moz-transform-origin: 50% -150%;
    -ms-transform-origin: 50% -150%;
    -o-transform-origin: 50% -150%;
    transform-origin: 50% -150%;
    -webkit-animation: 
        rota 1.45s linear infinite,
        opa 5.12s ease-in-out infinite alternate;
    -moz-animation: 
        rota 1.45s linear infinite,
        opa 5.12s ease-in-out infinite alternate;
    -ms-animation: 
        rota 1.45s linear infinite,
        opa 5.12s ease-in-out infinite alternate;
    -o-animation: 
        rota 1.45s linear infinite,
        opa 5.12s ease-in-out infinite alternate;
    animation: 
        rota 1.45s linear infinite,
        opa 5.12s ease-in-out infinite alternate;
}

.bokeh li:nth-child(4) {
    top: 50%; 
    left: 0;
    background: #88C100;
    -webkit-transform-origin: 250% 50%;
    -moz-transform-origin: 250% 50%;
    -ms-transform-origin: 250% 50%;
    -o-transform-origin: 250% 50%;
    transform-origin: 250% 50%;
    -webkit-animation: 
        rota 1.72s linear infinite,
        opa 5.25s ease-in-out infinite alternate;
    -moz-animation: 
        rota 1.72s linear infinite,
        opa 5.25s ease-in-out infinite alternate;
    -ms-animation: 
        rota 1.72s linear infinite,
        opa 5.25s ease-in-out infinite alternate;
    -o-animation: 
        rota 1.72s linear infinite,
        opa 5.25s ease-in-out infinite alternate;
    animation: 
        rota 1.72s linear infinite,
        opa 5.25s ease-in-out infinite alternate;
}

.bokeh li:nth-child(5) {
    top: 50%; 
    left: 0;
    background: #368ee0;
    -webkit-transform-origin: 150% -50%;
    -moz-transform-origin: 150% -50%;
    -ms-transform-origin: 150% -50%;
    -o-transform-origin: 150% -50%;
    transform-origin: 150% -50%;
    -webkit-animation: 
        rota 1.95s linear infinite,
        opa 6s ease-in-out infinite alternate;
    -moz-animation: 
        rota 1.95s linear infinite,
        opa 6s ease-in-out infinite alternate;
    -ms-animation: 
        rota 1.95s linear infinite,
        opa 6s ease-in-out infinite alternate;
    -o-animation: 
        rota 1.95s linear infinite,
        opa 6s ease-in-out infinite alternate;
    animation: 
        rota 1.95s linear infinite,
        opa 6s ease-in-out infinite alternate;
}

@-webkit-keyframes rota {
    to { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes rota {
    to { -moz-transform: rotate(360deg); }
}

@-ms-keyframes rota {
    to { -ms-transform: rotate(360deg); }
}

@-o-keyframes rota {
    to { -o-transform: rotate(360deg); }
}

@keyframes rota {
    to { transform: rotate(360deg); }
}

@-webkit-keyframes opa {
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}

@-moz-keyframes opa {
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}

@-ms-keyframes opa {
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}

@-o-keyframes opa {
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}

@keyframes opa {
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}

/***********************************************************************************************/
/* =Navbar */
/***********************************************************************************************/

.navbar-default {
    background-color: #FFFFFF;
    border-bottom: 1px solid #F1F1F1;
    box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.15);
}

.navbar {
	margin-bottom: 0;
}

.navbar-default > .container {
	padding-bottom: 10px;
	padding-top: 10px;
}

.nav > li {
	padding: 0 5px;
	margin-top: 5px;
}

.navbar-default .navbar-nav > li > a {
	color: #868686;
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 400;
	text-align: center;
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: all .3s ease-out;
       -moz-transition: all .3s ease-out;
        -ms-transition: all .3s ease-out;
         -o-transition: all .3s ease-out;
            transition: all .3s ease-out;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
	color: #fff;
	background: #00cfb0;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
	color: white;
	background: #00cfb0;
}

.navbar-default .navbar-toggle {
	border-color: #ddd;
}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
	background: #00cfb0;
}

.navbar-default .navbar-toggle .icon-bar {
	background: #888;
}

.navbar-default .navbar-toggle:hover .icon-bar {
	background: white;
}


/***********************************************************************************************/
/* Logo */
/***********************************************************************************************/

.navbar-brand {
    background: url('../images/logo.png') no-repeat;
    width: 50px;
    height: 57px;
    padding: 0;
    margin: 0;
    text-indent: -9999px;
    margin-left: 10px;
}


/*
/***********************************************************************************************/
/* =Content home-section */
/***********************************************************************************************/

#home-section {
	background: url('../images/flexslider/sliderBg.jpg') center top no-repeat;
	position: relative;
}

#home-section:after {
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 80, 95, .5) url('../images/pattern.png');
}

#home-section .flexslider {
    top: 40%;
    margin-top: -90px;
    position: absolute;
    width: 100%;
    z-index: 99;
}

.flexcaption {
    padding: 0 15px;
    margin: 0 auto;
    text-align: center;
}

.flexcaption h1 {
    color: #ffffff;
    font-weight: 300;
    margin: 40px 0;
    text-transform: uppercase;
    margin-bottom: 0;
}

.flexcaption hr {
	width: 10%;
}

.flexcaption h2 {
	color: #c8c8c8;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    margin: 0 auto 25px;
}

#home-section .actionButtons {
	position: absolute;
	z-index: 2;
    bottom: 10%;
    left: 50%;
    margin-left: -80px;
}

.actionButtons span.choice {
    display: block;
    margin: 10px 0;
}

/***********************************************************************************************/
/* =Content about-section */
/***********************************************************************************************/

.about-box {
    text-align: center;
}

.title-section {
	padding-bottom: 60px;
    text-align: center;
}

.title-section h3 {
    color: #00c2a9;
    text-transform: uppercase;
}

.aboutpost  {
	margin-bottom: 40px;
	padding: 0 20px;
}

.aboutpost span.about-icon {
    width: 90px;
    height: 90px;
    border: 1px solid #e9e9e9;
    background: #f5f5f5;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    text-align: center;
    margin-bottom: 30px;
    display: inline-block;
    vertical-align: top;
    box-shadow: 0 0 0 1px transparent;
	-webkit-transition: all .25s ease-in;
	   -moz-transition: all .25s ease-in;
	    -ms-transition: all .25s ease-in;
	     -o-transition: all .25s ease-in;
	        transition: all .25s ease-in;
}

.aboutpost span.about-icon:hover {
	background: #00cfb0;
	box-shadow: 0 0 0 1px #00cfb0;
}

.aboutpost span.about-icon:hover i.fa {
	color: white;
}

.aboutpost span.about-icon i.fa {
	line-height: 90px; 
    color: #00cfb0; 
    font-size: 30px;
}

.aboutpost h4 {
	margin-bottom: 20px;
	font-weight: 500;
	font-size: 18px;
	color: #181818;
}


/***********************************************************************************************/
/* =Content parallax-1-section */
/***********************************************************************************************/

#parallax-1-section {
	background: url('../images/parallax/1.jpg') center top;
    height: 100%;
	text-align: center;
	position: relative;
    padding: 60px 0;
}

#parallax-1-section:after {
	content: '';
	position: absolute;
	background: url('../images/pattern.png') left top;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.testimonial {
	text-align: center;
	position: relative;
	z-index: 2;
}

.testimonial ul li h2, .testimonial ul li span {
	text-transform: uppercase;
	color: white;
}

.testimonial ul li h2 span {
	font-size: 20px;
	font-style: italic;
}

.testimonial ul li small {
	font-size: 14px;
	color: white;
	margin-top: 70px;
	display: block;
    text-transform: uppercase;
}


/***********************************************************************************************/
/* =Content team-section  */
/***********************************************************************************************/

.staff-member {
	margin-bottom: 20px;
    text-align: center;
}

.staff-member .member-team {
	    border: 1px solid #eee;
	    padding-bottom: 20px;
}

.staff-member .member-team figure img {
    width: 100%;
}

.staff-member .member-team figcaption {
	padding: 10px;
}

.staff-member .member-team figcaption h5 {
	margin-top: 5px;
    font-size: 16px;
    text-transform: uppercase;
}

.staff-member .member-team figcaption h6 {
	margin-top: 5px;
    font-size: 13px
}

.staff-member .member-team figcaption p {
	margin-top: 5px;
	font-size: 14px;
}

.staff-member ul.social-members {
	margin-top: 10px;
}

.staff-member ul.social-members li {
    display: inline-block;
    vertical-align: top;
}

.staff-member ul.social-members li a {
	font-size: 17px;
	margin-right: 10px;
	display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #ddd;
    border-radius: 50px;
    border: #ddd 1px solid;
    -webkit-transition: all .3s ease-in;
       -moz-transition: all .3s ease-in;
        -ms-transition: all .3s ease-in;
         -o-transition: all .3s ease-in;
            transition: all .3s ease-in;
}

.staff-member ul.social-members li a:hover {
	background: #00c2a9;
	color: white;
	border: 1px solid #00c2a9;
}


/***********************************************************************************************/
/* =Content satistics-section  */
/***********************************************************************************************/

#statistics-section {
    border-bottom: 1px solid #ececec;
    border-top: 1px solid #ececec;
    background-color: #f8f8f8;
}

.skill-percent {
	margin-bottom: 20px;
}

.skill-percent .fact {
	text-align: center;
}

.skill-percent .fact p {
	color: #777;
    font-size: 16px;
    font-weight: 500;
    margin-top: 20px;
}

.percentfactor {
	margin-bottom: 15px;
    width: 90px;
    height: 90px;
    border: 1px solid #c8c8c8;
    display: inline-block;
    vertical-align: top;
    background-color: rgba(255,255,255,.1);
    color: #00c2a9;
    font-weight: 400;
    font-size: 45px;
    line-height: 90px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}


/***********************************************************************************************/
/* =Content skills-section  */
/***********************************************************************************************/

#about-section, #team-section, #statistics-section, #skills-section, #services-section, #portfolio-section, #action-section, #blog-section, #princing-section, #contact-section {
	padding: 60px 0;
}

.skillsheading {
	margin-bottom: 30px;
	text-align: center;
}

.skillsheading h4 {
	margin-bottom: 20px;
    font-weight: 600;
}

.skillImage {
	margin-bottom: 30px;
}	

.skills-title {
    margin-bottom: 25px;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 18px;
    color: #00c2a9;
}
	
.progress-bar {
	position: relative;
	margin-bottom: 18px;
}

.progressbar-title {
	margin-bottom: 3px;
	color: #aeaeae;
	font-size: 14px;
}

.percent {
	position: absolute;
	top: -5px;
	right: 0;
	display: block;
	color: #aeaeae;
	font-size: 16px;
	line-height: 35px;
}	
		
.bar-outer {
	position: relative;
	width: 100%;
	height: 12px;
	border: 1px solid #cfcfcf;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.bar {
	position: absolute;
	top: -1px;
	left: 0;
	z-index: 2;
	width: 0%;
	height: 12px;
	background-color: #00c2a9;	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.SupportDevice img {
	margin-top: 10px;
}


/***********************************************************************************************/
/* =Content parallax-2-section*/
/***********************************************************************************************/

#parallax-2-section {
    background: url('../images/parallax/2.jpg') center top;
    position: relative;
    padding: 60px 0;
}

#parallax-2-section:after {
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/pattern.png');
}

#parallax-2-section .container .testimonial {
    padding: 30px;
}

#parallax-2-section .container .testimonial h5 {
	color: white;
    margin-top: 15px;
}


/***********************************************************************************************/
/* =Content services-section  */
/***********************************************************************************************/

#services-section .container > h3 {
	margin-bottom: 10px;
}

ul.servicesList li {
	margin-top: 20px;
}

ul.servicesList li p {
    display: table;
}

ul.servicesList li:first-child {
	margin-top: 10px;
}

ul.servicesList li span.small-icon {
	float: left;
    width: 50px;
    height: 50px;
    text-align: center;
    margin-bottom: 40px;
    color: white;
    border-radius: 3px;
    margin-right: 25px;
    margin-top: 10px;
    -webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

ul.servicesList li span i {
    font-size: 26px;
    line-height: 50px;
    margin-bottom: 45px;
    display: block;
    background: #00cfb0;
    -webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	border: 1px solid #00cfb0;
	-webkit-transition: all .3s ease-in-out;
	   -moz-transition: all .3s ease-in-out;
	    -ms-transition: all .3s ease-in-out;
	        transition: all .3s ease-in-out;
	        cursor: pointer;
}

.servicesList li span .fa:hover {
	background: #f5f5f5;
	color: #00cfb0;
	border: 1px solid #E9E9E9;
}

ul.servicesList li h4 {
	line-height: 40px;
	font-size: 17px;
    font-weight: 600;
}


/***********************************************************************************************/
/* =Content portfolio-section */
/***********************************************************************************************/

#portfolio-section {
	background: #FAFAFA;
}

ul#filters {
    display: inline-block;
    vertical-align: top;
}

#filters li {
	float: left;
    display:inline;
    line-height:200%;
    margin-top:5px;
}

#filters li a {
    display: block;
    border-top: 1px solid #CCCBC9;
    border-bottom: 1px solid #CCCBC9;
    border-right: 1px solid #CCCBC9;
    background: #fff;
    padding: 5px 20px;
    color: #7a7a7a;
    text-transform: uppercase;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
        transition: all .3s ease-in;
}

#filters li a.active,#filters li a:hover {
    color: white;
    background: #00cfb0;
    text-decoration: none;
    cursor: pointer;
}

ul#filter li:first-child a.active {
    border-color: #F26341;
}

ul#filters li:first-child a {
	border-radius: 5px 0px 0px 5px;
    -moz-border-radius: 5px 0px 0px 5px;
    -webkit-border-radius: 5px 0px 0px 5px;
    -ms-border-radius: 5px 0px 0px 5px;
    -o-border-radius: 5px 0px 0px 5px;
    padding-left: 25px;
    border-left: 1px solid #CCCBC9;
}

ul#filters li:last-child a {
	border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    -webkit-border-radius: 0px 5px 5px 0px;
    -ms-border-radius: 0px 5px 5px 0px;
    -o-border-radius: 0px 5px 5px 0px;
}

.description strong {
    color:#2b2a38;
}

.home-projects {
    font-size:0;
    margin-top: 60px;
    float: left;
    width: 100%;
}

.home-projects .mix {
    display:none;
}

.home-projects .project-item {
    margin-bottom:0;
    overflow:hidden;
    width: 100%;
    padding: 0 1px 1px 0;
    float: left;
}

.home-projects .project-item figure img {
	width: 100%;
}

.project-item .actions {
    cursor:pointer;
    margin-top:20%;
}

.project-item figcaption {
    -moz-backface-visibility:hidden;
    -moz-transition:all .3s;
    -ms-backface-visibility:hidden;
    -o-backface-visibility:hidden;
    -o-transition:all .3s;
    -webkit-backface-visibility:hidden;
    -webkit-transition:all .3s;
    backface-visibility:hidden;
    background-color: #00c2a9;
    background: rgba(0, 194, 169, 0.8);
    border:1px solid transparent;
    bottom:-1px;
    left:0;
    opacity:0;
    position:absolute;
    right:0;
    text-align:center;
    top:0;
    transition:all .3s;
    z-index:10;
}

.project-item figcaption:hover {
    -moz-transition:all .25s ease-out;
    -o-transition:all .25s ease-out;
    -webkit-transition:all .25s ease-out;
    opacity:1;
    transition:all .25s ease-out;
}

.project-item figure {
position:relative;
}

.project-item h4   {
    color:#fff;
    cursor:auto;
    position:absolute;
    top:0;
    transition:all ease .5s;
    width:100%;
	-webkit-transition: all 4s ease-out;
	   -moz-transition: all 4s ease-out;
	    -ms-transition: all 4s ease-out;
	     -o-transition: all 4s ease-out;
	        transition: all 4s ease-out;
}

.project-item:hover h4 {
    top:35%;
}

.project-item:hover a.link, .project-item:hover a.zoom {
	top: 43%;
}

.project-item a.link {
    display: inline-block;
    vertical-align: top;
	width: 30px;
	height: 30px;
	border: 1px solid #fff;
	border-radius: 3px;
	position: absolute;
	top: 0;
	right: 46%;
	-webkit-transition: all .35s ease-out;
	   -moz-transition: all .35s ease-out;
	    -ms-transition: all .35s ease-out;
	     -o-transition: all .35s ease-out;
	        transition: all .35s ease-out;
}

.project-item a.zoom {
    display: inline-block;
    vertical-align: top;
	width: 35px;
	height: 35px;
	border: 1px solid #fff;
	border-radius: 3px;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -10px;
	-webkit-transition: all .3s ease-out;
	   -moz-transition: all .3s ease-out;
	    -ms-transition: all .3s ease-out;
	     -o-transition: all .3s ease-out;
	        transition: all .3s ease-out;
}

.project-item a:hover {
	background: #fff;
}

.project-item a:hover i {
    color: #00c2a9;
}

.project-item a i {
	font-size: 14px;
	color: #fff;
	line-height: 35px;
}

/***********************************************************************************************/
/* =Content action-section */
/***********************************************************************************************/

.title-actions {
    text-align: center;
}

#action-section .container .title-actions h3 {
    color: #00c2a9;
    margin-bottom: 15px;
}

.actionButtons {
	margin-top: 30px;
}


/***********************************************************************************************/
/* =Content tweet-section */
/***********************************************************************************************/

#tweet-section {
    background: url('../images/parallax/3.jpg') center top;
    height: 100%;
    padding: 60px 0;
    text-align: center;
    position: relative;
/*   background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;*/
}

#tweet-section:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/pattern.png');
}

#tweet-section .container {
    position: relative;
    z-index: 2;
}

span.tweet-icon {
    display: inline-block;
    vertical-align: top;
	width: 60px;
	height: 60px;
	background: rgba(255,255,255,0.53);
	-webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    margin-bottom: 20px;
}

span.tweet-icon i {
	line-height: 65px;
	font-size: 28px;
	color: #000;
}

ul.bxslider small {
	font-size: 14px;
    color: white;
    margin-top: 30px;
    display: block;
}

#tweet-section h2 a:hover {
	color: #00cfb0;
	text-decoration: none;
}


/***********************************************************************************************/
/* =Content blog-section */
/***********************************************************************************************/

#blog-section {
    border-bottom: 1px solid #F1F1F1;
}

#blog-section a.button {
    margin-top: 60px;
}

.col-blog-masonry {
    padding: 1px;
}

.col-blog-masonry, .grid-size-blog {
    width: 100%;
    margin-bottom: 1px;
}

.col-blog-masonry.w2 {
    width: 100%;
}

.col-blog-masonry figure {
    position: relative;
    overflow: hidden;
}

.col-blog-masonry figure img {
    width: 100%;
}

.col-blog-masonry figure figcaption {
    visibility: hidden;
    color: white;
    width: 100%;
    position: absolute;
    bottom: -90px;
    background: rgba(0,0,0, 0.6);
    padding: 15px;
    border-top: 1px solid rgba(0,0,0, 0.8);
    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
        -ms-transition: all .5s ease;
         -o-transition: all .5s ease;
            transition: all .5s ease;
}

.col-blog-masonry figure figcaption a h4 {
    color: #00cfb0;
    -webkit-transition: all .5s ease-in-out;
       -moz-transition: all .5s ease-in-out;
        -ms-transition: all .5s ease-in-out;
         -o-transition: all .5s ease-in-out;
            transition: all .5s ease-in-out;
}

.col-blog-masonry figure figcaption a:hover h4 {
    opacity: 0.8;
}
.col-blog-masonry figure:hover figcaption {
    bottom: 0;
}

.col-blog-masonry figure .date-post {
    position: absolute;
    top: 0;
    margin-top: 30px;
    background: #fff;
    padding: 12px;
    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
        -ms-transition: all .5s ease;
         -o-transition: all .5s ease;
            transition: all .5s ease;
}

.col-blog-masonry figure .date-post p {
    margin: 0;
}

.col-blog-masonry figure:hover .date-post {
    left: 0;
}

/***********************************************************************************************/
/* =Content price-section */
/***********************************************************************************************/

#princing-section {
    border-bottom: 1px solid #F1F1F1;
}

ul.princing-table {
    margin-bottom: 30px;
}

ul.princing-table h4 {
	font-size: 17px;
}

ul.princing-table li {
	width: 100%;
	text-align: center;
	border: 1px solid #dee6eb;
	border-top: none;
	padding: 27px 0;
}

ul.princing-table li p {
	font-size: 15px;
	font-weight: 300;
}

ul.princing-table li:first-child {
	border-top: 1px solid #dee6eb;
	background: #f8f8f8;
	color: #252525;
}

ul.princing-table li.price {
	text-transform: uppercase;
	background: #F8F8F8;
}

ul.princing-table li.price p span {
	color: #364046;
	display: block;
	font-size: 24px;
    font-weight: 500;
    line-height: 34px;
}

ul.princing-table li.buttonPurchase {
	padding: 0;
}

ul.princing-table li a.purchase {
	display: block;
	padding: 15px;
	font-size: 14px;
}

ul.princing-table li .button {
	margin: 0;
}

/***********************************************************************************************/
/* =Content contact-section */
/***********************************************************************************************/

#googlemaps {
    height: 400px;
    margin-bottom: 80px;
}

#contact-box h4 {
	color: #252525;
	margin-bottom: 25px;
}

#contactForm p input[type="text"], #contactForm p input[type="email"], #contactForm textarea, #contactForm p input[type="password"] {
	display: block;
	width: 100%;
	padding: 8px 15px;
	color: #818181;
	font-size: 15px;
	outline: none;
	border: 1px solid #dddddd;
	margin-bottom: 15px;
	transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    position: relative;
    border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -o-border-radius: 5px;
}

#contactForm p input[type="text"]:focus, #contactForm p input[type="email"]:focus, #contactForm textarea:focus {
	border: 1px solid rgb(0, 194, 169);
}

#submit {
    margin-right: 15px;
}

#alert { margin-top: 25px; display: none; }

.notification {
    width: 100%;
    margin-bottom: 20px;
    padding: 10px 18px;
    text-align: left;
}

.notification p {
    float: left;
    padding: 0;
    margin: 0;
}

.notification.success p { 
    color: #5f9025; 
}

.notification.error p { 
    color: #de5959; 
}

.contact-info {
	margin-top: 30px;
}

ul#contactList {
	margin: 30px 0;
}

ul#contactList li {
	margin-top: 10px;
}

ul#contactList li span {
	float: left;
	width: 50px;
	height: 30px;
	text-align: center;
}

ul#contactList li span i {
	display: block;
	line-height: 30px;
	font-size: 24px;
}

ul#contactList li:last-child span i {
	font-size: 18px;
}

ul#contactList li p {
	line-height: 30px;
}

ul#socialIcons li {
	float: left;
}

ul#socialIcons {
	margin-top: 20px;
}

ul#socialIcons li a {
	display: block;
    width: 30px;
    height: 30px;
    color: #C7C7C7;
    text-align: center;
    line-height: 30px;
    font-size: 18px;
	margin-right: 10px;
    border: 1px solid #C7C7C7;
}

ul#socialIcons li a:hover {
    color: #00cfb0;
}

/***********************************************************************************************/
/* Blog page */
/***********************************************************************************************/

#content {
    padding-bottom: 60px;
}

    /***********************************************************************************************/
    /* -Header Blog*/
    /***********************************************************************************************/
    
    #headerblog-section {
        background: #00cfb0;
        margin-top: 75px;
        position: relative;
        padding: 40px 0;
        text-align: center;
    }

    #headerblog-section:after {
        background: url('../images/hexagon.png') center center;
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: .5;
    }

#headerblog-section h2 {
    margin-top: 10px;
}

    /***********************************************************************************************/
    /* -Breadcrumbs */
    /***********************************************************************************************/
    
    #breadcrumbs {
        padding: 20px;
        background: #f4f6f6;
        border-bottom: 1px solid #e6eaea;
        margin-bottom: 60px;
    }

    .breadcrumbs-list li {
        display: inline;
        float: left;
        text-transform: uppercase;
        font-size: 12px;
    }

    .breadcrumbs-list li a:hover {
        text-decoration: none;
    }

    .breadcrumbs-list li span {
        margin: 0 5px;
    }

    .breadcrumbs-list a {
        font-size: 14px;
    }

    /***********************************************************************************************/
    /* -Main */
    /***********************************************************************************************/


        /***********************************************************************************************/
        /* -Blog-post */
        /***********************************************************************************************/

        #main article.blog-post {
            margin-bottom: 60px;
            padding-bottom: 60px;
            border-bottom: 1px solid #ececec;
        }

        .blog-media {
            margin-bottom: 20px;
        }

        .blog-media figure {
            position: relative;
        }

        .blog-media figure figcaption {
            -moz-backface-visibility: hidden;
            -moz-transition: all .3s;
            -ms-backface-visibility: hidden;
            -o-backface-visibility: hidden;
            -o-transition: all .3s;
            -webkit-backface-visibility: hidden;
            -webkit-transition: all .3s;
            backface-visibility: hidden;
            background-color: #00c2a9;
            background: rgba(0, 194, 169, 0.8);
            border: 1px solid transparent;
            bottom: -1px;
            left: 0;
            opacity: 0;
            position: absolute;
            right: 0;
            text-align: center;
            top: 0;
            transition: all .3s;
            z-index: 10;
        }

        .blog-media figure figcaption:hover {
            -moz-transition: all .25s ease-out;
            -o-transition: all .25s ease-out;
            -webkit-transition: all .25s ease-out;
            opacity: 1;
            transition: all .25s ease-out;
        }

        .blog-media figure figcaption a.link {
            width: 35px;
            height: 35px;
            display: inline-block;
            vertical-align: top;
            border: 1px solid #fff;
            border-radius: 3px;
            position: absolute;
            top: 0;
            right: 46%;
            -webkit-transition: all .35s ease-out;
            -moz-transition: all .35s ease-out;
            -ms-transition: all .35s ease-out;
            -o-transition: all .35s ease-out;
            transition: all .35s ease-out;
        }

        .blog-media figure figcaption a.link  i {
            font-size: 16px;
            color: #fff;
            line-height: 35px;
        }

        .blog-media figure figcaption a.link:hover {
            background: #fff;
        }

        .blog-media figure:hover figcaption a.link {
            top: 43%;
        }

        .blog-media figure figcaption a.link:hover i {
            color: #00c2a9;
        }

        .entry-title a:hover {
            text-decoration: none;
        }

        .entry-meta {
            margin-bottom: 15px;
        }

        .entry-meta p span {
            margin: 0 5px;
        }

        .readMoreBlog {
            margin-top: 30px;
        }


        /***********************************************************************************************/
        /* -Page-navi */
        /***********************************************************************************************/

        .page-navi {
            margin-bottom: 30px;
        }

        .page-navi li {
            display: inline-block;
        }

        .page-navi li.active a {
            background: #00c2a9;
            color: #fff;
        }


        .page-navi li a {
            display: block;
            color: #00c2a9;
            background: #fff;
            border: 1px solid #cfcfcf;
            width: 35px;
            height: 35px;
            font-size: 14px;
            line-height: 35px;
            text-align: center;
            border-radius: 3px;
            -webkit-transition: all .3s ease-in-out;
               -moz-transition: all .3s ease-in-out;
                -ms-transition: all .3s ease-in-out;
                 -o-transition: all .3s ease-in-out;
                    transition: all .3s ease-in-out;
        
        }

        .page-navi li a:hover {
            background: #00c2a9;
            color: #fff;
            text-decoration: none;
        }

        /***********************************************************************************************/
        /* Blog Post footer */
        /***********************************************************************************************/

        .blog-post-foot {
            padding: 30px;
            margin-bottom: 60px;
            border-bottom: 1px solid #ececec;
        }

        .blog-post-foot a {
            font-size: 18px;
            -webkit-transition: all .3s ease-in-out;
               -moz-transition: all .3s ease-in-out;
                -ms-transition: all .3s ease-in-out;
                 -o-transition: all .3s ease-in-out;
                    transition: all .3s ease-in-out;
        }

        .blog-post-foot a:hover {
            text-decoration: none;
            color: #A9ACAD;
        }

        .blog-post-prev {
            float: left;
        }

        .blog-post-prev i {
            margin-right: 10px;
        }

        .blog-post-next {
            float: right;
        }

        .blog-post-next i {
            margin-left: 10px;
        }


        /***********************************************************************************************/
        /* -Comments */
        /***********************************************************************************************/

        #comments {
            margin-bottom: 50px;
            padding-bottom: 50px;
            border-bottom: 1px solid #ececec;
        }

        .user-avatar {
            float: left;
            width: 80px;
            height: 80px;
            margin-right: 20px
        }

        .comment {
            display: table;
            padding: 20px;
            border: 1px solid #f1f3f6;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -o-border-radius: 5px;
            margin-bottom: 35px;
        }

        .comment-author a {
            font-size: 16px;
            font-weight: 500;
            text-transform: uppercase;
        }

        .comment-author a:hover {
            text-decoration: none;
            color: #00c2a9;
        }

        .comment-date {
            margin-bottom: 10px;
        }

        .comment-date a {
            color: #aeaeae;
            font-size: 14px;
        }

        .comment-date a:hover {
            color: #aeaeae;
            text-decoration: none;
        }

        a.reply {
            font-size: 15px;
            font-weight: 600;
            text-transform: uppercase;
            margin: 5px 0;
        }

        a.reply:hover {
            text-decoration: none;
        }
        
        ul.comment-reply {
            margin-left: 100px;
        }

        #leave-reaply-form {
            margin-bottom: 30px;
        }


    /***********************************************************************************************/
    /* -Sidebar */
    /***********************************************************************************************/


        /***********************************************************************************************/
        /* -Widgets */
        /***********************************************************************************************/

        .widgets {
            margin-bottom: 60px;
        }

            /***********************************************************************************************/
            /* -Search Form */
            /***********************************************************************************************/

            .search {
                margin-bottom: 30px;
            }
    
            #searchform p {
                margin: 0;
                position: relative;
            }

            #searchform p input[type="text"] {
                display: block;
                outline: none;
                font-size: 14px;
                font-style: italic;
                padding-left: 15px;
                padding-right: 60px;
                padding-top: 10px;
                padding-bottom: 10px;
                width: 100%;
                border: 1px solid #dcdcdc;
                border-radius: 5px;
                -webkit-border-radius: 5px;
               -moz-border-radius: 5px;
                -o-border-radius: 5px;
             }
         
            #searchform p input[type="text"]:focus {
                border: 1px solid #00c2a9;
            }

            #searchform #submit-search {
                position: absolute;
                top: 10px;
                right: 15px;
                background: #fff;
                border: 0;
                outline: none;
            }

            #searchform #submit-search i {
                font-size: 20px;
                color: #AAA9A9;
            }

            /***********************************************************************************************/
            /* -Categories */
            /***********************************************************************************************/

            .title-widgets {
                margin-bottom: 20px;
                text-transform: uppercase;
            }

            .categories ul li a, .archives ul li a {
                display: block;
                color: #777;
                padding: 10px 0;
                border-bottom: 1px solid #e6e6e6;
            }

            .categories ul li:last-child a, .archives ul li:last-child a {
                border: 0;
                padding-bottom: 0px;
            }

            .categories ul li a:hover, .archives ul li a:hover {
                text-decoration: none;
                color: #00c2a9;
            }

            /***********************************************************************************************/
            /* -Recent posts */
            /***********************************************************************************************/

            .recentposts ul li {
                float: left;
                width: 50%;
                position: relative;
                padding: 1px;
            }

            .recentposts ul li a {
                display: block;
            }

           .overlay-recent-post {
               -moz-backface-visibility: hidden;
               -moz-transition: all .3s;
               -ms-backface-visibility: hidden;
               -o-backface-visibility: hidden;
               -o-transition: all .3s;
               -webkit-backface-visibility: hidden;
                -webkit-transition: all .3s;
                backface-visibility: hidden;
                background-color: #00c2a9;
                background: rgba(0, 194, 169, 0.8);
                border: 1px solid transparent;
                bottom: -1px;
                left: 0;
                opacity: 0;
                position: absolute;
                right: 0;
                text-align: center;
                top: 0;
                transition: all .3s;
                z-index: 10;
                -webkit-transition: all .3s ease-in-out;
                   -moz-transition: all .3s ease-in-out;
                    -ms-transition: all .3s ease-in-out;
                     -o-transition: all .3s ease-in-out;
                        transition: all .3s ease-in-out;
            }

            .overlay-recent-post .link {
                color: #fff;
                display: inline-block;
                line-height: 30px;
                vertical-align: top;
                width: 30px;
                height: 30px;
                border: 1px solid #fff;
                border-radius: 3px;
                position: absolute;
                top: 0;
                right: 50%;
                margin-right: -15px;
                -webkit-transition: all .3s ease-in;
                   -moz-transition: all .3s ease-in;
                    -ms-transition: all .3s ease-in;
                     -o-transition: all .3s ease-in;
                        transition: all .3s ease-in;
            }

            .overlay-recent-post .link:hover {
                background: #fff;
                color: #00c2a9;
            }

            .overlay-recent-post:hover {
                opacity: 1;
            }

            .overlay-recent-post:hover .link {
                top: 39%;
            }


            /***********************************************************************************************/
            /* -Tweets Feeds */
            /***********************************************************************************************/


            .tweets ul li {
                margin-bottom: 30px;
            }

            .icon-tweets {
                float: left;
                width: 40px;
                height: 40px;
                text-align: center;
            }

            .icon-tweets i {
                font-size: 26px;
                color: #1fc3ff;
            }

            .tweet-message {
                margin-left: 40px;
            }

            .tweet-message p {
                margin: 0;
            }

            .tweet-message a {
                -webkit-transition: all .3s ease-in;
                   -moz-transition: all .3s ease-in;
                    -ms-transition: all .3s ease-in;
                     -o-transition: all .3s ease-in;
                        transition: all .3s ease-in;
            }

            p.post-date {
                color: #aeaeae;
                margin-top: 3px;
            }

            /***********************************************************************************************/
            /* Tags */
            /***********************************************************************************************/

            .tags ul li {
                float: left;
                margin-right: 5px;
                margin-bottom: 5px;
            }

            .tags ul li a {
                display: block;
                font-size: 14px;
                text-transform: uppercase;
                padding: 5px 20px;
                border: 1px solid #00c2a9;
               border-radius: 5px;
               -webkit-border-radius: 5px;
               -moz-border-radius: 5px;
               -o-border-radius: 5px;
               -webkit-transition: all .3s ease-in-out;
                  -moz-transition: all .3s ease-in-out;
                   -ms-transition: all .3s ease-in-out;
                    -o-transition: all .3s ease-in-out;
                       transition: all .3s ease-in-out;
            }

            .tags ul li a:hover {
                text-decoration: none;
                background: #00c2a9;
                color: #fff;
            }


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

footer {
    background: #2a5a71;
    padding: 20px 0;
}

.copyright, .developBy {
    text-align: center;
}

.copyright p, .developBy p {
    color: white;
}

footer a:hover {
    color: #00cfb0;
}