/*@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,300);*/
 html {
     height: 100%;
     padding: 0;
     margin: 0;
 }
 
 body {
     font-family: 'Open Sans', sans-serif;
     height: 100%;
     color: #fff;
     padding: 0;
     margin: 0;
     background: #1C1C38;
 }
#headBar {
    width:100%; 
    height:70px; 
    background:#202020;
    position:relative;
}
#headBar .dataAdv {            
    display:inline-block;
    width:250px;
    font-size:18px;
    line-height:68px; 
    color:#b9b9b9; 
    font-family:sans-serif
}
#headBar #advType {
    margin-left: 20px;
    width:285px;
}
#headBar #advMedia {width:285px;}
#headBar .dataAdv a {
    display:block;
    width:100%; 
    height:100%;
    color:#fff;
}
#headBar img {
    max-width:100%; 
    height:70%; 
    position: absolute; 
    right:1.5%; 
    top:15%;
}
 /*Basic Phone styling*/
 
 .phone {
     position: relative;
     border: 40px solid #121212;
     border-width: 55px 7px;
     border-radius: 40px;
     margin: 50px auto;
     overflow: hidden;
     -webkit-transition: all 0.5s ease;
     transition: all 0.5s ease;
     -webkit-animation: fadein 2s;
     /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: fadein 2s;
     /* Firefox < 16 */
     -ms-animation: fadein 2s;
     /* Internet Explorer */
     -o-animation: fadein 2s;
     /* Opera < 12.1 */
     animation: fadein 2s;
 }
