@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Lato:100,300,300i,400,400i,700|Montserrat:400,700');

/*FABER Onepage Template*/
/* == CONTENT == */
/*
  01. GENERAL SETTINGS
  02. PRELOADER
  03. MENU
  04. HEADER
  05. SERVICES SECTION
  06. PORTFOLIO SECTION
  07. PROFILE SECTION
  08. STATS
  09. RESUME SECTION
  10. TESTIMONIALS SECTION
  11. CONTACT FORM
  12. FOOTER
  13. MEDIA QUERIES FOR RESPONSIVE DESIGN
  */
/*== 01. GENERAL SETTINGS ==*/
html,
body {
  width: 100%;
  height: 100%;
  font-family: 'Lato', sans-serif;
  color: #868686;
  background-color: #363636;
  line-height: 24px;
  letter-spacing: 0.05em;
  font-size: 16px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0px;
}
ul {
  -webkit-padding-start: 0;
  padding-left: 0;
}
ol,
ul {
  list-style: none;
}
hr {
  max-width: 100px;
  border-color: #cc6633;
  border-width: 2px;
  margin-top: 24px;
}
a:hover,
a:focus,
a:visited {
  text-decoration: none;
  color: #ffffff;
  outline: 0 auto -webkit-focus-ring-color;
}
.header-text {
  margin-bottom: 72px;
  text-align: center;
}
.header-text h2 {
  display: inline-block;
  padding: 0 10px;
  font-family: 'Montserrat', sans-serif;
  color: #cc6633;
  border: 2px solid #cc6633;
  font-size: 26px;
  margin-bottom: 24px;
  text-transform: uppercase;
  font-weight: 700;
  color: #707070;
}
.header-text p {
  color: #868686;
  font-weight: 400;
}
.align {
  float: right;
}
.over {
  overflow: hidden;
}
.paragraph {
  overflow: hidden;
}
.paragraph h2 {
  font-weight: 400;
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 4px;
}
.p-gray {
  color: #787878;
}
.p-white {
  color: #d3d3d3;
}
.ripple_wave {
  z-index: 0;
  position: relative;
  overflow: hidden;
}
.ripple_wave .ripple {
  position: absolute;
  background: #FFFFFF;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  -webkit-animation: ink 1s;
  -ms-animation: ink 1s;
  animation: ink 1s;
}
.ripple-color {
  color: #fff ;
}
@-webkit-keyframes ink {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.2;
  }
  100% {
    -webkit-transform: scale(40);
    transform: scale(40);
    opacity: 0;
  }
}
/*---*/
@-ms-keyframes ink {
  0% {
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 0.2;
  }
  100% {
    -ms-transform: scale(40);
    transform: scale(40);
    opacity: 0;
  }
}
@-ms-keyframes ripple {
  0% {
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 0.2;
  }
  100% {
    -ms-transform: scale(40);
    transform: scale(40);
    opacity: 0;
  }
}
/*----*/
@-webkit-keyframes ripple {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.2;
  }
  100% {
    -webkit-transform: scale(40);
    transform: scale(40);
    opacity: 0;
  }
}
@keyframes ripple {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.2;
  }
  100% {
    -webkit-transform: scale(40);
    transform: scale(40);
    opacity: 0;
  }
}
.content-button button {
  text-align: center;
  width: 100%;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  background: #cc6633;
  -webkit-box-shadow: 0px 2px 10px -3px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 2px 10px -3px rgba(0, 0, 0, 0.7);
  padding: 10px 15px;
  color: #fff;
  display: table;
  margin-top: 48px;
  margin-left: auto;
  margin-right: auto;
  border: none;
}
.content-button button:focus {
  outline: none;
}
.content-button button:hover {
  -webkit-transition: ease 0.1s;
  transition: ease 0.1s;
  background: #cc6633;
  -webkit-box-shadow: 0px 6px 10px -2px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 6px 10px -2px rgba(0, 0, 0, 0.3);
}
/*=== 02. PRELOADER ====*/
#loader-wrapper {
  position: fixed;
  background: #cc6633;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1031;
}
#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 5px solid transparent;
  border-top-color: #ededed;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
