@charset "UTF-8"; 
/*!   
Theme Name: R.H. Dev. Theme
Theme URI: 
Description: Customized Theme for seamless, customized Theme Development.  
Author: Ralf Hoffmeister
Author URI: http://ralfhoffmeister.de
Version: 3.4 (07-2014)
Created and Maintained by Ralf Hoffmeister
Copyright 2012—2014 __Ralf Hoffmeister__ All rights reserved.
*/

/* CSS Document */


/* ========================================================= */
/* = ================= ADJUSTMENTS ======================= = */
/* ========================================================= */

/*RESET
   http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 
   License: none (public domain)
**************************************************************/
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,button{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
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}
/*SELF CLEAR FLOATING ELEMENTS
**************************************************************/
.clear:after{content:".";display:block;height:0;font-size:0;clear:both;visibility:hidden}* html .clear{height:1%}*:first-child+html .clear{min-height:1px}
/*BORDER-BOX LAYOUT
**************************************************************/
*, *:before, *:after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} 
/*WP-CORE
**************************************************************/
.alignnone{margin:5px 20px 20px 0}.aligncenter,div.aligncenter{display:block;margin:5px auto}.alignright{float:right;margin:5px 0 20px 20px}.alignleft{float:left;margin:5px 20px 20px 0}.aligncenter{display:block;margin:5px auto}a img.alignright{float:right;margin:5px 0 20px 20px}a img.alignnone{margin:5px 20px 20px 0}a img.alignleft{float:left;margin:5px 20px 20px 0}a img.aligncenter{display:block;margin-left:auto;margin-right:auto}.wp-caption{background:#fff;border:1px solid #f0f0f0;max-width:96%;padding:5px 3px 10px;text-align:center}.wp-caption.alignnone{margin:5px 20px 20px 0}.wp-caption.alignleft{margin:5px 20px 20px 0}.wp-caption.alignright{margin:5px 0 20px 20px}.wp-caption img{border:0 none;height:auto;margin:0;max-width:98.5%;padding:0;width:auto}.wp-caption p.wp-caption-text{font-size:11px;line-height:17px;margin:0;padding:0 4px 5px}
 


/* ========================================================= */
/* = ==================== MODULES ======================== = */
/* ========================================================= */

/*MISC
**************************************************************/

.circle { 
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%; 
}

/*Call to Action Button*/
.cta,
input[type="submit"],
button { 
  outline: none;
  border: 1px solid #000; 
  color: #fff;
  background-color: #000; 
  display: inline-block;
  text-align: center;
  text-decoration: none;
  padding: .25em .5em .35em;
  line-height: 1;
  -webkit-transition: all .15s ease-in-out;
     -moz-transition: all .15s ease-in-out;
      -ms-transition: all .15s ease-in-out;
       -o-transition: all .15s ease-in-out;
          transition: all .15s ease-in-out;
}

  .no-touch .cta:hover,
  .no-touch input[type="submit"]:hover,
  .no-touch button:hover { 
    background-color: #fff; 
    color: #000;
  }

  .cta:active, 
  .cta.active,
  input[type="submit"]:active,
  button:active, 
  /*.no-touch due to :hover state (specificity)*/
  .no-touch .cta:active, 
  .no-touch .cta.active,
  .no-touch input[type="submit"]:active,
  .no-touch button:active { 
    background-color: #000; 
    color: #fff;
    -webkit-transition: none;
       -moz-transition: none;
        -ms-transition: none;
         -o-transition: none;
            transition: none;
  } 

  .warning-msg {
    border-left: 5px solid #f00; 
    padding-left: 10px;
  } 

  .info-msg {
    border-left: 5px solid #aaa; 
    padding-left: 10px;
  }

  .okay-msg {
    border-left: 5px solid #0f0; 
    padding-left: 10px;
  }
 


/* ========================================================= */
/* = ===================== BASE STYLES =================== = */
/* ========================================================= */

 html {
  min-height: 100%;
  font-size: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body { 
  position: relative;
  min-height: 100%;
  width: 100%;
  overflow-x: hidden;
  font-family: 'Montserrat', sans-serif; 
  font-size: 100%;
  line-height: 1.6;
}

p { 
  font-family: 'Montserrat', sans-serif; 
  font-size: 13px;
  max-width: 38em;
  padding: 0.5em 0 0.5em 0;
  -epub-word-break: hyphenate;
    -ms-word-break: hyphenate;
  word-break: normal;
   word-wrap: normal;
  -webkit-hyphens: auto;
    -epub-hyphens: auto;
     -moz-hyphens: auto;
          hyphens: auto;
		  line-height:23px;
} 

h1, h2, h3, h4, h5, h6 {
  padding: 1em 0 .25em 0;
}

h1, h2 {
  line-height: 1; 
  font-size: 13px; 
  color: #000; 
  padding: 11px 21px; 
  background-color: #fff;
  letter-spacing:1px;
}

h3, h4, h5, h6 {
  line-height: 1.2;
}

a {
    border: 0;
    outline: 0;
    color: inherit; 
    -webkit-transition: color .25s ease-in-out;
       -moz-transition: color .25s ease-in-out;
        -ms-transition: color .25s ease-in-out;
         -o-transition: color .25s ease-in-out;
            transition: color .25s ease-in-out;
}
  .no-touch a:hover, 
  a:focus { 
         -webkit-transition: color 0s ease-in-out;
            -moz-transition: color 0s ease-in-out;
             -ms-transition: color 0s ease-in-out;
              -o-transition: color 0s ease-in-out;
                 transition: color 0s ease-in-out;
  }

  a:active {

  }

  .no-touch button:hover, 
  button:focus {
    background: #aaa;
  }

  button:active {
      background: #000;
      color: #fff; 
      cursor: pointer;
  }

em {
  font-style: italic;
}

strong {
  font-weight: 700;
}

code {
  font-family: courier, monospace;
  background: #eee;
  padding: 0 5px;
}

address {
  font-style: italic;
}

pre {
  font-family: courier, monospace;
  white-space: pre-wrap;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li {
   list-style-position:inside;
}

nav li {
  list-style: none;
}

img {
  max-width: 100%;
  width: auto\9; /* ie8 */
  height: auto !important;
  -ms-interpolation-mode: bicubic;
  border: 0;
  -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
       -o-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
} 

video {
  max-width: 100%;
  height: auto !important;
}

blockquote {
  font-family: times;
  font-size: 125%;
  font-style: italic;
  line-height: 1.3;
  margin: 30px 0;
}

  .bq-ref {
    font-size: .8em;
    display: block;
    font-weight: 900;
    padding: 10px 20px 0 0;
    text-align: right;
  }

input,
select,
textarea,
button{
  font-family:inherit;
  font-size: inherit;
} 

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  display: block;
  width: 100%;
  border: none;
  background: #eee;
  padding: 5px 10px;
  margin-bottom: 20px;
} 

input[type="submit"] {
  cursor: pointer;
}

  input[type="text"]:focus,
  input[type="email"]:focus,
  input[type="tel"]:focus,
  textarea:focus {
    outline: none;
    background: #fafafa;
  } 

  input:focus::-webkit-input-placeholder, 
  input:focus:-moz-placeholder,  
  input:focus::-moz-placeholder,   
  input:focus:-ms-input-placeholder { 
    color:transparent; 
  } 
  
  textarea:focus::-webkit-input-placeholder, 
  textarea:focus:-moz-placeholder,  
  textarea:focus::-moz-placeholder,    
  textarea:focus:-ms-input-placeholder { 
    color:transparent; 
  } 

  ::-webkit-selection { background: #aaa; color: #fff; }
     ::-moz-selection { background: #aaa; color: #fff; }
          ::selection { background: #aaa; color: #fff; }

         h1::-webkit-selection { color: #222; }
            h1::-moz-selection { color: #222; }
                 h1::selection { color: #222; }

         h2::-webkit-selection { color: #222; }
            h2::-moz-selection { color: #222; }
                 h2::selection { color: #222; }

         h3::-webkit-selection { color: #222; }
            h3::-moz-selection { color: #222; }
                 h3::selection { color: #222; }

         h4::-webkit-selection { color: #222; }
            h4::-moz-selection { color: #222; }
                 h4::selection { color: #222; }

         h5::-webkit-selection { color: #222; }
            h5::-moz-selection { color: #222; }
                 h5::selection { color: #222; }

         h6::-webkit-selection { color: #222; }
            h6::-moz-selection { color: #222; }
                 h6::selection { color: #222; }

          a::-webkit-selection { color: #222; }
             a::-moz-selection { color: #222; }
                  a::selection { color: #222; }

 blockquote::-webkit-selection { color: #222; }
    blockquote::-moz-selection { color: #222; }
         blockquote::selection { color: #222; } 

/*FONT AND COLOR CLASSES
**************************************************************/

.sans { font-family: Verdana, sans-serif; }
.serif { font-family: Georgia, Times, serif; }
.mono { font-family: courier, monospace; }
.fancy {
  font-family: "Didot", "Times New Roman", Georgia, Times, serif;
  -moz-font-feature-settings: "liga=1";
   -ms-font-feature-settings: "liga" 1;
  -moz-font-feature-settings: "frac=1";
   -ms-font-feature-settings: "frac" 1;
} 

.base-color {        color: #ccc;} 
.base-bg {background-color: #ccc;} 

.body-color {        color: #444;}
.body-bg {background-color: #444;} 

.accent-color {        color: #f00;} 
.accent-bg {background-color: #f00;} 

.soft-color {        color: #fbb;} 
.soft-bg {background-color: #fbb;} 


 


/* ========================================================= */
/* = =================PAGE STRUCTURE====================== = */
/* ========================================================= */

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

.container { /*contains the whole Page */
  position: relative;
  min-height: 100%; 
} 

    @media screen and (max-width: 750px) { 

      .home .content {
        padding-top: 300px;
      } 

    }
  
  .content {
    position: relative;
  } 
  
    .frame, 
    [class*=frame-] { /*frame, contains Content-Modules, no padding!*/
      position: relative;
      max-width: 1000px;
      margin: 0 auto;
    } 
  
/*GRID 
**************************************************************/

.half, 
.third, .third.double, 
.quarter, .quarter.triple  { 
  width: 100%;
  position: relative;
  padding: 25px;
  float: none;
} 

@media screen and (min-width: 600px) { 

  .half {
    width: 50.000000%;
    float: left;}
  
  .third {
    width: 33.333333%;
    float: left;}

  .third.double {
    width: 66.666666%;
    float: left;}
  
  .quarter {
    width: 25.000000%;
    float: left;}

  .quarter.triple {
    width: 75.000000%;
    float: left;} 

} 


/* ========== */
/* = HEADER = */
/* ========== */

header {
  position: relative;
  z-index: 10;
} 

.logo-container { 
  position: absolute;
  top: 153px;
  left: 81px; 
  width: 35%; 
  min-width: 200px; 
  max-width: 744px;
  z-index: 2;
} 

.page-impressum .logo-container {
  max-width: 248px; 
  left: 92px;
} 

.page-impressum .logo-container:after {
      width: 344px;
      bottom: 0;
}

    @media screen and (min-width: 1400px) { 

      .logo-container { 
        width: 100%;
      }

    }

.logo { 
  position: relative;
  display: block;
  text-decoration: none; 
  padding-bottom: 30.6451612%;
  background-image: url(images/interface/logo-.png); 
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  background-size: contain; 
  z-index: 10;
  background-position: left bottom;
} 

  .logo-container:after {
    content: ""; 
    display: block;
    width: 230px; 
    height: 1px; 
    background-color: #fff; 
    position: absolute;
    left: 0;
  } 

      @media screen and (min-width: 400px) { 
  
        .logo-container:after {
          width: 300px; 
        }  
      }

    @media screen and (min-width: 600px) { 

        .logo-container:after {
          width: 300px; 
        }

    }

    @media screen and (min-width: 800px) { 

      .logo-container:after {
        bottom: 1px; 
      }

    } 

    @media screen and (min-width: 1170px) { 

      .logo-container:after {
        width: 500px; 
      }

    }

    @media screen and (min-width: 1370px) { 

      .logo-container:after {
        width: 700px; 
      }

    }

    @media screen and (min-width: 1570px) { 

      .logo-container:after {
        width: 900px; 
      }

    }

/*Main-Nav*/
.js .main-nav { 
  height: auto; 
  max-height: 1px; 
  overflow: hidden; 
  -webkit-transition: all .25s ease-in-out;
     -moz-transition: all .25s ease-in-out;
      -ms-transition: all .25s ease-in-out;
       -o-transition: all .25s ease-in-out;
          transition: all .25s ease-in-out;
} 

.js .nav-open .main-nav { 
  max-height: 400px; 
}

  .main-nav ul {
    padding: 0;
  }
  
    .main-nav li {
      list-style: none;
    }
  
      .main-nav a {
        display: block;
        padding: 10px;
        color: #000;
        text-decoration: none;
      }


/*Toggle Nav Button (mobile)*/
.menu-button {
  display: none;
}

.js .menu-button, 
.js .menu-button:hover { 
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px; 
  border: none;
  background: transparent url('images/interface/open-menu-bg.png') center center no-repeat; 
  background-size: 20px;
} 

.nav-open .menu-button, 
.nav-open .menu-button:hover {
  background: url('images/interface/close-menu-bg.png') center center no-repeat; 
  background-size: 20px;
} 

@media screen and (min-width: 600px) {

  .js .menu-button {
    display: none;
  } 

  .js .main-nav { 
    height: auto; 
    max-height: none; 
  }

}

/* =========== */
/* = CONTENT = */
/* =========== */ 

html { 
	height: 100%;
	background-image: url(images/interface/home-bg-bottom.png); 
	background-repeat: repeat-y;
	background-position: 0 0; 
	-webkit-background-size: 100% auto;
			background-size: 100% auto;
} 

		@media screen and (min-width: 1920px) { 

			html { 
				-webkit-background-size: auto auto;
						background-size: auto auto;
			} 

		}

body {
	min-height: 100%;
	background-image: url(images/interface/home-bg-top.png); 
	background-repeat: no-repeat;
	background-position: 0 0; 
	-webkit-background-size: 100% auto;
			background-size: 100% auto;
} 

	@media screen and (max-width: 700px) { 

		html, 
		body {
			-webkit-background-size: 160% auto;
			background-size: 160% auto;
		} 

	}

			@media screen and (max-width: 400px) { 
			
			html, 
			body {
				-webkit-background-size: 210% auto;
				background-size: 210% auto;
			}

		}

	@media screen and (min-width: 1920px) { 

		body { 
			-webkit-background-size: auto;
					background-size: auto;
		} 

	} 


@media screen and (max-width: 750px) { 

	.contact-module, 
	.info-module {
	    position: relative !important;
	    top: auto !important;
	    left: auto !important;
	    width: 100% !important;
	    max-width: none !important;
	    right: auto !important;
	    padding: 20px;
	    min-height: 420px;
	} 

} 

.lines { 
	position: absolute;
    top: 937px;
    left: 640px;
	width: 662px; 
	height: 158px; 
	background-image: url(images/interface/lines.png); 
	background-repeat: no-repeat;
}

	.contact-module, 
	.info-module { 
		position: absolute;
		padding: 25px 20px 25px 25px;
		min-height: 420px; 
		-webkit-transition: all .25s ease-in-out;
		   -moz-transition: all .25s ease-in-out;
		    -ms-transition: all .25s ease-in-out;
		     -o-transition: all .25s ease-in-out;
		        transition: all .25s ease-in-out;	
	}

		.contact-module {
			background-color: #f9ee58; 
			width: 375px;
			max-width: 375px; 
			border-bottom: 5px solid #e94b3e; 
			top: 0; 
			left: auto; 
			right: 0; 
		} 

		.no-touch .contact-module a:hover {
			color: #fff; 
		}

		@media screen and (min-width: 850px) { 

			.contact-module {
				width: 475px;
				max-width: 475px;
			} 

		}

		@media screen and (min-width: 1000px) { 

			.contact-module {
				right: 100px;
			} 

		}

		.contact-module:after {
			content:""; 
			width: 200px; 
			height: 5px; 
			display: block;
			position: absolute; 
			left: -100px; 
			bottom: 25px;
			background-color: #fff;
		} 

				.contact-module h2 { 
					display: inline-block;
					position: relative;
					top: auto; 
					left: auto;
				} 

			@media screen and (min-width: 750px) { 

				.contact-module h2 {
					position: absolute;
					top: 100px; 
					left: -98px;
				} 

			}
		
		.info-module {
			background-color: #000; 
			color: #fff; 
			max-width: 471px; 
			top: 530px;
			left: auto; 
			right: 19.4%;
		} 


			.info-module h2 { 
				display: inline-block;
				position: relative;
				top: auto; 
				left: auto;
			} 

			.info-module p {
				padding-bottom: 9px; 
				padding-top:0;
			}

			@media screen and (min-width: 750px) { 
	

			.info-module h2 {
				position: absolute;
				top: -35px; 
				left: 0; 
				padding-left: 25px; 
				padding-right: 25px;
			} 
	
			}

		.impressum {
			position: absolute; 
			bottom: 0; 
			right: 0;
			display: block; 
			background-color: #5859A1; 
			padding: 10px 27px; 
			text-align: center; 
			text-decoration: underline;
			font-size:13px;
			letter-spacing:1px;
		} 

			@media screen and (min-width: 750px) { 
	
				.impressum {
					position: absolute; 
					bottom: -41px;
    				right: -108px;
				} 
	
			}

		.contact-content {
			padding-top: 130px;
		}

@media screen and (min-width: 1920px) { 

	.contact-module {
		right: auto;
		left: 1340px;
	} 

	.info-module {
		left: 1076px;
		right: auto;
	} 

} 

/*IMPRESSUM*/ 

.impressum {
	text-decoration: none;
}

.page-impressum {
	background-image: url(images/interface/imprint-bg-corr.png); 
	background-repeat: no-repeat; 
	-webkit-background-size: auto;
	background-size: auto;
}

.page-impressum body {
	background-image: none;
}

.imprint-content {
	width: 100%; 
	min-height: 400px; 
	background-color: #5859A1; 
	padding-top: 70px; 
	padding-left: 81px; 
	color: #fff;
}

		.page-impressum .content {
        	padding-top: 300px;
      	} 

      	.page-impressum h2 {
      		display: inline-block;
      	}

		@media screen and (min-width: 615px) { 

			.page-impressum .content {
        		padding-top: 0; 
        		position: relative;
      		} 

      	.page-impressum h2 {
      		position: absolute;
      		left: 0; 
      		top: 459px;
      		padding-left: 25px;
      	}

			.imprint-content { 
				position: relative;
				width: 338px; 
				min-height: 1000px; 
				margin-left: 98px; 
				padding-top: 520px; 
				padding-left: 25px;
			}

		}

		.imprint-content:after {
			content: ''; 
			display: block; 
			position: absolute;
			top: 769px; 
			right: 0; 
			width: 116px; 
			height: 20px; 
			background-color: #fff;
		}


.becci {
  opacity: .85;
  width: 83px;
  height: 108px;  
  position: absolute; 
  top: 260px; 
  left: 20%; 
  background-image: url(images/content/becci_r2.png); 
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  background-size: contain;
} 
  .becci:after {
    content: "";
    display: block; 
    width: 200px; 
    height: 1px; 
    position: absolute;
    bottom: 0; 
    left: 10px;
    background-color: #000;
  }

      @media screen and (min-width: 750px) { 
  
        .becci {
          width: 161.7px;
          height: 210px;  
          top: 840px;
          left: 5%;
          opacity: .7;
        } 
      }

      @media screen and (min-width: 1200px) { 
  
        .becci {
          left: 26%;
          top: 730px;
        } 
      } 

      @media screen and (min-width: 1400px) { 
  
        .becci {
          width: 231px;
          height: 300px;
          top: 640px;
          left: 33.4%;
        } 

      }

.sepp {
  width: 70px;
  height: 104px;  
  position: absolute; 
  top: 320px; 
  right: 20px; 
  background-image: url(images/content/janosch.png); 
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  background-size: contain;
  opacity: .85;
} 

    @media screen and (min-width: 750px) { 

      .sepp  {
        width: 135.8px;
        height: 203px;
        top: 420px;
        right: auto;
        left: 80.5%;
        background-position: -20px -20px;
        opacity: .9;
      }

    }


    @media screen and (min-width: 1400px) { 

      .sepp  { 
        width: 194px;
        height: 290px;
        background-position: -50px -50px;
      }

    } 

    @media screen and (min-width: 1920px) { 

      .sepp {
        left: 1547px;
      }

    }


.janosch {
  width: 70px;
  height: 123px; 
  position: absolute; 
  top: 10px; 
  right: 20%; 
  background-image: url(images/content/sepp.png); 
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  background-size: contain;
} 

      @media screen and (min-width: 750px) { 
        
        .janosch {
              width: 108.5px;
              height: 190.5px;
              top: 160px;
              right: auto;
              left: 30%;
        } 
  
      }

      @media screen and (min-width: 1150px) { 
  
        .janosch  {
          left: 40%;
          z-index: 1;
        }
  
      }

      @media screen and (min-width: 1400px) { 
        
        .janosch {
              width: 193px;
              height: 339px;
              left: 48%;
        } 
  
      }
 


/* ========== */
/* = FOOTER = */
/* ========== */ 

footer {
  position: relative;
} 


/* =========== */
/* = HELPERS = */
/* =========== */

/*TYPOGRAPHY & LAYOUT
**************************************************************/

/*size*/
.small { font-size: .75em; }
.medium { font-size: 1.5em; }
.large { font-size: 2em; }
.x-large { font-size: 2.5em; }

/*alignment*/
.align-center { text-align: center; }
.align-justify { text-align: justify; }
.align-right { text-align: right; }
.align-left {text-align: left; }

/*styling*/
.drop-cap {
  font-size: 3em;
  line-height: 1;
  font-weight: 600;
  padding: 2px 8px 0 0;
  float: left; }
.run-in { font-weight: bold;}
.italic {font-style: italic;}
.bold {font-weight: 700;}
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }

/*other*/
.hide-text {border: 0;font: 0/0 a;text-shadow: none;color: transparent;}

.smooth {-webkit-font-smoothing: antialiased;}
.sub-smooth {-webkit-font-smoothing: subpixel-antialiased;} 

.r-br {display: none;} /*responsive line break - no break on mobile*/

.cols2, 
.cols3, 
.cols4 {
  max-width: 780px;
  -webkit-column-count: 1;
  -moz-column-count: 1;
  -ms-column-count: 1;
  column-count: 1;} 



@media screen and (min-width: 600px) {

  .r-br {display: block;} /*responsive line break*/

  .cols2 {
    -webkit-column-count: 2;
       -moz-column-count: 2;
        -ms-column-count: 2;
            column-count: 2;}
  
  .cols3 {
    -webkit-column-count: 3;
       -moz-column-count: 3;
        -ms-column-count: 3;
            column-count: 3;}
  
  .cols4 {
    -webkit-column-count: 4;
       -moz-column-count: 4;
        -ms-column-count: 4;
            column-count: 4;} 

      .cols2 p, 
      .cols3 p, 
      .cols4 p {
          padding-top: 0; 
          padding-bottom: 1em;
          display: inline-block;
        }          
      
        .cols2 h1, 
        .cols2 h2, 
        .cols2 h3, 
        .cols2 h4, 
        .cols2 h5, 
        .cols2 h6, 
        .cols2 img,
        .cols3 h1, 
        .cols3 h2, 
        .cols3 h3, 
        .cols3 h4, 
        .cols3 h5, 
        .cols3 h6, 
        .cols3 img
        .cols4 h1, 
        .cols4 h2, 
        .cols4 h3, 
        .cols4 h4, 
        .cols4 h5, 
        .cols4 h6, 
        .cols4 img {
           -webkit-column-span: all;
               column-span: all;
        }

} 

/*DISPLAY OPTIONS
**************************************************************/

/*floats*/
.left {float: left;}
.right {float: right;}

/*display*/
.block {display: block;}
.inline {display: inline;}

/*position*/
.fixed {position: fixed;}
.absolute {position: absolute;}
.relative {position: relative;}
.static {position: static;} 

 


/* ================== */
/* = RETINA & PRINT = */
/* ================== */

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    
  

} /*END MEDIA RETINA*/

@media print {

  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  html, body, p { font-size: 10pt; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }

} /*END MEDIA PRINT*/