@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,700&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Audiowide&subset=latin,latin-ext);


 

/* 	=====================
	=== Grid  ====
	===================== */



html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0;   padding: 0;   border: 0;   font-size: 100%;   font: inherit;   vertical-align: top; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body {   line-height: 1;}
ol, ul {  list-style: none; }
blockquote, q {  quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: '';  content: none; }
table { border-collapse: collapse; border-spacing: 0; }



/* Fluid */

.container, .container-fluid { margin-right: auto;   margin-left: auto;  -moz-box-sizing: border-box;  -webkit-box-sizing: border-box;  box-sizing: border-box;}
.container:before, .container-fluid:before,.row:before,.container:after,.container-fluid:after,.row:after { content: " ";  display: table;}
.container:after, .container-fluid:after,.row:after {  clear: both;}




.container-fluid [class*="grid-"] { float: left;  width: 7.33333333%;  min-height: 1px; margin: 0 1%;}

.container-fluid .grid-12 {  width: 98%;}
.container-fluid .grid-11 {  width: 89.66666667%;}
.container-fluid .grid-10 {  width: 81.33333333%;}
.container-fluid .grid-9 {   width: 73%;}
.container-fluid .grid-8 {  width: 64.66666667%;}
.container-fluid .grid-7 {  width: 56.33333333%;}
.container-fluid .grid-6 {  width: 48%;}
.container-fluid .grid-5 {  width: 39.66666667%;}
.container-fluid .grid-4 {  width: 31.33333333%;}
.container-fluid .grid-3 {  width: 23%;}
.container-fluid .grid-2 {  width: 14.66666667%;}
.container-fluid .grid-1 {  width: 6.33333333%;}



.container{ width: 1180px;}


@media (min-width: 980px) and (max-width: 1199px) {
	.container{ width: 940px;}
}



@media (min-width: 768px) and (max-width: 979px) {
	.container { width: 748px;}
}




@media (max-width: 767px) {

	.container{ width: 420px; }

	.container [class*="grid-"], .container-fluid [class*="grid-"] {  float: none;  display: block;  width: 100%; margin-left: 0;}
  
}



@media (max-width: 479px) {

	
	.container{ width: 300px;}


  
}



/****Form****/

#form{
	position:relative;
	overflow: hidden;
}

#form input[type="text"] {
	
	
	box-sizing: border-box;
	-webkit-appearance: none;
	position: relative;
	-moz-box-sizing: border-box; /*Firefox 1-3*/
	-webkit-box-sizing: border-box; /* Safari */

}



#form  textarea{

 
	position: relative;
	resize:none;
	overflow: hidden;
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-box-sizing: border-box; /*Firefox 1-3*/
	-webkit-box-sizing: border-box; /* Safari */
	
}



#form label {

	position: relative;
	display: block;

	
}

#form .error-message, #form .empty-message {
	color: #b10034;
	font: 300 14px 'Roboto';
	width:auto;
	position: absolute;
	z-index: 999;
	top: 10px;
	opacity: 0;
	right: 20px;
	transition: 0.5s ease;
	-o-transition: 0.5s ease;
	-webkit-transition: 0.5s ease;
	
}

#form ._placeholder {
	transition: 0.5s ease;
	-o-transition: 0.5s ease;
	-webkit-transition: 0.5s ease;
	color:#6d7883;
	font: 300 14px 'Roboto';
	border: 1px solid transparent;
	box-sizing: border-box;
	-moz-box-sizing: border-box; /*Firefox 1-3*/
	-webkit-box-sizing: border-box; /* Safari */
	position: absolute;
	right: 0 !important;
	top: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	display: block;
	width:100%;
	padding:10px;

}


#form .invalid .error-message, #form .empty .empty-message {
	opacity: 1;
}


#form .success-message {
	display: none; 
	opacity: 0; 
	position: absolute;
	width: 100%;
	height: -9px;
	background-color: #e14f61;
	color: #fff;
    font: 300 18px 'Roboto';
	text-align: center;
	padding: 12px 0px;
	z-index: 999;
	box-sizing: border-box;
	-moz-box-sizing: border-box; /*Firefox 1-3*/
	-webkit-box-sizing: border-box; /* Safari */
	transition: 0.5s ease;
	-o-transition: 0.5s ease;
	-webkit-transition: 0.5s ease;
}

