Difference between revisions of "Team:WHU-China/css/Home/style.css"

(Created page with "body{ padding:0; margin:0; background:#fff; position:relative; font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; } body a{ transition:0.5s all; -webkit...")
 
 
(11 intermediate revisions by the same user not shown)
Line 4: Line 4:
 
background:#fff;
 
background:#fff;
 
position:relative;
 
position:relative;
−
font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
+
font-family:"Raleway","Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;
 
}
 
}
 
body a{
 
body a{
Line 31: Line 31:
 
}
 
}
 
ul{
 
ul{
−
margin:0;
+
margin:0!important;
 
padding:0;
 
padding:0;
 
}
 
}
Line 135: Line 135:
  
 
.banner-top {
 
.banner-top {
−
background: url(../images/banner1.jpg) no-repeat 0px 0px;
+
background: url(https://static.igem.org/mediawiki/2018/b/b9/T--WHU-China--wiki-Home_banner.png) no-repeat 0px 0px;
 
background-size: cover;
 
background-size: cover;
 
-webkit-background-size: cover;
 
-webkit-background-size: cover;
Line 145: Line 145:
  
 
.banner-top1 {
 
.banner-top1 {
−
background: url(../images/banner2.jpg) no-repeat 0px 0px;
+
background: url(https://static.igem.org/mediawiki/2018/3/3f/T--WHU-China--wiki-home-banner1%281600%29.jpg) no-repeat 0px 0px;
 
background-size: cover;
 
background-size: cover;
 
-webkit-background-size: cover;
 
-webkit-background-size: cover;
Line 155: Line 155:
  
 
.banner-top2 {
 
.banner-top2 {
−
background: url(../images/banner5.jpg) no-repeat 0px 0px;
+
background: url(https://static.igem.org/mediawiki/2018/1/18/T--WHU-China--wiki-home-banner311.png) no-repeat 0px 0px;
 
background-size: cover;
 
background-size: cover;
 
-webkit-background-size: cover;
 
-webkit-background-size: cover;
Line 165: Line 165:
  
 
.banner-top3 {
 
.banner-top3 {
−
background: url(../images/banner4.jpg) no-repeat 0px 0px;
+
background: url(https://static.igem.org/mediawiki/2018/3/3f/T--WHU-China--wiki-home-banner1%281600%29.jpg) no-repeat 0px 0px;
 
background-size: cover;
 
background-size: cover;
 
-webkit-background-size: cover;
 
-webkit-background-size: cover;
Line 176: Line 176:
 
.banner-info_agile_w3ls {
 
.banner-info_agile_w3ls {
 
text-align: center;
 
text-align: center;
−
padding-top: 23em;
+
padding-top: 20em;
 
}
 
}
  
Line 375: Line 375:
 
height: 34px;
 
height: 34px;
 
width: 34px;
 
width: 34px;
−
background: url(../images/left.png) no-repeat 0px 0px;
+
background: url(https://static.igem.org/mediawiki/2018/f/fb/T--WHU-China--wiki-left.png) no-repeat 0px 0px;
 
}
 
}
  
 
.callbacks_nav.next {
 
.callbacks_nav.next {
 
left: auto;
 
left: auto;
−
background: url(../images/right.png) no-repeat 0px 0px;
+
background: url(https://static.igem.org/mediawiki/2018/1/10/T--WHU-China--wiki-right.png) no-repeat 0px 0px;
 
right: 47%;
 
right: 47%;
 
}
 
}
Line 386: Line 386:
 
.callbacks_nav.prev {
 
.callbacks_nav.prev {
 
left: auto;
 
left: auto;
−
background: url(../images/left.png) no-repeat 0px 0px;
+
background: url(https://static.igem.org/mediawiki/2018/f/fb/T--WHU-China--wiki-left.png) no-repeat 0px 0px;
 
left: 47%;
 
left: 47%;
 
}
 
}
Line 1,074: Line 1,074:
 
/*-- footer --*/
 
/*-- footer --*/
 
footer {
 
footer {
−
     background: #212121;
+
     background: #57BDFC;
 
}
 
}
 
.footer-grids a {
 
.footer-grids a {
Line 1,215: Line 1,215:
 
/*-- inner page banner --*/
 
/*-- inner page banner --*/
 
.innerpage-banner {
 
.innerpage-banner {
−
     background: url(../images/banner1.jpg) no-repeat center;
+
     background: url(https://static.igem.org/mediawiki/2018/3/3f/T--WHU-China--wiki-home-banner1%281600%29.jpg) no-repeat center;
 
     background-size: cover;
 
     background-size: cover;
 
     min-height: 300px;
 
     min-height: 300px;
Line 1,694: Line 1,694:
 
height: 50px;
 
height: 50px;
  
−
background: #02c1ee url(../images/prev1.png) no-repeat 4px 8px;
+
background: #02c1ee url(https://static.igem.org/mediawiki/2018/f/fb/T--WHU-China--wiki-left.png) no-repeat 4px 8px;
  
 
text-indent: -10000px;
 
text-indent: -10000px;
Line 2,047: Line 2,047:
 
/*-- to-top --*/
 
/*-- to-top --*/
 
#toTop {
 
#toTop {
−
    display: none;
 
 
     text-decoration: none;
 
     text-decoration: none;
 
     position: fixed;
 
     position: fixed;
Line 2,058: Line 2,057:
 
     border: none;
 
     border: none;
 
     text-indent: 100%;
 
     text-indent: 100%;
−
     background: #fff url(../images/arr.png) no-repeat 1px 1px;
+
     background: #fff url(https://static.igem.org/mediawiki/2018/f/f0/T--WHU-China--wiki-arr.png) no-repeat 1px 1px;
 
     box-shadow: 0 0 0 20px rgba(123,191,234, 0.32), 0 0 0 10px rgba(255, 255, 255, 0.5);
 
     box-shadow: 0 0 0 20px rgba(123,191,234, 0.32), 0 0 0 10px rgba(255, 255, 255, 0.5);
 
     border-radius: 50%;
 
     border-radius: 50%;

Latest revision as of 10:24, 6 December 2018

body{ padding:0; margin:0; background:#fff; position:relative; font-family:"Raleway","Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif; } body a{ 

   transition:0.5s all;

-webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all; } a:hover{ text-decoration:none; } input[type="button"],input[type="submit"],.contact-form input[type="submit"]{ transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all; } h1,h2,h3,h4,h5,h6{ margin:0; 

    font-family: 'Raleway', sans-serif;

} p{ margin:0; } ul{ margin:0!important; padding:0; } label{ margin:0; } img{ width:100%; }


/*-- header --*/


/*-- Index-Page-Styling --*/

header { 

   position: absolute;
   z-index: 9;
   width: 100%;
   padding: 2em 0;

} .bg-light { 

   background-color: transparent !important;

} .navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .nav-link.active { 

   color: #02c1ee;
   border-bottom: 1px solid #02c1ee;

} .navbar-light .navbar-nav .nav-link { 

   color: #fff;
   font-size: 16px;
   letter-spacing: 2px;
   border-bottom: 1px solid #fff;

} li.nav-item { 

   padding: 0 15px;

} .dropdown-menu { 

   padding: 1rem;

} ul.dropdown-menu li { 

   padding: 10px 0;

} ul.dropdown-menu li a { 

   font-size: 16px;
   color: #333;
   letter-spacing: 1px;

border-bottom: 1px solid; 

   padding-bottom: .2rem;

} ul.dropdown-menu li a:hover { color: #02c1ee; border-bottom: 1px solid; } .navbar-light .navbar-brand { 

   font-size: 1.2em;
   color: #02c1ee;
   text-shadow: 2px 2px #ffffff;
   text-decoration: none;
   font-weight: 700;

margin: 0; 

   text-transform: uppercase;
   padding: 0;
   letter-spacing: 3px;

} .navbar-expand-lg .navbar-nav .nav-link { 

   padding-right: 0;
   padding-left: 0;
   padding-bottom: .2rem;

} .navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus { 

   color: #fff;
   text-shadow: 2px 2px #ffffff;

} .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus { 

   color: #02c1ee;
   border-bottom: 1px solid #02c1ee;

} .header-top { 

   background: rgba(0, 0, 0, 0.5);
   padding: 15px;

} .navbar{ padding: 0; } .header-top p { 

   margin: 0;
   color: #eee;
   letter-spacing: 2px;
   font-size: 15px;

} .header-top p i { 

   color: #02c1ee;

margin-right: 10px; } .top-right { 

   text-align: right;

} /*-- /slider --*/

/*-- banner-top --*/

.banner-top { background: url(T--WHU-China--wiki-Home_banner.png) no-repeat 0px 0px; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -moz-background-size: cover; min-height: 780px; }

.banner-top1 { background: url(T--WHU-China--wiki-home-banner1%281600%29.jpg) no-repeat 0px 0px; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -moz-background-size: cover; min-height: 780px; }

.banner-top2 { background: url(T--WHU-China--wiki-home-banner311.png) no-repeat 0px 0px; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -moz-background-size: cover; min-height: 780px; }

.banner-top3 { background: url(T--WHU-China--wiki-home-banner1%281600%29.jpg) no-repeat 0px 0px; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -moz-background-size: cover; min-height: 780px; }

.banner-info_agile_w3ls { text-align: center; padding-top: 20em; }

.banner-info_agile_w3ls h3 span,.banner-info_agile_w3ls h2 span { padding: 0 15px; font-weight: 600; 

   color: #eee;
   text-decoration: underline;

}

.banner-info_agile_w3ls a { color: #fff; text-decoration: none; padding: 10px 20px; letter-spacing: 3px; font-size: 14px; margin: 1em 0 0em; background: rgba(255, 255, 255, 0.2); display: inline-block; } .banner-info_agile_w3ls a:hover{ color:#000; } .banner-info_agile_w3ls h3,.banner-info_agile_w3ls h2 { font-size: 3em; color: #fff; font-weight: 100; letter-spacing: 1px; 

    text-transform: capitalize;

}

.banner-info_agile_w3ls p { font-size: 1em; color: #fff; margin: 1.5em 0; letter-spacing: 6px; }

.banner-info_agile_w3ls i { 

   vertical-align: middle;

} .layer{ 

     background: rgba(37, 37, 37, 0.4);

min-height: 780px; } /*-- //banner-top --*/

/*--social_media_icons_style--*/ .w3_agileits_social_media { 

   text-align: center;
   position: absolute;
   left: 4%;
   top: 18em;
   z-index: 99;

} .w3_agileits_social_media ul li { 

   list-style: none;
   margin-bottom: 1em;

} .w3_agileits_social_media ul li a { 

   display: block;
   color: #fff;
   text-decoration: none;
    font-size: 14px;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   line-height: 38px;
   background: transparent;
   box-shadow: 0px 0px 5px #fbfcff;

} .w3_agileits_social_media ul li a:hover { 

   color: #02c1ee;

} p.ab { 

   text-transform: uppercase;
   color: #fff;
   letter-spacing: 3px;
   font-weight: bold;
   font-size: 14px;
   transform: rotate(-90deg);
   left: -0.4%;

bottom: 20%; 

   position: absolute;
   z-index: 99;

} /*--//social_media_icons_style--*/

.thim-click-to-bottom { position: absolute; bottom: 18%; 

   left: 49%;
   height: 40px;
   font-size: 40px;
   line-height: 40px;
   -webkit-animation: bounce 2s infinite ease-in-out;
   z-index: 99;

} .thim-click-to-bottom i { 

   color: #ddd;

} .rotate a { 

   border: 2px solid #ddd;
   font-size: 20px;
   padding: 10px;
   line-height: 65px;

border-radius: 30px; 

   text-align: center;

} @-webkit-keyframes bounce { 0%, 20%, 60%, 100% { -ms-transform: translateY(0); } 0%, 20%, 60%, 100% { -o-transform: translateY(0); } 0%, 20%, 60%, 100% { -moz-transform: translateY(0); } 0%, 20%, 60%, 100% { -webkit-transform: translateY(0); } 

   40%  { -webkit-transform: translateY(-20px); }

80% { -webkit-transform: translateY(-10px); } } /*-- hover-effect --*/

/*--slider--*/

  1. slider2,
  2. slider3 {

box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; margin: 0 auto; }

.rslides_tabs li:first-child { margin-left: 0; }

.rslides_tabs .rslides_here a { background: rgba(255, 255, 255, .1); color: #fff; font-weight: bold; }

.events { list-style: none; }

.callbacks_container { position: relative; float: left; width: 100%; }

.callbacks { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; }

.callbacks li { position: absolute; width: 100%; }

.callbacks img { position: relative; z-index: 1; height: auto; border: 0; }

.callbacks .caption { display: block; position: absolute; z-index: 2; font-size: 20px; text-shadow: none; color: #fff; left: 0; right: 0; padding: 10px 20px; margin: 0; max-width: none; top: 10%; text-align: center; }


.callbacks_nav { position: absolute; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); top: 76%; left: 40px; opacity: 0.7; z-index: 3; text-indent: -9999px; overflow: hidden; text-decoration: none; height: 34px; width: 34px; background: url(T--WHU-China--wiki-left.png) no-repeat 0px 0px; }

.callbacks_nav.next { left: auto; background: url(T--WHU-China--wiki-right.png) no-repeat 0px 0px; right: 47%; }

.callbacks_nav.prev { left: auto; background: url(T--WHU-China--wiki-left.png) no-repeat 0px 0px; left: 47%; }

  1. slider3-pager a {

display: inline-block; }

  1. slider3-pager span {

float: left; }

  1. slider3-pager span {

width: 100px; height: 15px; background: #fff; display: inline-block; border-radius: 30em; opacity: 0.6; }

  1. slider3-pager .rslides_here a {

background: #FFF; border-radius: 30em; opacity: 1; }

  1. slider3-pager a {

padding: 0; }

  1. slider3-pager li {

display: inline-block; }

.rslides { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; }

.rslides li { -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0; }

.rslides li { position: relative; display: block; float: left; }

.rslides img { height: auto; border: 0; }

.callbacks_tabs { list-style: none; position: absolute; top: 44%; right: 4%; padding: 0; margin: 0; display: block; z-index: 99; }

.slider-top span { font-weight: 600; }

.callbacks_tabs li { display: block; margin: 5px 0px; }


/*----*/

.callbacks_tabs a { 

   border: 2px solid #fff;
   width: 35px;
   height: 35px;
   line-height: 30px;

border-radius: 50%; 

   color: #fff;
   display: block;
   text-align: center;

}

.callbacks_here a { background: #02c1ee; 

   border: 2px solid #02c1ee;

} .slider { 

   position: relative;

} /*-- //slider --*/

/*-- booking-form--*/ .book-form ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 

 color: #9a9797;

} .book-form::-moz-placeholder { /* Firefox 19+ */ 

 color: #9a9797;

} .book-form::-ms-input-placeholder { /* IE 10+ */ 

 color: #9a9797;

} .book-form::-moz-placeholder { /* Firefox 18- */ 

 color: #9a9797;

} .book-form label { 

   font-size:15px;
   color: #333;
   text-align: left;
   display: inline-block;
   float: left;
   font-weight: 600;
   margin-bottom: 10px;
   letter-spacing: 1px;

} .book-form label span { 

   margin-right: 5px;
   color: #02c1ee;

} .book-form input[type="text"],.book-form input[type="date"],.book-form input[type="text"],.book-form input[type="email"] { 

   width: 100%;
   color: #9a9797;
   outline: none;
    font-size: 15px;
   padding: 10px 15px;
   letter-spacing: 1px;
   border: 2px solid #fff;
   -webkit-appearance: none;
   margin-bottom: 1em;
   background: #333;

} .book-form form input[type="submit"] { 

   background: #02c1ee;
   color: #FFFFFF;
   border: 2px solid #02c1ee;
   padding: 8px 15px;
   font-size: 15px;

font-weight: 600; 

   outline: none;
   -webkit-transition: 0.5s all;
   -moz-transition: 0.5s all;
   -o-transition: 0.5s all;
   -ms-transition: 0.5s all;
   text-transform: uppercase;
   width: 100%;

cursor: pointer; 

   letter-spacing: 1px;
   margin-top: 2.3em;
   -webkit-appearance: none;

} select.form-control:not([size]):not([multiple]) { 

   height: calc(2.25rem + 10px);

} .book-form { } .book-form p { 

   color: #fff;
   font-size: 24px;
   margin-bottom: .8em;
   letter-spacing: 5px;
   word-spacing: 7px;
   text-transform: uppercase;

} .book-form select.form-control { 

   outline: none;
   font-size: 15px;
   padding: 7px 10px;
   letter-spacing: 1px;
   width: 100%;
   line-height: 25px;
   background: #333;
   color: #9a9797;
   border: 2px solid #fff;

box-shadow:none!important; } .form-date-w3-agileits.second-agile { 

   width: 30%;

} .form-date-w3-agileits.second-agile,.form-time-w3layouts.second-agile,.form-left-agileits-w3layouts.second-agile,.form-left-agileits-w3layouts.bottom-w3ls.second-agile { 

   margin-right:0!important;

padding:0!important; } .form-left-agileits-w3layouts.bottom-w3ls { 

   padding:0!important;

} .book-form input[type=submit]:hover { 

   border: 2px solid #02c1ee;
    color: #02c1ee;
   background: none;

} .form-control { 

   border-radius: 0rem;

} .booking h3 { 

   font-size: 22px;
   color: #333;
   letter-spacing: 3px;
   font-weight: 700;
   text-transform: uppercase;

} /*-- //booking-form--*/

/*-- bottom --*/ .bottom { 

   background: #02c1ee;

} .bottom-grids h4 { 

   font-size: 25px;
   letter-spacing: 5px;
   color: #eee;

} .bottom-grids h3 { 

   font-size: 50px;
   color: #eee;
   font-weight: 700;
   letter-spacing: 2px;

text-transform: capitalize; } .bottom-grids .grid1 a { 

   font-size: 15px;
    display: inline-block;
   color: #02c1ee;
   letter-spacing: 2px;
   text-transform: uppercase;
   font-weight: 600;
   background: #fff;
   padding: 13px 30px;
   border-radius: 35px;

} .bottom-grids .grid1 a:hover,.welcome-grids a:hover { 

   color: #fff;
   background: #333;

} .bottom-grids img { 

   border: 4px solid #fff;

} a.arrow-2 { 

   font-size: 60px;
   color: #eee;
   margin-top: .8em;
   display: inline-block;
   outline: none;

} /*-- bottom --*/

/*-- welcome --*/ .welcome-grids h4 { 

   color: #999;
   text-transform: capitalize;
   font-size: 20px;

} .welcome-grids h3 { 

   font-size: 24px;
   color: #333;
   font-weight: 600;
   line-height: 34px;
   letter-spacing: 2px;
   text-transform: uppercase;

} .welcome-grids p { 

   color: #555;
   font-size: 15px;
   letter-spacing: 1px;
   line-height: 28px;

} .welcome-grids a { 

   font-size: 15px;
   display: inline-block;
   color: #fff;
   letter-spacing: 2px;
   text-transform: uppercase;
   font-weight: 600;
   background: #02c1ee;
   padding: 13px 30px;
   border-radius: 35px;

} .position { padding: 12px; 

   border: 4px solid #666;

} .welcome-grid3 img { padding: 12px; 

   border: 4px solid #02c1ee;

} h2.heading,h3.heading { 

   font-size: 50px;
   text-transform: capitalize;
   font-weight: 600;
   letter-spacing: 5px;
   color: #3a3a3a;

} /*-- welcome --*/

/*-- //services --*/ /*-- mid --*/ .list-inline> li { 

   margin: 1.2em 0;
   display: block;
   padding: 0;

} .list-inline> li a{ 

   display: block;

} .mid-text-info h4 { 

   color: #fff;

font-size: 16px; letter-spacing: 1px; 

   line-height: 26px;

} .news-right h4{ 

   font-size: 26px;
   color: #f39a48;
   letter-spacing: 5px;
   font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.37);

} .mid-text-info p { margin-top: 0.3em; 

   letter-spacing: 1px;
   font-family: initial;
   color: #ccc;
   text-decoration: underline;

} .list-inline> li a img { 

   width: 25%;
   border-radius: 50%;
   background: #ffffff;
   padding: .3em;

} .desoSlide-wrapper { 

   position: relative;
   text-align: center;
   overflow: hidden;

} .desoSlide-overlay { 

   z-index: 10;
   color: #fff;
   font-size: 1em;
   text-align: left;
   font-weight: 300;
   line-height: 2em;
   padding: 2.5em;
   opacity: 0.8 !important;
   filter: alpha(opacity=100);
   background: #02c1ee;
   width: 50% !important;
   position: absolute;
   top: 18% !important;
   left: -50% !important;
   -webkit-transition: .5s all;
   -moz-transition: .5s all;
   transition: .5s all;

} .desoSlide-wrapper img { 

   width: 100%;
   background: rgb(255, 255, 255);
   padding: .4em;

} .mid-text-info { 

   float: right;
   width: 70%;

} .desoSlide-overlay .btn.btn-primary.play { 

   color: #fff;
   font-size:1.4em;

margin-bottom: .5em; 

   font-weight: 700;

} .desoSlide-wrapper:hover .desoSlide-overlay { left: 0% !important; } .desoSlide-overlay ul li{ display:block; } .desoSlide-overlay ul li a { 

   display: block;

padding: 1em; -moz-opacity: 0.7; opacity: 0.7; } .desoSlide-overlay ul li a:hover { -moz-opacity: 1; 

   opacity: 1;

} .desoSlide-overlay ul li a span.glyphicon { 

   font-size: 1.3em;
   color: #fff;

} .desoSlide-overlay ul li a h6 { 

   font-size: 0.9em;
   color: #fff;
   margin-top: .5em;

} section.middle-sec-agileinfo-w3ls{ background: -webkit-linear-gradient(rgba(23, 22, 23, 0.2), rgba(23, 22, 23, 0.5)), url(../images/banner5.jpg) no-repeat; background: -moz-linear-gradient(rgba(23, 22, 23, 0.2), rgba(23, 22, 23, 0.5)), url(../images/banner5.jpg) no-repeat; background: -ms-linear-gradient(rgba(23, 22, 23, 0.2), rgba(23, 22, 23, 0.5)), url(../images/banner5.jpg) no-repeat; background: linear-gradient(rgba(23, 22, 23, 0.2), rgba(23, 22, 23, 0.5)), url(../images/banner5.jpg) no-repeat; background-size: cover;

} section.middle-sec-agileinfo-w3ls h3.heading{ color: #fff; } /*-- //mid --*/

/*-- //featured_services --*/

.featured_services { text-align: center; }

.w3_agile_services_grid { text-align: left; }

.w3_service_grid_left_grid { width: 120px; height: 120px; border: 1px solid #212121; margin: 0 auto; padding-top: 1em; position: relative; overflow: hidden; }

.w3_service_grid_left_grid img { margin: 0 auto; }

.w3l_service_grid_left h4 { font-size: 1.1em; color: #fff; font-weight: 600; margin: 1em 0; letter-spacing: 3px; line-height: 1.5em; text-transform: uppercase; }

.w3l_service_grid_left p { color: #fff; line-height: 2em; margin-bottom: 1.5em; }

.w3_agile_service_more a { font-size: 1.2em; color: #212121; letter-spacing: 2px; text-decoration: none; }

.w3_agile_service_more a i { padding-left: 1em; color: #48b7ec; }

.w3_agile_service_more a:hover { color: #48b7ec; }

.w3_agile_service_more a:hover i { color: #212121; }

.w3_service_grid_left_grid img { transition: transform 0.5s; transform: scale(1.10); -webkit-transform: scale(1.10); -moz-transform: scale(1.10); -o-transform: scale(1.10); -ms-transform: scale(1.10); }

.w3l_service_grid_left:hover .w3_service_grid_left_grid img { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); }

.w3l_service_grid_left:hover .w3_service_grid_left_grid { border: 1px solid #48b7ec; }

.agile_services_grid_pos { position: absolute; bottom: -13%; left: 6%; width: 55px; height: 55px; background: #02c1ee; border-radius: 50px; border: 2px solid #fff; text-align: center; }

.agile_services_grid_pos i { font-size: 1.3em; color: #fff; line-height: 2.5em; }

.agile_services_grid figure { margin: 0; padding: 0; overflow: hidden; }


/* Rotate */

.hover06 figure img { -ms-transform: rotate(15deg) scale(1.4); -o-transform: rotate(15deg) scale(1.4); -moz-transform: rotate(15deg) scale(1.4); -webkit-transform: rotate(15deg) scale(1.4); transform: rotate(15deg) scale(1.4); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; -ms-transition: .3s ease-in-out; }

.hover06 figure:hover img, .w3_agile_services_grid:hover .hover06 figure img { -webkit-transform: rotate(0) scale(1); transform: rotate(0) scale(1); -moz-transform: rotate(0) scale(1); -o-transform: rotate(0) scale(1); -ms-transform: rotate(0) scale(1); }

.agile_services_grid { position: relative; }

.w3_agile_services_grid h4 { 

   font-size: 1.2em;
   color: #111;
   margin: 2em 0 0.5em;
   letter-spacing: 4px;
   font-weight: 600;
   text-transform: uppercase;

} .w3_agile_services_grid p { 

   color: #555;
   font-size: 15px;
   letter-spacing: 1px;
   line-height: 28px;

} .agile_inner_info a { 

   font-size: 14px;
   display: inline-block;
   color: #fff;
   letter-spacing: 3px;
   text-transform: uppercase;
   font-weight: 600;
   background: #02c1ee;
   padding: 14px 40px;
   border-radius: 35px;

} .agile_inner_info a:hover { 

   background: #333;

} /*-- //featured_services --*/

/*-- team --*/ .team{ } .wthree_head1{ color:#fff; } .agileits_team_grid_figure,.agileits_team_grid_figure_social { 

   float: left;

} .agileits_team_grid_figure img { 

   border: 5px solid #fff;
   border-radius: 50%;
   margin: 0 auto;
   text-align: center;
    margin-left: 2em;
   width: 130px;
   height: 130px;

} .agileits_team_grid_figure_social{ margin: 2em 0 0 0.5em; } .agileits_team_grid h4{ font-size:1.2em; 

   color: #02c1ee;
   font-weight: 600;

margin: 1em 0; 

   text-transform: uppercase;
   letter-spacing: 2px;

} .agileits_team_grid h4 span{ 

   font-size: .7em;
   text-transform: capitalize;
   text-decoration: underline;
   color: #777;

} .agileits_team_grid p{ 

   color: #555;
   font-size: 15px;
   letter-spacing: 1px;
   line-height: 28px;

} .agileits_team_grid { 

   text-align: center;
   padding: 2em 1em;
    border: 1px solid rgba(146, 146, 146, 0.27);

transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -ms-transition: 0.5s all; -o-transition: 0.5s all; } .agileits_team_grid:hover { 

   background: #222;

transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -ms-transition: 0.5s all; -o-transition: 0.5s all; } .w3layouts_banner_info_right ul li,.w3ls_social li{ display:inline-block; } .w3layouts_banner_info_right ul li a,.w3ls_social li a{ 

   width: 33px;
   height: 33px;
   line-height: 33px;
   color: #fff;
   text-align: center;
   display: inline-block;
   font-size: 11px;
   border-radius: 50%;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -o-border-radius: 50%;

} a.w3_agile_facebook{ background:#3b5998; } a.agile_twitter{ background:#1da1f2; } a.w3_agile_dribble{ background:#ea4c89; } a.w3_agile_vimeo{ background:#1ab7ea; } a.w3_agile_facebook:hover { 

   background: #84a3e3;

} a.agile_twitter:hover{ background:#68b8e9; } a.w3_agile_dribble:hover{ background:#f782af; } a.w3_agile_vimeo:hover{ background:#5acef3; } /*-- //team --*/

/*-- footer --*/ footer { 

   background: #57BDFC;

} .footer-grids a { 

   color: #fff;
   font-size: 18px;
   letter-spacing: 3px;
   font-weight: 600;
   text-transform: uppercase;

} .footer-grids i { 

   color: #02c1ee;
   margin-right: 10px;

} .footer-grids { 

   border-bottom: 1px solid #464646;

} /*-- //footer --*/ p.para { 

   margin: 0;
   font-size: 0.95em;
   color: #a5a3a3;
   line-height: 2em;
   letter-spacing: 1px;

} .subscribe-grid { 

   margin: 0 auto;
   width: 70%;

} .subscribe-grid h5 { 

   color: #fff;
   text-transform: capitalize;
   font-size: 19px;
    letter-spacing: 2px;
   font-weight: 600;

} .subscribe-grid p.para{ 

   color: #aaa;
   font-size: 16px;
   letter-spacing: 1px;
   padding: 1em 0 2em;

text-transform: lowercase; } .subscribe-grid p { 

   color: #02c1ee;
   font-size: 16px;
   letter-spacing: 1px;
   padding: 1em 0 2em;

text-transform: capitalize; } .subscribe-grid p span { 

   color: #fff;
    font-weight: 600;
   margin: 0 5px;
   text-decoration: underline;

}

.subscribe-grid form { position: relative; 

    width: 70%;
   margin: auto;

} .subscribe-grid form:hover input[type="email"] { border: solid 2px rgba(255, 255, 255, 0.14); -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition: 0.5s all; -ms-transition: 0.5s all; transition: 0.5s all; }

.subscribe-grid input[type="email"] { display: inline-block; 

    background: transparent;

border: solid 2px #32343a; width: 100%; outline: none; padding: 1em 4em 1em 1em; font-size: 1em; color: #fff; border-radius: 0px; letter-spacing: 1px; }

.subscribe-grid i.fa.fa-paper-plane-o { font-size: 1.2em !important; }

.subscribe-grid button.btn1 { color: #fff; border: none; width: 65px; height: 60px; position: absolute; right: 0; bottom: 0; text-align: center; cursor: pointer; background: transparent; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition: 0.5s all; -ms-transition: 0.5s all; transition: 0.5s all; }

.subscribe-grid button.btn1:focus { outline: none; }

button.btn1:hover { background: none; color: #ffa200; }

button.btn1:hover i.fa.fa-paper-plane-o { color: #ffa200 !important; } .form-control:focus { 

   box-shadow: none;

} /*-- copy right --*/ .copyright{ 

   background: #1d1d1d;

} .copyright p{ color :#fff; 

    font-size: 15px;
   letter-spacing: 2px;
   text-transform: capitalize;

} .copyright p a{ color : #02c1ee; } .copyright p a:hover{ color : #fff; } /*-- //copy right --*/


/*-- inner page banner --*/ .innerpage-banner { 

   background: url(T--WHU-China--wiki-home-banner1%281600%29.jpg) no-repeat center;
   background-size: cover;
   min-height: 300px;

}

.layer1{ 

     background: rgba(37, 37, 37, 0.4);

min-height: 300px; } /*-- //inner page banner --*/

/*-- contact --*/ .w3ls_map iframe { width: 100%; min-height: 320px; 

   border: 5px solid #f39a48;
   padding: 5px;

}

.contact_wthreerow, .agileits_mail_grid_right_grid:nth-child(2) { margin-top: 3em; }

.w3l_contact_form { padding-right: 5em; }

.contact_wthreerow h4 { 

   color: #333;
   letter-spacing: 1px;
   margin-bottom: 1em;
   font-weight: 600;

}

.w3l_contact_form input[type="text"], .w3l_contact_form input[type="email"], .w3l_contact_form textarea { outline: none; 

   width: 100%;
   padding: .9em 1em;
   letter-spacing: 2px;
   font-size: 15px;
   color: #888;

border: none; border: 1px solid #bbb; 

   border-left: 4px solid #bbb;

background: none; 

   border-radius: 3px;

}

.w3l_contact_form input[type="email"] { margin: 1.5em 0; }

.w3l_contact_form textarea { min-height: 120px; resize: none; margin: 1.5em 0; }

.w3l_contact_form input[type="submit"] { 

   outline: none;
   padding: 10px 40px;
   font-size: 16px;
   color: #fff;
   border: none;
   background: #02c1ee;
   text-transform: capitalize;
   font-weight: 600;
   letter-spacing: 2px;

-webkit-transition: .5s all; -moz-transition: .5s all; transition: .5s all; }

.w3l_contact_form input[type="submit"]:hover { background: #333; color: #fff; }

ul.contact_info li { 

   list-style-type: none;
   margin-top: 1em;
   letter-spacing: 1px;
   color: #888;
   font-size: 1em;

}

ul.contact_info li span.fa { color: #fff; background: #02c1ee; width:40px; height:40px; text-align: center; line-height: 40px; border-radius: 100%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; margin-right: 1em; font-size: .9em; }

ul.contact_info li span.left { margin-left: 53px; } ul.contact_info li a { 

   color: #888;

text-decoration: none; }

ul.contact_info li a:hover { color: #02c1ee; } .agileits_mail_grid_right_grid p { 

   color: #555;
   font-size: 15px;
   letter-spacing: 1px;
   line-height: 28px;
   margin-bottom: 2em;

} .w3-about h4 { 

   text-transform: uppercase;
   margin: 0em 0 1em;
   color: #000;
   font-size: 1.4em;
   line-height: 32px;
   text-align: left;
   font-weight: 500;

} .last h4 { 

   text-align: center;
   text-transform: capitalize;

}

.about-top p { 

   text-align: left;

} .last p { 

   text-align: center;

} .middle-img img { 

   width: 100%;

} /*-- //contact --*/

/*-- welcome bottom --*/ .welcome-bottom{ background: url(../images/banner5.jpg) no-repeat center; background-size: cover; background-attachment: fixed; } .welcome-bottom h4 { 

   font-size: 40px;
   color: #fff;
   letter-spacing: 3px;
   font-weight: 300;
   line-height: 60px;
   text-transform: capitalize;

} .welcome-bottom p { 

   font-size: 17px;
   color: #fff;
   letter-spacing: 3px;
   text-transform: capitalize;
   font-style: italic;

border-left: 3px solid #fff; padding-left: 15px; margin-left: 10px; } .welcome-bottom-layer{ 

     background: rgba(37, 37, 37, 0.4);

} .welcome-bottom a { 

   font-size: 15px;
   display: inline-block;
   color: #fff;
   letter-spacing: 2px;
   text-transform: uppercase;
   font-weight: 600;
   background: #02c1ee;
   padding: 13px 30px;
   border-radius: 35px;

} .welcome-bottom a:hover { 

   color: #333;
   background: #fff;

}

/*-- //welcome bottom --*/

/*-- testimonials --*/ .agileinfo_team_grid1 { 

   padding: 2em 1em;
   border: 2px solid #333;
   border-left: 4px solid #02c1ee;

} .agileinfo_team_grid1_pos { 

   position: absolute;
   top: -50%;
   left: 0%;
   width: 40%;
   padding: .3em;
   background: #ffffff;

} .agileinfo_team_grid1_text { 

   padding-left: 13em;
   position: relative;

} .agileinfo_team_grid1_text h4 { 

   padding: .6em 1em;
   background: #02c1ee;
   color: #ffffff;

float: left; 

    letter-spacing: 2px;
   text-align: center;
   font-size: 1em;
   text-transform: capitalize;

} .agileinfo_team_grid1_text h5 { 

   font-size: 13px;
   padding: .5em 1em;
   background: #ffffff;
   color: #000;

float: left; 

   text-align: center;

} .agileinfo_team_grid1_text p { 

   margin: 1em 0 0 0em;
   color: #555;
   line-height: 2em;
   text-align: left;

} .agileinfo_team_grid { 

   margin: 2em 0 0;
    float: left;

} .social-nav { 

   padding: 0;
   list-style: none;
   display: inline-block;
   margin:2em 0 0;

} .social-nav li { 

   display: inline-block;

} .social-nav a { 

   display: inline-block;
   float: none;
   width: 30px;
   height: 30px;
   text-decoration: none;
   cursor: pointer;
   text-align: center;
   line-height: 30px;
   background: #000;
   position: relative;
   -webkit-transition: 0.5s;
   -moz-transition: 0.5s;
   -o-transition: 0.5s;
   transition: 0.5s;

} .model-3d-0 a { 

   background:#5C5B5B;
   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -ms-transform-style: preserve-3d;
   -o-transform-style: preserve-3d;
   transform-style: preserve-3d;

} .model-3d-0 .front, .model-3d-0 .back { 

   width: 30px;
   height: 30px;
   background:#FFDF00;
   position: absolute;
   top: 0;
   left: 0;
   -webkit-transform: translateZ(18px);
   -moz-transform: translateZ(18px);
   -ms-transform: translateZ(18px);
   -o-transform: translateZ(18px);
   transform: translateZ(18px);
   -webkit-backface-visibility: visible;
   -moz-backface-visibility: visible;
   -ms-backface-visibility: visible;
   -o-backface-visibility: visible;
   backface-visibility: visible;

color:#212121; font-size:12px; } .model-3d-0 .back { 

   -webkit-transform: rotateX(90deg) translateZ(18px);
   -moz-transform: rotateX(90deg) translateZ(18px);
   -ms-transform: rotateX(90deg) translateZ(18px);
   -o-transform: rotateX(90deg) translateZ(18px);
   transform: rotateX(90deg) translateZ(18px);
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   -o-backface-visibility: hidden;
   backface-visibility: hidden;

} .twitter .back,.facebook .back,.instagram .back,.pinterest .back{ 

   background:#fff;

} .model-3d-0 a:hover { 

   -webkit-transform: rotateX(-90deg);
   -moz-transform: rotateX(-90deg);
   -ms-transform: rotateX(-90deg);
   -o-transform: rotateX(-90deg);
   transform: rotateX(-90deg);

} .model-3d-0 a:hover .back { 

   -webkit-backface-visibility: visible;
   -moz-backface-visibility: visible;
   -ms-backface-visibility: visible;
   -o-backface-visibility: visible;
   backface-visibility: visible;

} .w3_agile_social li a i{ color: #212121; 

   font-size: 12px;

} /*-- slider --*/

  1. slideshow

{ position: relative; overflow: hidden;

margin: 0 auto; max-width:100%;

/* No iOS tap highlight */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

/* No text selection */ -webkit-user-select: none; -moz-user-select: none;

/* No IE10 default touch actions */ -ms-touch-action: none; }

#slideshow .strip { position: relative; }

#slideshow .strip, #slideshow .slide { left: 0; top: 0;

width: 100%; height: 100%; }

#slideshow .strip, #slideshow .slide, #slideshow > button { -webkit-perspective: 1000; -webkit-backface-visibility: hidden; }

#slideshow .slide { position: absolute; display: none; text-align: center; outline: none; }

#slideshow .slide.sticky { display: block; }

#slideshow > button { position: absolute; z-index: 1; bottom: 15%; left: 0%; padding: 0; }

#slideshow button.next { left: auto; right: 90%; }

#slideshow .markers { text-align: right; }

#slideshow ul, #slideshow li { display: block; overflow: hidden;

margin: 0; padding: 0;

list-style: none; }

#slideshow li { float: left; }

#slideshow li + li { margin-left: 10px; }

.advanced #slideshow ul { display: inline-block; }


/* Theme ----------------------------------- */

#slideshow .strip { padding-bottom:33.5%; }

#slideshow button { margin: 0;

background: none; border: 0; cursor: pointer;

-webkit-appearance: none; -moz-appearance: none; outline: none; }

.advanced #slideshow > button { position: absolute; top: 50%;

display: block;

width: 40px; height: 36px;

margin-top: -40px; padding-right: 10px; padding-left: 7px; }

#slideshow > button::-moz-focus-inner { margin: -1px; padding: 0; }

#slideshow > button b { display: block;

width: 50px; height: 50px;

background: #02c1ee url(T--WHU-China--wiki-left.png) no-repeat 4px 8px;

text-indent: -10000px; outline: none; }

#slideshow button.next { padding-right: 7px; padding-left: 10px; }

#slideshow button.next b { left: 10px; }

#slideshow button.next b { background: #02c1ee url(../images/next1.png) no-repeat 10px 8px; }

#slideshow .markers { height: 15px; padding: 15px 10px;

text-align: center; font-size: 0.8em; display: none; }

/* Hide buttons when disabled */ #slideshow.disabled > button { display: none; }

#slideshow .markers button { display: inline-block;

padding: 0;

width: 10px; height: 10px;

background: #575757; border-radius: 5px;

text-indent: -10000px; opacity: 0.3; }

#slideshow .markers button { margin-left: 10px; }

#slideshow .markers button.sticky { background-color: #3172dd; opacity: 0.75; }

/* Bigger markers for touch */ #slideshow.touch .markers button { width: 16px; height: 16px;

border-radius: 8px; }

#slideshow.touch .markers button + button { margin-left: 10px; } button.next.disabled{ opacity: .5; } /*-- //slider --*/ /*-- //testimonials --*/


/*-- Pricing --*/

.price-main-info .card-header h4 { color: #f7f7f7; 

    font-size: 2em;
   font-weight: 600;
   letter-spacing: 2px;

line-height: 1em; padding-top: 2em; }

.price-main-info .card-header h4 span { display: block; font-weight: 100; }

.price-main-info .card-header { background: url(../images/price.jpg)no-repeat 0px 0px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -ms-background-size: cover; background-size: cover; min-height: 192px; }

.price-main-info .card-body { background: #e9e9e9; padding: 2em; }

.pricing-card-title span { font-size: .5em; display: inline-block; color: #000; }

.price-main-info small.text-muted { font-size: 0.5em; }

ul.list-unstyled li { font-size: 14px; color: #7d7d7d; letter-spacing: 1px; line-height: 2.2em; }

.price-main-info h5.card-title { font-size: 2em; color: #1c1c1d; font-weight: 700; }

.btn-outline-primary { color: #000000; background-color: transparent; background-image: none; border-color: #00bce4; font-size: 16px; letter-spacing: 1px; }

.btn-outline-primary:hover { color: #fff; background-color: #00bce4; border-color: #0aa4c5; }

.card-deck .card { padding: 0px; }

.row.prime { margin: 0; }

.price-main-info.card { border-radius: 0; border: none; background: none; } a.price{ 

   font-size: 13px;
   display: inline-block;
   color: #fff;
   letter-spacing: 1px;
   text-transform: uppercase;
   font-weight: 600;
   background: #02c1ee;
   padding: 11px 30px;
   border-radius: 35px;

} a.price:hover { 

   background: #333;

}

/*--// Pricing --*/


/*-- gallery --*/ .galry-grid.galry-text { 

   padding: 1em;

} .gallery p { 

   font-size: 1.5em;
   color: #fff; 
   letter-spacing: 1px;

} .galry-grid.galry-grid-right { 

   padding-left: 1em;

} .galry-grid.glry-one { 

   padding-bottom: 1em;

} .galry-text { 

   padding: 3em 4.5em;
   background: #02c1ee;
   margin-bottom: 1em;
   text-align: center;

} .galry-grid a { 

   display: block;

overflow: hidden; 

   position: relative;

} .glry-two.glry-left { 

   float: left;
   width: 64.5%;
   margin-right: 1em;
   overflow: hidden;

} .glry-two.glry-right { 

   float: left;
   width: 33.1%;

overflow: hidden; } .gallery-grids:nth-child(1) { 

   padding: 0;

} .gallery-grids:nth-child(2) { 

   padding-right: 0;

} .glly-bottm .glry-two.glry-left { 

   margin: 0 0 0 1em;

} .galry-grid.grid-top-rgt { 

   margin-bottom: 1.1em;

} a.w3ls-bottom-img { 

   margin-top: 1em;
   display: block;

} .w3agile-text { 

   background: rgba(0, 0, 0, 0.58);
   position: absolute;
   width: 100%;
   height: 100%;
   bottom: -100%;
   left: 0;

transition:.5s all; } .galry-grid a:hover .w3agile-text{ bottom: 0%; } .w3agile-text h5 { 

   font-size: 2.5em;
   color: #fff;
   text-align: center;
   margin-top: 4em;

} .w3agile-text.w3agile-text-small h5 { 

   margin-top: 2.2em;
   font-size: 2em;

} .w3agile-text.w3agile-text-small1 h5 { 

   margin-top: 3em;

} img.zoom-img{ width:100%; -webkit-transform: scale(1, 1); 

   transform: scale(1, 1);

-moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -ms-transition-duration: .5s; -o-transition-duration: .5s; } .galry-grid a:hover img.zoom-img{ -webkit-transform: scale(1.8); transform: scale(1.8); -moz-transform: scale(1.8); -ms-transform: scale(1.8); -o-transform: scale(1.8); -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -ms-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-duration: 750ms; -moz-transition-duration: 750ms; -ms-transition-duration: 750ms; -o-transition-duration: 750ms; transition-duration: 750ms; overflow: hidden; } /*-- //gallery --*/

/*-- offers --*/ .offer h3 { 

   background: #333;
   color: #fff;
   font-size: 22px;
   width: 100px;
   height: 100px;
   line-height: 100px;
   text-align: center;
   border-radius: 50%;

transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -ms-transition: 0.5s all; -o-transition: 0.5s all; } .offer h3:hover{ background: #02c1ee; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -ms-transition: 0.5s all; -o-transition: 0.5s all; } .offer-grid{ position: relative; } .offer-grid h4{ 

   font-size: 18px;
   color: #333;
   font-weight: 600;
   line-height: 34px;
   letter-spacing: 2px;
   text-transform: uppercase;

} .offer-grid p{ 

   color: #555;
   font-size: 15px;
   letter-spacing: 1px;
   line-height: 24px;

} .offer{ position: absolute; 

   position: absolute;
   top: -16%;
   right: 5%;
   border: 2px solid #fff;
   border-radius: 50%;

} /*-- offers --*/

/*-- to-top --*/

  1. toTop {
   text-decoration: none;
   position: fixed;
   bottom: 30px;
   right: 2%;
   overflow: hidden;
   z-index: 999;
   width: 34px;
   height: 34px;
   border: none;
   text-indent: 100%;
   background: #fff url(T--WHU-China--wiki-arr.png) no-repeat 1px 1px;
   box-shadow: 0 0 0 20px rgba(123,191,234, 0.32), 0 0 0 10px rgba(255, 255, 255, 0.5);
   border-radius: 50%;

}

  1. toTopHover {
   width: 34px;
   height: 34px;

display: block; overflow: hidden; float: right; opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); } /*-- //to-top --*/


/*-- /Responsive Design --*/

@media(max-width:1440px) { .banner-top,.banner-top1,.banner-top2,.banner-top3,.layer { min-height: 700px; } .banner-info_agile_w3ls { padding-top: 19em; } .w3_agileits_social_media { left: 4.5%; top: 15em; } .bottom-grids h3 { font-size: 47px; } .callbacks_nav.prev { left: 46%; } .callbacks_nav.next { right: 46%; } } @media(max-width:1366px) { .banner-top,.banner-top1,.banner-top2,.banner-top3,.layer { min-height: 660px; } .w3_agileits_social_media { top: 13em; } } @media(max-width:1280px) { .callbacks_nav { top: 80%; } .callbacks_nav.prev { left: 45%; } .callbacks_nav.next { right: 45%; } .thim-click-to-bottom { bottom: 13%; left: 48.7%; } } @media(max-width:1080px) { p.ab { left: -2%; } .bottom-grids h4 { font-size: 22px; letter-spacing: 3px; } .bottom-grids h3 { font-size: 39px; } a.arrow-2 { font-size: 50px; } .welcome-grids h3 { font-size: 22px; letter-spacing: 1px; } .w3_agile_services_grid h4 { font-size: 1.1em; letter-spacing: 3px; } .mid-text-info h4 { font-size: 15px; } .agileits_team_grid_figure img { margin-left: .5em; width: 105px; height: 105px; } .agileits_team_grid p { font-size: 14.5px; letter-spacing: .5px; } .agileinfo_team_grid1_text { padding-left: 10em; } #slideshow button.next { right: 88%; } .price-main-info.card { padding: 0 5px; } .glry-two.glry-left { width: 64%; } ul.contact_info li span.left { margin-left: 0; } } @media(max-width:1024px) { .banner-top,.banner-top1,.banner-top2,.banner-top3,.layer { min-height: 600px; } .thim-click-to-bottom { bottom: 7%; } .callbacks_nav { top: 86%; } p.ab { bottom: 15%; } .banner-info_agile_w3ls { padding-top: 17em; } .banner-info_agile_w3ls h3, .banner-info_agile_w3ls h2 { font-size: 2.8em; letter-spacing: 0px; } .price-main-info .card-header h4 { font-size: 1.8em; letter-spacing: 1px; padding-top: 1.5em; } .price-main-info .card-header { min-height: 170px; } .price-main-info .card-body { padding: 2em 1.5em; } } @media(max-width:991px) { .header-top p { letter-spacing: 1px; font-size: 14px; } .navbar-light .navbar-brand { font-size: 1.1em; } .navbar-light .navbar-toggler { border-color: #fff; background: #02c1ee; } .navbar-toggler { border-radius: 0; } .navbar-nav { background: rgba(0, 0, 0, 0.7); padding: 1em 2em; text-align: center; } .navbar-light .navbar-nav .nav-link { display: inline-block; } li.nav-item { padding: 0 15px 10px; } .bottom-grids h4 { font-size: 20px; letter-spacing: 2px; } .bottom-grids h3 { font-size: 34px; } .agileits_team_grid_figure img { margin-left: 2em; width: 150px; height: 150px; } .footer-grids .col-md-3 { padding: 0; } .desoSlide-overlay { font-size: .8em; padding: 1.5em; width: 80% !important; left: -80% !important; } .footer-grids a { font-size: 16px; letter-spacing: 2px; } .subscribe-grid { width: 100%; } .innerpage-banner,.layer1 { min-height: 250px; } .welcome-bottom h4 { font-size: 32px; letter-spacing: 2px; line-height: 50px; } .agileinfo_team_grid1_text { padding-left: 14em; } .agileinfo_team_grid1_pos { top: -50%; width: 30%; } #slideshow > button { bottom: 0%; } #slideshow button.next { right: 84%; } .galry-text { padding: 2em 1.5em; } .gallery p { font-size: 1.3em; } .glry-two.glry-left { width: 63%; } .w3agile-text h5 { margin-top: 2em; } .w3agile-text.w3agile-text-small h5 { margin-top: 1.8em; font-size: 1.5em; } .w3agile-text.w3agile-text-small1 h5 { margin-top: 1.5em; } .w3l_contact_form { padding-right: 15px; } } @media(max-width:800px) { .banner-info_agile_w3ls h3, .banner-info_agile_w3ls h2 { font-size: 2.5em; letter-spacing: 0px; } .banner-info_agile_w3ls h3 span, .banner-info_agile_w3ls h2 span { padding: 0 0px; } .thim-click-to-bottom { bottom: 12%; left: 47.7%; } .callbacks_nav.prev { left: 42%; } .callbacks_nav.next { right: 42%; } .callbacks_nav { top: 81%; } .bottom-grids h3 { font-size: 29px; } } @media(max-width: 768px) { .w3_agileits_social_media ul li { margin-bottom: .5em; } .w3_agileits_social_media ul li a { font-size: 12px; width: 33px; height: 33px; line-height: 33px; } p.ab { bottom: 19%; left: -5%; } h2.heading, h3.heading { font-size: 45px; letter-spacing: 3px; } } @media(max-width: 736px) { .header-top p { text-align: center; margin: .2em; } header { padding: 1em 0; } .navbar-light .navbar-brand { font-size: .9em; } .banner-info_agile_w3ls h3, .banner-info_agile_w3ls h2 { font-size: 2.2em; letter-spacing: 0px; } .banner-info_agile_w3ls p { font-size: .9em; margin: 1em 0; letter-spacing: 4px; } .banner-top, .banner-top1, .banner-top2, .banner-top3, .layer { min-height: 550px; } .banner-info_agile_w3ls { padding-top: 15em; } p.ab { bottom: 44%; left: -8%; } .w3_agileits_social_media { left: 6.5%; top: 13.5em; } .callbacks_tabs a { width: 30px; height: 30px; font-size: 13px; line-height: 25px; } .callbacks_tabs { top: 39%; } a.arrow-2 { font-size: 30px; margin-top: .2em; } .agile_services_grid_pos { bottom: -15%; left: 5%; } .agileits_team_grid_figure img { margin-left: 1em; width: 120px; height: 120px; } .subscribe-grid p.para { font-size: 15px; } .copyright p { letter-spacing: 1px; } .welcome-bottom h4 { font-size: 28px; letter-spacing: 1px; } .welcome-bottom p { font-size: 15px; } .w3_agile_services_grid h4 { font-size: 1em; } .agileinfo_team_grid1_text { padding-left: 9em; } .agileinfo_team_grid1_text p { font-size: 15px; } #slideshow .strip { padding-bottom: 47.5%; } #slideshow button.next { right: 78%; } .w3agile-text.w3agile-text-small1 h5 { margin-top: 4em; } .w3agile-text h5 { margin-top: 5em; } .w3agile-text h5 { margin-top: 2.5em; } .w3ls_map iframe { min-height: 250px; border: 4px solid #f39a48; } } @media(max-width: 667px) { p.ab { left: -10%; } } @media(max-width:600px) { .banner-info_agile_w3ls { padding: 0 3em; padding-top: 14em; } p.ab { left: -11%; bottom: 42%; } .banner-top, .banner-top1, .banner-top2, .banner-top3, .layer { min-height: 520px; } .thim-click-to-bottom { bottom: 7%; left: 47%; } .callbacks_nav { top: 85%; } .callbacks_nav.prev { left: 41%; } .callbacks_nav.next { right: 41%; } .banner-info_agile_w3ls a { letter-spacing: 2px; font-size: 13px; } .welcome-grids h3 { font-size: 20px; letter-spacing: 0px; } .welcome-grids a { font-size: 14px; letter-spacing: 1px; padding: 11px 30px; } } @media(max-width:568px) { .w3_agileits_social_media { left: 7%; top: 13.5em; } header { padding: 0em 0; } .banner-info_agile_w3ls h3, .banner-info_agile_w3ls h2 { font-size: 2em; } .book-form form input[type="submit"] { margin-top:.3em; } .agileits_team_grids { padding: 0 7em; } .footer-grids .col-md-3 { padding: 0 15px; } h2.heading, h3.heading { font-size: 40px; letter-spacing: 2px; } .innerpage-banner, .layer1 { min-height: 200px; } .offer-grids { padding: 0 4em; } .offer { top: -10%; } .agile_services_grid_pos { bottom: -9%; } } @media(max-width:480px) { p.ab { display: none; } .w3_agileits_social_media { left: 6%; top: 13em; } .banner-info_agile_w3ls { padding: 0 3em; padding-top: 13em; } .bottom-grids h3 { font-size: 25px; } .agileits_team_grids { padding: 0 5em; } .footer-grids a { font-size: 15px; letter-spacing: 1px; } .subscribe-grid p.para { font-size: 14px; } .subscribe-grid h5 { font-size: 17px; letter-spacing: 1px; } .subscribe-grid form { width: 80%; } .thim-click-to-bottom { left: 46%; } .callbacks_nav.prev { left: 38%; } .callbacks_nav.next { right: 38%; } .w3agile-text.w3agile-text-small1 h5 { margin-top: 3em; } } @media(max-width: 414px) { .banner-info_agile_w3ls { padding: 0 2em; padding-top: 13em; } .w3_agileits_social_media { left: 4%; } .agileits_team_grids { padding: 0 4em; } .welcome-grids h4 { font-size: 18px; } .offer-grids { padding: 0 2em; } .agileinfo_team_grid1_pos { width: 60%; position: static; } .agileinfo_team_grid1_text { padding-left: 2em; } #slideshow .strip { padding-bottom: 117%; } #slideshow button.next { right: 69%; } .glry-two.glry-left { width: 96%; float: none; margin: 0; padding: 0; } .glry-two.glry-right { float: none; width: 100%; } .glly-bottm .glry-two.glry-left { margin: 1em 0 0 0em; } .w3agile-text.w3agile-text-small h5 { margin-top: 2.5em; font-size: 2.5em; } .contact_wthreerow h4 { margin-bottom: .8em; font-size: 1.3rem; } ul.contact_info li { font-size: .9em; } } @media(max-width: 384px) { .banner-info_agile_w3ls a { letter-spacing: 1px; font-size: 13px; } .navbar-light .navbar-brand { font-size: .8em; } .banner-info_agile_w3ls h3, .banner-info_agile_w3ls h2 { font-size: 1.8em; } .welcome-grids h3 { font-size: 18px; } .welcome-grids p { font-size: 14px; } h2.heading, h3.heading { font-size: 35px; letter-spacing: 1px; } .news-right h4 { font-size: 25px; letter-spacing: 2px; } .agileits_team_grids { padding: 0 2em; } .welcome-bottom h4 { font-size: 24px; letter-spacing: 1px; line-height: 40px; } #slideshow button.next { right: 65%; } } @media(max-width:375px) { .callbacks_nav.next { right: 37%; } .bottom-grids h3 { font-size: 23px; letter-spacing: 1px; } .welcome-grids h4 { font-size: 17px; } .welcome-grids h3 { font-size: 17px; } .footer-grids a { font-size: 14px; } .subscribe-grid p { font-size: 15px; } .subscribe-grid input[type="email"] { padding: .8em 3em .8em 1em; font-size: .9em; } .subscribe-grid button.btn1 { width: 60px; height: 48px; } .w3agile-text.w3agile-text-small1 h5 { margin-top: 2.5em; } } @media(max-width:320px) { .footer-grids .col-md-3 { padding: 0 8px; } .footer-grids a { font-size: 13px; } .subscribe-grid p.para { font-size: 13.5px; } .subscribe-grid h5 { font-size: 15px; } }}

/*-- //Responsive Design --*/