body,html{padding:0;margin:0;min-height:100%;height:100%;font-family: sans-serif;}
body{background-size:100%;}
@font-face {
font-family: 'yi_baiti';
src: url('images/msyi_0-webfont.eot');
src: url('images/msyi_0-webfont.eot?#iefix') format('embedded-opentype'),
url('images/msyi_0-webfont.woff') format('woff'),
url('images/msyi_0-webfont.ttf') format('truetype'),
url('images/msyi_0-webfont.svg#microsoft_yi_baitiregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family:street;
src: url('images/streetvertising_bold_public-webfont.eot');
src: url('images/streetvertising_bold_public-webfont.eot?#iefix') format('embedded-opentype'),
url('images/streetvertising_bold_public-webfont.woff') format('woff'),
url('images/streetvertising_bold_public-webfont.ttf') format('truetype'),
url('images/streetvertising_bold_public-webfont.svg#streetvertisingbold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: verdanaregular;
src: url('images/verdana-webfont.eot');
src: url('images/verdana-webfont.eot?#iefix') format('embedded-opentype'),
url('images/verdana-webfont.woff') format('woff'),
url('images/verdana-webfont.ttf') format('truetype'),
url('images/verdana-webfont.svg#verdanaregular') format('svg');
font-weight: normal;
font-style: normal;
}
#banner{
width: 910px;
height: 130px;
margin: 0 auto;
position: relative;
top: 80px;
}
#body{
min-height: 600px;
width: 4000px;
position: absolute;
z-index: -1;
}
.banner_content{display: inline-block;}
#container{
position: relative;
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9ImczIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgo8c3RvcCBzdG9wLWNvbG9yPSIjMzQ0MzU2IiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjNTE2Njg1IiBvZmZzZXQ9Ii40Ii8+PHN0b3Agc3RvcC1jb2xvcj0iIzUxNjY4NSIgb2Zmc2V0PSIuNiIvPjxzdG9wIHN0b3AtY29sb3I9IiMzNDQzNTYiIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2czKSIgLz4KPC9zdmc+);
z-index: 0;
min-height: 100%;
background-size: 100%;
}
#content_pane_1 p,#content_pane_2 p,#content_pane_3 p,#content_pane_4 p{
background: rgba(40,40,40,0.3);
box-shadow: 0px 0px 5px black;
}
.slide_image_holder{
width: 900px;
height: 300px;
background: blue;
box-shadow: 0px 0px 5px black;
margin-top: 30px;
margin-left: 5px;
}
.scroll_right{
-webkit-animation: shift_right 0.7s cubic-bezier(0,.68,.22,.99) forwards;
-o-animation:shift_right 0.7s cubic-bezier(0,.68,.22,.99) forwards;
animation:shift_right 0.7s cubic-bezier(0,.68,.22,.99) forwards;
}
@-webkit-keyframes shift_right {
0% {left:0px;}
30% {left:10px;}
60% {left:-975px;}
100% {left:-955px;}
}
@-o-keyframes shift_right {
0% {left:0px;}
30% {left:10px;}
60% {left:-975px;}
100% {left:-955px;}
}
@keyframes shift_right {
0% {left:0px;}
30% {left:10px;}
60% {left:-975px;}
100% {left:-955px;}
}
.scroll_right_-955{
-webkit-animation: shift_right_second 0.7s cubic-bezier(0,.68,.22,.99) forwards;
-o-animation: shift_right_second 0.7s cubic-bezier(0,.68,.22,.99) forwards;
animation: shift_right_second 0.7s cubic-bezier(0,.68,.22,.99) forwards;
}
@-webkit-keyframes shift_right_second {
0% {left:-955px;}
30%{left: -945px;}
60% {left:-1930px;}
100% {left:-1910px;}
}
@-o-keyframes shift_right_second {
0% {left:-955px;}
30%{left: -945px;}
60% {left:-1930px;}
100% {left:-1910px;}
}
@keyframes shift_right_second {
0% {left:-955px;}
30%{left: -945px;}
60% {left:-1930px;}
100% {left:-1910px;}
}
.scroll_right_-1910{
-webkit-animation: shift_right_third 0.7s cubic-bezier(0,.68,.22,.99) forwards;
-o-animation: shift_right_third 0.7s cubic-bezier(0,.68,.22,.99) forwards;
animation: shift_right_third 0.7s cubic-bezier(0,.68,.22,.99) forwards;
}
@-webkit-keyframes shift_right_third {
0% {left:-1910px;}
30%{left: -1900px;}
60% {left:-2885px;}
100% {left:-2865px;}
}
@-o-keyframes shift_right_third {
0% {left:-1910px;}
30%{left: -1900px;}
60% {left:-2885px;}
100% {left:-2865px;}
}
@keyframes shift_right_third {
0% {left:-1910px;}
30%{left: -1900px;}
60% {left:-2885px;}
100% {left:-2865px;}
}
.scroll_right_-2865{
-webkit-animation: shift_right_end 0.5s cubic-bezier(0,.68,.22,.99) forwards;
-o-animation: shift_right_end 0.5s cubic-bezier(0,.68,.22,.99) forwards;
animation: shift_right_end 0.5s cubic-bezier(0,.68,.22,.99) forwards;
}
@-webkit-keyframes shift_right_end {
0% {left:-2865px;}
50%{left: -2885px;}
100% {left:-2865px;}
}
@-o-keyframes shift_right_end {
0% {left:-2865px;}
50%{left: -2885px;}
100% {left:-2865px;}
}
@keyframes shift_right_end {
0% {left:-2865px;}
50%{left: -2885px;}
100% {left:-2865px;}
}
.scroll_left_0{
-webkit-animation: shift_left 0.7s cubic-bezier(0,.68,.22,.99) forwards;
-o-animation:shift_left 0.7s cubic-bezier(0,.68,.22,.99) forwards;
animation:shift_left 0.7s cubic-bezier(0,.68,.22,.99) forwards;
}
@-webkit-keyframes shift_left {
0% {left:-955px;}
30% {left:-965px;}
60% {left:20px;}
100% {left:0px;}
}
@-o-keyframes shift_left {
0% {left:-955px;}
30% {left:-965px;}
60% {left:20px;}
100% {left:0px;}
}
@keyframes shift_left {
0% {left:-955px;}
30% {left:-965px;}
60% {left:20px;}
100% {left:0px;}
}
.scroll_left_-955{
-webkit-animation: shift_left_second 0.7s cubic-bezier(0,.68,.22,.99) forwards;
-o-animation: shift_left_second 0.7s cubic-bezier(0,.68,.22,.99) forwards;
animation: shift_left_second 0.7s cubic-bezier(0,.68,.22,.99) forwards;
}
@-webkit-keyframes shift_left_second {
0% {left:-1910px;}
30% {left:-1920px;}
60% {left:-935px;}
100% {left:-955px;}
}
@-o-keyframes shift_left_second {
0% {left:-1910px;}
30% {left:-1920px;}
60% {left:-935px;}
100% {left:-955px;}
}
@keyframes shift_left_second {
0% {left:-1910px;}
30% {left:-1920px;}
60% {left:-935px;}
100% {left:-955px;}
}
.scroll_left_-1910{
-webkit-animation: shift_left_third 0.7s cubic-bezier(0,.68,.22,.99) forwards;
-o-animation: shift_left_third 0.7s cubic-bezier(0,.68,.22,.99) forwards;
animation: shift_left_third 0.7s cubic-bezier(0,.68,.22,.99) forwards;
}
@-webkit-keyframes shift_left_third {
0% {left:-2865px;}
30% {left:-2875px;}
60% {left:-1890px;}
100% {left:-1910px;}
}
@-o-keyframes shift_left_third {
0% {left:-2865px;}
30% {left:-2875px;}
60% {left:-1890px;}
100% {left:-1910px;}
}
@keyframes shift_left_third {
0% {left:-2865px;}
30% {left:-2875px;}
60% {left:-1890px;}
100% {left:-1910px;}
}
.scroll_left_-0{
-webkit-animation: shift_left_end 0.5s cubic-bezier(0,.68,.22,.99) forwards;
-o-animation: shift_left_end 0.5s cubic-bezier(0,.68,.22,.99) forwards;
animation: shift_left_end 0.5s cubic-bezier(0,.68,.22,.99) forwards;
}
@-webkit-keyframes shift_left_end {
0% {left:0px;}
50%{left: 20px;}
100% {left:0px;}
}
@-o-keyframes shift_left_end {
0% {left:-2865px;}
50%{left: -2885px;}
100% {left:-2865px;}
}
@keyframes shift_left_end {
0% {left:-2865px;}
50%{left: -2885px;}
100% {left:-2865px;}
}
.footer_text_glow{
-webkit-animation: glow 0.8s ;
-o-animation: glow 0.8s ;
animation: glow 0.8s ;
}
@-webkit-keyframes glow {
0% {text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5); color: white;}
50%{text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5); color: #7db9e8;}
100% {text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5); color: white;}
}
@-o-keyframes glow {
0% {text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5); color: white;}
50%{text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5); color: #7db9e8;}
100% {text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5); color: white;}
}
@keyframes glow {
0% {text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5); color: white;}
50%{text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5); color: #7db9e8;}
100% {text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5); color: white;}
}
.wrap_left{
-webkit-animation: wrap_left 0.7s cubic-bezier(0,.68,.22,.99) forwards;
-o-animation: wrap_left 0.7s cubic-bezier(0,.68,.22,.99) forwards;
animation: wrap_left 0.7s cubic-bezier(0,.68,.22,.99) forwards;
}
@-webkit-keyframes wrap_left{
0%{left:0px; opacity: 1;}
30%{left:10px;}
50%{opacity: 0;}
60%{left:-2885px; }
100%{left:-2865px; opacity: 1;}
}
@-o-keyframes wrap_left{
0%{left:0px; opacity: 1;}
30%{left:10px;}
50%{opacity: 0;}
60%{left:-2885px;}
100%{left:-2865px; opacity: 1;}
}
@keyframes wrap_left{
0%{left:0px; opacity: 1;}
30%{left:10px;}
50%{opacity: 0;}
60%{left:-2885px; }
100%{left:-2865px; opacity: 1;}
}
.wrap_right{
-webkit-animation: wrap_right 0.7s cubic-bezier(0,.68,.22,.99) forwards;
-o-animation: wrap_right 0.7s cubic-bezier(0,.68,.22,.99) forwards;
animation: wrap_right 0.7s cubic-bezier(0,.68,.22,.99) forwards;
}
@-webkit-keyframes wrap_right{
0%{left:-2865px; opacity: 1;}
30%{left:-2855px;}
50%{opacity: 0;}
60%{left: 20px;}
100%{left:0px; opacity: 1;}
}
@-o-keyframes wrap_right{
0%{left:-2865px; opacity: 1;}
30%{left:-2855px;}
50%{opacity: 0;}
60%{left: 20px;}
100%{left:0px; opacity: 1;}
}
@keyframes wrap_right{
0%{left:-2865px; opacity: 1;}
30%{left:-2855px;}
50%{opacity: 0;}
60%{left: 20px;}
100%{left:0px; opacity: 1;}
}
#container:after{
content: "";
position: absolute;
width: 100%;
height: 100%;
background: url(images/pattern.png);
top: 0px;
opacity: .1;
z-index: -2;
background-size: 7px;
}
#container:before{
content: "";
position: absolute;
width: 100%;
height: 20px;
top: 0px;
border-bottom:1px dashed white;
opacity: .5;
}
.shadow_test{
box-shadow: inset 50px 0px 100px rgba(40,40,40,0.6), inset -50px 0px 100px rgba(40,40,40,0.6);
position: absolute;
width: 100%;
height: 100%;
top: 0px;
z-index: 0;
}
#content_pane_1,#content_pane_2,#content_pane_3,#content_pane_4{
width: 910px;
min-height: 600px;
/* background: orange; */
position: relative;
float: left;
margin-left: 45px;
}
h2{
text-shadow: 1px 1px 2px black;
padding-left: 20px;
margin-top: 25px;
margin-left: 10px;
}
#content_pane_1 h2,#content_pane_2 h2,#content_pane_3 h2,#content_pane_4 h2,
#content_pane_1 p,#content_pane_2 p,#content_pane_3 p,#content_pane_4 p{
color: white;
font-family: "yi_baiti";
}
#content_pane_1 h2,#content_pane_2 h2,#content_pane_3 h2,#content_pane_4 h2{
font-size: 30px;
}
#content_pane_1 p,#content_pane_2 p,#content_pane_3 p,#content_pane_4 p{
font-size: 20px;
padding: 20px;
margin-left: 5px;
margin-right: 5px;
}
#hider{
min-height: 600px;
width: 1000px;
position: absolute;
margin-left: -500px;
left: 50%;
overflow: hidden;
margin-top: 10px;
}
@media screen and (max-width: 1175px) {
#l_arrow,#r_arrow{display: none;}
}
#l_arrow,#r_arrow{
cursor: pointer;
background-color: rgb(230, 230, 230);
background: repeating-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, 0.1) 7.5%),
repeating-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 4%, rgba(0, 0, 0, 0.03) 4.5%),
repeating-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1.2%, rgba(255, 255, 255, 0.15) 2.2%),
linear-gradient(180deg, rgb(199, 199, 199) 0%, rgb(230, 230, 230) 47%, rgb(199, 199, 199) 53%, rgb(179, 179, 179)100%);
text-shadow: rgba(102, 102, 102, 0.5) 0 -1px 0, rgba(255, 255, 255, 0.6) 0 2px 1px;
box-shadow: inset rgb(38, 38, 38) 0 0px 0px 3px, inset rgba(38, 38, 38, 0.8) 0 -1px 5px 4px, inset rgba(0, 0, 0, 0.25) 0 -1px 0px 7px, inset rgba(255, 255, 255, 0.7) 0 2px 1px 7px, rgba(0, 0, 0, 0.15) 0 -5px 6px 4px, rgba(255, 255, 255, 0.2) 0 3px 4px 4px;
width: 50px;
height: 50px;
position: absolute;
line-height: 50px;
text-align: center;
color: rgba(40, 40, 40, 0.4);
font-size: 30px;
-moz-transition: color .1s;
-webkit-transition: color .1s;
-o-transition: color .1s;
transition: all .1s;
z-index: 1;
border-radius: 0px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
top: 390px;
}
#l_arrow:active,#r_arrow:active{
box-shadow: inset hsla(210,100%,30%, 1) 0 0px 0px 3px, inset hsla(0,0%,15%, .8) 0 -1px 5px 4px, /* soft SD */ inset hsla(0,0%,0%, .25) 0 -1px 0px 7px, inset hsla(0,0%,100%,.7) 0 2px 1px 7px, hsla(0,0%, 0%,.15) 0 -5px 6px 4px, hsla(0,0%,100%,0.2) 0 3px 4px 4px;
}
#l_arrow{
margin-left: -565px;
left: 50%;
}
#l_arrow:hover,#r_arrow:hover{
color: #18558B;
}
#l_arrow:after{
content: "";
position: absolute;
height: 570px;
width: 45px;
left: 65px;
top: -230px;
box-shadow: 15px 0px 25px -25px rgb(0, 0, 0) inset, 34px 0px 30px -34px rgba(0, 0, 0, 0.32) inset, inset 5px 0px 3px -2px rgba(40, 40, 40, 0.5);
border-bottom-right-radius: 100px 250px;
border: 1px solid rgba(0, 0, 0, 0);
border-left: 1px solid rgb(36, 36, 36);
border-top-right-radius: 100px 250px;
}
#r_arrow{
right: 50%;
margin-right: -565px;
}
#r_arrow:after{
content: "";
position: absolute;
height: 570px;
width: 24px;
right: 65px;
top: -230px;
box-shadow: -15px 0px 25px -25px #000 inset, -34px 0px 30px -34px rgba(0, 0, 0, 0.32) inset, -5px 0px 3px -2px rgba(40, 40, 40, 0.5) inset;
border-top-left-radius: 120px 120px;
border-bottom-left-radius: 120px 120px;
border-right: 1px solid rgb(36, 36, 36);
}
.title_logo{
position: absolute;
top: -15px;
left: 18px;
width: 600px;
}
#links{
width: 640px;
color: white;
font-size: 16px;
position: relative;
z-index: 1;
left: 30px;
top: 50px;
}
#links a,#links .banner_content{
cursor: pointer;
position: relative;
text-decoration: none;
margin-right: 20px;
text-align: center;
display: inline-table;
transition: color 1s;
-moz-transition: color .1s;
-webkit-transition: color .1s;
-o-transition: color .1s;
}
.email_icon{
position: absolute;
top: -16px;
right: -240px;
cursor: pointer;
box-shadow: 1px 1px 5px black;
width: 40px;
}
.email_icon:after{
content: "Contact us";
position: absolute;
}
.banner_content{
margin-right: 10px;
}
.banner_content:hover{
color: #7db9e8;
}
.banner_content:after{
box-shadow: 0px 4px 7px -2px rgba(40,40,40,.5);
width: 90%;
display: inline-block;
height: 10px;
position: absolute;
top: 15px;
left: 50%;
margin-left: -45%;
}
.banner_content:before{
width: 50%;
height: 5px;
background: gold;
border-radius: 0px 0px 2px 2px;
display: block;
position: absolute;
top: 26px;
left: 50%;
margin-left: -25%;
}
.on.banner_content:after,.on.banner_content:before{
content: "";
}
.off.banner_content:before{
-webkit-animation: tab_off 0.4s linear forwards;
-moz-animation: tab_off 0.4s linear forwards;
-o-animation: tab_off 0.4s linear forwards;
animation: tab_off 0.4s linear forwards;
content: "";
}
@-webkit-keyframes tab_off {
0% {height: 5px;}
20%{height: 5px;}
30%{height: 8px;}
40%{height: 8px;}
55%{height: 0px;}
100% {height: 0px;}
}
@-moz-keyframes tab_off {
0% {height: 5px;}
20%{height: 5px;}
30%{height: 8px;}
40%{height: 8px;}
55%{height: 0px;}
100% {height: 0px;}
}
@-o-keyframes tab_off {
0% {height: 5px;}
20%{height: 5px;}
30%{height: 8px;}
40%{height: 8px;}
55%{height: 0px;}
100% {height: 0px;}
}
@keyframes tab_off {
0% {height: 5px;}
20%{height: 5px;}
30%{height: 8px;}
40%{height: 8px;}
55%{height: 0px;}
100% {height: 0px;}
}
.off.banner_content:after{
-webkit-animation: tab_off_shadow 0.45s linear forwards;
-o-animation: tab_off_shadow 0.45s linear forwards;
animation: tab_off_shadow 0.45s linear forwards;
content: "";
}
@-webkit-keyframes tab_off_shadow {
0% {box-shadow: 0px 4px 7px -2px rgba(40,40,40,.5);}
80%{box-shadow: 0px 4px 7px -2px rgba(40,40,40,.5);}
100% {box-shadow: 0px 0px 0px 0px rgba(40,40,40,.5);}
}
@-o-keyframes tab_off_shadow {
0% {box-shadow: 0px 4px 7px -2px rgba(40,40,40,.5);}
80%{box-shadow: 0px 4px 7px -2px rgba(40,40,40,.5);}
100% {box-shadow: 0px 0px 0px 0px rgba(40,40,40,.5);}
}
@keyframes tab_off_shadow {
0% {box-shadow: 0px 4px 7px -2px rgba(40,40,40,.5);}
80%{box-shadow: 0px 4px 7px -2px rgba(40,40,40,.5);}
100% {box-shadow: 0px 0px 0px 0px rgba(40,40,40,.5);}
}
.on.tab_on.banner_content:before{
-webkit-animation: tab_on 0.4s linear forwards;
-o-animation: tab_on 0.4s linear forwards;
animation: tab_on 0.4s linear forwards;
}
@-webkit-keyframes tab_on {
0% {height: 0px;}
20%{height: 0px;}
30%{height: 8px;}
40%{height: 8px;}
55%{height: 5px;}
100%{height: 5px;}
}
@-o-keyframes tab_on {
0% {height: 0px;}
20%{height: 0px;}
30%{height: 8px;}
40%{height: 8px;}
55%{height: 5px;}
100%{height: 5px;}
}
@keyframes tab_on {
0% {height: 0px;}
20%{height: 0px;}
30%{height: 8px;}
40%{height: 8px;}
55%{height: 5px;}
100%{height: 5px;}
}
.blurred_5{
-webkit-animation: blur_on 0.5s forwards;
-moz-animation: blur_on 0.5s forwards;
-o-animation: blur_on 1s forwards;
animation: blur_on 1s forwards;
}
@-webkit-keyframes blur_on {
0% {-webkit-filter:blur(0.0px) brightness(1);}
100% {-webkit-filter:blur(1.5px) brightness(0.30);}
}
@-moz-keyframes blur_on {
0% {filter:blur(0.0px) brightness(1); }
100% {filter:blur(1.5px) brightness(0.30);}
}
@keyframes blur_on {
0% {filter:blur(0.0px) brightness(1);}
100% {filter:blur(1.5px) brightness(0.30);}
}
.blur_off{
-webkit-animation: blur_off 0.4s forwards;
-moz-animation: blur_off 0.4s forwards;
-o-animation: blur_off 0.4s forwards;
animation: blur_off 0.4s forwards;
}
@-webkit-keyframes blur_off {
0% {-webkit-filter:blur(1.5px) brightness(0.30);}
100% {-webkit-filter:blur(0.0px) brightness(1);}
}
@-moz-keyframes blur_off {
0% {-webkit-filter:blur(1.5px) brightness(0.30);}
100% {-webkit-filter:blur(0.0px) brightness(1);}
}
@-o-keyframes blur_off {
0% {-webkit-filter:blur(1.5px) brightness(0.30);}
100% {-webkit-filter:blur(0.0px) brightness(1);}
}
@keyframes blur_off {
0% {-webkit-filter:blur(1.5px) brightness(0.30);}
100% {-webkit-filter:blur(0.0px) brightness(1);}
}
#email_panel{
min-height: 300px;
min-width: 600px;
background: rgba(80,80,80,0.9);
border-radius: 5px;
color: white;
position: absolute;
left: 50%;
z-index: 1;
margin-left: -300px;
box-shadow: inset 0px 0px 76px rgba(40,40,40,.2);
opacity: 0;
top: -550px;
}
#email_panel:before{
content: "";
min-height: 102.5%;
min-width: 101.6%;
border: 10px solid rgba(80,80,80,0.9);
position: absolute;
left: -15px;
top: -15px;
border-radius: 15px;
box-shadow: 0px 0px 5px rgb(40,40,40);
z-index: -1;
}
/*email form start*//*email form start*//*email form start*//*email form start*//*email form start*/
.page_text{
font-family: "yi_baiti";
}
form:before{
content: "";
width: 200px;
height: 250px;
background: url('images/em_b_lrg.png');
background-repeat: no-repeat;
background-position: right bottom;
position: absolute;
right: -30px;
bottom: 38px;
opacity: 0.3;
transform: rotate(30deg);
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
.center{
display: table;
margin-left: auto;
margin-right: auto;
}
legend span{
padding-top: 10px;
display: block;
font-weight: bold;
font-family: "yi_baiti";
font-size: 25px;
}
.text_hover_glow{display: inline;}
.text_hover_glow:hover{
text-shadow:0px 0px 2px white;
}
fieldset p{font-size: 20px;font-family: "yi_baiti";}
.h_divide{
width: 96%;
height: 2px;
background: rgba(65, 65, 65,0.5);
margin-bottom: 10px;
margin-top: 10px;
left: 2%;
position: relative;
border-bottom: 1px solid rgba(255,255,255,0.3);
border-top: 1px solid rgba(40,40,40,0.5);
}
fieldset{
border:none;
}
fieldset label{
position: relative;
left: 10px;
font-size: 20px;
font-family: "yi_baiti";
}
.exit{
color: rgba(255,255,255,0.5);
width: 22px;
height: 22px;
position: absolute;
top: 5px;
right: 5px;
font-size: 19px;
text-align: center;
font-family: Verdana,verdanaregular,sans-serif;
line-height: 17px;
border-radius: 50%;
background: rgba(80, 80, 80,0.4);
border-top: 1px solid rgba(0,0,0,0.6);
border-bottom: 1px solid rgba(255,255,255,0.2);
border-left: 1px solid rgba(0,0,0,0.4);
border-right: 1px solid rgba(0,0,0,0.4);
box-shadow: inset 0px 0px 8px rgba(35,35,35,1);
text-shadow:0px 0px 0px rgba(255,255,255,0.0);
cursor:pointer;
transition: color, text-shadow 1s;
-moz-transition: color, text-shadow .1s;
-webkit-transition: color, text-shadow .1s;
-o-transition: color text-shadow .1s;
}
.exit:hover{
color: rgba(255,255,255,0.9);
text-shadow: 0px 0px 2px white;
}
.exit:active{
color: rgba(255,255,255,0.0);
}
textarea{
max-width: 400px;
max-height: 200px;
position: relative;
top: 26px;
left: 25px;
border: none;
opacity: .9;transition: box-shadow 2s;
-moz-transition: box-shadow .2s;
-webkit-transition: box-shadow .2s;
-o-transition: box-shadow .2s;
}
fieldset label input{
position: absolute;
left: 114px;
border: none;
opacity: .9;
transition: box-shadow 2s;
-moz-transition: box-shadow .2s;
-webkit-transition: box-shadow .2s;
-o-transition: box-shadow .2s;
}
fieldset label textarea:focus,fieldset label textarea:active,fieldset label textarea:hover,
fieldset label input:focus,fieldset label input:active,fieldset label input:hover{
outline: none;
box-shadow: 0px 0px 7px white;
border: none;
opacity: 1;
}
.button{
background: rgba(40, 40, 40,0.4);
border-radius: 5px;
border: none;
color: white;
width: 150px;
height: 30px;
box-shadow: inset 0px 0px 22px rgba(36, 36, 36, 0.7);
transition: box-shadow 2s;
-moz-transition: box-shadow .2s;
-webkit-transition: box-shadow .2s;
-o-transition: box-shadow .2s;
border-top: 1px solid rgba(0,0,0,0.6);
border-bottom: 1px solid rgba(255,255,255,0.2);
border-left: 1px solid rgba(0,0,0,0.4);
border-right: 1px solid rgba(0,0,0,0.4);
}
.button:hover{
box-shadow: inset 0px 0px 40px rgba(0,0,0,0.6);
}
/*email form end*//*email form end*//*email form end*//*email form end*//*email form end*//*email form end*//*email form end*//*email form end*/
#footer{
width: 1000px;
height: 200px;
margin: 0 auto;
margin-top: 600px;
position: relative;
}
#footer_topline{
width: 850px;
height: 5px;
border-radius: 2px;
background: white;
margin: 0 auto;
margin-bottom: 5px;
}
.footer_links:last-child{
float: right;
margin-right: 75px;
}
.footer_links{
color: white;
text-decoration: none;
margin-left: 20px;
font-family: "yi_baiti";
float: left;
font-size: 16px;
cursor: pointer;
}
#foot_1{
margin-left: 75px;
}
.footer_links:hover{
color: #7db9e8;
transition: color 1s;
-moz-transition: color .1s;
-webkit-transition: color .1s;
-o-transition: color .1s;
}
.hidden_email_panel{
-webkit-animation: hide_email 0.35s cubic-bezier(0,.68,.22,.99) forwards;
-moz-animation: hide_email 0.35s cubic-bezier(0,.68,.22,.99) forwards;
-o-animation: hide_email 0.35s cubic-bezier(0,.68,.22,.99) forwards;
animation: hide_email 0.35s cubic-bezier(0,.68,.22,.99) forwards;
}
@-webkit-keyframes hide_email {
0%{top:30px; opacity: 1;}
100%{top:-550px; opacity: 0;}
}
@-moz-keyframes hide_email {
0%{top:30px; opacity: 1;}
100%{top:-550px; opacity: 0;}
}
@-o-keyframes hide_email {
0%{top:30px; opacity: 1;}
100%{top:-550px; opacity: 0;}
}
@keyframes hide_email {
0%{top:30px; opacity: 1;}
100%{top:-550px; opacity: 0;}
}
/* animation: name duration timing-function delay iteration-count direction fill-mode play-state; */
.showing_email_panel{
-webkit-animation: show_email 0.35s cubic-bezier(0,.68,.22,.99) forwards;
-moz-animation: show_email 0.35s cubic-bezier(0,.68,.22,.99) forwards;
-o-animation: show_email 0.35s cubic-bezier(0,.68,.22,.99) forwards;
animation: show_email 0.35s cubic-bezier(0,.68,.22,.99) forwards;
}
@-webkit-keyframes show_email {
0%{top:-550px; opacity: 0;}
100%{top:30px; opacity: 1;}
}
@-o-keyframes show_email {
0%{top:-550px; opacity: 0;}
100%{top:30px; opacity: 1;}
}
@keyframes show_email {
0%{top:-550px; opacity: 0;}
100%{top:30px; opacity: 1;}
}
#mission_statement{
background: -moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.2) 85%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(85%,rgba(255,255,255,0.2)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0.2) 85%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0.2) 85%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0.2) 85%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0.2) 85%,rgba(255,255,255,0) 100%); /* W3C */
box-shadow: 0px 0px 5px rgb(0, 0, 0), inset 0px 0px 596px 6px rgb(255, 255, 255);
width: 800px;
height: 500px;
margin-left: -400px;
position: absolute;
top: 170px;
left: 50%;
z-index: 0;
}
#mission_statement p{
color: rgb(255, 255, 255);
height: calc(100% - 3.9em);
background: rgba(60, 60, 60, 0.85);
display: block;
margin: 10px;
box-shadow: inset 0px 3px 5px rgba(40, 40, 40, 0.5), inset 0px -3px 5px rgba(255, 255, 255, 0.2),inset -1px 0px 5px rgba(40, 40, 40, 0.5),inset 1px 0px 5px rgba(40, 40, 40, 0.5);
padding: 20px;
width: 740px;
text-shadow: 0px 0px 2px rgb(0, 0, 0);
}
#mission_statement .exit{
top: 30px;
right: 30px;
}
.hide_mission{
-webkit-animation: hide_mission 1s forwards ;
-moz-animation: hide_mission 1s forwards ;
-o-animation: hide_mission 1s forwards ;
animation: hide_mission 1s forwards ;
}
@-webkit-keyframes hide_mission {
0% {height:500px;}
50% {height:100px;}
55%{top:-550px;}
60%{opacity: 0;}
100% {height:0px;display:none;top:-550px;}
}
@-moz-keyframes name {
0% {}
50% {}
100% {}
}
@-o-keyframes name {
0% {}
50% {}
100% {}
}
@keyframes name {
0% {}
50% {}
100% {}
}
.sig{
font-family: street;
float: right;
margin-top: 20px;
}
#heading{
font-size: 20px;
}