/*------------------------------------------------------------------
[Master Stylesheet]

Author: AtypicalThemes
Template: Nixo - Creative Agency OnePage.
Version:	1.0
Last change:	07/01/2017

This file contains the styling for the actual theme, this
is the file you need to edit to change the look of the
theme.

-------------------------------------------------------------------
Table of contents

    I.General
    II.Page Prealoader
    III.Header & Navigation
    IV.Hero Section
    V.About Section
    VI.Services Section 1
    VII.Team Section
    VIII.Services Section 2
    IX.Portfolio Section
    X.Pricing Section
    XI.Contact Section
    XII.Footer
    XIII.404 Page
-------------------------------------------------------------------
[Color codes]

Background:	#FFFFFF (white)
Content:	#33333 (dark grey)
Footer:		#F0F0F0 (light grey)

a (standard):	#777 (light grey)
a (hover): #000 (black)
a (visited):	#999(light grey)
a (active):	#999 (light grey)

a (portfolio caption): #3498DB (light blue)

[Color Styles]

Default (black): #333
Turquoise: #1ABC9C
Blue: #3498DB
Red: #E74C3C
Green: #27AE60
Gold: #F39C12
Purple: #8E44AD
Indigo: #34495E
-------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Droid+Sans|Raleway'); /* Raleway & Droid Sans Fonts */

/* -KEYFRAMES- */
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}

/* --------------------------- /////////// I. GENERAL /////////// --------------------------- */
/* -Link Styling- */
a {
    color: #777;
    font-family: Raleway;
	text-decoration: none;
}
a:visited {
    color: #999;
    text-decoration: none;
}
a:hover {
    color: #000;
	text-decoration: none;
}
a:active {
    color: #999;
    text-decoration: none;
}
a:focus {
    color: #999;
    text-decoration: none;
}
/* -Resets- */
html, body { 
    color: #333;
    font-size: 16px;
    line-height: 1.5rem; /* 24px */
    max-width: 100%;
	overflow-x: hidden;
}
/* -Text Styling */
h1,h2,h3,h4,h5,h6 {
	font-family: Raleway, sans-serif;
}
h1 {
    font-size: 2.25rem; /* 36px */
} 
h2 {
    font-size: 1.75rem; /* 28px */
}
h3 {
    font-size: 1.5rem; /* 24px */
}
p {
    font-family: Droid Sans, sans-serif;
    font-size: 0.9375rem; /* 15px */
}
.heading {
	margin-bottom: 5px;
}
.strong {
    font-weight: 700;
}
.subtle {
	color: #777;
}
.text-center {
	text-align: center;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}
