Template:FJNU-China/slide CSS

.main-slider .carousel-inner .item figure figcaption a,

.btn.btn-primary,

.btn.btn-default {

   background: #FF8724;
   border-bottom: 2px solid #D9731E;
   border-top: 0;
   border-left: 0;
   border-right: 0;
   color: #fff;
   border-radius: 3px;
   -webkit-transition: .2s ease;
   transition: .2s ease;

} /* =========================

   Intro Slider
  =========================
  ================================================== */

.main-slider { overflow: hidden } .main-slider .carousel-inner .item figure { margin: 0 } .main-slider .carousel-inner .item figure img { width: 100% } .carousel-control.left, .carousel-control.right { background: none } .carousel-indicators{ z-index:1; } .carousel { z-index: 0; } .carousel-control {

   border: 4px solid #fff;
   bottom: auto;
   height: 65px;
   margin-top: -50px;
   text-shadow: none;
   top: 50%;
   width: 65px;
   padding-top: 14px;
   border-radius: 100px;
   color: #fff;

} .carousel-control.left {

   left: -100px;
   opacity: 0;
   -webkit-transition: .6s ease;
   transition: .6s ease;

} .carousel-control:hover, .carousel-control:focus {

   color: #FF8724;
   border-color: #FF8724;

} .carousel-control.right {

   right: -100px;
   opacity: 0;
   -webkit-transition: .6s ease;
   transition: .6s ease;

} .main-slider:hover .carousel-control.left {

   left: 30px;
   opacity: 1;

} .main-slider:hover .carousel-control.right {

   right: 30px;
   opacity: 1;

}

/* =========================

   Main Menu
  =========================
  ================================================== */

.main-nav nav {

   margin-bottom: 0;
   -webkit-transition: 1s ease;
   transition: 1s ease;

} .main-slider .carousel-inner .item figure { position: relative } .main-slider .carousel-inner .item figure::before {

   background: rgba(0, 0, 0, 0.4) none repeat scroll 0 0;
   content: "";
   height: 100%;
   position: absolute;
   width: 100%;

} .main-slider .carousel-inner .item figure figcaption {

   bottom: 0;
   left: 6%;
   margin: 0 auto;
   position: absolute;
   right: 6%;
   top: 30%;
   width: 1170px;
   padding: 0 15px;

} .main-slider .carousel-inner .item figure figcaption h1 {

   margin: 0 0 20px 0;
   color: #ffffff;

   font-size: 45px;
   font-weight: 600;
   width: 50%;
   line-height: 50px;
   -webkit-animation-duration: 1.3s;
   animation-duration: 1.3s;
   -webkit-animation-delay: 0s;
   animation-delay: 0s;

} .main-slider .carousel-inner .item figure figcaption p {

 color: #fff;
 font-size: 15px;
 margin-bottom: 30px;
 width: 50%;

} .main-slider .carousel-inner .item figure figcaption a {

   display: inline-block;
   font-size: 20px;
   text-transform: uppercase;
  
   padding: 10px 40px;
   border-bottom-width: 4px;
   margin-bottom: 4px;
   -webkit-animation-duration: 2s;
   animation-duration: 2s;
   -webkit-animation-delay: 0s;
   animation-delay: 0s;

} .main-slider .carousel-inner .item figure figcaption a:hover {

   text-decoration: none;
   border-bottom-color: #FF8724;
   margin-top: 4px;
   margin-bottom: 0;

} .main-slider .carousel-indicators li {

   margin: 0;
   height: 5px;
   width: 50px;
   border-radius: 0;
   background: #fff;
   border: none;
   -webkit-transition: 0.3s ease;
   transition: 0.3s ease;

} .main-slider .carousel-indicators li:hover { background: #ff8724 } .main-slider .carousel-indicators .active {

   background-color: #FF8724;
   height: 5px;
   margin: 0;
   width: 50px;

} .navbar-brand { margin-top: 5px }

/* Responsive Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */ @media only screen and (max-width: 1920px){

   .main-slider .carousel-inner .item figure figcaption{
       top:36%;
   }

} @media only screen and (max-width: 1400px) {

   .main-slider .carousel-inner .item figure figcaption{
       top:30%;
   }

}

