/* res_id: 87535a22845677106acc827893164d0b */

@charset "utf-8";
/* CSS Document */

/**
    Lenze Site Template
    Copyright (c) 2013, Pophonic 

    Author: Pophonic
    Profile: themeforest.net/user/pophonic
    
**/



/* ===== Reset ===== */

* {
    margin: 0;
    padding: 0;
}


/* ===== Body, Images and Typography ===== */

body {
    background-color: #aaaaaa;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #4e4e4e;
    line-height: 20px;
}

p {
	margin: 10px 0px;
}

.clearfix {
    clear: both;
}

img {
    vertical-align: top;
}

.editor-text a,
p a {
    text-decoration: none !important;
    color: rgb(6,60,104); /* #00a9fe; */
    background-color: rgba(255,189,82,0.3);
    border-radius: 6px;
    padding: 0px 5px;

    -webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    -moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

a:link, a:active {
    text-decoration: none;
}

.editor-text a:hover {
    /* color: rgb(255,189,82); */
    background-color: rgba(255,189,82,1);
}

a img {
    border: none;
}

h1,h2,h3,h4,h5,h6 {
    font-family: 'Oswald', sans-serif;
}

div.logo a {
    background: none;
    border-radius: 0px;
}

.container {
    width: 100%;
    position: absolute;
    top: 0;
}

figure.feature-image {
    margin: 20px 0px 10px;
}

.container.background {
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    
    background-size: cover;
}

.container.background.backimage1 {
    background-image: url(../images/background/background-image1.jpg);
}

.container.background.backimage2 {
    background-image: url(../images/background/background-image2.jpg);
}

.container.background.backimage3 {
    background-image: url(../images/background/background-image3.jpg);
}

.container.background.backimage4 {
    background-image: url(../images/background/background-image4.jpg);
}

.wrapper {
    width: 984px;
    height: auto;
    position: relative;
    margin: auto;
    z-index: 1;
}

.wrapper.boxstyle {
    margin-top: 130px;
    margin-bottom: 60px;
}

.box-container {
    background-color: rgba(255, 255, 255, 0.85);
    padding: 40px 35px 45px 35px;
    overflow: hidden;
    
    /* div padding fix */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.box-container > iframe {
	margin-top: 30px;
}

.page-header {
    padding: 30px 35px;
    background-color: rgba(0, 0, 0, 0.3);
    overflow: hidden;
    
    /* div padding fix */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.page-header h1 {
    font-size: 36px;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 34px;
    float: left;
    margin-right: 35px;
}

.page-header p {
    width: 100%;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #959595;
    line-height: 18px;
}

.pagenav {
    margin-bottom: 10px;
    overflow: hidden;
}

.pagenav ul {
    list-style: none;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    color: #7e7e7e;
    text-transform: uppercase;
    margin-left: -10px;
}

.pagenav ul li {
    display: inline;
    float: left;
    padding: 0px 10px;
    border-right: 1px solid rgb(6,60,104); /* #00a9fe solid 1px;*/ 
}

.pagenav ul li:last-child {
    border-right: none;
}

.pagenav ul li a {
    color: rgb(6,60,104);/* #00a9fe; */
    text-decoration: none;
    background: none;
    
    -webkit-transition: color 0.2s ease-in-out;
    -moz-transition: color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
}

/*
.pagenav ul li a:hover {
    color: #7e7e7e;
}
*/

/* === Block Quote === */

blockquote {
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    color: #4e4e4e;
    text-align: center;
    margin: auto;
}

.quote-icon {
    padding-top: 8px;
    padding-left: 45px;
    background: url(../images/blockquote-icon.png) no-repeat;
    
    /* div padding fix */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.quote-subtext {
    font-size: 14px;
    color: #7e7e7e;
    margin-top: 20px;
}

.quote-pagefullwidth {
    width: 65%;
    margin-top: 55px;
}

.quote-pagesidebar {
    width: 80%;
    margin-top: 25px;
    margin-bottom: 40px;
}

.team-quote {
    width: 55%;
    margin-top: 55px;
    margin-bottom: 5px;
}

/* === Dropcap === */

.dropcap:first-child:first-letter {
    float: left;
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 10px;
    color: #ffffff;
    padding: 17px;
    margin: 7px 10px 0px 0px;
    background-color: #4a4a4a;
    border-radius: 50%;
}

/* === for Firefox only === */

@-moz-document url-prefix() {
    .dropcap:first-child:first-letter {
        padding: 13px 17px;
    }
}

/* ===== End ===== */



/* ===== Home Style 2 ===== */

.banner-slide {
    width: 100%;
    height: auto;
}

/* ===== Service Section ===== */

.service-container {
    position: relative;
    background: url(../images/texture_bg.png) repeat;
    z-index: 900;
}

.servicebox {
    position: absolute;
    margin-top: -77px;
}

.servicebox ul {
    list-style: none;
    margin-left: -12px;
}

.servicebox ul li{
    width: 237px;
    float: left;
    margin-left: 12px;
}

.service-textarea {
    padding-top: 25%;
    padding-bottom: 55px;
    text-align: center;
}

.service-textarea h1 {
    font-size: 4em;
    text-transform: uppercase;
    line-height: 1.2em;
    text-shadow: 0px 2px 2px rgba(255, 255, 255, 1);
}

.service-textarea p {
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    line-height: 25px;
    margin-top: 24px;
}

/* ===== Portfolio Section ===== */

/* === Filter === */
.category-filter {
    background-color: #3a3a3a;
}

.category-filter.boxstyle {
    background-color: rgba(46, 46, 46, 0.85);
}

.category-filter .wrapper {
    padding: 30px 0px;
    
    /* div padding fix */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.category-filter.boxstyle .wrapper {
    padding: 30px 35px;
    
    /* div padding fix */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

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

.category-filter h2 {
    font-size: 36px;
    font-weight: 600;
    line-height: 45px;
    float: left;
    margin-top: -8px;
    margin-right: 35px;
    color: #ffffff;
    text-transform: uppercase;
}

.category-filter ul li {
    display: inline;
    padding: 5px;
    margin-right: 10px;
}

/* === Fullwidth Thumbnails === */

.grid-fullwidth {
    max-width:100%;
    min-width:240px;
    width:auto;
    margin:auto;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    overflow: hidden;
}
 
.megafolio-container {
   width:100%; 
   position:relative;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
}



/* ===== Home Style 3 ===== */

.highlight-container {
    width: 100%;
    display: table;
    background-color: rgba(255, 255, 255, 0.85);
    margin-bottom: 20px;
}

.highlight-image {
    display: table-cell;
    width: 50%;
    vertical-align: top;
}

.highlight-details {
    display: table-cell;
    width: 50%;
    position: relative;
    vertical-align: top;
    padding: 35px;
    text-align: right;
    
    /* div padding fix */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.highlight-details h1 {
    font-size: 4em;
    text-transform: uppercase;
    line-height: 1.2em;
    margin-top: -4px;
    text-shadow: 0px 2px 2px rgba(255, 255, 255, 1);
}

.highlight-details p {
    margin-top: 12px;
}

.highlight-moreinfo {
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
    position: absolute;
    right: 0;
    margin-right: 35px;
    margin-top: 30px;
    padding-left: 35px;
    background: url(../images/plus-link-highlight.png) no-repeat left;*/
}

.highlight-details a .highlight-moreinfo {
    color: #4e4e4e;
    
    -webkit-transition: color 0.2s ease-in-out;
    -moz-transition: color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
}

.highlight-details a:hover .highlight-moreinfo {
    color: #7e7e7e;
}

/* === Portfolio Thumbnails === */

.grid-box {
    max-width:100%;
    min-width:240px;
    width:auto;
    margin:auto;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    overflow: hidden;
}

.addmore {
    text-align: center;
    margin-top: 35px;
}

.addmore button {
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #ffffff;
    text-transform: uppercase;
    background-color: #00a9fe ;
    padding: 10px 40px;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    
    -webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out;
    -o-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out;
}

.addmore button:hover {
    background-color: #3a3a3a;
}



/* ===== About Us ===== */

.editor-text {
    margin-top: 40px;
}
.editor-text h1, .editor-text h2, .editor-text h3  {
        margin: 20px 0px;
}

.our-team {
    padding: 45px 35px;
    background: url(../images/texture_bg.png) repeat;
    border-top: #ffffff solid 1px;
    overflow: hidden;
}

.team-title-area {
    width: 70%;
    margin: auto;
    margin-top: 5px;
    text-align: center;
    background: url(../images/team-title-line.png) repeat-x left;
}

.team-title {
    font-size: 30px;
    font-weight: 600;
    text-transform: uppercase;
    text-shadow: 0px 2px 2px rgba(255, 255, 255, 1);
    margin: auto;
    padding: 0px 30px;
    background: url(../images/texture_bg.png) repeat;
}

.our-team ul {
    list-style: none;
    margin-top: 45px;
    margin-left: -28px;
}

.our-team ul li {
    width: 286px;
    position: relative;
    text-align: center;
    float: left;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    margin-left: 28px;
}

.our-team ul li:hover > .team {
    opacity: 1;
}

.team-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../images/team-mask.png) no-repeat;
    background-size: cover;
    z-index: 11;
}

.team-mask:hover > .team-details {
    margin-top: 45%;
    opacity: 1;
}

.team-details {
    margin-top: 50%;
    opacity: 0;
    
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.team-name {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
}

.team-position {
    font-size: 12px;
    font-weight: 400;
    color: #ffffff;
    margin-top: 4px;
}

.team-more {
    margin-top: 18px;
}

.team-more a {
    font-size: 18px;
    font-weight: 600;
    color: #3e3e3e;
    text-decoration: none;
    
    -webkit-transition: color 0.2s ease-in-out;
    -moz-transition: color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
}

.team-more a:hover {
    color: #1e1e1e;
}



/* ===== Portfolio and Gallery ===== */

.header-image {
    overflow: hidden;
}

.header-image.header-feature1 {
    background: url(../images/upload/fullwidth-header-feature-image1.jpg) no-repeat;
    background-size: cover;
}

.header-image.header-feature2 {
    background: url(../images/upload/fullwidth-header-feature-image2.jpg) no-repeat;
    background-size: cover;
}

.header-image .wrapper {
    margin-top: 57px;
    padding: 59px 0px 40px 0px;
}

.header-image h1 {
    font-size: 36px;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 45px;
}

.header-image p {
    width: 55%;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #ffffff;
    margin-top: 13px;
}

.header-image .pagenav {
    margin-top: 25px;
}

.header-image .pagenav ul{
    color: #ffffff;
}

.header-image .pagenav ul li {
    border-right: #ffffff solid 1px;
}

.header-image .pagenav ul li:last-child {
    border-right: none;
}

.header-image .pagenav ul li a{
    color: #ffffff;
}

.header-image .pagenav ul li a:hover{
    color: #4e4e4e;
}

.portfolio-content {
    display: table;
    padding-bottom: 40px;
    border-bottom: #ffffff solid 1px;
    overflow: hidden;
}

.portfolio-content figure {
    width: 539px;
    display: table-cell;
    vertical-align: top;
}

.portfolio-details {
    width: 375px;
    display: table-cell;
    vertical-align: top;
    padding-left: 30px;
    
    /* div padding fix */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.portfolio-details h1 {
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    color: #4e4e4e;
    text-transform: uppercase;
}

.portfolio-tag {
    margin-top: 25px;
    padding-left: 25px;
    border-left: #00a9fe  solid 5px;
    
    /* div padding fix */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.portfolio-tag ul {
    list-style: none;
}

.portfolio-tag ul li {
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
    color: #00a9fe ;
    text-transform: uppercase;
    margin-bottom: 13px;
}

.portfolio-tag ul li span{
    color: #7e7e7e;
    margin-left: 3px;
}

.portfolio-tag button {
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    padding: 10px 20px;
    border: none;
    background-color: #00a9fe ;
    border-radius: 5px;
    margin-top: 18px;
    cursor: pointer;
    
    -webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out;
    -o-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out;
}

.portfolio-tag button:hover {
    background-color: #3a3a3a;
}

.portfolio-text {
    margin-top: 30px;
}

/* === Related Work === */

.related-work h2 {
    font-size: 24px;
    font-weight: 600;
    color: #4e4e4e;
    text-transform: uppercase;
    margin-top: 40px;
}

.related-work ul {
    list-style: none;
    margin-top: 13px;
    margin-left: -22px;
}

.related-work ul li {
    width: 212px;
    float: left;
    position: relative;
    text-align: center;
    overflow: hidden;
    margin-top: 22px;
    margin-left: 22px;
}

.related-work ul li .thumbnail-title {
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #ffffff;
    text-transform: uppercase;
    padding: 50px 20px 0px 20px;
    margin-top: 30%;
    background: url(../images/lupe2.png) no-repeat top;
    
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.related-work ul li:hover .thumbnail-title {
    margin-top: 24%;
}



/* ===== Blog ===== */

.blog-container {
    display: table;
}

.blog-lists,
.blog-details {
    display: table-cell;
    vertical-align: top;
    width: 614px;
}

.blog-lists ul {
    list-style: none;
}

.blog-lists .blog-post {
    padding-bottom: 25px;
    border-bottom: #ffffff solid 1px;
    margin-top: 35px;
}

.blog-lists .blog-post:first-child {
    margin-top: 0px;
}

.blog-lists .blog-post figure {
    position: relative;
}

.blog-meta {
    display: table;
    margin-top: 35px;
    padding-bottom: 15px;
}

.post-date {
    display: table-cell;
    width: 56px;
}

.date-box {
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 18px;
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    padding: 10px;
    background-color: #00a9fe ;
    
    /* div padding fix */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.post-month {
    font-size: 12px;
    font-weight: 400;
    line-height: 10px;
}

.post-title {
    display: table-cell;
    vertical-align: top;
    padding-left: 20px;
    
    /* div padding fix */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.post-title h2 {
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    text-transform: uppercase;
}

.post-title h2 a {
    color: #4e4e4e;
    text-decoration: none;
    
    -webkit-transition: color 0.2s ease-in-out;
    -moz-transition: color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
}

.post-title h2 a:hover {
    color: #00a9fe ;
}

.post-title ul {
    margin-top: 5px;
}

.post-title ul li {
    display: inline;
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 28px;
    color: #00a9fe ;
    text-transform: uppercase;
    margin-right: 10px;
}

.post-title ul li a {
    color: #7e7e7e;
    text-decoration: none;
    margin-left: 3px;
    
    -webkit-transition: color 0.2s ease-in-out;
    -moz-transition: color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
}

.post-title ul li a:hover {
    color: #4e4e4e;
}

/* === Next Page === */

.next-page ul {
    margin-top: 20px;
    float: right;
    list-style: none;
}

.next-page ul li {
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #eeeeee;
    line-height: 28px;
    width: 23px;
    height: 27px;
    float: left;
    margin-left: 5px;
    text-align: center;
    background-color: #4e4e4e;
    cursor: pointer;
    
    -webkit-transition: color, background-color 0.2s ease-in-out;
    -moz-transition: color, background-color 0.2s ease-in-out;
    -ms-transition: color, background-color 0.2s ease-in-out;
    -o-transition: color, background-color 0.2s ease-in-out;
    transition: color, background-color 0.2s ease-in-out;
    
    /* div padding fix */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.next-page ul li:hover,
.next-page .page-active {
    color: #ffffff;
    background-color: #00a9fe ;
}

.next {
    background: url(../images/next.png) no-repeat center;
}

.next:hover {
    background: url(../images/next-white.png) no-repeat center;
}



/* ===== Blog Single ===== */

.blog-container.blog-single {
    margin-top: 35px;
}

.blog-meta.blog-single {
    margin-top: 0px;
}

/* === Author === */

.author {
    display: table;
    margin-top: 45px;
    padding-bottom: 45px;
    border-bottom: #ffffff solid 1px;
}

.author-image {
    display: table-cell;
    vertical-align: top;
    width: 149px;
    padding-right: 25px;
    
    /* div padding fix */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.author-image img {
    border-radius: 50%;
}

.author-detail {
    display: table-cell;
    vertical-align: top;
    border-left: #00a9fe  solid 5px;
}

.author-detail span {
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-transform: uppercase;
    margin-left: 20px;
}

.author-detail p {
    margin: 10px 0px 0px 20px;
}

/* === Related Post === */

.related-post {
    margin-top: 43px;
    padding-bottom: 38px;
    border-bottom: #ffffff solid 1px;
    overflow: hidden;
}

.related-post h2 {
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
}

.related-post ul {
    list-style: none;
    margin-top: 23px;
    margin-left: -14px;
}

.related-post ul li {
    width: 143px;
    float: left;
    margin-left: 14px;
}

.related-post ul li figure {
    position: relative;
}

.related-post h4 {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    margin-top: 10px;
}

.related-post h4 a {
    color: #4e4e4e;
    text-decoration: none;
    
    -webkit-transition: color 0.2s ease-in-out;
    -moz-transition: color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
}

.related-post h4 a:hover {
    color: #00a9fe ;
}

/* === Comments === */

.blog-comment {
    margin-top: 43px;
}

.blog-comment h2 {
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
}

.blog-comment span {
    margin-left: 10px;
}

.blog-comment ul {
    list-style: none;
    margin-top: 38px;
}

.blog-comment ul li {
    display: table;
    margin-top: 45px;
}

.blog-comment ul li:first-child {
    margin-top: 0px;
}

.avatar {
    display: table-cell;
    vertical-align: top;
    width: 149px;
    text-align: center;
}

.avatar img {
    border-radius: 50%;
}

.comment-details {
    width: 465px;
    display: table-cell;
    vertical-align: top;
    border-left: #00a9fe  solid 5px;
    padding-left: 20px;
    
    /* div padding fix */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.comment-details.comment-reply {
    border-left: #ffffff solid 5px;
}

.comment-header {
    overflow: hidden;
}

.name-date {
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    float: left;
}

.comment-date {
    color: #00a9fe ;
}

.reply a {
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    float: right;
    color: #4e4e4e;
    text-decoration: none;
    
    -webkit-transition: color 0.2s ease-in-out;
    -moz-transition: color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
}

.reply a:hover {
    color: #00a9fe ;
}

.comment-text {
    margin-top: 10px;
}

/* === Leave A Comment === */

.leave-comment {
    margin-top: 48px;
}

.leave-comment h2 {
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
}



/* ===== Clients ===== */

.box-container.client {
    padding: 40px 35px 25px 35px;
}

.client-logo ul {
    list-style: none;
}

.client-logo ul li {
    width: 20%;
    float: left;
    padding: 20px;
    text-align: center;
    
    /* div padding fix */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    
    /* border */
    box-shadow: 
        0px -21px 0 -20px #bbbbbb,
        21px  0px 0 -20px #bbbbbb,
        0px  0px 0 0px #bbbbbb;
}

.client-logo ul li:nth-child(-n+4) {
    box-shadow: 
        21px  0px 0 -20px #bbbbbb,
        0px  0px 0 0px #bbbbbb;
}

.client-logo ul li:nth-child(5) {
    box-shadow: none;
}

.client-logo ul li:nth-child(10),
.client-logo ul li:nth-child(15) {
    box-shadow: 
        0px -21px 0 -20px #bbbbbb,
        0px  0px 0 0px #bbbbbb;
}



/* ===== Contact Us ===== */

.map-container {
    width: 100%;
    height: 400px;
    border: #ffffff solid 1px;
}

#map-canvas {
    margin: 0;
    padding: 0;
    height: 100%;
}

.contact-area {
    width: 100%;
    display: table;
    margin-top: 35px;
}

.send-message {
    display: table-cell;
    width: 50%;
    vertical-align: top;
    padding-right: 30px;
    
    /* div padding fix */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.contact-info {
    display: table-cell;
    width: 50%;
    vertical-align: top;
    border-left: #ffffff solid 1px;
    padding-left: 30px;
    
    /* div padding fix */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.contact-area h2 {
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 24px;
}

.email_success {
    text-align: right;
    margin-top: 20px;
}

.contact-details {
    margin-top: 25px;
    padding-left: 20px;
    border-left: #00a9fe  solid 5px;
    
    /* div padding fix */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.contact-details ul {
    list-style: none;
}

.contact-details ul li {
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    color: #00a9fe ;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.contact-details ul li span{
    color: #7e7e7e;
    margin-left: 3px;
    text-transform: none;
}

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

.contact-textarea figure {
    float: left;
    margin: 0px 20px 0px 0px;
}



/* ===== Sidebar ===== */

.page-sidebar {
    display: table-cell;
    vertical-align: top;
    width: 300px;
    padding-left: 35px;
    
    /* div padding fix */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.sidebar-title {
    font-size: 24px;
    font-weight: 600;
    color: #4e4e4e;
    text-transform: uppercase;
}

/* === Recent News === */

.recent-news ul {
    list-style: none;
    margin-top: 30px;
}

.recent-news ul li {
    display: table;
    margin-top: 25px;
}

.recent-news ul li .recent-thumb {
    display: table-cell;
    vertical-align: top;
}

.recent-news ul li figure {
    position: relative;
}

.recent-details {
    display: table-cell;
    vertical-align: top;
    padding-left: 20px;
    
    /* div padding fix */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.recent-details h4 {
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    text-decoration: none;
}

.recent-details h4 a {
    text-decoration: none;
    color: #4e4e4e;
    
    -webkit-transition: color 0.2s ease-in-out;
    -moz-transition: color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
}

.recent-details h4 a:hover {
    color: #00a9fe ;
}

.readmore {
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    text-transform: uppercase;
    margin-top: 15px;
}

.readmore a {
    color: #00a9fe ;
    text-decoration: none;
    
    -webkit-transition: color 0.2s ease-in-out;
    -moz-transition: color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
}

.readmore a:hover {
    color: #4e4e4e;
}

/* === Sidebar Categories === */

.sidebar-category {
    margin-top: 45px;
}

.sidebar-category ul {
    list-style: none;
    margin-top: 25px;
}

.sidebar-category ul li {
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-top: 10px;
    padding-left: 25px;
    background: url(../images/sidebar-plus-link.png) no-repeat left;
    
    /* div padding fix */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.sidebar-category ul li a {
    text-decoration: none;
    color: #4e4e4e;
    
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.sidebar-category ul li a:hover {
    padding-left: 10px;
    color: #00a9fe ;
}

/* === Sidebar Gallery === */

.sidebar-gallery {
    margin-top: 40px;
    overflow: hidden;
}

.sidebar-gallery ul {
    list-style: none;
    margin-top: 26px;
    margin-left: -5px;
}

.sidebar-gallery ul li {
    width: 85px;
    float: left;
    position: relative;
    margin-top: 5px;
    margin-left: 5px;
}

/* === Sidebar Tags === */

.sidebar-tags {
    margin-top: 43px;
}

.sidebar-tags ul {
    list-style: none;
    margin-top: 26px;
}

.sidebar-tags ul li {
    color: #ffffff;
    text-decoration: none;
    float: left;
    margin-top: 5px;
    margin-right: 5px;
    padding: 3px 15px;
    background-color: #00a9fe ;
    border-radius: 3px;
    cursor: pointer;
    
    -webkit-transition: background-color 0.5s ease;
    -moz-transition: background-color 0.5s ease;
    -ms-transition: background-color 0.5s ease;
    -o-transition: background-color 0.5s ease;
    transition: background-color 0.5s ease;
}

.sidebar-tags ul li:hover {
    background-color: #4a4a4a;
}



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

.footer-container {
    padding: 35px 0px 40px 0px;
    background-color: rgba(255, 255, 255, 0.95);
    overflow: hidden;
}

.footer-title {
    font-weight: 600;
    font-size: 20px;
    color: #4e4e4e;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.footer-aboutus {
    width: 306px;
    float: left;
    margin-right: 33px;
}

.footer-aboutus p {
    margin-top: 25px;
}

.footer-gallery {
    width: 306px;
    float: left;
    margin-right: 33px;
}

.footer-gallery ul {
    list-style: none;
    margin-top: -6px;
    margin-left: -6px;
}

.footer-gallery ul li {
    width: 72px;
    position: relative;
    float: left;
    margin-top: 6px;
    margin-left: 6px;
    overflow: hidden;
}

.footer-contact {
    width: 306px;
    float: right;
}

.footer-contact p {
    margin-top: -5px;
}

.footer-address {
    list-style: none;
    margin-top: 15px;
}

.footer-address li {
    padding-left: 20px;
    background: url(../images/footer-plus-listing.png) no-repeat left;
    
    /* div padding fix */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

/* === Footer Social Media === */
.footer-social {
    list-style: none;
    margin-top: 20px;
}

.footer-social li {
    float: left;
    background-color: #7e7e7e;
    border-radius: 50%;
    margin-right: 5px;
    
    -webkit-transition: background-color 0.3s ease-in-out;
    -moz-transition: background-color 0.3s ease-in-out;
    -ms-transition: background-color 0.3s ease-in-out;
    -o-transition: background-color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
}

.footer-social li:hover {
    background-color: #8fbcca;
}

.footer-social li.social-color2:hover {
    background-color: #96d7e3;
}

.footer-social li.social-color3:hover {
    background-color: #f7ad75;
}

.footer-social li.social-color4:hover {
    background-color: #db6666;
}

.footer-social li.social-color5:hover {
    background-color: #8fbcca;
}

.footer-social li.social-color6:hover {
    background-color: #3ab395;
}

.footer-social li.social-color7:hover {
    background-color: #f5a88f;
}

.footer-social li.social-color8:hover {
    background-color: #f68a5e;
}

.footer-social li.social-color9:hover {
    background-color: #8fbcca;
}

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

.footer-bottom {
    height: 40px;
    padding-top: 9px;
    background-color: rgba(30, 30, 30, 0.95);
    border-top: rgba(78, 78, 78, 0.95) solid 2px;
    
    /* div padding fix */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.copyright {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #909090;
    float: left;
}

.copyright a {
    color: #909090;
    text-decoration: none;
    
    -webkit-transition: color 0.2s ease-in-out;
    -moz-transition: color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
}

.copyright a:hover {
    color: #ffffff;
}

.footer-bottom nav {
    float: right;
}

.footer-bottom ul {
    list-style: none;
}

.footer-bottom ul li {
    display: inline;
    float: left;
    margin-left: 14px;
}

.footer-bottom ul li a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #909090;
    text-decoration: none;
    
    -webkit-transition: color 0.2s ease-in-out;
    -moz-transition: color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
}

.footer-bottom ul li a:hover {
    color: #ffffff;
}



/* ===== Social Share Button ===== */

#social-share {
    margin-top: 25px;
}

#shareme .share-this {
    font-size: 14px;
    font-weight: 600;
    color: #7e7e7e;
    text-transform: uppercase;
    margin-bottom: 10px;
}
  
#shareme a {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    float: left;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#shareme .facebook {
    background-color: #00a9fe ;
    -webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out;
    -o-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out;
}

#shareme .facebook:hover {
    background-color: #31aeb3;
}
  
#shareme .twitter {
    background-color: #96d7e3;
    -webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out;
    -o-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out;
}

#shareme .twitter:hover {
    background-color: #89c4cf;
}
  
#shareme .googleplus {
    background-color: #ee7760;
    -webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out;
    -o-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out;
}

#shareme .googleplus:hover {
    background-color: #de705b;
}

/* ===== Social Share Button End ===== */



/* ===== Go To Top ===== */

.back-to-top {
    width: 40px;
    height: 40px;
    position: fixed;
    bottom: 2em;
    right: 2em;
    background: url(../images/go-to-top.png) no-repeat;
    opacity: 0.7;
    z-index: 1000;
    display: none;
}

.back-to-top:hover {    
    opacity: 0.9;
}

/* ===== Go To Top End ===== */



/* ===== Hover Effect ===== */

.thumbnail-hover {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../images/plus-link-thumbnail.png) no-repeat center center;
    background-color: rgba(54, 191, 196, 0.85);
    opacity: 0;
    
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -ms-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

.thumbnail-hover:hover {
    opacity: 1;
}

.team {
    background: rgba(54, 191, 196, 0.85);
    z-index: 10;
}

.related-work .thumbnail-hover {
    background: rgba(54, 191, 196, 0.85);
}

.blog-lists .thumbnail-hover {
    background: rgba(54, 191, 196, 0.85) url(../images/lupe2.png) no-repeat center;
}

/* social */
.socialWrapper {
    position: fixed;
    top: 40%;
    width: 40px;
    height: 120px;
    left: 0px;
    border: solid 4px #000;
    border-left: none;
    background: #000;
}

.socialLink {
    display: block;
    float: left;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 52px;
}

.socialLink.facebook {
    background-image: url(../images/facebook.png);
}

.socialLink.google {
    background-image: url(../images/google+.png);
}

.socialLink.youtube {
    background-image: url(../images/youtube.png);
}

.socialLink.twitter {
    background-image: url(../images/twitter.png);
}

.socialLink.flickr {
    background-image: url(../images/flickr.png);
}

.socialLink.instagram {
    background-image: url(../images/instagram.png);
}

.socialLink.ebay {
    background-image: url(../images/ebay.png);
    background-color: #FFF;
    background-size: 40px;
}

.text_medium {
    width: 200px !important;
}

.text_short {
    width: 80px !important;
}

.downloadWrapper {
	margin-top: 25px;
}

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

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

.downloadWrapper h2 {
	margin: 20px 0px;
}

.downloadItem {
	margin-bottom: 5px;
}

.downloadItem a {
	color: rgb(6,60,104);
	
	text-decoration: none !important;
    border-radius: 6px;
    padding: 0px 5px;

    -webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    -moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.downloadItem a:hover {
    background-color: rgba(255,189,82,0.3);
}

/* pschulze 2016-05-14 shop mod */

.swiper-container {
    width: 400px;
    color: #fff;
    text-align: center;
    background-color: #000;
}

.swiper-wrapper {
	height: auto !important;
}

.pagination {
    position: absolute;
    z-index: 20;
    left: 10px;
    bottom: 5px;
}

.swiper-pagination-switch {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background: #222;
    margin-right: 5px;
    
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
	
    border: 1px solid #fff;
    cursor: pointer;
}

.swiper-visible-switch {
    background: #aaa;
}

.swiper-active-switch {
    background: #fff;
}

.swiper-slide {
    float: left;
}

.swipeLeftButton,
.swipeRightButton {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	-moz-opacity: 0.3;
	-khtml-opacity: 0.3;
	opacity: 0.3;
  
    background-size: 30px 30px;
    background-repeat: no-repeat;
    width: 40px;
    height: 100%;
    position: absolute;
    top: 0px;
    z-index: 2;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

.swipeLeftButton:hover,
.swipeRightButton:hover {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity: 1;
}

.swipeLeftButton {
    left: 0px;
    background-image: url(../images/icon_swiper_left.png);
    background-position: left center;
}

.swipeRightButton {
    left: auto;
    right: 0px;
    background-image: url(../images/icon_swiper_right.png);
    background-position: right center;
}

.shop_module {
	margin-top: 50px;
}

.shop_module:nth-of-type(1n+2) {
	margin-top: 25px;
	border-top: 1px solid #BBB;
	padding-top: 35px;
}

.shop_module .images {
	width: 400px;
	display: inline-block;
	vertical-align: top;
	position: relative;
}

.shop_module .images .articleImage {
	height: auto !important;
}

.shop_module .images .articleImage img {
	display: block;
} 

.shop_module .content {
	width: 490px;
	margin-left: 24px;
	display: inline-block;
	vertical-align: top;
}

.shop_module .content h2 {
	margin-bottom: 25px;
	line-height: 25px;
}

.shop_module .content .description {
	margin-bottom: 30px;
}

.shop_module .content .price {
	float: left;
	font-weight: bold;
	font-family: 'Oswald', sans-serif;
	font-size: 26px;
	margin: -4px 30px 30px 0px;
}

.shop_module .content .price > span {
	display: block;
}

.shop_module .content .price .price_intro {
	font-weight: normal;
	font-size: 14px;
	color: rgb(6,60,104);
	margin-bottom: 8px;
}

.shop_module .content .buy_paypal {
	float: right;
    text-align: right;
}

.shop_module .content .buy_paypal table {
	table-layout: fixed;
	border-collapse: collapse;
	border-spacing: 0px;
}

.shop_module .content .buy_paypal table td {
	vertical-align: top;
	padding-bottom: 5px;
}

.shop_module .content .buy_paypal select {
	margin-bottom: 5px;
}

.category_menu {
	margin-top: 30px;
}
 
.category_menu nav {
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    color: #7e7e7e;
    text-transform: uppercase;
    margin-left: -10px;
}

.category_menu nav figure {
	display: inline-block;
	padding: 0px 10px;
	border-left: #00a9fe solid 1px;
}

.category_menu nav figure:first-child {
	border-left: none;
}

.category_menu nav figure a {
	color: #7e7e7e;
	font-weight: normal;
	border-bottom: 1px solid transparent;
}

.category_menu nav figure a:link,
.category_menu nav figure a:active {
	text-decoration: none;
}

.category_menu nav figure a.active {
	color: #00a9fe !important;
}

.category_menu nav figure a:hover {
	border-bottom-color: #00a9fe;
}


@charset "utf-8";
/* CSS Document */

/**
	Lenze Site Template
 	Copyright (c) 2013, Pophonic 

	Author: Pophonic
	Profile: themeforest.net/user/pophonic
	
**/


/* ===== Hexagon Service ===== */

.service-container a {
	width: 100%;
	display: block;
	min-width: 200px;
	position: relative;
}

.service-container a:hover .hexa {
	margin-top: 35px;
	background-color: #36bfc4;
}
 
.hexa {
	width: 100%;
	min-width: 200px;
	height: 0;
	padding-bottom: 57.7%;
	margin-top: 65px;
	background-color: #4a4a4a;
	/*position: absolute;*/
	color: #ffffff;
	font-family: 'Oswald', sans-serif;
	font-size: 18px;
	border-radius: 4%/20%;
	
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.hexa::before,
.hexa::after {
	content:"";
	display: block;
	width: inherit;
	height: inherit;
	padding: inherit;
	background: inherit;
	z-index: 0;
	position: absolute;
	border-radius: inherit;
  
	-moz-transform:rotate(60deg);  
	-webkit-transform:rotate(60deg);  
	-o-transform:rotate(60deg);  
	-ms-transform:rotate(60deg);
}

.hexa::after {
	-moz-transform:rotate(-60deg);  
	-webkit-transform:rotate(-60deg);  
	-o-transform:rotate(-60deg);  
	-ms-transform:rotate(-60deg);
}

.hexcontainer {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}

.vertical-align {
	display: table;
	height: 100%;
	width: 100%;
}

.hextext {
	display: table-cell;
	text-align: center;
	padding-top: 40%;
	background: url(../images/service-icon/service1.png) no-repeat 50% 20%;
	opacity: 0.4;

	-webkit-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	-ms-transition: opacity 0.2s ease-in-out;
	-o-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
}

.hextext.service2 {
	background: url(../images/service-icon/service2.png) no-repeat 50% 20%;
}

.hextext.service3 {
	background: url(../images/service-icon/service3.png) no-repeat 50% 20%;
}

.hextext.service4 {
	background: url(../images/service-icon/service4.png) no-repeat 50% 20%;
}

.service-container a:hover .hextext {
	opacity: 1;
}



/* ===== Design for a width of 768px to 984px ===== */
@media only screen and (max-width:984px)
{
	.service-container a:hover .hexa {
		margin-top: 65px;
	}
}

@charset "utf-8";
/* CSS Document */

/**
	Lenze Site Template
 	Copyright (c) 2013, Pophonic 

	Author: Pophonic
	Profile: themeforest.net/user/pophonic
	
**/


/* ===== Leave a Comment ===== */

.xform {
	margin-top: 25px;
}

.xform label {
    display: block;
    float: left;
    width: 180px;
    padding: 6px 10px 0px 0px;
}

.rex-xform > p {
	margin-bottom: 5px;
}

.rex-xform > p > label {
	font-weight: bold;
}

.xform .divider {
	margin: 20px 0px 20px;
	font-style: italic;
	padding-left: 190px;
}

.xform input[type=text],
.xform input[type=email],
.xform input[type=password],
.xform input[type=submit] {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 14px;
	font-weight: normal;
	width: 370px;
	height: 35px;
	padding: 0px 20px;
	color: #666666;
	background-color: #ffffff;
	border: #eeeeee solid 1px;
	
	/* div padding fix */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

.xform input[type=submit] {
    margin-left: 190px;
    color: rgb(6,60,104);
    background-color: rgba(255,189,82,1);
}

ul.form_warning,
div.formResult {
    margin:20px 0px;
    padding: 20px;
    background-color: #009700;
    border-radius: 6px;
	color: #FFF !important;
}

ul.form_warning {
	background-color: #BB0000;
}

ul.form_warning > *:last-child,
div.formResult > *:last-child {
	margin-bottom: 0px;
}

.xform .input-email,
.xform .input-subject {
	margin-top: 20px;
}

.xform textarea {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 14px;
	font-weight: normal;
	width: 370px;
	height: 210px;
	padding: 10px 20px;
	color: #666666;
	background-color: #ffffff;
	border: #eeeeee solid 1px;
	
	/* div padding fix */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

.xform .formcheckbox,
.xform .radios p.radio {
	padding-left: 190px;
	white-space: nowrap;
}

.xform .formcheckbox label,
.xform .radios p.radio label {
	display: inline-block;
	vertical-align: top;
    float: none;
    width: auto;
    padding: 0px 0px 0px 10px;
    white-space: normal;
}

.xform .formcheckbox input,
.xform .radios p.radio input {
	margin-top: 4px;
}

.xform .radios p.radio {
	padding-top: 5px;
}

.comment-active {
	margin-top: 10px;
	overflow: hidden;
}

.comment-active span {
	float: left;
	line-height: 20px;
}

.comment-active .submit-button {
	width: auto;
	font-family: 'Oswald', sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: #ffffff;
	text-align: center;
	float: right;
	background-color: #36bfc4;
	margin-top: 5px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	
	/* div padding fix */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	
	-webkit-transition: background-color 0.2s ease-in-out;
	-moz-transition: background-color 0.2s ease-in-out;
	-ms-transition: background-color 0.2s ease-in-out;
	-o-transition: background-color 0.2s ease-in-out;
	transition: background-color 0.2s ease-in-out;
}

.comment-active .submit-button:hover {
	background-color: #3a3a3a;
}

/* ===== End ===== */


/* ===== Leave a comment placeholder color ===== */

.xform .placeholder { /* Internet Explorer */
	color: #9e9e9e;
}

.xform input::-webkit-input-placeholder,
.xform textarea::-webkit-input-placeholder { /* WebKit browsers */
    color: #9e9e9e;
}

.xform input:-moz-placeholder,
.xform textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #4e4e4e;
}
.xform input::-moz-placeholder,
.xform textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #4e4e4e;
}

/* ===== End ===== */

.privacy-hint {
	padding-left: 190px;
	margin-top: 30px;
	max-width: 370px;
}


/*******************************************************************************
							Header and Logo
*******************************************************************************/
.header-section {
	width: 100%;
	height: 65px;
	position: fixed;
	background-color: #FFF;
	border-bottom: #333 solid 5px;
	z-index: 1000;
}

.logo {
	position: absolute;
	right: 0px;
	z-index: 1;
}

/*******************************************************************************
							Default configuration
*******************************************************************************/
.flexy-menu {
	width: 100%;
	margin:0;
	padding: 0;
	position:relative;
	float:left;
	font-family: 'Oswald', sans-serif;
	list-style: none;
}
.flexy-menu li {
	display:inline-block;
	font-size:13px;
	font-weight: normal;
	margin:0;
	padding:0;
	float:left;
	line-height: 20px;
	position:relative;
}
.flexy-menu > li > a {
	padding:20px 22px;
	background: none;
	border-radius: 0px;
	color:#000;
	text-decoration:none;
	display:block;
	text-transform:uppercase;
	-webkit-transition:color 0.2s linear, background 0.2s linear;	
	-moz-transition:color 0.2s linear, background 0.2s linear;	
	-o-transition:color 0.2s linear, background 0.2s linear;	
	transition:color 0.2s linear, background 0.2s linear;	
}
.flexy-menu li:hover > a,
.flexy-menu li.active a {
	background: #000;
	color: #fff;
	border-bottom: rgb(255,189,82) solid 5px;  /* #00a9fe solid 5px; */
}
.arrow-down {
	width: 0; 
	height: 0; 
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid rgb(255,189,82)/* #00a9fe */;
	margin: 0 auto;
	opacity: 0;
}
.flexy-menu li:hover > .arrow-down,
.flexy-menu li.active .arrow-down {
	opacity: 1;
}

/*----------------------------
	Right alignment (item)
----------------------------*/
.flexy-menu li.right{
	float: right; 
}

/*-----------------------------
	Drop down configuration
-----------------------------*/
.flexy-menu ul, 
.flexy-menu ul li ul {
	list-style: none;
    margin: 0;
    padding: 0;  
	display: none;
    position: absolute;
    z-index: 99999;
	width: 170px;
	background-color: rgba(54, 191, 196, 0.9);
	box-shadow: 0 1px 1px rgba(0,0,0,0.4);
}
.flexy-menu ul {
    top: 60px;
    left: 0;
}
.flexy-menu ul li ul {
    top: 0;
    left: 100%;
}
.flexy-menu ul li {
	clear:both;
	width:100%;
	border: none;
	font-size:12px;
}
.flexy-menu ul li a {
	padding:10px 20px;
	width:100%;
	color:#ffffff;
	font-size:13px;
	text-decoration:none;
	display:inline-block;
	float:left;
	clear:both;
	box-sizing:border-box;
	-moz-box-sizing:border-box; 
	-webkit-box-sizing:border-box;
	-webkit-transition:color 0.2s linear, background 0.2s linear;	
	-moz-transition:color 0.2s linear, background 0.2s linear;	
	-o-transition:color 0.2s linear, background 0.2s linear;	
	transition:color 0.2s linear, background 0.2s linear;	
}
.flexy-menu li.active li a {
	background-color: transparent;
	border-bottom: none;
}
.flexy-menu li.active li:hover > a {
	background: #c9d9ea;
}
.flexy-menu ul li:hover > a {
	border-bottom: none;
}

/*-----------------------------
	Drop down indicators
-----------------------------*/
.flexy-menu > li .indicator{
	position: absolute;
	color: #7e7e7e;
	top: 20px;
	right: 8px;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 15px;
}
.flexy-menu ul > li .indicator{
	top: 10px;
	right: 8px;
}
.flexy-menu li:hover > .indicator,
.flexy-menu li.active > .indicator{
	color: #ffffff;
	
	-webkit-transition: color 0.2s ease-in-out;
	-moz-transition: color 0.2s ease-in-out;
	-ms-transition: color 0.2s ease-in-out;
	-o-transition: color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out;
}
.flexy-menu ul li > .indicator{
	color: #ffffff;
}

/*------------------
	Preset sizes
------------------*/
.thin > li > a{
	padding: 10px 22px;
}
.thin ul{
	top: 40px;
}
.thin > li .indicator{
	top: 10px;
}

.thick > li > a{
	padding: 25px 14px 20px 14px;
}
.thick ul{
	top: 80px;
}
.thick > li .indicator{
	top: 22px;
}

/*-------------------------
	Icons configuration
-------------------------*/
.flexy-menu i{
	line-height: 20px !important;
	margin-right: 6px;
	font-size: 18px;
	float: left;
}

/*------------------------------------
	Collapsible menu configuration
------------------------------------*/
.flexy-menu > li.showhide{
	display: none;
	width: 100%;
	height: 50px;
	cursor: pointer;
	color:#dedede;
	border-bottom: solid 1px rgba(0, 0, 0, 0.1);
	/*background-color: rgba(255, 255, 255, 0.95);*/
}
.flexy-menu > li.showhide span.title{
	margin: 16px 0 0 25px;
	float: left;
	display: none;
}
.flexy-menu > li.showhide span.icon{
	margin: 17px 20px;
	float: left;
}
.flexy-menu > li.showhide .icon em{
	margin-bottom: 3px;
	display: block;
	width: 20px;
	height: 2px;
	background: #aaaaaa;
}

/*-----------------
	Light Theme
-----------------*/
.light{ background: #fff; border: solid 1px #dfdfdf; }
.light a{ color: #555 !important; }
.light li:hover > a, .light li.active a { background: #555; color: #fff !important; }
.light ul, .light ul li ul { background: #fff; }
.light > li.showhide{ background: #fff; color: #555 !important;}
.light > li.showhide .icon em{ background: #555; }
.light li .indicator{ color: #555; }
.light li:hover > .indicator{ color: #fff; }

/*------------
	Colors
------------*/
.blue li:hover > a, .blue li.active a { background: #02B8FA; color: #fff!important; }

.green li:hover > a, .green li.active a { background: #88C425; color: #fff!important;}

.red li:hover > a, .red li.active a { background: #cf0404; color: #fff!important; }

.orange li:hover > a, .orange li.active a { background: #ff670f; color: #fff!important; }

.yellow li:hover > a, .yellow li.active a { background: #febf01; color: #444!important; }
.yellow li .indicator{ color: #dedede; }
.yellow li:hover > .indicator{ color: #444; }
.yellow.light li .indicator{ color: #555; }

.purple li:hover > a, .purple li.active a { background: #A737FA; color: #fff!important; }

.pink li:hover > a, .pink li.active a { background: #f82b4c; color: #fff!important; }


/*******************************************************************************
							Vertical configuration
*******************************************************************************/
.flexy-menu.vertical{
	width: 200px;
}
.flexy-menu.vertical li{
	width: 100%;
}
.flexy-menu.vertical li a{
	display: inline-block !important;
	width: 100%;
	padding:18px 20px 16px;
	box-sizing:border-box;
	-moz-box-sizing:border-box; 
	-webkit-box-sizing:border-box;
}
.flexy-menu.vertical ul li{
	width: 100%;
}

/*--------------------------------
	Drop down on vertical menu
--------------------------------*/
.flexy-menu.vertical ul, 
.flexy-menu.vertical ul li ul {
	width: 150px;
}
.flexy-menu.vertical ul {
    top: 0;
	left: 100%;
}
.flexy-menu.vertical ul li ul {
    top: 0px;
}

/*---------------------------------
	Vertical menu on right side 
---------------------------------*/
.flexy-menu.vertical.right{
	float: right !important;
}
.flexy-menu.vertical.right ul{
	left: -150px !important;
}

/*------------------------------
	Indicator on vertical menu 
------------------------------*/
.flexy-menu.vertical > li .indicator{
	top: 17px;
	right: 15px;
	font-size: 17px;
}
.flexy-menu.vertical ul > li .indicator{
	top: 18px;
	right: 15px;
}


/*****************************************************************************
							Responsive design
*****************************************************************************/
@media only screen and (max-width: 984px) {
	.header-section {
		height: auto;
		overflow: hidden;
		background-color: transparent;
		border-bottom: rgba(221, 221, 221, 0.95) solid 3px;
	}
	
	.logo img {
		width: auto;
		height: 50px;
		margin-left: 20px;
	}
	.flexy-menu {
		background-color: rgba(255, 255, 255, 0.95);
	}
	
	.flexy-menu.vertical{
		width: 100%;
	}
	.flexy-menu li{
		display: block;
		width: 100%;	
	}
	.flexy-menu > li > a{
		padding-top:15px;
		padding-bottom:15px;
		padding-left: 25px;
	}
	.flexy-menu li:hover > a,
	.flexy-menu li.active a {
		background: #000;
		color: #fff;
		border-bottom: none;
	}
	.flexy-menu li.active li a {
		color: #7e7e7e;
	}
	.flexy-menu li.active li:hover > a {
		color: #ffffff;
	}
	.flexy-menu a{
		width: 100%;
		box-sizing:border-box;
		-moz-box-sizing:border-box; 
		-webkit-box-sizing:border-box; 
	}
	.flexy-menu ul, 
	.flexy-menu ul li ul,
	.flexy-menu.vertical ul, 
	.flexy-menu.vertical ul li ul{
		width: 100%;
		left: 0;
		border-left: none;
		position: static;
		background-color: transparent;
		box-sizing:border-box;
		-moz-box-sizing:border-box; 
		-webkit-box-sizing:border-box; 
	}
	.flexy-menu ul li {
		border-left: none;
		border-right: none;
	}
	.flexy-menu ul li a,
	.flexy-menu.vertical ul li a	{
		padding-top:10px;
		padding-bottom:10px;
		color: #7e7e7e;
	}
	.flexy-menu ul > li > a{
		padding-left: 40px !important;
	}
	.flexy-menu > li .indicator{
		top: 15px;
		right: 25px;
		font-size: 17px;
	}
	.flexy-menu ul > li .indicator{
		right: 24px;
		color: #7e7e7e;
	}
	.flexy-menu.vertical ul > li .indicator{
		top: 10px;
		right: 15px;
	}
	.flexy-menu > li > ul > li > a{ padding-left: 40px !important; }
	.flexy-menu > li > ul > li > ul > li > a{ padding-left: 60px !important; }
	.flexy-menu > li > ul > li > ul > li > ul > li > a{ padding-left: 80px !important; }
	.arrow-down {
		display: none;
	}
}

@charset "utf-8";
/* CSS Document */

/**
	Lenze Site Template
 	Copyright (c) 2013, Pophonic 

	Author: Pophonic
	Profile: themeforest.net/user/pophonic
	
**/



/* ===== Design for a width of 768px to 984px ===== */
@media only screen and (max-width:984px)
{
	
	.wrapper.header {
		width: 100%;
	}
	
	.wrapper {
		width: 728px;
	}
	
	.wrapper.boxstyle {
		margin-top: 115px;
	}
	
	.page-header h1 {
		float: none;
		margin-right: 0px;
		margin-bottom: 15px;
	}
	
	.feature-image img {
		width: 100%;
		height: auto;
	}
	
	
	/* ===== Service ===== */
	.servicebox {
		width: 514px;
		left: 50%;
    	margin-left: -257px;
	}
	
	.servicebox ul li{
		margin-top: 80px;
		margin-left: 20px;
	}
	
	.servicebox ul li:nth-child(-n+2){
		margin-top: 0px;
	}
	
	.service-textarea {
		padding-top: 73%;
	}
	
	
	/* ===== Category Filter ===== */
	.category-filter h2 {
		float: none;
		margin-top: 0px;
		margin-bottom: 20px;
	}

	
	/* ===== Highlight Container ===== */
	.highlight-container {
		display: block;
	}
	
	.highlight-container img {
		width: 100%;
		height: auto;
	}
	
	.highlight-image {
		display: block;
		width: 100%;
	}
	
	.highlight-details {
		display: block;
		width: 100%;
		text-align: left;
	}
	
	.highlight-details p {
		margin-bottom: 45px;
	}
	
	.highlight-moreinfo {
		position: absolute;
		right: 0;
		bottom: 0;
		margin-top: 0px;
		margin-right: 35px;
		margin-bottom: 35px;
		padding-left: 35px;
		background: url(../images/plus-link-highlight.png) no-repeat left;
	}
	
	
	/* ===== Our Team ===== */
	.our-team ul {
		margin-left: -20px;
	}
	
	.our-team ul li {
		width: 206px;
		margin-left: 20px;
	}
	
	.our-team ul li img {
		width: 100%;
		height: auto;
	}
	
	.team-more {
		margin-top: 7px;
	}
	
	.team-mask:hover > .team-details {
		margin-top: 40%;
	}
	
	/* ===== Portfolio and Gallery ===== */
	.header-image .wrapper {
		margin-top: 40px;
	}
	
	.portfolio-content {
		display: block;
	}
	
	.portfolio-content figure {
		width: 100%;
		display: block;
	}
	
	.portfolio-details {
		width: 100%;
		display: block;
		padding-left: 0px;
	}
	
	.portfolio-details h1 {
		margin-top: 30px;
	}
	
	.related-work ul {
		margin-top: 17px;
		margin-left: -14px;
	}
	
	.related-work ul li {
		width: 154px;
		margin-top: 14px;
		margin-left: 14px;
	}
	
	.related-work ul li img {
		width: 100%;
		height: auto;
	}
	
	.related-work ul li .thumbnail-title {
		font-size: 12px;
		font-weight: 400;
		line-height: 16px;
		padding: 45px 20px 0px 20px;
		margin-top: 25%;
	}
	
	.related-work ul li:hover .thumbnail-title {
		margin-top: 20%;
	}
	
	
	/* ===== Clients ===== */
	.client-logo ul li {
		width: 25%;
	}
	
	.client-logo ul li:nth-child(-n+3) {
		box-shadow: 
			21px  0px 0 -20px #bbbbbb,
			0px  0px 0 0px #bbbbbb;
	}
	
	.client-logo ul li:nth-child(4) {
		box-shadow: none;
	}
	
	.client-logo ul li:nth-child(5),
	.client-logo ul li:nth-child(10),
	.client-logo ul li:nth-child(15) {
		box-shadow: 
			0px -21px 0 -20px #bbbbbb,
			21px  0px 0 -20px #bbbbbb,
			0px  0px 0 0px #bbbbbb;
	}
	
	.client-logo ul li:nth-child(8) {
		box-shadow: 
			0px -21px 0 -20px #bbbbbb,
			0px  0px 0 0px #bbbbbb;
	}
	
	.client-logo ul li:nth-child(12) {
		box-shadow: 
			0px -21px 0 -20px #bbbbbb,
        	0px 21px 0 -20px #bbbbbb,
         	0px  0px 0 -20px #bbbbbb;
	}
	
	.client-logo ul li img {
		width: 100%;
		height: auto;
	}
	
	
	/* ===== Blog ===== */
	.blog-lists,
	.blog-details {
		width: 433px;
	}
	
	.blog-post img {
		width: 100%;
		height: auto;
	}
	
	.related-post ul {
		margin-left: -11px;
	}
	
	.related-post ul li {
		width: 100px;
		margin-left: 11px;
	}
	
	.related-post ul li img {
		width: 100%;
		height: auto;
	}
	
	
	/* ===== Contact ===== */
	.contact-area {
		display: block;
	}
	
	.send-message {
		display: block;
		width: 100%;
		padding-right: 0px;
	}
	
	.contact-info {
		display: block;
		width: 100%;
		border-top: #ffffff solid 1px;
		border-left: none;
		padding-top: 35px;
		padding-left: 0px;
		margin-top: 35px;
	}

	
	/* ===== Sidebar ===== */
	.page-sidebar {
		width: 225px;
		padding-left: 25px;
	}
	
	.sidebar-gallery ul {
		margin-left: -4px;
	}
	
	.sidebar-gallery ul li {
		width: 64px;
		margin-top: 4px;
		margin-left: 4px;
	}
	
	.sidebar-gallery ul li img {
		width: 100%;
		height: auto;
	}
	
	
	/* ===== Footer ===== */
	.footer-aboutus {
		float: none;
		width: 100%;
		margin-right: 0px;
	}
	
	.footer-gallery {
		width: 346px;
		margin-top: 30px;
		margin-right: 36px;
	}
	
	.footer-gallery ul li {
		width: 82px;
	}
	
	.footer-gallery ul li img {
		width: 100%;
		height: auto;
	}
	
	.footer-contact {
		width: 346px;
		margin-top: 30px;
	}
	
	.shop_module .images {
		display: block;
		margin: 0px auto 40px auto;
		text-align: center;
	}
	
	.shop_module .content {
		width: 100%;
		display: block;
		margin-left: 0px;
	}
}

/* ===== Design for a width of 720px to 767px ===== */
@media only screen and (max-width:767px)
{
	.wrapper {
		width: 680px;
	}
	
	.quote-pagesidebar {
		width: 70%;
	}

	/* ===== Service ===== */	
	.service-textarea {
		padding-top: 78%;
	}

	/* ===== Our Team ===== */
	.our-team ul {
		margin-left: -17px;
	}
	
	.our-team ul li {
		width: 192px;
		margin-left: 17px;
	}

	/* ===== Portfolio ===== */
	.related-work ul {
		margin-top: 20px;
		margin-left: -10px;
	}
	
	.related-work ul li {
		width: 145px;
		margin-top: 10px;
		margin-left: 10px;
	}
	
	
	/* ===== Blog ===== */
	.blog-lists,
	.blog-details {
		width: 390px;
	}
	
	.related-post ul {
		margin-left: -10px;
	}
	
	.related-post ul li {
		width: 90px;
		margin-left: 10px;
	}
	
	
	/* ===== Sidebar ===== */
	.page-sidebar {
		width: 220px;
	}
	
	.sidebar-gallery ul {
		margin-left: -3px;
	}
	
	.sidebar-gallery ul li {
		width: 63px;
		margin-top: 3px;
		margin-left: 3px;
	}
	
	
	/* ===== Footer ===== */
	.footer-gallery {
		width: 325px;
		margin-right: 30px;
	}
	
	.footer-gallery ul {
		margin-top: -3px;
		margin-left: -3px;
	}
	
	.footer-gallery ul li {
		width: 79px;
		margin-top: 3px;
		margin-left: 3px;
	}
	
	.footer-contact {
		width: 325px;
	}

	.privacy-hint {
		padding-left: 0;
		max-width: unset;
	}
}




/* ===== Design for a width of 540px to 719px ===== */
@media only screen and (max-width:719px)
{
	.wrapper {
		width: 520px;
	}

	.page-header p {
		width: 100%;
	}
	
	.team-quote {
		width: 65%;
	}
	
	
	/* ===== Service ===== */	
	.service-textarea {
		padding-top: 102%;
	}
	
	
	/* ===== Our Team ===== */
	.our-team ul {
		margin-left: 82px;
	}
	
	.our-team ul li {
		width: 286px;
		float: none;
		margin-top: 25px;
		margin-left: 0px;
	}
	
	.our-team ul li:first-child {
		margin-top: 0px;
	}
	
	.team-more {
		margin-top: 18px;
	}
	
	.team-mask:hover > .team-details {
		margin-top: 45%;
	}
	
	
	/* ===== Portfolio and Gallery ===== */
	.header-image p {
		width: 100%;
	}
	
	.related-work ul {
		margin-left: -9px;
	}
	
	.related-work ul li {
		width: 144px;
		margin-top: 9px;
		margin-left: 9px;
	}
	
	
	/* ===== Clients ===== */
	.client-logo ul li {
		width: 33.3%;
	}
	
	.client-logo ul li:nth-child(-n+2) {
		box-shadow: 
			21px  0px 0 -20px #bbbbbb,
			0px  0px 0 0px #bbbbbb;
	}
	
	.client-logo ul li:nth-child(3) {
		box-shadow: none;
	}
	
	.client-logo ul li:nth-child(4),
	.client-logo ul li:nth-child(8) {
		box-shadow: 
			0px -21px 0 -20px #bbbbbb,
			21px  0px 0 -20px #bbbbbb,
			0px  0px 0 0px #bbbbbb;
	}
	
	.client-logo ul li:nth-child(6),
	.client-logo ul li:nth-child(9),
	.client-logo ul li:nth-child(12),
	.client-logo ul li:nth-child(15) {
		box-shadow: 
			0px -21px 0 -20px #bbbbbb,
			0px  0px 0 0px #bbbbbb;
	}
	
	
	/* ===== Blog ===== */
	.blog-container {
		display: block;
	}
	
	.blog-lists,
	.blog-details {
		display: block;
		width: 100%;
		overflow: hidden;
	}
	
	.related-post ul {
		margin-left: -14px;
	}
	
	.related-post ul li {
		width: 102px;
		margin-left: 14px;
	}
	
	
	/* ===== Sidebar ===== */
	.page-sidebar {
		display: block;
		width: 100%;
		padding-left: 0px;
		margin-top: 45px;
	}
	
	.sidebar-gallery ul {
		margin-top: 26px;
		margin-left: -5px;
	}
	
	.sidebar-gallery ul li {
		width: 86px;
		margin-top: 5px;
		margin-left: 5px;
	}
	
	
	/* ===== Footer ===== */
	.footer-gallery {
		width: 100%;
		margin-top: 35px;
		margin-right: 0px;
	}
	
	.footer-gallery ul {
		margin-top: -5px;
		margin-left: -5px;
	}
	
	.footer-gallery ul li {
		width: 70px;
		margin-top: 5px;
		margin-left: 5px;
	}
	
	.footer-contact {
		width: 100%;
		margin-top: 40px;
	}
	
	
	/* ===== Footer Bottom ===== */
	.footer-bottom {
		height: auto;
		text-align: center;
		padding: 10px 0px;
		overflow: hidden;
	}
	
	.copyright {
		float: none;
	}
	
	.footer-bottom nav {
		float: none;
	}
	
	.footer-bottom ul li {
		float: none;
		margin-left: 0px;
		margin-right: 13px;
	}
}

/* ===== Design for a width of 480px to 539px ===== */
@media only screen and (max-width:539px)
{
	.wrapper {
		width: 460px;
	}

	/* ===== Block Quote ===== */
	.quote-pagesidebar {
		width: 65%;
	}

	/* ===== Service ===== */
	.servicebox {
		width: 460px;
		left: 50%;
    	margin-left: -230px;
		margin-top: -70px;
	}
	
	.servicebox ul {
		margin-left: 0px;
	}
	
	.servicebox ul li {
		width: 200px;
		margin-top: 60px;
	}
	
	
	/* ===== Our Team ===== */
	.team-title {
		font-size: 24px;
		padding: 0px 20px;
	}
	
	.our-team ul {
		margin-left: 52px;
	}
	
	
	/* ===== Portfolio ===== */
	.related-work ul {
		margin-left: -20px;
	}
	
	.related-work ul li {
		width: 185px;
		margin-top: 20px;
		margin-left: 20px;
	}
	
	
	/* ===== Clients ===== */
	.client-logo ul li {
		width: 50%;
	}
	
	.client-logo ul li:first-child {
		box-shadow: 
			21px  0px 0 -20px #bbbbbb,
			0px  0px 0 0px #bbbbbb;
	}
	
	.client-logo ul li:nth-child(2) {
		box-shadow: none;
	}
	
	.client-logo ul li:nth-child(3),
	.client-logo ul li:nth-child(9),
	.client-logo ul li:nth-child(15) {
		box-shadow: 
			0px -21px 0 -20px #bbbbbb,
			21px  0px 0 -20px #bbbbbb,
			0px  0px 0 0px #bbbbbb;
	}
	
	.client-logo ul li:nth-child(4),
	.client-logo ul li:nth-child(6),
	.client-logo ul li:nth-child(8),
	.client-logo ul li:nth-child(10),
	.client-logo ul li:nth-child(12) {
		box-shadow: 
			0px -21px 0 -20px #bbbbbb,
			0px  0px 0 0px #bbbbbb;
	}
	
	.client-logo ul li:nth-child(14) {
		box-shadow: 
			0px -21px 0 -20px #bbbbbb,
        	0px 21px 0 -20px #bbbbbb,
         	0px  0px 0 -20px #bbbbbb;
	}
	
	
	/* ===== Blog ===== */	
	.related-post ul li {
		width: 188px;
		margin-top: 16px;
	}
	
	.related-post ul li:nth-child(-n+2) {
		margin-top: 0px;
	}
	
	
	/* ===== Sidebar ===== */
	.sidebar-gallery ul {
		margin-top: 25px;
		margin-left: -6px;
	}
	
	.sidebar-gallery ul li {
		width: 126px;
		margin-top: 6px;
		margin-left: 6px;
	}
	
	
	/* ===== Footer ===== */	
	.footer-gallery ul li {
		width: 88px;
	}
}


@media only screen and (max-width:768px)
{
	.xform label {
		float: none;
		display: block;
		padding: 0px;
		margin: 10px 0px 5px;
	}

	.xform input[type=text],
	.xform input[type=email],
	.xform input[type=password],
	.xform input[type=submit],
	.xform textarea {
		width: 100%;
	}

	.xform input[type=submit] {
		margin: 10px 0px 0px 0px;
	}

	.xform .divider,
	.xform .formcheckbox,
	.xform .radios p.radio {
		padding-left: 0px;
	}

	.xform .formcheckbox label,
	.xform .radios p.radio label {
		margin-top: 0px;
	}
}

/* ===== Design for a width of 480px to 539px ===== */
@media only screen and (max-width:539px)
{
	.xform input[type=text],
	.xform textarea {
		width: 100%;
	}

	.xform input[type=submit] {
        margin-left: 0px;
    }
}


/* ===== Design for a width of 320px to 479px ===== */
@media only screen and (max-width:479px)
{
	.wrapper.header {
		min-width: 320px;
	}
	
	.wrapper {
		width: 310px;
	}
	
	.wrapper.boxstyle {
		margin-top: 100px;
		margin-bottom: 45px;
	}
	
	.page-header h1 {
		line-height: 45px;
	}
	
	
	/* ===== Block Quote ===== */
	.quote-pagefullwidth,
	.quote-pagesidebar,
	.team-quote {
		width: 100%;
	}
	
	
	/* ===== Home Style 3 ===== */
	.highlight-details h1 {
		font-size: 40px;
	}
	
	
	/* ===== Service ===== */
	.servicebox {
		width: 238px;
		left: 50%;
		margin-top: -40px;
    	margin-left: -119px;
	}
	
	.servicebox ul li{
		width: 237px;
		float: none;
		margin-top: 145px;
		margin-left: 0px;
	}
	
	.servicebox ul li:first-child{
		margin-top: 0px;
	}
	
	.servicebox ul li:nth-child(2){
		margin-top: 145px;
	}
	
	.service-textarea {
		padding-top: 363%;
	}
	
	.service-textarea h1 {
		font-size: 50px;
	}
	
	
	/* ===== Our Team ===== */
	.team-title-area {
		width: 100%;
	}
	
	.team-title {
		padding: 0px 15px;
	}
	
	.our-team ul {
		margin-left: 0px;
	}
	
	.our-team ul li {
		width: 240px;
	}
	
	.team-mask:hover > .team-details {
		margin-top: 40%;
	}
	
	
	/* ===== Portfolio and Gallery ===== */
	.related-work ul {
		margin-top: 35px;
		margin-left: 0px;
	}
	
	.related-work ul li {
		width: 100%;
		float: none;
		margin-left: 0px;
	}
	
	.related-work ul li .thumbnail-title {
		font-size: 14px;
		font-weight: 600;
		line-height: 20px;
		padding: 50px 20px 0px 20px;
		margin-top: 30%;
	}
	
	.related-work ul li:hover .thumbnail-title {
		margin-top: 24%;
	}
	
	
	/* ===== Clients ===== */
	.client-logo ul li {
		padding: 10px;
	}
	
	
	/* ===== Blog ===== */
	.post-date {
		display: none;
	}
	
	.post-title {
		padding-left: 0px;
	}
	
	.post-title ul {
		margin-top: 15px;
	}
	
	.post-title ul li {
		line-height: 18px;
	}
	
	.related-post ul {
		margin-left: 0px;
	}


	/* === Author === */
	.author {
		display: block;
		padding-bottom: 35px;
	}
	
	.author-image {
		display: block;
		width: 149px;
		padding-right: 0px;
		margin: auto;
	}
	
	.author-image img {
		width: 100%;
		height: auto;
	}
	
	.author-detail {
		display: block;
		border-left: none;
		border-top: #36bfc4 solid 5px;
		padding-top: 20px;
		margin-top: 25px;
	}
	
	.author-detail span {
		margin-left: 0px;
	}
	
	.author-detail p {
		margin: 10px 0px 0px 0px;
	}
	
	
	/* ===== Related Post ===== */
	.related-post ul li {
		width: 100%;
		float: none;
		margin-top: 30px;
		margin-left: 0px;
	}
	
	.related-post ul li:first-child{
		margin-top: 0px;
	}
	
	.related-post ul li:nth-child(2){
		margin-top: 30px;
	}
	
	
	/* ===== Comment ===== */
	.blog-comment ul li {
		display: block;
	}
	
	.avatar {
		display: block;
		width: 149px;
		margin: auto;
	}
	
	.comment-details {
		width: 100%;
		display: block;
		border-left: none;
		border-top: #36bfc4 solid 5px;
		margin-top: 20px;
		padding: 10px 0px 0px 0px;
	}
	
	.comment-details.comment-reply {
		border-left: none;
		border-top: #ffffff solid 5px;
	}
	
	.comment-active .submit-button {
		float: left;
	}
	
	
	/* ===== Contact Us ===== */
	.map-container {
		height: 240px;
	}
	
	.contact-textarea figure {
		float: none;
		margin: 0px 0px 20px 0px;
	}
	
	.contact-textarea img {
		width: 100%;
		height: auto;
	}
	
	
	/* ===== Sidebar ===== */
	.sidebar-gallery ul li {
		width: 76px;
	}
	
	
	/* ===== Footer ===== */	
	.footer-gallery ul {
		margin-top: -6px;
		margin-left: -6px;
	}
	
	.footer-gallery ul li {
		width: 73px;
		margin-top: 6px;
		margin-left: 6px;
	}
}


/* wrapper for player and playlist */
.audioPlayer{
	position:absolute;
	width:245px;
	height:80px;
	top:120px;
	right:20px;
	display:none;
}

/* player holder */
.audioPlayer .playerHolder{
	position:absolute;
	top:0px;
	left:0px;
	width:245px;
	height:80px;
	
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.5);
				
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}


/* player audio name mask for the name scroll function. Set width of the scrolling mask here. Also adjust height if neccesarry. */
.audioPlayer .player_mediaName_Mask{
	position:absolute;
	top:50px;
	left:16px;
	width:205px;
	height:20px;
	overflow:hidden;
}

/* player audio name */
.audioPlayer .player_mediaName{
	position:absolute;
	top:1px;
	left:0px;
	white-space: nowrap;
	
	font-family: 'Source Sans Pro', sans-serif;
	font-size:14px;
	color:#e5e5e5;
}

/* player holder for (previous,play/pause,next) buttons */
.audioPlayer .player_controls{
	position:absolute;
	top:10px;
	left:15px;
}

/* player previous */
.audioPlayer .controls_prev{
	position:absolute;
	top:0px;
	left:0px;
	width:30px;
	height:30px;
}

/* player play/pause */
.audioPlayer .controls_toggle{
	position:absolute;
	top:0px;
	left:35px;
	width:30px;
	height:30px;
}

/* player next */
.audioPlayer .controls_next{
	position:absolute;
	top:0px;
	left:70px;
	width:30px;
	height:30px;
}

.audioPlayer .player_volume{
	position:absolute;
	top:0px;
	left:115px;
	width:30px;
	height:30px;
}

/* player volume, serves as hit as well */
.audioPlayer .volume_seekbar{
	position:absolute;
	top:7px;
	left:145px;
	/* for hit */
	width:70px;
	height:16px;
	/*background:green;*/
}

.audioPlayer .volume_bg{
	position:absolute;
	top:5px;
	left:10px;
	width:52px;
	height:6px;
	background:#7e7e7e;
}

.audioPlayer .volume_level{
	position:absolute;
	top:5px;
	left:10px;
	width:0px;
	height:6px;
	background:#ffffff;
}

/* font calculations for song scroll */
.fontMeasure{
	position:absolute;
    font-family: Arial, Helvetica, sans-serif;
    font-size:15px;
    white-space: nowrap;
	visibility:hidden;
	left:-10000px;
}







		 
		 
		 
		 
		 
		  


/**
 * SoundManager 2 + useFlashBlock
 * ------------------------------
 * Flash positioning and flashblock / clicktoflash handling
 */

#sm2-container {
 /**
  * where the SM2 flash movie goes. by default, relative container.
  * set relative or absolute here, and don't touch it later or bad things will happen (see below comments.)
  */
 position: absolute;
 width: 1px;
 height: 1px;
 overflow: hidden;
 /* screw IE 6, just make it display nice */
 _overflow: hidden;
}

#sm2-container object,
#sm2-container embed {
 /**
  * the actual SWF movie bit.
  * important: The SWF needs to be able to be moved off-screen without display: or position: changes.
  * changing display: or position: or overflow: here or on parent can cause SWF reload or other weird issues after unblock
  * e.g., SM2 starts but strange errors, no whileplaying() etc.
  */
 width: 48px;
 height: 48px;
 /* some flash blockers may also respect this rule */
 max-width: 48px;
 max-height: 48px;
}

#sm2-container.swf_timedout {
 /* expand to show the timed-out SWF content */
 position: relative;
 width: 48px;
 height: 48px;
}

#sm2-container.swf_timedout,
#sm2-container.swf_timedout object,
#sm2-container.swf_timedout embed {
 /**
  * when SM2 didn't start normally, time-out case. flash blocked, missing SWF, no flash?
  * 48px square flash placeholder is typically used by blockers.
  */
 min-width: 48px;
 min-height: 48px;
}

#sm2-container.swf_unblocked {
 /* SWF unblocked, or was never blocked to begin with; try to collapse container as much as possible. */
 width: 1px;
 height: 1px;
}

#sm2-container.swf_loaded object,
#sm2-container.swf_loaded embed,
#sm2-container.swf_unblocked object,
#sm2-container.swf_unblocked embed {
 /* hide flash off-screen (relative to container) when it has loaded OK */
 left: -9999em;
 top: -9999em;
}

#sm2-container.swf_error {
 /* when there is a fatal error (flash loaded, but SM2 failed) */
 display: none;
}

#sm2-container.high_performance,
#sm2-container.high_performance.swf_timeout {
 /* "high performance" case: keep on-screen at all times */
 position: absolute;
 position: fixed;
}

#sm2-container.high_performance {
 overflow: hidden;
 _top: -9999px; /* IE 6 hax, no position:fixed */
 _left: -9999px;
 bottom: 0px;
 left: 0px;
 /**
  * special case: show at first with w/h, hide when unblocked.
  * might be bad/annoying.
  * try to stay within ClickToFlash "invisible" limits (so it won't be blocked.)
  */
 z-index: 99; /* try to stay on top */
}

#sm2-container.high_performance.swf_loaded,
#sm2-container.high_performance.swf_unblocked {
 z-index: auto;
}

#sm2-container.high_performance.swf_loaded,
#sm2-container.high_performance.swf_unblocked,
#sm2-container.high_performance.swf_unblocked object,
#sm2-container.high_performance.swf_unblocked embed {
 /**
  * 8x8px is required minimum to load in fx/win32 in some cases(?)
  * 6x6+ good for fast performance, even better when on-screen via position:fixed
  * also, clickToFlash (Safari <5.1) may auto-load "invisible" SWFs at this size
  */
 height: 8px;
 width: 8px;
}

#sm2-container.high_performance.swf_loaded {
 /* stay bottom/left */
 top: auto;
 bottom: 0px;
 left: 0px;
}

#sm2-container.high_performance.swf_loaded object,
#sm2-container.high_performance.swf_loaded embed,
#sm2-container.high_performance.swf_unblocked object,
#sm2-container.high_performance.swf_unblocked embed {
 /* high-performance case must stay on-screen */
 left: auto;
 top: auto;
}

#sm2-container.high_performance.swf_timedout {
 z-index: 99; /* try to stay on top */
}

*{
	margin:0;
	padding:0;
	border:0;
	outline:none;
}

a{ 
	text-decoration: none; 
}

ul{
	list-style: none;
}

body {
	background:#000;
}



/* component holder */
#componentWrapper{
	position:absolute;
	top:0px;	
	left:0px;
	width:100%;
	height:100%;
	overflow:hidden;
}

#componentWrapper #playlist_list{
	display:none;
}

#componentWrapper .componentHolder{
	position:absolute;
	top:0px;	
	left:0px;
	width:100%;
	height:100%;
}

#componentWrapper .mediaHolder1, 
#componentWrapper .mediaHolder2{
	position:absolute;
	display:none;
}

#componentWrapper .componentPlaylist{
	position:absolute;
	bottom:0px;
	left:0px;
	width:100%;
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.7);
	display:none;
}

/* hide inner playlists! */
#componentWrapper .componentPlaylist .playlist{
	display:none;
}

#componentWrapper .thumbHolder{
	position:absolute;
	top:55px;
	/*size is set automatically in jquery based on thumb size for every category */
	/*background:green;*/
	overflow:hidden;
}

#componentWrapper .thumbWrapper{
	position:absolute;
	top:0px;
	left:0px;
	/*background:green;*/
}

#componentWrapper .playlistItem{
	position:relative;
	top:0px;
	left:0px;
	width: 120px;
	height:80px;
	border: 2px solid #ccc;
	float:left;
	margin-right:5px;
	text-align: center;
}

#componentWrapper .playlistItem:last-child {  
   margin-right:0px;
}  

#componentWrapper .playlistItem2{
	position:relative;
	top:0px;
	left:0px;
	width:120px;
	height:80px;
	border: 2px solid #ccc;
	float:left;
	margin-right:5px;
}

#componentWrapper .playlistItem2:last-child {  
   margin-right:0px;
}   

#componentWrapper .playlistItem3{
	position:relative;
	top:0px;
	left:0px;
	width:120px;
	height:80px;
	border: 2px solid #ccc;
	float:left;
	margin-right:5px;
}

#componentWrapper .playlistItem3:last-child {  
   margin-right:0px;
}  

#componentWrapper .playlistItem4{
	position:relative;
	top:0px;
	left:0px;
	width:120px;
	height:80px;
	border: 2px solid #ccc;
	float:left;
	margin-right:5px;
}

#componentWrapper .playlistItem4:last-child {  
   margin-right:0px;
}   


#componentWrapper .playlistItem5{
	position:relative;
	top:0px;
	left:0px;
	width:120px;
	height:80px;
	border: 2px solid #ccc;
	float:left;
	margin-right:5px;
}

#componentWrapper .playlistItem5:last-child {  
   margin-right:0px;
}   


