html {
    -webkit-font-smoothing: antialiased;
}

body {
    font-weight: 300;
    color: #555;
    padding: 0;
    margin: 0;
}

p {
    line-height: 1.5;
}

a {
    color: #c5c5c5;
}

a:hover {
    text-decoration: none;
    color: #00c4ff;
}

div,
input,
select,
textarea,
span,
img,
table,
td,
th,
p,
a,
button,
ul,
li {
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
}

ul, ol {
    padding: 0 !important;
    margin: 0;
}

form {
    margin: 0 0 0;
}

/* for highlights */
::selection {
    background: #000; /* Safari */
}

::-moz-selection {
    background: #000; /* Firefox */
}

/*------------- General Styles -------------*/

/* Custom container */
.container-narrow {
    margin: 0 auto;
    max-width: 960px;
    position: relative;
    padding-top: 0px;
}

/* Span Styles */
.well {
    border: 0;
    overflow: hidden;
    position: relative;
    z-index: 1; /* Fix bug on webkit browsers */
}

.large {
    height: 620px;
}

/* Used for main content such as home, about, work and contact */

.fixed-height {
    height: 300px !important;
}

/* For spans which you want to stay the same height on devices down to 767px */

.no-padding {
    padding: 0;
}

/* Used for items such as sliders */

.padding {
    padding: 20px;
}

.overflow-show {
    overflow: visible;
}

/* Need when box contains .outer-box or other overlapping items */

.click {
    cursor: pointer;
}

/* Used it item is clickable */

.fluid-height {
    height: 100% !important;
}

.shadow {
    /* Used on any div you want a long shadow on */
    box-shadow: 
    #262525 1px 1px,
    #262525 2px 2px,
    #262525 3px 3px,
    #262525 4px 4px,
    #262525 5px 5px,
    #262525 6px 6px,
    #262525 7px 7px,
    #262525 8px 8px,
    #262525 9px 9px,
    #262525 10px 10px,
    #262525 11px 11px,
    #262525 12px 12px,
    #262525 13px 13px,
    #262525 14px 14px,
    #262525 15px 15px,
    #262525 16px 16px,
    #262525 17px 17px,
    #262525 18px 18px,
    #272626 19px 19px,
    #272626 20px 20px,
    #272626 21px 21px,
    #272626 22px 22px,
    #282727 23px 23px,
    #282727 24px 24px,
    #282727 25px 25px,
    #282727 26px 26px,
    #292828 27px 27px,
    #292828 28px 28px,
    #292828 29px 29px,
    #292828 30px 30px,
    #2a2929 31px 31px,
    #2a2929 32px 32px,
    #2a2929 33px 33px,
    #2a2929 34px 34px,
    #2b2a2a 35px 35px,
    #2b2a2a 36px 36px,
    #2b2a2a 37px 37px,
    #2b2a2a 38px 38px,
    #2c2b2b 39px 39px,
    #2c2b2b 40px 40px,
    #2c2b2b 41px 41px,
    #2c2b2b 42px 42px,
    #2c2c2c 43px 43px,
    #2c2c2c 44px 44px,
    #2c2c2c 45px 45px,
    #2c2c2c 46px 46px,
    #2d2d2d 47px 47px,
    #2d2d2d 48px 48px,
    #2d2d2d 49px 49px,
    #2d2d2d 50px 50px,
    #2e2e2e 51px 51px,
    #2e2e2e 52px 52px,
    #2e2e2e 53px 53px,
    #2f2f2f 54px 54px,
    #2f2f2f 55px 55px,
    #2f2f2f 56px 56px,
    #303030 57px 57px,
    #303030 58px 58px,
    #303030 59px 59px,
    #313131 60px 60px,
    #313131 61px 61px,
    #313131 62px 62px;
}

/* Span Colors (really hard to name the colors) */
.orange {
    background: #D3643B;
}

.tealblue {
    background: #556270;
}

.sage {
    background: #94C7B6;
}

.blue {
    background: #00B4CC;
}

.darksage {
    background: #729c98;
}

.plum {
    background: #483e46;
}

.purple {
    background: #6A5E72 
}