@media only screen and (max-width: 991px) {

   .top-consult-btn a {
       display: inline-block;
       margin-right: 15px;
       margin-top: 5px;
       padding: 10px;
   }
   .intro .main-nav ul.main-menu li.search .search-box{
       left: -170px;
   }
   .intro .main-nav ul.main-menu li.search .search-box .search-form::before{
       left: 83%;
   }
   .main-slider .carousel-inner .item figure figcaption{
       padding-left: 40px;
   }
   .main-slider .carousel-inner .item figure figcaption .container h1{
       font-size: 30px;
       line-height: 45px;
   }
   .main-slider .carousel-inner .item figure figcaption {
       left: 0;
       padding: 0 100px !important;
       right: 0;
       top: 30%;
       width: 100%;
   }
   .main-slider .carousel-inner .item figure figcaption h1{
       width:100%;
   }

@media only screen and (max-width: 800px){

   .main-slider .carousel-inner .item figure figcaption {
       left: 0;
       padding: 0 100px;
       right: 0;
       top: 30%;
       width: 100%;
   }
   .main-slider .carousel-inner .item figure figcaption .container h1 {
       font-size: 30px;
       line-height: 40px;
       margin: 0 0 25px 0;
       width: 80%;
   }
   .main-slider .carousel-inner .item figure figcaption p{
       width:75%;
   }

}

@media only screen and (max-width: 768px) {

   .main-slider .carousel-inner .item figure figcaption {
       left: 0;
       padding: 0 100px !important;
       right: 0;
       top: 30%;
       width: 100%;
   }
   .main-slider .carousel-inner .item figure figcaption h1{
       width:100%;
   }
   .header-top-contact ul{
       text-align: center;
       margin-bottom: 15px;
   }
   .header-top-social ul{
       text-align: center;
   }
   .intro .main-nav{
       position: inherit;
       background: #252525; 
   }
   .navbar-toggle {
     background: transparent none repeat scroll 0 0;
   }
   .navbar-toggle .icon-bar {
     background: #ddd none repeat scroll 0 0;
   }
   .intro .main-nav ul.main-menu{
       float:left;
       margin: 10px 0 20px 0;
   }
   .intro .main-nav ul.main-menu li.active a::before, .intro .main-nav ul.main-menu li.active a::after, .intro .main-nav ul.main-menu li a:hover::before, .intro .main-nav ul.main-menu li a:hover::after{
       content:none;
   }
   .intro .main-nav ul.main-menu li.active a, .intro .main-nav ul.main-menu li a:hover{
       color: #FF8724;
   }
   .intro .main-nav ul.main-menu li.search .search-box{
       left:40px;
       top:0;
   }
   .intro .main-nav ul.main-menu li.search .search-box .search-form::before {
     left: -3px;
     top: 11px;
     transform: rotate(47deg);
   }
   .carousel-control {
     height: 50px;
     padding-top: 7px;
     width: 50px;
   }
   .main-slider .carousel-inner .item figure figcaption .container h1 {
       font-size: 30px;
       line-height: 40px;
       margin: 0 0 25px 0;
       width: 80%;
   }
   .main-slider .carousel-inner .item figure figcaption p{
       width:75%;
   }
   .main-slider .carousel-inner .item figure figcaption{
       padding-left: 30px;
   }
   

@media only screen and (max-width: 640px) {

   .main-slider .carousel-inner .item figure figcaption {
       left: 80px;
       top: 40px;
       padding-left:0;
       width:100%;
   }
   .intro .main-nav ul.main-menu li ul.dropdown-menu{
       background:#000;
   }
   .main-slider .carousel-inner .item figure figcaption {
     left: 0px;
     top: 15px;
     padding:70px !important;
     width:100%;
   }
   .intro .main-nav ul.main-menu li ul.dropdown-menu {
       background: transparent none repeat scroll 0 0;
       left: 0;
       margin-left: 20px;
       opacity: 1;
       position: static;
       visibility: visible;
       border: none;
       box-shadow: none;
   }
   .intro .main-nav ul li ul li ul {
       background: transparent none repeat scroll 0 0;
       border: 0 none;
       box-shadow: none;
       left: 0;
       margin-left: 30px;
       opacity: 1;
       padding: 10px;
       position: static;
       visibility: visible;
       width: 100%;
   }

}

@media only screen and (max-width: 480px) {

   .carousel-control{
       display:none;
   }
   .main-slider .carousel-inner .item figure figcaption .container h1 {
     font-size: 20px;
     margin: 0 0 20px 0;
     width: 100%;
       line-height: normal;
   }
   .main-slider .carousel-inner .item figure figcaption {
     left: 0px;
     top: 15px;
     padding:0 !important;
     width:100%;
   }
   .main-slider .carousel-inner .item figure figcaption .container a {
     font-size: 15px;
     padding: 5px 10px;
   }
   .main-slider .carousel-inner .item figure figcaption p{
       display:none;
   }