/* 
    - Resources:
        HTML5 Boilerplate (http://html5boilerplate.com/),
        Normalise.css (http://necolas.github.com/normalize.css/), 
        Proportional grids by Boon (http://builtbyboon.com),
        CSS Tricks (css-tricks.com).
    Created on : 30.09.2015, 01:11:50
    Author     : Thu Truc Tran

*{
    border: black 1px dotted;
}
*/
//-- RESET-------------------------------------------------
//------------------------------------------------------
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block}
html, button, input, select, textarea {
    font-family: "Open sans", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
    font-weight: 400; /* normal */
    color: #555; 
}
figure{margin:0}
//-- GENERAL-----------------------------------------------
//------------------------------------------------------
body { 
    margin: 0 auto; 
    font-size: 13px; 
    line-height: 1.6; 
    height: 100%;
}
.container{
    margin: 1em auto;
    max-width: 1100px; 
    min-width: 300px; 
    min-height:100%;
}
.main > section { margin-bottom: 7em; }
.main header{ color: #555; margin-bottom: 3em; }
.main header hr{border-top-color:#999;}
.arrow:after {content:" \27F6"; /* html unicode: ⟶ */ } 
header .arrow {color: #999; font-style: italic;}
.arrow:hover {color: #0078CF; }

/*-- HEADER------------------------------------------------
--------------------------------------------------------*/
img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em;
    max-width:100%!important;
}
.menu-navigation-basic {
    font-family: "Open sans", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
    text-align: center;
    margin-top: 20px;
    padding-top: 1px;
    padding-bottom: 1px;
    background: rgba(255,255,255,1);
    background: -moz-linear-gradient(left, rgba(245,238,196,1) 0%, rgba(212,171,5,1) 20%, rgba(212,171,5,1) 50%, rgba(212,171,5,1) 80%, rgba(245,238,196,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(245,238,196,1)), color-stop(20%, rgba(212,171,5,1)), color-stop(50%, rgba(212,171,5,1)), color-stop(80%, rgba(212,171,5,1)), color-stop(100%, rgba(245,238,196,1)));
    background: -webkit-linear-gradient(left, rgba(245,238,196,1) 0%, rgba(212,171,5,1) 20%, rgba(212,171,5,1) 50%, rgba(212,171,5,1) 80%, rgba(245,238,196,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5eec4', endColorstr='#f5eec4', GradientType=1 );
}

.menu-navigation-basic a {
    color: #786B36;
    font-size: 1em;
    font-weight: 500;
    letter-spacing: -0.01em; 
    margin: 0 20px auto;
    line-height: 2;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}
.menu-navigation-basic a:hover {
    color: #474024;
}
.menu-navigation-basic a.selected {
    color: #474024;
    border-bottom: 0.15em solid #4A9F15;
}
/*-- CONTENT------------------------------------------
--------------------------------------------------------*/

article{
    /*    margin: 0.5em;*/
    position: relative;
    padding: 1rem;
    text-align: left;

}
#no_image{
    width: auto;
    height: auto;
    max-width:100%!important;
}
section {
    border-top: 1px solid #d4ab05;
    margin-top: 1em;
    width: 100%;
    clear: both;
}
.left-half {
    float: left;
    width: 50%; 
}
.right-half {
    float: left;
    width: 50%;
}

/*-- FOOTER------------------------------------------
--------------------------------------------------------*/
.footer-distributed{
    background-color: #d4ab05;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    clear:both;
    padding: 1em 2em;
    bottom:0;
}
.footer-distributed .footer-left p{
    color:  #474024;
    margin: 0;
}
/* -- WORKS / Home-page and Works-page
------------------------------------------------------------- */
figure, figcaption{
    display: inline;
    margin-top: 1em; 
    padding: 0 0.5em; 
    white-space: nowrap;
}

figure figcaption p{ 
    white-space:pre-line;
}
.left{
    float: left;
}
.right{
    float: right;
}
figcaption p{
    clear: both; 
    padding-top: 1em;    
}
.works-page .works figure { margin-bottom: 3em;}


/* -- SUBPAGES 
------------------------------------------------------------- */
/*Separations*/
.main:not(.home-page) > section article h2 { margin-top: 1em; padding-top: 1em; border-top: 1px solid #DDD; }
.main:not(.home-page) > section article:first-child h2 { margin-top: 0;}

/* Work-page (single) */
.work-page figure {margin-bottom: 3em;}
.work-page figcaption {text-align: center; margin-top: 1em;}

/* Services-page */
.warning { 
    display: block; 
    background: #F5F5F5; 
    border: 1px solid #DDD; border-left: none; border-right: none; 
    text-align: center; 
    padding: 20px; margin: 20px 0px; }
/* -- MISC //Macht die Bilder height
------------------------------------------------------------- */
figure { max-height: 100%; overflow: hidden;}
figure figcaption { }
img { max-width: 100%; height: auto; width: auto; }

a img {
    -webkit-transition: opacity 1s ease;
    -moz-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    -ms-transition: opacity 1s ease;
    transition: opacity 1s ease; }
a img:hover {
    *zoom: 1;
    opacity: 0.7;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 70);
    filter: alpha(opacity = 70);}



/* -- TYPO --------------------------------------------------
------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{margin:0 0 1em; font-weight: normal;}

h1 {
    font-size: 2em; 
    letter-spacing: -0.02em; 
    text-transform: uppercase; 
    line-height: 0.9; 
    color: #555;
    margin: 0 0 0.5em; 
    font-weight: normal; }
h2 { font-size: 1.9em; margin: 0 0 20px; letter-spacing: -0.05em; color: #555; line-height: 1; }
h3 { font-size: 1.75em; }
h4 { 
    font-size: 1.5em; 
    text-transform:uppercase; 
    letter-spacing: -0.02em; 
    margin-bottom: 0;
    border-bottom: 1px #B6B6B4 solid;
    width: 80%;
    margin-left: 0.5em;
    line-height: 2em;
    padding-top: 0.5em;
}
h5 { 
    font-size: 1.17em;
    line-height: 0.6;  
    text-transform:uppercase; 
    color: #555;
    padding-top:1em
}

h6 { 
    font-size: 1em; 
    margin-bottom: 2px; 
    font-weight: 700; 
}

h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:#333; text-decoration: none;}
h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{
    color:#0078CF;
    text-decoration: underline;
}
*{
    box-sizing: border-box;
}
/* -- GRID  https://github.com/mattberridge/Proportional-Grids/
------------------------------------------------------------- */
//body{width:100%; background: url(../img/stripes.png) no-repeat 40% 0;}
.container {width: 90%; margin: 1em auto; max-width: 1100px; min-width: 300px;}

.grid-wrap {
    margin-left: -3em; /* the same as your gutter */
    overflow: hidden;
    *zoom:1;}
.grid-wrap:before, .grid-wrap:after{content:""; display:table}
.grid-wrap:after{clear:both}

.grid {
    float: left;
    //padding-left: 1em; /* this is your gutter between columns */
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    *behavior: url(/js/boxsizing.htc); }

.half-gutter {margin-left: -1.5em; }
.half-gutter .grid-col {padding-left: 1.5em; }

.col-full {width: 100%; }
.col-one-half {width: 50%; }
.col-one-third {width: 33.333%; }
.col-two-thirds {width: 66.666%; }
.col-one-quarter {width: 25%; }
.col-three-quarters {width: 75%; }

.divide-top{
    padding-top: 2em;
    margin-top: 1.5em; 
    clear: both;
}

.mright{ margin-right: 3em;}
.mleft{ margin-left: 3em;}
.mtop{ margin-top: 3em;}
.mbottom{ margin-bottom: 3em;}
.halfmright{ margin-right: 1.5em;}
.halfmleft{ margin-left: 1.5em;}
.halfmtop{ margin-top: 1.5em;}
.halfmbottom{ margin-bottom: 1.5em;}

.fright, .fleft{display:block; overflow:hidden}
.fright{float:right}
.fleft{float:left}

.alignleft{float: left;clear: left;margin: 0.38em 1.62em 0.38em 0;}
.alignright {float: right;clear: right;margin: 0.38em 0 0.38em 1.62em;}
.aligncenter {margin: 0 auto 1.62em;display: block;}

/* -------------------------------------------------------------
======	MEDIA QUERIES
------------------------------------------------------------- */
/* -- Media query 1 (mq1)
------------------------------------------------------------- */
@media only screen and (max-width: 60em) { /* 13 / 780 */
    .mq1-col-full {width: 100%; }
    .mq1-col-one-half {width: 50%; }
    .mq1-col-one-third {width: 33.333%; }
    .mq1-col-two-thirds {width: 66.666%; }
    .mq1-col-one-quarter {width: 25%; }
    .mq1-col-three-quarters {width: 75%; }
    /**/
    h1{font-size: 2em;}
    .slide figcaption{ width: 80%;}
    footer li { float: left; margin-right: 0.5em; padding-right: 0.5em; border-right: 1px solid #DDD;} 
}

/* -- Media query 2 (mq2)
------------------------------------------------------------- */
@media only screen and (max-width: 48em) { /* 13 / 624 */
    .mq2-col-full {width: 100%;}
    .mq2-col-one-half {width: 50%; }
    .mq2-col-one-third { width: 33.333%; }
    .mq2-col-two-thirds {width: 66.666%; }
    .mq2-col-one-quarter {width: 25%; }
    .mq2-col-three-quarters {width: 75%; }
    /**/
    header nav { width: 100%; }
    header nav ul {  padding: 0 ; border-left:none; line-height: 2em; }
    header nav ul li { float: left;  padding: 0 1em ; border-left:1px solid #ddd; }
    .slider { margin-top: 3em; }
}

/* -- Media query 3 (mq3)
------------------------------------------------------------- */
@media only screen and (max-width: 30em) { /* 13 / 390 */
    .mq3-col-full { width: 100%; }
    .mq3-col-one-half { width: 50%; }
    .mq3-col-one-third { width: 33.333%; }
    .mq3-col-two-thirds { width: 66.666%; }
    .mq3-col-one-quarter { width: 25%; }
    .mq3-col-three-quarters { width: 75%; } 
    .mq3-none {display: none;}
    /**/
    header nav ul li { padding: 0 0.5em ; }
    footer li { float: none; margin-right: 0em; padding-right: 0em; border-right: none; line-height: 2em;}
    .services article {	margin-top: 3em;} .services article:first-of-type {	margin-top: 0;}	
}
body{
    
    background-color: #f5eec4;
}