/* Fonts */
@font-face {
    font-family: 'raleway-regular-webfont';
    src: url('../fonts/raleway-regular-webfont.eot');
    src: url('../fonts/raleway-regular-webfont.eot?#iefix')format('embedded-opentype'),
         url('../fonts/raleway-regular-webfont.woff2')format('woff2'),
         url('../fonts/raleway-regular-webfont.woff')format('woff'),
         url('../fonts/raleway-regular-webfont.ttf')format('truetype'),
         url('../fonts/raleway-regular-webfont.svg#raleway-regular-webfont')format('svg');
    font-weight:normal;font-style:normal
}
@font-face {
    font-family: 'raleway-bold-webfont';
    src: url('../fonts/raleway-bold-webfont.eot');
    src: url('../fonts/raleway-bold-webfont.eot?#iefix')format('embedded-opentype'),
         url('../fonts/raleway-bold-webfont.woff2')format('woff2'),
         url('../fonts/raleway-bold-webfont.woff')format('woff'),
         url('../fonts/raleway-bold-webfont.ttf')format('truetype'),
         url('../fonts/raleway-bold-webfont.svg#raleway-bold-webfont')format('svg');
    font-weight:700;font-style:normal
}
@font-face {
    font-family: 'raleway-italic-webfont';
    src: url('../fonts/raleway-italic-webfont.eot');
    src: url('../fonts/raleway-italic-webfont.eot?#iefix')format('embedded-opentype'),
         url('../fonts/raleway-italic-webfont.woff2')format('woff2'),
         url('../fonts/raleway-italic-webfont.woff')format('woff'),
         url('../fonts/raleway-italic-webfont.ttf')format('truetype'),
         url('../fonts/raleway-italic-webfont.svg#raleway-italic-webfont')format('svg');
    font-weight:normal;font-style:italic
}
/* Better Font Rendering */
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.raleway-regular-webfont{font-family:'raleway-regular-webfont' !important}

/*Icons */
@font-face{font-family: 'porta'; src: url('../fonts/pluton.eot?49924914'); src: url('../fonts/pluton.eot?49924914#iefix') format('embedded-opentype'), url('../fonts/pluton.woff?49924914') format('woff'), url('../fonts/pluton.ttf?49924914') format('truetype'), url('../fonts/pluton.svg?49924914#porta') format('svg');font-weight:normal;font-style:normal}