.sedgebrown {
    background: #605951;
}

.ecru {
    background: #C1B398;
}

.blueberry {
    background: #625560;
}

.midplum {
    background: #6b4d56;
}

.redplum {
    background: #794147;
}

.darkred {
    background: #863538;
}

/* Content Styles */
.outer-box {
    padding: 20px;
    height: auto;
    width: 111%;
    margin: 30px 0;
    position: relative;
    left: -5%;
    left: -33px;
    border: 5px solid #fff;
    overflow: hidden;
}

.border {
    border: 5px solid #fff;
}

.outer-box-work {
    padding: 20px;
    height: auto;
    width: 81.5%;
    position: relative;
    left: -33px;
    margin: 30px 0;
    border: 5px solid #fff;
    overflow: hidden;
}

.outside {
    height: auto;
    width: 100px;
    position: absolute;
    left: -120px;
    bottom: 0;
}

.article {
    margin-top: 20px;
}

/* Used in news section */

.bold {
    font-weight: 700;
}

.copy {
    /* Used copyright section */
    position: absolute;
    bottom: 0;
}

.col-xs-1, 
.col-xs-2, 
.col-xs-3, 
.col-xs-4, 
.col-xs-5, 
.col-xs-6,
.col-xs-7, 
.col-xs-8, 
.col-xs-9,
.col-xs-10, 
.col-xs-11, 
.col-xs-12,
.col-sm-1, 
.col-sm-2, 
.col-sm-3, 
.col-sm-4, 
.col-sm-5, 
.col-sm-6, 
.col-sm-7,
.col-sm-8, 
.col-sm-9, 
.col-sm-10, 
.col-sm-11, 
.col-sm-12,
.col-md-1,
.col-md-2, 
.col-md-3, 
.col-md-4, 
.col-md-5, 
.col-md-6, 
.col-md-7, 
.col-md-8,
.col-md-9, 
.col-md-10, 
.col-md-11, 
.col-md-12, 
.col-lg-1, 
.col-lg-2,
.col-lg-3, 
.col-lg-4, 
.col-lg-5, 
.col-lg-6, 
.col-lg-7, 
.col-lg-8, 
.col-lg-9,
.col-lg-10, 
.col-lg-11, 
.col-lg-12 {
    padding-right: 10px;
    padding-left: 10px;
}

.well-slider {
    border: 0;
    overflow: hidden;
    position: relative;
    height: 300px;
    z-index: 1;
    min-height: 20px;
    margin: 0;
    margin-bottom: 20px;
    border-radius: 4px;
}

.flexslider {
    z-index: 1;
}

/* Add this class when using fitvids.js */
.video {
    border: 0;
}

/*------------- Blog Styles -------------*/

/* Blog Post */
.bp-post {
    top: 0;
    width: 100%;
    height: 300px;
    position: relative;
}

.bp-post .overlay {
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC45Ii8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.9))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%); /* W3C */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#e6000000', GradientType=0 ); /* IE6-8 */
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
}

.bp-post .title {
    color: #fff;
    position: absolute;
    bottom: 0px;
    left: 20px;
}

.bp-post .star,
.bp-post .heart {
    padding: 10px;
    position: absolute;
    bottom: 0;
    color: #fff;
    background: rgba(3, 3, 3, 0.8);
}

.bp-post .heart {
    right: 0;
}

.bp-post .star {
    right: 34px;
}

.bp-post .star:hover
.bp-post .heart:hover, {
    background: rgba(3, 3, 3, 0.9);
}

.bp-post .heart:hover {
    color: #a30000;
}

.bp-post .star:hover {
    color: #ffea00;
}

