/* JENS HODAPP | 2013 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #565757; 
	font-family: 'Open Sans', sans-serif;
	font-weight:400;
	}

body { font-size: 15px; line-height: 1.4; min-height:602px; min-width:1010px; overflow:hidden; min-width:1010px;}

h1, h2, h3, h4 {font-family: 'Open Sans Condensed', sans-serif; font-weight:bold; margin:0 0 10px 0; padding:0;}
h1 {font-size:60px; color:#565757; text-transform:uppercase; }
#teaser h1 { font-size:40px; color:#056528; text-transform:none;}
h2 {font-size:20px; color:#056528; border-bottom:2px solid #565757; border-top:2px solid #565757; line-height:110%; padding:10px 0;}
#teaser h2 {color:#565757; }
h3 {font-size:18px; color:#565757;}	
h4 {font-size:14px; color:#565757;}	

.bestFloor a, .bestFloor a:visited { color:#056528; }
.bestFloor a:hover { color:#565757; cursor:pointer;} 
.highlight { color:#056528;}
.highlight-red { color:#ac0000; font-weight: bold;}
.graybox {background-color: #a8a8a8; padding: 25px; margin-bottom: 25px;}

/************************/
/******** FONTS *********/
/************************/

/* open-sans-regular - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/open-sans-v34-latin-regular.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-v34-latin-700.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/open-sans-v34-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/open-sans-v34-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/open-sans-v34-latin-700.woff') format('woff'), /* Modern Browsers */
         url('../fonts/open-sans-v34-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/open-sans-v34-latin-700.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-v34-latin-italic.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/open-sans-v34-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/open-sans-v34-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/open-sans-v34-latin-italic.woff') format('woff'), /* Modern Browsers */
         url('../fonts/open-sans-v34-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/open-sans-v34-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  
  /* open-sans-condensed bold - latin */
  @font-face {
	font-family: 'Open Sans Condensed';
	src: url('../fonts/OpenSansCondensed-Bold.woff2') format('woff2'), url('../fonts/OpenSansCondensed-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'Open Sans Condensed';
	src: url('../fonts/OpenSansCondensed-Light.woff2') format('woff2'), url('../fonts/OpenSansCondensed-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
}


/************************/
/***** MAIN-LAYOUT ******/
/************************/
#sidebar {
	position: relative;
	left:0;
	width:17%;
	min-width:180px;
	max-width:255px;
	height:100%;
	background-color:#f1f1f1;
	float:left;
	-webkit-box-shadow:  0px 0px 5px 1px rgba(0, 0, 0, 0.8);   
    box-shadow:  0px 0px 5px 1px rgba(0, 0, 0, 0.8);
	z-index:10;
	background-image:url(../img/noise.png);
	}
	
#footer { position:fixed; bottom:0; height:30px; width:100%; background-color:#056528; color:#FFF; font-size:12px;z-index:12;}

/*********************/
/***** ASCensor ******/
/*********************/
#best{overflow:hidden; z-index:0; }

/*******************/
/***** SIDEBAR *****/
/*******************/	

#logo { background-image:url(../img/best_logo.png); background-repeat:no-repeat; background-size:contain; width:75%; min-width:100px; max-width:160px; height:80px; margin:20px auto;}
#menu { font-family: 'Open Sans Condensed', sans-serif; font-weight:bold; font-size:18px; text-transform:uppercase; color:#595959; margin-top:55px;}
#menu ul { list-style:none; width:75%; min-width:100px; max-width:160px; margin:0 auto; padding:0;}
#menu ul li { margin:10px 0; padding-bottom:10px; border-bottom:1px solid #595959;}
#menu ul li:last-child { border-bottom:none;}
#sidecontact { font-size:10px; position: absolute; bottom:25px; width:100%;}
#sidecontact p{ margin:0; padding:0;}
#insidecontact { margin:0 auto; width:75%; min-width:100px; max-width:160px;}

#menu ul li a:hover, #logo a, .bestLinkActive { color:#056528; cursor:pointer;margin-left:5px; }
#menu ul li a:hover{ margin-left:5px;-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;}
#menu ul li a{-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;}
#logo a { display:block; height:80px;}

#menu ul li.sub {display: none;}

#menu .bestLinkActive ul li.sub {display: block;}


#footer_menu .bestLinkActive {margin-left: 0 !important;}

@media (max-width:1199px) {
	#sidecontact { font-size:8px;}
	#insidecontact {min-width: 0;}
	}
@media (max-height:550px) {
	#sidecontact, #banner2, #inteaser2 { display:none; visibility:hidden;}
	#teaser{ width:75% !important;}
	#partner, #referenzen, #leistungen, #unternehmen, #contact, #impressum, #agb { width:350px; position:absolute; right:5%; padding:0 40px 50px 40px; min-height:900px;}
	}

/*****************++++**/
/***** BACKGROUNDS *****/
/******************++++*/
.bestFloor {background-repeat:no-repeat; background-attachment:fixed; background-position:center; background-size:auto; background-color:#FFF; overflow:auto; background-size: cover; }
#bestFloor1 {background-image:url(../img/bg_10.jpg); background-position:left center;}
#bestFloor2, #bestFloor3 {background-image:url(../img/bg_5.jpg); }
#bestFloor4 {background-image:url(../img/bg_6.jpg);}
#bestFloor5 {background-image:url(../img/bg_12.jpg); background-position: right;}
#bestFloor6 {background-image:url(../img/bg_11.jpg); background-position-x: 170px;}
#bestFloor7 {background-image:url(../img/bg_7.jpg); background-position:top center;}
#bestFloor8, #bestFloor9, #bestFloor10, #bestFloor11  { background-image:url(../img/bg_2-2.jpg); }

/*******************/
/***** CONTENT *****/
/*******************/
.content { padding-left:17%; background-image:url(../img/noise.png); padding-top: 10%;}
#agb object{ width:100%;}

/***** STARTSEITE *****/
#teaser{ width:48%; min-width:365px; float:left; }
#inteaser{ width:560px; margin:10% 0 10% 10%; background-color: rgba(255, 255, 255, 0.95);  padding:50px 40px 50px 40px; border-radius: 25px;}
#inteaser2 { position: absolute; bottom:20%; right:20%; z-index:99; transform: scale(1.4);}
#inteaser3 { position: absolute; top:7%; right:2%; z-index:99; }
#inteaser3 .wasserstoff, #inteaser3 .waermepumpe, #inteaser3 .pvt {background-color: #FFF051; color: #056528; width: 190px; height: 80px; transform: rotate(-4deg); border-radius: 10px; 
    text-align: center; display: flex; align-items: center; font-size: 20px; font-weight: bold; float: left; margin-left: 10px;}
#inteaser3 .waermepumpe { /*margin-top: -15px;*/}
#inteaser3 .wasserstoff p, #inteaser3 .waermepumpe p, #inteaser3 .pvt p { width: 100%; margin: 0;}
#inteaser3 a {color: #056528 ; width: 100%;}
#inteaser3 .pvt:hover a, #inteaser3 .waermepumpe:hover a {color: #FFF ; width: 100%;}
#inteaser3 .wasserstoff:hover, #inteaser3 .waermepumpe:hover, #inteaser3 .pvt:hover { background-color: #056528; color: #FFF !important;}
#inteaser3 .veranstaltungen {max-width: 350px; clear: both; border-radius: 10px; background: #fff; padding: 15px; margin: 100px 0 0 20px; display: none !important;}
#main{ width:35%; min-width:430px; position:absolute; top:0; right:0; }
#inmain { height:100%; min-height:416px;}
#inmain-l { float:left; position:relative; width:60%; height:97%; margin-top:1%; /*background-image:url(../img/effizienz_e.png); 
background-repeat:no-repeat; background-position:top left; background-size:contain;*/}
#inmain-r { float:right; width:40%; height:100%; /*max-width:250px;*/ background:#F1F1F1; background-image:url(../img/noise.png); display: none;}
#square { position: relative; width:120px; height:120px; /*background-image:url(../img/button.png); background-repeat:no-repeat; background-position:top left;*/ border-radius: 60px; background-color: #056528; margin:0 0 0 0; display:block; cursor:pointer; background-size:cover; float:left; color: #fff; display: flex; align-items: center;text-align: center; font-weight: bold;}
#square:hover { /*background-position:bottom left; */ border-radius: 60px; background-color: #565757;}
span.arrow {font-family: Arial, Helvetica, sans-serif; font-size: 3rem; font-weight: bold; position: absolute; bottom: 0; left: 30%;}
#slogan { width:290px; margin:0 0 0 120px; /*color:#FFF;*/ font-size:11px; /*text-transform:uppercase;*/ /*text-shadow: 1px 1px 1px #000;*/ height:70px; padding:25px;
background:rgba(255,255,255,0.9); border-radius:25px;}
#slogan p { margin:0; padding:0;}
#homepartner{ height:20%;}
#inhomepartner { padding:10px; height:90%;}
#inhomepartner ul{ list-style:none; padding:0; margin:15% 0 0 0;}
.partner-home li { margin:0 auto; width:120px; cursor:pointer;}
#references { height:100%;}
#inreferences { height:100%;}
#inreferences h3{ padding:10px 10px 0 10px; margin-bottom:0; font-size: 22px;}
#references .elastislide-prev { display:block !important;}
#banner2 { height:20%;}
#inbanner-2 { height:90%;}
#inbanner-2 h3{ padding:10px 10px 0 10px; margin-bottom:0;}
#bsw { height:80%; width:100%; cursor:pointer; background-image:url(../img/bsw-bundesverband.png); background-repeat:no-repeat; background-size: contain; background-position:center;}
#banner { clear:both; width:100%; min-height:160px; height:28%; background-color:#FFFFFF; background-image:url(../img/noise.png);}
#banner .arrow { width:25px; height:25px; background-image:url(../img/h3_highlight.png); background-repeat:no-repeat; background-position:right top; float:left; margin-top:8px;}
#banner .arrow:hover {background-position:right bottom;}
#inbanner-l { width:60%; height:100%; float:left; background-image:url(../img/mage_solar_aktion_2.png); background-position:center; background-repeat:no-repeat; background-size:contain;}
#inbanner-r { width:40%; }
#inbanner-l a{ width:100%; height:100%; display:block; float:left;cursor:pointer;}
#banner h2 { font-size:16px; margin:0; padding:10px; color:#EF7F01; line-height:23px; /*text-transform:uppercase;*/ text-align:center;}

