| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107 |
- .dg-container {
- width: 100%;
- height: 100%;
- position: relative;
- padding-top: 50px;
- }
- .dg-wrapper{
- width: 550px;
- height: 360px;
- margin: 0 auto;
- position: relative;
- -webkit-transform-style: preserve-3d;
- -moz-transform-style: preserve-3d;
- -o-transform-style: preserve-3d;
- -ms-transform-style: preserve-3d;
- transform-style: preserve-3d;
- -webkit-perspective: 1000px;
- -moz-perspective: 1000px;
- -o-perspective: 1000px;
- -ms-perspective: 1000px;
- perspective: 1000px;
- }
- .dg-wrapper a{
- width: 100%;
- height: 100%;
- display: block;
- position: absolute;
- left: 0;
- top: 0;
- background: transparent url(browser.png) no-repeat top left;
- box-shadow: 0px 10px 20px rgba(0,0,0,0.3);
- }
- .dg-wrapper a.dg-transition{
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- -ms-transition: all 0.5s ease-in-out;
- transition: all 0.5s ease-in-out;
- }
- .dg-wrapper a img,
- .dg-wrapper a iframe {
- display: block;
- text-align: center;
- padding: 48px 1px 1px 1px;
- margin: 0 auto;
- max-width: calc(100% - 2px);
- height: calc(100% - 16px);
- }
- .dg-wrapper a img {
- width: auto;
- }
- .dg-wrapper a div {
- /*font-style: italic;*/
- font-weight: 600;
- text-align: center;
- line-height: 50px;
- text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
- color: #5882FA;
- font-size: 16px;
- width: 100%;
- bottom: -75px;
- display: none;
- position: absolute;
- }
- .dg-wrapper a.dg-center div{
- display: block;
- }
- .dg-container nav{
- width: 58px;
- position: absolute;
- z-index: 1000;
- bottom: 60px;
- left: 50%;
- margin-left: -29px;
- }
- .dg-container nav span{
- text-indent: -9000px;
- float: left;
- cursor:pointer;
- width: 24px;
- height: 25px;
- opacity: 0.8;
- background: transparent url(arrows.png) no-repeat top left;
- }
- .dg-container nav span:hover{
- opacity: 1;
- }
- .dg-container nav span.dg-next{
- background-position: top right;
- margin-left: 10px;
- }
- @media(min-width: 1400px) {
- .dg-container {
- padding-top: 100px;
- }
- .dg-wrapper {
- width: 764px;
- height: 500px;
- }
- .dg-wrapper a {
- background: transparent url(browser-bg.png) no-repeat top left;
- }
- .dg-wrapper a img,
- .dg-wrapper a iframe {
- padding-top: 65px;
- }
- }
|