/* Blog item ONLY USED IF BLOG POST IS LAST ON ROW otherwise dosent match up on devices less than 767px  */
.blog-post-item {
    position: relative;
    width: 110%;
    height: 0;
    left: -5%;
    overflow: hidden;
    background: #535954;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    padding: 0 25px;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.reveal {
    height: auto;
    margin-bottom: 30px;
    overflow: visible;
    padding: 20px;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.arrow-up {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    position: absolute;
    top: -20px;
    z-index: 90;
    border-bottom: 20px solid #535954;
}

.arrow-up.left {
    left: 32%;
}

/* Used for span8 blog post on left */
.arrow-up.right {
    right: 32%;
}

/* Used for span8 blog post on right */


/*------------- Album Styles -------------*/

/* Photo album block */
.photo-album {
    width: 100%;
    height: 300px;
    position: relative;
}

.photo-album .album {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.29);
    -webkit-transition: background 0.5s ease-in-out;
    -moz-transition: background 0.5s ease-in-out;
    -o-transition: background 0.5s ease-in-out;
    -ms-transition: background 0.5s ease-in-out;
    transition: background 0.5s ease-in-out;
}

.photo-album .album:hover {
    background: rgba(255, 255, 255, 0.4);
}

.photo-album .album .title {
    width: 130px;
    height: 30px;
    font-weight: 300;
    font-size: 25px;
    text-align: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
}

/*------------- Portfolio/work Styles -------------*/

/* Portfolio block */
.portfolio-img {
    width: 100%;
    height: 300px;
    position: relative;
}

