/* =================================================

Template Name:  Alvin - Personal Portfolio Template
Author: MouriThemes
Version: 1.0
Design and Developed by: MouriThemes

NB: This is the main stylesheet of this theme.

=================================================== */

/*
Table of content

1. Default css
2. Preloader css
3. Nav area css
4. Mouse Animate Icon css
5. Banner area css
6. About area css
7. Skills area css
8. Services area css
9. Statistic area css
10. Portfolio area css
11.  parallax News Area css
12. parallax Page css
13. Hire me area css
14. Contact area css
15. Footer area css

*/


/*---------- 1. Default css starts ------------*/
/* cormorant-garamond-300 - latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/cormorant-garamond-v5-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Cormorant Garamond Light'), local('CormorantGaramond-Light'),
       url('../fonts/cormorant-garamond-v5-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/cormorant-garamond-v5-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/cormorant-garamond-v5-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/cormorant-garamond-v5-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/cormorant-garamond-v5-latin-300.svg#CormorantGaramond') format('svg'); /* Legacy iOS */
}

/* cormorant-garamond-300italic - latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/cormorant-garamond-v5-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local('Cormorant Garamond Light Italic'), local('CormorantGaramond-LightItalic'),
       url('../fonts/cormorant-garamond-v5-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/cormorant-garamond-v5-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/cormorant-garamond-v5-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/cormorant-garamond-v5-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/cormorant-garamond-v5-latin-300italic.svg#CormorantGaramond') format('svg'); /* Legacy iOS */
}

/* cormorant-garamond-regular - latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/cormorant-garamond-v5-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Cormorant Garamond Regular'), local('CormorantGaramond-Regular'),
       url('../fonts/cormorant-garamond-v5-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/cormorant-garamond-v5-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/cormorant-garamond-v5-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/cormorant-garamond-v5-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/cormorant-garamond-v5-latin-regular.svg#CormorantGaramond') format('svg'); /* Legacy iOS */
}

/* cormorant-garamond-italic - latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/cormorant-garamond-v5-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Cormorant Garamond Italic'), local('CormorantGaramond-Italic'),
       url('../fonts/cormorant-garamond-v5-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/cormorant-garamond-v5-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/cormorant-garamond-v5-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/cormorant-garamond-v5-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/cormorant-garamond-v5-latin-italic.svg#CormorantGaramond') format('svg'); /* Legacy iOS */
}

/* cormorant-garamond-500 - latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/cormorant-garamond-v5-latin-500.eot'); /* IE9 Compat Modes */
  src: local('Cormorant Garamond Medium'), local('CormorantGaramond-Medium'),
       url('../fonts/cormorant-garamond-v5-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/cormorant-garamond-v5-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/cormorant-garamond-v5-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/cormorant-garamond-v5-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/cormorant-garamond-v5-latin-500.svg#CormorantGaramond') format('svg'); /* Legacy iOS */
}

/* cormorant-garamond-500italic - latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/cormorant-garamond-v5-latin-500italic.eot'); /* IE9 Compat Modes */
  src: local('Cormorant Garamond Medium Italic'), local('CormorantGaramond-MediumItalic'),
       url('../fonts/cormorant-garamond-v5-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/cormorant-garamond-v5-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/cormorant-garamond-v5-latin-500italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/cormorant-garamond-v5-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/cormorant-garamond-v5-latin-500italic.svg#CormorantGaramond') format('svg'); /* Legacy iOS */
}

/* cormorant-garamond-600 - latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/cormorant-garamond-v5-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Cormorant Garamond SemiBold'), local('CormorantGaramond-SemiBold'),
       url('../fonts/cormorant-garamond-v5-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/cormorant-garamond-v5-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/cormorant-garamond-v5-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/cormorant-garamond-v5-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/cormorant-garamond-v5-latin-600.svg#CormorantGaramond') format('svg'); /* Legacy iOS */
}