#form.success .success-message {
	display: block;
	opacity: 1;
}
.success_wrapper {
	position: relative;	
}

#form ._placeholder.hidden {
	display: none;
}
#form ._placeholder.focused {
	opacity: 0.5;
}





#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {

}
#cssmenu > ul > li {
  float: left;
}

#cssmenu > ul > li > a {
  padding: 17px;
  font-size: 14px;
  text-decoration: none;
  letter-spacing: 1px;
  color: #fff;
  font-weight: 400;
  text-transform: uppercase;
  background: url("../img/menu-arrow.png") center -10px no-repeat;
}

@media (min-width: 768px) and (max-width: 979px) {
	#cssmenu > ul > li > a {
		letter-spacing: 0;
		padding:17px 10px;
	}
}


#cssmenu > ul > li:hover > a{
	color:#69a8ff;
}
#cssmenu > ul > li > a.current {
  color: #ffffff;
  background: url("../img/menu-arrow.png") center top no-repeat;
}



#cssmenu ul ul {
  position: absolute;
  left: -9999px;
}

#cssmenu ul ul li {
  height: 0;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu li:hover > ul {
  left: auto;
}

#cssmenu li:hover > ul > li {
  height: 35px;
}
#cssmenu ul ul ul {
  margin-left: 100%;
  top: 0;
}

#cssmenu ul ul li a {
  border-bottom: 1px solid rgba(150, 150, 150, 0.15);
  padding: 11px 15px;
  width: 170px;
  font-size: 12px;
  text-decoration: none;
  color: #fff;
  font-weight: 300;
  background: #242f3d;
}

#cssmenu ul ul li a:hover,  #cssmenu ul ul li a.current{
  color: #ffffff;
  background: #334152;
}

#cssmenu ul ul ul li a {
  
  padding: 11px 15px;
  width: 170px;
  font-size: 12px;
  text-decoration: none;
  color: #fff;
  font-weight: 300;
  background: #334152;
}


#cssmenu ul ul ul li a:hover, #cssmenu ul ul ul li a.current {
  color: #ffffff;
  background: #48586d;
}




#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
  border-bottom: 0;
}





#cssmenu ul ul li.has-sub > a:after {
  position: absolute;
  top: 16px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
}

#cssmenu ul ul li.has-sub > a:before {
  position: absolute;
  top: 13px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}

