/* quick reset */ * { margin: 0; padding: 0; border: 0; } /* relevant styles */ .img__wrap { position: relative; height: 200px; width: 257px; } .img__description { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(29, 106, 154, 0.72); color: #fff; visibility: hidden; opacity: 0; /* transition effect. not necessary */ transition: opacity .2s, visibility .2s; } .img__wrap:hover .img__description { visibility: visible; opacity: 1; } .no-underline a { text-decoration: none !important; } @font-face { font-family: 'RobotoMedium'; src: url("/fonts/Roboto-Medium-webfont.eot"); src: url("/fonts/Roboto-Medium-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/Roboto-Medium-webfont.woff") format("woff"), url("/fonts/Roboto-Medium-webfont.ttf") format("truetype"), url("/fonts/Roboto-Medium-webfont.svg#RobotoMedium") format("svg"); font-weight: normal; font-style: normal } edbody { background-color: #fff; background-image: url("../images/background.jpg"); background-size: 100%; background-size: cover; margin-top: 20px; font-family: 'RobotoMedium'; margin: 0; padding: 0 } fieldset { border: none } label { float: left; text-indent: -99999px } input { width: 85%; margin-right: 1%; height: 2em; font-size: 1.6em; float: left } h3, dl, dd, dt { margin: 1em 2em } h2 { margin: 1em } dt { font-weight: bold } p { line-height: 1.6; margin: 1em 2em } p.intro { clear: both } a { color: #ede6dc; text-decoration: none; transition: all 1s ease } a:hover { color: #cc4e46; background-color: #ede6dc } a.button { background-color: #ede6dc; color: #cc4e46; width: 8%; line-height: 1.7em; margin: 0; font-size: 2em; text-align: center; float: left; border: solid 1px #8e352e; box-shadow: 0 0 3px #333 } a.button:hover { background-color: #cc4e46; color: #ede6dc } .promos { background: #fff; width: 100%; position: relative; border-top: 5px solid; border-bottom: 5px solid; margin: 2em auto; padding: 2em 0 } .promos h2 { text-align: center; margin-top: 0 } .ebook { border-right: 3px solid } .promos a.button { width: 100%; font-size: 1.5em; background-color: #cc4e46; color: #ede6dc } .ebook, .bookmarklet { width: 49%; float: left } h1 { text-transform: uppercase; text-align: center } .wrapper { width: 90%; max-width: 1200px; margin: 0 auto } .netawards { position: absolute; top: 0; right: 0; width: 125px; height: 125px; background-image: url(/images/NETawards_ribbon.png) } .netawards a { display: block; width: 125px; height: 125px; text-indent: -999999px } .netawards a:hover { background-color: transparent } .display { position: relative; left: 0px; height: 600px } .url { float: left; background-color: #cc4e46; width: 100%; margin: 0 auto; box-shadow: 0px -2px 5px #333 } form { width: 85%; margin: 1em auto } div { background-repeat: no-repeat; background-size: 100%; overflow: hidden } iframe { transform: scale(0.219); transform-origin: top left; margin: 0; padding: 0; position: relative; background-color: #fff; border-color: #000 } .mobile { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/24650/iphone-optimised.png"); position: absolute; width: 95px; height: 196px; top: 375px; left: 300px; z-index: 5 } .mobile iframe { width: 320px; height: 480px; top: 32px; left: 11px; overflow-y: hidden } .tablet { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/24650/ipad-optimised.png"); width: 246px; height: 400px; z-index: 3; position: absolute; left: 120px; top: 230px } .tablet iframe { width: 768px; height: 1024px; top: 35px; left: 38px; overflow-y: hidden } .laptop { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/24650/laptop-screen-optimised.png"); width: 477px; height: 307px; top: 264px; left: 560px; position: absolute; z-index: 2 } .laptop iframe { width: 1280px; height: 802px; top: 26px; left: 60px; transform: scale(0.277); -webkit-transform: scale(0.277); -o-transform: scale(0.277); -ms-transform: scale(0.277); -moz-transform: scale(0.277); transform-origin: top left; -webkit-transform-origin: top left; -o-transform-origin: top left; -ms-transform-origin: top left; -moz-transform-origin: top left } .desktop { position: absolute; width: 566px; height: 538px; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/24650/large-screen-optimised.png"); top: 0px; left: 220px; z-index: 1 } .desktop iframe { left: 28px; top: 38px; width: 1600px; height: 992px; transform: scale(0.3181); -webkit-transform: scale(0.3181); -o-transform: scale(0.3181); -ms-transform: scale(0.3181); -moz-transform: scale(0.3181); transform-origin: top left; -webkit-transform-origin: top left; -o-transform-origin: top left; -ms-transform-origin: top left; -moz-transform-origin: top left } .about-tool { font-size: 1.2em; max-width: 64em; width: 80%; margin: 1em auto } .about-tool li { margin-bottom: 0.5em; line-height: 1.2 } @media (max-width: 1160px) { .display { width: 95%; height: 550px; transform: scale(0.81); -webkit-transform: scale(0.81); -o-transform: scale(0.81); -ms-transform: scale(0.81); -moz-transform: scale(0.81) } .desktop { left: 180px } .laptop { left: 520px } .tablet { left: 80px } .mobile { left: 260px } input { width: 88% } } @media (max-width: 1070px) { .display { left: -50px } } @media (max-width: 1000px) { .display { height: 500px; transform: scale(0.71); -webkit-transform: scale(0.71); -o-transform: scale(0.71); -ms-transform: scale(0.71); -moz-transform: scale(0.71); top: -40px } .desktop { left: 140px } .laptop { left: 480px } .tablet { left: 40px } .mobile { left: 220px } } @media (max-width: 850px) { .display { height: 500px; transform: scale(0.65); -webkit-transform: scale(0.65); -o-transform: scale(0.65); -ms-transform: scale(0.65); -moz-transform: scale(0.65) } .desktop { left: 100px } .laptop { left: 440px } .tablet { left: 0px } .mobile { left: 180px } } @media (max-width: 768px) { .display { height: 450px; transform: scale(0.55); -webkit-transform: scale(0.55); -o-transform: scale(0.55); -ms-transform: scale(0.55); -moz-transform: scale(0.55) } a.button { font-size: 1.6em; line-height: 1.75em; margin-top: 0.5em; width: 100% } input { height: 1.2em; width: 100% } } @media (max-width: 670px) { .display { height: 400px; left: -70px; transform: scale(0.45); -webkit-transform: scale(0.45); -o-transform: scale(0.45); -ms-transform: scale(0.45); -moz-transform: scale(0.45) } } @media (max-width: 580px) { input { font-size: 1.4em; height: 1.4em; width: 100% } a.button { width: 100%; float: left; font-size: 1.4em; margin-top: 0.5em } } @media (max-width: 560px) { .display { height: 270px; top: -65px; transform: scale(0.37); -webkit-transform: scale(0.37); -o-transform: scale(0.37); -ms-transform: scale(0.37); -moz-transform: scale(0.37) } } @media (max-width: 440px) { .display { left: -17px; top: -65px; width: 70px; transform: scale(0.35); -webkit-transform: scale(0.35); -o-transform: scale(0.35); -ms-transform: scale(0.35); -moz-transform: scale(0.35) } } @media (max-width: 380px) { .display { height: 235px; left: -17px; top: -65px; width: 70px; transform: scale(0.27); -webkit-transform: scale(0.27); -o-transform: scale(0.27); -ms-transform: scale(0.27); -moz-transform: scale(0.27) } .desktop { left: 100px } .laptop { left: 515px } .tablet { left: 0px } .mobile { left: 180px } h1 { font-size: 1.2em } p { margin: 1em } } #carbonads { max-width: 400px; margin: 1em auto; } /* To position the text beside the image: */ .carbon-img { float: left; margin-right: 8px; } .carbon-text { display: block; } /* To position the text below the image: */ /* .carbon-text { display: block; width: 130px; } */ /* To separate the attribution from the text: */ .carbon-poweredby { float: right; } .carbon-text { padding: 8px; } /* To add a border around the ad: */ #carbonads { padding: 15px; border: 1px solid #ccc; } /* To style the text and attribution: */ .carbon-text { font-size: 12px; color: orange; } .carbon-poweredby { font-size: 75%; } /* To fixed position the ad: */ /* #carbonads { position: fixed; bottom: 5px; right: 5px; } */