@media (min-width:1600px) {
	#mage-solar img, #asd_sonnenspeicher img, #ads-tec img, #znshine img {width:160px;}
	.partner-home li { width:160px;}	
	/*#mage-solar {width:160px;}*/
	#bsw img{ height:80px;}
	}

@media (max-width:1600px) {
    
}
@media (max-width:1199px) {
	#inteaser{ margin-top: 140px;}
}

@media (max-width:990px) {
	#inteaser{ width:420px;}
    #inteaser3 .veranstaltungen {display: none;}
}
@media (max-width:800px) {
	#inteaser2{ display: none;}
}


/***** UNTERNEHMEN *****/
#unternehmen { width:450px; background-color: rgba(255, 255, 255, 0.85); margin-left:35%; padding:0 40px; min-height: 900px;}
#leitbild { width:450px; background-color: rgba(255, 255, 255, 0.85); margin-left:35%; padding:0 40px; min-height: 1200px;}
#leitbild h3 {margin-bottom: 0 !important;}
#leitbild p {margin-top: 0 !important;}
#unternehmen .highlight .bestLink { background-color: #056528; color: #FFF !important; border-radius: 25px; height: 32px; padding: 10px 10px 0 10px; width: fit-content; display: block;}
#unternehmen .highlight .bestLink:hover { background-color: #565757; color: #FFF !important; }