#ifrDesktop {display:none;}
 .phone iframe {
     border: 0;
     width: 100%;
     /*calc(100%-114px);*/
     height: calc(100% - 114px);
     top: 64px;
     /*background-color:#000;*/
 }
 /*Different Perspectives*/
 
 .phone.view_1 {
     /*-webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(-30deg);
            transform: rotateX(50deg) rotateY(0deg) rotateZ(-30deg);*/
     box-shadow: -3px 3px 0 #000, -6px 6px 0 #000, -9px 9px 0 #000, -12px 12px 0 #000, -14px 10px 20px #000;
 }
 
 .phone.view_2 {
     /*-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);*/
     box-shadow: 0px 3px 0 #000, 0px 4px 0 #000, 0px 5px 0 #000, 0px 7px 0 #000, 0px 10px 20px #000;
 }
 
 @-webkit-keyframes rotate {
     0% {
         -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(-30deg);
     }
     50% {
         -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(-40deg);
     }
     100% {
         -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(-30deg);
     }
 }
 /*
.view_1.rotate
{
    -webkit-animation-name:             rotate; 
    -webkit-animation-duration:         15s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function: linear;
}
*/
 /*Controls*/
 
 #controls {
     position: absolute;
     top: 20px;
     left: 20px;
     font-size: 0.9em;
     color: #333;
 }
 
 #controls div {
     margin: 10px;
 }
 
 #controls div label {
     width: 120px;
     display: block;
     float: left;
     color: #fff;
 }
 
 #phone-controls {
     position: absolute;
     /*top: 20px;*/
     top:90px;
     right: 20px;
     width: 200px;
 }
 
 #phones {
     border-top: 1px solid #fff;
     margin-top: 20px;
     padding-top: 20px;
 }
 
 #phones button {
     outline: none;
     width: 198px;
     border: 1px solid #ff77aa;
     border-radius: 5px;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     -o-border-radius: 5px;
     background-color: #cf0d73;/*#016aa0;*/
     height: 40px;
     margin: 10px 0;
     color: #fff;
     -webkit-transition: all 0.2s;
     transition: all 0.2s;
     font-size: 18px;
 }
 
 #phones button:hover {
     color: #444;
     background-color: #eee;
 }
 
 #views button {
     outline: none;
     width: 198px;
     border: 1px solid #00a8ff;
     border-radius: 5px;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     -o-border-radius: 5px;
     background-color: #00a8ff;
     height: 40px;
     margin: 10px 0;
     color: #fff;
     -webkit-transition: all 0.2s;
     transition: all 0.2s;
     cursor: pointer;
     font-size: 18px;
 }
 
 #views button:hover,
 button.active {
     color: #444 !important;
     background-color: #eee !important;
 }
 
 button.active {
     cursor: default !important;
     opacity:0.4 !important;
     width: 150px !important;
     font-size:13px !important;     
 } 
 @media (max-width:900px) {
     #DesktopWrapper {
         -webkit-transform: scale(0.8, 0.8);
         transform: scale(0.8, 0.8);
     }
 } 
 @media (max-width:700px) {
     #DesktopWrapper {
         -webkit-transform: scale(0.6, 0.6);
         transform: scale(0.6, 0.6);
     }
 } 
 @media (max-width:500px) {
     #DesktopWrapper {
         -webkit-transform: scale(0.4, 0.4);
         transform: scale(0.4, 0.4);
     }
 } 
 #loader {
     margin: 60px auto;
     font-size: 10px;
     position: absolute;
     left: 34%;
     top: 30%;
     text-indent: -9999em;
     border-top: 1.1em solid rgba(255, 255, 255, 0.2);
     border-right: 1.1em solid rgba(255, 255, 255, 0.2);
     border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
     border-left: 1.1em solid #ffffff;
     -webkit-transform: translateZ(0);
     -ms-transform: translateZ(0);
     transform: translateZ(0);
     -webkit-animation: load8 1.1s infinite linear;
     animation: load8 1.1s infinite linear;
 }
 
 #loader,
 #loader:after {
     border-radius: 50%;
     width: 10em;
     height: 10em;
 }
 
 @-webkit-keyframes load8 {
     0% {
         -webkit-transform: rotate(0deg);
         transform: rotate(0deg);
     }
     100% {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
     }
 }
 
 @keyframes load8 {
     0% {
         -webkit-transform: rotate(0deg);
         transform: rotate(0deg);
     }
     100% {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
     }
 }
 
 @keyframes fadein {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }
 /* Firefox < 16 */
 
 @-moz-keyframes fadein {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }
 /* Safari, Chrome and Opera > 12.1 */
 
 @-webkit-keyframes fadein {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }
 /* Internet Explorer */
 
 @-ms-keyframes fadein {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }
 /* Opera < 12.1 */
 
 @-o-keyframes fadein {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }
 
 #topNavBar {
     height: 64px;
     width: 100%;
     position: absolute;
     top: 0;
     background: url(http://www.shaa.it/preview/previewTest/img/topBar.jpg)no-repeat top left;
     background-size: contain;
     z-index: 10;
 }
 
 #bottomNavBar {
     height: 50px;
     width: 100%;
     position: absolute;
     bottom: 0;
     background: url(http://www.shaa.it/preview/previewTest/img/bottomBar.jpg)no-repeat top left;
     background-size: contain;
     z-index: 10;
 }
 
 #topNavBarLand {
     height: 100%;
     width: 64px;
     position: absolute;
     bottom: 0;
     left: 0;
     background: url(http://www.shaa.it/preview/previewTest/img/topBarLand.jpg)no-repeat top left;
     background-size: contain;
     z-index: -1;
     display: none;
 }
 
 #bottomNavBarLand {
     height: 100%;
     width: 50px;
     position: absolute;
     bottom: 0;
     right: 0;
     background: url(http://www.shaa.it/preview/previewTest/img/bottomBarLand.jpg)no-repeat top left;
     background-size: contain;
     z-index: -1;
     display: none;
 }
 
 #topNavBar.ipad {
     /*height:64px;width:100%; position:absolute;top:0;*/
     background: url(http://www.shaa.it/preview/previewTest/img/topBarIpad.jpg)no-repeat top left;
     background-size: contain;
     z-index: 10;
 }
 
 #bottomNavBar.ipad {
     /*height:50px;width:100%;position:absolute;bottom:0;*/
     background: url(http://www.shaa.it/preview/previewTest/img/bottomBarIpad.jpg)no-repeat top left;
     background-size: contain;
     z-index: 10;
 }
 
 #topNavBarLand.ipad {
     /*height:100%;width:64px; position:absolute;bottom:0;left:0;*/
     background: url(http://www.shaa.it/preview/previewTest/img/topBarIpadLand.jpg)no-repeat top left;
     background-size: contain;
     z-index: -1;
     /*visibility:hidden;
            opacity:0;*/
 }
 
 #bottomNavBarLand.ipad {
     /*height:100%;width:50px; position:absolute;bottom:0;right:0;*/
     background: url(http://www.shaa.it/preview/previewTest/img/bottomBarIpadLand.jpg)no-repeat top left;
     background-size: contain;
     z-index: -1;
     /*
     visibility:hidden;
     opacity:0;
     */
 }
 
 #DeviceWrapper,
 #ifrMobile {
     width: 100%;
     height: 100%;
 }
 
 #DeviceWrapper,
 #DesktopWrapper,
 #phone-controls {display: none;}
.qrCodeText {
     display: block;
     height: 15px;
     font-size: 13px;
     text-align: center;
     background: #fff;
     color: #000;
     position: absolute;
     bottom: 0;
     left:0;right:0; margin:auto;
}
#qrcode {
    width:200px; 
    height:220px; 
    border:7px solid #fff; 
    position:fixed;
    top:30%; 
    margin:0; 
    left:60px;
    background:#fff; 
    border-radius:8px;
}