#cssmenu ul ul > li.has-sub:hover > a:before {
  top: 17px;
  height: 0;
}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #cssmenu {
    width: 100%;
	border:1px solid #121a25;
	background: #0e1622;
  }
  #cssmenu ul {
    width: 100%;
    display: none;
  }
  #cssmenu.align-center > ul {
    text-align: left;
  }
  #cssmenu ul li {
    width: 100%;
    border-top: 1px solid rgba(120, 120, 120, 0.2);
  }
  #cssmenu ul ul li,
  #cssmenu li:hover > ul > li {
    height: auto;
  }
  #cssmenu ul li a,
  #cssmenu ul ul li a {
    width: 100%;
    border-bottom: 0;
  }
  #cssmenu > ul > li {
    float: none;
  }
  #cssmenu ul ul li a {
    padding-left: 25px;
  }
  #cssmenu ul ul ul li a {
    padding-left: 35px;
  }
  #cssmenu ul ul li a {
    color: #dddddd;
    background: none;
  }
  #cssmenu ul ul li:hover > a,
  #cssmenu ul ul li.active > a {
    color: #ffffff;
  }
  #cssmenu ul ul,
  #cssmenu ul ul ul,
  #cssmenu.align-right ul ul {
    position: relative;
    left: 0;
    width: 100%;
    margin: 0;
    text-align: left;
  }
  #cssmenu > ul > li.has-sub > a:after,
  #cssmenu > ul > li.has-sub > a:before,
  #cssmenu ul ul > li.has-sub > a:after,
  #cssmenu ul ul > li.has-sub > a:before {
    display: none;
  }
  
   #cssmenu ul ul  li a {
	width:100%;
	background: none;
  }
  
   #cssmenu ul ul li a:hover{
	background: none;
	color:#69a8ff;
   }
  
  #cssmenu ul ul ul li a {
	width:100%;
	color:#667c96;
	background: none;
  }
  
   #cssmenu ul ul ul li a:hover{
	background: none;
	color:#69a8ff;
   }
  
  
  #cssmenu #menu-button {
    display: block;
    padding: 17px;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 400;

  }
  #cssmenu #menu-button:after {
    position: absolute;
    top: 22px;
    right: 10px;
    display: block;
    height: 4px;
    width: 20px;
    border-top: 2px solid #dddddd;
    border-bottom: 2px solid #dddddd;
    content: '';
  }
  #cssmenu #menu-button:before {
    position: absolute;
    top: 16px;
    right: 10px;
    display: block;
    height: 2px;
    width: 20px;
    background: #dddddd;
    content: '';
  }
  #cssmenu #menu-button.menu-opened:after {
    top: 23px;
    border: 0;
    height: 2px;
    width: 15px;
    background: #ffffff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  #cssmenu #menu-button.menu-opened:before {
    top: 23px;
    background: #ffffff;
    width: 15px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  #cssmenu .submenu-button {
    position: absolute;
    z-index: 99;
    right: 0;
    top: 0;
    display: block;
    border-left: 1px solid rgba(120, 120, 120, 0.2);
    height: 46px;
    width: 46px;
    cursor: pointer;
  }
  #cssmenu .submenu-button.submenu-opened {
    background: none;
  }
  #cssmenu ul ul .submenu-button {
    height: 34px;
    width: 34px;
  }
  #cssmenu .submenu-button:after {
    position: absolute;
    top: 22px;
    right: 19px;
    width: 8px;
    height: 2px;
    display: block;
    background: #dddddd;
    content: '';
  }
  #cssmenu ul ul .submenu-button:after {
    top: 15px;
    right: 13px;
  }
  #cssmenu .submenu-button.submenu-opened:after {
    background: #ffffff;
  }
  #cssmenu .submenu-button:before {
    position: absolute;
    top: 19px;
    right: 22px;
    display: block;
    width: 2px;
    height: 8px;
    background: #dddddd;
    content: '';
  }
  #cssmenu ul ul .submenu-button:before {
    top: 12px;
    right: 16px;
  }
  #cssmenu .submenu-button.submenu-opened:before {
    display: none;
  }
}