/***** LEISTUNGEN *****/
#leistungen { width:420px; background-color: rgba(255, 255, 255, 0.95); margin-left:45%; padding:0 40px 0px 40px;}
#leistungen ul { list-style: outside; padding:0 0 0 16px; color:#056528;}
#leistungen ul li{ margin-bottom:5px;}
#leistungen ul span{color:#565757;}

/***** Waermepumpe *****/
#warmepumpe { width:420px; background-color: rgba(255, 255, 255, 0.95); margin-left:50%; padding:0 40px 0px 40px; min-height: 900px;}

/***** PARTNER *****/
#partner { width:550px; background-color: rgba(255, 255, 255, 0.95); position:absolute; right:5%; padding:0 40px 50px 40px;}
.partner-logo { float:right; margin-top:20px;}
.partner { clear:both;}
.adress { margin-bottom:10px;}
.phone{ float:left; }
.web{ float:right; margin-bottom:2em; text-align:right;}


/***** REFERENZEN *****/
#referenzen { width:50%; min-width:350px; background-color: rgba(255, 255, 255, 0.95); margin-left:25%; padding:0 40px 50px 40px;}
.ref-container label{
	font-family: 'Open Sans Condensed', sans-serif; 
	font-weight:bold;
	font-size: 16px;
    padding: 5px 0px;
    position: relative;
    z-index: 20;
    display: block;
    height: 30px;
    cursor: pointer;
    color: #565757;
    line-height: 33px;    
    /*background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);*/
    /*box-shadow:
        0px 0px 0px 1px rgba(155,155,155,0.3),
        1px 0px 0px 0px rgba(255,255,255,0.9) inset,
        0px 2px 2px rgba(0,0,0,0.1);*/
	border-bottom: 1px solid rgba(155,155,155,0.3);
	text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);	
}
.ref-container label:hover{
    /*background: #fff;*/
	color:#056528 !important;
}
.ref-container input:checked + label,
.ref-container input:checked + label:hover{
    /*background: #a7cfb6;*/
    color: #056528;
    text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
    /*box-shadow:
        0px 0px 0px 1px rgba(155,155,155,0.3),
        0px 2px 2px rgba(0,0,0,0.1);*/
}
.ref-container label:hover:after,
.ref-container input:checked + label:hover:after{
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    right: 13px;
    top: 7px;
    background: transparent url(../img/arrow_down.png) no-repeat center center; 
}
.ref-container input:checked + label:hover:after{
    background-image: url(../img/arrow_up.png);
}
.ref-container input{
    display: none;
}
.ref-container article{
    /*background: rgba(255, 255, 255, 0.5);*/
    margin-top: -1px;
    overflow: hidden;
    height: 0;
    position: relative;
    z-index: 10;
    transition:
        height 0.3s ease-in-out,
        box-shadow 0.6s linear;
}
/*.ref-container article img{ 
	transition:all 0.3s ease 0s;
}*/
.image { overflow:hidden; width:200px; height:150px;margin:10px 20px; float:left;}

