Team:BIT-China/css/homepage2013.min.css
From 2013.igem.org
Line 157: | Line 157: | ||
#advantage { | #advantage { | ||
- | background: url(../ | + | background: url('https://static.igem.org/mediawiki/2013/f/f2/BIT-China-bt-Icon2.png'); |
border-radius: 10px; | border-radius: 10px; | ||
float: left; | float: left; | ||
Line 177: | Line 177: | ||
#description { | #description { | ||
- | background: url(../ | + | background: url('https://static.igem.org/mediawiki/2013/7/75/BIT-China-bt-Icon3.png'); |
background-color: rgba(234, 58, 58, 0.85098); | background-color: rgba(234, 58, 58, 0.85098); | ||
border-radius: 10px; | border-radius: 10px; | ||
Line 198: | Line 198: | ||
#charactors { | #charactors { | ||
- | background: url(../ | + | background: url('https://static.igem.org/mediawiki/2013/6/61/BIT-China-bt-Icon4.png'); |
border-radius: 10px; | border-radius: 10px; | ||
float: left; | float: left; | ||
Line 218: | Line 218: | ||
#extend { | #extend { | ||
- | background: url(../ | + | background: url('https://static.igem.org/mediawiki/2013/9/9f/BIT-China-bt-Icon5.png'); |
border-radius: 10px; | border-radius: 10px; | ||
float: left; | float: left; | ||
Line 239: | Line 239: | ||
#cover { | #cover { | ||
- | background: url('../ | + | background: url('https://static.igem.org/mediawiki/2013/4/4b/BIT-China-bt-Cover.png'); |
background-color: rgb(234, 58, 58); | background-color: rgb(234, 58, 58); | ||
height: 100%; | height: 100%; |
Revision as of 17:47, 26 September 2013
body {
background-image: none; background-color: #fff; min-width: 1100px; overflow-x: hidden !important; width: 100% !important; height: 100%; position: relative;
}
body section {
z-index: 0; display: block; position: relative; /*text-align: center;*/
}
- story1_sun {
background: url(../img/homepage/sun1.png); background-size: 100%; margin-top: -800px; z-index: 10; height: 400px; width: 400px; position: relative; left: 60px;
}
- story2_sun {
background: url(../img/homepage/sun2.png); background-size: 100%; margin-top: -800px; z-index: 10; height: 400px; width: 400px; position: relative; left: 60px;
}
- story4_sun {
background: url(../img/homepage/sun3.png); background-size: 100%; margin-top: -800px; z-index: 10; height: 400px; width: 400px; position: relative; left: 60px;
}
- story1_gem {
background: url(../img/homepage/storygem1.png); background-size: 100%; z-index: -1; height: 400px; width: 400px; position: relative; left: 290px; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s;
}
- story2_gem {
background: url(../img/homepage/storygem2.png); background-size: 100%; z-index: -1; height: 400px; width: 400px; position: relative; left: 50px; -webkit-transition: all 2s; -moz-transition: all 2s; -ms-transition: all 2s; -o-transition: all 2s; transition: all 2s;
}
- story4_gem {
background: url(../img/homepage/storygem3.png); background-size: 100%; z-index: -1; height: 400px; width: 400px; position: relative; left: 290px; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s;
}
- story1_tem {
background: url(../img/homepage/tem.png); background-size: 100%; z-index: -1; height: 100px; width: 100px; position: relative; top: 50%; left: 50%; margin-left: 250px; margin-top: -320px; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s;
}
- pointer {
background: url(../img/homepage/hand.png); background-size: 100%; bottom: 20px; color: rgba(0, 0, 0, 0.5); display: block; position: fixed; right: 20px; z-index: 10; height: 74px; font-size: 64px; width: 74px;
}
- introduction {
left: 50%; margin-left: -480px; margin-top: 120px; position: absolute; top: 50%; z-index: 0;
}
- idea {
background: url('https://static.igem.org/mediawiki/2013/a/a6/BIT-China-bt-Icon1.png'); border-radius: 10px; float: left; background-size: 100%; margin-top: 45px; margin-left: 172px; height: 70px; width: 70px; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s;
}
- idea:hover {
background-color: rgba(58, 153, 211, 0.85);
}
- advantage {
background: url('https://static.igem.org/mediawiki/2013/f/f2/BIT-China-bt-Icon2.png'); border-radius: 10px; float: left; background-size: 100%; margin-top: 45px; margin-left: 60px; height: 70px; width: 70px; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s;
}
- advantage:hover {
background-color: rgba(118, 181, 71, 0.85098);
}
- description {
background: url('https://static.igem.org/mediawiki/2013/7/75/BIT-China-bt-Icon3.png'); background-color: rgba(234, 58, 58, 0.85098); border-radius: 10px; float: left; background-size: 100%; margin-top: 45px; margin-left: 60px; height: 70px; width: 70px; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s;
}
- description:hover {
background-color: rgba(234, 58, 58, 0.85098);
}
- charactors {
background: url('https://static.igem.org/mediawiki/2013/6/61/BIT-China-bt-Icon4.png'); border-radius: 10px; float: left; background-size: 100%; margin-top: 45px; margin-left: 60px; height: 70px; width: 70px; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s;
}
- charactors:hover {
background-color: rgba(133, 133, 197, 0.85098);
}
- extend {
background: url('https://static.igem.org/mediawiki/2013/9/9f/BIT-China-bt-Icon5.png'); border-radius: 10px; float: left; background-size: 100%; margin-top: 45px; margin-left: 60px; height: 70px; width: 70px; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s;
}
- extend:hover {
background-color: rgba(255, 165, 0, 0.85098);
}
- cover {
background: url('https://static.igem.org/mediawiki/2013/4/4b/BIT-China-bt-Cover.png'); background-color: rgb(234, 58, 58); height: 100%; padding: 0px !important; text-align: center; min-height: 700px !important; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s;
}
.sun {
position: absolute; top: 100px; left: 100px;
}
- TV {
display: block; position: absolute; background: url(../img/homepage/TV.png); top: 100px; left: 100px;
}
- laptop-screen {
background: rgba(234, 58, 58, 0.85); height: 390px !important; left: 50%; margin-left: -376px; margin-top: -248px; overflow: hidden; position: absolute; text-align: left; top: 50%; white-space: nowrap; width: 721px; z-index: 8; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s;
}
- laptop {
background: transparent url('https://static.igem.org/mediawiki/2013/7/70/BIT-China-bt-Imac.png') no-repeat; background-size: 100%; height: 954px; left: 50%; margin-left: -470px; margin-top: -320px; position: absolute; top: 50%; width: 927px; z-index: 0;
}
- wrapper {
background: #f3f6ff; width: 100%;
}
.home a {
color: inherit; text-decoration: none;
}
.home .top-section {
background: url(../img/homepage/cover.png) #bc4227; background-size: 100% 100%; width: 100%; padding-top: 60px; /*overflow: hidden;*/ height: 650px; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s;
}
.home .top-section h1 {
font-size: 56px; font-weight: 700; letter-spacing: -2px; color: #FFF; margin-left: -3px; -webkit-user-select: text; -moz-user-select: text; -o-user-select: text; user-select: text;
}
.header-icon {
display: block; height: 128px; left: 50%; margin-left: -114px; margin-top: -85px; position: absolute; width: 128px;
}
.header-icon div {
border-radius: 200px; overflow: hidden; padding: 50px
}
.header-icon .icon-sitemap {
transition: all 0s ease; -webkit-transition: all 0s ease; height: 128px; margin-left: 0px; margin-top: 0px; width: 128px;
}
.header-icon img {
margin-left: -10px; width: 150px;
}
.wrap {
min-height: 100%; text-align: center; overflow-x: hidden; margin: 0 auto; max-width: 1160px;
}
body section .wrap {
min-height: 100%; text-align: center; overflow-x: hidden;
}
body section .wrap h1, body section .wrap h2 {
white-space: nowrap
}
- cover .wrap > h1 {
color: transparent; font-size: 46px; left: 50%; margin-left: -32px; margin-top: -260px; position: absolute; overflow: hidden; top: 50%; white-space: nowrap; width: 70px;
}
- sitemap {
background: #152732; min-height: 1300px !important
}
- sitemap .header-icon div {
background: #7ec9ac; /* box-shadow: 40px 30px 0px -15px #7ec9ac, -60px 40px 0px -30px #7ec9ac, -100px 0px 0px -50px #7ec9ac, 100px 0px 0px -50px #7ec9ac*/
}
- sitemap h2 {
color: #b1f6d5; margin-bottom: 100px
}
- sitemap .wrap div {
margin-bottom: 50px
}
- sitemap p {
color: #fff; margin-bottom: 50px; margin-top: 100px; opacity: 0.1; text-align: center;
}
- sitemap p strong {
display: block; font-size: 50px; margin-top: 30px;
}
- sitemap section {
-webkit-backface-visibility: hidden !important; -webkit-perspective: 1000 !important; -webkit-transition: all 350ms ease-out 0s; backface-visibility: hidden !important; perspective: 1000 !important; transition: all 350ms ease-out 0s;
color: #fff; cursor: pointer; display: inline-block; height: 321px; margin-bottom: 0px; margin-right: -4px; overflow: hidden; position: relative; width: 321px; z-index: 0;
}
- sitemap section * {
-webkit-transition: all 350ms ease-out 0s; transition: all 350ms ease-out 0s
}
- sitemap section:hover {
-webkit-transition: all 350ms ease-out 0s; transition: all 350ms ease-out 0s;
background-color: rgba(0, 0, 0, 0.75) !important
}
- sitemap section:hover * {
-webkit-transition: all 350ms ease-out 0s; transition: all 350ms ease-out 0s
}
- sitemap section div {
/*background: rgba(21, 39, 50, 0.75);*/ height: 100%; opacity: 1; position: absolute; width: 100%;
}
- sitemap section h1 {
margin-top: -100%; opacity: 0; padding-top: 15px
}
- sitemap section h1 a {
font-size: 32px
}
- sitemap section h1 a:hover {
text-decoration: none
}
- sitemap section h2 {
color: rgba(255, 255, 255, 0.75); font-size: 18px; margin-top: 200%; opacity: 0
}
- sitemap section i {
color: #fff; left: 50%; margin-left: -64px; margin-top: -64px; top: 50%; position: absolute; z-index: -1;
}
- sitemap section:hover div {
opacity: 1
}
- sitemap section:hover div h1 {
margin-top: 100px; opacity: 1
}
- sitemap section:hover div h2 {
margin-top: 0px; opacity: 1
}
- sitemap section:hover i {
color: #152732
}
- project {
opacity: 0; z-index: -1; background: #ccccff; -webkit-transition:all 0.35s linear; -moz-transition:all 0.35s linear; -ms-transition:all 0.35s linear; -o-transition:all 0.35s linear; transition:all 0.35s linear;
}
- project h1 a {
color: #CCCCFF;
}
- project .icon-project {
z-index: 5; padding-top: 70px;
}
- project .icon-project:hover{
opacity: 0;
}
- team {
opacity: 0; z-index: -1; background: #99ccff; -webkit-transition:all 0.35s linear; -moz-transition:all 0.35s linear; -ms-transition:all 0.35s linear; -o-transition:all 0.35s linear; transition:all 0.35s linear;
}
- team h1 a {
color: #99CCFF;
}
- team .icon-team:hover{
opacity: 0;
}
- team .icon-team {
z-index: 5; padding-top: 70px;
}
- modeling {
opacity: 0; z-index: -1; background: #66eecc; -webkit-transition:all 0.35s linear; -moz-transition:all 0.35s linear; -ms-transition:all 0.35s linear; -o-transition:all 0.35s linear; transition:all 0.35s linear;
}
- modeling h1 a {
color: #66eeCC;
}
- modeling i {
font-size: 256px !important; margin-left: -127px !important; margin-top: -120px !important
}
- modeling .icon-modeling:hover{
opacity: 0;
}
- modeling .icon-modeling{
z-index: 5; padding-top: 75px;
}
- human-practice {
opacity: 0; z-index: -1; background: #99cc66; -webkit-transition:all 0.35s linear; -moz-transition:all 0.35s linear; -ms-transition:all 0.35s linear; -o-transition:all 0.35s linear; transition:all 0.35s linear;
}
- human-practice h1 a {
color: #99CC66;
}
- human-practice i {
margin-left: -85px !important
}
- human-practice .icon-human-practice:hover{
opacity: 0;
}
- human-practice .icon-human-practice{
z-index: 5; padding-top: 70px;
}
- notebook {
opacity: 0; z-index: -1; background: #ffdd22; -webkit-transition:all 0.35s linear; -moz-transition:all 0.35s linear; -ms-transition:all 0.35s linear; -o-transition:all 0.35s linear; transition:all 0.35s linear;
}
- notebook h1 a {
color: #FFDD22;
}
- notebook i {
margin-left: -105px !important
}
- notebook .icon-notebook:hover{
opacity: 0;
}
- notebook .icon-notebook{
z-index: 5; padding-top: 75px;
}
- sponser {
opacity: 0; z-index: -1; background: #ff99cc; -webkit-transition:all 0.35s linear; -moz-transition:all 0.35s linear; -ms-transition:all 0.35s linear; -o-transition:all 0.35s linear; transition:all 0.35s linear;
}
- sponser h1 a {
color: #FF99CC;
}
- sponser i {
margin-left: -75px !important
}
- sponser .icon-sponser:hover{
opacity: 0;
}
- sponser .icon-sponser{
z-index: 5; padding-top: 70px;
} section h1 {
color: #fff; margin-left: 10px; margin-right: 10px; margin-top: 180px; font-size: 39px;
}
section p {
font-size: 18px; margin-left: 10px; margin-right: 10px; text-align: left;
}
- about {
background: #ffffdd; min-height: 1000px !important;
}
- about .header-icon div {
background: #ea3a3a; /*box-shadow: 40px 30px 0px -15px #ea3a3a, -60px 40px 0px -30px #ea3a3a, -100px 0px 0px -50px #ea3a3a, 100px 0px 0px -50px #ea3a3a*/
}
- about h1 {
color: #000
}
- about h2 {
color: #ea3a3a
}
- map {
background: #fafafa; height: 100%; position: absolute; width: 100%; z-index: 6;
}
- map > div {
height: 100% !important; padding-top: 250px !important; width: 100%;
}
- about .icon-BIT {
margin-top: 10px; margin-left: -10px; float: left; width: 50px; margin-bottom: 10px;
}
- about .icon-BIT img{
float: left;
}
- about dl {
margin-top: 10px; font-size: 13px; min-height: 110px !important;
}
- about p {
display: block; margin-top: 100px; padding: 5px; width: 930px
}
- about p,
- about p strong,
- about p em {
color: #111; font-size: 28px; letter-spacing: -1px; line-height: 47px
}
- about p .placeholder {
display: none; float: right; height: 296px; padding: 20px; width: 353px
}
- about .icon-heart {
color: #e93839; height: 24px; font-size: 28px; margin-top: 8px; position: relative; width: 28px;
}
- about p strong {
display: inline-block; padding-left: 5px; padding-right: 5px;
}
- about p em {
color: #999
}
- about p strong {
background: #e93839; color: #fafafa
}
- about aside {
background: rgba(0, 0, 0, 0.75); border-radius: 5px; float: left; margin: 0 auto; margin-bottom: 50px; margin-left: -30px; margin-top: -220px; padding: 20px; position: relative; width: 380px; z-index: 2;
}
- about aside:after {
content: ' '; border: solid transparent; border-top-color: rgba(0, 0, 0, 0.75); border-width: 20px; display: block; height: 0px; margin-left: 130px; margin-top: 20px; position: absolute; width: 0px;
}
- point {
background: #ea3a3a; border-radius: 50px; box-shadow: inset 0px 0px 25px rgba(0, 0, 0, 0.25), 0px 5px 0px 3px rgba(255, 25, 25, 0.75), 0px 10px 0px 10px rgba(0, 0, 0, 0.75); content: ' '; display: block; float: left; height: 50px; margin-left: 150px; margin-top: 550px; position: absolute; width: 50px; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear;
}
- about aside dt {
color: #ccc; display: inline-block; margin-bottom: 10px; text-align: right; width: 100px;
}
- about aside dd {
color: #fafafa; display: inline-block; margin-bottom: 10px; margin-left: 20px; text-align: left; width: 200px;
}
- about #googlemap {
opacity: 0; border-radius: 5px; float: right; margin: 0 auto; margin-bottom: 50px; margin-left: 10px; margin-top: 110px; padding: 20px; position: relative; width: 640px; height: 480px; z-index: 2; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out;
}
- contact {
background: #00222d; bottom: 0px; height: 100% !important; min-height: 1100px !important; z-index: 11 !important
}
- contact .header-icon div {
background: #7d9faa; /*box-shadow: 40px 30px 0px -15px #7d9faa, -60px 40px 0px -30px #7d9faa, -100px 0px 0px -50px #7d9faa, 100px 0px 0px -50px #7d9faa*/
}
- contact .header-icon:before {
background: #7d9faa
}
- contact h2 {
color: #b0ddec
}
- get-in-touch {
-webkit-transition: all 0.25s; transition: all 0.25s;
background: #7d9faa; border-radius: 10px; box-shadow: 0px 10px 0px 0px #42646f, 0px 15px 0px 10px #001a24; color: #fff; display: block; font-size: 64px; margin: 0 auto; margin-bottom: 10px; margin-top: 100px; padding: 20px; position: relative; text-align: center; text-shadow: 0px 3px 0px #42646f; width: 460px; z-index: 20
}
- get-in-touch:hover {
background: #42646f; box-shadow: 0px 5px 0px 10px #001a24; margin-bottom: 0px; margin-top: 110px; padding-bottom: 15px; padding-top: 25px; text-decoration: none
}
- world {
bottom: 0px; height: 100%; margin-top: -178px; overflow: hidden !important; position: absolute; width: 100%; z-index: 1
}
- sky {
height: 100%; bottom: -113px; position: absolute; overflow: hidden; width: 100%;
}
- city {
height: 100%; position: absolute; width: 100%
}
- moon {
-webkit-animation: floating 10s 2s linear infinite; -webkit-transform: scale3d(100%, 100%, 1); animation: floating 15s linear infinite; transform: scale3d(100%, 100%, 1);
background: #fff7e1; border-radius: 200px; bottom: 800px; height: 115px; left: 100px; position: absolute; width: 115px
}
- moon:after {
-webkit-transform: rotate(-25deg) scale(1); transform: rotate(-25deg) scale(1);
background: #fff; content: ' '; display: block; height: 900px; margin-left: 194px; margin-top: 25px; opacity: 0.04; position: absolute; width: 116px
}
- moon i {
color: #00222d; left: 50%; margin-left: -36px; margin-top: 25px; opacity: 0.1; position: absolute;
}
- sky .cloud {
-webkit-animation: floating 15s linear infinite; -webkit-transform: scale3d(100%, 100%, 1); animation: floating 15s linear infinite; transform: scale3d(100%, 100%, 1)
}
- contact .icon-cloud-2,
- contact .icon-cloud-3,
- contact .icon-cloud-4 {
bottom: 620px; left: 0px; position: absolute
}
- contact .icon-64.icon-cloud-2,
- contact .icon-64.icon-cloud-3,
- contact .icon-64.icon-cloud-4 {
opacity: 0.1
}
- contact .icon-128.icon-cloud-2 {
margin-left: 100px
}
- contact .icon-128.icon-cloud-2:before {
opacity: 0.1 !important;
}
- contact .icon-128.icon-cloud-3 {
bottom: 600px; margin-left: 400px
}
- contact .icon-128.icon-cloud-3:before {
opacity: 0.3 !important;
}
- contact .icon-128.icon-cloud-4 {
bottom: 640px; margin-left: 200px; opacity: 1
}
- contact .icon-128.icon-cloud-4:before {
opacity: 0.15 !important;
}
- contact .icon-64.icon-cloud-2 {
bottom: 700px; margin-left: 400px; opacity: 0.1
}
- contact .icon-64.icon-cloud-3 {
bottom: 700px; margin-left: 300px; opacity: 0.1
}
- contact .icon-64.icon-cloud-4 {
bottom: 640px; margin-left: 300px; opacity: 0.15
}
- contact .twitter-share-button {
margin-left: 25px; margin-top: -50px;
}
- contact #___plusone_1 {
margin-left: -94px !important; margin-top: 70px !important; position: absolute;
}
- contact .fb-like {
margin-top: -60px;
}
.parallax {
background: transparent url('../img/homepage/city.png') repeat-x 0px bottom; background-size: 1500px; bottom: 80px; height: 100%; position: absolute; width: 400%; z-index: -1;
}
.parallax2 {
background: transparent url('../img/homepage/city2.png') repeat-x 0px bottom; background-size: 1500px; bottom: 80px; height: 100%; opacity: 0.5; position: absolute; width: 200%; z-index: -2;
}
- road {
-webkit-perspective: 1000 !important; background: #111; bottom: 0px; height: 80px; position: absolute; width: 100%; z-index: 10
}
- road div {
-webkit-animation: road 1s linear infinite; -webkit-transform: rotateX(50deg) translateX(0) translate3d(0, 0, 0);
animation: road 1s linear infinite; transform: rotateX(65deg) skewX(-20deg);
border-bottom: 10px dashed #5f5439; content: ' '; display: block; height: 0px; margin-top: 30px; opacity: 0.5; width: 120%
}
- taxi {
-webkit-animation: taxi 20s linear infinite; -webkit-transform: scale3d(100%, 100%, 1); animation: taxi 20s linear infinite; transform: scale3d(100%, 100%, 1);
bottom: 20px; left: 0%; margin-left: -240px; position: absolute; width: 100%; z-index: 10
}
- taxi div {
background: transparent url('../img/homepage/contact3.png') no-repeat; height: 180px; overflow: hidden; width: 239px
}
- taxi_headlights {
border-right: 100px solid rgba(255, 234, 0, 0.05); border-top: 50px solid transparent; border-bottom: 50px solid transparent; display: block; height: 0px; margin-left: 90px; margin-top: 50px; position: absolute; width: 100px; z-index: 11;
}
- signs {
-webkit-animation: signs 67s linear infinite; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; -webkit-transform: scale3d(100%, 100%, 1); animation: signs 67s linear infinite; backface-visibility: hidden; transform: scale3d(100%, 100%, 1);
bottom: 82px; height: 150px; left: 100%; position: absolute; white-space: nowrap; width: auto; z-index: 10;
}
- signs:hover {
-webkit-animation-play-state: paused; animation-play-state: paused
}
.sign {
display: inline-block; height: 32px; margin-left: 300px; margin-top: -40px; padding: 20px; width: 32px;
}
.sign div {
-webkit-transform: rotateZ(45deg); transform: rotateZ(45deg);
background: #888; display: block; margin-left: -33px; padding: 20px; width: 32px;
}
.sign div:hover {
-webkit-filter: brightness(120%); filter: brightness(120%)
}
.sign .pole {
-webkit-transform: rotateZ(0deg); transform: rotateZ(0deg);
background: #222; display: block; height: 100px; margin-left: 0px; overflow: hidden; padding: 0px; position: absolute; width: 5px !important; z-index: -1
}
.sign div i {
-webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg)
}
.carousel {
position: relative; /*margin-bottom: 20px;*/ line-height: 1;
}
.carousel-inner {
position: relative; width: 100%; overflow: hidden;
}
.carousel-inner > .item {
position: relative; display: none; -webkit-transition: 0.6s ease-in-out left; -moz-transition: 0.6s ease-in-out left; -o-transition: 0.6s ease-in-out left; transition: 0.6s ease-in-out left;
}
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
display: block; line-height: 1;
}
.carousel-inner > .active, .carousel-inner > .next, .carousel-inner > .prev {
display: block;
}
.carousel-inner > .active {
left: 0;
}
.carousel-inner > .next, .carousel-inner > .prev {
position: absolute; top: 0; width: 100%;
}
.carousel-inner > .next {
left: 100%;
}
.carousel-inner > .prev {
left: -100%;
}
.carousel-inner > .next.left, .carousel-inner > .prev.right {
left: 0;
}
.carousel-inner > .active.left {
left: -100%;
}
.carousel-inner > .active.right {
left: 100%;
}
.carousel-control {
position: absolute; top: 40%; left: 15px; width: 40px; height: 40px; margin-top: -20px; font-size: 60px; font-weight: 100; line-height: 30px; color: #ffffff; text-align: center; background: #222222; border: 3px solid #ffffff; -webkit-border-radius: 23px; -moz-border-radius: 23px; border-radius: 23px; opacity: 0.5; filter: alpha(opacity=50);
}
.carousel-control.right {
right: 15px; left: auto;
}
.carousel-control:hover, .carousel-control:focus {
color: #ffffff; text-decoration: none; opacity: 0.9; filter: alpha(opacity=90);
}
.carousel-indicators {
position: absolute; top: 15px; right: 15px; z-index: 5; margin: 0; list-style: none;
}
.carousel-indicators li {
display: block; float: left; width: 10px; height: 10px; margin-left: 5px; text-indent: -999px; background-color: #ccc; background-color: rgba(255, 255, 255, 0.25); border-radius: 5px;
}
.carousel-indicators .active {
background-color: #fff;
}
.carousel-caption {
position: absolute; right: 0; bottom: 0; left: 0; padding: 15px; background: #333333; background: rgba(0, 0, 0, 0.75);
}
.carousel-caption h4, .carousel-caption p {
line-height: 20px; color: #ffffff;
}
.carousel-caption h4 {
margin: 0 0 5px;
}
.carousel-caption p {
margin-bottom: 0;
}
- story {
background: url(../img/homepage/blackbar.png);
}
- display-img-idea {
visibility: hidden; display: none;
}
- display-img-idea img{
margin-left: 20px; margin-right: 10px; width: 38%; height: 45%; background-size: 100% 100%; float: left; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s;
}
- display-img-idea p{
white-space: pre-wrap; font-size: 25px; font-family: 'Capriola', sans-serif; letter-spacing: 0.5px; color: white; line-height: 36px;
}
- display-img-advantage {
display: none; visibility: hidden;
}
- display-img-advantage img{
margin-left: 20px; width: 38%; height: 45%; background-size: 100% 100%; float: left; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s;
}
- display-img-advantage p{
white-space: pre-wrap; font-size: 28px; font-family: 'Capriola', sans-serif; letter-spacing: 0.5px; color: white; line-height: 36px;
}
- display-img-description img{
margin-top: 20px; margin-left: 20px; width: 38%; height: 45%; background-size: 100% 100%; float: left; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; margin-right: 10px; margin-bottom: 20px;
}
- display-img-description {
}
- display-img-description p{
white-space: pre-wrap; font-size: 30px; font-family: 'Capriola', sans-serif; letter-spacing: 0.5px; color: white; line-height: 42px;
}
- display-img-charactors {
display: none; visibility: hidden;
}
- display-img-charactors img{
margin-left: 20px; height: 130px; background-size: 100% 100%; float: left; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s;
}
- display-img-charactors p{
white-space: pre-wrap; font-size: 20px; font-family: 'Capriola', sans-serif; letter-spacing: 0.5px; color: white; line-height: 30px;
}
- display-img-extend{
display: none; visibility: hidden;
}
- display-img-extend img{
margin-left: 20px; width: 38%; height: 45%; background-size: 100% 100%; float: left; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s;
}
- display-img-extend p{
white-space: pre-wrap; font-size: 20px; font-family: 'Capriola', sans-serif; letter-spacing: 0.5px; color: white; line-height: 30px;
} .info-sch{
opacity: 0.6; width: 350px; height: 430px; background-color: black; margin-left: -150px; margin-top: -460px; border-radius: 10px; padding: 10px; white-space: pre-wrap;
}
- point .info-sch {
white-space: pre-wrap; font-size: 23px; font-family: 'Capriola', sans-serif; letter-spacing: 0.5px; color: white; line-height: 32px;
}