/* cormorant-garamond-600italic - latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/cormorant-garamond-v5-latin-600italic.eot'); /* IE9 Compat Modes */
  src: local('Cormorant Garamond SemiBold Italic'), local('CormorantGaramond-SemiBoldItalic'),
       url('../fonts/cormorant-garamond-v5-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/cormorant-garamond-v5-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/cormorant-garamond-v5-latin-600italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/cormorant-garamond-v5-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/cormorant-garamond-v5-latin-600italic.svg#CormorantGaramond') format('svg'); /* Legacy iOS */
}

/* cormorant-garamond-700 - latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/cormorant-garamond-v5-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Cormorant Garamond Bold'), local('CormorantGaramond-Bold'),
       url('../fonts/cormorant-garamond-v5-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/cormorant-garamond-v5-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/cormorant-garamond-v5-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/cormorant-garamond-v5-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/cormorant-garamond-v5-latin-700.svg#CormorantGaramond') format('svg'); /* Legacy iOS */
}
/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans-v15-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Light'), local('OpenSans-Light'),
       url('../fonts/open-sans-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-300italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/open-sans-v15-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
       url('../fonts/open-sans-v15-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-300italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('../fonts/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/open-sans-v15-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Italic'), local('OpenSans-Italic'),
       url('../fonts/open-sans-v15-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans-v15-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
       url('../fonts/open-sans-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v15-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Bold'), local('OpenSans-Bold'),
       url('../fonts/open-sans-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* roboto-condensed-300 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-condensed-v16-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed Light'), local('RobotoCondensed-Light'),
       url('../fonts/roboto-condensed-v16-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v16-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v16-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v16-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v16-latin-300.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-300italic - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/roboto-condensed-v16-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed Light Italic'), local('RobotoCondensed-LightItalic'),
       url('../fonts/roboto-condensed-v16-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v16-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v16-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v16-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v16-latin-300italic.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-italic - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/roboto-condensed-v16-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed Italic'), local('RobotoCondensed-Italic'),
       url('../fonts/roboto-condensed-v16-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v16-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v16-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v16-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v16-latin-italic.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-700 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-condensed-v16-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed Bold'), local('RobotoCondensed-Bold'),
       url('../fonts/roboto-condensed-v16-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v16-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v16-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v16-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v16-latin-700.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-regular - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-condensed-v16-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed'), local('RobotoCondensed-Regular'),
       url('../fonts/roboto-condensed-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v16-latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}


html, body {
	height: 100%;
}
body {
 background-color:;
	font-family: 'Open sans', sans-serif;
	width: 100%;
	height: 100%;
	font-size: 15px;
	letter-spacing: 0.02em;
	color: #333333;
	font-weight: 400;
}
h1 {
	font-family: 'Open Sans', sans-serif;
	color: #fff;
	font-size: 28px;
	font-weight: 600;
	letter-spacing: 0.05;
	text-transform: uppercase;
}
h2 {
	font-family: 'Cormorant Garamond', serif;
	color: #fff;
	font-size: 25px;
	font-weight: 600;
	letter-spacing: 0.1;
	text-transform: uppercase;
}
h2.service {
	font-family: 'Open Sans', sans-serif;
	color: #eca700;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.05;
	text-transform: uppercase;
}
h3 {
	font-family: 'Cormorant Garamond', serif;
	color: #828d97;
	font-size: 25px;
	font-weight: 600;
	letter-spacing: 0.1;
	text-transform: uppercase;
}
h4 {
	font-family: 'Cormorant Garamond', serif;
	color: #828d97;
	font-size: 18px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0.05;
    font-style: italic;
	
}
h5 {
	color: #828d97;
	font-size: 12px;
	line-height: 14px;
	font-weight: 400;
	letter-spacing: 0.02;
}
p {
	letter-spacing: 0.01em;
	line-height: 1.6em;
}
p.profil {
	font-family: 'Roboto condensed', sans-serif;
	font-size: 16px;
	letter-spacing: 0.02em;
	color: #777777;
	font-weight: 400;
	line-height: 1.6;
}
a {
	text-decoration: none;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	color: rgba(220, 195, 150, 1);
}
a:hover {
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: rgba(220, 195, 150, 0.5);
}
a:focus {
	outline: none;
	text-decoration: none;
}
ul, li {
	margin: 0;
	padding: 0;
}
img {
	max-width: 100%;
	height: auto;
}
.section-padding {
	padding-top: 60px;
	padding-right: 0;
	padding-bottom: 60px;
	padding-left: 0;
}
.section-header {
	margin-bottom: 20px;
	text-align: center;
}
.section-header .line {
	height: 2px;
	width: 70px;
	background: #eca700;
	margin: auto;
}
.section-header h2 {
	margin-bottom: 30px;
}
.mb-30 {
	margin-bottom: 30px;
}
/*---------- default css ends ------------*/

/*-------------- 2. Preloader css starts ---------------*/


#loader-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000000;
	overflow: hidden;
}
#loader {
	display: block;
	position: relative;
	left: 50%;
	top: 50%;
	width: 150px;
	height: 150px;
	margin: -75px 0 0 -75px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top-color: #ffffff;
	z-index: 15;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}
#loader:before {
	content: "";
	position: absolute;
	top: 5px;
	left: 5px;
	right: 5px;
	bottom: 5px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top-color: #ffffff;
	-webkit-animation: spin 3s linear infinite;
	animation: spin 3s linear infinite;
}
#loader:after {
	content: "";
	position: absolute;
	top: 15px;
	left: 15px;
	right: 15px;
	bottom: 15px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top-color: #ffffff;
	-webkit-animation: spin 1.5s linear infinite;
	animation: spin 1.5s linear 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);
}
}
.no-js #loader-wrapper {
	display: none;
}
#loader-wrapper .loader-section {
	position: fixed;
	top: 0;
	width: 51%;
	height: 100%;
	z-index: 11;
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	background-color: #eca700;
	background-image: url(../images/bg-gelb.jpg);
}
#loader-wrapper .loader-section.section-left {
	left: 0;
}
#loader-wrapper .loader-section.section-right {
	right: 0;
}
.loaded #loader-wrapper .loader-section.section-left {
	-webkit-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	transform: translateX(-100%);
	-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
	transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.loaded #loader-wrapper .loader-section.section-right {
	-webkit-transform: translateX(100%);
	-ms-transform: translateX(100%);
	transform: translateX(100%);
	-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
	transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.loaded #loader {
	opacity: 0;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