ul {
    list-style-type: none;
}
/* -Section Headings- */
.section-heading {
    margin-bottom: 1em;
    padding: 0 25% 0 25%;
}
/* -Margins and Floats- */
.floated-left {
     float: left;
}
.floated-right {
    float: right;
}
.inline {
	display: inline;
}
.offset {
	margin-left: 10px;
}
.tiny-margin {
    margin-bottom: 1.5em /* 24px */
}
.small-margin {
	margin-bottom: 3em; /* 48px */
}
.medium-margin {
	margin-bottom: 6em; /* 100px */
}
.large-margin {
	margin-bottom: 12em; /* 192px */
}
/* -<hr>- */
hr {
    border-top: 1px solid #DDD;
	width: 100%;
	margin: 20px 0 20px 0;
}
.hr-left {
    border-top: 1px solid #DDD;
	display: inline-block;
    height: 1px;
	width: 20%;
	margin-right: 15px;
	margin-bottom: 10px;
}
.hr-right {
    border-top: 1px solid #DDD;
	display: inline-block;
    height: 1px;
	width: 20%;
	margin-left: 15px;
	margin-bottom: 10px;
}
.hr-dots {
	margin-top: 5px;
}
/* Underlines */
.short-hr-center::after {
    border-top: 1px solid #333;
    content: "";
    display: block;
    height: 1px;
    width: 35px;
    margin: 14px auto 14px auto;
}
.short-hr-left::after {
    border-top: 1px solid #333;
	content: "";
	display: block;
	height: 1px;
	width: 45px;
	margin: 10px auto 10px 0;
}
/* General input fields */
input {
    height: 45px;
    padding-left: 10px;
    border: 1px solid #D4D4D4 !important;
}
input:focus {
    border: 1px solid #333;
    outline: none;
}
textarea {
    height: 150px;
	width: 100%;
    max-width: 100%;
	padding-top: 10px;
	padding-left: 10px;
    border: 1px solid #D4D4D4 !important;
}
textarea:focus {
    border: 1px solid #333;
    outline: none;
}
/* -General Button Styles */
.button {
    border: 1px solid #2B2B2B;
	background: #FFF;
	display: block;
    font-family: Droid Sans, sans-serif;
	font-weight: bold;
	height: 40px;
    width: 160px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	margin-bottom: 20px;
    outline: none;
	transition: all 0.3s ease;
}
.button:hover {
	background: #2B2B2B;
	color: #FFF;
}
/* --------------------------- /////////// II. PAGE PRELOADER /////////// --------------------------- */
/* -Loading Screen- */
#loader-wrapper {
    background: #FFF;
    height: 100%;
    width: 100%;
    left: 0;
    position: fixed;
    top: 0;
    z-index: 1000;
}
/* -Loading Icon- */
#loader {
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    border: 3px solid transparent;
    border-radius: 50%;
    border-top-color: #808080; /* color of the outermost ring */
    display: block;
    height: 100px;
    width: 100px;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -50px;
    position: relative;
    z-index: 1001;
}
#loader:before {
    -webkit-animation: spin 2.5s linear infinite;
    animation: spin 2.5s linear infinite;
    border: 3px solid transparent;
    border-top-color: #505050; /* color of the middle ring */
    border-radius: 50%;
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
}
#loader:after {
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
    border: 3px solid transparent;
    border-top-color: #202020; /* color of the inner ring */
    border-radius: 50%;
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
}
/* -Loading Screen Animation- */
.loaded {
    -moz-transform: translate3d(-100%, 0px, 0px);
    -webkit-transform: translate3d(-100%, 0px, 0px);
    -o-transform: translate(-100%, 0px);
    -ms-transform: translate(-100%, 0px);
    transform: translate3d(-100%, 0px, 0px);
    -webkit-transition: all 500ms linear; 
    transition: all 500ms linear;
}
/* --------------------------- /////////// III. HEADER & NAVIGATION /////////// --------------------------- */
/* -Navbar Syling- */
#main-navbar{
	background-color: rgba(0,0,0,0.5); /* navbar background gradient */
	border: none;
	transition: .4s ease;
    z-index: 900;
	padding-bottom: 10px;
}
#main-navbar:hover {
	background-color: rgba(0,0,0,0.7); /* navbar backgroubd gradient on hover */
}
.navbar-default .navbar-nav>li>a>p {
    font-family: Raleway, sans-serif;
    font-size: 1.125rem; /* 18px */
    padding-top: 10px;
}
.navbar-default .navbar-nav>li>a { /* nav link color */
	color: #FFF;
}
.navbar-default .navbar-nav>li>a:hover { /* hovered nav link color */
	color: #FFF;
}
.navbar-default .navbar-nav>li>a:focus{ /* active nav link color */
	color: #FFF;
}
.navbar-default .navbar-brand  {  /* logo */
	color: #FFF;
    padding: 10px 0 10px 0;
    height: auto;
    max-height: 100px;
}
.navbar-default .navbar-brand:visited {
    color: #FFF;
}
.navbar-default .navbar-toggle .icon-bar { 
	background-color: #fff; /* menu button bars color */
}
.navbar-default .navbar-toggle { /* menu button for mobile */
    border: 1px solid #F9F9F9;
    border-radius: 1px;
    margin-top: 0px;
	padding: 13px 10px;
}
.navbar-default .navbar-toggle:hover {  
    background: #F9F9F9; /* menu button hover color */
}
.navbar-default .navbar-toggle:focus {
    background: #F9F9F9; /* menu button active color */
}
/* -Nav Links Hover Effect- */
.hover-effect {
	display: inline-block;
}
.hover-effect:after {
    background: transparent;
    content: '';
    display: block;
    height: 2px;
    width: 0;
    margin-top: -5px;
    transition: width .5s ease, background-color .5s ease;
}
.hover-effect:hover:after {
    background: #FFF; /* underline bar color */
    width: 100%;
}
/* --------------------------- /////////// IV. HERO SECTION /////////// --------------------------- */
/* -Hero Image- */
.hero-unit {
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(../images/hero.jpg);
    background-size: cover;
    background-position: center;
    height: auto;
}
/* -Hero Image Caption- */
.hero-caption {
    color: #FFF;
	text-shadow: none; 
    border: 1px solid #FFF;
    padding: 20px;
    width: 60%;
    margin: 20% auto;
    background-color: rgba(0, 0, 0, 0.50);
}
.hero-tags {
    font-family: Raleway, sans-serif;
    font-size: 1.125rem; /* 18px */
}
.tagline {
    font-size: 3.5rem; /* 56px */
}
/* --------------------------- /////////// V. ABOUT SECTION /////////// --------------------------- */

