/*
	
Theme Name: Schrämli Holding
Theme URI: http://ibl.ch
Description: based on the Starkers Theme.
Version: 1.0
Author: Andris Linz @ ibl und partner ag
Author URI: http://ibl.ch

*/

/* ------------------------- COLORS ------------------------- 

weiss:		#fff
schwarz:	#000
blau:		#253145
grau:		#929395


*/

/* ------------------------- RESET ------------------------- */


body, html, h1, h2, h3, h4, h5, h6, p, ul, li, ol, img, fieldset { margin:0; padding:0; border:0; }

ul, li, ol { list-style:none; }

:focus { outline:none; }


/* ------------------------- UTILITIES ------------------------- */


.clear { clear:both; height:0;}

.floatLeft { float:left; }

.floatRight { float:right; }

.hide-on-mobile {display:block;}

.show-on-mobile {display:none; height:0; width:0;}


/* ------------------------- MAIN-STYLES ------------------------- */


body {font-family: 'PT Sans', Helvetica, Arial, sans-serif; letter-spacing:0;  color:#fff; background:#fff;}


/* BUTTON */


.button {padding:7px 14px !important; background:transparent !important; text-transform:uppercase !important; font-size:14px !important; border:#253145 1px solid !important; font-weight:normal !important;}

.button span, .button {color:#253145 !important;}

.button:hover, .button:hover {cursor:pointer !important; background:#253145 !important;  }

.button:hover span, .button:hover {color:#fff !important;}

p span.i {margin-left:1px;}

/* ------------------------- TYPO ------------------------- */


h1	{font-size:50px; font-weight:700; text-transform:uppercase; line-height:55px; margin:0 0 78px 0; letter-spacing:0.1em; position:relative;}

h1:before, h3:before { 
  content : "";
  position: absolute;
  left    : 0;
  bottom  : -26px;
  height  : 2px;
  width   : 30%;  /* or 100px */
  border-bottom:#fff 2px solid;
}


h2 	{font-size:28px; font-weight:700; line-height:36px; margin:0 0 26px 0;}

h3 	{font-size:50px; font-weight:700; line-height:55px; margin:0 0 78px 0; letter-spacing:0.1em; text-transform:uppercase; position:relative;} 

h4 	{font-size:16px; font-weight:700; line-height:22px; margin:0 0 26px 0;}

h5 	{font-size:18px; font-weight:400; line-height:28px; margin:0 0 26px 0;}

h6 	{font-size:16px; font-weight:700; line-height:22px; margin:0 0 26px 0;}

p 	{font-size:16px; line-height:26px; font-weight:400; margin:0 0 13px 0;}

p span.zahl {font-size:180px; line-height:180px; font-weight:700;}

a {text-decoration:none; color:#929395; transition: all ease 0.3s;}

a:hover {text-decoration:none; color:#fff; transition: all ease 0.3s;}

#main ul {margin:0 0 0 52px; padding:0;}

#main ul li {list-style-image: url("images/bullet.png"); padding:0; margin:0 0 13px 0; font-size:20px; line-height:34px; font-weight:400;}

blockquote p {color:#253145; font-style:italic; font-size:28px; line-height:38px;}

/* ------------------------- HEADER ------------------------- */


header {width:calc(100% - 26px); padding:0 26px 0 0; background:#fff; margin:0; position:fixed; z-index:9999;}


.inner {width:calc(100% - 52px); padding:0 26px; margin:0 auto; }


#mobile-toggle {display:block; line-height:132px; float:left;}


/* LOGO AREA */


#logo-area {float:right; width:auto; text-align:right;}

#logo-area img {height:80px; width:auto;}

#logo-area .widget-container {margin:0; padding:26px 0;}


/* MENU AREA */


#menu-area {height:80px; text-align:right; width:calc(100% - 513px); float:left; padding:26px 0;}


/* ------------------------- NAVIGATION ------------------------- 


#ubermenu-main-2 li a, #ubermenu-main-5 li a {text-transform:uppercase;}

#ubermenu-main-2 .ubermenu-submenu, #ubermenu-main-5 .ubermenu-submenu {background:#fff; box-shadow:none; padding:0 0 20px 0;}

#ubermenu-main-2 li.ubermenu-current-page-ancestor a, #ubermenu-main-2 li.ubermenu-current-menu-item a, #ubermenu-main-2 li.ubermenu-current-page-ancestor .ubermenu-submenu li.ubermenu-current-menu-item a, #ubermenu-main-5 li.ubermenu-current-page-ancestor a, #ubermenu-main-5 li.ubermenu-current-menu-item a, #ubermenu-main-5 li.ubermenu-current-page-ancestor .ubermenu-submenu li.ubermenu-current-menu-item a {color:#787878;}

#ubermenu-main-2 li.ubermenu-current-page-ancestor .ubermenu-submenu li a, #ubermenu-main-2 .ubermenu-submenu li a, #ubermenu-main-5 li.ubermenu-current-page-ancestor .ubermenu-submenu li a, #ubermenu-main-5 .ubermenu-submenu li a {text-transform:none; color:#253145; padding:10px 20px 0 20px;}

#ubermenu-main-2 li.ubermenu-current-page-ancestor .ubermenu-submenu li a:hover, #ubermenu-main-2 .ubermenu-submenu li a:hover, #ubermenu-main-5 li.ubermenu-current-page-ancestor .ubermenu-submenu li a:hover, #ubermenu-main-5 .ubermenu-submenu li a:hover {color:#787878;}

#ubermenu-main-2 #menu-item-wpml-ls-2-de a, #ubermenu-main-5 #menu-item-wpml-ls-2-de a {padding:15px 0 15px 20px !important;}

#ubermenu-main-2 #menu-item-wpml-ls-2-en a, #ubermenu-main-5 #menu-item-wpml-ls-2-en a {padding-left:13px;}

#ubermenu-main-2 #menu-item-wpml-ls-2-de a:after, #ubermenu-main-5 #menu-item-wpml-ls-2-de a:after {content:"//"; color:#253145; letter-spacing:-.15em !important; font-weight:400; padding:0 0 0 10px;}

*/



#mobile-close {float:left; line-height:132px;}

#overlay-menu {position:fixed; top:0; left:0; bottom:0; right:0; background:rgba(255,255,255,0.95); display:none; z-index:999999; overflow:scroll; padding:0 20px 0 0;}

#overlay-menu #menu-main {padding:0;}

#overlay-menu #menu-main li {list-style:none; }

#overlay-menu #menu-main li a {display:block; line-height:52px; color:#253145; width:100%; position:relative; font-size:50px; font-weight:700; text-align:center; display:block; margin:0 0 26px 0; text-transform:uppercase; letter-spacing:0.1em;}

#overlay-menu #menu-main li:hover a:hover {color:#787878; cursor:pointer;}



/* ------------------------- MAIN ------------------------- */


#main {width:1100px; padding:102px 0 0 0; margin:0 auto; min-height:600px;}

#main.ohneSlider {padding:60px 0;}


/* ------------------------- HOME ------------------------- */





/* ------------------------- TEAM ------------------------- */

.team h3 span.bullet {color:#253145; letter-spacing:-.15em !important;}

.team h3 {font-size:22px; line-height:30px; margin:0 0 13px 0;}

.team p {font-size:20px; line-height:28px;}



/* ------------------------- REFERENZEN ------------------------- */

.rev_slider_wrapper h3 {color:#000; font-weight:400; font-size:22px; line-height:32px; margin:0 0 13px 0;}

.rev_slider_wrapper h3 span.bullet {color:#253145; letter-spacing:-.1em !important; padding-right:5px;}

.rev_slider_wrapper p {font-weight:300; font-size:14px; line-height:25px; color:#000; letter-spacing:.075em;}



/* ------------------------- PAGE ------------------------- */

.separator {background:#f5f7f6; color:#253145 !important;}

.separator h2 {text-transform:uppercase; font-size:55px; letter-spacing:0.1em; font-weight:700; margin:0;}

iframe {margin:0 !important; padding:0 !important;}

/* ------------------------- FOOTER ------------------------- */



footer {background:#253145; min-height:104px; padding:0; color:#fff; width:100%; }

#first-footer-widget-area {width:100%; margin:0;}

.widget-container {}

footer p {font-size:16px; line-height:26px;}

footer h3.widget-title {font-size:16px !important; line-height:26px !important; text-transform:uppercase; margin:0 0 13px 0;}

footer a {color:#fff;}

footer a:hover {color:#000;}

footer ul li {font-size:16px; line-height:26px; font-weight:300; margin:0 0 13px 0;}






/* ----- RESPONSIVE TABLET STYLES ----- */







@media screen and (max-width: 1023px) { 
	
	
	#main {width:calc(100% - 80px); padding:102px 40px 60px 40px; margin:0 auto; min-height:1000px;}
	
	.inner {width:calc(100% - 80px);}
	

}


/* ----- RESPONSIVE MOBILE STYLES ----- */


@media screen and (max-width: 687px) { 
		
	#logo-area {width:auto;}
	
	#logo-area img {width:auto; height:34px;}
	
	#menu-area {height:34px; width:calc(100% - 513px); margin:0 auto; padding:0}
	
	#menu-area {width:calc(100% - 170px); margin:0 auto; padding:0;}
	
	#mobile-toggle {display:block; line-height:86px; float:left;}
	
	#mobile-close {float:left; line-height:86px;}
	
	#ubermenu-main-2 {height:auto; margin:16px 0;}
	
	#ubermenu-main-2 li {display:block; line-height:50px;}
		
	#main {width:calc(100% - 40px); padding:82px 20px 60px 20px; margin:0 auto; min-height:1000px;}
	
	h1	{font-size:30px; font-weight:700; text-transform:uppercase; line-height:35px; margin:0 0 52px 0; letter-spacing:0.1em; position:relative;}

	h1:before, h3:before { 
	  content : "";
	  position: absolute;
	  left    : 0;
	  bottom  : -26px;
	  height  : 2px;
	  width   : 30%;  /* or 100px */
	  border-bottom:#fff 2px solid;
	}


	h2 	{font-size:28px; font-weight:700; line-height:36px; margin:0 0 26px 0;}

	h3 	{font-size:30px; font-weight:700; line-height:35px; margin:0 0 52px 0; letter-spacing:0.1em; text-transform:uppercase; position:relative;} 


	#overlay-menu #menu-main li a {display:block; line-height:45px; color:#253145; width:100%; position:relative; font-size:35px; font-weight:700; text-align:center; display:block; margin:0 0 26px 0; text-transform:uppercase; letter-spacing:0.1em;}


	.rev_slider_wrapper h3 span.bullet {color:#253145; letter-spacing:-.1em !important; padding-right:5px; font-size:22px;}

	h4 {font-size:16px; font-weight:400; line-height:20px; margin:0 0 24px 0; }

	p {font-size:16px; line-height:24px; margin:0 0 22px 0;}
		
	.inner {width:calc(100% - 40px); margin:0 auto;}
	
	.aktuell-bild {width:100%; clear:both; margin:0 0 30px 0;}
	
	.aktuell-titel {width:100%; clear:both;}
	
	h1.tp-caption {font-size:18px !important; font-weight:700 !important; line-height:24px !important; }
	
	blockquote p {font-size:20px; line-height:28px;} 

	
	.show-on-mobile {display:block;}
	
	.zeichnung, .zeichnung-links, .zeichnung-eigenmarke {background:none;}
	
	#main ul li {list-style-image: url("images/bullet_mobile.png"); padding:0; margin:0 0 13px 0; font-size:18px; line-height:24px; font-weight:400;}
	
	
			
}