.loaded #loader-wrapper {
	visibility: hidden;
	-webkit-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	transform: translateY(-100%);
	-webkit-transition: all 0.3s 1s ease-out;
	transition: all 0.3s 1s ease-out;
}
/*---------- preloader css ends -------------*/

/*---------- 3. Nav area css starts -------------*/

.nav-area {
	height: 65px;
}
.nav-area.sticky_navigation {
	background: #ffffff;
	height: 55px;
}
.sticky_navigation {
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
	-webkit-box-shadow: 0px 3px 4.6px 0.3px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 3px 4.6px 0.3px rgba(0,0,0,0.25);
	box-shadow: 0px 3px 4.6px 0.3px rgba(0,0,0,0.25);
}
.sticky_navigation .main-menu {
	margin-top: 0;
}
.sticky_navigation .navbar-brand, .sticky_navigation .navbar-brand span {
	color: #eca700;
}
.sticky_navigation .navbar-brand:hover, .sticky_navigation .navbar-brand:focus, .sticky_navigation .navbar-brand span {
	color: #eca700;
}
.sticky_navigation .nav li a {
	color: #333333;
}
.sticky_navigation .nav li.active a {
	color: #eca700;
}
.sticky_navigation .navbar-brand:hover {
	color: #333333;
}
.main-menu {
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
	margin-top: 10px;
}
.navbar {
	border: 0;
	margin-bottom: 0;
}
.navbar-brand {
	padding: 15px 0;
	text-transform: uppercase;
	font-size: 25px;
	display: block;
	
    letter-spacing: 0.1em;
	font-weight: 700;
}
.navbar-brand:focus, .navbar-brand:hover {
	text-decoration: none;
	color: #ffffff;
	border: 0;
}
.navbar-right li {
	display: inline-block;
	float: none;
}
.navbar-right li a {
	color: #ffffff;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.1em;
}
.navbar-right li.active a {
	font-weight: bold;
	color: #8997a3;
}
.nav > li > a:hover, .nav > li > a:active, .nav > li > a:focus {
	background: none;
	border: 0;
}
.navbar-toggle .icon-bar {
	background: #777777;
}
/*---------- Nav area css ends -------------*/