#loader:before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #363636;
  -webkit-animation: spin 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  animation: spin 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
#loader:after {
  content: "";
  position: absolute;
  top: 24px;
  left: 24px;
  right: 24px;
  bottom: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #d3d3d3;
  -webkit-animation: spin 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  animation: spin 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
#label {
  display: block;
  position: relative;
  top: 53%;
  margin: 24px 0 0 0px;
}
h2 {
  color: #fafafa;
  font-size: 20px;
  line-height: 1.1;
  text-align: center;
  font-weight: 300;
}
/*=== 03.MENU ===*/
.button_container {
  position: fixed;
  top: 20px;
  right: 20px;
  height: 27px;
  width: 27px;
  cursor: pointer;
  z-index: 102;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
.button_container:hover {
  opacity: .7;
}
.button_container.active {
  -webkit-transform: translateY(0) translateX(0) rotate(90deg);
  -ms-transform: translateY(0) translateX(0) rotate(90deg);
  transform: translateY(0) translateX(0) rotate(90deg);
}
.button_container.active .top {
  -webkit-box-shadow: 3px -3px 5px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 3px -3px 5px 0px rgba(0, 0, 0, 0.15);
  opacity: 1;
}
.button_container.active .middle {
  -webkit-box-shadow: 3px -3px 5px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 3px -3px 5px 0px rgba(0, 0, 0, 0.15);
  opacity: 1;
}
.button_container.active .bottom {
  -webkit-box-shadow: 3px -3px 5px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 3px -3px 5px 0px rgba(0, 0, 0, 0.15);
}
.button_container span {
  background: #cc6633;
  border: none;
  height: 3px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all .35s ease;
  transition: all .35s ease;
  cursor: pointer;
  -webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.15);
}
.button_container span:nth-of-type(2) {
  top: 11px;
}
.button_container span:nth-of-type(3) {
  top: 22px;
}
.overlay.open {
  visibility: visible;
  width: 200px;
  right: 20px;
  top: 100px;
  position: fixed;
  z-index: 101;
}
.overlay.open li {
  -webkit-animation: fadeInRight .3s ease forwards;
  animation: fadeInRight .3s ease forwards;
  -webkit-animation-delay: .35s;
  animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
  -webkit-animation-delay: .4s;
  animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
  -webkit-animation-delay: .45s;
  animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
  -webkit-animation-delay: .50s;
  animation-delay: .50s;
}
.overlay.open li:nth-of-type(5) {
  -webkit-animation-delay: .55s;
  animation-delay: .55s;
}
.overlay.open li:nth-of-type(6) {
  -webkit-animation-delay: .60s;
  animation-delay: .60s;
}
.overlay nav {
  font-size: 16px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 300;
  text-align: right;
}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
}
.overlay ul li {
  display: block;
  min-height: 40px;
  position: relative;
  opacity: 0;
}
.overlay ul li a {
  background: #cc6633;
  margin-top: 5px;
  display: inline-block;
  padding: 5px 10px;
  position: relative;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  color: #FFF;
  text-decoration: none;
  overflow: hidden;
  -webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.2);
}
.overlay ul li a:hover {
  margin-right: 5px;
  -webkit-transition: ease 0.1s;
  transition: ease 0.1s;
  background: #cc6633;
  -webkit-box-shadow: 10px 20px 19px 9px rgba(0, 0, 0, 0.07);
  box-shadow: 10px 20px 19px 9px rgba(0, 0, 0, 0.07);
  padding: 6px 11px;
  font-size: 17px;
}
.overlay ul li a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  height: 3px;
  background: #FFF;
  -webkit-transition: .35s;
  transition: .35s;
}
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}
/*=== 04. HEADER ===*/
.parallax-window {
  position: relative !important;
  width: 100%;
  min-height: 100%;
  color: #fff;
  background: transparent;
}
.parallax-mirror {
  z-index: 0!important;
}
header .transparent-bckground {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: auto;
  white-space: nowrap;
  text-align: center;
}
.wrapper:before {
  height: 100%;
  display: inline-block;
  vertical-align: middle;
  content: '';
}