/* --------------------------- /////////// VI. SERVICES SECTION 1 /////////// --------------------------- */
.content-block {
    margin-bottom: 4em;
    padding: 0 0.5em 0 0.5em;
}
.content-block h2 {
    font-size: 1.5rem; /* 28px */;
}
.content-block i {
    background: #F9F9F9;
    border-radius: 1px;
    display: inline-block;
    color: #333;
    float: left;
    margin-top: 10px;
    margin-right: 20px;
	padding: 25px;
	transition: 0.3s ease;
}
.content-block i.align-right{
    background: #F9F9F9;
    border-radius: 1px;
    display: inline-block;
    color: #333;
    float: right;
    margin-top: 10px;
    margin-left: 20px;
	padding: 25px;
	transition: 0.3s ease;      
}
/* --------------------------- /////////// VII. TEAM SECTION /////////// --------------------------- */
.teammember-name {
    font-family: Raleway, sans-serif;
    font-size: 1.5rem; /* 24px */
}
.teammember-photo { 
    border-radius: 1px;
    display: inline-block; 
    position: relative; 
}
.teammember-photo > img {
    opacity: 1;
    -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;
    -webkit-transform: scale3d(1,1,1);
}
.teammember-caption-wrapper {
    height: 100%;
    opacity: 0;
    padding: 40% 20px;
    position: absolute; 
    top: 0;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition:    all 0.4s ease-in-out;
    -ms-transition:     all 0.4s ease-in-out;
    -o-transition:      all 0.4s ease-in-out;
}
.teammember-photo:hover img {
    opacity: 0.4;   
}
.teammember-photo:hover .teammember-caption-wrapper {
    opacity: 1;
}
.teammember-social-links {
    padding: 0;
}
.teammember-social-links li {
    display: inline;
}
.teammember-social-links a {
    color: #666; /* teammember social link color */
    margin-left: 5px;
    -webkit-transition: all 0.2s ease;
    -moz-transition:    all 0.2s ease;
    -ms-transition:     all 0.2s ease;
    -o-transition:      all 0.2s ease;
}
.teammember-social-links a:hover {
    color: #333; /* teammember social link color on hover */
}
/* - Skills - */
#skills-text {
    padding: 0 3% 0 3%;
}
.skills{
    color: #FFF;
	width: 100%;	
}
.skills .skillbar {
    background-color: #DDD;
	box-sizing: border-box;
	width: auto;
    margin-bottom: 20px;
	position: relative;
}
.skills .count-bar {
    background-color: #333;
    height: 3px; /* skillbar height */
	width: 0px;
	position: relative;
}
.skills .title {
    color: #333;
    font-family: Raleway, sans-serif;
	font-size: 16px;
	font-weight: bold;
    line-height: 32px;
	padding-left: 5px;
	text-transform: uppercase;
}
.skills .count {
    color: #333;
    font-size: 14px;
	font-weight: bolder;
    line-height: 12px;
	position: absolute;
	top: -20px;
	right: 12px;   
}
/* --------------------------- /////////// VIII. SERVICES SECTION 2 /////////// --------------------------- */
/* -Main Services- */
.card {
    border: 1px solid #F0F0F0;
    border-radius: 1px;
    height: 265px;
    padding-top: 40px;
    width: 260px;
    overflow: hidden;
}
.card-icon {
    background: #F9F9F9;
    border-radius: 1px;
    color: #333;
    padding: 30px;
    margin-top: 20px;
    -webkit-transition: all 0.4s ease;
	-moz-transition:    all 0.3s ease-in-out;
    -ms-transition:     all 0.3s ease-in-out;
	-o-transition:      all 0.3s ease-in-out;
}
.card-title {
    font-size: 1.250rem; /* 20px */
    margin-top: 20px;
}
.card-text {
    opacity: 0;
    -webkit-transition: all 0.3s ease-in;
	-moz-transition:    all 0.3s ease-in;
    -ms-transition:     all 0.3s ease-in;
	-o-transition:      all 0.3s ease-in;
}
.card:hover {
    border: 1px solid #dedede;
}
.card:hover .card-icon {
    margin-top: -10px;
    padding: 10px;
}
.card:hover .card-text {
    margin-top: 0;
    opacity: 1;
}
/* -Additional Services- */
.add-service-icon {
    color: #333;
    float: left;
    margin-top: 0px;
    margin-right: 8%;
    padding-left: 5%;
    padding-bottom: 100px;
}
.add-service-name {
    font-family: Raleway, sans-serif;
    font-size: 1.125rem; /* 18px */
    margin-top: 10px;
}
/* ### Newsletter ### */
#newsletter {
    background: #F0F0F0;
    padding: 50px;
}
#newsletter input {
    width: 70%;
    margin-top: 20px;
    margin-bottom: 0;
}
#newsletter button {
    display: inline;
    margin-top: 20px;
    margin-bottom: 0;
    height: 45px;
}
#newsletter h1 {
    font-size: 1.5rem; /* 28px */
}
/* --------------------------- /////////// IX. PORTFOLIO SECTION /////////// --------------------------- */
/* -Portfolio Filter- */
.portfolio-tags li {
    display: inline;
    margin-right: 10px;
    font-size: 1.125rem;
}
.portfolio-tags {
    text-align: center;
    margin-bottom: 3%;
}
/* -Portfolio Projects- */
.grid-item {
    display: inline-block;
    padding: 0 10px 0 10px;
    margin-bottom: 20px;
}
.lb-caption a {
    color: #3498DB;
}
.lb-caption a:hover {
    color: #2980B9;
}
.caption > img {
    opacity: 1;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition:    all 0.4s ease-in-out;
    -ms-transition:     all 0.4s ease-in-out;
    -o-transition:      all 0.4s ease-in-out;
    -webkit-transform: scale3d(1,1,1); /* Prevents img shaking on hover */
}
.caption:hover img {
    opacity: 0.1; 
}
.caption_title {
    height: 100%;
    overflow: hidden;
    position: absolute;
    padding: 0 10px 0 10px;
    text-align: center;
    top: 0;
    left: 0;
    width: 100%; 
}
.caption_heading {
    color: #000;
    font-weight: bold;
	margin-top: 10%;
	margin-left: -150px;
    opacity: 0;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition:    all 0.4s ease-in-out;
    -ms-transition:     all 0.4s ease-in-out;
	-o-transition:      all 0.4s ease-in-out;
}
.caption:hover .caption_heading {
    margin-left: 0;    
    opacity: 1;
}
.caption-text {
    color: #000;
	margin-top: 0;
    margin-left: 150px;
    opacity: 0;
	-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;
    width: 80%;  
}
.tag {
    background: #FFF;
    color: #000;
    opacity: 0;
    padding: 3px 6px 3px 6px;
    display: inline;
	-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;
}
.caption:hover .caption-text {
    margin-left: 10%;
    opacity: 1;
}
.caption:hover .tag{
    opacity: 1;
}
/* --------------------------- /////////// X. PRICING SECTION /////////// --------------------------- */
.panel {
    width: 100%;
    margin: 10% auto;
    border-radius: 1px;
}
.panel hr {
    margin: 10px 0 10px 0;
}
.panel-body {
    padding: 20px 25px 20px 25px;
}
.panel-body ul {
    padding: 0;
}
.panel.special-offer {
    border: 1px solid #1ABC9C;
}
.panel-default > .panel-heading {
    background: #FFF;
    color: #333;
    border-bottom: none;
}
.panel-footer {
    background: #fff;
    border: none;
}
.price-number {
    font-size: 3rem;
}
.price {
    margin-top: 20px;
}
/* -Testimonials - */
#carousel-testimonials .item {
    min-height: 280px;
    max-height: 100%;
}
/* -Testimonial Portrait- */
.testimonial-img {
    border-radius: 50%;
    height: auto;
    width: 15%;
    position: relative;
    left: 50%;
    top: 0;
}
/* -Testimonial Person Name- */
.testimonial-name-wrapper {
    position: absolute;
    padding-top: 15px;
    left: 68%; 
}
.testimonial-name {
    font-family: Raleway, sans-serif;
    font-size: 1.125rem; /* 18px */
    margin-bottom: 5px;
}
.testimonial {
    font-family: Raleway, sans-serif;
    font-size: 1.125rem; /* 18px */
    font-style: italic;
    line-height: 1.5em; /* 24px */
    padding: 10px 0 10px 0;
}
/* -Left Arrow */
.control-left {
    display: inline-block;
    position: absolute;
    top: 50%;
}
/* -Right Arrow- */
.control-right {
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 0;
}
.control {
    color: #D4D4D4;
    z-index: 5;
}
.control:hover {
    color: #333;
}
/* -Custommer logos- */
#custommer-logos-wrapper {
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    padding: 20px 0 20px 0;
    text-align: center;
}
#custommer-logos-wrapper li {
    display: inline-block;
    padding: 0 20px 0 20px;
    opacity: 0.6;
}
#custommer-logos-wrapper li:hover {
    opacity: 1;
}
#custommer-logos-wrapper ul {
    margin-bottom: 0;
}
/* -Brand Logo- */
.brand {
    height: auto;
	margin: auto;
    max-height: 100px;
    width: 100%; /* Adjust size of the logo */
}
/* --------------------------- /////////// XI. CONTACT SECTION /////////// --------------------------- */
#contact-section input {
    height: 45px;
    width: 100%;
	margin-top: 20px;
	padding-left: 10px;
}
.icon-contact {
    border: 1px solid #4B4B4B;
    border-radius: 1px;
    color: #4B4B4B;
	display: inline-block;
    font-size: 2rem;
	padding: 10px;
	vertical-align: middle;
}
#map-canvas {
    border: 1px solid #D8D8D8;
    height: 445px;
	width: 100%;  
}
/* --------------------------- /////////// XII. FOOTER /////////// --------------------------- */
#footer {
    background: #F0F0F0; /* footer color */
    border-top: 1px solid #D8D8D8;
    color: #333;
	height: 60px;
}
.social-links {
    float: right;
    margin-top: 2%;
    margin-right: 5px;
}
.social-links li {
    display: inline;
}
.social-links li > a > i {
    background: #FFF;
    border: 1px solid #D8D8D8;
    border-radius: 1px;
    color: #333;
    height: 36px;
    width: 40px;
    max-height: 36px;
    max-width: 46px;
    padding: 10px;
    text-align: center;
    -webkit-transition: all 0.2s ease;
	-moz-transition:    all 0.2s ease;
	-o-transition:      all 0.2s ease;
}
.social-links li > a > i:hover {
    background: #333;
    color: #FFF;  
}
/* -Copyright Text- */
#copyright {
    color: #333;
	font-family: Droid Sans, sans-serif;
    margin-top: 20px;
}
/* --------------------------- /////////// XIII. 404 Page /////////// --------------------------- */
#container-404 {
    background: url(../images/404.png);
    height: 100vh;
    width: 100%;
}
.text-404 {
   margin-top: 35vh;
}
.text-404 p {
    font-size: 1.125rem;
}
.text-404 a {
    font-size: 1.75rem;
}

a#logo {
	display: inline-block;
	padding: 10px 15px;
	border: solid 1px #fff;
	font-weight: 600;
	margin-bottom: 10px;
	background-color: rgba(255, 255, 255, 0.25);
}


#about-section h2 {
	margin: 35px 0 15px 0;
}


@media only screen and (max-width : 480px) {
	.navbar-header h1 {
		margin-left: 20px;
	}
	.navbar-fixed-top {
		padding-bottom: 10px;
	}
	h1 {
		font-size: 1.8rem !important;
	}
	.small-margin {
		margin-bottom: 1em; /* 48px */
	}
	.hero-caption { 
		width: 80% !important;
	}
	h1.tagline {
		font-size: 1.4rem !important;
	}
	p.hero-tags {
		font-size: .9rem !important;
	}
}