/*----------- 4. Mouse Animate Icon Starts ------------------*/

.mouse-icon {
	position: absolute;
	left: 10%;
	bottom: -160px;
	border: 2px solid #fff;
	border-radius: 16px;
	height: 50px;
	width: 30px;
	margin-left: -17px;
	display: block;
	z-index: 10;
}
.mouse-icon .wheel {
	-webkit-animation-name: drop;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 0s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-play-state: running;
	animation-name: drop;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-play-state: running;
}
.mouse-icon .wheel {
	position: relative;
	border-radius: 10px;
	background: #fff;
	width: 4px;
	height: 10px;
	top: 4px;
	margin-left: auto;
	margin-right: auto;
}
 @keyframes drop {
 0% {
top:5px;
opacity: 0;
}
 30% {
top:10px;
opacity: 1;
}
 100% {
top:25px;
opacity: 0;
}
}
/* --------- Mouse Animate Icon ends -------------- /*


/* --------- 5. Banner area css starts -----------*/

.banner-area {
	background-image: url(../images/banner.jpg);
	background-position: center;
	-webkit-background-size: cover;
	background-size: cover;
	position: relative;
	height: 100%;
}
.video-bg-area {
	position: relative;
}
.video-bg-area::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 1;
}
.banner-table {
	display: table;
	margin: 0;
	position: relative;
	height: 100%;
	width: 100%;
	z-index: 1;
}
.banner-table-cell {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
.intro.animate-rotate-3 h1 {
}
.ah-headline.letters.rotate-3 span {
	color: #fff;
}
.ah-words-wrapper b {
    font-family: 'Cormorant Garamond', serif;
	color: rgba(255, 255, 255, 0.7);
	font-weight: 700;
	font-size: 1.2em;
	line-height: 2.0;
	
}
.socials {
	margin-top: 30px;
}
.socials a i {
	width: 40px;
	height: 40px;
	text-align: center;
	display: inline-block;
	padding: 13px;
	font-size: 15px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background: #eca700;
	color: #ffffff;
	margin: 0 5px 0 0;
}
.socials a i:hover {
	border-color: #eca700;
	color: #ffffff;
	background: #eca700;
	-webkit-transition: ease .5s;
	-moz-transition: ease .5s;
	-ms-transition: ease .5s;
	-o-transition: ease .5s;
	transition: ease .5s;
}
.welcome-text {
	color: #ffffff;
	text-align: left;
}
.welcome-text h2 {
	font-size: 3.8em;
	font-weight: 300;
	color: #ffffff;
}
.banner-btn a {
	background-color: #eca700;
	color: #ffffff;
	padding: 10px 35px;
	display: inline-block;
	margin-top: 25px;
	border-radius: 25px;
	text-decoration: none;
	letter-spacing: 2px;
}
.about-area {
    background: url(../images/bg-hellgrau.png);
	
}
.about-area .proPic img {
    
	width: 100%;
	margin-top: 60px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.about-text h4 {
	font-size: 23px;
	text-transform: uppercase;
	margin: 0 0 30px 0;
}
/*--------------- About area ends ----------------*/


/*------ 7. Skills area starts-----*/


.resume-area {
	
	color: #444;
}
.skillbar {
	position: relative;
	display: block;
	width: 100%;
	margin-bottom: 30px;
}
.skillbar-bar:before {
	background: #ffffff;
	content: "";
	height: 3px;
	position: absolute;
	width: 100%;
	z-index: -1;
}
.skillbar-bar {
	height: 3px;
	width: 0px;
	background: #eca700;
	transition-property: width, background-color;
}
.skillbar-title {
	color: #ffffff;
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	display: inline-block;
}
.skill-bar-percent {
	float: right;
	display: inline-block;
	color: #ffffff;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
}
.job-area h2, .skills-area h2 {
	color: #ffffff;
	font-size: 22px;
	margin-bottom: 50px;
	text-transform: uppercase;
	background: #eca700;
	padding: 5px 15px;
	display: inline-block;
}
.experience-area h3 {
	color: #ffffff;
	margin: 0;
}
.experience-area h5 {
	color: #eca700;
}
/*------skills area ends-----*/

/*---------------8. Services area Starts--------------*/

.single-services {
	margin-left: -15px;
	margin-right: -15px;
	margin-bottom: 0;
	padding: 25px 25px;
}
/*--------------- Services area ends --------------*/

/*----------------9. Statistic area starts-------------------*/

.statistic-area {
	background-color: #505050;
	color: #fff;
	text-align: center;
}
.statistic-area .item {
	margin-bottom: 30px;
}
.statistic-area .item .fa {
	color: #fff;
	font-size: 40px;
}
.statistic-area .item p {
	color: #fff;
	margin-top: 10px;
	font-size: 20px;
	font-weight: 300;
}
.statistic-area .item h2 {
	color: #eca700;
	font-weight: 800;
	font-size: 45px;
	margin-top: 10px;
}
/*----------------Statistic area ends-------------------*/

/*--------------10. Portfolio area starts-----------*/


.gallery-items {
	position: relative;
}
.gallery-items .img {
	display: block;
	position: relative;
}
.gallery-items .img:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(17, 171, 176, 0.9);
	color: #fff;
	opacity: 0;
	-webkit-transition: .7s;
	-moz-transition: .7s;
	-ms-transition: .7s;
	-o-transition: .7s;
	transition: .7s;
}
.gallery-items .img img {
	width: 100%;
}
.gallery-items:hover .img::before {
	content: "";
	display: block;
	position: absolute;
	top: 10px;
	right: 10px;
	bottom: 10px;
	left: 10px;
	opacity: 1;
}
.gallery-items:hover .gallery-text {
	opacity: 1;
	-webkit-transition: .9s;
	-moz-transition: .9s;
	-ms-transition: .9s;
	-o-transition: .9s;
	transition: .9s;
}
.gallery-text {
	opacity: 0;
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	max-width: 80%;
	text-align: center;
}
.gallery-text i {
	font-size: 2em;
	cursor: pointer;
}
.gallery-text h3 {
	text-transform: uppercase;
	position: relative;
	margin-bottom: 5px;
	padding-top: 15px;
	padding-bottom: 0;
	font-size: 17px;
	letter-spacing: 2px;
}
.gallery-text h3:after {
	height: 3px;
}
.gallery-text h2 {
	color: #ffffff;
	font-size: 16px;
	letter-spacing: 5px;
	text-transform: uppercase;
	font-weight: 400;
}
.portfolio-mini-desc p {
	margin: 0;
	text-transform: capitalize;
	font-size: 14px;
	letter-spacing: .05em;
	font-weight: 300;
}
.no-padding {
	margin: 0;
	padding: 0;
}
.testimonial-area {
	background-image: url(../images/bg-grau.gif);
}
.single-testimonial {
	background: #ffffff;
	border-radius: 5px;
	padding: 30px;
}
.single-testimonial p {
	margin-bottom: 30px;
}
.single-testimonial h2 {
	margin: 10px 0 0;
	font-size: 18px;
	text-transform: uppercase;
}
.testi-comment i {
	font-size: 30px;
	color: #eca700;
}
.single-testimonial h3 {
	margin: 10px 0 0;
	font-weight: 100;
	font-size: 15px;
}
.testi-img {
	height: 70px;
	width: 70px;
	border-radius: 50%;
	overflow: hidden;
}
.testi-img img {
	width: 100%;
	height: 100%;
}
.owl-theme .owl-controls {
	margin-top: 50px;
	margin-left: 30px;
}
.owl-dots {
	text-align: center;
	margin-top: 30px;
}
.owl-dot {
	display: inline-block;
	height: 15px !important;
	width: 15px !important;
	background-color: #ffffff !important;
	opacity: 0.8;
	border-radius: 50%;
	margin: 0 5px;
}
.owl-dot.active {
	background-color: #eca700 !important;
}
/*------------ Portfolio area ends ---------*/

/*---- 11. parallax News Area Starts ------*/

.parallax-single {
	margin-bottom: 30px;
}
.parallax-news-area .header-text > h2 {
	left: 33%;
}
.parallax-news-area .header-text {
	margin-bottom: 100px;
}
.news-img {
	position: relative;
	overflow: hidden;
}
.news-img img {
	width: 100%;
}
.single-post > h2 {
	color: #333333;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 25px;
}
.single-post > h5 {
	font-size: 13px;
	font-weight: 600;
	color: #555555;
}
.single-post h5 span {
	color: #3498DB;
	font-size: 35px;
	margin: 5px;
	padding: 0;
}
.single-post > p {
	font-size: 14px;
	text-align: left;
}
.single-post > a {
	display: inline-block;
	font-size: 13px;
	margin: 25px 0;
	text-transform: uppercase;
	padding: 5px 10px;
	border: 1px solid #3498DB;
	background: #eca700;
	color: #ffffff;
	font-weight: 600;
	border-radius: 0;
}
.single-post > a:hover {
	border-radius: 25px;
	display: inline-block;
	text-decoration: none;
	color: #ffffff;
}
.single-post {
	border-left: 1px solid #DADADA;
	border-right: 1px solid #dadada;
	border-bottom: 1px solid #dadada;
	border-top: 1px solid transparent;
	padding: 10px 20px;
	text-align: left;
}
.post-date span {
	color: #333333;
	font-weight: 600;
	letter-spacing: 1px;
}
.single-parallax-news {
	box-shadow: rgba(58,78,95,0.2) 0 10px 16px, rgba(58,78,95,0.05) 0 -5px 16px;
}
.view-all {
	text-align: right;
}
.view-all a {
	background: #fff;
	text-decoration: none;
	color: #333;
	border-radius: 0;
	padding: 10px 15px;
	display: inline-block;
	margin-top: 30px;
	font-weight: 600;
	margin-right: 70px;
	border: 1px solid #333333;
}
/*---- parallax News Area Ends ----*/

/*---12. parallax Page starts---*/


.parallax-img-area {
	 position: relative;
	background-size: cover;
	text-align: center;
	color: #ffffff;
	background-image: url(../images/parallax-bg.jpg);
	background-position: center center;
	background-attachment: fixed;
}
.parallax-img-area:before {
	background-color: #000;
	content: "";
	height: 100%;
	left: 0;
	opacity: 0.5;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}
.parallax-img-area h1 {
	font-size: 46px;
	color: #fff;
	text-transform: capitalize;
	font-weight: 700;
	margin-top: 0;
}
.parallax-head-area h2 {
	color: #ffffff;
}
.breadcroumb {
	color: #fff;
	font-size: 16px;
}
.single-parallax h2 {
	font-size: 20px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	font-weight: 400;
	margin-bottom: 15px;
}
.single-parallax-img-area {
	text-align: center;
}
.parallax-text-area {
	margin-top: 15%;
}
.parallax-table {
	display: table;
	width: 100%;
	height: 100%;
	text-align: center;
}
.parallax-table-cell {
	display: table-cell;
	vertical-align: middle;
}
.breadcrumb {
	background-color: transparent;
	color: #ffffff;
}
.breadcrumb a {
	color: #ffffff;
	text-decoration: none;
}
.single-parallax img {
	width: 100%;
}
.single-parallax h2 {
	font-size: 20px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	font-weight: 400;
	margin-bottom: 15px;
}
.single-post-text {
	padding: 20px;
	border: 1px solid #dddddd;
}

}
.com-right {
	float: right;
}
.discussion-area ul.discussion-tally {
	list-style: outside none none;
	margin: 0;
	padding: 0;
}
.row.discussion-reply {
	margin-left: 120px;
	margin-top: 40px;
}
h3.discussion-title {
	margin-bottom: 30px;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 18px;
	letter-spacing: 1px;
}
h3.dis-form-title {
	margin-bottom: 20px;
	font-weight: 600;
}
.single-post-details {
	margin-bottom: 50px;
}
.discussion-metadata h5 {
	text-transform: uppercase;
	color: #666666;
	margin-top: 0;
}
.discussion-contents p {
	color: #7e7e7e;
	font-size: 14px;
	font-weight: normal;
	line-height: 24px;
}
.dis-button {
	font-weight: 700;
	color: #555555;
}
.dis-button:hover {
	color: #555555;
}
.discussion-items {
	border-bottom: 1px solid #ddd;
	margin-bottom: 40px;
	padding-bottom: 25px;
}
.discussion-items:last-child {
	border-bottom: 0px solid;
}
h3.dis-form-title {
	text-transform: uppercase;
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 1px;
}
.discussion-form-area .form-control {
	background-color: rgba(0, 0, 0, 0);
	border: 1px solid #ddd;
	border-radius: 0;
	box-shadow: none;
	height: 45px;
}
.discussion-form-area .form-control:focus {
	background-color: rgba(0, 0, 0, 0);
	border: 1px solid #ddd;
}
.discussion-form-area textarea.form-control {
	height: 150px;
	resize: none;
}
.filled-btn.btn-comment {
	border: 0 solid;
	margin-top: 10px;
}
.discussion-area .custom-button-4 {
	color: #fff;
}
.com-left span {
	color: #3498DB;
	font-weight: 600;
}
.com-left span i {
	color: #555555;
}
.com-right a {
	color: #3498DB;
	text-decoration: none;
	font-weight: 600;
}
blockquote {
	border-left: 5px solid #dddddd;
}
.single-post-text h2 {
	font-size: 30px;
	line-height: 41px;
	color: #000;
	font-weight: 600;
	letter-spacing: -1px;
}
.single-post-text h4 {
	font-size: 13px;
	color: #b9b9b9;
	margin-bottom: 30px;
}
.single-post-text h4 span {
	color: #000;
	margin: 0 5px;
}
/*------parallax Page ends-------------*/

