@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,latin-ext);


/*** Browser Reset
------------------------------------------------------------------------------*/
a, abbr, acronym, address, applet, article, aside, audio, 
b, big, blockquote, body, 
caption, canvas, center, cite, code, 
dd, del, details, dfn, dialog, div, dl, dt, 
em, embed, 
fieldset, figcaption, figure, form, footer, 
header, hgroup, 
h1, h2, h3, h4, h5, h6, 
html, 
i, iframe, img, ins, 
kbd, 
label, legend, li, 
mark, menu, 
nav, 
object, ol, output, 
p, pre, 
q, ruby, s, samp, 
section, small, span, 
strike, 
strong, sub, summary, sup, tt, 
table, tbody, textarea, tfoot, thead, time, tr, th, td, u, ul, var, video  { 
    margin: 0; padding: 0;
    font-family: 'Roboto', sans-serif; 
    font-size: 1em; font-weight: 400; font-style: inherit;
    color: #000000;
    line-height: 136%; 
    text-align: inherit;    
    vertical-align: baseline; 
    white-space: normal; /*nowrap, pre ...*/
    background: transparent; 
    border: 0; outline: 0;  
}

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
* html .clearfix { height: 1%; } /* Hides from IE-mac \*/

body a { color: #34669A; text-decoration: underline; }
body a:hover { text-decoration: none; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #000 }
h1 { font-size:80px; /*font-size:500%;*/ font-weight: 900; line-height: 94%; margin-bottom:4px; }
h2 { font-size:30px; font-weight: 900; line-height: 130%;  }
h3 { font-size:24px; line-height: 160%; }

strong { font-weight:700; }

img { height: auto; max-width: 100%; } /* for responsiveness */

ul {
    list-style: none;
    margin: 5px 0 10px 0;
    }
    ul li {
        padding:0 0 0 13px; margin: 0;
        background: transparent url(../imgs/li.png) no-repeat; 
        background-position: 0 7px;
    }
/*** 
------------------------------------------------------------------------------*/

body { 
    }
    .container {
        -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; 
        max-width: 850px; min-width: 220px; 
        padding:0;
        margin: 0 auto;
        background: #FFFFFF; 
        }
        
        #page-wrap {
            margin:0 10px; padding:60px 0 50px 0;
            }
            .left-side {
                -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
                float: left;
                padding-right:20px;
                width:51.77%;
                }
                .robot-box {
                    text-align: right;
                    }
                    .robot-box.mobil { display:none; margin-top: 20px; }
        
                #logo-box {
                    margin-bottom:33px;
                }
                
                #list-box {
                    margin:30px 0 20px 0;
                }

                .kontakt-box {
                    margin:14px 0 30px 0;
                }
                .kontakt-box.mobil {display:none;}
                
            .right-side {
                -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
                float: right;
                width:48.23%;
                }
                #info-box {
                    margin:20px 0 20px 0;
                    padding:10px 20px 20px 20px;
                    line-height: 110%;
                    background: #E1E8F0;
                    }
                    #info-box h3 {
                        color:#34669A; font-weight: 900; font-size:21px;
                    }
                    #info-box span {
                        display:block;
                        color:#34669A;  font-weight: 500;
                    }
                    #info-box span:last-child { padding-top:10px; }
/***
------------------------------------------------------------------------------*/
@media only screen and (max-width: 800px) {
    #page-wrap {
        margin:0 10px;
        }
    
    h1 { font-size:60px; }

    #logo-box {
        max-width:180px;
    }
}    
 
@media only screen and (max-width: 650px) {

    #page-wrap {
        margin:0 20px;
        }
        .left-side {
            float: none; width:auto; /*margin: 0 20px;*/ /*max-width: 650px*/;
        }
        .robot-box {
            text-align: left; max-width: 145px;
            }
            .robot-box.mobil { display:block; }
            .robot-box.web { display:none; }
            #list-box { margin-top:14px; }
            
        .right-side { 
            float: none; width:auto;  /*margin: 0 20px;*/ /*max-width: 650px;*/ 
        }
            .kontakt-box.mobil { display:block; }
            .kontakt-box.web { display:none; }
}
@media only screen and (max-width:480px) {
    h1 { font-size:50px; }
}
@media only screen and (max-width:320px) {
    h1 { font-size:40px; }
}