#componentWrapper .playlistItem6{
	position:relative;
	top:0px;
	left:0px;
	width:120px;
	height:80px;
	border: 2px solid #ccc;
	float:left;
	margin-right:5px;
}

#componentWrapper .playlistItem6:last-child {  
   margin-right:0px;
}   
 



/* fullscreen */
#componentWrapper .gallery_fullscreen{
	position:absolute;
	top:20px;
	left:20px;
	width:30px;
	height:30px;
	display: none;
}


#componentWrapper .music_toggle{
	position:absolute;
	width:30px;
	height:30px;
	top:80px;
	right:20px;
	/*background:red;*/
	display:none;
}



/* slideshow controls */
.slideshow_controls{
	position:absolute;
	width:110px;
	height:30px;
	top:80px;
	right:60px;
	/*background:red;*/
	display:none;
}

.slideshow_controls .controls_next, 
.slideshow_controls .controls_toggle{
	position:relative;
	width:30px;
	height:30px;
	top:0px;
	left:0px;
	margin-left:10px;
	float:right;
}

.slideshow_controls .controls_prev{
	position:relative;
	width:30px;
	height:30px;
	top:0px;
	left:0px;
	float:right;
}






/* data_controls */
#componentWrapper .data_controls{
	position:absolute;
	width:70px;
	height:30px;
	top:80px;
	right:180px;
	/*background:red;*/
}

