/****************************
 * Inhaltsverzeichnis
 *
 * 1.0 - Reset
 * 2.0 - Grid
 * 3.0 - Hilfsklassen
 * 4.0 - Clearings
 * 5.0 - Global Styles (HTML Elemente)
 * 6.0 - Typography
 * 7.0 - Forms
 * 8.0 - Navigation
 *   8.1 - Links
 *   8.2 - Buttons
 *   8.3 - Listen
 * 9.0 - Layout
 *   9.1 - Header
 *   9.2 - Main
 *   9.3 - Footer
 * 10.0 - Seitenelemente
 * 11.0 - Media (Shopgrafiken)
 * 12.0 - Media Queries
 *    12.1 - XS
 *    12.2 - SM
 *    12.3 - MD
 *    12.4 - LG
 *    12.5 - XL
 * 13.0 - Print
 *****************************/

/*****************************
 *
 * 3.0 Hilfsklassen
 *
 ***********************************************************/
 .top-padding-wide{
    padding-top: 3rem !important;
}

 .top-padding-small{
    padding-top: 1.75rem !important;
}


 .top-bottom-padding {
	padding: 1rem 0 7.5rem 0;
}

.top-bottom-padding-wide {
	padding: 7.5rem 0 7.5rem 0;
}

.bottom-padding-wide{
    padding-bottom: 3rem !important;
}

.bottom-padding-small{
    padding-bottom: 6px !important;
}

.padding-small {
	padding-top:1.875rem;
	padding-bottom:0.5rem;
}

.left-padding-small {
    padding-left: 6px !important;
}

.right-padding-small{
    padding-right: 6px !important;
}

.padding-wide {
	padding: 120px 0 80px 0;
}

.left-padding-wide{
    padding-left: 18px !important;
}

.right-padding-wide {
    padding-right: 18px !important;
}


.block {
	margin-bottom: 1.875rem;
}

.block-big {
	margin-top: 1.875rem;
	margin-bottom: 1.875rem;
}

.subline {
	font-size:90%;
}

.outline {
	background-color:#fff;
	padding:0.5rem;
}

.parallax_section{
	min-height: 400px;
  	background-repeat: no-repeat;
  	background-attachment: fixed;
  	background-size: cover;
  	background-position: 100% auto;
	position:relative;
}

.parallax_image_first{
	 background-image: url("../img/hochburg_keyvisuals_header_a_work.jpg");
}

.no-margin {
    margin: 0px ! important;
}

 



.margin-top {
	margin-top:1.5rem;
}

/*****************************
 *
 * 6.0 Typo
 *
 ***********************************************************/
 
 .clr-grau {
	 color:#6a6a6a;
 }
 
.clr-rot {
	 color:#fe504f;
 }
 
 .clr-weiss {
	 color:#fff;
 }
 
 .highlight-primary {
	text-transform: uppercase;
	border-bottom: 5px solid #c00;
	display: inline-block;
}

.highlight span {
	display: inline-block;
	padding: 0.3em 0.35em 0.3em 0.35em;
	margin: 0.3em -0.1em;
	color: #FFF;
	background-color: #c00;
	box-sizing: border-box;
}

.post-header::after {
    content: "";
    display: block;
    width: 66px;
    height: 8px;
    background: #fe504f;
    margin: 30px auto;
}

.post-header-white::after {
    content: "";
    display: block;
    width: 66px;
    height: 8px;
    background: #fff;
    margin: 30px auto;
}

.post-header-left::after {
    content: "";
    display: block;
    width: 66px;
    height: 8px;
    background: #fe504f;
    margin: 30px 0;
}

.text-uppercase {
    text-transform: uppercase;
}

.text-light {
	font-family: 'Roboto',Helvetica, Roboto, Arial, sans-serif;
  	font-weight: 300; }
 
.text-medium {
	font-family: 'Roboto',Helvetica, Roboto, Arial, sans-serif;
  	font-weight: 500; }
	
.text-bold {
	font-family: 'Roboto',Helvetica, Roboto, Arial, sans-serif;
  	font-weight: 700; }
	
.subheader {
  margin-top: 0.2rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
  color: #6a6a6a; }

.headline {
	display:inline-block;
	border-bottom:8px solid #fff;
}

.intro {
	font-size:4.5em;
	line-height:80%;
	text-transform: uppercase;
}

@media only screen and (max-width: 40em) {
	.intro {
	font-size:2.5em;
	line-height:80%;
	}
}

.icon {
	vertical-align:middle;
	color:#fff;
	padding-right:5px;
	font-size:1.9375rem;
}

.hero_white i {
    font-size: 4rem;
    background-color: #fff;
    color: #fe504f;
    border-radius: 50%;
    width: 4rem;
    height: 4rem;
    vertical-align: middle;
    margin: 2rem 0 1rem 0;
}

.hero_black i {
    font-size: 4rem;
    vertical-align: middle;
	margin: 2rem 0 1rem 0;
}

.hero_dark i {
    font-size: 4rem;
    background-color: #fe504f;
    color: #fff;
    border-radius: 50%;
    width: 4rem;
    height: 4rem;
    vertical-align: middle;
    margin: 2rem 0 1rem 0;
}


/*****************************
 *
 * 8.0 Navigation
 *
 ***********************************************************/

.fixed-top {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 99;
	left: 0;
	}

@media (max-width: 768px) {
.breadcrumbs {
	margin-top: 1rem;
}
}
 
.menu > li > a:hover {
	color:#fff;
	background:#fe504f;
	height:100%;
	}
	
.menu > li > a {
	color:#fff;
	line-height: 45px;
    padding: 0 1rem;
	}

/*****************************
 *
 * 9.0 Layout
 *
 ***********************************************************/
 
 .border.top {
	top: 0;
	background-image:url(../img/border_top.png);
	background-repeat: repeat-x;
	background-position: left top;
}

 .border.top.weiss {
	background-image:url(../img/border_top_weiss.png);
}

 .border.bottom {
	top: 0;
	background-image:url(../img/border_bottom.png);
	background-repeat: repeat-x;
	background-position: left bottom;
	}

.hello-grey {
	background-color:#efefef;
	display:inline-block;
	padding: 1rem;
 }
 
.round {
	border-radius: 50%;
}

  /** 9.1 Header
 *****************************/
 
.hello {
	background-color:#fff;
	display:inline-block;
	padding: 1rem;
 }

.hello-small {
	background: rgba(255,255,255,0.5);	
	display:inline-block;
	padding: 0.5rem;
 }


  /** 9.2 Main
 *****************************/
 
 main {
	background-color:#fff;
}
 
  /** 9.3 Footer
 *****************************/
 
#footer {
	background-color:#fff;
}

