<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Hornebom/pen/AgmFE?depth=everything&order=popularity&page=8&q=tablet&show_forks=false" />
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
*, *:before, *:after {
margin:0;
padding:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
body {background:#353842;font-family: 'Titillium Web', sans-serif;}
html, body {width:100%;height:100%;color:#333;}
.project-tablet {
width:100%;
max-width:35rem;
margin:0 auto;
padding:1em;
}
.ipad {
position:relative;
width:100%;
padding-bottom:145%;
font-size:100%;
border-radius:1.5em;
background:#141518;
border-top:2px solid #43464d;
border-right:2px solid #2f3138;
border-bottom:2px solid #2f3138;
border-left:2px solid #43464d;
box-shadow:0.7rem 0.7rem 1.5rem rgba(0,0,0,0.3);
}
/* ------------------------------------ radios */
/* ----------- matching all */
input[name="btn"] {
z-index:999;
opacity:0;
}
input[name="btn"] + label {
z-index:888;
}
input[name="btn"],
input[name="btn"] + label {
position:absolute;
cursor:pointer;
}
input[name="btn"] + label:before {
content:'';
position:absolute;
}
/* ------------------------------- home button */
input[id="info"],
input[id="info"] + label {
bottom:2%;
left:50%;
width:6%;
padding-bottom:6%;
margin-left:-3%;
}
input[id="info"] + label {
background:-webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(rgba(255,255,255,0.07)));
background:-webkit-linear-gradient(transparent, rgba(255,255,255,0.07));
background:-moz-linear-gradient(transparent, rgba(255,255,255,0.07));
background:-o-linear-gradient(transparent, rgba(255,255,255,0.07));
background:linear-gradient(transparent, rgba(255,255,255,0.07));
border-radius:50%;
}
input[id="info"] + label:after {
content:'';
position:absolute;
top:30%;
left:30%;
width:40%;
height:40%;
border:1px solid #43464d;
border-radius:0.3rem;
}
input[id="info"] + label:before {
top:-100%;
left:50%;
width:2em;
height:2em;
margin-left:-1em;
border-bottom:3px solid #e95d1f;
border-left:3px solid #e95d1f;
border-radius:5%;
opacity:0;
-webkit-transform:translateY(0) rotate(-45deg);
-moz-transform:translateY(0) rotate(-45deg);
transform:translateY(0) rotate(-45deg);
}
.ipad:hover > input[id="info"] + label:before {
-webkit-animation:bounce 2s;
-moz-animation:bounce 2s;
animation:bounce 2s;
}
@-webkit-keyframes bounce {
0% {opacity:0;-webkit-transform:translateY(0) rotate(-45deg);}
20%, 60% {opacity:1;-webkit-transform:translateY(-100%) rotate(-45deg);}
40%, 80% {opacity:1;-webkit-transform:translateY(-70%) rotate(-45deg);}
100% {opacity:0;-webkit-transform:translateY(-500%) rotate(-45deg);}
}
@-moz-keyframes bounce {
0% {opacity:0;-moz-transform:translateY(0) rotate(-45deg);}
20%, 60% {opacity:1;-moz-transform:translateY(-100%) rotate(-45deg);}
40%, 80% {opacity:1;-moz-transform:translateY(-70%) rotate(-45deg);}
100% {opacity:0;-moz-transform:translateY(-500%) rotate(-45deg);}
}
@keyframes bounce {
0% {opacity:0;transform:translateY(0) rotate(-45deg);}
20%, 60% {opacity:1;transform:translateY(-100%) rotate(-45deg);}
40%, 80% {opacity:1;transform:translateY(-70%) rotate(-45deg);}
100% {opacity:0;transform:translateY(-500%) rotate(-45deg);}
}
/* ----------------------------------- safari button */
input[id="layout"],
input[id="layout"] + label {
position:absolute;
bottom:10%;
right:19%;
width:8%;
padding-bottom:8%;
margin-left:-4%;
background-size:99%;
background-position:center;
background-repeat:no-repeat;
}
input[id="layout"] + label {z-index:3;}
/* --------------------------------- layout image and caption*/
.screen-tablet,
.caption {
position:absolute;
right:4%;
bottom:9%;
width:92%;
height:82%;
overflow:hidden;
}
.screen-tablet {
z-index:3;
opacity:1;
-webkit-transition:all .2s;
-moz-transition:all .2s;
transition:all .2s;
}
.screen-tablet:before {
content:'';
position:absolute;
top:0;
right:0;
left:0;
height:15%;
background:url('https://dl.dropboxusercontent.com/u/330966/ipad/ipad_hh_head.png');
background:url('https://dl.dropboxusercontent.com/u/330966/ipad/ipad_hh_head.svg'), none;
background-repeat:no-repeat;
background-size:100% auto;
z-index:4;
}
.page {
display:block;
width:100%;
height:auto;
z-index:3;
-webkit-animation:scroll 12s 2s infinite;
-moz-animation:scroll 12s 2s infinite;
animation:scroll 12s 2s infinite;
}
/*------------------------------ scroll animation */
@-webkit-keyframes scroll {
0%, 25%, 100% {-webkit-transform:translateY(0);}
35%, 65% {-webkit-transform:translateY(-32%);}
70%, 95% {-webkit-transform:translateY(-64%);}
}
@-moz-keyframes scroll {
0%, 25%, 100% {-moz-transform:translateY(0);}
35%, 65% {-moz-transform:translateY(-32%);}
70%, 95% {-moz-transform:translateY(-64%);}
}
@keyframes scroll {
0%, 25%, 100% {transform:translateY(0);}
35%, 65% {transform:translateY(-32%);}
70%, 95% {transform:translateY(-64%);}
}
.caption {
padding:1em 1em 13% 1em;
z-index:2;
background:#efefef;
}
.caption h3 {
padding-bottom:0.5em;
border-bottom:1px solid #BFBFBF;
}
.caption p {
padding-top:0.5em;
}
.caption h3,
.caption p {
font-weight:300;
-webkit-transition:all .2s;
-moz-transition:all .2s;
transition:all .2s;
}
.social {
position:absolute;
right:0;
bottom:0;
left:0;
height:10%;
padding:2% 0;
background:white;
border-top:#BFBFBF;
}
.social ul {
list-style-type:none;
width:54%;
height:100%;
display:-webkit-flex;
display:flex;
-webkit-flex-direction:row;
flex-direction:row;
-webkit-justify-content:flex-start;
justify-content:flex-start;
}
.social ul li {
width:50%;
flex-basis:50%;
height:100%;
display:-webkit-flex;
display:flex;
-webkit-flex-direction:row;
flex-direction:row;
-webkit-justify-content:flex-end;
justify-content:flex-end;
}
.mail,
.twitter {
display:block;
width:29.629%;
flex-basis:29.629%;
height:100%;
background-size:99%;
background-position:center;
background-repeat:no-repeat;
}
/* -------------------------------- action on click */
input[id="info"]:checked ~ .screen-tablet {
right:15%;
height:0;
width:10%;
opacity:0;
}
input[id="info"]:checked ~ .caption h3 {
opacity:1;
-webkit-transform:scale(1);
-moz-transform:scale(1);
transform:scale(1)
}
input[id="info"]:checked ~ .caption p {
opacity:1;
-webkit-transform:scale(1);
-moz-transform:scale(1);
transform:scale(1);
}
input[id="layout"]:checked ~ .screen-tablet {
right:4%;
height:82%;
width:92%;
opacity:1;
}
input[id="layout"]:checked ~ .caption h3 {
opacity:0;
-webkit-transform:scale(2);
-moz-transform:scale(2);
transform:scale(2);
}
input[id="layout"]:checked ~ .caption p {
opacity:0;
-webkit-transform:scale(2);
-moz-transform:scale(2);
transform:scale(2);
}
@media screen and (min-width: 20.000em) {body {font-size: 100%;}}
@media screen and (min-width: 50.000em) {body {font-size: 125%;}}
@media screen and (min-width: 64.375em) {body {font-size: 137.5%;}}
@media screen and (min-width: 75.000em) and (min-height:31.250em) {body {font-size: 150%;}}
@media screen and (min-width: 106.875em) and (min-height:50.000em) {body {font-size: 162.5%;}}
/* TWITTER ICON */
.twitter {
background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE1LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluICAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIiBbCgk8IUVOVElUWSBuc19mbG93cyAiaHR0cDovL25zLmFkb2JlLmNvbS9GbG93cy8xLjAvIj4KXT4KPHN2ZyB2ZXJzaW9uPSIxLjEiCgkgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6YT0iaHR0cDovL25zLmFkb2JlLmNvbS9BZG9iZVNWR1ZpZXdlckV4dGVuc2lvbnMvMy4wLyIKCSB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjEwMjRweCIgaGVpZ2h0PSIxMDI0cHgiIHZpZXdCb3g9IjAuMzcgMC40OTkgMTAyNCAxMDI0IgoJIG92ZXJmbG93PSJ2aXNpYmxlIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAuMzcgMC40OTkgMTAyNCAxMDI0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGRlZnM+CjwvZGVmcz4KPHBhdGggZGlzcGxheT0ibm9uZSIgZmlsbD0iIzQxQjdGMSIgZD0iTTEwMjQuNSw4MTQuNWMwLDExNS41LTk0LjUsMjEwLTIxMCwyMTBoLTYwNGMtMTE1LjUsMC0yMTAtOTQuNS0yMTAtMjEwdi02MDQKCUMwLjUsOTUsOTUsMC41LDIxMC41LDAuNWg2MDRjMTE1LjUsMCwyMTAsOTQuNSwyMTAsMjEwVjgxNC41eiIvPgo8cGF0aCBkaXNwbGF5PSJub25lIiBmaWxsPSIjRkZGRkZGIiBkPSJNNzc3LjIxOCw1NTguNzc1bDU0LjA2NC00Ni4yNzVsLTUzLjk2NC00Ni4xOQoJYy0xOS4yMS0xMTEuNjU0LTEwNy4yMzMtMTk5Ljc2NC0yMTguODQ2LTIxOS4wOTlMNTEyLjUsMTkzLjcxOGwtNDUuODg3LDUzLjM5M2MtMTEyLDE5LjEzOC0yMDAuMzY0LDEwNy41MDItMjE5LjUwMiwyMTkuNTAxCglMMTkzLjcxOCw1MTIuNWw1My40OTQsNDUuOTc0YzE5LjMzNSwxMTEuNjExLDEwNy40NDQsMTk5LjYzMywyMTkuMDk4LDIxOC44NDRsNDYuMTg5LDUzLjk2NWw0Ni4yNzYtNTQuMDY1CglDNjcwLjA0Myw3NTcuODEyLDc1Ny44MTIsNjcwLjA0Myw3NzcuMjE4LDU1OC43NzV6IE01MTIuMjQsNzAyLjI4M2MtMTA0Ljk1OSwwLTE5MC4wNDQtODUuMDg1LTE5MC4wNDQtMTkwLjA0NAoJYzAtMTA0Ljk1OCw4NS4wODUtMTkwLjA0NCwxOTAuMDQ0LTE5MC4wNDRzMTkwLjA0NCw4NS4wODYsMTkwLjA0NCwxOTAuMDQ0QzcwMi4yODQsNjE3LjE5OCw2MTcuMTk5LDcwMi4yODMsNTEyLjI0LDcwMi4yODN6Ii8+CjxyZWN0IHg9IjQ2Mi41IiB5PSI0NjIuNDk5IiBkaXNwbGF5PSJub25lIiBmaWxsPSJub25lIiBzdHJva2U9IiNFNkU2RTYiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgd2lkdGg9Ijk5LjQ4IiBoZWlnaHQ9Ijk5LjQ4Ii8+Cjxwb2x5Z29uIGRpc3BsYXk9Im5vbmUiIGZpbGw9IiNGMzVDNDMiIHBvaW50cz0iODMxLjI4MiwxOTQuMjQ1IDQ2Mi41LDQ2Mi40OTkgNTYxLjk4LDU2MS45NzkgIi8+Cjxwb2x5Z29uIGRpc3BsYXk9Im5vbmUiIGZpbGw9IiNGMUYwRUIiIHBvaW50cz0iMTkzLjcxOCw4MzAuNzYgNDYyLjUsNDYyLjQ5OSA1NjEuOTgsNTYxLjk3OSAiLz4KPHBhdGggZGlzcGxheT0ibm9uZSIgZmlsbD0iIzM1Mzg0MiIgZD0iTTgxNC41LDAuNWgtNjA0Qzk1LDAuNSwwLjUsOTUsMC41LDIxMC41djYwNGMwLDExNS41LDk0LjUsMjEwLDIxMCwyMTBoNjA0CgljMTE1LjUsMCwyMTAtOTQuNSwyMTAtMjEwdi02MDRDMTAyNC41LDk1LDkzMCwwLjUsODE0LjUsMC41eiBNNTEyLjI0LDk2Mi42OTVjLTI0OC43ODEsMC00NTAuNDU3LTIwMS42NzQtNDUwLjQ1Ny00NTAuNDU2CgljMC0yNDguNzgsMjAxLjY3Ni00NTAuNDU3LDQ1MC40NTctNDUwLjQ1N3M0NTAuNDU3LDIwMS42NzcsNDUwLjQ1Nyw0NTAuNDU3Qzk2Mi42OTcsNzYxLjAyMSw3NjEuMDIxLDk2Mi42OTUsNTEyLjI0LDk2Mi42OTV6Ii8+Cjxwb2x5Z29uIGRpc3BsYXk9Im5vbmUiIGZpbGw9IiMzNTM4NDIiIHBvaW50cz0iNTM2LjUxMSw1NDguNDQxIDg3MS4wMzcsMjcxLjYzMyA0ODguMjM0LDQ3Ni41NTQgNDg4LjIzNCw0NzYuNTU0IDQ4OC4yMzIsNDc2LjU1NiAKCTQ4OC4yMjksNDc2LjU1NyA0ODguMjI5LDQ3Ni41NTcgMTUzLjcwMyw3NTMuMzY1IDUzNi41MDYsNTQ4LjQ0NCA1MzYuNTA2LDU0OC40NDQgNTM2LjUwOSw1NDguNDQyIDUzNi41MTEsNTQ4LjQ0MSAiLz4KPHBhdGggZGlzcGxheT0ibm9uZSIgZmlsbD0iIzM1Mzg0MiIgZD0iTTgxNC41LDAuNWgtNjA0Qzk1LDAuNSwwLjUsOTUsMC41LDIxMC41djYwNGMwLDExNS41LDk0LjUsMjEwLDIxMCwyMTBoNjA0CgljMTE1LjUsMCwyMTAtOTQuNSwyMTAtMjEwdi02MDRDMTAyNC41LDk1LDkzMCwwLjUsODE0LjUsMC41eiBNODk0LjUxOSwyNjEuNTIyTDU2Ny43NjMsNTg4LjI3NQoJYy0zMC42MjMsMzAuNjI0LTgwLjQ1LDMwLjYyMi0xMTEuMDcyLDBMMTI5LjkzNCwyNjEuNTIySDg5NC41MTl6IE0xMjAuODMxLDI2MS41MjJoMC4wODlsLTAuMDg5LDAuMDg5VjI2MS41MjJ6IE0xMTcuODI5LDI3My44MDYKCWwyMzguNjAzLDIzOC42MDJMMTE3LjgyOSw3NTEuMDExVjI3My44MDZ6IE0xMjAuODMxLDc2My40Nzh2LTAuMjcxbDAuMjcxLDAuMjcxSDEyMC44MzF6IE0xMjkuNzUxLDc2My40NzhsMjM4Ljg3NS0yMzguODc0CglsNzguODczLDc4Ljg3M2MzNS42OSwzNS42ODgsOTMuNzY0LDM1LjY4OSwxMjkuNDU2LDBsNzguODcyLTc4Ljg3MmwyMzguODczLDIzOC44NzNIMTI5Ljc1MXogTTkwNi45MTIsNzYwLjQ3NWgtMC4wMThsMC4wMTgtMC4wMTgKCVY3NjAuNDc1eiBNOTA2LjkxMiw3NTEuM0w2NjguMDIxLDUxMi40MDlsMjM4Ljg5MS0yMzguODlWNzUxLjN6Ii8+CjxwYXRoIGZpbGw9IiMzNTM4NDIiIGQ9Ik04MTQuNSwwLjVoLTYwNEM5NSwwLjUsMC41LDk1LDAuNSwyMTAuNXY2MDRjMCwxMTUuNSw5NC41LDIxMCwyMTAsMjEwaDYwNGMxMTUuNSwwLDIxMC05NC41LDIxMC0yMTB2LTYwNAoJQzEwMjQuNSw5NSw5MzAsMC41LDgxNC41LDAuNXogTTg0My45MjIsMzUxLjg3Yy0wLjM3NywwLjE2OS0wLjczNCwwLjMyNC0xLjA5NiwwLjQ1OWMtMjEuNTA3LDguMjY0LDIzLjE1OSwxNTIuMTk2LTExMC44MzcsMzIyLjU3OQoJYzAsMC0xMDEuNTI4LDEzNy4yNzItMjkxLjE0OSwxNjMuNzY5Yy03Ny4xMiwxMC43NzYtMTkwLjIyNywxOS44NTctMzA0LjM2OC02Ni4xNjdjMCwwLDExNS43ODcsMTQuODgyLDIzMS41ODYtNzEuMTM2CgljMCwwLTExOS4xMDEtOS45MjQtMTQ3LjIyMi0xMDkuMThjMCwwLDU0LjU4OSwwLjAwNiw2Ni4xNjctMS42NWMwLDAtMTI3LjM3Ni00My4wMjEtMTI1LjcxNi0xNjQuNjA3CgljMCwwLDQzLjAwNSwxOS4wMjEsNjYuOTkyLDE2LjU0YzAsMC0xMDcuNTI2LTgwLjI0NS00My44MzctMjEyLjU2NGMwLDAsMTE1Ljc5OSwxNjIuMTA4LDMyOS4xOTEsMTY1LjQyCgljMCwwLTE4LjE5Mi0xNDAuNjAxLDEwNC4yMTgtMTgzLjYxNWMwLDAsMTA0LjIxNC00My4wMTIsMTczLjY5LDM4LjA0NGMwLDAsODEuMDYyLTEzLjIzMiw5OS4yNTUtMzguMDQ2CgljMCwwLTQuOTc0LDQ5LjgwNC02MS4yMDksODYuMTA3YzAsMCw1MS4yODQtMC4wODgsODcuNjctMTkuOTM5QzkxNy4yNTgsMjc3Ljg4Myw4NjYuMDcxLDM0MS44OTEsODQzLjkyMiwzNTEuODd6Ii8+CjxwYXRoIGRpc3BsYXk9Im5vbmUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzk5OTk5OSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMTAyNC41LDgxNC41YzAsMTE1LjUtOTQuNSwyMTAtMjEwLDIxMGgtNjA0CgljLTExNS41LDAtMjEwLTk0LjUtMjEwLTIxMHYtNjA0QzAuNSw5NSw5NSwwLjUsMjEwLjUsMC41aDYwNGMxMTUuNSwwLDIxMCw5NC41LDIxMCwyMTBWODE0LjV6Ii8+CjxsaW5lIGRpc3BsYXk9Im5vbmUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzk5OTk5OSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iNTEyLjUiIHkxPSIwLjUiIHgyPSI1MTIuNSIgeTI9IjEwMjQuNSIvPgo8bGluZSBkaXNwbGF5PSJub25lIiBmaWxsPSJub25lIiBzdHJva2U9IiM5OTk5OTkiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjMyMi4xODUiIHkxPSIwLjUiIHgyPSIzMjIuMTg1IiB5Mj0iMTAyNC41Ii8+CjxsaW5lIGRpc3BsYXk9Im5vbmUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzk5OTk5OSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iNzAyLjc5NyIgeTE9IjAuNSIgeDI9IjcwMi43OTciIHkyPSIxMDI0LjUiLz4KPGxpbmUgZGlzcGxheT0ibm9uZSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOTk5OTk5IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSI5NjIuNzk3IiB5MT0iMC41IiB4Mj0iOTYyLjc5NyIgeTI9IjEwMjQuNSIvPgo8bGluZSBkaXNwbGF5PSJub25lIiBmaWxsPSJub25lIiBzdHJva2U9IiM5OTk5OTkiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjYyLjE4NSIgeTE9IjAuNSIgeDI9IjYyLjE4NSIgeTI9IjEwMjQuNSIvPgo8bGluZSBkaXNwbGF5PSJub25lIiBmaWxsPSJub25lIiBzdHJva2U9IiM5OTk5OTkiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjAuMjQiIHkxPSI1MTIuNSIgeDI9IjEwMjQuMjQiIHkyPSI1MTIuNSIvPgo8bGluZSBkaXNwbGF5PSJub25lIiBmaWxsPSJub25lIiBzdHJva2U9IiM5OTk5OTkiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjAuMjQiIHkxPSIzMjIuMTk1IiB4Mj0iMTAyNC4yNCIgeTI9IjMyMi4xOTUiLz4KPGxpbmUgZGlzcGxheT0ibm9uZSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOTk5OTk5IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSIwLjI0IiB5MT0iNzAyLjgwOSIgeDI9IjEwMjQuMjQiIHkyPSI3MDIuODA5Ii8+CjxsaW5lIGRpc3BsYXk9Im5vbmUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzk5OTk5OSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iMC4yNCIgeTE9Ijk2Mi44MDkiIHgyPSIxMDI0LjI0IiB5Mj0iOTYyLjgwOSIvPgo8bGluZSBkaXNwbGF5PSJub25lIiBmaWxsPSJub25lIiBzdHJva2U9IiM5OTk5OTkiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjAuMjQiIHkxPSI2Mi4xOTUiIHgyPSIxMDI0LjI0IiB5Mj0iNjIuMTk1Ii8+CjxsaW5lIGRpc3BsYXk9Im5vbmUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzk5OTk5OSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iMC41IiB5MT0iMC41IiB4Mj0iMTAyNC41IiB5Mj0iMTAyNC40OTgiLz4KPGxpbmUgZGlzcGxheT0ibm9uZSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOTk5OTk5IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSIwLjUwMSIgeTE9IjEwMjQuNDk4IiB4Mj0iMTAyNC41IiB5Mj0iMC40OTgiLz4KPGNpcmNsZSBkaXNwbGF5PSJub25lIiBmaWxsPSJub25lIiBzdHJva2U9IiM5OTk5OTkiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgY3g9IjUxMi4yNCIgY3k9IjUxMi4yMzkiIHI9IjE5MC4wNDQiLz4KPGNpcmNsZSBkaXNwbGF5PSJub25lIiBmaWxsPSJub25lIiBzdHJva2U9IiM5OTk5OTkiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgY3g9IjUxMi4yNCIgY3k9IjUxMi4yMzkiIHI9IjI2OSIvPgo8Y2lyY2xlIGRpc3BsYXk9Im5vbmUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzk5OTk5OSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBjeD0iNTEyLjI0IiBjeT0iNTEyLjIzOSIgcj0iNDUwLjQ1NyIvPgo8L3N2Zz4K");}
/* MAIL ICON */
.mail {background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE1LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluICAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIiBbCgk8IUVOVElUWSBuc19mbG93cyAiaHR0cDovL25zLmFkb2JlLmNvbS9GbG93cy8xLjAvIj4KXT4KPHN2ZyB2ZXJzaW9uPSIxLjEiCgkgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6YT0iaHR0cDovL25zLmFkb2JlLmNvbS9BZG9iZVNWR1ZpZXdlckV4dGVuc2lvbnMvMy4wLyIKCSB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjEwMjRweCIgaGVpZ2h0PSIxMDI0cHgiIHZpZXdCb3g9IjAuMzcgMC40OTkgMTAyNCAxMDI0IgoJIG92ZXJmbG93PSJ2aXNpYmxlIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAuMzcgMC40OTkgMTAyNCAxMDI0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGRlZnM+CjwvZGVmcz4KPHBhdGggZGlzcGxheT0ibm9uZSIgZmlsbD0iIzQxQjdGMSIgZD0iTTEwMjQuNSw4MTQuNWMwLDExNS41LTk0LjUsMjEwLTIxMCwyMTBoLTYwNGMtMTE1LjUsMC0yMTAtOTQuNS0yMTAtMjEwdi02MDQKCUMwLjUsOTUsOTUsMC41LDIxMC41LDAuNWg2MDRjMTE1LjUsMCwyMTAsOTQuNSwyMTAsMjEwVjgxNC41eiIvPgo8cGF0aCBkaXNwbGF5PSJub25lIiBmaWxsPSIjRkZGRkZGIiBkPSJNNzc3LjIxOCw1NTguNzc1bDU0LjA2NC00Ni4yNzVsLTUzLjk2NC00Ni4xOQoJYy0xOS4yMS0xMTEuNjU0LTEwNy4yMzMtMTk5Ljc2NC0yMTguODQ2LTIxOS4wOTlMNTEyLjUsMTkzLjcxOGwtNDUuODg3LDUzLjM5M2MtMTEyLDE5LjEzOC0yMDAuMzY0LDEwNy41MDItMjE5LjUwMiwyMTkuNTAxCglMMTkzLjcxOCw1MTIuNWw1My40OTQsNDUuOTc0YzE5LjMzNSwxMTEuNjExLDEwNy40NDQsMTk5LjYzMywyMTkuMDk4LDIxOC44NDRsNDYuMTg5LDUzLjk2NWw0Ni4yNzYtNTQuMDY1CglDNjcwLjA0Myw3NTcuODEyLDc1Ny44MTIsNjcwLjA0Myw3NzcuMjE4LDU1OC43NzV6IE01MTIuMjQsNzAyLjI4M2MtMTA0Ljk1OSwwLTE5MC4wNDQtODUuMDg1LTE5MC4wNDQtMTkwLjA0NAoJYzAtMTA0Ljk1OCw4NS4wODUtMTkwLjA0NCwxOTAuMDQ0LTE5MC4wNDRzMTkwLjA0NCw4NS4wODYsMTkwLjA0NCwxOTAuMDQ0QzcwMi4yODQsNjE3LjE5OCw2MTcuMTk5LDcwMi4yODMsNTEyLjI0LDcwMi4yODN6Ii8+CjxyZWN0IHg9IjQ2Mi41IiB5PSI0NjIuNDk5IiBkaXNwbGF5PSJub25lIiBmaWxsPSJub25lIiBzdHJva2U9IiNFNkU2RTYiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgd2lkdGg9Ijk5LjQ4IiBoZWlnaHQ9Ijk5LjQ4Ii8+Cjxwb2x5Z29uIGRpc3BsYXk9Im5vbmUiIGZpbGw9IiNGMzVDNDMiIHBvaW50cz0iODMxLjI4MiwxOTQuMjQ1IDQ2Mi41LDQ2Mi40OTkgNTYxLjk4LDU2MS45NzkgIi8+Cjxwb2x5Z29uIGRpc3BsYXk9Im5vbmUiIGZpbGw9IiNGMUYwRUIiIHBvaW50cz0iMTkzLjcxOCw4MzAuNzYgNDYyLjUsNDYyLjQ5OSA1NjEuOTgsNTYxLjk3OSAiLz4KPHBhdGggZGlzcGxheT0ibm9uZSIgZmlsbD0iIzM1Mzg0MiIgZD0iTTgxNC41LDAuNWgtNjA0Qzk1LDAuNSwwLjUsOTUsMC41LDIxMC41djYwNGMwLDExNS41LDk0LjUsMjEwLDIxMCwyMTBoNjA0CgljMTE1LjUsMCwyMTAtOTQuNSwyMTAtMjEwdi02MDRDMTAyNC41LDk1LDkzMCwwLjUsODE0LjUsMC41eiBNNTEyLjI0LDk2Mi42OTVjLTI0OC43ODEsMC00NTAuNDU3LTIwMS42NzQtNDUwLjQ1Ny00NTAuNDU2CgljMC0yNDguNzgsMjAxLjY3Ni00NTAuNDU3LDQ1MC40NTctNDUwLjQ1N3M0NTAuNDU3LDIwMS42NzcsNDUwLjQ1Nyw0NTAuNDU3Qzk2Mi42OTcsNzYxLjAyMSw3NjEuMDIxLDk2Mi42OTUsNTEyLjI0LDk2Mi42OTV6Ii8+Cjxwb2x5Z29uIGRpc3BsYXk9Im5vbmUiIGZpbGw9IiMzNTM4NDIiIHBvaW50cz0iNTM2LjUxMSw1NDguNDQxIDg3MS4wMzcsMjcxLjYzMyA0ODguMjM0LDQ3Ni41NTQgNDg4LjIzNCw0NzYuNTU0IDQ4OC4yMzIsNDc2LjU1NiAKCTQ4OC4yMjksNDc2LjU1NyA0ODguMjI5LDQ3Ni41NTcgMTUzLjcwMyw3NTMuMzY1IDUzNi41MDYsNTQ4LjQ0NCA1MzYuNTA2LDU0OC40NDQgNTM2LjUwOSw1NDguNDQyIDUzNi41MTEsNTQ4LjQ0MSAiLz4KPHBhdGggZmlsbD0iIzM1Mzg0MiIgZD0iTTgxNC41LDAuNWgtNjA0Qzk1LDAuNSwwLjUsOTUsMC41LDIxMC41djYwNGMwLDExNS41LDk0LjUsMjEwLDIxMCwyMTBoNjA0YzExNS41LDAsMjEwLTk0LjUsMjEwLTIxMHYtNjA0CglDMTAyNC41LDk1LDkzMCwwLjUsODE0LjUsMC41eiBNODk0LjUxOSwyNjEuNTIyTDU2Ny43NjMsNTg4LjI3NWMtMzAuNjIzLDMwLjYyNC04MC40NSwzMC42MjItMTExLjA3MiwwTDEyOS45MzQsMjYxLjUyMkg4OTQuNTE5egoJIE0xMjAuODMxLDI2MS41MjJoMC4wODlsLTAuMDg5LDAuMDg5VjI2MS41MjJ6IE0xMTcuODI5LDI3My44MDZsMjM4LjYwMywyMzguNjAyTDExNy44MjksNzUxLjAxMVYyNzMuODA2eiBNMTIwLjgzMSw3NjMuNDc4di0wLjI3MQoJbDAuMjcxLDAuMjcxSDEyMC44MzF6IE0xMjkuNzUxLDc2My40NzhsMjM4Ljg3NS0yMzguODc0bDc4Ljg3Myw3OC44NzNjMzUuNjksMzUuNjg4LDkzLjc2NCwzNS42ODksMTI5LjQ1NiwwbDc4Ljg3Mi03OC44NzIKCWwyMzguODczLDIzOC44NzNIMTI5Ljc1MXogTTkwNi45MTIsNzYwLjQ3NWgtMC4wMThsMC4wMTgtMC4wMThWNzYwLjQ3NXogTTkwNi45MTIsNzUxLjNMNjY4LjAyMSw1MTIuNDA5bDIzOC44OTEtMjM4Ljg5Vjc1MS4zeiIvPgo8cGF0aCBkaXNwbGF5PSJub25lIiBmaWxsPSIjMzUzODQyIiBkPSJNODE0LjUsMC41aC02MDRDOTUsMC41LDAuNSw5NSwwLjUsMjEwLjV2NjA0YzAsMTE1LjUsOTQuNSwyMTAsMjEwLDIxMGg2MDQKCWMxMTUuNSwwLDIxMC05NC41LDIxMC0yMTB2LTYwNEMxMDI0LjUsOTUsOTMwLDAuNSw4MTQuNSwwLjV6IE04NDMuOTIyLDM1MS44N2MtMC4zNzcsMC4xNjktMC43MzQsMC4zMjQtMS4wOTYsMC40NTkKCWMtMjEuNTA3LDguMjY0LDIzLjE1OSwxNTIuMTk2LTExMC44MzcsMzIyLjU3OWMwLDAtMTAxLjUyOCwxMzcuMjcyLTI5MS4xNDksMTYzLjc2OWMtNzcuMTIsMTAuNzc2LTE5MC4yMjcsMTkuODU3LTMwNC4zNjgtNjYuMTY3CgljMCwwLDExNS43ODcsMTQuODgyLDIzMS41ODYtNzEuMTM2YzAsMC0xMTkuMTAxLTkuOTI0LTE0Ny4yMjItMTA5LjE4YzAsMCw1NC41ODksMC4wMDYsNjYuMTY3LTEuNjUKCWMwLDAtMTI3LjM3Ni00My4wMjEtMTI1LjcxNi0xNjQuNjA3YzAsMCw0My4wMDUsMTkuMDIxLDY2Ljk5MiwxNi41NGMwLDAtMTA3LjUyNi04MC4yNDUtNDMuODM3LTIxMi41NjQKCWMwLDAsMTE1Ljc5OSwxNjIuMTA4LDMyOS4xOTEsMTY1LjQyYzAsMC0xOC4xOTItMTQwLjYwMSwxMDQuMjE4LTE4My42MTVjMCwwLDEwNC4yMTQtNDMuMDEyLDE3My42OSwzOC4wNDQKCWMwLDAsODEuMDYyLTEzLjIzMiw5OS4yNTUtMzguMDQ2YzAsMC00Ljk3NCw0OS44MDQtNjEuMjA5LDg2LjEwN2MwLDAsNTEuMjg0LTAuMDg4LDg3LjY3LTE5LjkzOQoJQzkxNy4yNTgsMjc3Ljg4Myw4NjYuMDcxLDM0MS44OTEsODQzLjkyMiwzNTEuODd6Ii8+CjxwYXRoIGRpc3BsYXk9Im5vbmUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzk5OTk5OSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMTAyNC41LDgxNC41YzAsMTE1LjUtOTQuNSwyMTAtMjEwLDIxMGgtNjA0CgljLTExNS41LDAtMjEwLTk0LjUtMjEwLTIxMHYtNjA0QzAuNSw5NSw5NSwwLjUsMjEwLjUsMC41aDYwNGMxMTUuNSwwLDIxMCw5NC41LDIxMCwyMTBWODE0LjV6Ii8+CjxsaW5lIGRpc3BsYXk9Im5vbmUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzk5OTk5OSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iNTEyLjUiIHkxPSIwLjUiIHgyPSI1MTIuNSIgeTI9IjEwMjQuNSIvPgo8bGluZSBkaXNwbGF5PSJub25lIiBmaWxsPSJub25lIiBzdHJva2U9IiM5OTk5OTkiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjMyMi4xODUiIHkxPSIwLjUiIHgyPSIzMjIuMTg1IiB5Mj0iMTAyNC41Ii8+CjxsaW5lIGRpc3BsYXk9Im5vbmUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzk5OTk5OSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iNzAyLjc5NyIgeTE9IjAuNSIgeDI9IjcwMi43OTciIHkyPSIxMDI0LjUiLz4KPGxpbmUgZGlzcGxheT0ibm9uZSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOTk5OTk5IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSI5NjIuNzk3IiB5MT0iMC41IiB4Mj0iOTYyLjc5NyIgeTI9IjEwMjQuNSIvPgo8bGluZSBkaXNwbGF5PSJub25lIiBmaWxsPSJub25lIiBzdHJva2U9IiM5OTk5OTkiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjYyLjE4NSIgeTE9IjAuNSIgeDI9IjYyLjE4NSIgeTI9IjEwMjQuNSIvPgo8bGluZSBkaXNwbGF5PSJub25lIiBmaWxsPSJub25lIiBzdHJva2U9IiM5OTk5OTkiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjAuMjQiIHkxPSI1MTIuNSIgeDI9IjEwMjQuMjQiIHkyPSI1MTIuNSIvPgo8bGluZSBkaXNwbGF5PSJub25lIiBmaWxsPSJub25lIiBzdHJva2U9IiM5OTk5OTkiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjAuMjQiIHkxPSIzMjIuMTk1IiB4Mj0iMTAyNC4yNCIgeTI9IjMyMi4xOTUiLz4KPGxpbmUgZGlzcGxheT0ibm9uZSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOTk5OTk5IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSIwLjI0IiB5MT0iNzAyLjgwOSIgeDI9IjEwMjQuMjQiIHkyPSI3MDIuODA5Ii8+CjxsaW5lIGRpc3BsYXk9Im5vbmUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzk5OTk5OSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iMC4yNCIgeTE9Ijk2Mi44MDkiIHgyPSIxMDI0LjI0IiB5Mj0iOTYyLjgwOSIvPgo8bGluZSBkaXNwbGF5PSJub25lIiBmaWxsPSJub25lIiBzdHJva2U9IiM5OTk5OTkiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjAuMjQiIHkxPSI2Mi4xOTUiIHgyPSIxMDI0LjI0IiB5Mj0iNjIuMTk1Ii8+CjxsaW5lIGRpc3BsYXk9Im5vbmUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzk5OTk5OSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iMC41IiB5MT0iMC41IiB4Mj0iMTAyNC41IiB5Mj0iMTAyNC40OTgiLz4KPGxpbmUgZGlzcGxheT0ibm9uZSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOTk5OTk5IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSIwLjUwMSIgeTE9IjEwMjQuNDk4IiB4Mj0iMTAyNC41IiB5Mj0iMC40OTgiLz4KPGNpcmNsZSBkaXNwbGF5PSJub25lIiBmaWxsPSJub25lIiBzdHJva2U9IiM5OTk5OTkiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgY3g9IjUxMi4yNCIgY3k9IjUxMi4yMzkiIHI9IjE5MC4wNDQiLz4KPGNpcmNsZSBkaXNwbGF5PSJub25lIiBmaWxsPSJub25lIiBzdHJva2U9IiM5OTk5OTkiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgY3g9IjUxMi4yNCIgY3k9IjUxMi4yMzkiIHI9IjI2OSIvPgo8Y2lyY2xlIGRpc3BsYXk9Im5vbmUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzk5OTk5OSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBjeD0iNTEyLjI0IiBjeT0iNTEyLjIzOSIgcj0iNDUwLjQ1NyIvPgo8L3N2Zz4K");}
/* SAFARI ICON */
input[id="layout"] + label {
background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE1LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluICAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIiBbCgk8IUVOVElUWSBuc19mbG93cyAiaHR0cDovL25zLmFkb2JlLmNvbS9GbG93cy8xLjAvIj4KXT4KPHN2ZyB2ZXJzaW9uPSIxLjEiCgkgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6YT0iaHR0cDovL25zLmFkb2JlLmNvbS9BZG9iZVNWR1ZpZXdlckV4dGVuc2lvbnMvMy4wLyIKCSB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjEwMjRweCIgaGVpZ2h0PSIxMDI0cHgiIHZpZXdCb3g9IjAuMzcgMC40OTkgMTAyNCAxMDI0IgoJIG92ZXJmbG93PSJ2aXNpYmxlIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAuMzcgMC40OTkgMTAyNCAxMDI0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGRlZnM+CjwvZGVmcz4KPHBhdGggZGlzcGxheT0ibm9uZSIgZmlsbD0iIzQxQjdGMSIgZD0iTTEwMjQuNSw4MTQuNWMwLDExNS41LTk0LjUsMjEwLTIxMCwyMTBoLTYwNGMtMTE1LjUsMC0yMTAtOTQuNS0yMTAtMjEwdi02MDQKCUMwLjUsOTUsOTUsMC41LDIxMC41LDAuNWg2MDRjMTE1LjUsMCwyMTAsOTQuNSwyMTAsMjEwVjgxNC41eiIvPgo8cGF0aCBkaXNwbGF5PSJub25lIiBmaWxsPSIjRkZGRkZGIiBkPSJNNzc3LjIxOCw1NTguNzc1bDU0LjA2NC00Ni4yNzVsLTUzLjk2NC00Ni4xOQoJYy0xOS4yMS0xMTEuNjU0LTEwNy4yMzMtMTk5Ljc2NC0yMTguODQ2LTIxOS4wOTlMNTEyLjUsMTkzLjcxOGwtNDUuODg3LDUzLjM5M2MtMTEyLDE5LjEzOC0yMDAuMzY0LDEwNy41MDItMjE5LjUwMiwyMTkuNTAxCglMMTkzLjcxOCw1MTIuNWw1My40OTQsNDUuOTc0YzE5LjMzNSwxMTEuNjExLDEwNy40NDQsMTk5LjYzMywyMTkuMDk4LDIxOC44NDRsNDYuMTg5LDUzLjk2NWw0Ni4yNzYtNTQuMDY1CglDNjcwLjA0Myw3NTcuODEyLDc1Ny44MTIsNjcwLjA0Myw3NzcuMjE4LDU1OC43NzV6IE01MTIuMjQsNzAyLjI4M2MtMTA0Ljk1OSwwLTE5MC4wNDQtODUuMDg1LTE5MC4wNDQtMTkwLjA0NAoJYzAtMTA0Ljk1OCw4NS4wODUtMTkwLjA0NCwxOTAuMDQ0LTE5MC4wNDRzMTkwLjA0NCw4NS4wODYsMTkwLjA0NCwxOTAuMDQ0QzcwMi4yODQsNjE3LjE5OCw2MTcuMTk5LDcwMi4yODMsNTEyLjI0LDcwMi4yODN6Ii8+CjxyZWN0IHg9IjQ2Mi41IiB5PSI0NjIuNDk5IiBkaXNwbGF5PSJub25lIiBmaWxsPSJub25lIiBzdHJva2U9IiNFNkU2RTYiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgd2lkdGg9Ijk5LjQ4IiBoZWlnaHQ9Ijk5LjQ4Ii8+Cjxwb2x5Z29uIGRpc3BsYXk9Im5vbmUiIGZpbGw9IiNGMzVDNDMiIHBvaW50cz0iODMxLjI4MiwxOTQuMjQ1IDQ2Mi41LDQ2Mi40OTkgNTYxLjk4LDU2MS45NzkgIi8+Cjxwb2x5Z29uIGRpc3BsYXk9Im5vbmUiIGZpbGw9IiNGMUYwRUIiIHBvaW50cz0iMTkzLjcxOCw4MzAuNzYgNDYyLjUsNDYyLjQ5OSA1NjEuOTgsNTYxLjk3OSAiLz4KPHBhdGggZGlzcGxheT0ibm9uZSIgZmlsbD0iIzM1Mzg0MiIgZD0iTTgxNC41LDAuNWgtNjA0Qzk1LDAuNSwwLjUsOTUsMC41LDIxMC41djYwNGMwLDExNS41LDk0LjUsMjEwLDIxMCwyMTBoNjA0CgljMTE1LjUsMCwyMTAtOTQuNSwyMTAtMjEwdi02MDRDMTAyNC41LDk1LDkzMCwwLjUsODE0LjUsMC41eiBNNTEyLjI0LDk2Mi42OTVjLTI0OC43ODEsMC00NTAuNDU3LTIwMS42NzQtNDUwLjQ1Ny00NTAuNDU2CgljMC0yNDguNzgsMjAxLjY3Ni00NTAuNDU3LDQ1MC40NTctNDUwLjQ1N3M0NTAuNDU3LDIwMS42NzcsNDUwLjQ1Nyw0NTAuNDU3Qzk2Mi42OTcsNzYxLjAyMSw3NjEuMDIxLDk2Mi42OTUsNTEyLjI0LDk2Mi42OTV6Ii8+CjxnIGRpc3BsYXk9Im5vbmUiPgoJCgkJPGNpcmNsZSBkaXNwbGF5PSJpbmxpbmUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzM1Mzg0MiIgc3Ryb2tlLXdpZHRoPSI1My43NzU3IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9IjExLjY3NzcsNDguNjU3IiBjeD0iNTEyLjI0IiBjeT0iNTEyLjIzOSIgcj0iMzkzLjY4OSIvPgo8L2c+Cjxwb2x5Z29uIGRpc3BsYXk9Im5vbmUiIGZpbGw9IiMzNTM4NDIiIHBvaW50cz0iNTQ3LjY3Niw1NTguMjM0IDc5Ni41NCwyOTMuMTQ1IDQ3Ny4wNjgsNDY2Ljc2MiA0NzcuMDY4LDQ2Ni43NjIgNDc3LjA2Niw0NjYuNzY0IAoJNDc3LjA2Myw0NjYuNzY1IDQ3Ny4wNjQsNDY2Ljc2NSAyMjguMiw3MzEuODU0IDU0Ny42NzMsNTU4LjIzNiA1NDcuNjczLDU1OC4yMzYgNTQ3LjY3NCw1NTguMjM1IDU0Ny42NzYsNTU4LjIzNCAiLz4KPHBhdGggZmlsbD0iIzM1Mzg0MiIgZD0iTTgxNC41LDAuNWgtNjA0Qzk1LDAuNSwwLjUsOTUsMC41LDIxMC41djYwNGMwLDExNS41LDk0LjUsMjEwLDIxMCwyMTBoNjA0YzExNS41LDAsMjEwLTk0LjUsMjEwLTIxMHYtNjA0CglDMTAyNC41LDk1LDkzMCwwLjUsODE0LjUsMC41eiIvPgo8Y2lyY2xlIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIxMi40MDc1IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGN4PSI1MTIuMjQiIGN5PSI1MTIuMjM5IiByPSI0MjkuOTI3Ii8+CjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik01MTIuMzEyLDkwMS45MDloLTAuMDcyYy00LjU1MywwLTkuMTYzLTAuMDc5LTEzLjY5OS0wLjIzNkw1MDEsODMwLjc3MWMzLjcyMSwwLjEzLDcuNTAyLDAuMTk1LDExLjI0LDAuMTk1CglsMC43MjEtMC4wMDF2NzAuOTQzTDUxMi4zMTIsOTAxLjkwOXogTTYyMC4yNiw4ODYuNzMzbC0xOS42MzctNjguMTcyYzMuNTc5LTEuMDMxLDcuMTg3LTIuMTQsMTAuNzIyLTMuMjk1bDIyLjAzOSw2Ny40MzQKCUM2MjkuMDU2LDg4NC4xMTUsNjI0LjY0LDg4NS40NzIsNjIwLjI2LDg4Ni43MzN6IE0zOTEuODU0LDg4Mi45NDhjLTQuMzQxLTEuNDA5LTguNzIxLTIuOTE4LTEzLjAxOC00LjQ4M2wyNC4yODMtNjYuNjU4CgljMy41MTMsMS4yNzksNy4wOTIsMi41MTIsMTAuNjM5LDMuNjYzTDM5MS44NTQsODgyLjk0OHogTTczMC42NTEsODM0Ljk5bC0zOS44MTYtNTguNzE3YzMuMDg4LTIuMDk0LDYuMTc0LTQuMjY3LDkuMTczLTYuNDU3CglsNDEuODQ4LDU3LjI4N0M3MzguMTkxLDgyOS43OCw3MzQuNDIyLDgzMi40MzQsNzMwLjY1MSw4MzQuOTl6IE0yODMuMjAyLDgyNy41MjRjLTMuNjkzLTIuNjg4LTcuMzgyLTUuNDcyLTEwLjk2Mi04LjI3NQoJbDQzLjczOS01NS44NTdjMi45MjYsMi4yOTIsNS45NDEsNC41NjgsOC45NjIsNi43NjZMMjgzLjIwMiw4MjcuNTI0eiBNODE5LjYyMiw3NTEuNzY2bC01NS45MzQtNDMuNjQxCgljMi4yOTQtMi45NCw0LjU2Ny01Ljk2Miw2Ljc1Ny04Ljk4bDU3LjQzLDQxLjY1MkM4MjUuMiw3NDQuNDg0LDgyMi40MjQsNzQ4LjE3NSw4MTkuNjIyLDc1MS43NjZ6IE04NzguNjY4LDY0NS4wOTJsLTY2LjY5MS0yNC4xOTMKCWMxLjI3LTMuNDk5LDIuNDk1LTcuMDc2LDMuNjQzLTEwLjYzM2w2Ny41MTYsMjEuNzg3Qzg4MS43MjksNjM2LjQxMiw4ODAuMjI2LDY0MC44LDg3OC42NjgsNjQ1LjA5MnogTTE0MS41OTIsNjMyLjgxNQoJYy0xLjQwNi00LjMyNi0yLjc1Ni04Ljc0My00LjAxMS0xMy4xMjZsNjguMjAyLTE5LjUzM2MxLjAyNiwzLjU4NCwyLjEyOSw3LjE5MywzLjI3OSwxMC43MjlMMTQxLjU5Miw2MzIuODE1eiBNOTAxLjY5NCw1MjUuMzQKCWwtNzAuOTA1LTIuMzQyYzAuMTE4LTMuNTc0LDAuMTc5LTcuMTkzLDAuMTc5LTEwLjc1OXYtMC41NDFoNzAuOTQzdjAuNTQxQzkwMS45MTEsNTE2LjU4Miw5MDEuODM5LDUyMC45ODksOTAxLjY5NCw1MjUuMzR6CgkgTTEyMi41Nyw1MTIuNTI4bC0wLjAwMS0wLjI4OWMwLTQuNDgxLDAuMDc4LTkuMDIzLDAuMjMtMTMuNDk5bDcwLjkwMiwyLjQxOWMtMC4xMjUsMy42NzMtMC4xODgsNy40MDEtMC4xODgsMTEuMDhsMCwwLjE4aC0zNS40NzIKCWwtMzUuNDcyLTAuMDI4bDAsMC4wMjhoMEwxMjIuNTcsNTEyLjUyOHogTTgxOC42MDUsNDI0LjAwNWMtMS4wMjUtMy41Ny0yLjEzMi03LjE3NS0zLjI4Ny0xMC43MTZsNjcuNDQ1LTIyLjAwNgoJYzEuNDE1LDQuMzM4LDIuNzcxLDguNzU2LDQuMDI3LDEzLjEzMUw4MTguNjA1LDQyNC4wMDV6IE0yMDguOTYsNDEzLjkwOGwtNjcuNDkxLTIxLjg2NGMxLjQxLTQuMzUsMi45MTYtOC43MzMsNC40NzgtMTMuMDI2CglsNjYuNjY5LDI0LjI1NkMyMTEuMzQsNDA2Ljc3OCwyMTAuMTEsNDEwLjM1NiwyMDguOTYsNDEzLjkwOHogTTI1NC4yMjYsMzI1LjA3MWwtNTcuMzg4LTQxLjcwOQoJYzIuNjc5LTMuNjg3LDUuNDYtNy4zNzUsOC4yNjYtMTAuOTYyTDI2MC45OSwzMTYuMUMyNTguNjk1LDMxOS4wMzYsMjU2LjQxOSwzMjIuMDU0LDI1NC4yMjYsMzI1LjA3MXogTTcwOC4yNTEsMjYwLjg4OQoJYy0yLjkzLTIuMjg5LTUuOTUtNC41NjMtOC45NzctNi43NjFsNDEuNjg2LTU3LjQwNWMzLjY5NCwyLjY4Myw3LjM4Myw1LjQ2MSwxMC45NjMsOC4yNTdMNzA4LjI1MSwyNjAuODg5eiBNMzI0LjczMiwyNTQuNDcyCglsLTQxLjc4NS01Ny4zMzNjMy42NzUtMi42NzksNy40NDgtNS4zMjksMTEuMjE0LTcuODc1bDM5Ljc0OCw1OC43NjRDMzMwLjgyOCwyNTAuMTExLDMyNy43NDEsMjUyLjI4LDMyNC43MzIsMjU0LjQ3MnoKCSBNNjIxLjA2MSwyMTIuNTYxYy0zLjUxOS0xLjI3Ny03LjEtMi41MDYtMTAuNjQ1LTMuNjUybDIxLjgzLTY3LjUwMmM0LjMzOSwxLjQwMyw4LjcyMSwyLjkwNywxMy4wMjMsNC40NjlMNjIxLjA2MSwyMTIuNTYxegoJIE00MTMuNDQ1LDIwOS4xMDlsLTIxLjk3NC02Ny40NTZjNC4zNC0xLjQxNCw4Ljc1OS0yLjc2NywxMy4xMzUtNC4wMjFsMTkuNTU2LDY4LjE5NQoJQzQyMC41OTMsMjA2Ljg1Miw0MTYuOTg3LDIwNy45NTYsNDEzLjQ0NSwyMDkuMTA5eiBNNTIzLjE1NiwxOTMuNjk1Yy0zLjYwOS0wLjEyMi03LjI4Mi0wLjE4My0xMC45MTYtMC4xODNoLTAuMzZ2LTcwLjk0NGgwLjM2CgljNC40MjYsMCw4LjkwMSwwLjA3NSwxMy4zMDMsMC4yMjNMNTIzLjE1NiwxOTMuNjk1eiIvPgo8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjU1NC45LDU3Mi42NyA0NjkuNzg5LDQ1Mi4zNjQgODM0LjU2NiwyODQuNTU1ICIvPgo8Zz4KCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik00NjguMDk3LDQ3NC44MDdsNjUuMDc4LDkxLjk4N0wyNTQuMjYxLDY5NS4xMDFMNDY4LjA5Nyw0NzQuODA3IE00NjkuODQxLDQ1Mi4zMjdMMTkwLjE3Miw3NDAuNDQKCQlsMzY0Ljc4MS0xNjcuODA3TDQ2OS44NDEsNDUyLjMyN0w0NjkuODQxLDQ1Mi4zMjd6Ii8+CjwvZz4KPHBhdGggZGlzcGxheT0ibm9uZSIgZmlsbD0iIzM1Mzg0MiIgZD0iTTgxNC41LDAuNWgtNjA0Qzk1LDAuNSwwLjUsOTUsMC41LDIxMC41djYwNGMwLDExNS41LDk0LjUsMjEwLDIxMCwyMTBoNjA0CgljMTE1LjUsMCwyMTAtOTQuNSwyMTAtMjEwdi02MDRDMTAyNC41LDk1LDkzMCwwLjUsODE0LjUsMC41eiBNODk0LjUxOSwyNjEuNTIyTDU2Ny43NjMsNTg4LjI3NQoJYy0zMC42MjMsMzAuNjI0LTgwLjQ1LDMwLjYyMi0xMTEuMDcyLDBMMTI5LjkzNCwyNjEuNTIySDg5NC41MTl6IE0xMjAuODMxLDI2MS41MjJoMC4wODlsLTAuMDg5LDAuMDg5VjI2MS41MjJ6IE0xMTcuODI5LDI3My44MDYKCWwyMzguNjAzLDIzOC42MDJMMTE3LjgyOSw3NTEuMDExVjI3My44MDZ6IE0xMjAuODMxLDc2My40Nzh2LTAuMjcxbDAuMjcxLDAuMjcxSDEyMC44MzF6IE0xMjkuNzUxLDc2My40NzhsMjM4Ljg3NS0yMzguODc0CglsNzguODczLDc4Ljg3M2MzNS42OSwzNS42ODgsOTMuNzY0LDM1LjY4OSwxMjkuNDU2LDBsNzguODcyLTc4Ljg3MmwyMzguODczLDIzOC44NzNIMTI5Ljc1MXogTTkwNi45MTIsNzYwLjQ3NWgtMC4wMThsMC4wMTgtMC4wMTgKCVY3NjAuNDc1eiBNOTA2LjkxMiw3NTEuM0w2NjguMDIxLDUxMi40MDlsMjM4Ljg5MS0yMzguODlWNzUxLjN6Ii8+CjxwYXRoIGRpc3BsYXk9Im5vbmUiIGZpbGw9IiMzNTM4NDIiIGQ9Ik04MTQuNSwwLjVoLTYwNEM5NSwwLjUsMC41LDk1LDAuNSwyMTAuNXY2MDRjMCwxMTUuNSw5NC41LDIxMCwyMTAsMjEwaDYwNAoJYzExNS41LDAsMjEwLTk0LjUsMjEwLTIxMHYtNjA0QzEwMjQuNSw5NSw5MzAsMC41LDgxNC41LDAuNXogTTg0My45MjIsMzUxLjg3Yy0wLjM3NywwLjE2OS0wLjczNCwwLjMyNC0xLjA5NiwwLjQ1OQoJYy0yMS41MDcsOC4yNjQsMjMuMTU5LDE1Mi4xOTYtMTEwLjgzNywzMjIuNTc5YzAsMC0xMDEuNTI4LDEzNy4yNzItMjkxLjE0OSwxNjMuNzY5Yy03Ny4xMiwxMC43NzYtMTkwLjIyNywxOS44NTctMzA0LjM2OC02Ni4xNjcKCWMwLDAsMTE1Ljc4NywxNC44ODIsMjMxLjU4Ni03MS4xMzZjMCwwLTExOS4xMDEtOS45MjQtMTQ3LjIyMi0xMDkuMThjMCwwLDU0LjU4OSwwLjAwNiw2Ni4xNjctMS42NQoJYzAsMC0xMjcuMzc2LTQzLjAyMS0xMjUuNzE2LTE2NC42MDdjMCwwLDQzLjAwNSwxOS4wMjEsNjYuOTkyLDE2LjU0YzAsMC0xMDcuNTI2LTgwLjI0NS00My44MzctMjEyLjU2NAoJYzAsMCwxMTUuNzk5LDE2Mi4xMDgsMzI5LjE5MSwxNjUuNDJjMCwwLTE4LjE5Mi0xNDAuNjAxLDEwNC4yMTgtMTgzLjYxNWMwLDAsMTA0LjIxNC00My4wMTIsMTczLjY5LDM4LjA0NAoJYzAsMCw4MS4wNjItMTMuMjMyLDk5LjI1NS0zOC4wNDZjMCwwLTQuOTc0LDQ5LjgwNC02MS4yMDksODYuMTA3YzAsMCw1MS4yODQtMC4wODgsODcuNjctMTkuOTM5CglDOTE3LjI1OCwyNzcuODgzLDg2Ni4wNzEsMzQxLjg5MSw4NDMuOTIyLDM1MS44N3oiLz4KPHBhdGggZGlzcGxheT0ibm9uZSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOTk5OTk5IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik0xMDI0LjUsODE0LjVjMCwxMTUuNS05NC41LDIxMC0yMTAsMjEwaC02MDQKCWMtMTE1LjUsMC0yMTAtOTQuNS0yMTAtMjEwdi02MDRDMC41LDk1LDk1LDAuNSwyMTAuNSwwLjVoNjA0YzExNS41LDAsMjEwLDk0LjUsMjEwLDIxMFY4MTQuNXoiLz4KPGxpbmUgZGlzcGxheT0ibm9uZSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOTk5OTk5IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSI1MTIuNSIgeTE9IjAuNSIgeDI9IjUxMi41IiB5Mj0iMTAyNC41Ii8+CjxsaW5lIGRpc3BsYXk9Im5vbmUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzk5OTk5OSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iMzIyLjE4NSIgeTE9IjAuNSIgeDI9IjMyMi4xODUiIHkyPSIxMDI0LjUiLz4KPGxpbmUgZGlzcGxheT0ibm9uZSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOTk5OTk5IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSI3MDIuNzk3IiB5MT0iMC41IiB4Mj0iNzAyLjc5NyIgeTI9IjEwMjQuNSIvPgo8bGluZSBkaXNwbGF5PSJub25lIiBmaWxsPSJub25lIiBzdHJva2U9IiM5OTk5OTkiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9Ijk2Mi43OTciIHkxPSIwLjUiIHgyPSI5NjIuNzk3IiB5Mj0iMTAyNC41Ii8+CjxsaW5lIGRpc3BsYXk9Im5vbmUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzk5OTk5OSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iNjIuMTg1IiB5MT0iMC41IiB4Mj0iNjIuMTg1IiB5Mj0iMTAyNC41Ii8+CjxsaW5lIGRpc3BsYXk9Im5vbmUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzk5OTk5OSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iMC4yNCIgeTE9IjUxMi41IiB4Mj0iMTAyNC4yNCIgeTI9IjUxMi41Ii8+CjxsaW5lIGRpc3BsYXk9Im5vbmUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzk5OTk5OSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iMC4yNCIgeTE9IjMyMi4xOTUiIHgyPSIxMDI0LjI0IiB5Mj0iMzIyLjE5NSIvPgo8bGluZSBkaXNwbGF5PSJub25lIiBmaWxsPSJub25lIiBzdHJva2U9IiM5OTk5OTkiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjAuMjQiIHkxPSI3MDIuODA5IiB4Mj0iMTAyNC4yNCIgeTI9IjcwMi44MDkiLz4KPGxpbmUgZGlzcGxheT0ibm9uZSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOTk5OTk5IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSIwLjI0IiB5MT0iOTYyLjgwOSIgeDI9IjEwMjQuMjQiIHkyPSI5NjIuODA5Ii8+CjxsaW5lIGRpc3BsYXk9Im5vbmUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzk5OTk5OSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iMC4yNCIgeTE9IjYyLjE5NSIgeDI9IjEwMjQuMjQiIHkyPSI2Mi4xOTUiLz4KPGxpbmUgZGlzcGxheT0ibm9uZSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOTk5OTk5IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSIwLjUiIHkxPSIwLjUiIHgyPSIxMDI0LjUiIHkyPSIxMDI0LjQ5OCIvPgo8bGluZSBkaXNwbGF5PSJub25lIiBmaWxsPSJub25lIiBzdHJva2U9IiM5OTk5OTkiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjAuNTAxIiB5MT0iMTAyNC40OTgiIHgyPSIxMDI0LjUiIHkyPSIwLjQ5OCIvPgo8Y2lyY2xlIGRpc3BsYXk9Im5vbmUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzk5OTk5OSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBjeD0iNTEyLjI0IiBjeT0iNTEyLjIzOSIgcj0iMTkwLjA0NCIvPgo8Y2lyY2xlIGRpc3BsYXk9Im5vbmUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzk5OTk5OSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBjeD0iNTEyLjI0IiBjeT0iNTEyLjIzOSIgcj0iMjY5Ii8+CjxjaXJjbGUgZGlzcGxheT0ibm9uZSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOTk5OTk5IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGN4PSI1MTIuMjQiIGN5PSI1MTIuMjM5IiByPSI0NTAuNDU3Ii8+Cjwvc3ZnPgo=");}</style></head><body>
<article class="project-tablet">
<figure class="ipad">
<input type="radio" name="btn" id="layout" checked="checked"/>
<label for="layout"></label>
<input type="radio" name="btn" id="info"/>
<label for="info"></label>
<div class="screen-tablet">
<img src="http://hornebom.com/images/ipad/ipad_hh.jpg" alt="" class="page"/>
</div>
<figcaption class="caption">
<h3>Ipad Mini Showcase</h3>
<p>I like the idea of showcasing webprojects in their real environment. So I built an interactive Ipad. Click on the Safari Icon to lauch the website again. Mail and Twitter could be used to share content.</p>
<nav class="social">
<ul>
<li><a href="#" class="mail"></a></li>
<li><a href="#" class="twitter"></a></li>
</ul>
</nav>
</figcaption>
</figure>
</article>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >// this comes from here: http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/
(function($,sr){
// debouncing function from John Hann
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
}
// smartresize
jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
})(jQuery,'smartresize');
$(window).smartresize(function(){
$('.page').hide().show(0);
});
//# sourceURL=pen.js
</script>
</body></html>