/* link */
#componentWrapper .link_toggle{
	position:relative;
	width:30px;
	height:30px;
	top:0px;
	left:0px;
	float:right;
	display:none;
}

/* description */
#componentWrapper .info_toggle{
	position:relative;
	width:30px;
	height:30px;
	top:0px;
	left:0px;
	float:right;
	margin-left:10px;
	display:none;
}

#componentWrapper .info_holder{
	position:absolute;
	top:120px;
	right:20px;
	
	color:#e5e5e5;
	padding: 10px 20px 15px 20px;
	
	font-family: 'Source Sans Pro', sans-serif;
	
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.5);
				
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;

	display:none;
}

#componentWrapper .info_holder a{
	color:#e5e5e5;
	text-decoration:underline;
}

#componentWrapper .info_holder a:hover, a:active{
	text-decoration:underline;
}







/* playlist toggle */
#componentWrapper .playlist_toggle{
	position:absolute;
	width:30px;
	height:30px;
	top:-50px;
	left:20px;
	display:none;
}

#componentWrapper .prevMenuBtn{
	position:absolute;
	width:30px;
	height:30px;
	display:none;
	/*background:red;*/
}

#componentWrapper .prevMenuBtn img{
	position:relative;
	display:block;
	width:12px;
	height:18px;
	top:50%;
	left:50%;
	margin-left:-6px;
	margin-top:-9px;
}

