@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans');

* {transition: .15s ease-in; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
html,body {margin: 0; padding: 0;}
body {font-family: 'Alegreya Sans', sans-serif; background: #193215 url('shower/corporate.jpg');}
div {color: #111; font-size: 17.5px; font-weight: normal; letter-spacing: 0; line-height: 20px;}
a {color: #111; text-decoration: underline;}
a:hover {color: #000;}
h1 {padding: 2px 0 8px; font-size: 28px; font-weight: normal; color: #934823; margin: 0 0 5px 0; letter-spacing: -1px; line-height: 28px; text-align: left;}

.corporate {margin: 0 auto; min-width: 1000px; max-width: 1200px; background-color: #ece0b0; box-shadow: 0 0 20px rgba(0,0,0,.75); border-radius: 8px;}
.trap {position: relative; background: #966d34 url('shower/trap.jpg') no-repeat; height: 154px; box-shadow: 0 2px 6px rgba(0,0,0,.5); border-radius: 8px 8px 0 0;}
.trap:before, .trap:after {content: ''; position: absolute; top: 0; height: 154px; background-repeat: no-repeat; z-index: 1;}
.trap:before {background-image: url('shower/trapbefore.png'); width: 164px; left: 0;}
.trap:after {background-image: url('shower/trapafter.png'); width: 202px; right: 0;}
.trap img {position: relative; z-index: 2; margin: 29px 0 0 156px;}

.pitfall {position: relative; margin: 0;}
.creation {padding: 0 2px;}
.genially, .argumentation, .gracefully div, .gracefully img {background: #fefaf0 url('shower/genially.jpg'); box-shadow: 0 2px 4px rgba(0,0,0,.2); border-radius: 8px;}
.genially {text-align: justify; margin: 8px; padding: 6px 12px;}

.gracefully {margin: 8px; padding: 3px 0; text-align: center;}
.gracefully:after {display: block; content: ''; clear: both;}
.gracefully div {margin: 0 5px 10px 0; text-align: center; padding: 7px 5px; display: inline-block; min-width: 19.3%; max-width: 19.3%; vertical-align: top;}
.gracefully img {display: table; margin: 7px auto 5px;}
.gracefully span {font-size: 18px; font-weight: bold; display: block; margin-bottom: 3px;}
.gracefully img:hover {box-shadow: 0 0 0 2px #fdfaf1, 0 3px 9px rgba(0,0,0,.4);}
.gracefully a:hover {color: #6a3186; text-decoration: none;}

.creationmini {margin: 0 0 0 250px;}

.rubbish {width: 250px; position: absolute; top: 0; left: 0; padding: 0 0 0 8px;}

.argumentation img {vertical-align: middle; margin-right: 5px; border-radius: 4px;}
.argumentation ul {padding: 0 0 10px; margin: 0 7px; list-style: none;}
.argumentation li {font-weight: bold; padding: 4px 0 4px 2px; border-bottom: 1px solid #dbd0a4; box-shadow: 0px 2px 0 #f3ebc7; border-radius: 4px; margin-bottom: 2px;}
.argumentation li a:link, .argumentation li a:visited {text-decoration: none; color: #29241a;}
.argumentation li a:hover {color: #6a3186;}

.argumentation .work {background: #f7edd2; box-shadow: 0 1px 3px rgba(0,0,0,.2) inset;}
.argumentation .work li a {color: #503819; text-shadow: 1px 1px #fff;}

.felling {height: 100px; margin-top: 5px; background: #966d34 url("shower/felling.jpg") no-repeat; box-shadow: 0 -1px 3px rgba(0,0,0,.4), 0 -3px 9px rgba(0,0,0,.6) inset; position: relative; border-radius: 8px;}
.underworld {text-align: center; top: 40%; position: relative;}

@media screen and (max-width: 1080px) {
.gracefully img {width: 180px; height: auto;}
.gracefully div {min-width: 19.2%; max-width: 19.2%;}
}

@media screen and (max-width: 640px) {
.corporate {min-width: 0; box-shadow: none;}
.trap {height: auto; text-align: center;}
.trap img {margin: 12px 0 0 -10px; max-width: 95%; height: auto;}
.trap:before, .trap:after {display: none; visibility: hidden;}
.genially {text-align: left; margin: 4px; padding: 6px 8px;}
.creationmini {margin: 0;}
.rubbish {position: relative; top: auto; left: auto; margin: 0 auto;}
.gracefully div {min-width: 0; max-width: 200px;}
.gracefully img {width: 190px; height: auto;}
}