/*STRIP*/
* {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; outline: none;}
a {text-decoration: none; color: inherit;}
::placeholder {opacity: 0.6;}

/*FONT*/
@font-face {font-family: 'icon'; src: url('../fonts/fontawesome.eot?v=4.7.0'); src: url('../fonts/fontawesome.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('../fonts/fontawesome.woff2?v=4.7.0') format('woff2'),url('../fonts/fontawesome.woff?v=4.7.0') format('woff'),url('../fonts/fontawesome.ttf?v=4.7.0') format('truetype'),url('../fonts/fontawesome.svg?v=4.7.0#fontawesomeregular') format('svg'); font-style: normal; font-weight: normal;}

/*BASE*/
body {background-color: #f0d1f2; font-family: arial; overflow-x: hidden;}
.main {margin-left: auto; margin-right: auto; max-width: 360px; width: 360px; background-color: #e7c3e8; text-align: center;}
.flexrow {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row;}
.flexcol {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;}

/*CONTENT*/
.main .box {position: relative; margin: 10px 0; background-color: rgba(255,255,255,0.15);}
.main .box.header {border-top: 10px solid #e7c3e8;}

/*CONTENT - HEADER*/
.main > .box.header {min-height: 180px; overflow: hidden;}
.main > .box.header > .ringen {position: absolute; left: 0; top: 0; min-height: 100px;}
.main > .box.header > .foto {position: absolute; right: -20px; top: 0; min-height: 100px;}
.main > .box.header > .foto > img {transform: rotateZ(12deg);}
.main > .box.header > .title {position: absolute; left: 0; right: 0; bottom: 10px; font-size: 26px;}

/*CONTENT - DATE*/
.main > .box.date {line-height: 30px; font-size: 22px;}

/*CONTENT - TEXT*/
.main > .box.text {padding: 6px 0;}
.main > .box.text > .left {width: 32%; text-align: right; padding-right: 20px;}
.main > .box.text > .right {text-align: left;}
.main > .box.text > .right > .envelop:after {font-family: icon; content: "\f003"}

/*CONTENT - KIDS*/
.main > .box.kids {line-height: 30px;}

/*CONTENT - FOTOS*/
.main > .box.fotos {min-height: 426px; overflow: hidden;}
.main > .box.fotos > .eva {position: absolute; left: 0; top: 16px; min-height: 100px;}
.main > .box.fotos > .eva > img {transform: rotateZ(-12deg);}
.main > .box.fotos > .chamila {position: absolute; left: calc(50% - 75px); bottom: 0; min-height: 100px;}
.main > .box.fotos > .chamila > img {transform: rotateZ(-4deg);}
.main > .box.fotos > .thijs {position: absolute; right: -24px; top: 52px; min-height: 100px;}
.main > .box.fotos > .thijs > img {transform: rotateZ(10deg);}

/*CONTENT - NUMMERS*/
.main > .box.nummers {padding: 6px 0;}
.main > .box.nummers > .left {width: 32%; text-align: right; padding-right: 20px;}
.main > .box.nummers > .right {text-align: left;}

/*CONTENT - DIEET*/
.main > .box.dieet {padding: 6px 0;}

/*CONTENT - DRANK*/
.main > .box.drank {padding: 6px 0;}

/*CONTENT - MAP*/
.main > a > .box.map {padding: 6px 0;}
.main > a > .box.map > .left {width: 32%; text-align: right; padding-right: 10px; text-align: center; margin-top: 42px;}
.main > a > .box.map:hover > .left {text-decoration: underline;}

/*CONTENT - LOCATIE*/
.main > a > .box.locatie {padding: 6px 0;}
.main > a > .box.locatie > .left {width: 230px;}
.main > a > .box.locatie > .left > .text {margin-top: 16px;}
.main > a > .box.locatie:hover > .left {text-decoration: underline;}