#componentWrapper .nextMenuBtn{
	position:absolute;
	width:30px;
	height:30px;
	display:none;
	/*background:red;*/
}

#componentWrapper .nextMenuBtn img{
	position:relative;
	display:block;
	width:12px;
	height:18px;
	top:50%;
	left:50%;
	margin-left:-6px;
	margin-top:-9px;
}

#componentWrapper .prevThumbBtn{
	position:absolute;
	width:30px;
	height:30px;
	display:none;
	/*background:red;*/
}

#componentWrapper .prevThumbBtn img{
	position:relative;
	display:block;
	width:12px;
	height:18px;
	top:50%;
	left:50%;
	margin-left:-6px;
	margin-top:-9px;
}

#componentWrapper .nextThumbBtn{
	position:absolute;
	width:30px;
	height:30px;
	display:none;
	/*background:red;*/
}

#componentWrapper .nextThumbBtn img{
	position:relative;
	display:block;
	width:12px;
	height:18px;
	top:50%;
	left:50%;
	margin-left:-6px;
	margin-top:-9px;
}



/* menu */
#componentWrapper .menuHolder{
	position:absolute;
	top:20px;
	overflow:hidden;
	/*background:#669;*/
}

#componentWrapper .menuWrapper{
	position:absolute;
	top:0px;
	left:0px;
	/*background:green;*/
}

