@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300|Poppins:400,700);

* {position: relative;outline: 0!important;-moz-box-sizing: border-box;box-sizing: border-box;margin: 0;transition: all ease-in-out .3s;-webkit-transition: all ease-in-out .3s;}
html, body {height: 100%;width: 100%;}
body {font-family: 'Roboto', sans-serif;color: #333333;webkit-tap-highlight-color: #222222;overflow-x: hidden;}
:before, :after {transition: all ease-in-out .3s;-webkit-transition: all ease-in-out .3s;}
::-moz-selection {color: white;text-shadow: none;background: #222222;}
::selection {color: white;text-shadow: none;background: #222222;}
img::selection {color: white;background: transparent;}
img::-moz-selection {color: white;background: transparent;}
hr {border-color: #1ABC9C;border-width: 3px;max-width: 50px;}
hr.light {border-color: white;}
a{-webkit-transition: all 0.35s;-moz-transition: all 0.35s;transition: all 0.35s;color: #1ABC9C;}
a:hover, a:focus {color: #6c6c6c;}
h1, h2, h3, h4, h5, h6 {font-family: 'Poppins', sans-serif;}
h3, h4, h6 {font-weight: 500;color: #555;}
p, ul{font-size:18px;line-height: 1.5;margin-bottom:20px;font-weight:400;color:#333;}
p.template-para::first-letter {font-size: 200%;color: #1ABC9C;}
.justify {text-align: justify;}
.template-section-heading {margin-top: 0;background: rgba(108,184,92,0.8);color: #fff;width: auto;padding: 10px;text-align: left;box-shadow: 0px 10px rgba(0,0,0,0.7);}
.color-default {color: #1ABC9C;}
.template-well {background-color: #ffffff;float: left;margin-bottom: 20px;min-height: 20px;width: 100%;}
.template-list li {list-style: none;font-size: 18px;line-height: 27px;font-weight: 300;}
.template-list li:before {content: "\f00c";font-family: FontAwesome;font-style: normal;font-weight: normal;text-decoration: inherit;color: #1ABC9C;margin-right: 10px;}
.template-space {min-height: 20px;}
.bg-primary {background-color: #1ABC9C;}
.bg-dark {background-color: #222222;color: white;}
.text-faded {color: rgba(255, 255, 255, 0.7);}
.text-primary {color: #1ABC9C;}
.text-white {color: #ffffff;}
.text-dark {color: #333333;}
section, aside {padding: 50px 0;}
.section-heading:after {content: "";position: absolute;bottom: 0;left: 1px;width: 35px;height: 3px;background: #1ABC9C;}
.text-white.section-heading:after {content: "";position: absolute;bottom: 0;left: 1px;width: 35px;height: 3px;background: #ffffff;}
.affix-top {position: absolute;}
.no-padding {padding: 0;}
#contactForm {margin: 0 -15px;}

/* margin classes */
.margin-0{margin: 0px;}
.margin-10{margin: 10px 0;}
.margin-top-20{margin-top: 20px;}
.margin-top-50 {margin-top: 50px;}

.margin-bottom-20{margin-bottom:20px;}
.margin-bottom-30{margin-bottom:30px;}
.margin-bottom-40{margin-bottom:40px;}
.margin-bottom-50{margin-bottom:50px;}


/*dark theme*/
.dark-bg{position: relative;width:100%;min-height:auto;background:#000;color:white;}
.light-bg {background:#fbfbfb none repeat scroll 0 0;box-shadow: 0 0 5px 0 #dddddd;}
.theme-bg {background:#1ABC9C;padding:40px 0 42px;}
.section-heading {margin-top: 0;font-weight: 400;padding-bottom: 10px;color: #555;}
.hidden {display: none;}
.fixed-right-bottom {min-width: 200px;}

/*================================================ 5. Navigation + Logo CSS ================================================*/
nav.affix-top a.logo-color {display: none;transition: all 0.35s;}
nav.affix a.logo-white {display: none;transition: all 0.35s;}
nav.affix .template-info {display: none;transition: all 0.35s;}
.navbar-default {background-color: white;border-color: rgba(34, 34, 34, 0.05);font-family: 'Roboto', sans-serif;-webkit-transition: all 0.35s;-moz-transition: all 0.35s;transition: all 0.35s;}
.navbar-default i.fa {padding-right: 3px;font-size: 13px;font-weight: normal;}
.navbar-default .navbar-header .navbar-brand{color: #1ABC9C;font-family: 'Poppins', sans-serif;font-weight: 700;text-transform: uppercase;}
.navbar-default .navbar-header .navbar-brand:hover, .navbar-default .navbar-header .navbar-brand:focus {color: #6c6c6c;}
.navbar-default .navbar-header .navbar-toggle {font-weight: 700;font-size: 12px;color: #222222;text-transform: uppercase;}
.navbar-default .nav > li > a, .navbar-default .nav > li > a:focus{text-transform: uppercase;font-weight:400;font-size:15px;color:#222;}
.navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:focus:hover {color: #1ABC9C;}
.navbar-default .nav > li.active > a, .navbar-default .nav > li.active > a:focus {color: #ffffff;background-color: transparent;}
.navbar-default.affix .nav > li.active > a, .navbar-default.affix .nav > li.active > a:focus {color: #1ABC9C !important;background-color: transparent;}
.navbar-default .nav > li.active > a:hover, .navbar-default .nav > li.active > a:focus:hover {background-color: transparent;}
.navbar-right {margin-right: 0px;}

/* ================================================ 6. Header CSS ================================================*/
header{position: relative;width: 100%;min-height: auto;-webkit-background-size: cover;-moz-background-size:cover;background-size: cover;-o-background-size: cover;background-position: center;background:#25357c;text-align: center;color: white;}
header .header-content {position: relative;text-align: center;padding: 100px 0;width: 100%;}
header .header-content hr {margin: 30px auto;}
header .header-content p {color: #fff;font-size: 16px;margin-bottom: 20px;letter-spacing: 1pt;}
header .header-content h1 {font-size: 30px;padding: 20px 0;color: rgba(255,255,255,1);text-transform: none;letter-spacing: 0.5px;text-align: left;}
header .header-content h1:after {content: "";position: absolute;bottom: 0;left: 1px;width: 50px;height: 2px;background: #ffffff;}
header .header-content h1 span {font-size: 40px;font-weight: 700;}
header .header-content p {font-size: 18px;text-align: left;margin-top: 20px;}
.banner-bar .banner-bar-one {background-color: #045444;text-align: center;padding: 10px 0;}
.banner-bar .banner-bar-two {background-color: #137f6a;text-align: center;padding: 10px 0;}
.banner-bar .banner-bar-three {background-color: #16a287;text-align: center;padding: 10px 0;}
.banner-bar h3 {text-align: center;color: #ffffff;margin: 10px auto;font-weight: 200;}
.banner-bar h3 span {font-weight: 700;}
.banner-info {margin-top: 39px;}

/* ================================================ 7. Who I AM (About us) CSS ================================================*/
.profile-box {padding: 10px 10px 10px 0;}
.profile-box img {padding: 10px;border: 1px solid #1ABC9C;}
.profile-box h4 {color: #333;font-weight: 400;margin: 10px 0;}
.profile-box h4 span {color: #1ABC9C;font-weight: 800;}
.goto-myworks {text-align: center;padding: 50px 0 16px 0;}
.goto-myworks .template-button {float: none;}

/* ================================================ 8. My Services CSS ================================================*/
section#services{padding:50px 0 33px;}
.service-box {margin:13px 0 20px;}
.service-box h3 {font-weight: 700;color: #1ABC9C;}
.service-box p {margin-bottom: 0;color: #333;}
.service-box img {margin-bottom: 5px;}

/*
================================================
9. My Works /Portfolio CSS
================================================
*/
section#portfolio{
padding:50px 0 35px;
}
.portfolio-box {
margin-bottom: 20px;
}
.myworks-content {
padding: 5px 0 0 15px;
}
#gal {
position: relative;
height: 300px;
margin: 0 auto;
background: white;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#gal ul {
list-style-type: none;
}
input[type="radio"] {
position: absolute;
left: 0;
display: block;
width: 40px;
height: 75px;
border: 0;
outline: none;
cursor: pointer;
opacity: 0;
z-index: 9;
}
input[value="one"] {
top: 0;
}
input[value="two"] {
top: 75px;
}
input[value="three"] {
top: 150px;
}
input[value="four"] {
top: 225px;
}
input[type="radio"] + label {
position: absolute;
left: 0;
width: 40px;
height: 75px;
background: #333;
z-index: 7;
-webkit-transition: left .1s, width .1s;
-moz-transition: left .1s, width .1s;
-ms-transition: left .1s, width .1s;
-o-transition: left .1s, width .1s;
transition: left .1s, width .1s;
}
input[value="one"] + label {
top: 0;
}
input[value="two"] + label {
top: 75px;
}
input[value="three"] + label {
top: 150px;
}
input[value="four"] + label {
top: 225px;
}
[class*="entypo-"]:before {
position: absolute;
font-family: FontAwesome;
content: "\f105";
}
label[class*="entypo-"]:before {
top: 25px;
left: 15px;
font-size: 22px;
color: white;
}
a[class*="entypo-"]:before {
top: 3px;
left: 3px;
font-size: 22px;
color: #333;
}
a:hover[class*="entypo-"]:before {
color: tomato;
}
figure, figure img, figcaption {
position: absolute;
top: 0;
right: 0;
}
figure {
bottom: 0;
left: 0;
height: 300px;
display: block;
overflow: hidden;
}
figure img {
bottom: 0;
left: 0;
display: block;
width: 600px;
height: 300px;
-webkit-transform: translateX(600px);
-moz-transform: translateX(600px);
-ms-transform: translateX(600px);
-o-transform: translateX(600px);
transform: translateX(600px);
-webkit-transition: all .15s;
-moz-transition: all .15s;
-o-transition: all .15s;
transition: all .15s;
}
figcaption {
display: block;
width: 300px;
height: 300px;
padding-top: 100px;
background: transparent;
text-align: right;
z-index: 1;
-webkit-transform: translateX(300px);
-moz-transform: translateX(300px);
-ms-transform: translateX(300px);
-o-transform: translateX(300px);
transform: translateX(300px);
-webkit-transition: all .25s;
-moz-transition: all .25s;
-o-transition: all .25s;
transition: all .25s;
}
figcaption nav ul {
display: inline-block;
padding: 3px 15px;
background: white;
}
figcaption nav ul li {
display: inline-block;
margin-left: 5px;
}
figcaption nav ul li a {
position: relative;
display: block;
width: 30px;
height: 30px;
text-decoration: none;
color: white;
}
figcaption p {
display: inline-block;
padding: 5px 15px;
background: white;
font-family: 'roboto', sans-serif;
font-weight: 300;
color: #333;
}
figcaption h4 {
color: #fff;
background: #1ABC9C;
padding: 10px;
display: inline-block;
}
input[type="radio"]:checked + label {
width: 75px;
background: #1ABC9C;
}
input[type="radio"]:checked + label:before {
font-size: 22px;
top: 20px;
left: 34px;
}
input[type="radio"]:checked ~ figure img {
-webkit-transform: translatex(0px);
-moz-transform: translatex(0px);
-ms-transform: translatex(0px);
-o-transform: translatex(0px);
transform: translatex(0px);
}
input[type="radio"]:checked ~ figure figcaption {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
z-index: 8;
}
.call-to-action h2 {
margin: 0 auto 20px;
}

/* ================================================ 12. Contact Us CSS ================================================*/
#contact{background:#f9f9f9;}
img.template-contact-icon{width: 50px;float: left;margin-right: 15px;}
.template-form .form-control:focus {outline: 0;border-color: #1ABC9C;-webkit-box-shadow: 0 0 #fff;box-shadow: 0 0 #fff;border-radius: 0;}
.template-form .form-control {display: block;width: 100%;padding: 0 0 0 10px;font-size: 16px;line-height: 42px;color: #555;background-color: #fff;background-image: none;border: 1px solid #f1f1f1;border-radius: 0px;margin-bottom: 15px;height:42px;-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;}
.template-form textarea.form-control {padding: 5px 20px 20px 10px;height: 100px;}
.template-submit {font-size: 15px;border: 0px solid #fff;padding: 10px 20px;background: rgba(26,188,156,0.8);color: #fff;border-radius: 0;font-weight: 300;margin-bottom: 15px;}
.template-submit:hover {background: rgba(26,188,156,0.8);}

/*================================================ 13. Footer CSS ================================================*/
section#contact{padding:49px 0 40px;}
footer .container {padding: 15px 0px;}
footer .container p {margin: 0px;font-size: 12px;}
.contact-social a {display: inline-block;float: none;margin: 0 0 0 10px;font-size: 16px;}

/*================================================ 14. Buttons CSS ================================================*/
.btn-default {color: #222222;background-color: white;border-color: white;-webkit-transition: all 0.35s;-moz-transition: all 0.35s;transition: all 0.35s;}
.btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {color: #222222;background-color: #f2f2f2;border-color: #ededed;}
.btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {background-image: none;}
.btn-default.disabled, .btn-default[disabled], fieldset[disabled] .btn-default, .btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover, .btn-default.disabled:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default:focus, .btn-default.disabled.focus, .btn-default[disabled].focus, fieldset[disabled] .btn-default.focus, .btn-default.disabled:active, .btn-default[disabled]:active, fieldset[disabled] .btn-default:active, .btn-default.disabled.active, .btn-default[disabled].active, fieldset[disabled] .btn-default.active {background-color: white;border-color: white;}
.btn-default .badge {color: white;background-color: #222222;}
.btn-primary {color: white;background-color: #1ABC9C;border-color: #1ABC9C;-webkit-transition: all 0.35s;-moz-transition: all 0.35s;transition: all 0.35s;}
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {color: white;background-color: #6c6c6c;border-color: #6c6c6c;}
.btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {background-image: none;}
.btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled.focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary.focus, .btn-primary.disabled:active, .btn-primary[disabled]:active, fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary.active {background-color: #1ABC9C;border-color: #1ABC9C;}
.btn-primary .badge {color: #1ABC9C;background-color: white;}
.btn {font-family: 'roboto', sans-serif;border: none;font-weight: 400;text-transform: uppercase;}
.btn-xl {padding: 15px 30px;}
.template-button{font-size: 18px;padding: 12px 38px;color:#fff;font-weight:400;background:#3e57c4;border-radius: 40px;font-family: 'roboto', sans-serif;text-transform: uppercase;letter-spacing: 1pt;float: left;}
.template-button:hover, .template-button:focus, .template-button:active {text-decoration: none;color: #fff;}

/* ================================================ 16. Keyframes  ================================================*/
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

/* ================================================ 17. Responsive Design CSS ================================================*/

@media (max-width: 767px)
{
.template-form .form-control {padding: inherit;}
div.banner-info {margin: 20px 0 0;}
[class*="banner-bar-"] {margin:0;}
.fixed-right-bottom {bottom: 10px;left: 10px;min-width: 90%;position: fixed;z-index: 9999;}
.navbar-toggle {border: 0px;margin: 10px 20px;padding: 0px;background-color: #fff;}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus{background: #fff;}
.navbar-default .nav > li.active > a, .navbar-default .nav > li.active > a:focus{color:#1abc9c;}
img.template-contact-icon {margin-right: 10px;width: 25px;}
.template-button {float: none;}
.template-space {min-height: 20px;}
section#blog .template-space, section#contact .template-space {min-height: 0px;}
nav.affix-top a.logo-color {display: block;transition: all 0.35s;}
nav.affix a.logo-white, nav.affix-top a.logo-white {display: none;transition: all 0.35s;}
.template-list {margin: 0 auto;}
.template-float-right, .template-info li{border-right: 0px;text-align: center;float: none;}
.text-center img {margin: 0 auto;}
.affix-top {background-color: #ffffff;position: absolute;}
.text-right, .text-left {text-align: center;}
#quote-carousel {padding: 0;}
#quote-carousel .carousel-indicators {position: relative;}
#quote-carousel p {font-size: 16px;line-height: 1.2;margin-bottom: 20px;font-weight: 300;}
#quote-carousel .carousel-control {display: none;}
.section-heading {font-size: 25px;}
.purchase-button {margin-top: 20px;}
.service-box:last-child {margin-bottom: 0px;}
header .header-content{padding: 130px 0 65px;}
.aside-cta{padding: 40px 0 60px;}
.skill-box {margin-top: 20px;}
.article-box {margin: 20px 0 0 0;}
.article-box:first {margin: 0;}
section#services {padding: 50px 0 48px;}
}

@media (min-width: 768px) and (max-width: 991px)
{
.navbar-header {width:100%;}
.affix .navbar-header {display:none;transition: all ease-in-out .3s;}
.affix .navbar-collapse ul {margin:0;}
.affix .navbar-nav > li > a {padding: 10px 20px 5px 0;margin-bottom: 8px;}
.collapse .navbar-right {float:left !important;margin:8px 0 6px;}
.navbar-toggle {border: 0px;margin: 10px 20px;padding: 0px;background-color: transparent;}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {background: transparent;}
#gal {width: 600px;}
.banner-info {margin-top: 0;}
.banner-image-info {padding: 30px 0 0;}
.banner-bar h3 {font-size: 18px;}
header .header-content{padding:80px 0 0;}
.purchase-button {margin: 15px 0 0;}
.profile-box {padding: 10px 10px 0;}
.section-heading.one {clear: both;float: left;margin: 30px 0 20px;width: 100%;}
section#portfolio {padding: 50px 0 45px;}
}

@media (min-width: 768px)
{
.navbar-nav > li > a {padding: 10px 20px 5px 0;}
.navbar-nav > li {margin-right: 10px;}
.navbar-default {background-color: transparent;padding:10px 0 0 0;}
.navbar-default .navbar-header .navbar-brand {color: rgba(255, 255, 255, 0.7);}
.navbar-default .navbar-header .navbar-brand:hover, .navbar-default .navbar-header .navbar-brand:focus {color: white;}
.navbar-default .nav > li > a, .navbar-default .nav > li > a:focus {color: rgba(255, 255, 255, 0.7);font-weight: 400;}
.navbar-default .nav > li > a {position: relative;letter-spacing: 0.5pt;}
.navbar-default .nav > li.active > a:after {content: "";position: absolute;bottom: 0;left: 1px;width: 20px;height: 2px;background: #ffffff;}
.navbar-default.affix .nav > li.active > a:after {content: "";position: absolute;bottom: 0;left: 1px;width: 20px;height: 2px;background: #1ABC9C;}
.navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:focus:hover {color: white;}
.navbar-default.affix {background-color: rgba(255,255,255,1);border-color: rgba(34, 34, 34, 0.05);}
.navbar-default.affix .navbar-header .navbar-brand {color: #1ABC9C;font-size: 14px;}
.navbar-default.affix .navbar-header .navbar-brand:hover, .navbar-default.affix .navbar-header .navbar-brand:focus {color: #6c6c6c;}
.navbar-default.affix .nav > li > a, .navbar-default.affix .nav > li > a:focus {color: #000000;}
.navbar-default.affix .nav > li > a:hover, .navbar-default.affix .nav > li > a:focus:hover {color: #1ABC9C;}
header .header-content {padding: 100px 0 0;position: relative;}
.skill-box {padding:0 20px;}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {font-size: 16px;}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {font-size: 22px;}
}