.header-logo {
  display: inline-block;
  white-space: normal;
  vertical-align: middle;
  text-align: left;

}

.header-logo  img{
  width:100% !important;
height:auto !important;
display:block;

}


.logo {
  display: inline-block;
  
}

.logo img {
	max-width: 100%;
  margin-right: 20px;
  margin-bottom: -20px;
  vertical-align: inherit;
}

.logoMM {
  display: inline-block;

	border: 2px solid #ffffff;
 
}
.logoMM img {
  max-width: 100%;
  margin-right: 20px;
  margin-bottom: -20px;
  vertical-align: inherit;
}


.logoMnM {
  display: inline-block;
  padding-left: 24px;
  }
.logoMnM img {
  width: 100%;
  margin-right: 20px;
  margin-bottom: -20px;
  vertical-align: inherit;
}



.logo_and_text {
  display: inline-block;
  white-space: normal;
  vertical-align: middle;
  text-align: left;
}
.borders {
  position: absolute;
  z-index: -1;
  left: 20px;
  right: 20px;
  top: 20px;
  bottom: 20px;
  background-color: rgba(0, 0, 0, 0.5);
}
.header-content {
  display: inline-block;
  padding-left: 24px;
  border-left: 4px solid #cc6633;
}
.header-content h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 110px;
  font-weight: 400;
  color: #ededed;
  letter-spacing: -5px;
  margin-bottom: 0;
}
.header-content h1 span {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  margin-left: 15px;
}
.header-content h3 {
  font-family: 'Montserrat', serif;
  font-size: 26px;
  margin-top: 0;
  margin-bottom: 10px;
  color: #cc6633;
  font-weight: 400;
  text-transform: uppercase;
}
.header-content h3 span {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  font-size: 26px;
}
.header-content p {
  font-weight: 400;
  font-size: 16px;
  color: #d3d3d3;
  text-align: left;
  letter-spacing: 0.098em;
}
/*arrow*/
.fa-angle-down:before {
  font-size: 40px;
}
.angle-down i {
  cursor: pointer;
  line-height: 10px;
  position: absolute;
  bottom: 40px;
  color: #fff;
  left: calc(50% - 10px);
  left: -webkit-calc(50% - 10px);
  text-align: center;
  font-size: 35px;
  z-index: 100;
  -webkit-animation: scroll1 2s ease-in-out infinite;
  animation: scroll1 2s ease-in-out infinite;
}
@-webkit-keyframes scroll1 {
  0% {
    -webkit-transform: translate(0, -20px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0, 20px);
    opacity: 0;
  }
}
@keyframes scroll1 {
  0% {
    -webkit-transform: translate(0, -20px);
    transform: translate(0, -20px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0, 20px);
    transform: translate(0, 20px);
    opacity: 0;
  }
}
/*== 05.SERVICES SECTION == */
#services {
  padding: 72px 0 96px 0;
  background-color: #fafafa;
  text-align: center;
}
.services-content {
  text-align: justify;
}
.services-block {
  margin-bottom: 24px;
}
.services-content span {
  font-family: 'Montserrat', serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 16px;
  color: #707070;
  border-left: 4px solid #cc6633;
  padding-left: 14px;
  margin-bottom: 24px;
}
.services-content div p i {
  position: absolute;
  font-size: 500px;
  z-index: -1;
  top: -10%;
  left: 25%;
  color: #f7f7f7;
}
.serv-text {
  overflow: hidden;
  padding: 20px;
  position: relative;
  z-index: 0;
  width: 100%;
  background: #fff;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
}
.serv-text p{
  border-left: 1px solid #ededed;
  padding-left: 14px;
}
/*=== 06.PORTFOLIO SECTION ===*/
#portfolio {
  padding: 72px 0 96px 0;
  text-align: center;
  background-color: #363636;
  color: #fff;
}
#portfolio hr {
  border-color: #ededed;
  margin-bottom: 0;
}
#portfolio h2 {
  color: #ededed;
}
#portfolio p {
  color: #ededed;
}
.portfolio_filter {
  text-align: center;
}
.portfolio_filter ul {
  margin-bottom: 24px;
  text-align: center;
  color: #dedede;
}
.portfolio_filter ul li {
  font-family: 'Montserrat', serif;
  font-weight: 700;
  padding-right: 20px;
  padding-left: 20px;
  display: inline-block;
  text-transform: uppercase;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 2px;
}
.select-cat {
  color: #cc6633;
}
.portfolio_filter ul li:hover::before,
.portfolio_filter ul li:hover::after,
.portfolio_filter ul li:focus::before,
.portfolio_filter ul li:focus::after,
.portfolio_filter ul li:active::before,
.portfolio_filter ul li:active::after {
  color: #cc6633;
  opacity: 1;
  -webkit-transform: translateX(0px);
  -ms-transform: translateX(0px);
  transform: translateX(0px);
}
.portfolio_filter ul li::before {
  margin-right: 10px;
  content: '|';
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}
.portfolio_filter ul li::after {
  margin-left: 10px;
  content: '|';
  -webkit-transform: translateX(-20px);
  -ms-transform: translateX(-20px);
  transform: translateX(-20px);
}
.portfolio_filter ul li::before,
.portfolio_filter ul li::after {
  display: inline-block;
  opacity: 0;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
  -webkit-transition: opacity 0.2s, -webkit-transform 0.3s;
  transition: opacity 0.2s, -webkit-transform 0.3s;
  transition: transform 0.3s, opacity 0.2s;
  transition: transform 0.3s, opacity 0.2s, -webkit-transform 0.3s;
}
/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}
/* ---- .grid-item ---- */
.grid-sizer,
.grid-item {
  width: 33.33333333%;
}
.grid-item {
  float: left;
  overflow: hidden;
}
.grid-item img {
  display: block;
  width: 100%;
}
.works {
  position: relative;
  float: left;
  overflow: hidden;
  width: 100%;
  background: #f77777;
}
.hover-img .image-holder-description {
  background: #cc6633;
  color: #fff;
  height: 100%;
  width: 100%;
  opacity: 1;
  padding: 20px;
  position: absolute;
  z-index: 0;
}
.hover-img:hover .image-holder-description {
  opacity: 0.9;
}
.hover-img.effect .image-holder-description {
  top: -100%;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.hover-img.effect:hover .image-holder-description {
  top: 0;
}


/*gelb*/
.hover-imgg .image-holder-description {
  background: #fcde69;
  color: #fff;
  height: 100%;
  width: 100%;
  opacity: 1;
  padding: 20px;
  position: absolute;
  z-index: 0;
}
.hover-imgg:hover .image-holder-description {
  opacity: 0.9;
}
.hover-imgg.effect .image-holder-description {
  top: -100%;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.hover-imgg.effect:hover .image-holder-description {
  top: 0;
}

/*blue*/
.hover-imgb .image-holder-description {
  background: #5ba8d0;
  color: #fff;
  height: 100%;
  width: 100%;
  opacity: 1;
  padding: 20px;
  position: absolute;
  z-index: 0;
}
.hover-imgb:hover .image-holder-description {
  opacity: 0.9;
}
.hover-imgb.effect .image-holder-description {
  top: -100%;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.hover-imgb.effect:hover .image-holder-description {
  top: 0;
}

/*darkblue*/
.hover-imgdb .image-holder-description {
  background: #38547b;
  color: #fff;
  height: 100%;
  width: 100%;
  opacity: 1;
  padding: 20px;
  position: absolute;
  z-index: 0;
}
.hover-imgdb:hover .image-holder-description {
  opacity: 0.9;
}
.hover-imgdb.effect .image-holder-description {
  top: -100%;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.hover-imgdb.effect:hover .image-holder-description {
  top: 0;
}



.image-holder-description i {
  color: #fff;
  display: inline-block;
  font-size: 60px;
  position: absolute;
  top: 50%;
  left:50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.modal-box {
  max-width: 60%;
  background: #cc6633;
  position: relative!important;
  margin: 0 auto;
  left: 0!important;
}
.modal-box img {
  width: 100%;
  height: 100%;
}
.modal-box-content {
  padding: 24px 15px;
}
.modal-box-content h4 {
  margin-bottom: 16px;
  font-weight: 400;
  color: #fff;
  text-transform: uppercase;
  font-size: 16px;
}
.modal-box-content p {
  color: #d3d3d3;
}

.bg-gelb {
  background: #fcde69;
}

.bg-orange {
  background: #cc6633;
}
.bg-blue {
  background: #5ba8d0;
}

.bg-darkblue {
  background: #38547b;
}


.mfp-close {
  font-size: 40px!important;
  color: #fff!important;
}
button.mfp-close,
button.mfp-arrow {
  background: #cc6633 !important;
}
/*=== 07.PROFILE SECTION ===*/
#about {
  background-color: #fafafa;
  position: relative !important;
  width: 100%;
  background-position: center;
  background-size: cover;
  -o-background-size: cover;
  z-index: 0;
  padding: 72px 0 96px 0;
}
.about_content {
  padding: 54px 0 110px 0;
}
.personal-section {
  margin-top: 48px;
}
.personal-info li span {
  width: 50%;
  float: left;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 16px;
}
.photo-frame {
  position: absolute;
  z-index: -1;
  margin-left: -10px;
  margin-top: 20px;
  width: 320px;
  height: 460px;
  background-color: #cc6633;
}
.profile_img img {
  width: 100%;
  padding: 15px;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
  background: #fff;
}
.tooltip {
  position: relative;
  float: right;
}
.tooltip-inner {
  color: #707070;
}
.tooltip > .tooltip-inner {
  background-color: rgba(0, 0, 0, 0);
}
.popOver + .tooltip > .tooltip-arrow {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid rgba(0, 0, 0, 0);
}
.info h3 {
  font-family: 'Montserrat', serif;
  color: #707070;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 24px;
  text-align: center;
}
.barWrapper h3 {
  font-family: 'Montserrat', serif;
  color: #707070;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 24px;
  text-align: center;
}
.progressText {
  font-size: 16px;
  font-weight: 300;
}
.progress {
  margin-top: 4px;
  border-radius: 0;
  overflow: visible;
  height: 4px;
  -webkit-box-shadow: none;
  box-shadow: none;
  background-color: #707070;
}
.progress-bar {
  background-color: #cc6633;
  -webkit-transition: width 1.5s ease-in-out;
  transition: width 1.5s ease-in-out;
  -webkit-box-shadow: none;
  box-shadow: none;
  height: 8px;
}
/*=== 08.STATS ===*/
#stats {
  background: url(../images/orchester.jpg) 50% 0 fixed;/*image parallax*/
  background-size: cover;
  position: relative;
  border-top: 2px solid #cc6633;
}
#stats::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}
.padding_stats {
  padding: 72px 0 72px 0;
}
#stats .stat {
  text-align: center;
}
#stats .stat:last-child {
  border: none;
}
#stats .stat .icon-part i {
  font-size: 54px;
  color: rgba(255, 255, 255, 0.4);
}
#stats .stat h5 {
  color: #ededed;
  margin-top: 24px;
  font-size: 14px;
  text-transform: uppercase;
}
#stats .stat h3 {
  color: #cc6633;
  font-size: 40px;
  text-transform: uppercase;
  margin: 24px 0 0 0;
  line-height: 1;
  position: relative;
  text-align: center;
  font-weight: 300;
}
/*===== 09.RESUME SECTION =====*/
#resume {
  background-color: #fafafa;
}
#resume ul li {
  margin-top: 48px;
  list-style: none;
}
.resume_content {
  padding: 72px 0 96px 0;
}
.title-h3 h3 {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Montserrat', serif;
  text-transform: uppercase;
  position: relative;
  color: #707070;
}
.resume_content .row .title-h3 {
  background-color: #fff;
  padding: 48px 15px;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
}
.resume_chronology {
  margin-top: 48px;
}
.title-h3 i {
  display: block;
  text-align: center;
  font-size: 68px;
  color: #f5f5f5;
  position: absolute;
  left: 0;
  right: 0;
  top: 24px;
}
.time {
  font-weight: 700;
  font-size: 14px;
  display: inline-block;
  border-left: 4px solid #cc6633;
  padding: 0 5px 0 10px;
  color: #cc6633;
  line-height: 14px;
}
.resume-info h4 {
  display: inline-block;
  margin-top: 6px;
  margin-bottom: 24px;
  font-weight: 600;
  color: #8a8a8a;
  text-transform: uppercase;
  font-size: 14px;
  color: #707070;
  padding: 0 0 0 15px;
  font-family: "Montserat", sans-serif;
}
.resume-info p {
  border-left: 1px solid #ededed;
  padding-left: 12px;
}
/*=== 10.TESTIMONIALS SECTION ===*/
.testimonials {
  padding: 54px 0 54px 0;
  background: url(../images/parallax.jpg) 50% 0 fixed;
  background-position: center;
  background-size: cover;
  -webkit-box-shadow: inset 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
}
.testimonials h2 {
  color: #ededed;
  border: 2px solid #ededed;
  margin-bottom: 0;
}
.carousel-control.left {
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 100%);
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.0001)));
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 100%);
}
.carousel-control.right {
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 100%);
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.0001)));
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 100%);
}
.carousel-indicators{
  position: relative;
  bottom: -24px;
}
.carousel-caption {
  position: static;
  padding-bottom: 0;
  text-shadow: none;
}
.fill {
  width: 150px;
  margin: 0 auto;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-box-shadow: 0 0 0 3px #ff7777;
  box-shadow: 0 0 0 3px #ff7777;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);

}
.item {
  display: block;
  margin: 0 auto;
}
.item p {
  width: 50%;
  text-align: center;
  font-style: italic;
  font-weight: 300;
  margin: 0 auto;
}
/*== 11. CONTACT FORM ==*/
#contact {
  background: #fcfcfc;
  padding: 72px 0 96px 0;
}
.well {
  min-height: 20px;
  padding: 15px;
  margin-bottom: 20px;
  background-color: #fff;
  border: 0;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
}
.form-control {
  display: block;
  width: 100%;
  height: 40px;
  padding: 6px 12px;
  font-size: 14px;
  font-style: italic;
  line-height: 1.42857143;
  color: #555 !important;
  background-color: #fff;
  background-image: none;
  border: none;
  border-bottom: 2px solid #cc6633;
  border-radius: 0 ;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
}
.has-error .form-control {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.has-error .form-control:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.form-control:focus {
  border-color: #cc6633;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.text-danger {
  margin-top: 24px;
  font-weight: 400;
  color: #cc6633;
  text-transform: uppercase;
}
.text-success {
  margin-top: 24px;
  color: #8a8a8a;
  font-weight: 400;
  text-transform: uppercase;
}
/*== 12. FOOTER ==*/
.contact_inform {
  color: #fff;
  background: url(../images/pattern.svg) 50% 0;
  background-position: center;
  background-size: cover;
}
._inform {
  text-align: center;
  padding: 10px 0;
}
._inform div i {
  padding-right: 10px;
  font-size: 17px;
  color: #ededed;
}
._inform span {
  font-weight: 600;
  font-size: 12px;
  color: #ededed;
}
._inform p {
  font-size: 14px;
  font-weight: 300;
  margin: 0 0 0 10px;
  display: inline-block;
  color: #ededed;
}
.contactFooter {
  background-color: #363636;
  padding: 24px 0 24px 0;
  color: #fff;
  -webkit-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.25);
}
.footerLeft {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 300;
  color: #ededed;
  letter-spacing: 1px;
  margin-top: 10px;
}