/* menu item */
#componentWrapper .menu_item{
	/*background:#9a6;*/
	position:absolute;
	color:#fff;
	font-family: 'Oswald', sans-serif;
	font-size:15px;
	text-transform:uppercase;
	margin-right:30px;
}




/* preloader */
#componentWrapper .componentPreloader{
	display:none;
	position:absolute;
	top:50%;
	left:50%;
	margin:-20px 0px 0px -20px;/* align with video play btn! */
	background:#000 url('../media/data/gallery_icons/loader.gif') no-repeat center center;
	width:50px;
	height:50px;
	z-index:999;
	opacity:0.7;
}

/* font calculations */
.fontMeasure{
	visibility:hidden;
}





#componentWrapper .caption_holder{
	display:none;
}

/*************************
	-	CAPTIONS	-
**************************/
#componentWrapper .caption_envato_logo	{
						position: absolute; 
						width:180px;
						height:50px;	
						
						moz-box-shadow: 2px 2px 5px #222;
						-webkit-box-shadow: 2px 2px 5px #222;
						box-shadow: 0px 3px 4px #333;
						-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
						filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');									
					}
					
#componentWrapper .caption_bg_white	{
						position: absolute; 
						color: #3e3e3e; 
						text-shadow: none; 
						font-weight: 400; 
						font-size: 4.2vmin;
						font-family: 'Oswald', sans-serif;
						text-transform: uppercase;
						padding: 1% 1.5%;
						margin-left: 10vw;
						border-width: 0px; 
						border-style: none; 
						background-color: #ffffff;										
					}
					
