body{
    font-size: 1.2em;
    font-family: Roboto;
    font-weight:300;
    line-height:1.3em;
    margin:0 auto;
    width:83.33%;
    padding:0;
    color:#444;
    }

h2{font-size:150%;font-weight:300;}

div#header{width:100%;margin-bottom:0.5em;}
.mitte-12{margin:1em auto;width:100%;}
.mitte-10{margin:1em auto;width:83,33%;}
.mitte-8{margin:1em auto;width:66,66%;}
.mitte-6{margin:1em auto;width:50%;}
.mitte-4{margin:1em auto;width:33.33%;}

div#logo{margin:1em auto;width:33.33%;}

div#navi ul{padding:0;}
div#navi li {list-style:none;display:inline;}
div#navi li img{width:8.33%;margin-right:0.5%;border:1px solid #DDD;}
div#navi li a{padding: 0;}
div.hr{height:2px;color:#DDD;background-color:#DDD;}

.scrnimg{width:80%;margin:0 auto;}


div#container{
    background-color: #fff;
    padding:1em 7%;width:86%%;
}

div#mitte-12{background-color:#fafafa;margin:1%;width:96%;padding:1%;box-shadow:2px 2px 4px #AAA;}
.mitte-12{background-color:#fafafa;margin:1%;width:96%;padding:1%;box-shadow:2px 2px 4px #AAA;}
a{color:#2387d9;text-decoration:none;}
a:hover{color:#2c3c69;text-decoration:none;}


.block4v12 {float:left;background-color:#fafafa;margin:1%;width:29.33%;height:23em;padding:1%;box-shadow:2px 2px 4px #AAA;}
.iconimg{width:80%;margin: 0;}

a.iconimg{color:#444;text-decoration:none;}
a.iconimg:hover{color:#444;text-decoration:none;}
.detailimg{width:8.33%;border:1px solid #DDD;}
.letsenc{width:20%;}
.padlock{float:right;width:10%;margin:3%;}

@media screen and (min-width: 1680px) and (max-width: 1920px) 
{
body{font-size: 1.3em;}
div#logo{margin:1em auto;width:33.33%;}
.block4v12 {float:left;background-color:#fafafa;margin:1%;width:29.33%;height:23em;padding:1%;box-shadow:2px 2px 4px #AAA;}
.iconimg{width:80%;margin: 0;}
.letsenc{width:20%;}
.padlock{float:right;width:10%;margin:3%;}
}

@media screen and (min-width: 1280px) and (max-width: 1679px) 
{
body{font-size: 1.3em;
    margin:0 auto;
    width:91.66%;}
div#logo{margin:1em auto;width:41.66%;}
.block4v12 {float:left;background-color:#fafafa;margin:1%;width:29.33%;height:23em;padding:1%;box-shadow:2px 2px 4px #AAA;}
.iconimg{width:80%;margin: 0;}
.letsenc{width:20%;}
.padlock{float:right;width:10%;margin:3%;}
}

@media screen and (min-width: 960px) and (max-width: 1279px)
{
body{font-size: 1.2em;margin:0 auto;width:83.33%;}
div#logo{margin:1em auto;width:41.66%;}
.block4v12 {float:left;background-color:#fafafa;margin:1%;width:46%;height:23em;padding:1%;box-shadow:2px 2px 4px #AAA;}
.iconimg{width:60%;margin: 0;}
.letsenc{width:25%;}
.padlock{float:right;width:16,66%;margin:3%;}
}

@media screen and (min-width: 800px) and (max-width: 959px) 
{
body{font-size: 1.1em;margin:0 auto;width:91.66%;}
div#logo{margin:1em auto;width:66.66%;}
div#navi li img{width:16.66%;margin-right:0.5%;border:1px solid #DDD;}
.detailimg{width:16.66%;border:1px solid #DDD;}
.block4v12 {float:left;background-color:#fafafa;margin:1%;width:46%;height:20em;padding:1%;box-shadow:2px 2px 4px #AAA;}
.iconimg{width:60%;margin: 0;}
.letsenc{width:25%;}
.padlock{float:right;width:16.66%;margin:3%;}
}

@media screen and (min-width: 600px) and (max-width: 799px) 
{
body{font-size: 1.1em; margin:0 auto;width:98%;}
div#logo{margin:1em auto;width:83.33%;}
div#navi li img{width:16.66%;margin-right:0.5%;border:1px solid #DDD;}
.detailimg{width:16.66%;border:1px solid #DDD;}
.block4v12 {float:left;background-color:#fafafa;margin:1%;width:46%;height:20em;padding:1%;box-shadow:2px 2px 4px #AAA;}
.iconimg{width:60%;margin: 0;}
.letsenc{width:33.33%;}
.padlock{float:right;width:25%;margin:3%;}
}

@media screen and (min-width: 320px) and (max-width: 599px)
{
body{font-size: 1.1em; margin:0 auto; width:98%;}
div#logo{margin:1em auto;width:91.66%;}
div#navi li img{width:30.33%;margin-right:0.5%;border:1px solid #DDD;}
.detailimg{width:30.33%;border:1px solid #DDD;}
.block4v12 {float:left;background-color:#fafafa;margin:1%;width:96%;height:18em;padding:1%;box-shadow:2px 2px 4px #AAA;}
.iconimg{width:40%;margin: 0;}
.letsenc{width:41.66%;}
.padlock{float:right;width:25%;margin:3%;}
}

@media screen and (min-width: 30px) and (max-width: 320px)
{
body{font-size: 1.1em; margin:0 auto; width:98%;}
div#logo{margin:1em auto;width:91.66%;}
div#navi li img{width:30.33%;margin-right:0.5%;border:1px solid #DDD;}
.detailimg{width:30.33%;border:1px solid #DDD;}
.block4v12 {float:left;background-color:#fafafa;margin:1%;width:96%;height:18em;padding:1%;box-shadow:2px 2px 4px #AAA;}
.iconimg{width:40%;margin: 0;}
.letsenc{width:50%;}
.padlock{float:right;width:25%;margin:3%;}
}