/*-----------------------------------------------------------------------------------

    Template Name: Self
    Template URI: http://usdtheme.com
    Description: This is html5 template
    Author: usdtheme
    Author URI: http://usdtheme.com
    Version: 1.0

-----------------------------------------------------------------------------------
    
    CSS INDEX
    ===================
	
    1. Theme Default CSS (body, link color, section etc)
    2. Header Area 
    2.1. Header Bottom 
    2.2. Sticky Menu 
    3. About Area 
    4. Add Area 
    5. Skills Area 
    6. Fun fact Area 
    7. Portfolio Area 
    8. Reviews Area 
    9. Blog  Area 
    10. Contact Area 
    11. Footer Area 

-----------------------------------------------------------------------------------*/

/*----------------------------------------*/
/*  1.  Theme default CSS
/*----------------------------------------*/
html, body {
	height: 100%;
}
.floatleft {
	float:left;
}
.floatright {
	float:right;
}
.alignleft {
	float:left;
	margin-right:15px;
	margin-bottom: 15px;
}
.alignright {
	float:right;
	margin-left:15px;
	margin-bottom: 15px;
}
.aligncenter {
	display:block;
	margin:0 auto 15px;
}
a:focus {
	outline:0px solid;
}
img {max-width:100%;
	height:auto;
}
.fix {
	overflow:hidden;
}
p {
  margin:0 0 15px;
  color: #444;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Lato', sans-serif;
  margin: 0 0 10px;
  color: #444;
}
 a {
	transition: all 0.3s ease 0s;
	text-decoration:none;
}
a:hover {
  color: #1c6daf;
  text-decoration: none;
}
ul{
list-style: outside none none;
margin: 0;
padding: 0;
}
#scrollUp {
  background: #000 none repeat scroll 0 0;
  border: 1px solid #fff;
  border-radius: 2px;
  bottom: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  color: #fff;
  font-size: 28px;
  height: 45px;
  line-height: 40px;
  opacity: 0.6;
  right: 15px;
  text-align: center;
  transition: all 0.3s ease 0s;
  width: 45px;
}
#scrollUp:hover {
  background: #1c6daf;
  opacity: 1;
  border: 1px solid #1c6daf;
}
header {
  position: static;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
}
.clear{
	clear:both;
}
body {
  background: #fff none repeat scroll 0 0;
  color: #999999;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  text-align: left;
  overflow-x: hidden;
  line-height: 22px;
}
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}
::selection {
  background: #b3d4fc;
  text-shadow: none;
}
.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}
.area-padding {
  padding: 70px 0;
}
/*--------------------------------*/
/*  2. Header Area
/*--------------------------------*/
header {
  background-image: url(img/background/bg1.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.navbar-header a.navbar-brand {
  display: inline-block;
  padding: 20px 0;
  height: 80px;
}
/* To make navbar one you scroll bigger */
.navbar-header{
	min-height:65px;
}
/* END */
.main-menu ul.navbar-nav li {
  display: inline-block;
}
.first-box{
 border:3px solid red;
 width:600px;
 padding:50px;
 background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0;
 border: 1px solid black;

}
.main-menu ul.navbar-nav li a {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  color: #000;
  font-size: 13px;
  font-weight: 500;
  padding: 29px 15px;
  text-transform: uppercase;
}
.main-menu ul.navbar-nav li.active a:hover {
  background: none;
  color:#1c6daf; 
}
.main-menu ul.navbar-nav li.active a {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  color: #1c6daf;
  position: relative;
}
.main-menu ul.navbar-nav li a:hover {
  color:#1c6daf;
}
.navbar {
  border: medium none;
  margin-bottom: 0;
}
.navbar-default {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}
.main-menu ul.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  background: none;
  color:#1c6daf;
}
.navbar-default .navbar-toggle {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: medium none;
  border-radius: 0;
  padding: 25px 0px;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
  background-color: transparent;
  color: #fff;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
  background: none;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #fff;
  width: 30px;
  height: 2px;
}
/*--------------------------------*/
/*  2.1.Header Bottom Area
/*--------------------------------*/
.header-bottom h1 {
  color: #000;
  font-size: 36px;
  letter-spacing: 2px;
  margin-bottom: 20px;
}
.header-bottom .cd-headline b {
  color: #1c6daf;
  font-weight: 400;
  margin: 0;
}
header .container {
  display: table;
  height: 100%;
}
header .row {
  display: table-cell;
  vertical-align: middle;
}
.header-overlay {
  position: absolute;
  background: rgba(0, 0, 0, 0.45);
  top: 0;
  width: 100%;
  left: 0;
  height: 100%;
}
.custom-btn:hover {
  color: #fff;
  border: 1px solid #1c6daf;
}
.custom-btn {
  background: #fff none repeat scroll 0 0;
  border-radius: 1px;
  color: #333;
  display: inline-block;
  letter-spacing: 2px;
  margin-top: 20px;
  padding: 12px 15px;
  position: relative;
  transition: all 0.4s ease 0s;
  width: 150px;
  z-index: 1;
}
.btn-2 {
  margin-left: 30px;
}
.custom-btn::before {
  background: #1c6daf;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  z-index: -1;
  width:0%;
  opacity: 0;
  transition: 0.4s
}
.custom-btn::after {
  background: #1c6daf;
  content: "";
  height: 100%;
  right: 0;
  position: absolute;
  top: 0;
  z-index: -1;
  width: 0%;
  opacity: 0;
  transition: 0.4s
}
.custom-btn:hover::before,.custom-btn:hover::after  {
  opacity: 1;
  width: 50%;
}
.header-area {
  background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0;
}
.header-area{
  left: 0;
  margin: 0 auto;
  max-width: 100%;
  position: fixed !important;
  right: 0;
  top: 0;
  z-index: 9999;
}
.logo {
  height: 40px;
  padding: 20px 0;
}
.logo a {
  display: inline-block;
  margin-top: 8px;
}
/*--------------------------------*/
/* 2.2. Stick menu
/*--------------------------------*/
.stick .navbar-header a.navbar-brand {
  display: inline-block;
  padding: 10px 0;
  height: 50px;
}
.stick .main-menu ul.nav > li > a {
  color: #333;
  font-size: 13px;
  line-height: 22px;
  padding: 20px 15px;
}
.stick .main-menu ul.nav > li > a:hover {
  color:#1c6daf;
}
.stick .main-menu ul.navbar-nav li.active a {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  color: #1c6daf;
  position: relative;
}
.stick .mainmenu ul#nav >li:hover>a,.stick .mainmenu ul#nav li .mega-menu,.stick .mainmenu ul#nav li ul.sub-menu{
  background-color: #f5f5f5;
  color: #333;
  outline: medium none;
}
.stick .mainmenu ul#nav li:hover ul.sub-menu li a:hover,.mainmenu ul#nav li .mega-menu span>a:hover,.stick .mainmenu ul#nav li .mega-menu-shop a.mega-menu-title:hover{
  color:#333;
}
.stick .logo {
  height: 20px;
}
.stick .logo a{margin-top:0px}
.header-area.stick {
  background: #fff none repeat scroll 0 0;
  border-bottom: 2px solid #1c6daf;
}
.stick .navbar-default .navbar-toggle .icon-bar {
  background-color: #1c6daf;
  width: 30px;
  height: 2px;
}
.stick .navbar-default .navbar-toggle {
  padding: 10px 0px;
}
/*--------------------------------*/
/*  3.About Area
/*--------------------------------*/
.section-head {
  display: block;
  margin-bottom: 40px;
}
.section-head h3 {
  background: #fff none repeat scroll 0 0;
  color: #333;
  display: inline-block;
  font-size: 30px;
  font-weight: 600;
  position: relative;
  text-transform: uppercase;
  z-index: 1;
  line-height: 22px;
}
.section-head h3::before {
  background: #1c6daf none repeat scroll 0 0;
  bottom: -13px;
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  width: 110%;
  z-index: -1;
}
.section-head h3::after {
  background: #333 none repeat scroll 0 0;
  bottom: -13px;
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  width: 55%;
  z-index: -1;
}
.single-about a.about-icon {
  color: #333;
  display: inline-block;
  font-size: 50px;
  transition: all 0.5s ease 0s;
  margin-bottom: 20px;
}
.single-about:hover .about-icon {
  color:#1c6daf;
  transform: scale(1.1);
}
.single-about h4 {
  color: #444;
  font-size: 17px;
  font-weight: 600;
}
.single-about p {
  color: #333;
  font-size: 14px;
}
.second-row {
  margin-bottom: 20px;
}
.second-about {
  margin-bottom: 60px;
}
.self-text ul li {
  display: block;
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
  color: #333;
}
.self-text ul li::before {
  border: 0px solid #333;
  content: "\f101";
  font-family: fontawesome;
  height: 12px;
  left: 0;
  line-height: 14px;
  position: absolute;
  text-align: center;
  top: 4px;
  width: 12px;
}
.about-self p {
  margin-bottom: 20px;
}
.download-cv a:hover {
  background: #1c6daf;
}
.download-cv a {
  background: #333 none repeat scroll 0 0;
  color: #fff;
  display: inline-block;
  font-weight: 700;
  margin: 28px 0 0px;
  padding: 10px 30px;
  transition: all 0.4s ease 0s;
}
.intro-head {
  display: inline-block;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 30px;
  position: relative;
}
.intro-head::before {
  background: #1c6daf none repeat scroll 0 0;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  bottom: -15px;
  width: 100%;
}
.intro-head::after {
  background: #333 none repeat scroll 0 0;
  content: "";
  height: 2px;
  left: 0px;
  position: absolute;
  bottom: -15px;
  width: 50%;
}
/*--------------------------------*/
/* 4.Add Area
/*--------------------------------*/
.add-area {
  background: url(img/background/bg5.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  background-attachment: fixed;
  position: relative;
}
.add-text {
  padding: 80px 0px;
  display: block;
  overflow: hidden;
}
.add-content h2 {
  color: #fff;
  font-size: 40px;
  margin-bottom: 0;
  line-height: 64px;
}
.add-btn {
  background: #333 none repeat scroll 0 0;
  border: 1px solid #fff;
  color: #fff;
  display: inline-block;
  font-size: 26px;
  letter-spacing: 0;
  margin-top: 0;
  padding: 16px 10px;
  text-transform: capitalize;
  width: 210px;
  line-height: 30px;
}
/*--------------------------------*/
/*  5.Skills Area
/*--------------------------------*/
.skills-idea h5 {
  border-bottom: 1px solid #ccc;
  font-size: 20px;
  padding: 10px 0;
}
.skills-idea ul li a {
  color: #444;
  font-size: 16px;
  text-decoration: none;
}
.skills-idea ul li a i {
  border: 1px solid #444;
  font-size: 18px;
  height: 30px;
  line-height: 30px;
  margin-right: 15px;
  text-align: center;
  width: 30px;
}
.skills-idea ul li {
  color: #444;
  margin-bottom: 10px;
}
.skill-progress {
  position: relative;
  margin-bottom: 22px;
}
.progress {
  background-color: #f5f5f5;
  border-radius: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
  height: 8px;
  margin-bottom: 20px;
  position: relative;
}
.web-per {
  background: #333 none repeat scroll 0 0;
  color: #fff;
  font-size: 10px;
  height: 16px;
  line-height: 16px;
  position: absolute;
  right: 2%;
  text-align: center;
  top: 0;
  width: 37px;
}
.web-per::after {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 9px solid #333;
  bottom: -9px;
  content: "";
  left: 13px;
  position: absolute;
}
.progress-bar {
  background: #1c6daf none repeat scroll 0 0;
  line-height: 8px;
}
.bar-2 {
  right: 7%;
}
.bar-3 {
  right: 17%;
}
.bar-4 {
  right: 27%;
}
.bar-5 {
  right: 12%;
}
.skill-edu h4 {
  margin-bottom: 40px;
}
.edu-result h5 {
  background: #333 none repeat scroll 0 0;
  color: #fff;
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  padding: 5px 10px 8px 5px;
  text-align: left;
}
.edu-result span {
  background: #333 none repeat scroll 0 0;
  color: #fff;
  display: inline-block;
  font-weight: 700;
  padding: 0 10px 0 0;
}
.edu-result h6 {
  font-size: 15px;
  font-weight: 600;
}
.last-result > p {
  margin-bottom: 0;
}
.edu-result {
  margin-bottom: 25px;
}
.last-result {
  margin-bottom: 0;
}
/*--------------------------------*/
/*  6.Counter Text Area
/*--------------------------------*/
.fun-fact-area {
  background: rgba(0, 0, 0, 0) url("img/background/bg3.jpg") repeat scroll 0 0;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  background-attachment: fixed;
}
.fun-fact-area {
  padding: 120px 0 80px;
  position: relative;
}
.head-overly {
  background: rgba(0, 0, 0,0.50) none repeat scroll 0 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.fun_text > a {
  background: #1c6daf none repeat scroll 0 0;
  color: #fff;
  display: inline-block;
  font-size: 40px;
  height: 50px;
  line-height: 49px;
  margin-bottom: 40px;
  position: relative;
  width: 100px;
}
.fun_text > a::before {
  border-bottom: 30px solid #1c6daf;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  top: -30px;
  width: 0;
}
.fun_text > a::after {
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 30px solid #1c6daf;
  bottom: -30px;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  width: 0;
}
.fun_text span {
  color: #fff;
  display: block;
  font-size: 40px;
  font-weight: 600;
  padding: 25px 0;
}

.fun_text > h6 {
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 15px;
}
/*--------------------------------*/
/*  7.Portfolio Area
/*--------------------------------*/
.single-awesome-portfolio {
  float: left;
  overflow: hidden;
  width: 25%;
}
.single-awesome-portfolio a {
  position: relative;
  display: block;
}
.awesome-img {
  overflow: hidden;
  position: relative;
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  z-index: 2;
  display:block
}
.awesome-img img{}
.awesome-info {
  background-color: #333;
  height: 100%;
  padding: 20px 30px 12px;
  position: absolute;
  top: 0;
  width: 100%;
  opacity:1;
  display:block;
}
.awesome-info h3:hover {
	color:#1c6daf;
}
.awesome-info h3 {
  color: #ddd;
  font-size: 15px;
  margin-bottom: 5px;
  font-weight: 600;
}
.awesome-info p {
  color: #aaa;
  font-size: 14px;
}
.single-awesome-portfolio a:hover .awesome-img {
  transform: translateY(100%);
}
.awesome-portfolio-menu {
  margin-bottom: 40px;
  margin-top: 20px;
}
.awesome-portfolio-menu ul{
  text-align:center;
}
.awesome-portfolio-menu ul li {
  background: #fff none repeat scroll 0 0;
  border: 1px solid #444;
  color: #333;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  margin: 0 4px;
  padding: 6px 12px;
  transition: all 0.3s ease 0s;
}
.awesome-portfolio-menu ul li.active,.awesome-portfolio-menu ul li:hover{
  border-color: #1c6daf;
  color: #1c6daf;
}
.awesome-portfolio-content .mix{
	display: none;
}
/*--------------------------------*/ 
/*  8. Reviews Area
/*--------------------------------*/
.Reviews-area {
  display: block;
  position: relative;
  width: 100%;
}
.Reviews-area {
  background: rgba(0, 0, 0, 0) url("img/background/bg3.jpg") no-repeat scroll center top / cover ;
  background-attachment: fixed;
}
.Reviews-content {
  padding: 80px 20px;
}
.testi-img img {
  border: 2px solid rgba(43, 205, 193, 1.05);
  border-radius: 50%;
  height: 80px;
  margin: 0 auto;
  padding: 5px;
  transition: background 0.6s ease-out 0s;
  width: 80px !important;
}
.testi-text p {
  color: #fff;
  font-size: 17px;
  line-height: 1.5em;
  margin: 20px 0;
  font-style: italic;
}
.testi-text.text-center > h4 {
  color: #1c6daf;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
}
.guest-rev {
  color: #fff;
  font-size: 16px;
}
.guest-rev > a {
  color: #DD5624;
  font-size: 14px;
}
.item-indicator.owl-carousel.owl-theme .owl-controls .owl-nav div {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 1px solid #1c6daf;
  border-radius: 0;
  color: #1c6daf;
  display: inline-block;
  font-size: 20px;
  height: 30px;
  line-height: 24px;
  text-align: center;
  transition: all 0.5s ease 0s;
  width: 30px;
}
.item-indicator.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-next{
  position: absolute;
  right: 0;
  top: 0;
}
.item-indicator.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-prev:hover,.item-indicator.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-next:hover{
	background:#1c6daf;
    color:#fff;
    border: 1px solid #1c6daf;
}
.item-indicator.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-prev{
  position: absolute;
  right: 5%;
  top: 0;
}
/*----------------------------------------*/
/* 9. Blog Area
/*----------------------------------------*/
.blog-area {
  background: #fff none repeat scroll 0 0;
}
.single-blog {
  display: block;
  overflow: hidden;
  margin-bottom: 3px;
}
.single-blog:hover {
   box-shadow: 1px 1px 3px rgba(31, 31, 31, 0.6), -1px -1px 3px rgba(31, 31, 31,0.6);
}
.single-blog-img {
  margin-bottom: 20px;
  overflow: hidden;
  position: relative;
  display: block;
  width: 100%;
}
.blog-item .col-md-4 {
    width: 100%;
}
.single-blog-img a {
  display: block;
}
.single-blog-img a::before {
  background: #333 none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.5;
  position: absolute;
  top: 0;
  -moz-transform: translateY(100%);
  -webkit-transform: translateY(100%);
  -o-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -moz-transition: all 0.4s ease 0s;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  width: 100%;
  z-index: 9;
}
.single-blog-img a img{
  transform: scale(1);
  transition: 0.5s;
}
.single-blog:hover .single-blog-img a img{
  transform: scale(1.1);
}
.single-blog:hover .single-blog-img a::before{
  -moz-transform: translateX(0px);
  -webkit-transform: translateX(0px);
  -o-transform: translateX(0px);
  -ms-transform: translateX(0px);
  -moz-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -ms-transition: all 0.4s;
  opacity: 0.5;
  visibility: visible;
}
.blog-content {
  padding: 0px 10px;
}
.blog-content h4 a {
  color: #444;
  font-size: 17px;
  font-weight: 600;
}
.blog-content h4 a:hover{color: #1c6daf;}
.blog-content h4 {
  margin-bottom: 10px;
}
.blog-content p {
  border-bottom: 1px solid #ccc;
  color: #444;
  font-size: 13px;
  margin-bottom: 5px;
  padding-bottom: 15px;
}
.blog-meta span.date-type {
  border-right: 1px solid #777777;
  color: #444;
  font-size: 12px;
  padding-right: 5px;
}
.blog_meta span.date_type i {
    margin-right: 5px;
}
.blog-meta span.comments-type {
  margin-left: 8px;
}
.blog-meta span.comments-type a {
  color: #444;
  font-size: 12px;
  margin-left: 5px;
}
.blog-meta span.comments-type a:hover{
  color: #1c6daf;
}
.blog-meta span i {
  padding-right: 10px;
}
.blog-meta {
  padding: 10px;
}
.blog-item.owl-carousel.owl-theme .owl-controls .owl-nav div {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 3px solid #1c6daf;
  border-radius: 0;
  color: #1c6daf;
  display: inline-block;
  font-size: 23px;
  height: 36px;
  line-height: 28px;
  text-align: center;
  transition: all 0.5s ease 0s;
  width: 36px;
}
.blog-item.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-next{
  right: 0;
  position: absolute;
  top: 50%;
}
.blog-item.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-prev {
  left: 0;
  position: absolute;
  top: 50%;
}
/*----------------------------------------*/
/* 10.Contact CSS
/*----------------------------------------*/
.contact-area {
  background: url(img/background/bg_footer.jpg);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}
.contact-area {
  position: relative;
  width: 100%;
  display: block;
}
.contact-inner {
}
.Cont-content h4.intro-head {
  color: #ddd;
}
.Cont-content h4.intro-head::after {
  background: #ddd none repeat scroll 0 0;
}
.Cont-content {
  margin-bottom: 12px;
}
.map-zone {
  display: block;
  overflow: hidden;
  background: #fff;
}
.map-area {
  float: left;
  width: 50%;
}
.contact-info {
  float: left;
  padding: 20px 20px;
  width: 50%;
}
.contact-icons > h3 {
  position: relative;
  border-bottom: 1px solid #ccc;
  display: block;
  padding: 10px 0px;
}
.contact-icons h3:before{
  content: "\f007";
  display: inline-block;
  font-family: FontAwesome;
  margin-right: 5px;
  vertical-align: text-bottom;
}
.contact-icons ul li{
  border-bottom: 1px solid #e8e8e9;
  float: left;
  font-size: 12px;
  line-height: 40px;
  list-style: outside none none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.contact-icons ul li i {
  font-size: 13px;
  margin-right: 5px;
  width: 26px;
  height: 26px;
  border: 1px solid #777;
  text-align: center;
  line-height: 23px;
  color: #777;
}
.contact-icons {
  margin-bottom: 20px;
  overflow: hidden;
}
.contact-icons ul li a:hover {
  text-decoration: underline;
}
.contact-icons ul li a {
  color: #1c6daf;
}
.contact-form h3 {
  margin-bottom: 30px;
}
.contact-form input[type="text"], .contact-form input[type="email"] {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 1px solid #fff;
  border-radius: 0;
  color: #fff;
  height: 40px;
  margin-bottom: 16px;
  padding-left: 20px;
  width: 100%;
}
.contact-form textarea#message {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 1px solid #fff;
  border-radius: 0;
  height: 140px;
  padding: 20px;
  width: 100%;
  color: #fff;
}
.contact-form input[type="submit"] {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 1px solid #ddd;
  border-radius: 0;
  color: #ddd;
  display: block;
  font-size: 16px;
  font-weight: 700;
  margin-top: 16px;
  padding: 13px 24px;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
  width: 100%;
}
.contact-form input[type=submit]:hover{
  color:#fff;
  border: 1px solid #1c6daf;
  background: #1c6daf;
}
.icons-bottom ul li{
  display: inline-block;
}
.icons-bottom ul li a:hover {
  border: 2px solid #1c6daf;
  background: #1c6daf;
  color: #fff;
}
.icons-bottom ul li a {
  border: 2px solid #444;
  color: #444;
  display: block;
  font-size: 16px;
  height: 40px;
  line-height: 37px;
  margin: 0 3px;
  width: 40px;
}
/*----------------------------------------*/
/*  11.Fotter  CSS
/*----------------------------------------*/
.footer-area {
  background: #fff;
  padding: 20px 0px;
  border-top: 2px solid #1c6daf;
}
.copyright p {
  color: #333;
  font-size: 12px;
  margin-bottom: 0;
}
.copyright a {
  color: #1c6daf;
}



/*----------------------------------------*/
/*  12.Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device (for jQuery or Zepto.js). */
/*----------------------------------------*/

/* Jorge */
span.error{
	display: block;
    color: #cd3434;
    margin-top: 5px;
}
span.errorhidden{
	display:none !important;
}
p.completerror{
    color: #fff;
    display: block;
    margin-top: 5px;
}
/* End Jorge */

/* Styles for dialog window */
.small-dialog {
	background: white;
	padding: 20px 30px;
	text-align: left;
	margin: 90px auto 120px;
	position: relative;
}

#haftungsausschluss,#datenschutz {
	max-width: 75%;
}
#impressum,#mailsenden{
	max-width:500px;	
}




/**
 * Fade-zoom animation for first dialog
 */

/* start state */
.my-mfp-zoom-in .zoom-anim-dialog {
	opacity: 0;

	-webkit-transition: all 0.2s ease-in-out; 
	-moz-transition: all 0.2s ease-in-out; 
	-o-transition: all 0.2s ease-in-out; 
	transition: all 0.2s ease-in-out; 



	-webkit-transform: scale(0.8); 
	-moz-transform: scale(0.8); 
	-ms-transform: scale(0.8); 
	-o-transform: scale(0.8); 
	transform: scale(0.8); 
}

/* animate in */
.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
	opacity: 1;

	-webkit-transform: scale(1); 
	-moz-transform: scale(1); 
	-ms-transform: scale(1); 
	-o-transform: scale(1); 
	transform: scale(1); 
}