#componentWrapper .caption_bg_white.top	{
						margin-top: 54vh;									
					}
					
#componentWrapper .caption_bg_white.bottom	{
						margin-top: 64vh;									
					}
					
#componentWrapper .caption_bg_dark	{
						position: absolute; 
						color: #ffffff; 
						text-shadow: none; 
						font-weight: 400; 
						font-size: 4.2vmin;
						font-family: 'Oswald', sans-serif;
						text-transform: uppercase;
						padding: 1% 1.5%;
						margin-left: 10vw;
						border-width: 0px; 
						border-style: none; 
						background-color: #1a1a1a;										
					}
					
#componentWrapper .caption_bg_dark.top	{
						margin-top: 54vh;									
					}
					
#componentWrapper .caption_bg_dark.bottom	{
						margin-top: 64vh;									
					}
					
#componentWrapper .caption_bg_green	{
						position: absolute; 
						color: #ffffff; 
						text-shadow: none; 
						font-weight: 400; 
						font-size: 4.2vmin;
						font-family: 'Oswald', sans-serif;
						text-transform: uppercase;
						padding: 1% 1.5%;
						margin-left: 10vw;
						border-width: 0px; 
						border-style: none; 
						background-color: #36bfc4;										
					}
					
#componentWrapper .caption_bg_green.top	{
						margin-top: 54vh;									
					}
					