/*.ref-container article img:hover{ 
	transform:scale(1.05) rotate(-1deg);
}*/
.ref-container input:checked ~ article{
    transition:
        height 0.5s ease-in-out,
        box-shadow 0.1s linear;
    /*box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);*/
}
.ref-container article p{
    font-style: italic;
    color: #777;
    line-height: 23px;
    font-size: 14px;
    padding: 20px;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.ref-container input:checked ~ article.ref-small{
    height: 140px;
}
.ref-container input:checked ~ article.ref-medium{
    height: 180px;
}
.ref-container input:checked ~ article.ref-large{
    height: 370px;
}
.ref-details { margin-left:40px;}
.ref-details .table-bold { font-weight:bold; width:170px;}
.ref-details table { width:100%;}

/* SCROLLER Style */

.elastislide-list {
	list-style-type: none;
	display: none;
	}

.no-js .elastislide-list {
	display: block;
	}

.elastislide-carousel ul li {
	min-width: 20px; /* minimum width of the image (min width + border) */
	}

.elastislide-wrapper {
	position: relative;
	margin: 0 auto;
	min-height: 60px;
	}

.elastislide-wrapper.elastislide-loading {
	background-image: url(../img/loading.gif);
	background-repeat: no-repeat;
	background-position: center center;
	}

.elastislide-horizontal {
	padding: 10px 40px;
	}

.elastislide-vertical {
	padding: 25px 0 25px 0;
	max-width:90%;
	}

.elastislide-carousel {
	overflow: hidden;
	position: relative;
	height:100%;
	}

.elastislide-carousel ul {
	position: relative;
	display: block;
	list-style-type: none;
	padding: 0;
	margin: 0;
	/*-webkit-backface-visibility: hidden;*/
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-ms-transform: translateX(0px);
	-o-transform: translateX(0px);
	transform: translateX(0px);
	}

.elastislide-horizontal ul {
	white-space: nowrap;
	}

.elastislide-carousel ul li {
	margin: 0;
	/*-webkit-backface-visibility: hidden;*/
	}

.elastislide-horizontal ul li {
	height: 100%;
	display: inline-block;
	margin-right:4px;
	}

.elastislide-vertical ul li {
	display: block;
	margin-bottom:10px;
	}

.elastislide-carousel ul li a {
	display: inline-block;
	width: 100%;
	height:100%;
	}

.elastislide-carousel ul li a img {
	display: block;
	/*border: 2px solid white;*/
	max-width: 100%;
	}

/* Navigation Arrows */

.elastislide-wrapper nav span {
	position: absolute;
	background: url(../img/nav.png) no-repeat 4px 3px;
	width: 23px;
	height: 23px;
	border-radius: 50%;
	text-indent: -9000px;
	cursor: pointer;
	opacity: 0.8;
}

.elastislide-wrapper nav span:hover {
	opacity: 1.0
}

.elastislide-horizontal nav span {
	top: 50%;
	left: 10px;
	margin-top: -11px;
	}
	
.elastislide-vertical nav span {
	top: 0px;
	left: 50%;
	margin-left: -11px;
	background-position: -17px 5px;
	}

.elastislide-horizontal nav span.elastislide-next {
	right: 10px;
	left: auto;
	background-position: 4px -17px;
	}

.elastislide-vertical nav span.elastislide-next {
	bottom: 10px;
	top: auto;
	background-position: -17px -18px;
	}

/* IMAGE-TITLE */
.caption {  
    background-color: rgba(5,101,40,0.8);  
    position: absolute;  
    color: #fff;  
    z-index: 100;  
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;  
    left: 0;  
	} 
ul.elastislide-list li a { position:relative; overflow:hidden;}
ul.elastislide-list li a:hover .simple-caption {  
    -moz-transform: translateY(-100%);  
    -o-transform: translateY(-100%);  
    -webkit-transform: translateY(-100%);  
    transform: translateY(-100%);  
	}
#inreferences ul.elastislide-list li a {/*opacity:0.6; */   
	-webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;}