.portfolio-img .hover-effect {
    width: 100%;
    height: 100%;
    top: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 300;
    position: absolute;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.portfolio-img .hover-effect > p {
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    height: 50px;
    width: 100%;
    font-size: 25px;
    position: absolute;
}

/* Effects Options */
.effect-one {
    background: rgba(51, 51, 51, 0.5);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.effect-one:hover {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.effect-two {
    background: rgba(51, 51, 51, 0.5);
    -webkit-transform: rotate(-45deg) scale(2);
    -moz-transform: rotate(-45deg) scale(2);
    -o-transform: rotate(-45deg) scale(2);
    -ms-transform: rotate(-45deg) scale(2);
    transform: rotate(-45deg) scale(2);
    ;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.effect-two:hover {
    -webkit-transform: rotate(0deg) scale(1);
    -moz-transform: rotate(0deg) scale(1);
    -o-transform: rotate(0deg) scale(1);
    -ms-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.effect-three {
    background: rgba(51, 51, 51, 0);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.effect-three:hover {
    background: rgba(51, 51, 51, 0.5);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.effect-four {
    background: rgba(51, 51, 51, 0);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.effect-four:hover {
    background: rgba(51, 51, 51, 0.5);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.effect-five {
    background: #fff;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.effect-five:hover {
    opacity: 1;
    color: #000;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.effect-six {
    background: #000;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.effect-six:hover {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.effect-seven {
    background: rgba(255, 255, 255, 0.8);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.effect-seven:hover {
    opacity: 1;
    color: #000;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.effect-eight {
    background: rgba(51, 51, 51, 0.5);
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -o-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.effect-eight:hover {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.effect-nine {
    background: rgba(51, 51, 51, 0.5);
    -webkit-transform: rotate(45deg) scale(2);
    -moz-transform: rotate(45deg) scale(2);
    -o-transform: rotate(45deg) scale(2);
    -ms-transform: rotate(45deg) scale(2);
    transform: rotate(45deg) scale(2);
    ;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.effect-nine:hover {
    -webkit-transform: rotate(0deg) scale(1);
    -moz-transform: rotate(0deg) scale(1);
    -o-transform: rotate(0deg) scale(1);
    -ms-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

/*------------- Menu Styles -------------*/

/* Menu */
.nav {
    width: 350px;
    height: 300px;
    left: 0;
    position: absolute;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
}

.nav > li a {
    color: #fff;
    font-size: 35px;
    padding: 17px 5px;
    text-align: center;
}

.nav > li a:hover {
    color: #fff;
    text-decoration: none;
    background: transparent;
    background: rgba(0, 0, 0, 0); /* fallback */
}

.nav-section {
    height: 0;
    width: 0;
    position: fixed;
    z-index: 89;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.75);
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
}

.show {
    height: 100%;
    width: 100%;
}

/* Menu button */
.nav-bar, 
.menu {
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.nav-bar {
    width: 35px;
    background-color: #d0d0d0;
    height: 5px;
    margin-bottom: 8px;
}

.menu {
    width: 35px;
    height: 31px;
    padding: 10px;
    z-index: 100;
    right: -70px;
    top: 0px;
    position: absolute;
    cursor: pointer;
}

.animate-1 {
    width: 0;
}

.animate-2 {
    width: 35px;
    -webkit-transform: rotate(-45deg) translate(10px, -10px);
    -moz-transform: rotate(-45deg) translate(10px, -10px);
    -o-transform: rotate(-45deg) translate(10px, -10px);
    -ms-transform: rotate(-45deg) translate(10px, -10px);
    transform: rotate(-45deg) translate(10px, -10px);
    background: #fff;
}

.animate-0 {
    width: 35px;
    -webkit-transform: rotate(45deg) translate(8px, 8px);
    -moz-transform: rotate(45deg) translate(8px, 8px);
    -o-transform: rotate(45deg) translate(8px, 8px);
    -ms-transform: rotate(45deg) translate(8px, 8px);
    transform: rotate(45deg) translate(8px, 8px);
    background: #fff;
}

/*------------- Team Styles -------------*/

.person-square2,
.person-square {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    position: relative;
    height: 300px;
}

/* You can use this method or backstrech.js e.g the portfolio blocks */
.person-square {
    background: #323232 url('../img/person.jpg') no-repeat center center;
}

.person-square2 {
    background: #323232 url('../img/person2.jpg') no-repeat center center;
}

/*------------- Twitter Styles -------------*/

.tweet {
    margin: 25px 0;
}

.tweet > p {
    font-size: 19px;
}

/* Twitter Icon */
.social-box {
    height: auto;
    width: auto;
    color: #fff;
    font-size: 30px;
    padding: 20px;
    position: absolute;
    right: -10px; /* Change these around to change position */
    bottom: 10px; /* Change these around to change position */
    border: 5px solid #fff;
    overflow: hidden;
}

.social-box:hover {
    color: #009eff;
    border: 5px solid #009eff;
}

/*------------- Contact Styles -------------*/

.bordered-input {
    border-radius: 0 !important;
    background: rgba(0, 0, 0, 0.15) !important;
    border: 0 !important;
    font-weight: 300 !important;
    font-size: 20px !important;
    padding: 15px !important;
    height: auto !important;
    box-shadow: none !important;
    color: #fff !important;
    width: 100%;
    margin: 5px 0;
}

input[placeholder], [placeholder], *[placeholder] {
    color: #fff !important;
}

.contact-icon {
    padding-right: 15px;
}

.social {
    font-size: 18px;
    text-align: center;
    padding: 5px 0;
    height: auto;
    width: auto;
    border: 5px solid rgba(0, 0, 0, 0.25);
}

.social:hover {
    color: #009eff;
    border: 5px solid #009eff;
}

#map {
    width: 100%;
    height: 300px;
}

/*------------- Panel Styles -------------*/

.panel {
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    right: 0%;
    height: 100%;
    z-index: 3;
    margin: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: #323232;
    z-index: 90000;
}

.panel .work, /* Add the panels you use here */
.panel .album {
    display: none;
    font-family: arial;
    color: white;
    height: 100%;
    font-weight: 100;
    position: relative;
    padding: 50px;
    padding-top: 110px;
    overflow-y: scroll;
    margin: 0 auto;
    max-width: 960px;
}

.closeicon {
    position: absolute;
    right: 5%;
    top: 5%;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    color: #fff;
    font-size: 45px;
    cursor: pointer;
}

.no-scroll {
    overflow: hidden;
}

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

/*------------- Image Background -------------*/

/* Use this or backstrech.js */
.imagebg-13,
.imagebg-12,
.imagebg-11,
.imagebg-10,
.imagebg-9,
.imagebg-8,
.imagebg-7,
.imagebg-6,
.imagebg-5,
.imagebg-4,
.imagebg-3,
.imagebg-2,
.imagebg-1 {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.imagebg-1 {
    background: url('../img/barack.jpg') no-repeat center bottom;
}

.imagebg-2 {
    background: #00B4CC url('../img/card.png') no-repeat center bottom;
}

.imagebg-3 {
    background: #323232 url('../img/3.jpg') no-repeat center bottom;
}

.imagebg-4 {
    background: #323232 url('../img/14.jpg') no-repeat center bottom;
}

.imagebg-5 {
    background: #323232 url('../img/5.jpg') no-repeat center bottom;
}

.imagebg-6 {
    background: #323232 url('../img/6.jpg') no-repeat center bottom;
}

.imagebg-7 {
    background: #323232 url('../img/7.jpg') no-repeat center bottom;
}

.imagebg-8 {
    background: #323232 url('../img/8.jpg') no-repeat center bottom;
}

.imagebg-9 {
    background: #323232 url('../img/9.jpg') no-repeat center bottom;
}

.imagebg-10 {
    background: #323232 url('../img/10.jpg') no-repeat center bottom;
}

.imagebg-11 {
    background: #323232 url('../img/11.jpg') no-repeat center bottom;
}

.imagebg-12 {
    background: #323232 url('../img/12.jpg') no-repeat center bottom;
}

.imagebg-13 {
    background: #323232 url('../img/13.jpg') no-repeat center bottom;
}

/*------------- Content Slider -------------*/

.content-slider {
    width: 55%;
    float: left;
}

.image-slider {
    width: 200px;
    height: 200px;
    float: left;
    margin-top: 70px;
}

/*------------- Button Styles -------------*/

/* Btn General */
.btn {
    background-color: #e5e5e5;
    border: 3px solid #e5e5e5;
    background-image: none;
    text-shadow: none;
    font-size: 14px;
    color: #333333;
    cursor: pointer;
    outline: none;
    filter: none;
    box-shadow: none;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.btn[disabled],
.btn.disabled {
    color: #333333;
    box-shadow: none;
    background-color: transparent;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

/* Btn Red */
.btn.red {
    color: white;
    text-shadow: none;
    background-color: #F80012;
    border-color: #F80012;
}

.btn.red:hover,
.btn.red:focus,
.btn.red:active,
.btn.red.active,
.btn.red[disabled],
.btn.red.disabled {
    background-color: transparent;
    border-color: #F80012;
    ;
    color: #F80012;
}

/* Btn Blue */
.btn.blue {
    color: white;
    text-shadow: none;
    background-color: #3D9AD1;
    border-color: #3D9AD1;
}

.btn.blue:hover,
.btn.blue:focus,
.btn.blue:active,
.btn.blue.active,
.btn.blue[disabled],
.btn.blue.disabled {
    background-color: transparent;
    border-color: #3D9AD1;
    ;
    color: #3D9AD1 !important;
}

/* Btn Green */
.btn.green {
    color: white;
    text-shadow: none;
    border-color: #00C618;
    background-color: #00C618;
}

.btn.green:hover,
.btn.green:focus,
.btn.green:active,
.btn.green.active,
.btn.green.disabled,
.btn.green[disabled] {
    background: transparent;
    border-color: #00C618;
    color: #00C618 !important;
}

/* Btn Purple */
.btn.purple {
    color: white;
    text-shadow: none;
    border-color: #8506A9;
    background-color: #8506A9;
}

.btn.purple:hover,
.btn.purple:focus,
.btn.purple:active,
.btn.purple.active,
.btn.purple.disabled,
.btn.purple[disabled] {
    background: transparent;
    border-color: #8506A9;
    color: #8506A9 !important;
}

/* Btn Yellow */
.btn.yellow {
    color: white;
    text-shadow: none;
    background-color: #FFCC40;
    border-color: #FFCC40;
}

.btn.yellow:hover,
.btn.yellow:focus,
.btn.yellow:active,
.btn.yellow.active,
.btn.yellow.disabled,
.btn.yellow[disabled] {
    background: transparent;
    border-color: #FFCC40;
    color: #FFCC40 !important;
}

/* Btn Black */
.btn.black {
    color: white;
    text-shadow: none;
    background-color: #555555;
    border-color: #555555;
}

.btn.black:hover,
.btn.black:focus,
.btn.black:active,
.btn.black.active,
.btn.black.disabled,
.btn.black[disabled] {
    background: transparent;
    border-color: #555555;
    color: #555555 !important;
}

/* Btn Transparent */
.btn.transparent {
    color: white;
    text-shadow: none;
    background-color: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.25);
}

.btn.transparent:hover,
.btn.transparent:focus,
.btn.transparent:active,
.btn.transparent.active,
.btn.transparent.disabled,
.btn.transparent[disabled] {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff !important;
}

/* Btn Warning */
.btn-warning {
    color: white;
    text-shadow: none;
    background-color: #faa732;
    border-color: #faa732;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.btn-warning.disabled,
.btn-warning[disabled] {
    background: transparent;
    border-color: #faa732;
    color: #faa732 !important;
}

/* Btn Primary */
.btn-primary {
    color: white;
    text-shadow: none;
    background-color: #006dcc;
    border-color: #006dcc;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
    background: transparent;
    border-color: #006dcc;
    color: #006dcc !important;
}

/* Btn Info */
.btn-info {
    color: white;
    text-shadow: none;
    background-color: #49afcd;
    border-color: #49afcd;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.btn-info.disabled,
.btn-info[disabled] {
    background: transparent;
    border-color: #49afcd;
    color: #49afcd !important;
}

/* Btn Danger */
.btn-danger {
    color: white;
    text-shadow: none;
    background-color: #da4f49;
    border-color: #da4f49;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.btn-danger.disabled,
.btn-danger[disabled] {
    background: transparent;
    border-color: #da4f49;
    color: #da4f49 !important;
}

/* Btn Success */
.btn-success {
    color: white;
    text-shadow: none;
    background-color: #5bb75b;
    border-color: #5bb75b;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.btn-success.disabled,
.btn-success[disabled] {
    background: transparent;
    border-color: #5bb75b;
    color: #5bb75b !important;
}

/* Btn Inverse */
.btn-inverse {
    color: white;
    text-shadow: none;
    background-color: #363636;
    border-color: #363636;
}

.btn-inverse:hover,
.btn-inverse:focus,
.btn-inverse:active,
.btn-inverse.active,
.btn-inverse.disabled,
.btn-inverse[disabled] {
    background: transparent;
    border-color: #363636;
    color: #363636 !important;
}

/* Btn Sizes */
.btn-mini {
    height: 20px;
    font-size: 9px;
    line-height: 5px;
    padding: 4px 10px;
}

.btn-big {
    height: 38px;
    font-size: 18px;
    line-height: 18px;
    padding: 8px 16px;
}

.btn-large {
    padding: 11px 19px;
    font-size: 17.5px;
    margin-bottom: 10px;
}

.btn-small {
    padding: 2px 10px;
    font-size: 11.9px;
}

.btn-block {
    margin-bottom: 5px 
}

/*------------- Sizes -------------*/

@media (max-width: 1100px) {
    .menu {
        right: 0px !important;
        top: 0px !important;
    }

    .outside {
        display: none;
    }
}

@media (max-width: 979px) {
    .well {
        height: auto;
    }

    .large {
        height: auto;
    }

    .content-slider {
        width: 60%;
        float: left;
    }

    .image-slider {
        width: 30%;
        height: 60px;
        float: left;
        margin-top: 70px;
    }
}

@media (max-width: 767px) {
    body {
        padding: 20px;
    }

    .outer-box {
        width: 105%;
        left: -5%;
    }
}

#home, #footer {
  display: none;
}

.menu {
  display: none;
}


#firmennamen {
  width: 900px;
  display: block;
  margin: 0 auto;
}

#slogan {
  display: none;
}



@media print {
    #dienstleistungen2 .col-md-3, #dienstleistungen2 .col-sm-6, #dienstleistungen2 .col-xs-10, #dienstleistungen2 .col-sm-4, #dienstleistungen2 .col-md-4, #kompetenzen2 .col-md-3, #kompetenzen2 .col-sm-6, #kompetenzen2 .col-xs-10, #kompetenzen2 .col-sm-4, #kompetenzen2 .col-md-4 {
        float: left;
        width: 44%;
        margin: 0 3%;
        padding: 0 3%;
    }
}

#logo {
  width: 300px;
  display: block;
  margin: 0 auto;
}