#componentWrapper .caption_bg_green.bottom	{
						margin-top: 64vh;									
					}


/**************** END CAPTIONS *******/




/* public functions */	
#publicFunctions{
	position: absolute;
	padding: 10px 25px 20px 20px;
	background:#444;
	left:50px;
	top:50px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color:#fff;
	list-style:circle;
	z-index:9999;
	
	-moz-box-shadow: 2px 2px 5px #222;
	-webkit-box-shadow: 2px 2px 5px #222;
	box-shadow: 2px 2px 5px #222;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#222222')";
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#222222');
	
	display:none;
}

#publicFunctions li a{
	color:#fff;
}

#publicFunctions li a:hover, #publicFunctions li .current{
	text-decoration: underline;
}



/*****************************************************************************
							Responsive design
*****************************************************************************/
@media only screen and (max-width: 984px) {
	#componentWrapper .music_toggle{
		top:63px;
	}
	
	.slideshow_controls{
		top:63px;
	}
	
	#componentWrapper .data_controls{
		top:63px;
	}
}




/* big play for video player toggle */
#componentWrapper .player_bigPlay{
	display:none;
	position:absolute;
	width:76px;
	height:76px;
	top:50%;
	left:50%;
	/* offset btn 5px because of the player border so its aligned with open player tbn */
	margin-left:-33px;
	margin-top:-33px;
}