#inreferences ul.elastislide-list li a:hover {opacity:1;    
	-webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;}	  

#inreferences .simple-caption:hover { opacity:1;}
.simple-caption {
	height: 30px;
	display: block;
	bottom: -30px;
	line-height: 25pt;
	text-align: center;
	color:#FFF;
	width:100%;
	}


/***** KONTAKT *****/
#contact { width:480px; margin-left:40%; background-color: rgba(255, 255, 255, 0.95); padding:0 40px 0px 40px;; min-height: 1200px;}
address { font-weight:normal; font-style:normal;}

/***** IMPRESSUM *****/
#impressum { width:350px; background-color: rgba(255, 255, 255, 0.9); margin-left:40%; padding:0 40px 50px 40px;}
#impressum p { text-align:justify;}

/***** DATENSCHUTZ *****/
#datenschutz { width:650px; background-color: rgba(255, 255, 255, 0.9); margin-left:40%; padding:0 40px 50px 40px;}
#datenschutz p { text-align:justify;}

/***** AGB *****/
#agb { width:350px; background-color: rgba(255, 255, 255, 0.9); margin-left:40%; padding:0 40px 50px 40px;}
#agb p { text-align:justify; margin-top:0;}

/***** ANFAHRT *****/
#anfahrt { position:absolute; right:0; width:83%; height:100%; }
#anfahrt h3{ font-size:14px;}
@media (min-width:1530px) {
	#anfahrt { width:87%; left:0; margin-left:255px; height:100%; }
	}
@media (max-width:1000px) {
	#anfahrt { width:87%; left:0; margin-left:170px; height:100%; }
	}	

/******************/
/***** FOOTER *****/
/******************/
#footer_menu { position:relative; margin-left:10px; margin-top:5px;}
#footer_menu a { cursor:pointer;}
#footer_menu a.bestLinkActive, #footer_menu a:hover { color:#FFF; text-decoration:underline;}


/************************/
/***** QUERY-LOADER *****/
/************************/

.QOverlay {
	background-color: #000000;
	z-index: 9999;
}

.QLoader {
	background-color: #CCCCCC;
	height: 1px;
}

.QAmt {
	color:#333333;
	font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
	font-size:40px;
	font-weight:bold;
	line-height:50px;
	height:50px;
	width:100px;
	margin:-60px 0 0 -50px;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 2em 0;
    padding: 0;
	clear:both;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

















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


/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
/*
.clearfix {
    *zoom: 1;/
}
*
/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }


    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}