/*-------- 13. Hire me area starts ---------*/

.hire-me-area {
	background: #505050;
	color: #ffffff;
}
.single-hire h2 {
	color: #ffffff;
	text-transform: uppercase;
	font-size: 25px;
	margin-bottom: 25px;
}
.single-hire p {
	font-size: 18px;
}
.single-hire a {
	background: #eca700;
	color: #ffffff;
	padding: 5px 30px;
	display: inline-block;
	margin-top: 25px;
	text-transform: uppercase;
	text-decoration: none;
}
/*-------- Hire me area ends -----------*/

/*-------------14. Contact area starts -------------*/

.contact-area {
	background-color: #ffffff;
	text-align: center;
}
.contact-area .form-control {
	border: 2px solid #a2a2a2;
	box-shadow: none;
	padding: 6px;
	border-radius: 0;
}
.right-contact-text {
	margin-bottom: 20px;
}
.right-contact-text i {
	color: #eca700;
	font-size: 25px;
	margin-bottom: 10px;
}
.contact-area textarea.form-control {
	border: 2px solid #a2a2a2;
	padding: 6px;
	height: 250px;
	margin-bottom: 30px;
}
.btn.btn-send {
	background: #eca700;
	color: #ffffff;
	border-radius: 0;
	padding: 15px 20px;
	text-transform: uppercase;
	font-weight: 600;
}
.right-contact-text h2 {
	margin-top: 2px;
	margin-bottom: 5px;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 3px;
}
.right-contact-text p {
	line-height: 12px;
	letter-spacing: 2px;
	font-size: 11px;
	color: #777;
}
/*------------- Contact area ends -------------*/

/*--------------15. Footer area starts -------------*/


.footer-area {
	background: #272d31;
	color: #ffffff;
	padding: 30px 0;
}

/*--------------- Footer area ends -------------*/