/* animate out */
.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
	-webkit-transform: scale(0.8); 
	-moz-transform: scale(0.8); 
	-ms-transform: scale(0.8); 
	-o-transform: scale(0.8); 
	transform: scale(0.8); 

	opacity: 0;
}

/* Dark overlay, start state */
.my-mfp-zoom-in.mfp-bg {
	opacity: 0;
	-webkit-transition: opacity 0.3s ease-out; 
	-moz-transition: opacity 0.3s ease-out; 
	-o-transition: opacity 0.3s ease-out; 
	transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-zoom-in.mfp-ready.mfp-bg {
	opacity: 0.8;
}
/* animate out */
.my-mfp-zoom-in.mfp-removing.mfp-bg {
	opacity: 0;
}



/**
 * Fade-move animation for second dialog
 */

/* at start */
.my-mfp-slide-bottom .zoom-anim-dialog {
	opacity: 0;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;

	-webkit-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
	-moz-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
	-ms-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
	-o-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
	transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );

}

/* animate in */
.my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog {
	opacity: 1;
	-webkit-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
	-moz-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
	-ms-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
	-o-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
	transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
}

/* animate out */
.my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog {
	opacity: 0;

	-webkit-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
	-moz-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
	-ms-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
	-o-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
	transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
}

/* Dark overlay, start state */
.my-mfp-slide-bottom.mfp-bg {
	opacity: 0;

	-webkit-transition: opacity 0.3s ease-out; 
	-moz-transition: opacity 0.3s ease-out; 
	-o-transition: opacity 0.3s ease-out; 
	transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-slide-bottom.mfp-ready.mfp-bg {
	opacity: 0.8;
}
/* animate out */
.my-mfp-slide-bottom.mfp-removing.mfp-bg {
	opacity: 0;
}