<div id="wrapper"><!-- [et_pb_line_break_holder] --> <div class="phone view_2" id="phone_1"><!-- [et_pb_line_break_holder] --> <iframe src="https://www.melagrafica.it" id="frame_1"></iframe><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --></div><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><div id="controls"><!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> <div style="display:none"><!-- [et_pb_line_break_holder] --> <label for="iframePerspective">Add perspective:</label><!-- [et_pb_line_break_holder] --> <input id="iframePerspective" checked="true" type="checkbox"><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --></div><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><div id="phone-controls"><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> <div id="views"><!-- [et_pb_line_break_holder] --> <button value="1">Table View</button><!-- [et_pb_line_break_holder] --> <button value="2">Front View</button><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> <div id="phones"><!-- [et_pb_line_break_holder] --> <button value="1">Phone</button><!-- [et_pb_line_break_holder] --> <button value="5">Tablet</button><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --></div> <!-- [et_pb_line_break_holder] --><script src="/js/index.js"></script>

<style><!-- [et_pb_line_break_holder] -->/*Basic Phone styling*/<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> .phone {<!-- [et_pb_line_break_holder] --> position:relative;<!-- [et_pb_line_break_holder] --> border: 40px solid #121212;<!-- [et_pb_line_break_holder] --> border-width: 55px 7px;<!-- [et_pb_line_break_holder] --> border-radius: 40px;<!-- [et_pb_line_break_holder] --> margin: 50px auto;<!-- [et_pb_line_break_holder] --> overflow: hidden;<!-- [et_pb_line_break_holder] --> -webkit-transition: all 0.5s ease;<!-- [et_pb_line_break_holder] --> transition: all 0.5s ease;<!-- [et_pb_line_break_holder] --> -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */<!-- [et_pb_line_break_holder] --> -moz-animation: fadein 2s; /* Firefox < 16 */<!-- [et_pb_line_break_holder] --> -ms-animation: fadein 2s; /* Internet Explorer */<!-- [et_pb_line_break_holder] --> -o-animation: fadein 2s; /* Opera < 12.1 */<!-- [et_pb_line_break_holder] --> animation: fadein 2s;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> .phone iframe {<!-- [et_pb_line_break_holder] --> border: 0;<!-- [et_pb_line_break_holder] --> width: 100%;<!-- [et_pb_line_break_holder] --> height: 100%;<!-- [et_pb_line_break_holder] --> background-color:#000;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> /*Different Perspectives*/<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> .phone.view_1 {<!-- [et_pb_line_break_holder] --> -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(-30deg);<!-- [et_pb_line_break_holder] --> transform: rotateX(50deg) rotateY(0deg) rotateZ(-30deg);<!-- [et_pb_line_break_holder] --> box-shadow: -3px 3px 0 #000, -6px 6px 0 #000, -9px 9px 0 #000, -12px 12px 0 #000, -14px 10px 20px #000;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> .phone.view_2 {<!-- [et_pb_line_break_holder] --> -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);<!-- [et_pb_line_break_holder] --> transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);<!-- [et_pb_line_break_holder] --> box-shadow: 0px 3px 0 #000, 0px 4px 0 #000, 0px 5px 0 #000, 0px 7px 0 #000, 0px 10px 20px #000;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->@-webkit-keyframes rotate {<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> 0%{-webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(-30deg);}<!-- [et_pb_line_break_holder] --> 50%{-webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(-40deg);}<!-- [et_pb_line_break_holder] --> 100%{-webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(-30deg);}<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.view_1.rotate<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] --> -webkit-animation-name: rotate; <!-- [et_pb_line_break_holder] --> -webkit-animation-duration: 15s; <!-- [et_pb_line_break_holder] --> -webkit-animation-iteration-count: infinite;<!-- [et_pb_line_break_holder] --> -webkit-animation-timing-function: linear;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> /*Controls*/<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> #controls {<!-- [et_pb_line_break_holder] --> position: absolute;<!-- [et_pb_line_break_holder] --> top: 20px;<!-- [et_pb_line_break_holder] --> left: 20px;<!-- [et_pb_line_break_holder] --> font-size: 0.9em;<!-- [et_pb_line_break_holder] --> color: #333;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> #controls div {<!-- [et_pb_line_break_holder] --> margin: 10px;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> #controls div label {<!-- [et_pb_line_break_holder] --> width: 120px;<!-- [et_pb_line_break_holder] --> display: block;<!-- [et_pb_line_break_holder] --> float: left;<!-- [et_pb_line_break_holder] --> color: #fff;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> #phone-controls{<!-- [et_pb_line_break_holder] --> position: absolute;<!-- [et_pb_line_break_holder] --> top: 20px;<!-- [et_pb_line_break_holder] --> right: 20px;<!-- [et_pb_line_break_holder] --> width: 200px;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> #phones {<!-- [et_pb_line_break_holder] --> margin-top:20px;<!-- [et_pb_line_break_holder] --> padding-top:20px;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> #phones button {<!-- [et_pb_line_break_holder] --> outline: none;<!-- [et_pb_line_break_holder] --> width: 198px;<!-- [et_pb_line_break_holder] --> border: 1px solid #016aa0;<!-- [et_pb_line_break_holder] --> border-radius:5px;<!-- [et_pb_line_break_holder] --> -moz-border-radius:5px;<!-- [et_pb_line_break_holder] --> -webkit-border-radius:5px;<!-- [et_pb_line_break_holder] --> -o-border-radius:5px;<!-- [et_pb_line_break_holder] --> background-color: #016aa0;<!-- [et_pb_line_break_holder] --> height: 40px;<!-- [et_pb_line_break_holder] --> margin: 10px 0;<!-- [et_pb_line_break_holder] --> color: #fff;<!-- [et_pb_line_break_holder] --> -webkit-transition: all 0.2s;<!-- [et_pb_line_break_holder] --> transition: all 0.2s;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> #phones button:hover {<!-- [et_pb_line_break_holder] --> color: #444;<!-- [et_pb_line_break_holder] --> background-color: #eee;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> #views button {<!-- [et_pb_line_break_holder] --> outline: none;<!-- [et_pb_line_break_holder] --> width: 198px;<!-- [et_pb_line_break_holder] --> border: 1px solid #00a8ff;<!-- [et_pb_line_break_holder] --> border-radius:5px;<!-- [et_pb_line_break_holder] --> -moz-border-radius:5px;<!-- [et_pb_line_break_holder] --> -webkit-border-radius:5px;<!-- [et_pb_line_break_holder] --> -o-border-radius:5px;<!-- [et_pb_line_break_holder] --> background-color: #00a8ff;<!-- [et_pb_line_break_holder] --> height: 40px;<!-- [et_pb_line_break_holder] --> margin: 10px 0;<!-- [et_pb_line_break_holder] --> color: #fff;<!-- [et_pb_line_break_holder] --> -webkit-transition: all 0.2s;<!-- [et_pb_line_break_holder] --> transition: all 0.2s;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> #views button:hover {<!-- [et_pb_line_break_holder] --> color: #444;<!-- [et_pb_line_break_holder] --> background-color: #eee;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> @media (max-width:900px) {<!-- [et_pb_line_break_holder] --> #wrapper {<!-- [et_pb_line_break_holder] --> -webkit-transform: scale(0.8, 0.8);<!-- [et_pb_line_break_holder] --> transform: scale(0.8, 0.8);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> @media (max-width:700px) {<!-- [et_pb_line_break_holder] --> #wrapper {<!-- [et_pb_line_break_holder] --> -webkit-transform: scale(0.6, 0.6);<!-- [et_pb_line_break_holder] --> transform: scale(0.6, 0.6);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> @media (max-width:500px) {<!-- [et_pb_line_break_holder] --> #wrapper {<!-- [et_pb_line_break_holder] --> -webkit-transform: scale(0.4, 0.4);<!-- [et_pb_line_break_holder] --> transform: scale(0.4, 0.4);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->#loader {<!-- [et_pb_line_break_holder] --> margin: 60px auto;<!-- [et_pb_line_break_holder] --> font-size: 10px;<!-- [et_pb_line_break_holder] --> position: absolute;<!-- [et_pb_line_break_holder] --> left:34%;<!-- [et_pb_line_break_holder] --> top:30%;<!-- [et_pb_line_break_holder] --> text-indent: -9999em;<!-- [et_pb_line_break_holder] --> border-top: 1.1em solid rgba(255, 255, 255, 0.2);<!-- [et_pb_line_break_holder] --> border-right: 1.1em solid rgba(255, 255, 255, 0.2);<!-- [et_pb_line_break_holder] --> border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);<!-- [et_pb_line_break_holder] --> border-left: 1.1em solid #ffffff;<!-- [et_pb_line_break_holder] --> -webkit-transform: translateZ(0);<!-- [et_pb_line_break_holder] --> -ms-transform: translateZ(0);<!-- [et_pb_line_break_holder] --> transform: translateZ(0);<!-- [et_pb_line_break_holder] --> -webkit-animation: load8 1.1s infinite linear;<!-- [et_pb_line_break_holder] --> animation: load8 1.1s infinite linear;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->#loader,<!-- [et_pb_line_break_holder] -->#loader:after {<!-- [et_pb_line_break_holder] --> border-radius: 50%;<!-- [et_pb_line_break_holder] --> width: 10em;<!-- [et_pb_line_break_holder] --> height: 10em;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->@-webkit-keyframes load8 {<!-- [et_pb_line_break_holder] --> 0% {<!-- [et_pb_line_break_holder] --> -webkit-transform: rotate(0deg);<!-- [et_pb_line_break_holder] --> transform: rotate(0deg);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> 100% {<!-- [et_pb_line_break_holder] --> -webkit-transform: rotate(360deg);<!-- [et_pb_line_break_holder] --> transform: rotate(360deg);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->@keyframes load8 {<!-- [et_pb_line_break_holder] --> 0% {<!-- [et_pb_line_break_holder] --> -webkit-transform: rotate(0deg);<!-- [et_pb_line_break_holder] --> transform: rotate(0deg);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> 100% {<!-- [et_pb_line_break_holder] --> -webkit-transform: rotate(360deg);<!-- [et_pb_line_break_holder] --> transform: rotate(360deg);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->@keyframes fadein {<!-- [et_pb_line_break_holder] --> from { opacity: 0; }<!-- [et_pb_line_break_holder] --> to { opacity: 1; }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/* Firefox < 16 */<!-- [et_pb_line_break_holder] -->@-moz-keyframes fadein {<!-- [et_pb_line_break_holder] --> from { opacity: 0; }<!-- [et_pb_line_break_holder] --> to { opacity: 1; }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/* Safari, Chrome and Opera > 12.1 */<!-- [et_pb_line_break_holder] -->@-webkit-keyframes fadein {<!-- [et_pb_line_break_holder] --> from { opacity: 0; }<!-- [et_pb_line_break_holder] --> to { opacity: 1; }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/* Internet Explorer */<!-- [et_pb_line_break_holder] -->@-ms-keyframes fadein {<!-- [et_pb_line_break_holder] --> from { opacity: 0; }<!-- [et_pb_line_break_holder] --> to { opacity: 1; }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/* Opera < 12.1 */<!-- [et_pb_line_break_holder] -->@-o-keyframes fadein {<!-- [et_pb_line_break_holder] --> from { opacity: 0; }<!-- [et_pb_line_break_holder] --> to { opacity: 1; }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --></style>