/* 	=====================
	===Basic Styles  ====
	===================== */
	body {font:300 18px/30px 'Roboto', Helvetica, sans-serif; color:#8b96a0; background: #fff; margin:0 auto;}

/* 	======================
	===== Colors =========
	====================== */
	
	.white{color:#fff;}
	.blue{color:#69a8ff;}

/*  ===================
	=== Typography ====
	=================== */
	
	h1     {}
	h2	{font:300 24px/34px 'Roboto', sans-serif;}
	h3	{font:300 48px/56px 'Roboto', sans-serif; color:#18273c; padding:20px 0;}
	h4	{font:14px/22px 'Roboto', sans-serif;}
	h5	{font:12px/18px 'Roboto', sans-serif;}
	
	
	
	p  {}
	em  {}
	strong{font-weight: bold;}
	
	img {}
	
	.italic	{font-style: italic}
	.bold 	{font-weight: bold}
	
	.fleft{float: left}
	.fright{float: right;}
		
	.right{text-align: right}
	.center{text-align: center}
	.left{text-align: left}
	
	.clear{clear: both;}
	
	hr{color: #edeff5; background-color: #edeff5; height:1px; border:0; margin:10px 0;}
	
	
	

	
	
/*  ================
	=== Links ======
	================ */
	
	a, a:visited {color: #69a8ff; text-decoration: none; outline: 0; cursor: pointer; transition: 0.5s ease; -o-transition: 0.5s ease;-webkit-transition: 0.5s ease;}
	a:hover, a:focus {color: #69a8ff; }

	a.link {padding: 8px 24px;color: #fff; background-color: #ca1517;cursor: pointer; transition: 0.5s ease; -o-transition: 0.5s ease;-webkit-transition: 0.5s ease;}
	a.link:hover	{color: #fff;background-color: #e71010;}
	

	a.btn{background: #69a8ff; color: #fff; display: inline-block;	font-size:18px; text-decoration: none; cursor: pointer;  padding: 0.5em 1em; transition: 0.5s ease; -o-transition: 0.5s ease;-webkit-transition: 0.5s ease;  margin: 15px; text-align:center; border-radius:5px; white-space:nowrap}		
	a.btn:hover 	{opacity:0.7}
	

/*	========================
	===== Lists         ====
	======================== */

	ul.list		{} 
	ul.list li	{background: url('../img/bullet.gif') 0px 12px no-repeat; padding-left: 10px; border-bottom:1px dotted #e6ebf0}  
	
	ul.list2		{width:80%; margin: 10px auto; clear: both;} 
	ul.list2 li	{background: url('../img/bullet.gif') 0px 18px no-repeat; padding-left: 20px; text-align:left; color:#69a8ff; padding:5px 10px; font-size:18px;}  
	
	

/* ===========================
   ===== Header          ===== 
   =========================== */

		
	header {background: #080e16; padding:20px 0;}
	header a.logo{padding-top:10px;}
	header a.logo img{width:100%; max-width: 225px;}
	
	header .infolinia{color:#fff; font-size:18px; text-align: right; border-bottom: 1px solid #202936; padding-bottom:10px;}
	header .infolinia .time{font-weight:400; background: #69a8ff; border-radius: 3px; padding:0px 5px; margin:0 5px;}
	header .infolinia .phone{font: 24px "Audiowide"; white-space:nowrap; color:#fff;}
	
	@media (max-width: 767px) {
		header .infolinia{text-align: center; padding:10px 0; margin:10px 0; border-top: 1px solid #202936;}
	}


	
/* ===========================
   ===== Content Area    ===== 
   =========================== */	
   
 
	#head-sg{padding:200px 0; background: url("../img/head-sg-bg.jpg") center top; color:#fff;}
	#head-sg h2{font-size:84px; line-height: 1em}
	#head-sg h3{font-size:54px; color:#fff;}
	#head-sg .infolinia{color:#fff; font-size:32px; padding:10px 20px; line-height: 55px;  display: inline-block; border-radius:10px; background-color: rgba(255, 255, 255, 0.1); margin:20px 0}
	#head-sg .infolinia .time{font-weight:400; background: #69a8ff; border-radius: 3px; padding:0px 5px; margin:0 5px;}
	#head-sg .infolinia .phone{font: 42px "Audiowide"; white-space:nowrap; color:#fff;}
	
	@media (max-width: 767px) {
		#head-sg{padding:100px 0; text-align:center;}
		#head-sg h2{font-size:74px;}
		#head-sg h3{font-size:44px;}
	}
	
	@media (max-width: 479px) {
		#head-sg{padding:50px 0; text-align:center;}
		#head-sg h2{font-size:54px;}
		#head-sg h3{font-size:24px; line-height:32px}
		#head-sg .infolinia {font-size: 24px}
		#head-sg .infolinia .phone{font-size:30px; padding:0; margin:0;}
	}
	
	.head h1{color:#fff; text-align:center; font-size:48px; line-height:58px}
	#head-ofirmie{padding:100px 0; background: url("../img/head-ofirmie-bg.jpg") center top; }
	#head-dyski-twarde{padding:100px 0; background: url("../img/head-dyski-twarde.jpg") center top;}
	#head-dyski-sas{padding:100px 0; background: url("../img/head-dyski-sas.jpg") center top;}
	#head-rejestratory{padding:100px 0; background: url("../img/head-rejestratory.jpg") center top;}
	#head-dyski-ssd{padding:100px 0; background: url("../img/head-dyski-ssd.jpg") center top;}
	#head-nosniki-cd{padding:100px 0; background: url("../img/head-nosniki-cd.jpg") center top;}
	#head-dyktafony{padding:100px 0; background: url("../img/head-dyktafony.jpg") center top;}  
	#head-karty-sim{padding:100px 0; background: url("../img/head-karty-sim.jpg") center top;} 
	#head-pendrivey{padding:100px 0; background: url("../img/head-pendrivey.jpg") center top;}  
	#head-karty-pamieci{padding:100px 0; background: url("../img/head-karty-pamieci.jpg") center top;}  
	#head-przenosne{padding:100px 0; background: url("../img/head-przenosne.jpg") center top;} 
	#head-macierze-raid{padding:100px 0; background: url("../img/head-macierze-raid.jpg") center top;}  
	#head-tasmy{padding:100px 0; background: url("../img/head-tasmy.jpg") center top;} 
	#head-kamery{padding:100px 0; background: url("../img/head-kamery.jpg") center top;}  
	#head-telefony{padding:100px 0; background: url("../img/head-telefony.jpg") center top;}  
	#head-tablety{padding:100px 0; background: url("../img/head-tablety.jpg") center top;} 
	#head-serwery{padding:100px 0; background: url("../img/head-serwery.jpg") center top;}
	
	#onas{padding:100px 0; background: #e6ebf0; text-align:center; color: #18273c;}
	#onas p:nth-of-type(1){font-size: 33px; line-height: 43px}
	#onas p:nth-of-type(1) span{font-size:65px;}
	#onas p:nth-of-type(2){font-size: 24px; line-height: 34px; padding:10px 0;}
	#onas p:nth-of-type(2) b{font-weight:700;}
	#onas a.btn{font-size: 30px;}
	@media (max-width: 767px) {
		#onas p:nth-of-type(1) span{display: block; padding:10px 0;}
	}
	
	#icons{padding: 50px 0; text-align:center;}
	#icons p.lead{color: #69a8ff; font-size: 24px; padding-bottom:30px;}
	#icons a.ic-btn{border: 2px solid #69a8ff; display: block; height:100px; border-radius:5px; margin:10px 0; padding:30px 0;}
	#icons a.ic-btn:hover{background: #eaf3ff}
	#icons a.ic-btn p{text-transform: uppercase; font: 15px/20px 'Audiowide'; color: #69a8ff; padding:10px 0; }
	
	
	#forms{border:2px solid #c5ddff; background: #f2f7ff; border-radius:5px; padding:10px; margin:50px 0;}
	#forms h3{color:#18273c; text-align: center; font-size: 24px; line-height: 32px; padding:0; margin:0; padding-bottom:10px; border-bottom: 1px solid #c5ddff; margin-bottom:10px;} 
	#forms  a{display: inline-block; line-height: 40px; margin:10px 0;}  
	#forms  a:hover{color:#17273b}
	#forms  a span.fa{font-size:40px; padding-right: 5px;} 
	
	#consult{background: #69a8ff url('../img/consult-bg.jpg') center center no-repeat; padding:50px 0 }
	#consult .txt{width:50%; margin-left:50%; text-align:center; font-size:36px; line-height:46px;}
	#consult p.txt1{color:#18273c; }
	#consult p.txt2{font-size:36px; color:#fff; padding:10px 0}
	#consult p.txt3{color:#fff; font: 48px/58px 'Audiowide'; border-radius:10px; background-color: rgba(255, 255, 255, 0.2); display: inline-block; padding:5px 10px; margin:10px 0; white-space:nowrap}
	#consult p.txt3 a{color: #fff;}
	#consult p.txt4{color:#fff;}
	#consult p.txt5{font-size: 24px; font-weight:400; color:#fff; padding:0; line-height:24px;}
	#consult .btn{background: #23344c; font-size: 30px;}
	
	@media (max-width: 767px) {
		#consult{background: #69a8ff url('../img/consult-bg.jpg') -700px center no-repeat; padding:50px 0 }
		#consult .txt{width:100%; margin-left:0%; }
		#consult p.txt2{font-size: 24px; line-height: 32px;}
		#consult p.txt5{font-size: 18px;}
	}
	
	@media (max-width: 479px) {
		#consult{background: #69a8ff; padding:50px 0 }
		#consult p.txt3{font-size:30px}
	}
	
	#partners{padding:50px 0; text-align:center; background: url("../img/partners-bg.jpg") center center no-repeat; font-size: 24px; line-height:32px; color:#18273c;}
	


	#content{padding:50px 0;}
	#content img{border-radius: 10px; width:100%;}
	#content p{padding:20px 0;}
	#content p.lead{font-size: 18px;}
	#content .lead-border{font-size: 24px; padding:30px; line-height:32px; color:#69a8ff; text-align:center; background: url("../img/border.gif") top repeat-x, url("../img/border.gif") bottom repeat-x; margin:20px 0;  }
 
	
	.img-content{display: block;   max-width: 480px!important;  float:left; margin:10px;} 
	
/*  ==================
	=== Contact ======
	================== */
	
	.infolinia2{color:#fff; font-size:32px; padding:10px 20px; line-height: 55px;  display: inline-block; border-radius:10px; background-color: rgba(0, 0, 0, 0.3); margin:40px 0; }
	.infolinia2 .time{font-weight:400; background: #69a8ff; border-radius: 3px; padding:0px 5px; margin:0 5px;}
	.infolinia2 .phone{font: 42px "Audiowide"; white-space:nowra; color:#fff}

	
		
/* ===========================
   ===== Forms            ===== 
   =========================== */
  
  input[type="text"] {border:1px solid #e6ebf0; display: block; color:#6d7883; font: 300 14px 'Roboto'; width:100%; padding:8px 10px; margin:10px auto; background: #e6ebf0; }
  input:focus{border:1px solid #69a8ff; outline:none;} 
  
  textarea{border:1px solid #e6ebf0; display: block;  color:#6d7883; font: 300 14px 'Roboto'; width:100%; padding:10px; margin:10px auto; background: #fff; height:136px; background: #e6ebf0;}  
  textarea:focus{border:1px solid #69a8ff; outline:none;}
  
  select{border:1px solid #e6ebf0; display: block; color:#6d7883; font: 300 14px 'Roboto'; width:100%; padding:8px 10px; margin:10px auto; background: #e6ebf0; }
  select:focus{border:1px solid #69a8ff; outline:none;}  
  
 
  #formular h3{font: 700 18px "Roboto"; color:#69a8ff; background: url("../img/border.gif") center center repeat-x; text-align:center; } 
  #formular h3 span{background: #fff; padding: 10px;}
  #formular  a.btn{background: #23344c; font-size: 30px;}
  #formular .lead-border{font-size: 14px;}

	  
/* ===========================
   ===== Map             =====
   =========================== */
	
	.map-addr{position: relative;}
	#map{height:400px; width:100%;}
	
	.addr{position: absolute; background-color: rgba(255, 255, 255, 0.9); top:0; padding:50px; height:300px; font-size: 18px;}

  
/* ===========================
   ===== Footer          ===== 
   =========================== */

	footer {background: #22344c; padding:50px 0;}
	footer img{width:100%; max-width:225px;}
	footer  pre{padding:10px 0;}
	.webart{color:#51698b; font-size:12px;}
	.webart a{color:#51698b;}
	.webart a:hover{color:#8097b7;}
	
	
	footer  h4{font-size:18px; color:#fff; text-transform: uppercase; padding:10px 0;}
	ul.footer-links li{border-bottom: 1px solid #4a596e; text-transform: uppercase;}
	ul.footer-links li:first-child{border-top:1px solid #4a596e;}
	ul.footer-links li a{color:#cdd6e1;}
	ul.footer-links li a:hover{color:#fff;}
	
	@media (max-width: 767px) {
		ul.footer-links{padding:20px 0;}
	}
	
	
	ul.social{text-align:center; padding-top:60px;}
	ul.social li{display: inline; }
	ul.social li a{display: inline-block; background: #3e5675; color:#22344c; padding:10px; font-size:30px; border-radius: 50px; width:30px}
	ul.social li a:hover{background: #5e7593}



/* ===========================
   ===== toTop        ===== 
   =========================== */	
	
	#toTop {
		display: none;
		text-decoration: none;
		position: fixed;
		bottom: 40px;
		left:83%;
		overflow: hidden;
		width: 66px;
		height: 66px;
		border: none;
		text-indent: -999px;
		z-index: 20;
		background: url(../img/totop.png) no-repeat left 0;
		transition: 0s ease;
		-o-transition: 0s ease;
		-webkit-transition: 0s ease;
		}
		
	#toTop:hover {
		outline: none;
		background-position: bottom 0;
}
	
/* ===========================
   ===== Cookie Warn        == 
   =========================== */

	#cookie-warn{ display: none; z-index: 99; background:#2b3234;font:12px/14px 'Open Sans'; padding:10px;}
		#cookie-warn p{color:#707779}
		#cookie-warn a{color:#b10034; text-decoration:none; float: right;}
		#cookie-warn a:hover{color:#fff;}

	
/* 	==========================
	======== Helper ==========
	=========================== */

	@media (min-width: 980px) and (max-width: 1199px) {}
	@media (min-width: 768px) and (max-width: 979px) {}
	@media (max-width: 767px) {}
	@media (max-width: 479px) {}