/* darken area behind the video player */
#componentWrapper .player_bg{
	/*display:none;*/
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	background:#111;
}




/* holder for video player */
#componentWrapper .videoPlayer{
	position:absolute;
	top:50%;
	left:50%;
	width:640px;
	height:360px;
	margin-left:-320px;
	margin-top:-180px;
	background:#111;
	
	border:5px solid #ccc;
	
	/* needs not to be hidden (display:none), otherwise its not going to initialize in flash! */
	opacity: 0; 
	filter: alpha(opacity=0); 
	-ms-filter: "alpha(opacity=0)"; 
	-khtml-opacity: 0; 
	-moz-opacity: 0; 
}	

/* local video player fullscreen */
#componentWrapper .videoPlayer_fs{
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
	background:#111;
}


/* holders for video */	
.mediaHolder, 
.youtubeHolder, 
.vimeoHolder, 
.mediaPreview{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	outline:none;
	display:none;
}

/* hide youtube iframe outline for ie9 */
.youtubeWrapper{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	overflow:hidden;
}


.flashPreviewHolder{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	outline:none;
	/* needs not to be hidden (display:none), otherwise its not going to initialize in flash!*/
	opacity: 0; 
	filter: alpha(opacity=0); 
	-ms-filter: "alpha(opacity=0)"; 
	-khtml-opacity: 0;  
	-moz-opacity: 0; 
}

#flashPreview{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	outline:none;
}








/* LOCAL VIDEO PLAYER ELEMENTS */

/* player controls */
.playerControls{
	position:absolute;
	bottom:10px;
	left:10px;
	width:620px;
	height:33px;
	background-image: url('../media/data/video_icons/bg.png'); 
	background-repeat: repeat-x; 
	display:none;
}

/* pause / play */
.player_playControl{
	position:absolute;
	top:3px;
	left:3px;
	width:28px;
	height:26px;
	/*background:red;*/
}

.player_playControl img{
	position:absolute;
	display:block;
	width:12px;
	height:14px;
	top:6px;
	left:10px;
}

/* player progress, serves as hit as well */
.player_progress{
	position:absolute;
	top:3px;
	left:38px;
	/* for hit */
	width:220px;
	height:26px;
	/*background:green;*/
}

.playerControls .progress_bg{
	position:absolute;
	top:10px;
	left:10px;
	width:200px;
	height:5px;
	background:#333333;
}

.load_level{
	position:absolute;
	top:10px;
	left:10px;
	width:0px;
	height:5px;
	background:#ffffff;
}

.progress_level{
	position:absolute;
	top:10px;
	left:10px;
	width:0px;
	height:5px;
	background:#999;
}

/* progress tooltip */
.player_progress_tooltip{
	position:absolute;
	top:-15px;
	/* left is set in code (centered)*/
	width:75px;
	height:18px;
	background:#333;
	display:none;
	
	-moz-box-shadow: 1px 1px 1px #222;
	-webkit-box-shadow: 1px 1px 1px #222;
	box-shadow: 1px 1px 1px #222;
}

.player_progress_tooltip_value{
	position:absolute;
	top:2px;
	/* left is set in code (centered)*/
	color:#ffffff;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
}

/* media time */
.player_mediaTime{
	position:absolute;
	top:9px;
	right:143px;
	
	color:#e5e5e5;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}

/* volume */
.vplayer_volume{
	position:absolute;
	top:3px;
	right:107px;
	width:25px;
	height:26px;
	/*background:red;*/
}

.vplayer_volume img{
	position:absolute;
	display:block;
	width:13px;
	height:14px;
	top:6px;
	left:5px;
}

/* player volume, serves as hit as well */
.volume_seekbar{
	position:absolute;
	top:3px;
	right:40px;
	/* for hit */
	width:60px;
	height:26px;
	/*background:green;*/
}

.volume_bg{
	position:absolute;
	top:10px;
	left:5px;
	width:50px;
	height:5px;
	background:#ffffff;
}

.volume_level{
	position:absolute;
	top:10px;
	left:5px;
	width:0px;
	height:5px;
	background:#999;
}

/* volume tooltip */
.player_volume_tooltip{
	position:absolute;
	top:-15px;
	/* left is set in code (centered)*/
	width:35px;
	height:18px;
	background:#333;
	display:none;
	
	-moz-box-shadow: 1px 1px 1px #222;
	-webkit-box-shadow: 1px 1px 1px #222;
	box-shadow: 1px 1px 1px #222;
}

.player_volume_tooltip_value{
	position:absolute;
	top:2px;
	/* left is set in code (centered)*/
	color:#ffffff;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
}

/* fullscreen */
.player_fullscreen{
	position:absolute;
	top:4px;
	right:5px;
	width:24px;
	height:26px;
	/*background:red;*/
}

.player_fullscreen img{
	position:absolute;
	display:block;
	width:12px;
	height:12px;
	top:6px;
	left:5px;
}
/* END LOCAL VIDEO PLAYER ELEMENTS */

/* big play for local video */
.bigPlay{
	display:none;
	position:absolute;
	width:76px;
	height:76px;
	top:50%;
	left:50%;
	margin-left:-38px;
	margin-top:-38px;
}

/*close video player btn */
.player_close{
	position:absolute;
	width:30px;
	height:30px;
	top:0px;
	right:-35px;
}




/* ===============================================================
Basic Swiper Styles 
================================================================*/
.swiper-container {
	margin:0 auto;
	position:relative;
	overflow:hidden;
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	-o-backface-visibility:hidden;
	backface-visibility:hidden;
	/* Fix of Webkit flickering */
	z-index:1;
}
.swiper-wrapper {
	position:relative;
	width:100%;
	-webkit-transition-property:-webkit-transform, left, top;
	-webkit-transition-duration:0s;
	-webkit-transform:translate3d(0px,0,0);
	-webkit-transition-timing-function:ease;
	
	-moz-transition-property:-moz-transform, left, top;
	-moz-transition-duration:0s;
	-moz-transform:translate3d(0px,0,0);
	-moz-transition-timing-function:ease;
	
	-o-transition-property:-o-transform, left, top;
	-o-transition-duration:0s;
	-o-transform:translate3d(0px,0,0);
	-o-transition-timing-function:ease;
	-o-transform:translate(0px,0px);
	
	-ms-transition-property:-ms-transform, left, top;
	-ms-transition-duration:0s;
	-ms-transform:translate3d(0px,0,0);
	-ms-transition-timing-function:ease;
	
	transition-property:transform, left, top;
	transition-duration:0s;
	transform:translate3d(0px,0,0);
	transition-timing-function:ease;

	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}
.swiper-free-mode > .swiper-wrapper {
	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-ms-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	margin: 0 auto;
}
.swiper-slide {
	float: left;
}

/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
	-ms-touch-action: pan-y;
}
.swiper-wp8-vertical {
	-ms-touch-action: pan-x;
}

/* ===============================================================
Your custom styles, here you need to specify container's and slide's
sizes, pagination, etc.
================================================================*/
.swiper-container {
	/* Specify Swiper's Size: */

	/*width:200px;
	height: 100px;*/
}
.swiper-slide {
	/* Specify Slides's Size: */
	
	/*width: 100%;
	height: 100%;*/
}
.swiper-slide-active {
	/* Specific active slide styling: */
	
}
.swiper-slide-visible {
	/* Specific visible slide styling: */	

}
/* ===============================================================
Pagination Styles
================================================================*/
.swiper-pagination-switch {
	/* Stylize pagination button: */	

}
.swiper-active-switch {
	/* Specific active button style: */	
	
}
.swiper-visible-switch {
	/* Specific visible button style: */	
	
}