<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Theme Made By www.w3schools.com - No Copyright -->
<title>Bootstrap Theme Company Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="costume.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Theme Made By www.w3schools.com - No Copyright -->
<link rel="stylesheet" type="text/css" href="Slider/nnslider.css">
<link href="Slider/jquerysctipttop.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Theme Made By www.w3schools.com - No Copyright -->
<style>
body {
font-family:Century Gothic!important;
}
.top-section{ width:100%; background:#333; font-size:12px; color:#fff; height:30px;}
.top-section ul{ margin:0px; padding:0px; float:right;}
.top-section ul li{ list-style-type:none; float:left; padding:0 10px; line-height:30px;}
.top-section ul li a{ text-decoration:none; color:#FFF;}
.container{ width:1170px; margin:0 auto;}
.navbar-fixed-top{ top:auto!important; position:relative;}
.navbar{ margin-bottom:0px!important;}
}
.navbar {
margin-bottom: 0;
background-color: #fff;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
border-radius: 0;
font-family: Montserrat, sans-serif;
}
.navbar li a, .navbar .navbar-brand {
color: #666!important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #333333 !important;
background-color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover
{ background-color:transparent!important;}
.slideanim {visibility:hidden;}
.slide {
animation-name: slide;
-webkit-animation-name: slide;
animation-duration: 1s;
-webkit-animation-duration: 1s;
visibility: visible;
}
@keyframes slide {
0% {
opacity: 0;
transform: translateY(70%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
@-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
@media screen and (max-width: 768px) {
.top-section ul{ float:none!important; font-size:9px;}
.container{ width:100%!important; margin:0 auto;}
}
@media screen and (max-width: 480px) {
.logo {
font-size: 150px;
}
}
.container1 {width:1170px; margin:0 auto;}
.container1 {width:100%!important; margin:0 auto;}
.navbar1 {margin-bottom:0px!important;}
.navbar1 { margin-bottom: 0;
background-color: #fff;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
border-radius: 0;
font-family: Montserrat, sans-serif;
}
.navbar-fixed-top1 {top:auto!important; position:relative;}
</style>
</head>
<body>
<div class="top-section">
<div class="container">
<ul>
<li><a href="#"> <i class="fa fa-envelope"></i> example@gmail.com</a></li>
<li> <a href="#"> <i class="fa fa-skype"></i> skypee.com</a></li>
<li style="padding-right:0px"> <a href="#"> <i class="fa fa-phone-square"></i> 0002524000</a></li>
</ul>
</div>
</div>
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container1">
<div class="navbar-header">
<button data-target="#myNavbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button" aria-expanded="false"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a href="#myPage" class="navbar-brand">Logo</a> </div>
<div id="myNavbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav navbar-right">
<li class=""><a href="#about">ABOUT</a></li>
<li class="active"><a href="#services">SERVICES</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#pricing">PRICING</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="banner-section">
<div id="slider1_container" style="visibility: hidden; position: relative; margin: 0 auto;
top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden;">
<!-- Loading Screen -->
<div data-u="loading" class="jssorl-009-spin" style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);">
<img style="margin-top:-19px;position:relative;top:50%;width:38px;height:38px;" src="../svg/loading/static-svg/spin.svg" />
</div>
<!-- Slides Container -->
<div data-u="slides" style="position: absolute; left: 0px; top: 0px; width: 1300px; height: 500px; overflow: hidden;">
<div>
<img data-u="image" src="img/001.jpg" />
</div>
<div>
<img data-u="image" src="img/002.jpg" />
</div>
<div>
<img data-u="image" src="img/003.jpg" />
</div>
</div>
<!--#region Bullet Navigator Skin Begin -->
<!-- Help: https://www.jssor.com/development/slider-with-bullet-navigator.html -->
<div data-u="navigator" class="jssorb031" style="position:absolute;bottom:12px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
<div data-u="prototype" class="i" style="width:16px;height:16px;">
<svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
<circle class="b" cx="8000" cy="8000" r="5800"></circle>
</svg>
</div>
</div>
<!--#endregion Bullet Navigator Skin End -->
<!--#region Arrow Navigator Skin Begin -->
<!-- Help: https://www.jssor.com/development/slider-with-arrow-navigator.html -->
<div data-u="arrowleft" class="jssora051" style="width:55px;height:55px;top:0px;left:25px;" data-autocenter="2" data-scale="0.75" data-scale-left="0.75">
<svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
<polyline class="a" points="11040,1920 4960,8000 11040,14080 "></polyline>
</svg>
</div>
<div data-u="arrowright" class="jssora051" style="width:55px;height:55px;top:0px;right:25px;" data-autocenter="2" data-scale="0.75" data-scale-right="0.75">
<svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
<polyline class="a" points="4960,1920 11040,8000 4960,14080 "></polyline>
</svg>
</div>
<!--#endregion Arrow Navigator Skin End -->
</div>
<!-- Jssor Slider End -->
</div>
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.9.1.min.js"></script>
<!-- jssor slider scripts-->
<script type="text/javascript" src="js/jssor.slider.min.js"></script>
<script>
jQuery(document).ready(function ($) {
var options = {
$FillMode: 2, //[Optional] The way to fill image in slide, 0 stretch, 1 contain (keep aspect ratio and put all inside slide), 2 cover (keep aspect ratio and cover whole slide), 4 actual size, 5 contain for large image, actual size for small image, default value is 0
$AutoPlay: 1, //[Optional] Auto play or not, to enable slideshow, this option must be set to greater than 0. Default value is 0. 0: no auto play, 1: continuously, 2: stop at last slide, 4: stop on click, 8: stop on user navigation (by arrow/bullet/thumbnail/drag/arrow key navigation)
$Idle: 4000, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
$PauseOnHover: 1, //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1
$ArrowKeyNavigation: 1, //[Optional] Steps to go for each navigation request by pressing arrow key, default value is 1.
$SlideEasing: $Jease$.$OutQuint, //[Optional] Specifies easing for right to left animation, default value is $Jease$.$OutQuad
$SlideDuration: 800, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
$MinDragOffsetToSlide: 20, //[Optional] Minimum drag offset to trigger slide, default value is 20
//$SlideWidth: 600, //[Optional] Width of every slide in pixels, default value is width of 'slides' container
//$SlideHeight: 300, //[Optional] Height of every slide in pixels, default value is height of 'slides' container
$SlideSpacing: 0, //[Optional] Space between each slide in pixels, default value is 0
$UISearchMode: 1, //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
$PlayOrientation: 1, //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1
$DragOrientation: 1, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $Cols is greater than 1, or parking position is not 0)
$BulletNavigatorOptions: { //[Optional] Options to specify and enable navigator or not
$Class: $JssorBulletNavigator$, //[Required] Class to create navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$SpacingX: 8, //[Optional] Horizontal space between each item in pixel, default value is 0
$Orientation: 1 //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
},
$ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not
$Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
$ChanceToShow: 2 //[Optional] Steps to go for each navigation request, default value is 1
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizing
function ScaleSlider() {
var bodyWidth = document.body.clientWidth;
if (bodyWidth)
jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 1920));
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
});
</script>
</div>
<div class="container padd" >
<div class="row">
<div class="col-lg-12 text-center service "><h2>SERVICES</h2></div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="service-icon"><i class="fa fa-uikit black"></i></div>
<div class="service-text"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<br> <button class="service-button">Read More...</button></p>
</div>
</div>
<div class="col-lg-4">
<div class="service-icon"><i class="fa fa-uikit black"></i></div>
<div class="service-text"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<br> <button class="service-button">Read More...</button></p>
</div>
</div>
<div class="col-lg-4">
<div class="service-icon"><i class="fa fa-uikit black"></i></div>
<div class="service-text"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<br> <button class="service-button">Read More...</button></p>
</div>
</div>
</div>
</div>
<div class="container padd">
<div class="row">
<div class="col-lg-12 text-center service "><h2>WHO WE ARE</h2></div>
</div>
</div>
<div class="about-us-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <br> <button class="service-button">Read More...</button> </p>
</div>
</div>
</div>
</div>
<div class="container padd ">
<div class="row">
<div class="col-sm-2 col-xs-2">
<div class="company-logo"></div>
</div>
<div class="col-sm-2 col-xs-2">
<div class="company-logo"></div>
</div>
<div class="col-sm-2 col-xs-2">
<div class="company-logo"></div>
</div>
<div class="col-sm-2 col-xs-2">
<div class="company-logo"></div>
</div>
<div class="col-sm-2 col-xs-2">
<div class="company-logo"></div>
</div>
<div class="col-sm-2 col-xs-2">
<div class="company-logo"> </div>
</div>
</div>
</div>
<div class="testimonial-section padd">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="testimonial-box">
<div class="testimonial-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only
</div>
<div class="clearfix"> </div>
<div class="testimonial-text" >
<div class="testimonial-name"><strong>Alan Cambel</strong></div>
<div class="testimonial-person"> </div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="testimonial-box">
<div class="testimonial-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only
</div>
<div class="clearfix"> </div>
<div class="testimonial-text" >
<div class="testimonial-name"><strong>Alan Cambel</strong></div>
<div class="testimonial-person"> </div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="testimonial-box">
<div class="testimonial-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only
</div>
<div class="clearfix"> </div>
<div class="testimonial-text" >
<div class="testimonial-name"><strong>Alan Cambel</strong></div>
<div class="testimonial-person"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-section">
<div class="padd">
<div class="container">
<div class="row">
<div class="footer-col1">
<div class="footer-box">
<h2>Company Logo</h2><br>
<span style="font-size:10px; float:left;">Company tagline</span>
</div>
<div class="footer-box">
<h4>Find Us on</h4>
<ul>
<li><a href="#"><img src="img/facebook-icon.png" width="45" height="45" alt="Facebook"></a></li>
<li><a href="#"><img src="img/linkdin.png" width="45" height="45" alt="Linkdin"></a></li>
<li><a href="#"><img src="img/twitter.png" width="45" height="45" alt="Twitter"></a></li>
<li><a href="#"><img src="img/google-pluse.png" width="45" height="45" alt="Google Plus"></a></li>
</ul>
</div>
</div>
<div class="footer-mid">
<div class="footer-box2">
<ul>
<li><a href="#"><i class="fa fa-ellipsis-v" style="font-size:25px; float: left;" ></i> Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="footer-box2">
<div class="address">
<p> <i class="fa fa-map-marker"></i> Address : Plot No: 230, Udyog Vihar, Ph-1, Gurgaon, 1220016 </p>
<p> <i class="fa fa-mobile" style="font-size:24px;"></i> Ph : 2598847560 </p>
<p> <i class="fa fa-envelope"></i> Email : example@gmail.com </p>
</div>
<div></div>
<div></div>
</div>
</div>
<div class="footer-col3">
<div class="footer-box" style="border-bottom:1px solid #424242;">
<h4>Payment Option</h4>
<ul>
<li><a href="#"><img src="img/Paypal.jpg" width="86" height="33" alt="Paypal"></a></li>
<li><input type="text"><button class="submit">Go</button></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom"> © 2018 - 2019, MyFlightSearch. All rights reserved.</div>
</body>
</html>
@charset "utf-8";
body {
font: 400 15px;
line-height: 1.8;
color: #818181;
font-family:Century Gothic!important;
}
.top-section{ width:100%; background:#333; font-size:12px; color:#fff; height:30px;}
.about-us-section{ width:100%; background:#CCC; font-size:12px; color:#2f2f2f; height:auto; padding:30px 0;}
.footer-section{ width:100%; background:#1d1d1d; font-size:12px; height:auto; padding:10px 0;}
.footer-section .padd{ padding:5px 0; border-top:1px solid #424242;width:100%;}
.testimonial-section{ width:100%; background:#CCC; font-size:12px; color:#2f2f2f; height:auto; padding:30px 0;}
.top-section ul{ margin:0px; padding:0px; float:right;}
.top-section ul li{ list-style-type:none; float:left; padding:0 10px; line-height:30px;}
.top-section ul li a{ text-decoration:none; color:#FFF;}
.container{ width:1170px; margin:0 auto; }
.padd{ padding:20px 0px;}
.banner-section{ width:100%; margin:0 auto;}
.banner-section img{ width:100%!important; height:auto;}
.navbar-fixed-top{ top:auto!important;}
#jssor_1{ width:100%!important;}
#jssor_1 img{ width:100%!important;}
.slider-wrapper{ height:350px!important;}
.testimonial-box{ border-radius:5px; background:#fff; width:100%; padding:10px;}
.testimonial-text{ font-size:12px;color:#999; text-align:justify}
.testimonial-name{ width:70%;}
.testimonial-person{ width:28%}
.footer-col1{ width:25%; float:left; padding:0 15px;}
.footer-mid{ width:50%; float:left;padding:0 15px;}
.footer-col3{width:25%; float:left; padding:0 15px;}
.footer-box{ width:100%; float:left; padding:20px 0;}
.footer-box h4,h2{ font-size:29px; color:#c9c9c9; padding:0; margin:0px; float:left; width:100%; font-weight:normal; text-transform:capitalize;}
.footer-box h4{ font-size:16px; color:#c9c9c9; font-weight:normal;}
.footer-box ul{ margin:0px; padding:0px; float:left; margin-top:10px;}
.footer-box ul li{ list-style-type:none; padding:0px; display:inline;}
.company-logo{ width:100%; height:80px;background:#f5f5f5; float:left; width:100%;}
.footer-box2{ width:100%; float:left; padding:20px 0;}
.footer-box input{ line-height:27px;}
.footer-box .submit{background:#006796;color:#fff; height:33px; border:none; padding:0 11px;}
.footer-box2 ul{ margin:0px; padding:0px; float:left; margin-top:10px;}
.footer-box2 ul li{ list-style-type:none; padding:0px 10px;; display:inline;}
.footer-box2 ul li a{ color:#888888; font-size:14px;}
.footer-box2 ul li a:hover{ color:#fff; text-decoration:none;}
.address{ width:100%; float:left;}
.address p{color:#888888; font-size:14px; width:100%; margin:0px; padding:0px;}
.footer-bottom{ background:#141414; text-align:center; font-size:15px; color:#888; width:100%; height:40px; line-height:40px;}
.service h2 {position:relative; display: inline-block; padding: 0 60px 0 60px; color:#333;}
.service h2::after{
content:"";
background:#CCC;
height:1px;
width:50px;
position:absolute;
top:16px;
margin-left:10px;
}
.service h2::before{ content:"";
background:#CCC;
height:1px;
width:50px;
position:absolute;
top:16px;
margin-left:-56px;
}
.service-icon{width:100%; text-align:center; color:#999;}
.service-icon .black{ color:#666; font-size:100px;}
.service-text{ font-size:12px; color:#999; text-align:justify; width:100%; padding:0 15px;}
.service-button{ float:right; margin-top:20px; background:#333; height:30px; width:50px; text-align:center; vertical-align:middle; font-size:11px; line-height:30px; border:none; width:90px; color:#fff; }
}
.navbar {
margin-bottom: 0;
background-color: #fff;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
border-radius: 0;
font-family: Montserrat, sans-serif;
}
.navbar li a, .navbar .navbar-brand {
color: #666!important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #333333 !important;
background-color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover
{ background-color:transparent!important;}
.slideanim {visibility:hidden;}
.slide {
animation-name: slide;
-webkit-animation-name: slide;
animation-duration: 1s;
-webkit-animation-duration: 1s;
visibility: visible;
}
@keyframes slide {
0% {
opacity: 0;
transform: translateY(70%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
@-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
@media screen and (max-width: 768px) {
.top-section ul{ float:none!important; font-size:9px;}
.container{ width:100%!important; margin:0 auto;}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9{ padding:0px 10px;}
.padd{ padding:10px 0px!important;}
.col-sm-2{ padding:10px 0;}
.footer-col1{ width:100%; float:left; padding:0 15px;}
.footer-mid{ width:100%; float:left;padding:0 15px;}
.footer-col3{width:100%; float:left; padding:0 15px;}
.footer-bottom{ font-size:12px;}
}
@media screen and (max-width: 480px) {
.logo {
font-size: 150px;
}
}
/*slider loading skin spin css*/
/* jssor slider loading skin spin css */
.jssora051 {display:block;position:absolute;cursor:pointer;}
.jssora051 .a {fill:none;stroke:#fff;stroke-width:360;stroke-miterlimit:10;}
.jssora051:hover {opacity:.8;}
.jssora051.jssora051dn {opacity:.5;}
.jssora051.jssora051ds {opacity:.3;pointer-events:none;}
.jssorb031 {position:absolute;}
.jssorb031 .i {position:absolute;cursor:pointer;}
.jssorb031 .i .b {fill:#000;fill-opacity:0.5;stroke:#fff;stroke-width:1200;stroke-miterlimit:10;stroke-opacity:0.3;}
.jssorb031 .i:hover .b {fill:#fff;fill-opacity:.7;stroke:#000;stroke-opacity:.5;}
.jssorb031 .iav .b {fill:#fff;stroke:#000;fill-opacity:1;}
.jssorb031 .i.idn {opacity:.3;}
.jssorl-009-spin img {
animation-name: jssorl-009-spin;
animation-duration: 1.6s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes jssorl-009-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