.impressum {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 300;
  color: #ededed;
  letter-spacing: 1px;
  margin-top: 100px;
}


.footerRight {
  margin-top: 10px;
  font-size: 20px;
  float: right;
}
.footerRight .fa {
  color: #ededed;
  padding-right: 10px;
  -webkit-transition: 0.2s ease 0.01s;
  transition: 0.2s ease 0.01s;
}
span.fa:hover {
  color: #cc6633;
  font-size: 22px;
  padding-bottom: 5px;
}
#logo {
  position: absolute;
  left: -webkit-calc(50% - 25px);
  left: calc(50% - 25px);
}
#logo img {
  width: 150px;
  height: 50px;
}
/* == 13. MEDIA QUERIES == */
@media (max-width: 1199px) {
  .info h3 {
    margin-bottom: 12px;
  }
  .personal-section {
    margin-top: 24px;
  }
}
@media (max-width: 991px) {
  .row {
    margin-left: 0;
    margin-right: 0;
  }
  .header-content {
    width: 350px;
    padding-left: 18px;
  }
  .header-content h1 {
    font-size: 68px;
  }
  .header-content p {
    text-align: left;
  }
  .logo img {
    margin-right: 12px;
  }
  .serv-text {
    margin-bottom: 24px;
  }
  #stats .stat {
    margin-top: 48px;
    border-right: none;
  }
  #stats .stat:after {
    content: "";
    width: 150px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.1);
    display: block;
    margin: 12px auto 0 auto;
  }
  #stats .stat:first-child {
    margin-top: 0;
  }
  .skillbar {
    width: 80%;
    margin: 72px auto 0 auto;
  }
  .info h3 {
    margin-bottom: 24px;
  }
  .personal-section {
    margin-top: 48px;
  }
  .work-content {
    margin-top: 0;
  }
  .time div {
    display: block;
    text-align: center;
  }
}
@media (max-width: 767px) {
  .header-content p {
    text-align: center;
  }
  .modal-box {
    max-width: 80%;
  }
  .about-me {
    margin-top: 48px;
  }
  .profile_img img {
    width: 60%;
    margin: 0 auto;
  }
  .work-content {
    margin-top: 24px;
  }
  .time div {
    display: inline-block;
  }
}
@media (max-width: 650px) {
  .logo {
    display: none;
  }
  .header-content {
    text-align: center;
    border-left: none;
  }
  .header-content h3:after {
    content: "";
    display: block;
    width: 100px;
    height: 2px;
    background: #cc6633;
    top: -8px;
    margin: 12px auto;
  }
  .portfolio_filter ul li {
    display: block;
  }
  #logo {
    position: relative;
    display: inline-block;
  }
  .footerRight {
    float: none;
    display: block;
    text-align: center;
    margin-top: 12px;
  }
  .footerLeft {
    display: block;
    text-align: center;
  }
}
@media (max-width: 414px) {
  .header-content {
    padding: 0;
    width: 330px;
  }
  .header-content h1 {
    font-size: 54px;
  }
  .header-content h3 {
    font-size: 16px;
  }
  .header-content h3 span {
    font-size: 16px;
  }
  .header-content p {
    font-weight: 300;
    padding: 0 20px;
    font-size: 16px;
  }
  .three {
    margin-bottom: 0;
  }
  .profile_img img {
    width: 75%;
  }
  .time div {
    display: block;
    text-align: center;
  }
  .personal-info li span {
    width: 45%;
  }
}
@media (max-width: 320px) {
  .header-content {
    width: 300px;
    padding-left: 0;
  }
  .header-content h1 {
    font-size: 52px;
  }
}
@media (max-height: 360px) {
  .overlay.open {
    top: 50px;
  }
}