[class^="icon-"]:before, [class*=" icon-"]:before{font-family: "porta"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; text-align: center; /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal; text-transform: none;/* fix buttons height, for twitter bootstrap */
  /* you can be more comfortable with increased icons size */
  /*font-size: 120%; */
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.icon-plus:before{content: '\e826'}
.icon-email:before{content: '\e825'}
.icon-cog:before{content: '\e823'}
.icon-ok:before{content: '\e80a'}
.icon-cancel:before{content: '\e80b'}
.icon-calendar:before{content: '\e10b'}
.icon-help-circled:before{content: '\e81a'}
.icon-location:before{content: '\e81b'}
.icon-left-open:before{content: '\e804'}
.icon-right-open:before{content: '\e803'}
.icon-up-open:before{content: '\e805'}
.icon-menu-1:before{content: '\e800'}
.icon-link-ext:before{content: '\e822'}
.icon-menu:before{content: '\e801'}
.icon-mail-alt:before{content: '\e81c'}
.icon-angle-left:before{content: '\e81e'}
.icon-angle-right:before{content: '\e81f'}
.icon-angle-up:before{content: '\e820'}
.icon-angle-down:before{content: '\e821'}
.icon-desktop:before{content: '\e814'}
.icon-mobile:before{content: '\e81d'}
.icon-calendar-empty:before{content: '\e802'}
.icon-github-circled:before{content: '\e811'}
.icon-vimeo-circled:before{content: '\e808'}
.icon-twitter-circled:before{content: '\e807'}
.icon-facebook-circled:before{content: '\e80e'}
.icon-gplus-circled:before{content: '\e80d'}
.icon-pinterest-circled:before{content: '\e809'}
.icon-linkedin-circled:before{content: '\e806'}
.icon-dribbble-circled:before{content: '\e80f'}
.icon-stumbleupon-circled:before{content: '\e810'}
.icon-lastfm-circled:before{content: '\e812'}
.icon-skype-circled:before{content: '\e813'}
.icon-globe:before{content: '\e815'}
.icon-award:before{content: '\e816'}
.icon-user:before{content: '\e818'}
.icon-users:before{content: '\e819'}
.icon-chart-bar:before{content: '\e80c'}
.icon-phone:before{content: '\e824'}
.icon-megaphone:before{content: '\e817'}
/**********************************************************************/
/*
1. General
**********************************************************************/
body {font-family:'raleway-regular-webfont', sans-serif;color:#fff;line-height:1.2em;font-size:17px;line-height:24px}
a {color:#181a1c;text-decoration:none}
a:hover {color:#e0e0e0;text-decoration:none}
h1,h2,h3,h4,h5,h6 {font-weight:normal}
h1 {margin:10px 0}
p {padding:10px 0;font-weight:100;color:#fff}

a:hover.whtlnk  {color:#33afff}
.navbar {background:#181a1c;margin-bottom:0;min-height:70px}
.navbar-fixed-top {min-height:60px;height:60px;padding-top:0}
.navbar .brand img{margin-left:12px}
.navbar-inner {background:#181a1c;border-radius:0;filter:none;border:none;box-shadow:none}
.navbar .brand img {width:196px;height:36px}
.navbar .nav > li > a {text-transform:uppercase;line-height:auto;vertical-align:middle;margin:10px 10px;-webkit-box-shadow:none;-moz-box-shadow:none;border:1px solid #181a1c;box-shadow:none;font-size:15px;text-shadow:none;color:#fff;transition:border-color 1s ease}
.navbar .nav > li:hover> a, .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {border:1px solid #33afff;color:#fff;background-color:#181a1c;transition:border-color 1s ease}
.nav-pills {margin-bottom:30px}
.nav-pills > li > a {background:transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;margin-right:20px;margin-bottom:15px;padding-left:25px;padding-right:25px;border:1px solid #181a1c}
.nav-pills > li > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover, .nav-pills > .active > a:focus {background:#181a1c;color:#fff}
.navbar .btn-navbar:hover, .navbar .btn-navbar {border-radius:0;background:#33afff;color:#000}
.clear{clear:both}
/******
2. Layout
**********************************************************************/
.centered {margin-left:auto;margin-right:auto;float:none;text-align:center}
/* Use this class if you want ceter element with span* class */
.center {float:none !important;margin:0 auto !important;text-align:center}
.highlighted-box {background:#f4f8f9;padding:20px 30px}
.highlighted-box h1 {margin:0px}
.large-text {line-height:1.2em;font-size:30px;color:#181a1c;padding:20px;margin-bottom:20px}
.highlighted-box h1, .highlighted-box p {color:#181a1c !important}
.circle-border {display:inline-block;-webkit-border-radius:500px;-moz-border-radius:500px;border-radius:500px;-khtml-border-radius:500px;border:3px solid #fff}
.left-align {text-align:left}
.right-align {text-align:left}
.error {color:#CF0000;display:none}
.invisible {display:none;visibility:visible}
.triangle {margin:0 auto;text-align:center;width:0;height:0;border-top:30px solid #181a1c;border-left:585px outset transparent;border-right:585px outset transparent;position:relative}
/*
2.1 Animations
**********/
.zoom-in {-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);-o-transform:scale(1, 1);-ms-transform:scale(1, 1);-webkit-transition:all 250ms ease;-moz-transition:all 250ms ease;-o-transition:all 250ms ease;-ms-transition:all 250ms ease;transition:all 250ms ease}
.zoom-in:hover {-webkit-transform:scale(1.1, 1.1);-moz-transform:scale(1.1, 1.1);-o-transform:scale(1.1, 1.1);-ms-transform:scale(1.1, 1.1)}
.web-vid{padding:8px 0;width:100%;height:300px;margin:0}
/*
2.2 Buttons - There are buttons on a transparent background, primary and secondary color background.
**********/
.button, .button:visited, .button:focus {display:inline-block;border:1px solid #181a1c;color:#181a1c;background-color:transparent;padding:15px 30px;font-size:17px;line-height:auto}
.button:hover, .button:active {background-color:#181a1c;color:#fff}
.button-sp, .button-sp:visited, .button-sp:focus {border:none;background-color:#33afff;color:#181a1c}
.button-sp:hover, .button-sp:active {background-color:#181a1c;color:#000}
.button-ps, .button-ps:visited, .button-ps:focus {border:none;background-color:#181a1c;color:#33afff}
.button-ps:hover, .button-ps:active {background-color:#33afff;color:#000}
/*
2.3 Thumbnails - Predefined bootstrap's thumbnail class.
**********/
.thumbnail {width:100%;height:100%;padding:0;overflow:hidden;position:relative;border:0;border-radius:0;box-shadow:none;text-align:center;background:#191a1c}
.thumbnail .more {display:block;z-index:4;position:absolute;top:-100px;left:50%;margin:0 auto;margin-left:-41px;width:80px;height:80px;font-size:40px;color:#fff;text-decoration:none;line-height:70px;text-align:center}
.thumbnail:hover .more {top:40%;margin-top:-40px;-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;-o-transition:all 0.3 s ease-out;-ms-transition:all 0.3s ease-out;transition:all 0.3s ease-out}
.thumbnail h3, .thumbnail p {margin:0;padding:0;position:relative;z-index:4}
.thumbnail h3 {color:#33afff;margin-top:10px;font-size:20px}
.thumbnail > p {padding-bottom:20px}
.thumbnail .mask {opacity:0.85;filter:alpha(opacity=85);top:100%;left:0;width:100%;height:100%;background:#181a1c;position:absolute;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2 s ease-out;-ms-transition:all 0.2s ease-out;transition:all 0.2s ease-out}
.thumbnail:hover .mask {top:0}
/*
2.4 Socail icons
************/
.social {list-style:none;float:none;position:relative;margin:5px;auto;
}
.social li {display:inline-block;line-height:32px;font-family:'Porta';font-size:32px;padding:0 5px}
.social li a {margin:0;padding:0;width:32px;height:32px;color:#33afff}
.social li a:hover {color:#181a1c}
/*
3. Sections 
***************************************************************************/
.section {padding-bottom:70px}
.section .container {padding-top:50px}
.section .title {margin-bottom:25px}
.section .title h2 {font-weight:normal;padding:0;color:#fff;font-size:2.5em}
.section .title > p {font-size:20px;color:#fff;font-weight:lighter}
.primary-section {background:#181a1c}
.primary-section .triangle {border-top:40px solid #33afff}
.primary-section .title {border-bottom:1px solid #fff}
.primary-section, .primary-section .title p, .primary-section h3 {color:#33afff}
.primary-section h1 {color:#fff}
.secondary-section {background:#33afff}
.secondary-section .title {border-bottom:1px solid #181a1c}
.secondary-section h2, .secondary-section .title p {color:#181a1c !important}
/* third section use bacground image */
.third-section {padding-bottom:70px;background:#181a1c url(../images/brand-bg.jpg) no-repeat center;border-top:6px solid #33afff}
.third-section .container {padding-top:20px;position:relative}
.third-section .title {border-bottom:1px solid #a1aab7;color:#33afff}
.sub-section {margin-top:30px}
.sub-section .title {padding:0}
/*******
3.1 Services  
***************************************/
.service {margin-top:20px}
/* .service, .service h2 {padding-top:15px} */
.service p {padding:0px 50px;height:60px}
.service img {width:150px;height:150px}
/*
3.2 Portfolio
***************************************/
.single-project {margin-bottom:30px;background:#181a1c}
.single-project img {width:100%}
.project-description {padding-right:20px}
.project-description p {padding-left:0}
.project-title {margin-top:15px;margin-bottom:15px;border-bottom:1px solid #33afff}
.project-title h3 {float:left;margin-top:0;padding:0;width:80%}
.project-title .close {color:#33afff;margin-top:10px}
.project-info span, .project-title h3 {color:#33afff}
.project-info {font-weight:100;padding:10px 0}
.project-info span {width:80px;display:inline-block}
.project-info div {margin-bottom:5px}
.close {float:right;width:40px;height:40px;text-align:center}
#portfolio-grid .mix {opacity:0;display:none}
/*
3.3 About
******************************************************************/
.team .thumbnail {box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding:10px;border:1px solid #fff}
.team .thumbnail:hover .social {z-index:5}
.team .thumbnail:hover .social a {color:#fff}
.team .thumbnail .mask {background:#33afff}
.team .thumbnail .mask h2 {margin-top:20%}
.team .thumbnail .mask, .team .thumbnail .mask h3, .team .thumbnail .mask p, .team .thumbnail:hover h3, .team .thumbnail:hover .social a:hover {color:#181A17}
.about-text {margin-top:30px}
.about-text p {padding:0;font-size:16px}
/*********************************************************************
                        SKILLS BAR
*********************************************************************/
.skills {list-style-type:none;position:relative;margin:0px}
.skills li {margin-bottom:30px;background:#FFF;height:40px;padding:1px}
.skills li h3 {position:relative;font-size:15px;padding:0;margin:0;left:10px;z-index:1;color:#181a1c}
.skills li .bar {height:40px;position:absolute;background-color:#33afff}
/*
3.4 Clients
**********************************************************************/
.client-slider img {border:1px solid white}
.client-slider img:hover {background-color:#33afff}
.client-nav {list-style:none;margin-top:10px}
.client-nav li {float:left;display:block;margin-left:10px}
.client-nav li a {display:inherit;padding:5px;background:#33afff;border-radius:3px;width:20px;height:20px}
.client-nav li a:hover {background:#181a1c}
.testimonial p {color:#181a1c;background:#fff;padding:15px;margin:0}
.testimonial .arrow {margin-left:10px;width:0;border-top:10px solid #fff;border-left:20px outset transparent;border-right:20px outset transparent}
.testimonial .whopic {display:inline-block}
.testimonial .whopic img {margin-top:10px;width:50px;height:50px;float:left}
.testimonial .whopic strong {float:left;margin-right:10px;padding-left:10px}
.testimonial .whopic small {display:block;font-size:12px}
.testimonial-text {display:block;font-size:22px;text-align:center;margin:0 auto;margin-top:30px;width:70%;line-height:1.3em}
/*
3.5 Price table
******************************************************************/
.price-table {margin-top:70px;margin-bottom:20px}
.price-column {background-color:white;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding-bottom:20px;margin:0 auto;text-align:center}
.price-column h3 {background-color:#181a1c;text-transform:uppercase;text-align:center;color:#33afff;padding:40px 0px;font-size:36px;margin-top:0px;-moz-border-radius:0px;-webkit-border-radius:10px 10px 0px 0px;border-radius:10px 10px 0px 0px}
.price-column .list {list-style:none;margin:20px 50px}
.price-column .list li {font-weight:lighter;color:#747C89;font-size:20px;border-bottom:1px solid #747C89;padding:25px 0px}
.price-column .list li.price {text-align:center;font-size:31px;background-color:white;color:#747c89;margin-top:25px}
.price-text {margin:30px 0 20px;font-size:20px;color:#181a1c;font-weight:normal}
/*
3.6 Newsletter
********************************************************************/
.newsletter, .newsletter h2 {color:#d7ddde}
.newsletter .title h2 {text-align:left;padding:0;margin:0}
.newsletter form {text-align:right}
.newsletter input {margin-top:10px;padding:15px;height:auto}
.newsletter button {margin:0 0 0 20px}
.newsletter .button-sp:hover, .newsletter .button-sp:active {background-color:#FFF;color:#181a1c}
/*
3.7 Contact
********************************************************************/
.contact {background:#33afff}
.contact h1, .contact h2, .contact h3, .contact h4, .contact h5, .contact h6, .contact .section .title > p, .contact .social > li > a {color:#181a1c}
.contact textarea, .contact input[type="text"], .contact input[type="email"] {font-size:1em;padding:10px;line-height:20px;height:auto}
.contact textarea {height:120px}
.contacts, .contact .social {color:#fff;list-style:none;margin-left:10px}
.contacts > li {margin-top:15px}
.contacts > li > a {color:#fff}
.contact-info {margin-top:10px;margin-bottom:10px;padding-top:50px}
.contact-info p {font-weight:normal}
.contact-info .icon {margin:10px auto;font-size:30px}
#map {width:100%;height:555px;margin-top:2em;position:absolute;z-index:1;left:0;top:0;right:0}
.map-wrapper {position:relative;height:500px}
.contact .social {display:inline-block;margin-left:0}
.contact .social li {line-height:32px;padding:10px 10px;font-family:'Porta';font-size:50px;transition:margin 0.4s;-webkit-transition:margin 0.4s}
.contact .social li a {color:#fff}
.contact .social li a:hover {color:#181a1c}
.contact-form {background:#fff;background:rgba(255, 255, 255, 0.9);z-index:110;position:relative;margin-top:5px;padding:20px 20px 0 20px}
.contact-form h3 {color:#838589;padding-bottom:15px}
.message-btn {border:1px solid #747c89;color:#747C89;background-color:transparent;padding:15px 30px;font-size:17px}
.message-btn:hover {background-color:#33afff;color:#000}
.contact-info {text-align:center;font-size:22px}
.info-mail {border:1px solid white;width:60%;margin:0 auto;padding:15px;color:#181a1c}
.black {color:#181a1c}
/*
3.8 Footer
********************************************************************/
.footer {background:#181a1c;text-align:center;padding:1em 0}
.footer > p {color:#fff;margin:0}
.scrollup {text-align:center;cursor:pointer;vertical-align:middle;width:39px;height:39px;border-radius:5px;font-size:20px;position:fixed;z-index:999;bottom:20px;right:10px;border:1px solid #fff;display:none;background:#33afff;opacity:.8}
.scrollup > a {position:relative;top:7px;color:#fff}
.footer a:link{color:#fff}
/*
4 Responsive
********************************************************************/
 @media (min-width:1200px){
.thumbnail .more {margin-left:-41px;width:80px;height:80px;border-radius:40px;line-height:80px}
}
@media (max-width:979px){
body {padding-left:0;padding-right:0}
.navbar-fixed-top, .navbar-fixed-bottom {position:fixed}
.navbar .nav > li > a {line-height:20px;vertical-align:middle}
.section {padding-left:20px;padding-right:20px}
.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {margin-left:0px;margin-right:0px}
.nav-collapse {clear:both}
.nav-collapse .nav {float:none;margin:0 0 10px}
.nav-collapse .nav > li {float:none}
.nav-collapse, .nav-collapse.collapse {width:100%;display:inherit}
.thumbnail .more {margin-left:-21px;width:40px;height:40px;border-radius:30px;line-height:40px}
.thumbnail:hover .more {margin-top:-20px}
.newsletter form {text-align:center}
}
@media (max-width:767px){
h1{font-size:30px}
.info-mail {width:90%;padding:15px 0px}
.project-description {padding-left:20px}
.price-column, .testimonial {margin-top:30px}
.pc-only{display:none}
.contact-form {padding-bottom:20px}
.nav-pills{}
}
/* jQuery lightBox plugin */
#jquery-overlay {position:fixed;top:0;left:0;width:100%}
#jquery-lightbox {position:absolute;top:70px;left:0;width:100%;text-align:center;line-height:0}
#jquery-lightbox a img {border:none}
#lightbox-container-image-box {position:relative;background-color:#fff;margin:0 auto;z-index:200}
#lightbox-container-image {padding:0}
#lightbox-loading {position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0}
#lightbox-nav {position:absolute;top:0;left:0;height:100%;width:100%}
#lightbox-container-image-box > #lightbox-nav {left:0}
#lightbox-container-image-box.loaded {border-bottom:0}
#lightbox-nav a {outline:none}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {width:49%;height:100%;zoom:1;display:block}
#lightbox-nav-btnPrev {left:0;float:left}
#lightbox-nav-btnNext {right:0;float:right}
#lightbox-container-image-data-box {font:12px 'raleway-regular-webfont', sans-serif;background-color:#fff;margin:0 auto;line-height:1.4em;overflow:auto;width:100%;padding:0 10px 0}
#lightbox-container-image-data {padding:0 10px;color:#666}
#lightbox-container-image-data #lightbox-image-details {width:70%;float:left;text-align:left}
#lightbox-image-details-caption {font-weight:bold}
#lightbox-image-details-currentNumber {display:block;clear:left;padding-bottom:1.0em}
#lightbox-secNav-btnClose {width:66px;float:right;padding-bottom:0.7em}
/* BeginOAWidget_Instance_2127022: #gallery */
.lbGallery { /*gallery container settings*/ height:auto;z-index:1;margin:0 1em}
.lbGallery div div a img { /*border color, width and margin for the images*/ border:5px solid #fff;display:block;margin:0 auto}
.lbGallery a:hover img { /*background color on hover*/
border-color:#181a1c;border-left-width:5px;border-top-width:5px;border-right-width:5px;border-bottom-width:5px}
#lightbox-container-image-box {border-top:0px none #fff;border-right:0px none #fff;border-bottom:0px none #fff;border-left:0px none #fff}
#lightbox-container-image-data-box {border-top:0px;border-right:0px none #fff;border-bottom:0px none #fff;border-left:0px none #fff}

/* Cookie thing */
.site-intro{padding-right:1em}
.cc-theme-classic .cc-btn,.cc-floating.cc-theme-classic{border-radius:0 !important}

h3{margin-top:1.5em}
.primary-section .title p{text-align:justify}
video{margin:1em 0}
.span4{text-align:justify}

.contact-form h3{margin-top:0}