#grey {
	background-color: #333;
}

/*****************************
 *
 * 10.0 Seitenelemente
 *
 ***********************************************************/
 
 /** 10.1 Hintergründe
 *****************************/
 
 .back {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.back.big {
	min-height:400px;
}

 .clr-back {
	 background-color:#efefef;
 }

#grafik {
	background-image:url(../img/back_grafik.jpg);
}

#film {
	background-image:url(../img/back_film.jpg);
}

#fotografie {
	background-image:url(../img/back_foto.jpg);
}

#about {
	background-image:url(../img/back_about.jpg);
}

#impressum {
	background-image:url(../img/back_impressum.jpg);
}

#more {
	background-color:#efefef;
}

#home {
	background-image:url(../img/back_01.jpg);	
}

#work {
	background-image:url(../img/work.jpg);	
}

#go {
	background-image:url(../img/back_skills.jpg);	
}

/*****************************
 *
 * 14.0 Back to top
 *
 ***********************************************************/

#BACKTOTOPBUTTON {
    -moz-user-select: none;
    bottom: 30px;
    cursor: pointer;
    height: auto;
	width:auto;
    opacity: 0.8;
    position: fixed;
    right: 20px;
    display: none;
    z-index: 1000;
}

/*****************************
 *
 * 15.0 Timeline
 *
 ***********************************************************/

.timeline {
    list-style: none;
    padding: 20px 0 20px;
    position: relative;
}

.timeline:before {
	top: 0;
    bottom: 0;
    position: absolute;
	content: " ";
    width: 3px;
	background-color: #eeeeee;
    left: 50%;
    margin-left: -1.5px;
}

.timeline > li {
	margin-bottom: 20px;
    position: relative;
}

.timeline > li:before, .timeline > li:after {
    content: " ";
    display: table;
}

.timeline > li:after {
    clear: both;
}

.timeline > li > .timeline-panel {
	width: 42%;
    float: left;
    border: 1px solid #d4d4d4;
    border-radius: 2px;
    padding: 20px;
   	position: relative;
   	-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}

.timeline > li > .timeline-panel:before {
	position: absolute;
    top: 26px;
    right: -15px;
    display: inline-block;
    border-top: 15px solid transparent;
    border-left: 15px solid #ccc;
    border-right: 0 solid #ccc;
    border-bottom: 15px solid transparent;
    content: " ";
}

.timeline > li > .timeline-panel:after {
	position: absolute;
    top: 27px;
    right: -14px;
    display: inline-block;
    border-top: 14px solid transparent;
    border-left: 14px solid #fff;
    border-right: 0 solid #fff;
    border-bottom: 14px solid transparent;
    content: " ";
}
.timeline > li > .timeline-badge {
	color: #fff;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
    text-align: center;
    position: absolute;
 	top: 16px;
    left: 50%;
	margin-left: -25px;
	background-color: #fe504f;
	z-index: 100;
	border-top-right-radius: 50%;
	border-top-left-radius: 50%;
	border-bottom-right-radius: 50%;
	border-bottom-left-radius: 50%;
}

.timeline > li.timeline-inverted > .timeline-panel {
	float: right;
}

.timeline > li.timeline-inverted > .timeline-panel:before {
	border-left-width: 0;
	border-right-width: 15px;
	left: -15px;
    right: auto;
}

.timeline > li.timeline-inverted > .timeline-panel:after {
	border-left-width: 0;
	border-right-width: 14px;
	left: -14px;
	right: auto;
}

.timeline-title {
    margin-top: 0;
    color: inherit;
}

.timeline-body > p,
.timeline-body > ul {
    margin-bottom: 0;
}

.timeline-body > p + p {
	margin-top: 5px;
}

@media (max-width: 767px) {
    ul.timeline:before {
        left: 40px;
    }

    ul.timeline > li > .timeline-panel {
        width: calc(100% - 90px);
        width: -moz-calc(100% - 90px);
        width: -webkit-calc(100% - 90px);
    }

    ul.timeline > li > .timeline-badge {
        left: 15px;
        margin-left: 0;
        top: 16px;
    }

    ul.timeline > li > .timeline-panel {
        float: right;
    }

        ul.timeline > li > .timeline-panel:before {
            border-left-width: 0;
            border-right-width: 15px;
            left: -15px;
            right: auto;
        }

        ul.timeline > li > .timeline-panel:after {
            border-left-width: 0;
            border-right-width: 14px;
            left: -14px;
            right: auto;
        }
}