/* Copyright © GeoLabs SARL | http://geolabs.fr */ body {width: 100%;height: 100%;font-family: "Arial",Helvetica Neue,Helvetica,sans-serif;color: #A5A5A5;background-color: #FFFFFF;overflow-x: hidden} html {width: 100%;height: 100%;} /* Web fonts */ @font-face {font-family: 'GeoLabsLogo';src:url('../font-awesome-4.1.0/fonts/GeoLabsLogo.ttf') format('truetype');font-weight: normal;font-style: normal;} @font-face {font-family: 'mmFont';src: url('../font-awesome-4.1.0/fonts/mmFont.ttf') format('truetype');font-weight: normal;font-style: normal;} @font-face {font-family: 'zooFont';src: url('../font-awesome-4.1.0/fonts/zooFont.ttf') format('truetype');font-weight: normal;font-style: normal;} @font-face {font-family: 'msFont';src: url('../font-awesome-4.1.0/fonts/msFont.ttf') format('truetype');font-weight: normal;font-style: normal;} @font-face {font-family: 'gdFont';src: url('../font-awesome-4.1.0/fonts/gdFont.ttf') format('truetype');font-weight: normal;font-style: normal;} @font-face {font-family: 'grFont';src: url('../font-awesome-4.1.0/fonts/grFont.ttf') format('truetype');font-weight: normal;font-style: normal;} @font-face {font-family: 'pgFont';src: url('../font-awesome-4.1.0/fonts/pgFont.ttf') format('truetype');font-weight: normal;font-style: normal;} @font-face {font-family: 'olFont';src: url('../font-awesome-4.1.0/fonts/olFont.ttf') format('truetype');font-weight: normal;font-style: normal;} @font-face {font-family: 'osmFont';src: url('../font-awesome-4.1.0/fonts/osmFont.ttf') format('truetype');font-weight: normal;font-style: normal;} @font-face {font-family: 'loFont';src: url('../font-awesome-4.1.0/fonts/loFont.ttf') format('truetype');font-weight: normal;font-style: normal;} @font-face {font-family: 'pcFont';src: url('../font-awesome-4.1.0/fonts/pcFont.ttf') format('truetype');font-weight: normal;font-style: normal;} @font-face {font-family: 'ckFont';src: url('../font-awesome-4.1.0/fonts/ckFont.ttf') format('truetype');font-weight: normal;font-style: normal;} @font-face {font-family: 'servIcons';src: url('../font-awesome-4.1.0/fonts/servicons.ttf') format('truetype'); font-weight: normal;font-style: normal;} @font-face {font-family: 'osIcons';src: url('../font-awesome-4.1.0/fonts/os.ttf') format('truetype'); font-weight: normal;font-style: normal;} @font-face {font-family: 'tools';src:url('../font-awesome-4.1.0/fonts/tools.eot');src:url('../font-awesome-4.1.0/fonts/tools.eot') format('embedded-opentype'),url('../font-awesome-4.1.0/fonts/tools.woff') format('woff'),url('../font-awesome-4.1.0/fonts/tools.ttf') format('truetype'),url('../font-awesome-4.1.0/fonts/tools.svg') format('svg');font-weight: normal;font-style: normal;} @font-face {font-family: 'ooCms';src:url('../font-awesome-4.1.0/fonts/oocms.eot');src:url('../font-awesome-4.1.0/fonts/oocms.eot') format('embedded-opentype'),url('../font-awesome-4.1.0/fonts/oocms.woff') format('woff'),url('../font-awesome-4.1.0/fonts/oocms.ttf') format('truetype'),url('../font-awesome-4.1.0/fonts/oocms.svg') format('svg');font-weight: normal;font-style: normal;} @font-face {font-family: 'msc';src:url('../font-awesome-4.1.0/fonts/msc.eot');src:url('../font-awesome-4.1.0/fonts/msc.eot') format('embedded-opentype'),url('../font-awesome-4.1.0/fonts/msc.woff') format('woff'),url('../font-awesome-4.1.0/fonts/msc.ttf') format('truetype'),url('../font-awesome-4.1.0/fonts/msc.svg') format('svg');font-weight: normal;font-style: normal;}/* Global */ h1,h2,h3,h4,h5,h6{margin: 0 0 35px;font-family: "Arial",Helvetica Neue,Helvetica,sans-serif;font-weight:normal;letter-spacing: 1px;color:#A5A5A5;} @media screen and (max-width: 568px) {.title-heading {font-size:1.5em !important;}.title-heading{padding-top:40px !important;}.sect{height:170px !important;}#tabl,#ordi{display:none !important;}#mapf{display:none !important;}} h2.tt{color:#E9E9E9;text-shadow:#19778a 0 3px 0;margin:0 0 40px 0;} h2.st{color:#66a3ac;} h2.bigl{width:100%;margin:100px auto 0 auto;text-shadow:#FFFFFF 0 1px 0;font-size:5em;color:#CCCCCC;line-height:.9em;font-weight:normal;} h2.bigl span{display:block;} h2.bigl2{text-align:center;padding:100px 30px 100px 30px;text-shadow:#498993 0 1px 0;font-size:5em;color:#d8f1ed;line-height:.9em;font-weight:normal;} h2.bigl2 span.open{display:block;text-align:center !important;padding:0;font-size:.9em;} h2.blg{margin:0 0 15px 0;color:#66A3AC;} h2.blg a{color:#90cccc;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;transition: all .2s ease-in-out;} h2.blg a:hover{color:#66A3AC;} img.iblg{min-width:100%;height:auto;} h2.tmm{margin: 0 0 0 0;padding:0 !important;} h2.tmm a {font-size:2em;color:#83c849;letter-spacing: 1px;text-decoration: none;text-shadow:#FFFFFF 0 1px 0;} h2.tmm a span{color: #707070 !important;} h2.tmmb{margin: 30px 30px 50px 30px;padding:0 !important;line-height:1.4em;font-size:1.7em;} h2.tmmb a {font-size:2em;color:#83c849;letter-spacing: 1px;text-decoration: none;text-shadow:#FFFFFF 0 1px 0;} h2.tmmb a span{color: #707070 !important;font-size:.85em;} h2.tmmb a span.w{text-shadow:#CCCCCC 0 1px 0;color: #FFFFFF !important;font-size:1.1em;} h2.pgmb{margin: 40px 30px 0px 30px;padding:0 !important;line-height:1.4em;font-size:1.9em;} h2.pgmb a {font-size:2em;color:#84aef4;letter-spacing: 1px;text-decoration: none;text-shadow:#FFFFFF 0 1px 0;} h2.pgmb a span{color: #3972d1 !important; display:block;font-size:.8em;} h2.pgmb a span.wp{text-shadow:#7dc7ed 0 1px 0;font-size:1.3em;line-height:.9em;display:block;color: #FFFFFF !important;} .pgmbb{font-size:10em;color:#3e6fc3;text-shadow:#FFFFFF 0 1px 0;} h2.msmb{text-shadow:#FFFFFF 0 1px 0;line-height:.9em;margin:30px 30px 0 30px;color:#52c61f;font-size:4em;letter-spacing:1px;} h2.msmb span{display:block;color:#0d9c36;text-shadow:#FFFFFF 0 1px 0;font-size:.82em;letter-spacing:0;margin:0;padding:0;} h2.msmb span.wms{color:#FFFFFF;text-shadow:#52c61f 0 1px 0;font-size:1.3em;line-height:.7em;} h2.osmb{margin: 30px auto 0 auto;padding:0 !important;line-height:1em;font-size:3em;} h2.osmb a{color:#9866db;text-shadow:#FFFFFF 0 2px 0;} h2.osmb span{display:block;margin:0 auto 0 auto;color:#f28cf6;text-shadow:#FFFFFF 1px 1px 0;font-size:.7em;} .osmbl{font-size:5em;color:#a882db;text-shadow:#FFFFFF 0 2px 0;} h2.olmb{margin: 40px 30px 0px 30px;padding:0 !important;line-height:1.4em;font-size:1.9em;} h2.olmb a {font-size:2em;color:#77a9b1;letter-spacing: 1px;text-decoration: none;text-shadow:#FFFFFF 0 1px 0;} h2.olmb a span{color: #84bdc6 !important; text-shadow:#FFFFFF 0 1px 0;display:block;font-size:.8em;} h2.olmb a span.wp{text-shadow:#84bdc6 0 1px 0;font-size:1.3em;line-height:.9em;display:block;color: #FFFFFF !important;} .olmbb{font-size:12em;color:#84bdc6;text-shadow:#FFFFFF 0 1px 0;line-height:1.2em;} h3.wht{color:#FFFFFF;margin:30px 0 40px 0;} h3.stt{color:#E9E9E9;text-shadow:#19778a 0 3px 0;margin:20px 0 50px 0;width:100%;} h3.oso{margin:0;padding:0;line-height:1em;font-size:2.2em;color:#98def2;text-shadow:#faffeb 0 1px 0;} h3.ost{margin:0;padding:0;line-height:1em;font-size:2.2em;color:#c3d9e7;text-shadow:#faffeb 0 2px 0;} h3.oda{margin:0;padding:0;line-height:1em;font-size:2.2em;color:#CCCCCC;text-shadow:#faffeb 0 2px 0;} h3.odo{margin:0;padding:0;line-height:1em;font-size:2.2em;color:#d9e7dd;text-shadow:#faffeb 0 2px 0;} h3.mmo{margin:0 0 30px 0;padding:0;line-height:1em;font-size:1.8em;color:#CCCCCC;} h3.bgio{font-size:2.6em;font-weight:bold;line-height:50px;color:#CCCCCC;margin:0;} h3.crdts{text-shadow:#afdada 0 1px 0;color:#66a3ac;} ul.sml li{font-size:18px;margin-bottom:10px;} .timdat{color:#a5a5a5;font-size:1.1em;margin:0 0 20px 0;} .input-group{margin:0 0 20px 0;} p{margin:0 0 25px;font-size: 18px;line-height: 1.5;color:#A5A5A5;} @media(min-width:767px){p{margin: 0 0 25px;font-size: 18px;line-height: 1.5;}} a{color: #219ab3;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;transition: all .2s ease-in-out;} a:hover,a:focus {text-decoration: none;color: #66a3ac;} .list-group{font-size:1em;margin-bottom:20px;} .list-group-item{padding:8px 12px !important;} .list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {z-index: 2;font-weight:normal !important;background-color: #90cccc;border-color: #90cccc;} .list-group-item.active a, .list-group-item.active:hover a, .list-group-item.active:focus a{color: #ffffff !important;} .centered{float:none;margin:0 auto;max-width:500px;} .gcolor{color:#66a3ac !important;} .lgcolor{color:#90ccca;} .lbcolor{color:#baeaf8;margin-top:30px;} .gbck{background:#66a3ac;height:80px;padding:10px;} .gbck h4{color:#FFFFFF;text-transform:uppercase;font-size:1.2em;margin:0;padding:20px 0 2px 0;} .gbck p a{color:#90cccb;} .gbck p a:hover{color:#FFFFFF;text-decoration:underline;padding:5px;} .gbck{margin:0;padding:0;} .osn{display:block;} .osn:hover{cursor:crosshair;text-decoration:none;} .wiki{font-size:15px;} .wiki dt{float:left;padding-right:10px;} .wiki dt:after{content:":"} .foss4g:hover{cursor:crosshair;text-decoration:underline;} .tooltip.top .tooltip-inner {background-color:#66a3ac;color:#FFFFFF;font-size:1.3em;} .tooltip.top .tooltip-arrow {border-top-color:#66a3ac;} .tooltip.bottom .tooltip-inner {background-color:#66a3ac;color:#FFFFFF;font-size:1.3em;} .tooltip.bottom .tooltip-arrow {border-top-color:#66a3ac;} .mmb{background:#e8f8ed;height:80px;padding:10px;} .zzb{height:100px;background:#faffeb;height:80px;padding:10px} .msb{height:100px;background:#dbf8e0;height:80px;padding:10px} .gdb{height:100px;background:#eaf7ff;height:80px;padding:10px} .mmb h3,.zzb h3, .msb h3,.gdb h3{line-height:55px;} .wtb{font-size:3em;color:#FFFFFF;line-height:80px !important;} .gosc{position:absolute;z-index:1000;width:100%;margin:50px auto;} .gusc{position:absolute;z-index:1000;width:100%;margin:30px auto;} .fgl{margin:0 auto;font-size:3em;color:#66a3ac;text-shadow:#a4e8e8 0 1px 0;} .bfgl{font-size:7em !important;color:#90cccb;position: relative;top: 70px;} .btngb{padding:7px;background:transparent;color:#66a3ac !important;position:absolute;right:15px;top:9px;width:32px;height:32px;display:block;border-radius:4px;} /* Navigation */ .navbar-custom {margin-bottom: 0;border-bottom: 1px solid rgba(255,255,255,.3);font-family:"Arial",Helvetica Neue,Helvetica,sans-serif;background: rgba(255,255,255,0.3); font-size:13px;} .navbar-brand {font-size:2em;text-transform: none;padding:10px !important;background:transparent !important;} .navbar-brand:hover{background:#66a3ac !important;} .navbar-custom .navbar-brand:focus {outline: 0;} .navbar-custom .navbar-brand .navbar-toggle {color: #808080;} .navbar-custom .navbar-header .navbar-toggle{border:1px solid #CCCCCC !important;padding:6px 10px !important;color:#CCCCCC !important;} .navbar-custom .navbar-header .navbar-toggle:hover{border:1px solid #66a3ac !important;color:#FFFFFF !important;background-color: #66a3ac !important;} .navbar-custom .navbar-brand .navbar-toggle:focus,.navbar-custom .navbar-brand .navbar-toggle:active {outline: 0;} .navbar-header a:hover{color:#FFFFFF !important; background: #707070;padding:5px 10px;} .navbar-custom a{color: #808080;background:transparent;} .navbar-custom .navbar-toggle:hover, .navbar-custom .navbar-toggle:active{background:#FFFFFF !important;} .navbar-custom .nav li a{font-size:1.2em;} .navbar-custom .nav li.active {outline: none;background-color: rgba(85,125,142,1);} .navbar-custom .nav li a{-webkit-transition: background .3s ease-in-out;-moz-transition: background .3s ease-in-out;transition: background .3s ease-in-out;} .navbar-custom .nav li ul li a{text-transform:none;font-size:1em;} .navbar-custom .nav li a:hover,.navbar-custom .nav li a:focus,.navbar-custom .nav li a.active{outline: 0;background-color: rgba(102,163,172,.7);color:#FFFFFF;} .navbar-custom .nav li a:focus{outline: 0;background-color: rgba(102,163,172,1);color:#FFFFFF;} .top-nav-collapse > ul{padding: 0;background: rgba(255,255,255,1) !important;} .navbar-nav>li>.dropdown-menu li a {color:#707070;} @media(min-width:767px){.navbar{padding: 20px 0;border-bottom: 0;letter-spacing: 1px;background: 0 0;-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;transition: background .5s ease-in-out,padding .5s ease-in-out;}.top-nav-collapse {padding: 0;background: rgba(255,255,255,0.5);}.top-nav-collapse a{background:#FFFFFF;}.navbar-custom.top-nav-collapse{border-bottom: 1px solid rgba(255,255,255,.3);}} @media only screen and (max-width: 766px) { .collapsing, .in {background-color: #FFFFFF;} .collapsing ul li a{color:#FFFFFF !important;} .collapsing ul li a:hover, .in ul li a:hover {color: #FFFFFF !important;} } /* Pagination */ .pagination >li> a {color:#95cece;} .pagination >li> a:hover {color:#66a3ac;} .pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus{background:#95cece;color:#FFFFFF;border-color:#95cece;} /* Flippable divs */ .flip { -webkit-perspective: 800;perspective: 800;position: relative;} .flip .card.flipped {-webkit-transform: rotatex(-180deg);transform: rotatex(-180deg);} .flip .card {height: 80px;-webkit-transform-style: preserve-3d;-webkit-transition: 1s;transform-style: preserve-3d;transition: 1s;} .flip .card .face {-webkit-backface-visibility: hidden ;backface-visibility: hidden ;z-index: 2;} .flip .card .front {position: absolute;width: 100%;z-index: 2;height:80px;} .front h3{text-shadow:#FFFFFF 0 1px 0;} .flip .card .back {-webkit-transform: rotatex(-180deg);transform: rotatex(-180deg);} .inner{margin:0px !important;} ul.ctn{font-size:16px;} ul.ctn li{padding-bottom:15px;} ul.medias{margin:0 auto 40px auto;list-style:none;padding:0;} ul.medias li{display:inline;margin:0 .7em 0 0;padding:0;color:#CCCCCC;} ul.medias li i.pr{font-size:6.7em;font-weight:normal !important;} ul.medias li i.lt{font-size:7.1em;} ul.medias li i.ta{font-size:5.8em;} ul.medias li i.mp{font-size:5.3em;} .bgm{background:url(../img/mapbg.png);} .bgm > .list-group{font-size:1em;margin-bottom:0 !important;} ul.tools{margin:0 auto;list-style:none;padding:0;font-size:1.3em;} ul.tools li{line-height:50px;display:inline;margin:0 25px 25px 0;padding:0;} ul.tools li a{color:#707070;} .gmm{border:0 !important;} .gmm a{color:#A5A5A5;margin-left:5px;} .gmm a:hover{text-decoration:underline;color:#707070;} .stm{margin:0;padding:10px 0 10px 0;text-shadow:#FFFFFF 0 1px 0;} .pt{padding-top:30px;} .mtm{margin-top:5px;} .mtmm{margin-top:70px;} .mtd{margin-top:30px;} .mt{margin-top:50px;} .mtp{margin-top:110px !important;} .mr{margin-right:7px;} .ml{margin-left:7px;} .mb{margin-bottom:5px;} .mbpm{margin-bottom:20px} .mbp{margin-bottom:30px;} .mbpp{margin-bottom:40px;} .timdat .label{font-size:.85em;} .frs{margin-top:25px;} .frs a{font-size:.85em;color:#CCCCCC !important;} .frs a:hover{color:orange !important;} .label { padding: 5px 6px 5px 6px !important; color: #ffffff; background-color: #e1e1e1; text-shadow:#707070 0 1px 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; white-space: nowrap; font-size:1em; font-weight:normal; text-shadow:none; display:inline-block; text-transform:uppercase;} .label.activec{ background:#90cccb; text-shadow:none !important; color:#FFFFFF; font-weight:normal; } .label a{color:#FFFFFF;} .label a:hover{color:#707070;} .label.activec a:hover{color:#FFFFFF;} .hide {display: none;} #sec0, #sec1, #sec2, #sec3, #sec4, #sec5 {padding:50px 0 0 0 !important;} #sec h3,#sec0 h3,#sec1 h3,#sec2 h3{text-shadow:#FFFFFF 0 1px 0;} .oan{position:absolute;width:100%;z-index:1000 !important} .cntrs{position:absolute;left:50%;z-index:1000 !important;margin:280px 0 0 -30px !important;text-align:center;} .cntrss{position:absolute;z-index:1000 !important;margin:0 auto 0 auto !important;width:100%;padding-top:30px;} .cnts{height:400px;position:absolute;z-index:1000 !important;margin:0 auto 0 auto !important;width:100%;} .wd{position:absolute;top:39%;left:27%;font-size:8em !important;z-index:1000;color:#FFFFFF;} .igb{position:absolute;top:43%;left:72%;background:rgba(144,204,204,.5);padding:3px;border-radius:50%;z-index:1000;color:#FFFFFF;font-size:1em;} .osw{font-size:5em;color:#BBF8F8 !important;text-shadow:1px solid #66a3ac;} .asky{background:#AFDADA;width:100%;height:150px;} .sky{ background: #afdada; /* Old browsers */ width:100%;height:400px;} .mesho{padding:25px;color:#FFFFFF;} @-webkit-keyframes wrench { 0% { -webkit-transform: rotate(-8deg); transform: rotate(-8deg); } 8% { -webkit-transform: rotate(8deg); transform: rotate(8deg); } 10% { -webkit-transform: rotate(16deg); transform: rotate(16deg); } 18% { -webkit-transform: rotate(-16deg); transform: rotate(-16deg); } 20% { -webkit-transform: rotate(-16deg); transform: rotate(-16deg); } 28% { -webkit-transform: rotate(16deg); transform: rotate(16deg); } 30% { -webkit-transform: rotate(16deg); transform: rotate(16deg); } 38% { -webkit-transform: rotate(-16deg); transform: rotate(-16deg); } 40% { -webkit-transform: rotate(-16deg); transform: rotate(-16deg); } 48% { -webkit-transform: rotate(16deg); transform: rotate(16deg); } 50% { -webkit-transform: rotate(16deg); transform: rotate(16deg); } 58% { -webkit-transform: rotate(-16deg); transform: rotate(-16deg); } 60% { -webkit-transform: rotate(-16deg); transform: rotate(-16deg); } 68% { -webkit-transform: rotate(16deg); transform: rotate(16deg); } 75% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes wrench { 0% { -webkit-transform: rotate(-8deg); -ms-transform: rotate(-8deg); transform: rotate(-8deg); } 8% { -webkit-transform: rotate(8deg); -ms-transform: rotate(8deg); transform: rotate(8deg); } 10% { -webkit-transform: rotate(16deg); -ms-transform: rotate(16deg); transform: rotate(16deg); } 18% { -webkit-transform: rotate(-16deg); -ms-transform: rotate(-16deg); transform: rotate(-16deg); } 20% { -webkit-transform: rotate(-16deg); -ms-transform: rotate(-16deg); transform: rotate(-16deg); } 28% { -webkit-transform: rotate(16deg); -ms-transform: rotate(16deg); transform: rotate(16deg); } 30% { -webkit-transform: rotate(16deg); -ms-transform: rotate(16deg); transform: rotate(16deg); } 38% { -webkit-transform: rotate(-16deg); -ms-transform: rotate(-16deg); transform: rotate(-16deg); } 40% { -webkit-transform: rotate(-16deg); -ms-transform: rotate(-16deg); transform: rotate(-16deg); } 48% { -webkit-transform: rotate(16deg); -ms-transform: rotate(16deg); transform: rotate(16deg); } 50% { -webkit-transform: rotate(16deg); -ms-transform: rotate(16deg); transform: rotate(16deg); } 58% { -webkit-transform: rotate(-16deg); -ms-transform: rotate(-16deg); transform: rotate(-16deg); } 60% { -webkit-transform: rotate(-16deg); -ms-transform: rotate(-16deg); transform: rotate(-16deg); } 68% { -webkit-transform: rotate(16deg); -ms-transform: rotate(16deg); transform: rotate(16deg); } 75% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } } .faa-wrench.animated, .faa-wrench.animated-hover:hover, .faa-parent.animated-hover:hover > .faa-wrench { -webkit-animation: wrench 2.5s ease infinite; animation: wrench 2.5s ease infinite; transform-origin-x: 90%; transform-origin-y: 35%; transform-origin-z: initial; } .minh{min-height:200px;} .mapbe { width: 240px; height: 240px; border-radius: 50%; -webkit-border-radius:50%; z-index: 10; overflow: hidden; border: 1px solid #CCCCCC; position:relative; top:20px; left:10px; display:block; background:#FFFFFF !important;} #mapb{display:block;height:240px;} #mapb .gmnoprint { display: none; } #mapb .olForeignContainer{background:#FFFFFF !important;} #mapb .olForeignContainer .gm-style{opacity:.5;} #mapb .olLayerGoogleCopyright {display:none;} #mapc, #map0{height:380px;bottom:0;} #map1{height:400px;} #mape{height:400px;} #mapd{height:450px;} #mapf{width:100%;min-height:400px;display:block;position:relative;} #mapg{height:380px;} .zoomcontainer{position:absolute;z-index:1000;width:62px;height: 150px;margin:20px;} .zoomplus{ border:1px solid #CCCCCC; width:32px; height: 32px; border-radius:4px; background:#FFFFFF; display:block; font-size:2em; padding:0; color:#66a3ac; z-index:10000; line-height:34px; } .zoomminus{ border:1px solid #CCCCCC; width:32px; height: 32px; display:block; border-radius:4px; background:#FFFFFF; font-size:2em; padding:0 0 0 0; display:block; z-index:10000; color:#66a3ac; margin:8px 0 0 0; line-height:30px; } .zoomplus:hover, .zoomminus:hover{text-decoration:none;color:#FFFFFF;background:#66a3ac;border:1px solid #FFFFFF;} .blcontainer{position:absolute;top:0 !important;right:0;z-index:1000;width:52px;height:210px;display:none;margin:0;background:rgba(255,255,255,.6);padding:10px;} .blcontainer ul{list-style:none;margin:0;padding:0;} .blcontainer ul li{padding:0 !important; text-align: center; padding: 2px ; margin: 0; width: 40px; height:40px; } .blcontainer ul li a{width:32px;height:32px;display:block;border:1px solid #CCCCCC;border-radius:4px;} .blcontainer ul li a:hover{border:1px solid #66a3ac} .osmw{background:url(../img/osmg.png);} .osmn{background:url(../img/osm.png);} .hum{background:url(../img/osmh.png);} .gmap{background:url(../img/gmapb.png);} .gmapmb{background:url(../img/gmapmb.png);} .gsat{background:url(../img/gsat.png);} .ghyb{background:url(../img/ghyb.png);} .olPopupContent { overflow: visible !important; padding: 0 !important; } .olPopup { z-index: 1005 !important; } .olwidgetPopupContent { background: none repeat scroll 0 0 #FFFFFF; border-radius: 1.2em 1.2em 1.2em 1.2em; box-shadow: 0 3px 14px rgba(0, 0, 0, 0.35); overflow: auto; padding: 10px 8px 8px; font-size:18px; } .olwidgetPopupCloseBox { background:#FFFFFF url(../img/close.png); cursor: pointer; height: 0; overflow: hidden; padding-top: 16px; position: absolute; right: 10px; top: 10px; width: 16px; } .olwidgetPopupCloseBox:hover { background-position: -64px 0; } .olwidgetPopupStemTL,.olwidgetPopupStemTR { -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); background: none repeat scroll 0 0 #FFFFFF; z-index: 1;margin:0;padding:0; } .olwidgetPopupStemBL,.olwidgetPopupStemBR { -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); background: none repeat scroll 0 0 #FFFFFF; z-index: 1;margin:0;padding:0; } .pabs{position:absolute;width:100%;margin:0 auto !important;z-index:1000;} .bw{background: rgba(255,255,255,0.7);margin:50px 10px 30px 10px;padding:0 10px 20px 10px;} .bw p{text-shadow:#FFFFFF 0 1px 0;} .bw ul{text-align:left;list-style:none;} .by{background: rgba(255,255,255,0.7);margin:0 0 30px 0;} .bz{background: rgba(255,255,255,0.7);margin:0 10px 20px 10px;padding:20px;} .intro { display: table; width: 100%; height: auto; padding: 80px 0 0 0; text-align: center; color: #66a3ac; background: #ffffff url(../img/bgeolabs.png) no-repeat top scroll; } .intro .intro-body { display: table-cell; vertical-align: bottom; } [class^="icon-f-"], [class*=" icon-f-"] { font-family: 'GeoLabsLogo'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-f-geolabs:before { content: "\e666"; } [class^="sicon-"], [class*=" sicon-"] { font-family: 'servIcons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .sicon-icon_60036:before { content: "\e697"; } .sicon-icon_2469:before { content: "\e698"; } .sicon-icon_43353:before { content: "\e699"; } .sicon-icon_30706:before { content: "\e700"; } .sicon-icon_70566:before { content: "\e701"; } .sicon-icon_14806:before { content: "\e702"; } .sicon-icon_56958:before { content: "\e703"; } .sicon-icon_42946:before { content: "\e704"; } .sicon-icon_433532:before { content: "\e6f6"; } .sicon-icon_20881:before { content: "\e706"; } .sicon-icon_42180:before { content: "\e707"; } .sicon-icon_22715:before { content: "\e708"; } .sicon-icon_55159:before { content: "\e709"; } .sicon-icon_21272:before { content: "\e710"; } .sicon-icon_23525:before { content: "\e711"; } [class^="ticon-"], [class*=" icon-"] { font-family: 'tools'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .ticon-rs:before { content: "\e601"; } .ticon-ms:before { content: "\e602"; } .ticon-db:before { content: "\e603"; } .ticon-gl:before { content: "\e604"; } .ticon-mc:before { content: "\e600"; } .ticon-ws:before { content: "\e605"; } .tls{color:#b6e4e4;font-size:6em;} .ttls{margin:10px;font-size:1.3em;color:#A5A5A5;} [class^="wticon-"], [class*=" icon-"] { font-family: 'ooCms'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .wticon-oocms:before { content: "\e601"; } [class^="msticon-"], [class*=" icon-"] { font-family: 'msc'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .msticon-msc:before { content: "\e600"; } .mf{margin:10px auto 0 auto;background:rgba(13,156,54,.6);display:block;border-radius:50%;width:200px;height:200px;border:1px solid #FFFFFF;} .mfh{font-size:10em;color:#FFFFFF;line-height:200px;} .pgf{margin:10px auto 0 auto;background:rgba(61,122,225,.4);display:block;border-radius:50%;width:200px;height:200px;border:1px solid #FFFFFF;} .olf{margin:10px auto 0 auto;background:rgba(255,255,225,.2);display:block;border-radius:50%;width:200px;height:200px;border:1px solid #84bdc6;} .bocs{background:url(../img/mapbg.png);display:block;border-radius:50%;width:180px;height:180px;border:1px solid #CCCCCC;} .bocms{font-size:11em;color:#90cccc;text-shadow:#FFFFFF 0 2px 0;} .brand-heading { font-family:Arial; font-size: 5em; text-transform:none; color:#66a3ac; padding:0 0 20px 0; } .intro .intro-body .brand-heading { font-size: 46px; margin:0 0 20px 0; } .intro .intro-body .intro-text { margin:0 0 40px 0; font-size: 18px; } @media(min-width:767px) { .intro { height: 100%; padding: 0; } .intro .intro-body .brand-heading { font-size: 80px; margin:0; padding:0; } .intro .intro-body .intro-text { font-size: 24px; } } .page-bg{background: url(../img/bgeolabs.png) no-repeat top fixed;} .sect{height:260px;padding:0;margin:0;} .affix{top:100px !important;} #sidebar{margin-bottom:20px;} #sidebar li a{font-size:1.4em;} #sidebar li a{color:#A5A5A5;} #sidebar li a:hover{background:transparent;} #sidebar>li>a:hover, #sidebar>li>a:focus {text-decoration: none;background-color: transparent !important;} #sidebar > .active > a { font-weight: bold; text-shadow:#FFFFFF 0 1px 0; background-color: #FFFFFF !important; } .active, .active:focus{background:transparent !important;} .list-group-item.active, .list-group-item.active:focus{background:#90cccc !important;} #sidebar li.hd a {visibility:hidden;} #sidebar > .active:hover > a.pg, #sidebar > .active:focus > a.pg { color: #3d7ae1 !important; } #sidebar > .active > a.pg , #sidebar > .active > a.pg > i, #sidebar > .active:hover > a.pg > i, #sidebar > .active:focus > a.pg > i{ color:#3d7ae1; font-weight:500; } #sidebar > .active:hover > a.pc, #sidebar > .active:focus > a.pc { color: #3b76fb !important; } #sidebar > .active > a.pc , #sidebar > .active > a.pc > i, #sidebar > .active:hover > a.pc > i, #sidebar > .active:focus > a.pc > i{ color:#3b76fb; font-weight:500; } #sidebar > .active:hover > a.ocm, #sidebar > .active:focus > a.ocm { color: #90cccc !important; } #sidebar > .active > a.ocm , #sidebar > .active > a.ocm > i, #sidebar > .active:hover > a.ocm > i, #sidebar > .active:focus > a.ocm > i{ color:#90cccc; font-weight:500; } #sidebar > .active:hover > a.mm, { color: #83c849 !important; } #sidebar > .active > a.mm , #sidebar > .active > a.mm > i, #sidebar > .active:hover > a.mm > i, #sidebar > .active:focus > a.mm > i{ color:#83c849; font-weight:500; } #sidebar > .active:hover > a.ms, { color: #33a333 !important; } #sidebar > .active > a.ms , #sidebar > .active > a.ms > i, #sidebar > .active:hover > a.ms > i, #sidebar > .active:focus > a.ms > i{ color:#33a333; font-weight:500; } #sidebar > .active:hover > a.zoo, { color: #fda443 !important; } #sidebar > .active > a.zoo , #sidebar > .active > a.zoo > i, #sidebar > .active:hover > a.zoo > i, #sidebar > .active:focus > a.zoo > i{ color:#fda443; font-weight:500; } #sidebar > .active:hover > a.ol, { color: #70b3be !important; } #sidebar > .active > a.ol , #sidebar > .active > a.ol > i, #sidebar > .active:hover > a.ol > i, #sidebar > .active:focus > a.ol > i{ color:#70b3be; font-weight:500; } #sidebar > .active:hover > a.osm, { color: #70b3be !important; } #sidebar > .active > a.osm , #sidebar > .active > a.osm > i, #sidebar > .active:hover > a.osm > i, #sidebar > .active:focus > a.osm > i{ color:#a882db; font-weight:500; } #sidebar > .active:hover > a.serv, { color: #7fccd7 !important; } #sidebar > .active > a.serv , #sidebar > .active > a.serv > i, #sidebar > .active:hover > a.serv > i, #sidebar > .active:focus > a.serv > i{ color:#7fccd7; font-weight:500; } .sidebar .nav .nav > li > a { padding:7px 0 7px 0; text-indent: 30px; font-size: 70%; width:100%; } #leftCol .nav>li>a, #leftCol .nav>li>a.active { position: relative; display: block; padding: 5px 15px !important; background:transparent !important; } .sidenav{ width:100%; } .affix-top,.affix{ position: static; } @media (min-width: 979px) { #sidebar.affix-top { position: static; margin-top:10px; width:228px; } #sidebar.affix { position: fixed; top:70px; width:228px; } } #sidebar h4{margin:0 0 10px 0;} #sidebar ul li a{color:#a5a5a5;} #sidebar li.active { font-weight:bold; } .nav-tabs li a { font-size: 16px !important; padding:10px 8px !important;} .tab-content { padding: 3px 0px 0px 8px; background: transparent !important; margin-left: 1px; } .well-sml{margin:10px !important;padding:10px !important;font-size:1em;} .trs{background:rgba(255,255,255,.4) !important;} .well{margin-bottom:10px !important;} .well-lg{padding:15px !important;} .well-mm{ background: rgba(237, 248, 239, 0.4); border:1px solid #edf8ef; } .well-mm p{margin-bottom:0;} .well-mm p a{color:#83c849;text-shadow: 0 1px 0 #FFFFFF; } .well-pcs{ background: rgba(234, 247, 255, 0.4); border:1px solid #edf8ef; } .well-pcs p{margin-bottom:0;} .well-pcs p a{color:#3b76fb;text-shadow: 0 1px 0 #FFFFFF; } .well-zoo{ background: rgba(252,217,180, 0.4); border:1px solid #fcd9b4; } .well-zoo p{margin-bottom:0;} .well-zoo p a{color:#fda443;text-shadow: 0 1px 0 #FFFFFF; } .well-zl{ background: rgb(255,255,255); background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMxJSIgc3RvcC1jb2xvcj0iI2ZlZmNlYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmYxOTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(254,252,234,1) 31%, rgba(255,241,150,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(31%,rgba(254,252,234,1)), color-stop(100%,rgba(255,241,150,1))); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(254,252,234,1) 31%,rgba(255,241,150,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(254,252,234,1) 31%,rgba(255,241,150,1) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(254,252,234,1) 31%,rgba(255,241,150,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(254,252,234,1) 31%,rgba(255,241,150,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fff196',GradientType=0 ); border-radius:6px; padding:10px 10px 0 10px; border:1px solid #fff196; margin-bottom:30px;} .well-zl h2{margin:0;padding:0;color:#6c4605;text-shadow: rgba(255,241,150,.7) 0 2px 0;font-size:6em;} .ac{margin:0 auto;} .zj{position:relative;bottom:0;} .zg{line-height:1em !important;margin:0;padding:0;font-size:3em;} .zg a{color:#fbc631;text-shadow:#FFFFFF 0 1px 0 !important;} .zg img.ac2{display:inline;} .well-mml{ background:url(../img/mapbg.png),linear-gradient(top, rgba(255,255,255,0.01) 0%,rgba(255,255,255,0.23) 22%, rgba(169,219,122,1) 100%); background: url(../img/mapbg.png), -moz-linear-gradient(top, rgba(255,255,255,0.01) 0%, rgba(255,255,255,0.23) 22%, rgba(169,219,122,1) 100%); /* FF3.6+ */ background: url(../img/mapbg.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.01)), color-stop(22%,rgba(255,255,255,0.23)), color-stop(100%,rgba(169,219,122,1))); /* Chrome,Safari4+ */ background: url(../img/mapbg.png), -webkit-linear-gradient(top, rgba(255,255,255,0.01) 0%,rgba(255,255,255,0.23) 22%,rgba(169,219,122,1) 100%); /* Chrome10+,Safari5.1+ */ background: url(../img/mapbg.png), -o-linear-gradient(top, rgba(255,255,255,0.01) 0%,rgba(255,255,255,0.23) 22%,rgba(169,219,122,1) 100%); /* Opera 11.10+ */ background: url(../img/mapbg.png), -ms-linear-gradient(top, rgba(255,255,255,0.01) 0%,rgba(255,255,255,0.23) 22%,rgba(169,219,122,1) 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#a9db7a',GradientType=0 ); /* IE6-8 */ border-radius:6px; padding:10px 10px 0 10px; border:1px solid #a9db7a; } .well-msl{ background:url(../img/mapbg.png),linear-gradient(top, rgba(255,255,255,0.01) 0%,rgba(255,255,255,0.23) 22%, rgba(97,199,126,1) 100%); background: url(../img/mapbg.png), -moz-linear-gradient(top, rgba(255,255,255,0.01) 0%, rgba(255,255,255,0.23) 22%, rgba(97,199,126,1) 100%); /* FF3.6+ */ background: url(../img/mapbg.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.01)), color-stop(22%,rgba(255,255,255,0.23)), color-stop(100%,rgba(97,199,126,1))); /* Chrome,Safari4+ */ background: url(../img/mapbg.png), -webkit-linear-gradient(top, rgba(255,255,255,0.01) 0%,rgba(255,255,255,0.23) 22%,rgba(97,199,126,1) 100%); /* Chrome10+,Safari5.1+ */ background: url(../img/mapbg.png), -o-linear-gradient(top, rgba(255,255,255,0.01) 0%,rgba(255,255,255,0.23) 22%,rgba(97,199,126,1) 100%); /* Opera 11.10+ */ background: url(../img/mapbg.png), -ms-linear-gradient(top, rgba(255,255,255,0.01) 0%,rgba(255,255,255,0.23) 22%,rgba(97,199,126,1) 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#a9db7a',GradientType=0 ); /* IE6-8 */ border-radius:6px; padding:10px 10px 0 10px; border:1px solid #a9db7a; } .well-pgl{ background:url(../img/mapbg.png),linear-gradient(top, rgba(255,255,255,0.01) 0%,rgba(255,255,255,0.23) 22%, rgba(134,173,242,1) 100%); background: url(../img/mapbg.png), -moz-linear-gradient(top, rgba(255,255,255,0.01) 0%, rgba(255,255,255,0.23) 22%, rgba(134,173,242,1) 100%); /* FF3.6+ */ background: url(../img/mapbg.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.01)), color-stop(22%,rgba(255,255,255,0.23)), color-stop(100%,rgba(134,173,242,1))); /* Chrome,Safari4+ */ background: url(../img/mapbg.png), -webkit-linear-gradient(top, rgba(255,255,255,0.01) 0%,rgba(255,255,255,0.23) 22%,rgba(134,173,242,1) 100%); /* Chrome10+,Safari5.1+ */ background: url(../img/mapbg.png), -o-linear-gradient(top, rgba(255,255,255,0.01) 0%,rgba(255,255,255,0.23) 22%,rgba(134,173,242,1) 100%); /* Opera 11.10+ */ background: url(../img/mapbg.png), -ms-linear-gradient(top, rgba(255,255,255,0.01) 0%,rgba(255,255,255,0.23) 22%,rgba(134,173,242,1) 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#537fd1',GradientType=0 ); /* IE6-8 */ border-radius:6px; padding:10px 10px 0 10px; border:1px solid #9fc0fd; } .well-oll{ background: url(../img/mapbg.png), -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(146,204,202,1) 100%); /* FF3.6+ */ background: url(../img/mapbg.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(146,204,202,1))); /* Chrome,Safari4+ */ background: url(../img/mapbg.png), -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(146,204,202,1) 100%); /* Chrome10+,Safari5.1+ */ background: url(../img/mapbg.png), -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(146,204,202,1) 100%); /* Opera 11.10+ */ background: url(../img/mapbg.png), -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(146,204,202,1) 100%); /* IE10+ */ background: url(../img/mapbg.png), linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(146,204,202,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#92ccca',GradientType=0 ); /* IE6-9 */ border-radius:6px; padding:0 10px 0 10px; border:1px solid #92ccca; } .well-osml{ background: url(../img/osml.png); background-size:cover; border-radius:6px; padding:10px 10px 0 10px; border:1px solid #CCCCCC; height:270px; margin-bottom:20px; } .phr{font-size:1.1em;margin:0;} [class^="icon-pg-"], [class*=" icon-pg-"] { font-family: 'pgFont', sans-serif; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; } .icon-pg-logo:before{content: "\0065"; } [class^="icon-pc-"], [class*=" icon-pc-"] { font-family: 'pcFont', sans-serif; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; } .icon-pc-logo:before{content: "\e600";} [class^="icon-mm-"], [class*=" icon-mm-"] { font-family: 'mmFont', sans-serif; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; } .icon-mm-logo:before{content: "\e602";} [class^="icon-ck-"], [class*=" icon-ck-"] { font-family: 'ckFont', sans-serif; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; } .icon-ck-logo:before{content: "\e601";} [class^="icon-zoo-"], [class*=" icon-zoo-"] { font-family: 'zooFont', sans-serif; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; } .icon-zoo-logo:before{content: "\e603";} [class^="icon-ms-"], [class*=" icon-ms-"] { font-family: 'msFont', sans-serif; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; } .icon-ms-logo:before{content: "\e604";} [class^="icon-gd-"], [class*=" icon-gd-"] { font-family: 'gdFont', sans-serif; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; } .icon-gd-logo:before{content: "\e605";} [class^="icon-gr-"], [class*=" icon-gr-"] { font-family: 'grFont', sans-serif; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; } .icon-gr-logo:before{content: "\e606";} [class^="icon-ol-"], [class*=" icon-ol-"] { font-family: 'olFont', sans-serif; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; } .icon-ol-logo:before{content: "\e607";} [class^="icon-lo-"], [class*=" icon-lo-"] { font-family: 'loFont', sans-serif; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; } .icon-lo-logo:before{content: "\e608";} [class^="icon-osm-"], [class*=" icon-osm-"] { font-family: 'osmFont', sans-serif; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; } .icon-osm-logo:before{content: "\e609";} [class^="icon-ops"], [class*=" icon-ops"] { font-family: 'osIcons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-ops-gentoo:before { content: "\e500"; } .icon-ops-centos:before { content: "\e501"; } .icon-ops-ubuntu:before { content: "\e502"; } .icon-ops-debian:before { content: "\e503"; } .icon-ops-slackware:before { content: "\e504"; } .icon-ops-windows:before { content: "\e505"; } .tech-section, .serv-section { padding: 80px 0 30px 0; } .mod{color:#F5F5F5;} .mmm, .mmm a{color:#83c849;} .mmg{color:#83c849;text-shadow: 0 1px 0 #FFFFFF;font-size:2.4em;} .mmw{color:#FFFFFF;} .zzoo{color:#fda443;} .oct{ height:320px;width:320px;position:relative;top:120px;margin:0 auto;} #abge{ width:240px; height:240px; position:relative; border-radius:50%; overflow:hidden; margin:0 auto 0 auto !important; z-index:3; background:url(../img/blabs.png); border:1px solid #afdada; } #gears { width:240px; height:240px; position:relative; border-radius:50%; overflow:hidden; margin:0 auto 0 auto; z-index:3; border:1px solid #CCCCCC; } #gears:after { content: ""; background: url(../img/mapbg.png); opacity: 0.4; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; } .gear1 { -webkit-animation: spin 4s linear infinite; -moz-animation: spin 4s linear infinite; animation: spin 4s linear infinite; position: relative; width: 200px; left: -35px; top: -40px; } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { transform: rotate(360deg); } } .gear2 { position: absolute; top: 46px; left: 18px; -webkit-animation: spiny 2.4s linear infinite; animation: spiny 2.4s linear infinite; width: 230px; } @-webkit-keyframes spiny { 100% { -webkit-transform: rotate(-360deg); } } @keyframes spiny { 100% { transform: rotate(-360deg); } } .ogc_wrap { position:relative; margin:0 auto 0 auto; width:90px; display:block; min-height:80px; } .ogc_ball { background: #FFFFFF; height: 70px; width: 70px; border-radius: 50%; border: 1px solid #e8e7e7; position: absolute; } .wps_ball { background: #90cccb; height: 80px; width: 80px; border-radius: 50%; border: 1px solid #e8e7e7; } .wps_ball span{line-height:70px;font-weight:normal;font-size:1.6em;color:#FFFFFF;text-shadow:#A5A5A5 0 1px 0;} .ogc_ball span{line-height:70px;font-weight:normal;font-size:1.1em;color:#A5A5A5;text-shadow:#FFFFFF 0 1px 0;} .data0{background:url(../img/data0.png)} .data1{background:url(../img/data1.png)} .data2{background:url(../img/data2.png)} .data3{background:url(../img/data3.png)} .data4{background:url(../img/data4.png)} .data5{background:url(../img/data5.png)} .data6{background:url(../img/data6.png)} .data7{background:url(../img/data7.png)} keyframes spin { from { transform: rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); } to { transform: rotate(360deg); -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); } } /* Loading animation container */ .loading { position:absolute; border:1px solid red; top: 10%; left: 50%; width: 200px; height: 200px; margin: -14px 0 0 -14px; z-index:10000;} /* Spinning circle (inner circle) */ .loading .maskedCircle { width: 160px; height: 160px; border-radius: 12px; border: 3px solid blue; } /* Spinning circle mask */ .loading .mask { width: 30px; height: 30px; overflow: hidden; } /* Spinner */ .loading .spinner { position: absolute; left: 1px; top: 1px; width: 160px; height: 160px; animation: spin 1s infinite linear; } .ogc_wrap div:nth-of-type(2) { top: 10px; left: -120px; } .ogc_wrap div:nth-of-type(2):after { content: ""; display: block; border-bottom: 1px solid #e8e7e7; position: absolute; width: 50px; right: -50px; top: 50%; } .ogc_wrap div:nth-of-type(3) { top: 10px; right: -110px; } .ogc_wrap div:nth-of-type(3):after { content: ""; display: block; border-bottom: 1px solid #e8e7e7; position: absolute; width: 50px; left: -52px; top: 50%; } .ogc_wrap div:nth-of-type(4) { right: 10px; bottom: -122px; } .ogc_wrap div:nth-of-type(4):after { content: ""; display: block; border-left: 1px solid #e8e7e7; position: absolute; height: 50px; left: 50%; top: -52px; } .ogc_wrap div:nth-of-type(5) { right: 10px; bottom: 130px; } .ogc_wrap div:nth-of-type(5):after { content: ""; display: block; border-left: 1px solid #e8e7e7; position: absolute; height: 50px; left: 50%; top: 70px; } .ogc_wrap div:nth-of-type(6) { right: 97px; bottom: 91px; } .ogc_wrap div:nth-of-type(6):after { content: ""; display: block; border-left: 1px solid #e8e7e7; position: absolute; height: 43px; right: -10px; top: 52px; -ms-transform: rotate(-45deg); /* IE 9 */ -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */ transform: rotate(-45deg); } .ogc_wrap div:nth-of-type(7) { left: 98px; bottom: 88px; } .ogc_wrap div:nth-of-type(7):after { content: ""; display: block; border-left: 1px solid #e8e7e7; position: absolute; height: 50px; left: -7px; top: 55px; -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */ transform: rotate(45deg); } .ogc_wrap div:nth-of-type(8) { left: 94px; top: 96px; } .ogc_wrap div:nth-of-type(8):after { content: ""; display: block; border-left: 1px solid #e8e7e7; position: absolute; height: 50px; left: -7px; bottom: 55px; -ms-transform: rotate(-45deg); /* IE 9 */ -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */ transform: rotate(-45deg); } .ogc_wrap div:nth-of-type(9) { right:92px; top: 92px; } .ogc_wrap div:nth-of-type(9):after { content: ""; display: block; border-left: 1px solid #e8e7e7; position: absolute; height: 43px; right: -4px; top: -26px; -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */ transform: rotate(45deg); } .circle-icon { width: 100px; height: 100px; line-height: 125px; background-color: #FFFFFF; border-radius: 100%; border:1px solid #e8e7e7; text-align: center; vertical-align: middle; margin: 0 auto 20px auto; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } p.sdesc{max-width:70%;display:block;font-size:1em;color:#A5A5A5;margin:10px auto 30px auto;} .cube, .half1, .half2, .contcube { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .contcube { position: relative; width: 170px; height: 170px; margin: 0 auto 30px auto; -webkit-perspective: 300px; -moz-perspective: 300px; perspective: 300px; } .cube { width: 200px; height: 200px; } .cube { -webkit-animation: cube 10s forwards infinite; -moz-animation: cube 10s forwards infinite; animation: cube 10s forwards infinite; -webkit-transform-origin: center 100px; -moz-transform-origin: center 100px; -ms-transform-origin: center 100px; -o-transform-origin: center 100px; transform-origin: center 100px; } .half1 { height: 80px; top: 0; position: absolute; -webkit-animation: half-fold 10s forwards infinite; -moz-animation: half-fold 10s forwards infinite; animation: half-fold 10s forwards infinite; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; } .side { width:40px !important; height: 40px !important; background: white; position: absolute; border:1px solid #A5A5A5; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .s1 { top: 0; left: 40px; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: s1ani 10s forwards infinite; -moz-animation: s1ani 10s forwards infinite; animation: s1ani 10s forwards infinite; } .s2 { top: 40px; left: 80px; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-animation: s2ani 10s forwards infinite; -moz-animation: s2ani 10s forwards infinite; animation: s2ani 10s forwards infinite; } .s3 { top: 80px; left: 80px; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-animation: s3ani 10s forwards infinite; -moz-animation: s3ani 10s forwards infinite; animation: s3ani 10s forwards infinite; } .s4 { top: 120px; left: 80px; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-animation: s4ani 10s forwards infinite; -moz-animation: s4ani 10s forwards infinite; animation: s4ani 10s forwards infinite; } .s5 { left: 40px; top: 40px; -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: s5ani 10s forwards infinite; -moz-animation: s5ani 10s forwards infinite; animation: s5ani 10s forwards infinite; } .s6 { left: 120px; top: 40px; -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: s6ani 10s forwards infinite; -moz-animation: s6ani 10s forwards infinite; animation: s6ani 10s forwards infinite; } @-webkit-keyframes s1ani { 0% { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } 10% { opacity: 1; } 20% { opacity: 1; } 30% { opacity: 1; } 40% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 50% { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); } 60%; 70%; 80% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 1; } } @-moz-keyframes s1ani { 0% { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } 10% { opacity: 1; } 20% { opacity: 1; } 30% { opacity: 1; } 40% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 50% { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); } 60%; 70%; 80% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 1; } } @-o-keyframes s1ani { 0% { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } 10% { opacity: 1; } 20% { opacity: 1; } 30% { opacity: 1; } 40% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 50% { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); } 60%; 70%; 80% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 1; } } @keyframes s1ani { 0% { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } 10% { opacity: 1; } 20% { opacity: 1; } 30% { opacity: 1; } 40% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 50% { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); } 60%; 70%; 80% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 1; } } @-webkit-keyframes s2ani { 0% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 10% { opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 20% { opacity: 1; } 30% { opacity: 1; } 40% { opacity: 1; } 50% { opacity: 1; } 60% { opacity: 1; } 70% { opacity: 1; } 80% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 1; } } @-moz-keyframes s2ani { 0% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 10% { opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 20% { opacity: 1; } 30% { opacity: 1; } 40% { opacity: 1; } 50% { opacity: 1; } 60% { opacity: 1; } 70% { opacity: 1; } 80% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 1; } } @-o-keyframes s2ani { 0% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 10% { opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 20% { opacity: 1; } 30% { opacity: 1; } 40% { opacity: 1; } 50% { opacity: 1; } 60% { opacity: 1; } 70% { opacity: 1; } 80% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 1; } } @keyframes s2ani { 0% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 10% { opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 20% { opacity: 1; } 30% { opacity: 1; } 40% { opacity: 1; } 50% { opacity: 1; } 60% { opacity: 1; } 70% { opacity: 1; } 80% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 1; } } @-webkit-keyframes s3ani { 0% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 10% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 20% { opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 30% { opacity: 1; } 40% { opacity: 1; } 50% { opacity: 1; } 60% { opacity: 1; } 70% { opacity: 1; } 80% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 1; } } @-moz-keyframes s3ani { 0% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 10% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 20% { opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 30% { opacity: 1; } 40% { opacity: 1; } 50% { opacity: 1; } 60% { opacity: 1; } 70% { opacity: 1; } 80% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 1; } } @-o-keyframes s3ani { 0% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 10% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 20% { opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 30% { opacity: 1; } 40% { opacity: 1; } 50% { opacity: 1; } 60% { opacity: 1; } 70% { opacity: 1; } 80% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 1; } } @keyframes s3ani { 0% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 10% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 20% { opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 30% { opacity: 1; } 40% { opacity: 1; } 50% { opacity: 1; } 60% { opacity: 1; } 70% { opacity: 1; } 80% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 1; } } @-webkit-keyframes s4ani { 0% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 10% { opacity: 0; } 20% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 30% { opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 40% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 50% { -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); opacity: .5; } 60% { opacity: .5; } 70% { opacity: .5; } 80% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 1; } } @-moz-keyframes s4ani { 0% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 10% { opacity: 0; } 20% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 30% { opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 40% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 50% { -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); opacity: .5; } 60% { opacity: .5; } 70% { opacity: .5; } 80% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 1; } } @-o-keyframes s4ani { 0% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 10% { opacity: 0; } 20% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 30% { opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 40% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 50% { -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); opacity: .5; } 60% { opacity: .5; } 70% { opacity: .5; } 80% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 1; } } @keyframes s4ani { 0% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 10% { opacity: 0; } 20% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 30% { opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 40% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 50% { -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); opacity: .5; } 60% { opacity: .5; } 70% { opacity: .5; } 80% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 1; } } @-webkit-keyframes s5ani { 0% { opacity: 0; -webkit-transform: rotateY(-179deg); -moz-transform: rotateY(-179deg); -ms-transform: rotateY(-179deg); -o-transform: rotateY(-179deg); transform: rotateY(-179deg); } 10% { opacity: 0; -webkit-transform: rotateY(-179deg); -moz-transform: rotateY(-179deg); -ms-transform: rotateY(-179deg); -o-transform: rotateY(-179deg); transform: rotateY(-179deg); } 20% { opacity: 1; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 30% { opacity: 1; } 40% { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); } 60% { opacity: 1; } 70% { opacity: 1; } 80% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 1; } } @-moz-keyframes s5ani { 0% { opacity: 0; -webkit-transform: rotateY(-179deg); -moz-transform: rotateY(-179deg); -ms-transform: rotateY(-179deg); -o-transform: rotateY(-179deg); transform: rotateY(-179deg); } 10% { opacity: 0; -webkit-transform: rotateY(-179deg); -moz-transform: rotateY(-179deg); -ms-transform: rotateY(-179deg); -o-transform: rotateY(-179deg); transform: rotateY(-179deg); } 20% { opacity: 1; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 30% { opacity: 1; } 40% { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); } 60% { opacity: 1; } 70% { opacity: 1; } 80% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 1; } } @-o-keyframes s5ani { 0% { opacity: 0; -webkit-transform: rotateY(-179deg); -moz-transform: rotateY(-179deg); -ms-transform: rotateY(-179deg); -o-transform: rotateY(-179deg); transform: rotateY(-179deg); } 10% { opacity: 0; -webkit-transform: rotateY(-179deg); -moz-transform: rotateY(-179deg); -ms-transform: rotateY(-179deg); -o-transform: rotateY(-179deg); transform: rotateY(-179deg); } 20% { opacity: 1; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 30% { opacity: 1; } 40% { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); } 60% { opacity: 1; } 70% { opacity: 1; } 80% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 1; } } @keyframes s5ani { 0% { opacity: 0; -webkit-transform: rotateY(-179deg); -moz-transform: rotateY(-179deg); -ms-transform: rotateY(-179deg); -o-transform: rotateY(-179deg); transform: rotateY(-179deg); } 10% { opacity: 0; -webkit-transform: rotateY(-179deg); -moz-transform: rotateY(-179deg); -ms-transform: rotateY(-179deg); -o-transform: rotateY(-179deg); transform: rotateY(-179deg); } 20% { opacity: 1; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 30% { opacity: 1; } 40% { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); } 60% { opacity: 1; } 70% { opacity: 1; } 80% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 1; } } @-webkit-keyframes s6ani { 0% { opacity: 0; -webkit-transform: rotateY(179deg); -moz-transform: rotateY(179deg); -ms-transform: rotateY(179deg); -o-transform: rotateY(179deg); transform: rotateY(179deg); } 10% { opacity: 0; } 20% { opacity: 0; -webkit-transform: rotateY(179deg); -moz-transform: rotateY(179deg); -ms-transform: rotateY(179deg); -o-transform: rotateY(179deg); transform: rotateY(179deg); } 30% { opacity: 1; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 40% { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); } 60% { opacity: 1; } 70% { opacity: 1; } 80% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 1; } } @-moz-keyframes s6ani { 0% { opacity: 0; -webkit-transform: rotateY(179deg); -moz-transform: rotateY(179deg); -ms-transform: rotateY(179deg); -o-transform: rotateY(179deg); transform: rotateY(179deg); } 10% { opacity: 0; } 20% { opacity: 0; -webkit-transform: rotateY(179deg); -moz-transform: rotateY(179deg); -ms-transform: rotateY(179deg); -o-transform: rotateY(179deg); transform: rotateY(179deg); } 30% { opacity: 1; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 40% { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); } 60% { opacity: 1; } 70% { opacity: 1; } 80% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 1; } } @-o-keyframes s6ani { 0% { opacity: 0; -webkit-transform: rotateY(179deg); -moz-transform: rotateY(179deg); -ms-transform: rotateY(179deg); -o-transform: rotateY(179deg); transform: rotateY(179deg); } 10% { opacity: 0; } 20% { opacity: 0; -webkit-transform: rotateY(179deg); -moz-transform: rotateY(179deg); -ms-transform: rotateY(179deg); -o-transform: rotateY(179deg); transform: rotateY(179deg); } 30% { opacity: 1; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 40% { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); } 60% { opacity: 1; } 70% { opacity: 1; } 80% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 1; } } @keyframes s6ani { 0% { opacity: 0; -webkit-transform: rotateY(179deg); -moz-transform: rotateY(179deg); -ms-transform: rotateY(179deg); -o-transform: rotateY(179deg); transform: rotateY(179deg); } 10% { opacity: 0; } 20% { opacity: 0; -webkit-transform: rotateY(179deg); -moz-transform: rotateY(179deg); -ms-transform: rotateY(179deg); -o-transform: rotateY(179deg); transform: rotateY(179deg); } 30% { opacity: 1; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 40% { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); } 60% { opacity: 1; } 70% { opacity: 1; } 80% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 1; } } .contcube { position: relative; width: 170px; height: 170px; margin: 0 auto ; -webkit-perspective: 300px; -moz-perspective: 300px; perspective: 300px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .cube { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .side { width: 40px; height: 40px; background: white; position: absolute; } .s1 { top: 0; left: 80px; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: s1ani 10s forwards infinite; -moz-animation: s1ani 10s forwards infinite; animation: s1ani 10s forwards infinite; } .s2 { top: 40px; left: 80px; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-animation: s2ani 10s forwards infinite; -moz-animation: s2ani 10s forwards infinite; animation: s2ani 10s forwards infinite; } .s3 { top: 80px; left: 80px; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-animation: s3ani 10s forwards infinite; -moz-animation: s3ani 10s forwards infinite; animation: s3ani 10s forwards infinite; } .s4 { top: 120px; left: 80px; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-animation: s4ani 10s forwards infinite; -moz-animation: s4ani 10s forwards infinite; animation: s4ani 10s forwards infinite; } .s5 { left: 40px; top: 40px; -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: s5ani 10s forwards infinite; -moz-animation: s5ani 10s forwards infinite; animation: s5ani 10s forwards infinite; } .s6 { left: 120px; top: 80px; -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: s6ani 10s forwards infinite; -moz-animation: s6ani 10s forwards infinite; animation: s6ani 10s forwards infinite; } @-webkit-keyframes cube { 0% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 30% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 40% { -webkit-transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg); -moz-transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg); -ms-transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg); -o-transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg); transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg); /* CUBE ROTATES BACK */ } 60% { -webkit-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg); -moz-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg); -ms-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg); -o-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg); transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg); /* ARMS FOLD UP */ } 65% { -webkit-transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); -moz-transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); -ms-transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); -o-transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); /* SPIN REVEALS CYAN RIGHT, RED LEFT (s2) */ } 70% { -webkit-transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); -moz-transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); -ms-transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); -o-transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); } 75% { -webkit-transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); -moz-transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); -ms-transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); -o-transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); /* SPIN REVEALS MAGENTA RIGHT, YELLOW LEFT (s4) */ } 80% { -webkit-transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); -moz-transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); -ms-transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); -o-transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); } 90% { -webkit-transform: rotateX(0deg) rotate(0deg) rotateZ(0deg); -moz-transform: rotateX(0deg) rotate(0deg) rotateZ(0deg); -ms-transform: rotateX(0deg) rotate(0deg) rotateZ(0deg); -o-transform: rotateX(0deg) rotate(0deg) rotateZ(0deg); transform: rotateX(0deg) rotate(0deg) rotateZ(0deg); /* FADE TO BLACK */ } } @-moz-keyframes cube { 0% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 30% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 40% { -webkit-transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg); -moz-transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg); -ms-transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg); -o-transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg); transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg); /* CUBE ROTATES BACK */ } 60% { -webkit-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg); -moz-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg); -ms-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg); -o-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg); transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg); /* ARMS FOLD UP */ } 65% { -webkit-transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); -moz-transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); -ms-transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); -o-transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); /* SPIN REVEALS CYAN RIGHT, RED LEFT (s2) */ } 70% { -webkit-transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); -moz-transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); -ms-transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); -o-transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); } 75% { -webkit-transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); -moz-transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); -ms-transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); -o-transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); /* SPIN REVEALS MAGENTA RIGHT, YELLOW LEFT (s4) */ } 80% { -webkit-transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); -moz-transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); -ms-transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); -o-transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); } 90% { -webkit-transform: rotateX(0deg) rotate(0deg) rotateZ(0deg); -moz-transform: rotateX(0deg) rotate(0deg) rotateZ(0deg); -ms-transform: rotateX(0deg) rotate(0deg) rotateZ(0deg); -o-transform: rotateX(0deg) rotate(0deg) rotateZ(0deg); transform: rotateX(0deg) rotate(0deg) rotateZ(0deg); /* FADE TO BLACK */ } } @-o-keyframes cube { 0% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 30% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 40% { -webkit-transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg); -moz-transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg); -ms-transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg); -o-transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg); transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg); /* CUBE ROTATES BACK */ } 60% { -webkit-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg); -moz-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg); -ms-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg); -o-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg); transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg); /* ARMS FOLD UP */ } 65% { -webkit-transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); -moz-transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); -ms-transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); -o-transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); /* SPIN REVEALS CYAN RIGHT, RED LEFT (s2) */ } 70% { -webkit-transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); -moz-transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); -ms-transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); -o-transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); } 75% { -webkit-transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); -moz-transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); -ms-transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); -o-transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); /* SPIN REVEALS MAGENTA RIGHT, YELLOW LEFT (s4) */ } 80% { -webkit-transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); -moz-transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); -ms-transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); -o-transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); } 90% { -webkit-transform: rotateX(0deg) rotate(0deg) rotateZ(0deg); -moz-transform: rotateX(0deg) rotate(0deg) rotateZ(0deg); -ms-transform: rotateX(0deg) rotate(0deg) rotateZ(0deg); -o-transform: rotateX(0deg) rotate(0deg) rotateZ(0deg); transform: rotateX(0deg) rotate(0deg) rotateZ(0deg); /* FADE TO BLACK */ } } @keyframes cube { 0% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 30% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 40% { -webkit-transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg); -moz-transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg); -ms-transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg); -o-transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg); transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg); /* CUBE ROTATES BACK */ } 60% { -webkit-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg); -moz-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg); -ms-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg); -o-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg); transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg); /* ARMS FOLD UP */ } 65% { -webkit-transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); -moz-transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); -ms-transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); -o-transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); /* SPIN REVEALS CYAN RIGHT, RED LEFT (s2) */ } 70% { -webkit-transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); -moz-transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); -ms-transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); -o-transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); transform: rotateX(60deg) rotate(45deg) rotateZ(180deg); } 75% { -webkit-transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); -moz-transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); -ms-transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); -o-transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); /* SPIN REVEALS MAGENTA RIGHT, YELLOW LEFT (s4) */ } 80% { -webkit-transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); -moz-transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); -ms-transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); -o-transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); transform: rotateX(60deg) rotate(45deg) rotateZ(360deg); } 90% { -webkit-transform: rotateX(0deg) rotate(0deg) rotateZ(0deg); -moz-transform: rotateX(0deg) rotate(0deg) rotateZ(0deg); -ms-transform: rotateX(0deg) rotate(0deg) rotateZ(0deg); -o-transform: rotateX(0deg) rotate(0deg) rotateZ(0deg); transform: rotateX(0deg) rotate(0deg) rotateZ(0deg); /* FADE TO BLACK */ } } @-webkit-keyframes s1ani { 0% { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); background: white; } 40% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); background: white; } 50% { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); background: white; } 90% { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); } } @-moz-keyframes s1ani { 0% { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); background: white; } 40% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); background: white; } 50% { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); background: white; } 90% { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); } } @-o-keyframes s1ani { 0% { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); background: white; } 40% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); background: white; } 50% { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); background: white; } 90% { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); } } @keyframes s1ani { 0% { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); background: white; } 40% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); background: white; } 50% { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); background: white; } 90% { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); } } @-webkit-keyframes s2ani { 0% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 10% { opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 40% { background: white; } 45% { background: #b4b4b4; } 65% { opacity: 1; background: #b4b4b4; /* DARKEST VISIBLE */ } 80% { background: #b4b4b4; } 90% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes s2ani { 0% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 10% { opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 40% { background: white; } 45% { background: #b4b4b4; } 65% { opacity: 1; background: #b4b4b4; /* DARKEST VISIBLE */ } 80% { background: #b4b4b4; } 90% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes s2ani { 0% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 10% { opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 40% { background: white; } 45% { background: #b4b4b4; } 65% { opacity: 1; background: #b4b4b4; /* DARKEST VISIBLE */ } 80% { background: #b4b4b4; } 90% { opacity: 1; } 100% { opacity: 0; } } @keyframes s2ani { 0% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 10% { opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 40% { background: white; } 45% { background: #b4b4b4; } 65% { opacity: 1; background: #b4b4b4; /* DARKEST VISIBLE */ } 80% { background: #b4b4b4; } 90% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes s3ani { 0% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 10% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 20% { opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 40% { background: white; } 45% { background: #969696; /* DARKEST VISIBLE */ } 90% { opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 100% { opacity: 0; } } @-moz-keyframes s3ani { 0% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 10% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 20% { opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 40% { background: white; } 45% { background: #969696; /* DARKEST VISIBLE */ } 90% { opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 100% { opacity: 0; } } @-o-keyframes s3ani { 0% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 10% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 20% { opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 40% { background: white; } 45% { background: #969696; /* DARKEST VISIBLE */ } 90% { opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 100% { opacity: 0; } } @keyframes s3ani { 0% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 10% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 20% { opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 40% { background: white; } 45% { background: #969696; /* DARKEST VISIBLE */ } 90% { opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 100% { opacity: 0; } } @-webkit-keyframes s4ani { 0% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 10% { opacity: 0; } 20% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 30% { opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 40% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); background: white; } 50% { -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); background: #b4b4b4; } 80% { background: #b4b4b4; } 90% { opacity: 1; -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); } 100% { opacity: 0; } } @-moz-keyframes s4ani { 0% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 10% { opacity: 0; } 20% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 30% { opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 40% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); background: white; } 50% { -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); background: #b4b4b4; } 80% { background: #b4b4b4; } 90% { opacity: 1; -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); } 100% { opacity: 0; } } @-o-keyframes s4ani { 0% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 10% { opacity: 0; } 20% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 30% { opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 40% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); background: white; } 50% { -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); background: #b4b4b4; } 80% { background: #b4b4b4; } 90% { opacity: 1; -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); } 100% { opacity: 0; } } @keyframes s4ani { 0% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 10% { opacity: 0; } 20% { opacity: 0; -webkit-transform: rotateX(-179deg); -moz-transform: rotateX(-179deg); -ms-transform: rotateX(-179deg); -o-transform: rotateX(-179deg); transform: rotateX(-179deg); } 30% { opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 40% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); background: white; } 50% { -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); background: #b4b4b4; } 80% { background: #b4b4b4; } 90% { opacity: 1; -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); } 100% { opacity: 0; } } @-webkit-keyframes s5ani { 0% { opacity: 0; -webkit-transform: rotateY(-179deg); -moz-transform: rotateY(-179deg); -ms-transform: rotateY(-179deg); -o-transform: rotateY(-179deg); transform: rotateY(-179deg); } 10% { opacity: 0; -webkit-transform: rotateY(-179deg); -moz-transform: rotateY(-179deg); -ms-transform: rotateY(-179deg); -o-transform: rotateY(-179deg); transform: rotateY(-179deg); } 20% { opacity: 1; background: white; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 40% { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); } 55% { background: white; } 60% { background: #c8c8c8; } 90% { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes s5ani { 0% { opacity: 0; -webkit-transform: rotateY(-179deg); -moz-transform: rotateY(-179deg); -ms-transform: rotateY(-179deg); -o-transform: rotateY(-179deg); transform: rotateY(-179deg); } 10% { opacity: 0; -webkit-transform: rotateY(-179deg); -moz-transform: rotateY(-179deg); -ms-transform: rotateY(-179deg); -o-transform: rotateY(-179deg); transform: rotateY(-179deg); } 20% { opacity: 1; background: white; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 40% { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); } 55% { background: white; } 60% { background: #c8c8c8; } 90% { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); opacity: 1; } 100% { opacity: 0; } } @-o-keyframes s5ani { 0% { opacity: 0; -webkit-transform: rotateY(-179deg); -moz-transform: rotateY(-179deg); -ms-transform: rotateY(-179deg); -o-transform: rotateY(-179deg); transform: rotateY(-179deg); } 10% { opacity: 0; -webkit-transform: rotateY(-179deg); -moz-transform: rotateY(-179deg); -ms-transform: rotateY(-179deg); -o-transform: rotateY(-179deg); transform: rotateY(-179deg); } 20% { opacity: 1; background: white; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 40% { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); } 55% { background: white; } 60% { background: #c8c8c8; } 90% { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); opacity: 1; } 100% { opacity: 0; } } @keyframes s5ani { 0% { opacity: 0; -webkit-transform: rotateY(-179deg); -moz-transform: rotateY(-179deg); -ms-transform: rotateY(-179deg); -o-transform: rotateY(-179deg); transform: rotateY(-179deg); } 10% { opacity: 0; -webkit-transform: rotateY(-179deg); -moz-transform: rotateY(-179deg); -ms-transform: rotateY(-179deg); -o-transform: rotateY(-179deg); transform: rotateY(-179deg); } 20% { opacity: 1; background: white; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 40% { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); } 55% { background: white; } 60% { background: #c8c8c8; } 90% { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes s6ani { 0% { opacity: 0; -webkit-transform: rotateY(179deg); -moz-transform: rotateY(179deg); -ms-transform: rotateY(179deg); -o-transform: rotateY(179deg); transform: rotateY(179deg); } 20% { opacity: 0; -webkit-transform: rotateY(179deg); -moz-transform: rotateY(179deg); -ms-transform: rotateY(179deg); -o-transform: rotateY(179deg); transform: rotateY(179deg); } 30% { opacity: 1; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 40% { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); background: white; } 60% { background: #c8c8c8; } 80% { background: #c8c8c8; } 90% { opacity: 1; -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); } 100% { opacity: 0; } } @-moz-keyframes s6ani { 0% { opacity: 0; -webkit-transform: rotateY(179deg); -moz-transform: rotateY(179deg); -ms-transform: rotateY(179deg); -o-transform: rotateY(179deg); transform: rotateY(179deg); } 20% { opacity: 0; -webkit-transform: rotateY(179deg); -moz-transform: rotateY(179deg); -ms-transform: rotateY(179deg); -o-transform: rotateY(179deg); transform: rotateY(179deg); } 30% { opacity: 1; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 40% { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); background: white; } 60% { background: #c8c8c8; } 80% { background: #c8c8c8; } 90% { opacity: 1; -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); } 100% { opacity: 0; } } @-o-keyframes s6ani { 0% { opacity: 0; -webkit-transform: rotateY(179deg); -moz-transform: rotateY(179deg); -ms-transform: rotateY(179deg); -o-transform: rotateY(179deg); transform: rotateY(179deg); } 20% { opacity: 0; -webkit-transform: rotateY(179deg); -moz-transform: rotateY(179deg); -ms-transform: rotateY(179deg); -o-transform: rotateY(179deg); transform: rotateY(179deg); } 30% { opacity: 1; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 40% { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); background: white; } 60% { background: #c8c8c8; } 80% { background: #c8c8c8; } 90% { opacity: 1; -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); } 100% { opacity: 0; } } @keyframes s6ani { 0% { opacity: 0; -webkit-transform: rotateY(179deg); -moz-transform: rotateY(179deg); -ms-transform: rotateY(179deg); -o-transform: rotateY(179deg); transform: rotateY(179deg); } 20% { opacity: 0; -webkit-transform: rotateY(179deg); -moz-transform: rotateY(179deg); -ms-transform: rotateY(179deg); -o-transform: rotateY(179deg); transform: rotateY(179deg); } 30% { opacity: 1; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 40% { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); background: white; } 60% { background: #c8c8c8; } 80% { background: #c8c8c8; } 90% { opacity: 1; -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); } 100% { opacity: 0; } } @-webkit-keyframes half-fold { 0% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 50% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 60% { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); } 90% { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); } } @-moz-keyframes half-fold { 0% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 50% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 60% { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); } 90% { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); } } @-o-keyframes half-fold { 0% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 50% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 60% { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); } 90% { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); } } @keyframes half-fold { 0% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 50% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 60% { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); } 90% { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); } } .screen{display:block;margin:auto;padding: 0 7%;} .screen-outer{display:block;width:95%;height:0;padding-top:0.3%;padding-bottom:63%;margin:auto;border-radius: 1em;} .screen-inner{display:block;width:98.7%;height:0;padding-bottom:66%;margin:auto;background:#FFFFFF;border:#b5b5b5 1px solid;border-top-left-radius: 1.1em;border-top-right-radius: 1.1em; border-bottom-left-radius:2% 4%;border-bottom-right-radius:2% 4%;text-align:center; } .camera-outer{ display:block; position:relative; width:1%; height:0; padding:.4%; margin: 3.1% auto 2.1% auto; background:#FFFFFF; border-radius:100%; border:1px solid #e8e7e7; } .camera-inner{ display:none; width:60%; height:0; padding-top:10%; padding-bottom:60%; margin:auto; border:1px solid #cccccc; background:#FFFFFF; border-radius:100%; box-sizing:border-box; } .screen-glass{ display:block; width:92%; height:0; margin:.7% auto; background-color: #FFFFF; } .screen-insert{ display:block; width:100%; height:0; padding-bottom:60%; background-image:url(../img/capetown.jpg); background-size: 100% 100%; box-shadow: inset rgba(165,165,165,1) 0px 1px 10px, #fff 0px 0px 90px; } .screen-inserth{ display:block; width:100%; height:0; padding-bottom:60%; background:transparent url(../img/paris.jpg); background-size: 100% 100%; box-shadow: inset rgba(165,165,165,1) 0px 1px 10px, #fff 0px 0px 90px; } .screen-glass-gloss{ display:block; width:100%; padding-bottom:60%; background-image: -webkit-linear-gradient(bottom left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 70%, rgba(255,255,255,0.3) 70%, rgba(255,255,255,0) 100%); background-image: -moz-linear-gradient(bottom left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 70%, rgba(255,255,255,0.3) 70%, rgba(255,255,255,0) 100%); z-index:100;} .macbook-text{ min-width:10%; max-width:100px; font-size:.5em; margin:0 auto; position:relative;top:-5px; color:#66a3ac; font-family:"Arial", Lucida Grande; } .base{ display:block; max-width:1200px; margin:-1% auto; } .base-top{ display:block; width:100%; height:0; padding-bottom:0.7%; background:#FFFFFF; border:1px solid #A5A5A5; border-top-left-radius:10px; border-top-right-radius:10px; border-bottom-left-radius:10px 70%; border-bottom-right-radius:10px 70%; /*box-shadow: inset rgba(0,0,0,0.3) 0px 0px 5px;*/ } .base-indent{ position:relative; width:20%; height:0; padding-bottom:0.73%; margin:auto; background-image:-webkit-linear-gradient(left, rgb(175,175,175) 0%, rgb(255,255,255) 9%, rgb(255,255,255) 50%, rgb(255,255,255) 92%, rgb(175,175,175) 100%); background-image:-moz-linear-gradient(left, rgb(175,175,175) 0%, rgb(255,255,255) 9%, rgb(255,255,255) 50%, rgb(255,255,255) 92%, rgb(175,175,175) 100%); border-bottom-left-radius:15%; border-bottom-right-radius:15%; /* box-shadow:inset rgba(0,0,0,0.5) 0px 0px 7px; */ z-index:1000; } .base-bottom{ width:99.6%; margin:auto auto 20px auto; height:0; padding-bottom:2.2%; background:#E9E9E9; border:1px solid #cccccc; border-top:0 !important; border-bottom-left-radius:15% 100%; border-bottom-right-radius:15% 100%; } .base-shadow{ display:none; width:95%; height:0; padding-bottom:0.5%; margin:-1% auto; box-shadow: #000 0px 0px 100px; position:relative; z-index:-999; } /* Media queries */ @media(max-width: 900px) { .macbook-text{ font-size:1em !important; } .resize-corner{ font-size:10px !important; padding:0px 5% 6% 6% !important; } } @media(max-width: 800px) { .btngb{background:transparent;border:1px solid #FFFFFF;position:absolute;right:15px;top:60px !important;width:32px;height:32px;display:block;border-radius:4px;} .screen-outer{ border-radius: 10px !important; } .screen-inner{ border:#CCC 1px solid !important; border-top-left-radius: 1.50em !important; border-top-right-radius: 1.50em !important; border-bottom-left-radius:2% 4%; border-bottom-right-radius:2% 4%; } .macbook-text{ font-size:0.85em !important; } .resize-corner{ font-size:8px !important; padding: 0 10% 8% !important; } } @media(max-width: 700px) { .macbook-text{ font-size:0.80em !important; } } @media(max-width: 600px) { .screen-outer{ border-radius: 8px !important; } .screen-inner{ border:#CCC 1.75px solid !important; border-top-left-radius: 1.25em !important; border-top-right-radius: 1.25em !important; border-bottom-left-radius:2% 4%; border-bottom-right-radius:2% 4%; } .macbook-text{ font-size:0.75em !important; } } @media(max-width: 1024px) { .cllabs2{height:900px !important;} } @media(max-width: 900px) { #mape{height:1100px !important;} #mapd{height:1270px;} .cllabs2{height:1100px !important;} .asky{background:#AFDADA;width:100%;height:250px;} } @media(max-width: 550px) { .macbook-text{ font-size:0.50em !important; } } @media(max-width: 500px) { h3.oso{text-align:center;margin:0 auto 0 auto !important;padding:0;line-height:1em;font-size:1.7em;color:#98def2;text-shadow:#faffeb 0 1px 0;} h3.ost{text-align:center;margin:0 auto 0 auto !important;padding:0;line-height:1em;font-size:1.7em;color:#c3d9e7;text-shadow:#faffeb 0 2px 0;} h3.oda{text-align:center;margin:0 auto 0 auto !important;padding:0;line-height:1em;font-size:1.7em;color:#CCCCCC;text-shadow:#faffeb 0 2px 0;} h3.odo{text-align:center;margin:0 auto 30px auto !important;padding:0;line-height:1em;font-size:1.7em;color:#d9e7dd;text-shadow:#faffeb 0 2px 0;} h2.bigl2{font-size:4em;text-align:center;padding:90px;} h2.bigl2 span{text-align:center}} .screen-outer{ border-radius: 8px !important; } .screen-inner{ border:#CCC 1.5px solid !important; border-top-left-radius: 1em !important; border-top-right-radius: 1em !important; border-bottom-left-radius:2% 4%; border-bottom-right-radius:2% 4%; } .macbook-text{ font-size:0.60em !important; } } @media(max-width: 480px) { .screen-outer{ border-radius: 5px !important; } .screen-inner{ border:#CCCCCC 1px solid !important; border-top-left-radius: 0.75em !important; border-top-right-radius: 0.75em !important; border-bottom-left-radius:2% 4%; border-bottom-right-radius:2% 4%; } .macbook-text{ font-size:0.40em !important; } } .contf{display:block;margin:20px 0 20px 0 0;width:100%;height:auto;} .np-column { background-color:white; padding-top: 10px; padding-bottom: 10px; height:200px;} .ter { background: url(../img/terrain.png); background-size:cover; } .bla { background: url(../img/blav.png); background-size:cover; } .mpa { background: url(../img/mpar.png); background-size:cover; } .sat { background: url(../img/sat.png); background-size:cover; } .oue { background: url(../img/oues.png); background-size:cover; } .sum { background: url(../img/sumi.png); background-size:cover; } .indic{ background: url(../img/idx.png); background-size:cover; } .hex{ background: url(../img/hex.png); background-size:cover; } .bouss{height:300px;} .boussole ul { padding-left: 0; } .boussole li { list-style: none; } .centre { position:absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; display:block; } .boussole { cursor: crosshair; width: 242px; height: 242px; border: 1px solid #CCCCCC; border-radius: 100%; background-color: #FFFFFF; } .line { width: 153px; height: 153px; border: 1px solid #90cccb; border-radius: 100%; background:url(../img/mapbg.png); opacity:.5; } .pts_card { width: 20px; height: 20px; } .pt_car, .pt_col { position: absolute; } #pt_carN, #pt_carS { border-left: 10px solid transparent; border-right: 10px solid transparent; } #pt_carN { bottom: 25px; border-bottom: 75px solid #CCCCCC; } #pt_carS { top: 25px; border-top: 75px solid #CCCCCC; } #pt_carE, #pt_carO { top: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; } #pt_carE { left: 20px; border-left: 70px solid #CCCCCC; } #pt_carO { right: 20px; border-right: 70px solid #CCCCCC; } .pts_cols { position:relative; top: 0px; left: 6px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #pt_colNE, #pt_colSO { border-left: 10px solid transparent; border-right: 10px solid transparent; } #pt_colNE { bottom: 0; border-bottom: 40px solid #CCCCCC; } #pt_colSO { top: 15px; border-top: 40px solid #CCCCCC; } #pt_colSE, #pt_colNO { top: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; } #pt_colSE { left: 15px; border-left: 40px solid #CCCCCC; } #pt_colNO { right: 15px; border-right: 40px solid #CCCCCC; } #pt_carN:after, #pt_carS:after, #pt_carE:after, #pt_carO:after, #pt_colNE:after, #pt_colSE:after, #pt_colSO:after, #pt_colNO:after { position: absolute; font-family: serif; color: #CCCCCC; font-size: 16px; } #pt_carN:after { content: "N"; top: -22px; left: -7px; } #pt_carS:after { content: "S"; top: 2px; left: -5px; } #pt_carE:after { content: "E"; top: -10px; left: 7px; } #pt_carO:after { content: "O"; top: -10px; left: -19px; } #pt_colNE:after, #pt_colSE:after, #pt_colSO:after, #pt_colNO:after { font-size: 13px; } #pt_colSE:after, #pt_colNO:after { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } #pt_colNE:after { content: "NE"; top: -17px; left: -7px; } #pt_colSE:after { content: "SE"; top: -7px; } #pt_colSO:after { content: "SO"; left: -10px; } #pt_colNO:after { content: "NO"; top: -9px; left: -16px; } .point { width: 36px; height: 36px; -webkit-transition: all 1s; transition: all 1s; } .point[data-direcao*="norte"] { -webkit-transform: rotate(0); transform: rotate(0); } .point[data-direcao*="este"] { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .point[data-direcao*="sul"] { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .point[data-direcao*="oeste"] { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .point_centr { width: 36px; height: 36px; border-radius: 36% 100%; background-color: #CCCCCC; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .pont_par { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 20px; height: 20px; border-radius: 100%; margin: auto; background-color: #FFFFFF; border:1px solid #CCCCCC; text-align:center; color:#90cccb; } .pont_dir { position: absolute; margin-left: 4px; /* posição vertical */ border-left: 14px solid transparent; border-right: 14px solid transparent; } #pont_dir1 { bottom: 24px; /* posição horizontal 1 */ border-bottom: 85px solid #90cccb; } #pont_dir2 { top: 24px; /* posição horizontal 2 */ border-top: 85px solid #B5B5B5; } .boussole:hover .point { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } #rocket { display: block; margin: 0 auto; } #rocket .rocket-inner { -webkit-transform: translateY(15px) translateX(-3px); -moz-transform: translateY(15px) translateX(-3px); -ms-transform: translateY(15px) translateX(-3px); -o-transform: translateY(15px) translateX(-3px); transform: translateY(15px) translateX(-3px); -webkit-transition: .3s; -moz-transition: .3s; -o-transition: .3s; transition: .3s; } #rocket .icon-circle { -webkit-transition: .2s; -moz-transition: .2s; -o-transition: .2s; transition: .2s; stroke:#CCCCCC; stroke-width:1; } #rocket .large-window-path { /*transition*/ -webkit-transition: .2s; -moz-transition: .2s; -o-transition: .2s; transition: .2s; fill: #7fccd7; } #rocket .window { /*transition*/ -webkit-transition: .2s; -moz-transition: .2s; -o-transition: .2s; transition: .2s; fill: #7fccd7; } #rocket .wing-shadow { fill: #CCCCCC } #rocket .rocket-bottom { fill: #A5A5A5 } #rocket .rocket-base { fill: #E9E9E9 } #rocket .rocket-shadow {fill: #FFFFFF;stroke:#E9E9E9;stroke-width:0.5} #rocket .wing-base { fill: #E9E9E9 } #flask { width: 197px; height: 230px; margin: 0 auto; margin-top: 120px; margin-bottom:30px; position: relative; } #flask svg { width: 200px; height: 230px; z-index: 0; position: absolute; top: 0; left: 0; } #flask .background { width: 197px; height: 100px; background-color: #90cccb; position: absolute; z-index: 0; bottom: 0; left: 0; -webkit-animation: liquid 3s infinite,liquid-color 80s infinite; animation: liquid 3s infinite,liquid-color 80s infinite; } .bubl { width: 40px; height: 40px; background: #90cccb; border-radius: 40px; position: absolute; top: 180px; } @-webkit-keyframes liquid { 0% { height: 100px; } 10% { height: 97px; } 35% { height: 100px; } 50% { height: 102px; } 80% { height: 98px; } 100% { height: 100px; } } @keyframes liquid { 0% { height: 100px; } 10% { height: 97px; } 35% { height: 100px; } 50% { height: 102px; } 80% { height: 98px; } 100% { height: 100px; } } @-webkit-keyframes liquid-color { from { -webkit-filter: hue-rotate(-360deg); } to { -webkit-filter: hue-rotate(0deg); } } @keyframes liquid-color { from { -webkit-filter: hue-rotate(-360deg); } to { -webkit-filter: hue-rotate(0deg); } } @-webkit-keyframes bubl { 0% { top: 200px; } 100% { top: -200px; opacity: 0; filter: alpha(opacity=0); } } @keyframes bubl { 0% { top: 200px; } 100% { top: -200px; opacity: 0; filter: alpha(opacity=0); } } @-webkit-keyframes side { 0% { margin-right: 0px; } 100% { margin-right: 35px; } } @keyframes side { 0% { margin-right: 0px; } 100% { margin-right: 35px; } } .b1,.b2,.b3 { right: 60px; -webkit-transform: scale(0.4); transform: scale(0.4); opacity: 0.6; filter: alpha(opacity=60); -webkit-animation: bubl 8s linear infinite, liquid-color 80s infinite, side 2s ease-in-out infinite alternate; animation: bubl 8s linear infinite, liquid-color 80s infinite, side 2s ease-in-out infinite alternate; } .b2 { right: 65px; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-animation-delay: 2s,0s,2s; animation-delay: 2s,0s,2s; } .b3 { right: 70px; -webkit-animation-delay: 5s,0s,5s; animation-delay: 5s,0s,5s; -webkit-animation: bubl 10s linear infinite, liquid-color 80s infinite, side 3s ease-in-out infinite alternate; animation: bubl 10s linear infinite, liquid-color 80s infinite, side 3s ease-in-out infinite alternate; } .b4,.b5 { right: 65px; -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0.8; filter: alpha(opacity=80); -webkit-animation: bubl 16s linear infinite, liquid-color 80s infinite, side 5s ease-in-out infinite alternate; animation: bubl 16s linear infinite, liquid-color 80s infinite, side 5s ease-in-out infinite alternate; -webkit-animation-delay: 4s,0s,4s; animation-delay: 4s,0s,4s; } .b5 { right: 55px; -webkit-animation-delay: 5s,0s,5s; animation-delay: 5s,0s,5s; } .b6,.b7,.b8 { right: 65px; -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0.4; filter: alpha(opacity=40); -webkit-animation: bubl 14s linear infinite, liquid-color 80s infinite, side 3s ease-in-out infinite alternate; animation: bubl 14s linear infinite, liquid-color 80s infinite, side 3s ease-in-out infinite alternate; -webkit-animation-delay: 9s,0s,9s; animation-delay: 9s,0s,9s; } .b7 { right: 70px; -webkit-transform: scale(0.7); transform: scale(0.7); -webkit-animation-delay: 3s,0s,3s; animation-delay: 3s,0s,3s; } .b8 { right: 65px; -webkit-animation-delay: 7s,0s,7s; animation-delay: 7s,0s,7s; } .b9,.b0 { right: 70px; -webkit-transform: scale(0.65); transform: scale(0.65); opacity: 0.7; filter: alpha(opacity=70); -webkit-animation: bubl 20s linear infinite, liquid-color 80s infinite, side 5s ease-in-out infinite alternate; animation: bubl 20s linear infinite, liquid-color 80s infinite, side 5s ease-in-out infinite alternate; } .b0 { right: 60px; -webkit-animation-delay: 13s,0s,13s; animation-delay: 13s,0s,13s; } .swirl { width: 20px; height: 20px; background: #90cccb; border-radius: 20px; position: absolute; top: 140px; left: 80px; } @-webkit-keyframes swirl { 0% { top: 140px; } 100% { top: 128px; } } @keyframes swirl { 0% { top: 140px; } 100% { top: 128px; } } .s0 { -webkit-animation: liquid-color 80s infinite, swirl 1s ease-in-out infinite alternate; animation: liquid-color 80s infinite, swirl 1s ease-in-out infinite alternate; } .s1 { left: 100px; -webkit-transform: scale(1.2); transform: scale(1.2); -webkit-animation: liquid-color 80s infinite, swirl 2s ease-in-out infinite alternate; animation: liquid-color 80s infinite, swirl 2s ease-in-out infinite alternate; -webkit-animation-delay: 0s,2s; animation-delay: 0s,2s; } .s2 { left: 40px; -webkit-transform: scale(0.8); transform: scale(0.8); -webkit-animation: liquid-color 80s infinite, swirl 2s ease-in-out infinite alternate; animation: liquid-color 80s infinite, swirl 2s ease-in-out infinite alternate; -webkit-animation-delay: 0s,3s; animation-delay: 0s,3s; } .s3 { left: 60px; -webkit-transform: scale(1.4); transform: scale(1.4); -webkit-animation: liquid-color 80s infinite, swirl 1s ease-in-out infinite alternate; animation: liquid-color 80s infinite, swirl 1s ease-in-out infinite alternate; -webkit-animation-delay: 0s,5s; animation-delay: 0s,5s; } .s4 { left: 120px; -webkit-animation: liquid-color 80s infinite, swirl 2s ease-in-out infinite alternate; animation: liquid-color 80s infinite, swirl 2s ease-in-out infinite alternate; -webkit-animation-delay: 0s,3s; animation-delay: 0s,3s; } .s5 { left: 135px; -webkit-transform: scale(0.8); transform: scale(0.8); -webkit-animation: liquid-color 80s infinite, swirl 1s ease-in-out infinite alternate; animation: liquid-color 80s infinite, swirl 1s ease-in-out infinite alternate; -webkit-animation-delay: 0s,2s; animation-delay: 0s,2s; } .before4{ font-family: 'GeoLabsLogo', sans-serif; font-weight: normal; font-style: normal; text-align:center; -webkit-font-smoothing: antialiased; margin:10px 0 0 10px; border-radius: 50%; color:#FFFFFF; z-index:10000; background:#CCCCCC; width:25px !important; height:25px !important; padding:0; } .before4 i{ position:absolute; text-align:center; font-size:18px; width:24px !important; height:24px !important; position:absolute; top:13px; left:12px; text-shadow:none; } #board { position:relative; width:300px; height:200px; margin:30px auto; background:url(../img/mapbg.png); border:1px solid #CCCCCC; box-shadow: inset 0 0 2px 2px rgba(0,0,0,0.1), inset 0 10px 10px rgba(255,255,255,0.1); text-align:center; color:#90cccb; font-weight:bold; font-size:6em; letter-spacing:3px; text-shadow:0 1px 0 #FFFFFF; line-height:150px; border-radius:3px; } #board:before { content:""; position:absolute; left:-10px; right:-10px; top:-10px; bottom:-10px; background:#FFFFFF; z-index:-1; border-radius:10px; border:#CCCCCC solid 1px; box-shadow: 0 0 0 0 rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.8), inset 0 0 1px rgba(0,0,0,0.1); } #board:after { content:""; display:block; position:absolute; border-radius:0.1em 0.1em 0 0.1em; width:50px; height:8px; background:#FFFFFF; border:1px solid #CCCCCC; bottom:-1px; right:15px; } .device, .device *, .device *:after, .device *:before { backface-visibility: hidden; } .device { border: 1px solid #CCCCCC; background: #FFF; border-radius: 25px; box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.05); transition: all 0.65s cubic-bezier(0.19, 1, 0.22, 1); } .device__header { position: absolute; top: 22.5px; left: 50%; margin-left: -15px; width: 30px; height: 3px; background: #FFF; border:1px solid #CCCCCC; border-radius: 1.5px; transition: all 0.65s cubic-bezier(0.19, 1, 0.22, 1); } .device__header:after, .device__header:before { position: absolute; content: ""; transition: all 0.65s cubic-bezier(0.19, 1, 0.22, 1); } .device__header:before { top: -0.5px; left: -9px; width: 4px; height: 4px; border-radius: 2px; border: 1px solid #CCCCCC; background: #FFF; } .device__header:after { top: -12.5px; left: 50%; margin-left: -3px; width: 6px; height: 6px; border-radius: 3px; border: 1px solid #CCCCCC; background: #FFF; } .device__content { width: 140px; height: 240px; background: url(http://www.geolabs.fr/new/img/barcelona.jpg) center scroll; background-size:cover; border: 1px solid #CCCCCC; border-radius: 1.5px; margin: 40px 7.5px 40px 7.5px; transition: all 0.65s cubic-bezier(0.19, 1, 0.22, 1); } .device__footer { position: absolute; bottom: 5px; left: 50%; margin-left: -15px; width: 30px; height: 30px; border-radius: 15px; border: 1px solid #CCCCCC; transition: all 0.65s cubic-bezier(0.19, 1, 0.22, 1); } .device__footer:after { content: ""; position: absolute; top: 50%; left: 50%; margin-left: -5px; margin-top: -5px; width: 10px; height: 10px; border: 1px solid #CCCCCC; border-radius: 2.5px; transition: all 0.65s cubic-bezier(0.19, 1, 0.22, 1); } /** * iPad and iPad Mini */ .device--ipad .device__header, .device--ipad-mini .device__header { width: 0; margin-left: 0; border-radius: 0; background: transparent; } .device--ipad .device__header:before, .device--ipad-mini .device__header:before { transform: scale(0); } .device--ipad .device__header:after, .device--ipad-mini .device__header:after { transform: translate(0, 7.5px); } .device--ipad .device__content { width: 245px; height: 320px; margin: 40px; } .device--ipad-mini .device__content { width: 220px; height: 290px; margin: 40px 12.5px; } /** * Browser */ .device--browser { border-radius: 4px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; } .device--browser .device__header, .device--browser .device__header:after, .device--browser .device__header:before { width: 7px; height: 7px; left: 5px; top: 0px; transform: translate(0px, 0px) scale(1); margin-left: 0px; border-radius: 4px; background: transparent; border: 1px solid #CCCCCC; } .device--browser .device__header { top: 6px; } .device--browser .device__header:before { left: 9px; top: -1px; } .device--browser .device__header:after { left: 19px; top: -1px; } .device--browser .device__content { width: 640px; height: 350px; border-right-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-radius: 0px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; margin: 20px 0px 0px 0px; } .device--browser .device__footer { transform: scale(0); } .navd{list-style:none;margin:0;padding:0;font-size:1.2em;} .navd li{display:block;0;margin:0 0 10px 0;} .containerd { text-align: center; background: transparent; transition: background 0.65s cubic-bezier(0.19, 1, 0.22, 1); max-height:420px; height:420px; padding:0 0 30px 0 !important; } .containerd:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .containerd > div { position: relative; display: inline-block; vertical-align: middle; } .server { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .server{ position: absolute; margin: 0 auto; top: 1px; bottom: 0; left: 0; right: 0 } .server2 { position: absolute; margin: 0 auto; top: 60px; bottom: 0; left: 0; right: 0; } .server3 { position: absolute; margin: 0 auto; top: 120px; bottom: 0; left: 0; right: 0; } .disk2, .disk { position: absolute; margin: 0 auto; top: 45%; bottom: 0; left: 0; right: 0; } .disk3 { position: absolute; margin: 0 auto; top: 45%; bottom: 0; left: 0; right: 0; } .server, .server2, .server3 { width: 250px; height: 50px; border:1px solid #CCCCCC; border-radius: 5px; } .server:after, .server2:after, .server3:after { right: 5%; animation: blink 0.5s infinite steps(2, end); -webkit-animation: blink 1s infinite steps(2, end); } .server:before, .server2:before { left: 5%; animation: blink 1s infinite steps(2, end); -webkit-animation: blink 1s infinite steps(2, end); } .server .disk , .server2 .disk2, .server3 .disk3{ width: 100px; height: 5px; border:1px solid #CCCCCC; border-radius:4px; } .server:after, .server:before{ content: ""; width: 10px; height: 10px; margin: auto 0; position: absolute; top: 0; bottom: 0; border-radius: 50%; } .server2:after, .server2:before{ content: ""; width: 10px; height: 10px; margin: auto 0; position: absolute; top: 0; bottom: 0; border-radius: 50%; } .before3{ content: "\e600"; font-family: 'GeoLabsLogo', sans-serif; font-weight: normal; font-style: normal; text-decoration: inherit; text-align:center; -webkit-font-smoothing: antialiased; width: 16px; height: 16px; font-size:.85em; margin:15px; border-radius: 50%; color:#FFFFFF; left:0; top:0; z-index:10000; background:#CCCCCC; } .server3:after{ content: ""; width: 10px; height: 10px; margin: auto 0; position: absolute; top: 0; bottom: 0; border-radius: 50%; } @keyframes blink { from { background-color: #90cccc; } to { background-color: #66a3ac; } } @-webkit-keyframes blink { from { background-color: #90cccc; } to { background-color: #66a3ac; } } .dez{border-radius:50% !important;max-width:200px !important;max-height:200px !important;} .tab-content{ padding:3px 0px 0px 8px; background: #FFFFFF; margin-left:1px; } .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) { -webkit-box-shadow: @shadow; -moz-box-shadow: @shadow; box-shadow: @shadow; } hr.st { border-top: 1px solid #CCCCCC; text-align: center; } hr.st:after { content: '\270D'; display: inline-block; position: relative; top: -15px; padding: 0 10px; color: #CCCCC; background:#FFFFFF; font-size: 50px; line-height:30px; } .hexagons { fill: none; stroke: #FFFFFF; stroke-width: .5px; } .section-title{padding:40px 0 0 0;} .title-heading{padding:90px 0 0 0;font-size:2.6em;color:#66a3ac;} .title-heading span i.at{color:#FFFFFF !important;} .panel-title { margin-top: 0; color: #66a3ac; } address.gll{font-size:1.2em;} address a:hover{color:#E9E9E9;} .cord{color:#90ccca;line-height:1.8em;} .gglabs{background:#66a3ac;color:#FFFFFF;} .sglabs{background:#FFFFFF;color:#333333;} .cllabs{background:#66a3ac url(../img/contours.png) no-repeat;height:400px;} .cllabs2{background:#66a3ac url(../img/contours.png) repeat-y;height:450px;} .ctlabs{background:#90cccc;min-height:380px;} .ctlabs p {color:#d8f1ed;} .ctlabs p a{color:#FFFFFF;} hr.ln{ border: 0; height: 1px; background-image: -webkit-linear-gradient(left, rgba(102,163,172,0), rgba(102,163,172,0.75), rgba(102,163,172,0)); background-image: -moz-linear-gradient(left, rgba(102,163,172,0), rgba(102,163,172,0.75), rgba(102,163,172,0)); background-image: -ms-linear-gradient(left, rgba(102,163,172,0), rgba102,163,172,0.75), rgba(102,163,172,0)); background-image: -o-linear-gradient(left, rgba(102,163,172,0), rgba(102,163,172,0.75), rgba(102,163,172,0)); } .ctt{font-size:2em;color:#90cccc;position:relative;top:55px;text-shadow:#FFFFFF 0 1px 0;} #cge{ width:240px; height:240px; position:relative; top:25px; border-radius:50%; overflow:hidden; margin:0 auto 0 auto !important; z-index:3; background:rgba(255,255,255,.5); border:1px solid #afdada; -webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;transition: all .2s ease-in-out;} .servd{height:400px;background: #F9F9F9; } .subserv{height:400px;background:#66a3ac url(../img/contours.png) no-repeat;} .user-heading{margin:40px 0 40px 0 !important;} .user-heading h3{margin:0 !important;} .help-block{color:#90cccc;font-size:1.2em;} .user-details .user-info-block {width: 100%; background: rgb(255, 255, 255); z-index: 0; padding-top: 35px;} .user-info-block .user-heading {width: 100%; text-align: center; margin: 10px 0 0;} .user-info-block .navigation {width: 100%; padding: 18px 30px; list-style: none;border-top:1px solid #f4f4f4;border-bottom:1px solid #f4f4f4;} .navigation li {display:inline; margin: 0 auto !important; padding: 0;text-align:center !important;} .navigation li a {padding: 20px 30px;background:#f4f4f4;color:#bebebe;border:0;border-left:1px solid #FFFFFF;} .navigation li.active a {background: #90cccc; color: #fff;} .user-info-block .user-body {float: left; padding: 5%; width: 90%;} .user-body .tab-content > div {float: left; width: 100%;} .user-body .tab-content h4 {width: 100%; margin: 10px 0; color: #333;} .atech{color:#19778a;} .atech h3{color:#19778a;} .atech:hover{ color:#90ccca !important;} .atech:hover h3 {color:#19778a;text-shadow:none !important;} .at:hover{color:#66a3ac !important;} .at{color:#66a3ac;} .aserv{color:#E9E9E9;} .aserv:hover{color:#66a3ac;} .aserv h3{color:#8b8b8b;} .aserv:hover h3{color:#66a3ac;} .as{color:#A6A6A6;} .as:hover{color:#FFFFFF !important;} .btn-circle { width: 60px; height: 60px; line-height:35px; padding: 7px 10px; border-radius: 50%; font-size: 40px; color: #CCCCCC; background: rgba(255,255,255,.2); border:5px solid #cccccc; -webkit-transition: background .3s ease-in-out; -moz-transition: background .3s ease-in-out; transition: background .3s ease-in-out; } .btn-circle:hover, .btn-circle:focus { outline: 0; color: #663ac; background: rgba(255,255,255,1); border:5px solid #66a3ac; } .btn-circle i.animated { -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s; -moz-transition-property: -moz-transform; -moz-transition-duration: 1s; } .btn-circle:hover i.animated { -webkit-animation-name: pulse; -moz-animation-name: pulse; -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; color:#66a3ac; } .btn1-circle { width:60px; height:60px; line-height:40px; padding:5px 10px; border: 2px solid #fff; border-radius: 50px; font-size: 45px; color: #CCCCCC; background: rgba(255,255,255,1); border:5px solid #CCCCCC; -webkit-transition: background .3s ease-in-out; -moz-transition: background .3s ease-in-out; transition: background .3s ease-in-out; margin-top:23%;} .btn1-circle:hover, .btn1-circle:focus { outline: 0; color: #66a3ac; background: rgba(255,255,255,.5); border:5px solid #66a3ac; } .btn1-circle i.animated { -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s; -moz-transition-property: -moz-transform; -moz-transition-duration: 1s; } .btn1-circle:hover i.animated { -webkit-animation-name: pulse; -moz-animation-name: pulse; -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; } @-webkit-keyframes pulse { 0 { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-moz-keyframes pulse { 0 { -moz-transform: scale(1); transform: scale(1); } 50% { -moz-transform: scale(1.2); transform: scale(1.2); } 100% { -moz-transform: scale(1); transform: scale(1); } } .content-section { padding-top: 100px; } .entries-section { padding-top: 100px; } .download-section { width: 100%; padding: 50px 0; color: #fff; background: url(../img/downloads-bg.jpg) no-repeat center center scroll; background-color: #000; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } #map0{ width: 100%; height: 360px; background:#FFFFFF; } @media(min-width:767px) { .content-section { padding-top: 250px; } .download-section { padding: 100px 0; } #map { height: 400px; margin-top: 250px; } } .btn { text-transform: uppercase; font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 400; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .btn-default { border: 1px solid #66a3ac; color: #66a3ac; background-color: transparent; } .btn-glb{ border: 1px solid #b9b9b9 !important; color: #219ab3; background-color: transparent; } .btn-glb:hover span,.btn-glb:focus span{ color:#FFFFFF; } .btn-default:hover, .btn-default:focus { border: 1px solid #66a3ac; outline: 0; color: #000; background-color: #66a3ac; color:#FFFFFF; } .btn-glbs{ border: 1px solid #CCCCCC !important; color: #A5A5A5; text-transform:none; background: #fcfcfc; /* Old browsers */ background: -moz-linear-gradient(top, #fcfcfc 19%, #ededed 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(19%,#fcfcfc), color-stop(100%,#ededed)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #fcfcfc 19%,#ededed 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #fcfcfc 19%,#ededed 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #fcfcfc 19%,#ededed 100%); /* IE10+ */ background: linear-gradient(to bottom, #fcfcfc 19%,#ededed 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */ } .btn-glbs:hover{ border: 1px solid #A5A5A5 !important; color: #FFFFFF; background: #66a3ac; } ul.banner-social-buttons { margin-top: 0; } @media(max-width:1199px) { ul.banner-social-buttons { margin-top: 15px; } } @media(max-width:1024px) { .atech h3{max-width:75%;margin:0 auto;} } @media(max-width:767px) { ul.banner-social-buttons li { display: block; margin-bottom: 20px; padding: 0; } ul.banner-social-buttons li:last-child { margin-bottom: 0; } } .block { margin-bottom:30px; } .block_content { padding:15px; background:#fff;} .block img { width:100% !important;} .bordered { border:1px solid #eee;} .colored, a { color:#69c1e7} .small-text { font-size:11px;} .descr { clear:both; padding:15px !important; background:#fff;} .descr h4 { margin-bottom:10px; line-height:20px;} .descr p { font-size:11px; margin-bottom: 0px;} .mdb{font-size:16px;color:#707070;} footer {padding: 50px 0 0 0;background:#525252;} footer p { font-size:1em; margin: 10px auto 0 auto; } ul.social-network { list-style: none; display: inline; margin-left:0 !important; padding: 0; } ul.social-network li { display: inline; margin: 0 5px; } /* footer social icons */ .social-network a.icoRss:hover { background-color: #F56505; } .social-network a.icoFacebook:hover { background-color:#3B5998; } .social-network a.icoTwitter:hover { background-color:#33ccff; } .social-network a.icoGoogle:hover { background-color:#66a3ac; } .social-network a.icoVimeo:hover { background-color:#0590B8; } .social-network a.icoLinkedin:hover { background-color:#007bb7; } .social-network a.icoRss:hover i, .social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i, .social-network a.icoGoogle:hover i, .social-network a.icoVimeo:hover i, .social-network a.icoLinkedin:hover i { color:#fff; } a.socialIcon:hover, .socialHoverClass { color:#44BCDD; } .social-circle li a { display:inline-block; position:relative; margin:0 auto 0 auto; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; text-align:center; width: 50px; height: 50px; font-size:20px; } .social-circle li i { margin:0; line-height:50px; text-align: center; } .social-circle li a:hover i, .triggeredHover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -ms--transform: rotate(360deg); transform: rotate(360deg); -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; transition: all 0.2s; } .social-circle i { color: #fff; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -o-transition: all 0.8s; -ms-transition: all 0.8s; transition: all 0.8s; } .linb{position:static;bottom:0 !important;margin:40px 0 0 0;padding:2px 0 2px 0;width:100%;background:#333333;font-size:.75em;color:#525252;} .linb a{color:#525252;} ::-moz-selection { text-shadow: none; background: #89dce8; background: rgba(137,220,232,.2); } ::selection { text-shadow: none; background: #89dce8; background: rgba(137,220,232,.2); } img::selection { background: 0 0; } img::-moz-selection { background: 0 0; } body { webkit-tap-highlight-color: rgba(255,255,255,.2); } ul.thumbs { padding: 0; margin: 0; overflow: hidden; } ul.thumbs li { display: inline-block; height: 200px; overflow: hidden; padding: 0; float: left; position: relative; } ul.thumbs li a.thumbnail { background-repeat: no-repeat; background-size: cover; background-color: #cecece; background-position-x: 50%; display: block; /*overflow: hidden;*/ box-sizing: border-box; transition: opacity 0.3s; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; z-index: 9; width: 100%; height: 100%; border-radius:0 !important; padding:0 !important;} ul.thumbs li a.thumbnail:hover{border:1px solid #FFFFFF !important;} ul.thumbs li a.thumbnail h4 { position: absolute; top: 0; left: 0; padding: 7px 10px; text-transform: uppercase; background-color: #efefef; color: #707070; text-shadow:#FFFFFF 0 1px 0; font-size: 14px; margin: 0; } ul.thumbs li a.thumbnail .description { position: absolute; height: 0; bottom: 0; width: 100%; margin:0 !importnat; box-sizing: inherit; opacity: 0; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; color: #333333; background-color: rgba(255, 255, 255, 0.7); font-size: 18px; padding: 18px 16px; line-height: 10px; box-sizing: inherit; text-align: center; } ul.thumbs li a.thumbnail .active-arrow { width: 0; height: 0; border-left: 25px solid transparent; border-right: 25px solid transparent; border-bottom: 25px solid #fff; bottom: -2px; z-index: 99; position: absolute; left: 0; right: 0; margin: 0 auto; } @media (max-width: 970px) { ul.thumbs li { width: 50% !important; } .media iframe{ width: 100%; } } @media (max-width: 1200px) and (min-width: 970px) { ul.thumbs li { width: 33.3333% !important; } } ul.thumbs li a.thumbnail:hover .description { height: 50px; opacity: 1; } ul.thumbs li.content { width: 100% !important; display: none; margin-bottom: 40px; background: none; float: left; height: 250px; position: relative; padding: 45px 0 45px; } ul.thumbs li.content h3 { display: inline-block; } ul.thumbs li.content .close { position: absolute; top: 0; right: 0; color: #c2c2c2; cursor: pointer; font-weight: normal; font-family: -webkit-pictograph; font-size: 76px; line-height: 70px; } ul.thumbs li.content .close:hover { opacity: 0.7; } ul.thumbs li.content .media { display: inline-block; float: left; margin-right: 20px; width: 50%; min-height: 200px; } ul.thumbs li.content .media img { max-width: 100%; } @media (max-width: 1080px) { .close { right: 0 !important; top: 7px !important; } ul.thumbs .media { margin-right: 0; margin-bottom: 20px; } } @media (max-width: 590px) { ul.thumbs li { width: 100% !important; } ul.thumbs .media { display: none !important; } } @media (max-width: 700px) and (min-width: 590px) { ul.thumbs .media { width: 100% !important; display: block !important; margin-top: 60px; } } .portfolio-content { display: none; }