/*--------------------------------------------------------------------------------------------------------------------
*
* Template Freedom - HTML Site Template
* Version 2.0
* Author Valery Timofeev
*
* 1. Imports
* 2. Less [only]
* 2.1 Variables
* 2.1 xBrowser Rules
* 3. General Styles
* 3.1 Main Classes
* 3.2 Typography
* 3.3 Buttons
* 3.4 Inputs
* 3.5 Breadcrumbs
* 3.6 Tabs
* 3.7 Pagination
* 3.8 Progress
* 3.9 Text Colors & Effects
* 3.10 Backgrounds
* 3.11 Scroll To Top
* 3.12 Mask
* 3.13 Form Validation
* 3.14 Gallery Item
* 3.15 Carousel
* 3.16 OWL.Carousel fadeUp
* 3.17 Social Inline
* 3.18 Social Share
* 3.19 List
* 3.10 Tags
* 3.21 Preloader
* 4. Information Columns
* 5. Header
* 5.1 General
* 5.2 Navigation
* 5.3 No-Mobile
* 6. Section: Projects
* 7. Section: Services
* 8. Section: Our Team
* 8.1 Carousel
* 8.2 Skills
* 9. Trigger: Join
* 10. Section: Testimonials
* 11. Section: Price
* 12. Section: How To Start
* 13. Section: Clients
* 14. Section: ContactContact
* 14.1 Contact Information
* 14.1 Contact Form
* 14.1 Contact Information List
* 15. Footer
* 16. Section: Map
* 17. Section: Statistics
* 18. Modal
* 19. 404 Page
* 20. Inner Pages
* 21. About
* 22. Blog
* 22.1 Post
* 22.2 Widget
* 22.3 Widget: Menu
* 22.4 Widget: Latest Posts
* 22.5 Widget: Search
* 22.6 Widget: Advert
* 22.7 Widget: Tags
* 22.8 Widget: Recent Comments
* 22.9 Widget: Comments
* 23. Projects
* 23.1 Projects List
* 23.2 Project Item
* 23.3 Single Project
* 24. Animations
* 24.1 Label Error Animation
* 24.2 SubMenu Animation
* 25. Responsive
* 25.1 max-width: 991px
* 25.2 max-width: 767px
* 25.3 max-width: 480px
*
*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------
* Imports
*--------------------------------------------------------------------------------------------------------------------*/
@import url(https://fonts.googleapis.com/css?family=Raleway:400,300,600,500);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import '../css/bootstrap.min.css';
@import '../css/bootstrap-theme.min.css';
@import '../css/font-awesome.min.css';
@import '../css/elegant-icons.css';
@import '../css/animate.css';
/*--------------------------------------------------------------------------------------------------------------------
* General Styles
*--------------------------------------------------------------------------------------------------------------------*/
/*
* Main Classes
*--------------*/
* {
outline: none !important;
}
html {
height: 100%;
}
body {
height: 100%;
min-height: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-size: 15px;
line-height: 24px;
color: #757575;
font-family: 'Moon Light', sans-serif;
background: #fff;
}
::-moz-selection {
color: #fff;
background: rgba(82, 145, 180, 0.9);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}
::selection {
color: #fff;
background: rgba(82, 145, 180, 0.9);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}
.relative {
position: relative !important;
}
.full-wh {
display: table-cell;
width: 1%;
height: 65vh;
vertical-align: middle;
}
.vertical-middle {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.mt {
margin-top: 50px;
}
.main-container {
z-index: 1;
overflow: hidden;
}
.section {
padding-top: 0px;
padding-bottom: 0px;
}
.section .section-title {
margin-bottom: 10px;
}
.section .section-title.underline::after {
display: block;
content: '';
width: 100px;
height: 2px;
margin: 15px auto;
background: #5289b4;
}
.section .section-title.underline2::after {
display: block;
content: '';
width: 100px;
height: 2px;
margin: 15px auto;
background: #000000;
}
.section .section-title.text-white.underline::after {
background: #fff;
}
.section .section-subtitle {
font-weight: 500;
margin-bottom: 0;
}
.section .section-content {
margin-top: 100px;
}
.section .section-mt60{margin-top: 60px;}
.section.section-small {
padding-top: 50px;
padding-bottom: 50px;
}
.section .section-content {
margin-top: 50px;
}
.section.no-pb {
padding-bottom: 0;
}
.trigger {
background: transparent no-repeat center top / cover;
}
.trigger .trigger-title {
font-size: 34px;
margin-bottom: 40px;
}
.trigger .trigger-text {
margin-bottom: 40px;
}
/*
* Typography
*------------*/
.h1,
h1,
.h2,
h2,
.h3,
h3,
.h4,
h4,
.h5,
h5,
.h6,
h6 {
margin: 0 0 20px;
color: #333;
font-weight: 400;
font-family: 'Moon Light', sans-serif;
}
.h1,
h1 {
color: #fff;
font-size: 34px;
}
.h2,
h2 {
font-size: 28px;
}
.h3,
h3 {
font-size: 18px;
}
.h4,
h4 {
font-size: 16px;
}
.h5,
h5 {
font-size: 15px;
}
.h6,
h6 {
font-size: 14px;
}
a {
color: #fff;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
a:hover,
a.hover,
a:focus,
a.focus {
color: #323b46;
text-decoration: none;
}
blockquote {
margin: 0 0 20px;
font-family: 'Moon Light', sans-serif;
border-left: solid 1px #0e4bd1;
}
blockquote2 {
margin: 0 0 20px;
font-size: 'Moon Light', sans-serif;
}
p {
margin: 10 0 20px;
}
p span {
font-size: 16px;
font-weight: 400;
line-height: 40px;
}
/*
* Buttons
*---------*/
.btn,
.btn:hover,
.btn.hover,
.btn:focus,
.btn.focus,
.btn:active,
.btn.active {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.btn {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
position: relative;
padding: 12px 35px;
text-align: center;
overflow: hidden;
font-size:20px;
font-weight:bold;
color: #fff !important;
border-color: #5289b4 !important;
background-color: #5289b4 !important;
}
.btn:focus,
.btn.focus {
color: #fff !important;
border-color: #5289b4 !important;
background-color: #5289b4 !important;
}
.btn:hover,
.btn.hover {
color: #fff !important;
border-color: #5289b4 !important;
background-color: #5289b4 !important;
}
.btn:active,
.btn.active {
color: #fff !important;
border-color: #5289b4 !important;
background-color: #5289b4 !important;
}
.btn.btn-rounded {
-webkit-border-radius: 20px !important;
-moz-border-radius: 20px !important;
border-radius: 20px !important;
margin: 5px;
}
.btn .icon {
position: absolute;
left: 0;
right: 0;
margin-top: 3px;
margin-left: auto;
margin-right: auto;
opacity: .0;
-webkit-transform: translateY(200%);
-moz-transform: translateY(200%);
-ms-transform: translateY(200%);
-o-transform: translateY(200%);
transform: translateY(200%);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.btn .text {
display: block;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.btn:hover {
content: '';
}
.btn:hover .icon {
opacity: 1.0;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
.btn:hover .text {
opacity: .0;
-webkit-transform: translateX(-500%);
-moz-transform: translateX(-500%);
-ms-transform: translateX(-500%);
-o-transform: translateX(-500%);
transform: translateX(-500%);
}
.btn-white-o {
color: #fff !important;
border-color: #fff !important;
background-color: transparent !important;
}
.btn-white-o:focus,
.btn-white-o.focus {
color: #777 !important;
border-color: transparent !important;
background-color: #fff !important;
-webkit-box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.1);
}
.btn-white-o:hover,
.btn-white-o.hover {
color: #777 !important;
border-color: transparent !important;
background-color: rgba(255, 255, 255, 0.95) !important;
}
.btn-white-o:active,
.btn-white-o.active {
color: #777 !important;
border-color: transparent !important;
background-color: #fff !important;
-webkit-box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.1);
}
.btn-picasso {
color: #555 !important;
border-color: #ffed91 !important;
background-color: #ffed91 !important;
}
.btn-picasso:focus,
.btn-picasso.focus {
color: #555 !important;
border-color: #ddcb6f !important;
background-color: #ddcb6f !important;
}
.btn-picasso:hover,
.btn-picasso.hover {
color: #555 !important;
border-color: #ffffb3 !important;
background-color: #ffffb3 !important;
}
.btn-picasso:active,
.btn-picasso.active {
color: #555 !important;
border-color: #ddcb6f !important;
background-color: #ddcb6f !important;
}
.btn-purple {
color: #fff !important;
border-color: #203460 !important;
background-color: #203460 !important;
}
.btn-purple:focus,
.btn-purple.focus {
color: #fff !important;
border-color: #774bc7 !important;
background-color: #774bc7 !important;
}
.btn-purple:hover,
.btn-purple.hover {
color: #fff !important;
border-color: #bb8fff !important;
background-color: #bb8fff !important;
}
.btn-purple:active,
.btn-purple.active {
color: #fff !important;
border-color: #774bc7 !important;
background-color: #774bc7 !important;
}
/*
* Inputs
*--------*/
.form-control,
.form-control:hover,
.form-control.hover{
padding: 7px 22px;
height: auto;
font-family: 'Moon Light', sans-serif;
border: solid 1px #e2e2e2;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.form-control:focus,
.form-control.focus,
.form-control:active,
.form-control.active{
border: 3px solid #0e4bd1 !important;
box-shadow:none;
}
/*
* Breadcrumbs
*-------------*/
.breadcrumb {
margin-top: 7px;
margin-bottom: 0;
background: transparent;
text-align: right;
}
.breadcrumb a {
color: #757575;
}
.breadcrumb a:hover {
color: #0e4bd1;
}
/*
* Tabs
*------*/
.nav-tabs {
border-color: #f5f7f9;
}
.nav-tabs li a {
border-color: #f5f7f9 !important;
}
.nav-tabs li a:hover {
color: #0e4bd1;
background: transparent;
}
.nav-tabs li.active a {
border-bottom-color: transparent !important;
}
.tab-content {
border: solid 1px #f5f7f9;
border-top-width: 0 !important;
padding: 5px 10px;
}
/*
* Pagination
*------------*/
.pagination {
margin: 0 0 20px;
}
.pagination li {
display: inline-block;
}
.pagination li a,
.pagination li span {
cursor: pointer;
-webkit-border-radius: 2px !important;
-moz-border-radius: 2px !important;
border-radius: 2px !important;
color: #757575;
font-weight: 100;
}
.pagination li a:hover,
.pagination li span:hover,
.pagination li a.hover,
.pagination li span.hover,
.pagination li a:focus,
.pagination li span:focus,
.pagination li a.focus,
.pagination li span.focus {
color: #fff !important;
background: #0e4bd1 !important;
border-color: #0e4bd1 !important;
}
.pagination li.active a,
.pagination li.active span {
color: #fff !important;
background: #0e4bd1;
border-color: #0e4bd1;
}
/*
* Progress
*----------*/
.progress {
height: 2px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.progress .progress-bar {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background: #0e4bd1;
}
/*
* Text Colors & Effects
*-----------------------*/
.text-white {
color: #fff;
}
/*
* Backgrounds
*-------------*/
.bg-dark {
background: #131627;
}
.bg-black {
background: #000;
}
.bg-light-gray {
background: #f5f7f9;
}
.bg-theme {
background: #0e4bd1;
}
/*
* Magnific
*----------*/
.mfp-bg {
background: rgba(0, 0, 0, 0.7) !important;
}
.mfp-figure::after {
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
opacity: .0;
-webkit-backface-visibility: hidden;
}
.mfp-with-zoom.mfp-ready .mfp-container {
opacity: 1.0;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
opacity: .9;
}
.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
opacity: .0;
}
/*
* Scroll To Top Element
*-----------------------*/
.scroll-to-top {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
-o-transform: scale(0.7);
transform: scale(0.7);
display: block;
position: fixed;
right: 10px;
bottom: 10px;
opacity: .0;
width: 32px;
height: 32px;
z-index: 1001;
cursor: pointer;
color: #fff;
text-align: center;
line-height: 34px;
background: #0e4bd1;
}
.scroll-to-top .icon {
font-size: 18px;
}
.scroll-to-top.in {
opacity: .7;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-animation: 0.3s animationZoomIn;
-o-animation: 0.3s animationZoomIn;
animation: 0.3s animationZoomIn;
}
.scroll-to-top:hover {
opacity: 1.0;
}
/*
* Mask
*------*/
.mask {
position: relative;
z-index: 1;
}
.mask::after {
display: block;
content: '';
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
background: #121520;
opacity: .5;
}
.mask.mask-dark::after {
background: #323b46 !important;
}
.mask.mask-black::after {
opacity: .6;
background: #000 !important;
}
/*
* Form Validation
*-----------------*/
label.error {
position: absolute;
top: 0;
right: 0;
padding: 2px 7px;
color: #fff;
font-size: 12px;
font-weight: 300;
background: #e03126;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-animation: 0.3s labelError;
-o-animation: 0.3s labelError;
animation: 0.3s labelError;
}
/*
* Gallery Item
*--------------*/
.gallery-image {
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
position: relative;
z-index: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: rgba(255, 255, 255, 0.8);
}
.gallery-image img {
position: relative;
z-index: -9999;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
max-width: 100%;
}
.gallery-image::before {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
display: block;
content: '';
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
opacity: .0;
background: rgba(0, 0, 0, 0.8);
}
.gallery-image::after {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
display: block;
content: '\f0c1';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
margin: auto;
width: 64px;
height: 64px;
color: #fff;
font-size: 30px;
line-height: 66px;
text-align: center;
opacity: 0;
font-family: 'Moon Light', sans-serif;
}
.gallery-image:hover::before {
opacity: .7;
}
.gallery-image:hover::after {
opacity: 1.0;
}
/*
* Carousel
*----------*/
.img-carousel .owl-buttons {
position: absolute;
bottom: 10px;
right: 10px;
}
.img-carousel .owl-buttons div {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
border-radius: 0 !important;
margin: 0 !important;
width: 50px;
height: 50px;
color: #fff;
line-height: 44px;
font-size: 24px !important;
background: rgba(0, 0, 0, 0.7) !important;
}
.img-carousel .owl-pagination .owl-page span {
width: 10px;
height: 10px;
background: #0e4bd1;
}
/*
* OWL.Carousel fadeUp
*---------------------*/
.owl-fadeUp-in {
-webkit-animation: scaleUpFrom 1.2s ease both;
-o-animation: scaleUpFrom 1.2s ease both;
animation: scaleUpFrom 1.2s ease both;
}
.owl-fadeUp-out {
-webkit-animation: scaleUpTo 1.2s ease both;
-o-animation: scaleUpTo 1.2s ease both;
animation: scaleUpTo 1.2s ease both;
}
/*
* Social Inline
*---------------*/
.social-inline {
display: block;
list-style: none;
margin: 0;
padding: 0;
text-align:center;
}
.social-inline li {
display: inline-block;
text-align:center;
}
.social-inline li a {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
display: inline-block;
margin: 0 5px 5px 0;
width: 40px;
height: 40px;
line-height: 32px;
text-align: center;
font-size: 25px;
color: #0e4bd1;
}
.social-inline li a:hover {
text-decoration: none;
color: #fff;
}
/*
* Social Share
*--------------*/
.social-share {
list-style: none;
margin: 0 0 20px;
padding: 0;
display: table;
width: 100%;
}
.social-share li {
display: table-cell;
text-align: center;
}
.social-share li a {
display: block;
line-height: 32px;
padding: 0 5px;
color: #757575;
border: solid 1px #c5c5c5;
border-right-width: 0;
}
.social-share li a:hover {
color: #fff;
background: #0e4bd1;
border-color: #0e4bd1;
}
.social-share li:last-child a {
border-right-width: 1px;
}
/*
* List
*------*/
.list {
list-style: none;
margin: 1px 0 20px 1px;
padding: 0 10px;
overflow: hidden;
}
.list li {
padding: 0 0 5px 10px;
}
.list li::before {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
display: block;
content: 'ï˜';
position: absolute;
left: 15px;
color: #0e4bd1;
font-family: 'Moon Light', sans-serif;
}
.list-inline {
margin-left: 0 !important;
}
/*
* Tags
*------*/
.tags .tag {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
display: inline-block;
padding: 1px 7px;
margin: 0 5px 5px 0;
color: #757575;
border: solid 1px #c5c5c5;
}
.tags .tag:hover {
color: #fff;
text-decoration: none;
background: #0e4bd1;
border: solid 1px #0e4bd1;
}
/*
* Preloader
*-----------*/
#preloader {
position: fixed;
z-index: 10000;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ffffff;
}
.loaded #preloader {
background: rgba(255, 255, 255, 0.3);
}
.loader::before {
position: absolute;
content: '';
}
.loader,
.loader::before {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 96px;
height: 96px;
border: solid 2px transparent;
}
.loader {
border-top-color: #0e4bd1;
-webkit-animation: loaderAnimation 0.5s ease-in-out infinite;
-o-animation: loaderAnimation 0.5s ease-in-out infinite;
animation: loaderAnimation 0.5s ease-in-out infinite;
}
.loader::before {
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
border-top-color: #203460;
-webkit-animation: loaderAnimation 0.5s ease-in infinite;
-o-animation: loaderAnimation 0.5s ease-in infinite;
animation: loaderAnimation 0.5s ease-in infinite;
}
@keyframes loaderAnimation {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes loaderAnimation {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/*--------------------------------------------------------------------------------------------------------------------
* Information Columns
*--------------------------------------------------------------------------------------------------------------------*/
.col {
margin-bottom: 20px;
text-align: center;
}
.col .icon {
display: block;
margin-bottom: 20px;
font-size: 32px;
text-align: center;
color: #0e4bd1;
}
.col .icon + .title.shadow {
margin-top: 20px;
}
.col .title {
margin-bottom: 20px;
}
.col .title.shadow {
text-shadow: 20px -10px 0 rgba(0, 0, 0, 0.2);
}
.col .description {
margin-bottom: 0;
}
/*--------------------------------------------------------------------------------------------------------------------
* Header
*--------------------------------------------------------------------------------------------------------------------*/
/*
* General
*---------*/
.header {
height: 100%;
}
.header .slider {
height: 100%;
}
.header .slider .owl-controls .owl-pagination {
position: absolute;
left: 0;
right: 0;
bottom: 10px;
margin-left: auto;
margin-right: auto;
}
.header .slider .owl-controls .owl-pagination .owl-page span {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
width: 10px;
height: 10px;
background: transparent;
border: solid 1px #fff;
}
.header .slider .owl-controls .owl-pagination .owl-page.active span {
background: #fff;
}
.header .subtitle {
color: #f0f0f0;
margin-bottom: 20px;
}
.header.header-inner {
height: auto!important;
}
/*
* Navigation
*------------*/
.navbar {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
z-index: 1000;
width: 100%;
min-height: 1px;
margin-bottom: 0;
border: none;
background: white;
border-bottom:1px solid lightgrey;
opacity:0.95;
}
.navbar .brand {
position: absolute;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
display: inline-block;
color: #000;
font-size: 24px;
line-height: 59px;
vertical-align: middle;
}
.navbar .brand .big {
display: inline-block;
}
.navbar .brand .small {
display: none;
}
.navbar .nav li a {
color: #000;
text-shadow: none;
padding-top: 20px;
padding-bottom: 20px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
font-family: 'Moon Light', sans-serif;
}
.navbar .nav li a:hover,
.navbar .nav li a.hover,
.navbar .nav li a:focus,
.navbar .nav li a.focus {
color: #5289b4;
background: transparent;
}
.navbar .nav li.dropdown .dropdown-menu {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
text-transform: capitalize;
border-top-width: 0;
margin-top: 0;
left: 0;
right: auto;
}
.navbar .nav li.dropdown .dropdown-menu a {
display: block;
padding-top: 5px;
padding-bottom: 5px;
margin-top: 10px;
margin-bottom: 10px;
border-left: solid 1px #fff;
}
.navbar .nav li.dropdown .dropdown-menu a:hover {
color: #5289b4;
padding-left: 25px;
padding-right: 15px;
border-left: solid 1px #fff;
}
.navbar .nav li.dropdown .dropdown-menu::before {
display: block;
content: '';
position: absolute;
top: -5px;
left: 20px;
right: 0;
z-index: -1;
width: 10px;
height: 10px;
background: #fff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.navbar .nav li.active a {
color: #5289b4;
background: transparent;
}
.navbar .navbar-collapse.in .nav li.dropdown .dropdown-menu::before {
display: none;
}
.navbar .navbar-collapse.in .nav li a {
color: #000;
}
.navbar .navbar-collapse.in .nav li.active a {
color: #5289b4;
background: transparent;
}
.navbar .navbar-toggle {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin-top: 14px;
border: solid 1px #fff;
}
.navbar .navbar-toggle .icon-bar {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background: #fff;
}
.navbar.affix-top {
padding-top: 20px;
position: fixed;
background: transparent;
}
.navbar.affix-top .navbar-collapse.in {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
background: #14191e;
opacity: 0.95;
}
.navbar.affix-top .nav a {
color: #000;
text-shadow: none;
padding-top: 20px;
padding-bottom: 20px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.navbar.affix-top .nav a:hover,
.navbar.affix-top .nav a.hover,
.navbar.affix-top .nav a:focus,
.navbar.affix-top .nav a.focus {
color: #000;
background: transparent;
}
.navbar.affix .navbar-toggle {
margin-top: 10px;
}
/*
* No-Mobile
*-----------*/
.no-mobile .dropdown:hover .dropdown-menu {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-animation: 0.3s animationSubMenu;
-o-animation: 0.3s animationSubMenu;
animation: 0.3s animationSubMenu;
display: block;
}
/*--------------------------------------------------------------------------------------------------------------------
* Section: Projects
*--------------------------------------------------------------------------------------------------------------------*/
.project-col {
margin: 0;
padding: 0;
}
/*--------------------------------------------------------------------------------------------------------------------
* Section: Services
*--------------------------------------------------------------------------------------------------------------------*/
.service {
margin-bottom: 100px;
}
.service .image {
overflow: hidden;
text-align: center;
}
.service .image img {
max-width: 90%;
}
.service .description {
text-align: justify;
}
/*--------------------------------------------------------------------------------------------------------------------
* Section: Our Team
*--------------------------------------------------------------------------------------------------------------------*/
/*
* Carousel
*----------*/
.team-member {
margin: 20px 10px;
text-align: center;
overflow: hidden;
background-color: white;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.14);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.14);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.14);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.team-member .image {
position: relative;
max-width: 100%;
overflow: hidden;
margin-bottom: 20px;
}
.team-member .image img {
width: 100%;
max-width: 100%;
}
.team-member .image .social {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.75);
opacity: .0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.team-member .image .social .list-inline {
position: absolute;
left: 0;
right: 0;
bottom: 20px;
display: block;
width: 100%;
text-align: center;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transform: translateY(300%);
-moz-transform: translateY(300%);
-ms-transform: translateY(300%);
-o-transform: translateY(300%);
transform: translateY(300%);
}
.team-member .name {
margin-bottom: 0;
}
.team-member p {
padding: 5px 30px;
}
.team-member .post {
display: block;
margin-bottom: 20px;
color: #0e4bd1;
}
.team-member:hover {
margin-top: 20px;
-webkit-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 20px rgba(0, 0, 0, 0.15);
}
.team-member:hover .image .social {
opacity: 1.0;
}
.team-member:hover .image .social .list-inline {
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
/*
* Skills
*--------*/
.skills .title {
font-weight: 500;
margin-bottom: 10px;
}
.skills .title span {
float: right;
}
.newimg {
position: relative;
max-height: 150px;
overflow: hidden;
margin: 20px 0 20px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius:15px;
}
/*--------------------------------------------------------------------------------------------------------------------
* Trigger: Join
*--------------------------------------------------------------------------------------------------------------------*/
.form-join {
overflow: hidden;
margin-bottom: 20px;
}
.form-join .form-control {
height: 50px;
border-width: 0 1px 0 0;
-webkit-border-radius: 20px 0 0 20px;
-moz-border-radius: 20px 0 0 20px;
border-radius: 20px 0 0 20px;
}
.form-join .form-input {
position: relative;
width: 37%;
float: left;
}
.form-join .form-input + .form-input .form-control {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.form-join .form-submit {
width: 26%;
float: left;
}
.form-join .form-submit .btn {
padding-top: 14px;
padding-bottom: 14px;
-webkit-border-radius: 0 20px 20px 0;
-moz-border-radius: 0 20px 20px 0;
border-radius: 0 20px 20px 0;
}
/*--------------------------------------------------------------------------------------------------------------------
* Section: Testimonials
*--------------------------------------------------------------------------------------------------------------------*/
.testimonial {
padding: 10px;
}
.testimonial .text {
position: relative;
z-index: 1;
margin-top: 20px;
padding: 10px;
text-align: left;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.09);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.09);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.09);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background: #f5f7f9;
}
.testimonial .image {
width: 60px;
height: 60px;
margin-right: 20px;
overflow: hidden;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.testimonial .image img {
max-width: 100%;
}
.testimonial .author .company {
display: block;
margin-top: 5px;
color: #0e4bd1;
}
/*--------------------------------------------------------------------------------------------------------------------
* Section: Price
*--------------------------------------------------------------------------------------------------------------------*/
.plan {
margin-bottom: 20px;
padding: 50px 10px;
text-align: center;
background: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.plan .price {
margin-bottom: 20px;
font-size: 50px;
color: #0e4bd1;
}
.plan .price span {
font-size: 24px;
vertical-align: middle;
}
.plan .features {
list-style: none;
margin: 0 0 20px;
padding: 0;
}
.plan .features li {
padding: 2px 0;
cursor: pointer;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.plan:hover {
margin-top: -5px;
background: rgba(255, 255, 255, 0.95);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
/*--------------------------------------------------------------------------------------------------------------------
* Section: How To Start
*--------------------------------------------------------------------------------------------------------------------*/
.step {
margin-bottom: 20px;
}
.step .number {
display: block;
margin: 0 20px 0 0;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.09);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.09);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.09);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
width: 64px;
height: 64px;
text-align: center;
line-height: 64px;
background: #f5f7f9;
}
.step .title {
margin-bottom: 10px;
color: #0e4bd1;
}
.step .description {
margin-bottom: 0;
}
/*--------------------------------------------------------------------------------------------------------------------
* Section: Clients
*--------------------------------------------------------------------------------------------------------------------*/
.client {
text-align: center;
}
/*--------------------------------------------------------------------------------------------------------------------
* Section: Contact
*--------------------------------------------------------------------------------------------------------------------*/
/*
* Contact Information
*--------------------*/
.contact {
margin-bottom: 50px;
color: #fff;
}
.contact .icon {
display: block;
margin: 2px;
font-size: 32px;
line-height: 32px;
text-align: center;
}
.contact .info {
color: #fff;
}
.contact .info span {
display: block;
margin-bottom: 5px;
color: #aab6be;
font-size: 13px;
text-transform: lowercase;
}
/*
* Contact Form
*--------------*/
.contact-form .form-control {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
padding-left: 0;
padding-right: 0;
border-width:1px !important;
padding-left: 10px;
}
.contact-form textarea {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
resize: vertical;
min-height: 150px;
}
/*
* Contact Information List
*--------------------------*/
.contact-information {
list-style: none;
margin: 0 0 20px;
padding: 0;
}
.contact-information li {
padding: 10px 0;
border-bottom: solid 1px #f5f7f9;
}
.contact-information li .icon {
margin-right: 10px;
}
.contact-information li span {
display: inline-block;
width: 70px;
font-weight: 500;
}
/*--------------------------------------------------------------------------------------------------------------------
* Footer
*--------------------------------------------------------------------------------------------------------------------*/
.footer .footer-col{margin-bottom: 20px;}
.footer .logo{margin-bottom: 20px; font-size: 24px; line-height: 59px; vertical-align: middle;}
.footer .post{margin-bottom: 10px;}
.footer .post .image{width: 60px; height: 60px; overflow: hidden;}
.footer .post .text{margin-bottom: 0;}
.footer .menu{list-style: none; margin: 0; padding: 0;}
.footer .menu li{position: relative;}
.footer .menu li a{display: block; padding-bottom: 4px; font-weight: 500; color: #757575;}
.footer .menu li:hover a{color: #0e4bd1;}
.footer .menu li:hover::before{background-color: #0e4bd1;}
.footer .signup-form{margin-bottom: 20px;}
.footer .bottom-line{line-height: 70px; vertical-align: middle;}
.footer .bottom-line p{color: #aab6be; margin-bottom: 0;}
.footer .bottom-line .links{text-align: center;}
.footer .bottom-line .links a{display: inline-block; margin: 10px 5px; color: #aab6be;}
.footer .bottom-line .links a:hover{color: #fff;}
.footer .footer-col .menu li.w50{margin-right: 15px; display: inline-block;}
/*--------------------------------------------------------------------------------------------------------------------
* Section: Map
*--------------------------------------------------------------------------------------------------------------------*/
#map-canvas {
width: 100%;
height: 350px;
margin-top: 50px;
}
#map-canvas::after {
display: block;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .0;
}
/*--------------------------------------------------------------------------------------------------------------------
* Section: Statistics
*--------------------------------------------------------------------------------------------------------------------*/
.stat {
text-align: center;
}
.stat * {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.stat .icon {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
display: block;
width: 96px;
height: 96px;
color: #fff;
font-size: 32px;
line-height: 96px;
margin: 0 auto 20px;
border: solid 1px #fff;
}
.stat .number {
color: #0e4bd1;
}
.stat .title {
color: #fff;
margin-bottom: 0;
}
.stat:hover .icon {
color: #0e4bd1;
border-color: #0e4bd1;
}
.stat:hover .number {
color: #fff;
}
.stat:hover .title {
color: #0e4bd1;
}
/*--------------------------------------------------------------------------------------------------------------------
* Modal
*--------------------------------------------------------------------------------------------------------------------*/
.modal {
text-align: center;
white-space: nowrap;
}
.modal .modal-dialog {
display: inline-block;
margin: 0;
width: 500px;
max-width: 98%;
text-align: left;
white-space: normal;
vertical-align: middle;
}
.modal .modal-dialog .modal-content {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
padding: 20px 20px 0;
border: none;
opacity: .0;
}
.modal .modal-dialog .modal-content .modal-header {
border-bottom: none;
}
.modal .modal-dialog .modal-content .modal-header .modal-title {
text-transform: uppercase;
}
.modal .close {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.modal::before {
display: inline-block;
content: '';
height: 100%;
vertical-align: middle;
}
.modal.fade.in .modal-content {
opacity: 1.0;
}
.modal-result {
margin-bottom: 20px;
}
.result-icon {
position: relative;
margin-bottom: 20px;
}
.result-icon .icon-border {
position: relative;
width: 128px;
height: 128px;
margin-left: auto;
margin-right: auto;
}
.result-icon .icon-border .icon {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
font-size: 48px;
line-height: 128px;
text-align: center;
color: #0e4bd1;
}
.result-icon .icon-border svg {
z-index: 1;
width: 100%;
height: 100%;
}
.result-icon .icon-border svg circle {
fill: none;
stroke: #0e4bd1;
stroke-width: 1;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 39 39;
stroke-dashoffset: -39;
-webkit-transition: stroke-dashoffset 0.5s;
-moz-transition: stroke-dashoffset 0.5s;
-ms-transition: stroke-dashoffset 0.5s;
-o-transition: stroke-dashoffset 0.5s;
transition: stroke-dashoffset 0.5s;
}
.result-icon .icon-border::after {
position: absolute;
left: 0;
top: 0;
display: block;
content: '';
width: 100%;
height: 100%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: solid 3px #f5f7f9;
}
.in .icon-border .icon {
-webkit-animation: 0.5s bounceIn;
-o-animation: 0.5s bounceIn;
animation: 0.5s bounceIn;
}
.in .icon-border svg circle {
stroke-dashoffset: 0;
-webkit-transition: stroke-dashoffset 0.5s linear 0.5s;
-moz-transition: stroke-dashoffset 0.5s linear 0.5s;
-ms-transition: stroke-dashoffset 0.5s linear 0.5s;
-o-transition: stroke-dashoffset 0.5s linear 0.5s;
transition: stroke-dashoffset 0.5s linear 0.5s;
}
/*--------------------------------------------------------------------------------------------------------------------
* 404 Page
*--------------------------------------------------------------------------------------------------------------------*/
.page-404 h1 {
color: #323b46;
font-size: 80px;
font-weight: 600;
}
/*--------------------------------------------------------------------------------------------------------------------
* Inner Pages
*--------------------------------------------------------------------------------------------------------------------*/
.section-page-header {
padding: 30px 0;
background: #202529;
border-top: solid 1px #eaeaea;
border-bottom: solid 1px #eaeaea;
height: 110px;
}
.section-page-header-2 {
padding: 30px 0;
background: #f5f7f9;
border-top: solid 1px #eaeaea;
border-bottom: solid 1px #eaeaea;
margin-bottom: 20px;
}
.section-page-header .title {
color: #555;
font-size: 22px;
padding: 0;
margin-bottom: 5px;
}
.section-page-header-2 .title {
color: #555;
font-size: 22px;
padding: 0;
margin-bottom: 5px;
}
/*--------------------------------------------------------------------------------------------------------------------
* About
*--------------------------------------------------------------------------------------------------------------------*/
.single-user .name {
margin-bottom: 5px;
}
.single-user .post {
display: block;
padding-bottom: 10px;
margin-bottom: 20px;
color: #0e4bd1;
font-size: 16px;
border-bottom: solid 1px #f5f7f9;
}
.single-user .image {
position: relative;
margin-bottom: 20px;
padding: 5px;
border: solid 1px #f5f7f9;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.single-user .image img {
max-width: 100%;
width: 100%;
}
/*--------------------------------------------------------------------------------------------------------------------
* Blog
*--------------------------------------------------------------------------------------------------------------------*/
/*
* Post
*------*/
.blog-post {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: solid 1px #f5f7f9;
}
.blog-post .image {
position: relative;
margin-bottom: 20px;
overflow: hidden;
padding: 5px;
border: solid 1px #f5f7f9;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.blog-post .image img {
width: 100%;
max-width: 100%;
}
.blog-post .image iframe {
width: 100%;
max-width: 100%;
min-height: 350px;
border: none;
}
.blog-post .date {
margin-right: 5px;
text-align: center;
font-size: 18px;
line-height: 40px;
color: #0e4bd1;
background: #f5f7f9;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.blog-post .date .month {
display: block;
padding: 3px 12px;
color: #fff;
line-height: 22px;
font-size: 14px;
border-top: solid 1px #fff;
background: #0e4bd1;
}
.blog-post .title {
color: #0e4bd1;
margin-bottom: 20px;
}
.blog-post .meta {
margin-bottom: 10px;
display: inline-block;
}
.blog-post .meta li {
padding-left: 0;
line-height: 36px;
vertical-align: middle;
}
.blog-post .meta li::after {
display: inline-block;
content: '';
margin-left: 10px;
margin-right: 0;
}
.blog-post .meta li:last-child::after {
display: none;
}
.blog-post .read-more-button {
float: right;
}
.blog-post .content {
margin-bottom: 20px;
}
.blog-post .information {
margin-top: 20px;
line-height: 50px;
vertical-align: middle;
}
.blog-post .information .tags,
.blog-post .information .social-inline,
.blog-post .information .social-share {
line-height: 22px;
vertical-align: middle;
margin-bottom: 0 !important;
}
.blog-post .information .tags {
padding-top: 4px;
}
.blog-post .information .social-inline {
float: right;
}
/*
* Widget
*--------*/
.widget {
margin-bottom: 30px;
}
.widget .title {
margin-bottom: 20px;
color: #0e4bd1;
text-transform: uppercase;
}
/*
* Widget: Menu
*--------------*/
.sidebar-menu {
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-menu li a {
position: relative;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
font-weight: normal;
display: block;
padding-left: 15px;
padding-top: 10px;
padding-bottom: 10px;
color: #757575;
border-bottom: solid 1px #f5f7f9;
}
.sidebar-menu li a:hover {
color: #0e4bd1;
padding-left: 20px;
}
.sidebar-menu li a::before {
display: inline-block;
content: '';
position: absolute;
top: 19px;
left: 0;
margin-right: 10px;
width: 5px;
height: 5px;
border-top: solid 1px #996de9;
border-right: solid 1px #996de9;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.sidebar-menu li a:hover::before {
background: #996de9;
border-bottom: solid 1px #996de9;
border-left: solid 1px #996de9;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
/*
* Widget: Latest Posts
*----------------------*/
.post-list {
list-style: none;
margin: 0;
padding: 0;
}
.post-list .post {
padding-top: 10px;
padding-bottom: 10px;
border-bottom: solid 1px #f5f7f9;
}
.post-list .post .image {
width: 60px;
height: 60px;
overflow: hidden;
}
.post-list .post .text {
margin-bottom: 0;
}
.post-list li:last-child .post {
border-bottom: none;
}
/*
* Widget: Search
*----------------*/
/*
* Widget: Advert
*----------------*/
.advert {
width: 100%;
height: 250px;
min-height: 250px;
}
/*
* Widget: Tags
*--------------*/
/*
* Widget: Recent Comments
*-------------------------*/
.recent-comments {
list-style: none;
margin: 0;
padding: 0;
}
.recent-comments li {
padding-top: 10px;
padding-bottom: 10px;
border-bottom: solid 1px #f5f7f9;
}
/*
* Widget: Comments
*------------------*/
.comments {
position: relative;
list-style: none;
margin: 20px 0;
padding: 0;
}
.comments .image {
position: relative;
margin-bottom: 20px;
overflow: hidden;
padding: 5px;
border: solid 1px #f5f7f9;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.comments .image img {
max-width: 60px;
}
.comments .author {
margin-bottom: 0;
}
.comments .date {
display: block;
margin-bottom: 10px;
}
.comments .text {
margin-bottom: 10px;
}
.comments li {
margin-bottom: 20px;
text-align: justify;
}
.comments ul {
padding-left: 70px;
}
.send-comment textarea {
min-height: 150px;
resize: vertical;
}
/*--------------------------------------------------------------------------------------------------------------------
* Projects
*--------------------------------------------------------------------------------------------------------------------*/
/*
* Projects List
*---------------*/
.projects-list {
margin-bottom: 20px;
overflow: hidden;
}
/*
* Project Item
*--------------*/
.project {
margin-bottom: 20px;
}
.project .project-image-wrapper {
position: relative;
margin-bottom: 20px;
padding: 5px;
border: solid 1px #f5f7f9;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
.project .project-image {
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
position: relative;
z-index: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: rgba(255, 255, 255, 0.8);
}
.project .project-image img {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
width: 100%;
max-width: 100%;
}
.project .project-image .information {
position: absolute;
z-index: 3;
bottom: 10px;
left: 0;
}
.project .project-image .information .title {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
display: inline-block;
margin-left: -5px;
margin-bottom: 5px;
padding: 10px;
color: #fff;
font-size: 15px;
background: rgba(0, 0, 0, 0.7);
}
.project .project-image .information .category {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
display: block;
margin: -5px 10px 10px 15px;
color: #0e4bd1;
-webkit-transform: translateY(300%);
-moz-transform: translateY(300%);
-ms-transform: translateY(300%);
-o-transform: translateY(300%);
transform: translateY(300%);
}
.project .project-image .information .category::before {
display: inline-block;
content: '@ ';
}
.project .project-image::before {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
display: block;
content: '';
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0);
}
.project .project-image::after {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transform: translateX(200%) translateY(200%);
-moz-transform: translateX(200%) translateY(200%);
-ms-transform: translateX(200%) translateY(200%);
-o-transform: translateX(200%) translateY(200%);
transform: translateX(200%) translateY(200%);
display: block;
content: '';
position: absolute;
bottom: -48px;
right: -48px;
background: #0e4bd1;
z-index: 2;
width: 96px;
height: 96px;
color: #fff;
font-size: 18px;
padding: 18px 0 0 21px;
opacity: 0;
font-family: 'Moon Light', sans-serif;
}
.project .project-image:hover::before {
background: rgba(0, 0, 0, 0.6);
}
.project .project-image:hover::after {
opacity: 1.0;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
.project .project-image:hover .information .title {
background: #000000;
}
.project .project-image:hover .information .category {
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
.project.project-small .project-image .information .title {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
opacity: 0;
background: transparent !important;
}
.project.project-small .project-image:hover .title {
opacity: 1.0;
background: transparent !important;
}
/*
* Single Project
*----------------*/
.single-project .image {
position: relative;
margin-bottom: 20px;
padding: 5px;
border: solid 1px #f5f7f9;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
.single-project .image img {
max-width: 100%;
width: 100%;
}
.single-project .title {
font-size: 18px;
}
.single-project p {
text-align: justify;
}
.single-project .details {
list-style: none;
margin: 0 0 20px;
padding: 0;
}
.single-project .details li {
padding: 5px 0;
border-bottom: solid 1px #f5f7f9;
}
.single-project .details li span {
display: inline-block;
width: 50px;
font-weight: 500;
}
@media screen and (max-width: 750px){
.matop1 .section-title{ margin-top:680px }
}
@media screen and (max-width: 750px){
.matop2 .text-center{ margin-top:200px }
}
@media screen and (max-width: 320px){
.section .section-title.title-jx{ margin-top:100px;}
}
/*--------------------------------------------------------------------------------------------------------------------
* Animations
*--------------------------------------------------------------------------------------------------------------------*/
/* Label Error Animation */
@-moz-keyframes labelError {
from {
opacity: .0;
-webkit-transform: translateY(-200%);
-moz-transform: translateY(-200%);
-ms-transform: translateY(-200%);
-o-transform: translateY(-200%);
transform: translateY(-200%);
}
to {
opacity: 1.0;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
}
@keyframes labelError {
from {
opacity: .0;
-webkit-transform: translateY(-200%);
-moz-transform: translateY(-200%);
-ms-transform: translateY(-200%);
-o-transform: translateY(-200%);
transform: translateY(-200%);
}
to {
opacity: 1.0;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
}
/* SubMenu Animation */
@-moz-keyframes animationSubMenu {
from {
opacity: 0;
-webkit-transform: translateY(10%) scale(0.8);
-moz-transform: translateY(10%) scale(0.8);
-ms-transform: translateY(10%) scale(0.8);
-o-transform: translateY(10%) scale(0.8);
transform: translateY(10%) scale(0.8);
}
to {
opacity: 1;
-webkit-transform: translateY(0) scale(1);
-moz-transform: translateY(0) scale(1);
-ms-transform: translateY(0) scale(1);
-o-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
}
}
@keyframes animationSubMenu {
from {
opacity: 0;
-webkit-transform: translateY(10%) scale(0.8);
-moz-transform: translateY(10%) scale(0.8);
-ms-transform: translateY(10%) scale(0.8);
-o-transform: translateY(10%) scale(0.8);
transform: translateY(10%) scale(0.8);
}
to {
opacity: 1;
-webkit-transform: translateY(0) scale(1);
-moz-transform: translateY(0) scale(1);
-ms-transform: translateY(0) scale(1);
-o-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
}
}
/*--------------------------------------------------------------------------------------------------------------------
* Responsive
*--------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 991px) {
.brand .big {
display: none !important;
}
.brand .small {
display: inline-block !important;
}
.breadcrumb {
float: none;
text-align: left !important;
padding-left: 0 !important;
}
.bottom-line {
line-height: inherit !important;
text-align: center !important;
}
.bottom-line .links {
text-align: center !important;
}
}
@media screen and (max-width: 767px) {
.xs-text-left {
text-align: left !important;
}
.form-join .form-input,
.form-join .form-submit {
width: 100%;
}
.form-join .form-control {
border-width: 0 0 1px 0;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
.form-join .form-input + .form-input .form-control {
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
border-radius: 0 !important;
}
.form-join .form-submit .btn {
display: block;
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
.blog-post .information {
text-align: center;
}
.blog-post .social-inline {
margin-top: 20px;
float: none !important;
}
.stat {
margin-bottom: 20px;
}
}
/* Table */
.table-wrapper {
-webkit-overflow-scrolling: touch;
overflow-x: auto;
}
table {
margin: 0 0 2em 0;
width: 100%;
}
img{
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
table tbody tr {
border: solid 1px #e5e5e5;
border-left: 0;
border-right: 0;
}
table tbody tr:nth-child(2n) {
background-color: #f8f8f8;
}
table td {
padding: 0.75em 0.75em;
width:16%;
}
table th {
color: #646464;
font-size: 1em;
font-weight: 600;
padding: 0 0.75em 0.75em 0.75em;
text-align: center;
}
table thead {
border-bottom: solid 2px #e5e5e5;
text-align: center;
}
table tfoot {
border-top: solid 2px #e5e5e5;
}
table.alt {
border-collapse: separate;
}
table.alt tbody tr td {
border: solid 1px #e5e5e5;
border-left-width: 0;
border-top-width: 0;
}
table.alt tbody tr td:first-child {
border-left-width: 1px;
}
table.alt tbody tr:first-child td {
border-top-width: 1px;
}
table.alt thead {
border-bottom: 0;
}
table.alt tfoot {
border-top: 0;
}
blockquote-f {
border-left: solid 4px #e5e5e5;
font-style: italic;
margin: 0 0 2em 0;
padding: 0.5em 0 0.5em 2em;
}
.container-w80{width: 80%;margin:0 auto;}
h3.title {line-height: 26px;}
h3.title.center {text-align: center;margin-top: 5px;cursor: pointer;}
h3.title.center a{color: #333;}
h3.title.center a:hover{color: #0e4bd1}
.bg_btn{font-size: 13px; text-transform: uppercase; font-family: 'Moon Light', sans-serif; font-weight: 600; color: #fff; margin-right: 10px; text-align: center; width: 160px; height: 46px; line-height: 46px; background-image: -webkit-gradient(linear, left top, right top, from(#a65c00), color-stop(51%, #0e4bd1), to(#a65c00)); background-image: -webkit-linear-gradient(left, #a65c00 0%, #0e4bd1 51%, #a65c00 100%); background-image: -o-linear-gradient(left, #a65c00 0%, #0e4bd1 51%, #a65c00 100%); background-image: linear-gradient(to right, #a65c00 0%, #0e4bd1 51%, #a65c00 100%); -webkit-transition: all 400ms ease-out !important; -o-transition: all 400ms ease-out !important; transition: all 400ms ease-out !important; background-size: 200% auto; border: none; outline: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; cursor: pointer; display: inline-block;border-radius: 40px;}
.bg_btn:hover{background-position: right center; color: #fff;}
.bg_btn:focus{background-image: -webkit-gradient(linear, left top, right top, from(#a65c00), color-stop(51%, #0e4bd1), to(#a65c00)) !important; background-image: -webkit-linear-gradient(left, #a65c00 0%, #0e4bd1 51%, #a65c00 100%) !important; background-image: -o-linear-gradient(left, #a65c00 0%, #0e4bd1 51%, #a65c00 100%) !important; background-image: linear-gradient(to right, #a65c00 0%, #0e4bd1 51%, #a65c00 100%) !important; -webkit-transition: all 400ms ease-out !important; -o-transition: all 400ms ease-out !important; transition: all 400ms ease-out !important; background-size: 200% auto;}
.tp_btn{height: 46px; width: 165px; text-align: center; color: #fff;border:2px solid #0e4bd1; display:inline-block; line-height: 42px; -webkit-transition: all 400ms ease-out; -o-transition: all 400ms ease-out; transition: all 400ms ease-out; font-size: 13px; font-family: 'Moon Light', sans-serif; font-weight: 600; position: relative; z-index: 3; margin: auto;border-radius: 40px;}
.tp_btn:hover{color: #fff;border:2px solid #a65c00;border-radius: 40px;}
.tp_btn:hover:after{opacity: 1;}
.l_news_item{-webkit-transition: all 400ms linear 0s; -o-transition: all 400ms linear 0s; transition: all 400ms linear 0s;}
.l_news_item .l_news_img{overflow: hidden;}
.l_news_item .l_news_img img{-webkit-transition: all 400ms linear 0s; -o-transition: all 400ms linear 0s; transition: all 400ms linear 0s;}
.l_news_item .l_news_img img:hover{-webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05);}
.l_news_item .l_news_content{border: 1px solid #ebebeb; border-top: 0px; padding: 20px 20px;}
.l_news_item .l_news_content h4{font-size: 18px;line-height: 24px;margin-bottom: 0; font-family: 'Moon Light', sans-serif;-webkit-transition: all 400ms linear 0s; -o-transition: all 400ms linear 0s; transition: all 400ms linear 0s;}
.l_news_item .l_news_content h4:hover{color: #0e4bd1;}
#
.l_news_item .l_news_content h3{font-size: 14px; line-height: 18px; color: #51545f; font-family: 'Moon Light', sans-serif; font-weight: 400; padding: 0px 0px 10px 0px;}
.l_news_item .l_news_content h3:hover{color: #0e4bd1;}
.l_news_item .l_news_content p{font-size: 14px; line-height: 26px; font-family: 'Moon Light', sans-serif; font-weight: 400; padding: 15px 0px 10px 0px;margin-bottom: 0;}
.l_news_item:hover {-webkit-box-shadow: 0px 25px 49px 0px rgba(58, 74, 88, 0.1);box-shadow: 0px 25px 49px 0px rgba(58, 74, 88, 0.1);cursor: pointer;}
.l_news_inner .col-md-4{padding-top: 30px;}
.row.section-content.mt20 {margin-top: 10px;}
/*vjd*/
.container.downloadx {border-bottom: solid 1px #e5e5e5;padding-bottom: 40px;}
.downloadx p{text-align: center;color: #333;font-weight: bold;margin-bottom: 30px;}
.cta-block-container{width: 100%; margin: 0 auto; display: block; overflow: hidden; position: relative; border-radius: 2px; text-align: center;border: 1px solid #e6e6e6; background-color: #ffffff;}
.cta-block-container .cta-block-btn{padding: 0; margin: 10px 5px; overflow: hidden; position: relative; display: inline-block; vertical-align: middle;}
.cta-block-container .cta-block-body{padding: 0; color: #212121; font-size: 20px; overflow: hidden; margin: 10px 5px; line-height: 32px; position: relative; display: inline-block; vertical-align: middle;}
.cta-block-black .cta-block-container {border-color: #212121;background-color: #212121;}
.cta-block-body p{margin-bottom: 0;}
.cta-block-body p span{color: #fff;}
.gfort-block-body .gfort-block-title{padding: 0; width: 100%; display: block; color: #202020; overflow: hidden; position: relative; margin: 0 auto 10px;}
.gfort-block-body .gfort-block-title h4{font-size: 18px; font-weight: 700; margin-bottom: 0;}
h4.download-title{text-align: center; display: inline-block; vertical-align: middle;font-weight: bold;margin-bottom: 0;color: #FF8362;font-size: 18px;}
/*products*/
.products_banner{text-align: right;margin: 0 auto;}
.products_banner img {border-radius: 4px;}
/*solutions*/
.l_news_inner.mt50{margin-top: 50px;}
.l_news_inner .col-md-6 {padding-top: 30px;}
.solution_content .image{margin: 50px 0 20px 0;}
/*news*/
.newsmt50{margin-top: 50px;margin-bottom: 20px;}
.news p.section-subtitle{margin-bottom: 15px;}
#post-banner{height: 400px;background-repeat: no-repeat;background-size: cover;max-width: 100vw;}
.banner-container{margin:0 auto;}
.banner-container .content-container{padding: 20px 50px;}
.banner-container h1{font-size: 50px;font-weight: 300;line-height: 1.2;color: white;text-shadow: 1px 1px 5px black;}
.item-page{padding: 60px 0;}
.item-page a{color: inherit;color: #333;font-size: 16px;}
.item-page a:hover{color: #0e4bd1;}
.item-page p{margin-bottom: 0.5em;line-height: 1.5; padding-left: 15px;}
.item-page a.simple-link{font-weight: normal;color: #0e4bd1;padding-left: 15px;}
.item-page a.simple-link:before{content: initial;}
.item-page a.simple-link:hover{color:#323b46}
.item-page h3{font-size: 24px;color: #333;font-weight: 300;border-bottom: 1px solid rgba(0,0,0,0.1);padding: 0 0 0.5em 0;padding-left: 15px;}
.item-page .right-rail{background: #f2f2f3;text-align: center;padding: 20px 20px 40px 20px;float: right;}
.item-page .right-rail h3{margin: 0;border: none;text-align: center;padding-bottom: 20px;}
.item-page strong{font-weight: 400;letter-spacing: 0;}
.item-page img{max-width: 100%;}
.item-page a.simple-button{display: inline-block;margin: 20px 0;padding: 10px 20px;width: unset;}
.item-page a.simple-button:hover{color: #0e4bd1;}
.item-page .col-xs-6 div p{padding: 1em 0;}
.item-page .mr{text-align: left;}
.item-page .mr img{width: 20%;margin: 10px 0;}
.item-page .news_list strong {font-size: 20px;color: #333;font-weight: normal;}
.item-page .news_list a strong:hover{color: #0e4bd1;}
.blog-entry{margin-bottom: 30px;padding-bottom: 30px;border-bottom: 1px solid rgba(0,0,0,0.1);}
/* Pagination*/
.pagination{margin: auto;display: block;}
.pagination ul li{display: inline;}
.pagination ul{list-style-type: none;}
.pagination{margin-top: 10px;text-align: center;}
.pagination a{text-decoration: none;}
.pagination strong{font-weight: normal;}
.pagination a, .pagination strong, .pagination span{display: inline-block;min-width: 15px;margin-left: 5px;padding: 0 5px;line-height: 25px;padding: 0px 10px;letter-spacing: 1px;-moz-border-radius: 4px;border-radius: 4px;}
.pagination span{background: rgba(0,0,0,0.1);}
.pagination > *:first-child{margin-left: 0;}
.pagination a.previous, .pagination a.next{font-size: 16px;line-height: 23px;}
.pagination a, .pagination strong{border: 1px solid #Eeeeef;}
.pagination a{color: #444;}
.pagination strong, .pagination a:hover{background: #444;color: #FFF;}
.pagination p.counter {margin-bottom: 15px;}
@media (max-width: 1180px){
#post-banner{height: 35vw;}
.item-page{padding: 40px 0px;}
}
@media (max-width: 991px){
.item-page .right-rail{margin-top: 40px;background: none;}
.item-page .right-rail h3{margin: 0 10% 1em 0;border-bottom: 1px solid rgba(0,0,0,0.1);text-align: left;padding: 0 0 0.5em 0;}
.banner-container h1{font-size: calc(12px + 4vw);}
}
.minivpn{ margin-top:12%;}
@media (max-width: 750px){
.minivpn{ margin-top:100px;}
.FAQ ul{ padding-left:0; margin-top:50px;}
}
/*vjd*/
.table-wrapper.mt50{margin-top: 50px;}
.table-wrapper td.textleft{text-align: left; font-weight:bold;}
/*distributor*/
.col-md-3.vbot {margin-top: 34px;text-align: left;}
.resellers-table01 {margin-bottom: 50px;margin-top: 50px;}
.resellers-table01 .animated a{font-size: 40px;border-radius: 40px !important;}
.resellers-table01 .animated a:hover{text-decoration:underline;color: #5289b4;}
/*faq*/
.blockquote{margin: 0 0 20px; font-size: inherit; border-left: solid 1px #0e4bd1; padding: 10px 20px;}
.ask{margin: 50px 0;}
.ask h4{cursor: pointer;}
.ask h4:hover{color: #0e4bd1;}
video{width: 100%;}
.mt50{margin-top: 50px;}
/*contact*/
.m50{margin: 30px auto 50px;border:solid 1px #eaeaea;background: #f5f7f9;padding: 30px;}
section.section.trigger.mask{padding-top: 100px;}
/*下拉èœå•*/
.navbar-nav .nav-link{color: #fff;}
.navbar-nav .nav-link:focus{color: #fff;}
.navbar-nav li{display: inline-block;position:relative}
.navbar-nav li a{color: #fff; font-size: 16px; font-family: "SkarpaLt", sans-serif; font-weight: 500; -webkit-transition: all 400ms linear 0s; -o-transition: all 400ms linear 0s; transition: all 400ms linear 0s;}
.navbar-nav li:hover a,.navbar-nav li.active a{color: #000;}
.navbar-nav li .subnav{display: none; position: absolute; width: 150px; left: -15px; top: 55px; background-color: #fff; padding: 10px 0; z-index: 999;background-color: rgba(0,0,0,0.4); -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition: background 500ms ease, -webkit-transform 500ms ease; transition: background 500ms ease, -webkit-transform 500ms ease; -o-transition: transform 500ms ease, background 500ms ease; transition: transform 500ms ease, background 500ms ease; transition: transform 500ms ease, background 500ms ease, -webkit-transform 500ms ease; -webkit-transition: transform 500ms ease, background 500ms ease;}
.navbar-nav li .subnav ul{width: 100%; display: inline-block;padding: 0;}
.navbar-nav li .subnav ul li{float: left; width: 100%; margin-bottom: 5px; padding: 0; margin-right: 0; text-align: center; line-height: 35px; height: 35px;}
.navbar-nav li .subnav ul li a{padding: 0; width: 100%; line-height: 35px;}
.navbar-nav li .subnav ul li:hover a{color:#5289b4}
.navbar-nav li .subnav a:hover{color: #5289b4;}
/*显示二级èœå•*/
.navbar-nav li:hover .subnav{background-color: #fff; display: block; background-color: rgba(0,0,0,0.4);-webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition: background 500ms ease, -webkit-transform 500ms ease; transition: background 500ms ease, -webkit-transform 500ms ease; -o-transition: transform 500ms ease, background 500ms ease; transition: transform 500ms ease, background 500ms ease; transition: transform 500ms ease, background 500ms ease, -webkit-transform 500ms ease; -webkit-transition: transform 500ms ease, background 500ms ease;}
/*content*/
.content .content-txt{font-size: 14px; padding: 0 5%; margin: 0 auto; margin-top: 20px; color: #51545f; line-height: 26px; font-weight: 400;}
.content .content-link{padding: 0 60px; text-align: center; margin-top: 50px;color: #51545f; }
section.latest_news_area.content{padding-top: 45px; width: 63%; margin: 0 auto; background: #fff;min-height:700px;padding-bottom: 100px;}
section.latest_news_area.content:hover{ -webkit-box-shadow: 0px 25px 49px 0px rgba(58, 74, 88, 0.1);
box-shadow: 0px 25px 49px 0px rgba(58, 74, 88, 0.1);}
h1.news_tit {
color: #333;
font-size: 28px;
padding: 0 5%;
text-align: center;margin:30px 0px 50px 0px;
}
.content-txt p{font-size: 15px;color: #757575;}
.prev-content,.next-content{margin: 0 15px;}
.prev-content a,.next-content a{color: #757575;}
.prev-content a:hover,.next-content a:hover{color:#0e4bd1;}
.in_products a.btn.btn-theme {margin-right: 10px;}
@media screen and (max-width: 768px){
h1{font-size: 28px;}
.m50{padding: 15px;margin: 10px auto 30px auto;}
.section{padding-top: 0px;padding-bottom: 0px;}
.mt50{margin-top: 30px;}
.trigger .trigger-text{margin-bottom: 20px;}
.trigger .trigger-title{margin-bottom: 0;}
.bg_btn,.tp_btn{width: 130px;height: 40px;line-height: 40px;}
.item-page h3{margin:0 15px 20px 30px;padding-left: 0px;}
.item-page .row .col-sm-3{margin: 0 15px 0px 30px;}
.item-page .row .col-sm-9{margin:15px 15px 0px 15px;}
.item-page a.simple-link{padding-left: 30px;}
.item-page .right-rail h3{margin: 0;}
.item-page a{padding: 0;}
.item-page .right-rail{text-align: left;}
.item-page a.simple-link.pl{padding-left: 0;}
.col-md-12.col-sm-6.contacts_bottom{padding: 0;}
.col-md-12.col-sm-6.contacts_bottom p{padding-left: 0;}
.col-md-12.col-sm-6.contacts_bottom.mt20{margin-top: 20px;}
.resellers-table01 .animated a{font-size: 28px;}
.side-bar{display: none;}
.navbar-nav li{width: 100%;}
.navbar-nav li .subnav{left: 0;top: -20px;left: 30%;}
.navbar-nav li .subnav ul li{height: 30px;line-height: 30px;margin-bottom:0;}
.navbar-nav li .subnav ul li a{line-height: 30px;}
section.latest_news_area.content{width: 100%;padding-top: 10px;}
h1.news_tit{font-size:21px;margin-bottom: 20px;}
.in_products .col-xs-5 {width: 100%;}
.in_products a.btn.btn-theme{margin-right: 5px;padding: 7px 15px;}
.in_products h3.title{text-align: center;margin-top: 10px;margin-bottom: 0;}
}
/*å³ä¾§æ‚¬æµ®icon*/
.side-bar{width: 50px;position: fixed;font-size: 0;line-height: 0;z-index: 100;top: 50%;right: 15px;margin-top: -132.5px;}
.side-bar a{width: 50px;height: 50px;display: inline-block;margin-bottom: 5px;border-radius: 50%;}
.main-container #contact{
position:relative;
width:100%;
height:100%;
}
.main-container #contact:before{
content:' ';
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.7);
}
.ind-download{text-align:left;}
.ind-download a{display: inline-block; padding-left: 10px; color: #000; text-decoration: none; font-size: 18px; /*margin-right: 50px;*/ }
.ind-download a.ico-windows{ background-position: 0 0 }
.ind-download a.ico-mac{ background-position: 0 -63px }
.ind-download a.ico-ios{ background-position: 0 -124px }
.ind-download a.ico-Android{ background-position: 0 -185px }
#simpleBackground{
/*background: url(../images/background2.jpg);*/
background-repeat: no-repeat;
background-size: 2000px 700px;
background-position:top;
}
#simpleBackgroundENG{
/*background: url(../images/background2.jpg);*/
background-repeat: no-repeat;
background-size: 2000px 700px;
background-position:top;
}
#downloadPageBackground{
/*background: url(../images/background2.jpg);*/
background-repeat: no-repeat;
background-size: 2000px 900px;
background-position:top;
}
#VPNPageBackground{
background: url(../images/vpnBackground.jpg);
background-repeat: no-repeat;
background-size: 2000px 800px;
background-position:top;
}
#UnblockPageBackground{
background: url(../images/allAppIcon.jpg);
background-repeat: no-repeat;
background-size: 2000px 800px;
background-position:top;
}
#SupportPageBackground{
/*background: url(../images/background2.jpg);*/
background-repeat: no-repeat;
background-size: 2000px 1700px;
background-position:top;
}
#SupportPageBackgroundENG{
/*background: url(../images/background2.jpg);*/
background-repeat: no-repeat;
background-size: 2000px 1800px;
background-position:top;
}
#rating{
width:350px;
height:370px;
border: 1px solid;
padding: 45px;
box-shadow: 2px 5px #d3d3d3;
background:#fcfcfc;
}
#rating .section-subtitle{ font-size:20px;line-height:1.6;text-align:justify;}
#rating .section-subtitle .Eng{ font-size:20px;line-height:1.6;text-align:justify;}
.FAQ li{ padding: 15px 0; }
.FAQ li h4{font-weight: bold; line-height: 30px; margin-bottom: 10px;font-size:18px; color:#5289b4;}
.FAQ li p{ color: #666 ;font-size: 16px; text-align:justify;}
.FAQ li img{ width:40px;height:40px;}
.FAQ li a{color:#000;}
.FAQ li a:hover{color:#5289b4;background:transparent;}
.Social ul{list-style:none; text-align:center;}
.Social li{ padding: 15px 0; }
.Social li h4{font-weight: bold; line-height: 30px; margin-bottom: 10px; margin-right:20px; font-size:30px; color:#5289b4;}
.Social li p{ color: #666 ;font-size: 16px;margin-right:20px;}
.Social li img{ width:40px;height:40px;}
.Social li a{color:#000;}
.Social li a:hover{color:#5289b4;background:transparent;}
.downloadQRAndroid img{height:25%; width:25%;}
.downloadSSAndroid img{height:50%;width:50%;}
.downloadQRIOS img{height:25%; width:25%;}
.downloadSSIOS img{height:35%;width:35%;}
.downloadQRWindows img{height:25%; width:25%;}
.downloadSSWindows img{height:50%;width:50%;}
.privacyImage img{height:60%;width:60%;}
#UnblockWebsiteEng .section-title h3{color:#fff; font-size:60px; font-weight:bold; text-align:center;}
#UnblockWebsiteEng .section-subtitle h4{color:#fff; font-size:23px; line-height:45px; text-align:center;}
/*Homepage*/
#topContent .section-title h3{color:#000; font-size:70px; font-weight:bold; text-align:left;}
#topContent .DownloadBtn .btn{float:left;}
#topContent .section-subtitle h4{color:#000; font-size:16px; font-weight:bold; text-align:left;}
#topContent .ind-download{}
#topContent .text-center .arrangeTopContent{}
#topContent .text-center .arrangeTopContent2{}
#topContent .text-center #homeLogo{background-image: url(../images/web.jpg);background-repeat: no-repeat; background-size: 450px 350px; width:500px;height:425px; margin-top:10%;}
#topContent .text-center .bxlogo{ display:none}
#topContent .text-center .arrangeTopContent2ENG{}
#topContent .text-center .arrangeTopContent2ENG #homeLogo{background-image: url(../web.png);background-repeat: no-repeat; background-size: 450px 350px; width:500px;height:500px; margin-top:10%;}
#HomeIntroContent .text-center{margin-top:5%;}
#HomeIntroContent .text-center .DownloadBtn .btn{float:left;}
#HomeIntroContent .text-center .section-title h3{color:#000; font-size:35px; font-weight:bold; text-align:left;}
#HomeIntroContent .text-center .section-subtitle p{font-size:16px;line-height:1.6;text-align:justify;}
#HomeIntroContent .text-center .content{}
#HomeIntroContent .text-center .arrangeContent{}
#HomeIntroContent .text-center .arrangeContent4{}
#HomeIntroContent .fengsuo,#HomeIntroContent .text-center .content2 img.pricead{ width:auto; height:auto}
/*WhatisVPN page*/
#PrivacyIntroContent .text-center{margin-top:5%;}
#PrivacyIntroContent .text-center .DownloadBtn .btn{float:left;}
#PrivacyIntroContent .text-center .section-title h3{color:#000; font-size:40px; font-weight:bold; text-align:left;}
#PrivacyIntroContent .text-center .section-subtitle p{font-size:20px;line-height:1.6;text-align:justify;}
#PrivacyIntroContent .text-center .content{}
#PrivacyIntroContent .text-center .content img{width:80%;height:80%;}
#PrivacyIntroContent .text-center .arrangeContent{}
#UnlimitedContent .text-center{margin-top:5%;}
#UnlimitedContent .text-center .DownloadBtn .btn{float:left;}
#UnlimitedContent .text-center .section-title h3{color:#000; font-size:40px; font-weight:bold; text-align:left;}
#UnlimitedContent .text-center .section-subtitle p{font-size:20px;line-height:1.6;text-align:justify;}
#UnlimitedContent .text-center .arrangeContent2{}
#UnlimitedContent .text-center .content2{}
#UnlimitedContent .text-center .content2 img{height:80%;width:80%;}
#UnblockContent .text-center{margin-top:5%;}
#UnblockContent .text-center .DownloadBtn .btn{float:left;}
#UnblockContent .text-center .section-title h3{color:#000; font-size:40px; font-weight:bold; text-align:left;}
#UnblockContent .text-center .section-subtitle p{font-size:20px;line-height:1.6;text-align:justify;}
#UnblockContent .text-center .content3{}
#UnblockContent .text-center .content3 img{height:80%;width:80%;}
#UnlimitedContentENG .text-center{margin-top:5%;}
#UnlimitedContentENG .text-center .DownloadBtn .btn{float:left;}
#UnlimitedContentENG .text-center .section-title h3{color:#000; font-size:40px; font-weight:bold; text-align:left;}
#UnlimitedContentENG .text-center .section-subtitle p{font-size:20px;line-height:1.6;text-align:justify;}
#UnlimitedContentENG .text-center .arrangeContent2{}
#UnlimitedContentENG .text-center .content2{}
#UnlimitedContentENG .text-center .content2 img{height:80%;width:80%;}
#UnblockContentENG .text-center{margin-top:5%;}
#UnblockContentENG .text-center .DownloadBtn .btn{float:left;}
#UnblockContentENG .text-center .section-title h3{color:#000; font-size:40px; font-weight:bold; text-align:left;}
#UnblockContentENG .text-center .section-subtitle p{font-size:20px;line-height:1.6;text-align:justify;}
#UnblockContentENG .text-center .content3{}
#UnblockContentENG .text-center .content3 img{height:80%;width:80%;}
#HomeIntroContent .text-center .arrangeContent2{}
#HomeIntroContent .text-center .content2{}
#HomeIntroContent .text-center .content2 img{height:100%;width:100%;}
#HomeIntroContent .text-center .content3{}
#HomeIntroContent .text-center .content3ENG{}
#HomeIntroContent .text-center .arrangeContent4 .section-title h3{color:#000; font-size:40px; font-weight:bold; text-align:center;}
#HomeIntroContent .text-center .arrangeContent4 .section-subtitle p{font-size:20px;line-height:1.6;text-align:center;}
#HomeIntroContent .text-center .arrangeContent4 .section-title a{color: #5289b4;}
#HomeIntroContent .text-center .arrangeContent4 .section-title a:hover{color: #5289b4;}
#HomeIntroContent .text-center .arrangeContent4{}
#HomeIntroContent .text-center .content4{}
#rewards .rewardsImage img{height:60%;width:60%;}
#footerMobile {border-top:1px solid #cecece;}
/*#footerMobile .footerContent p{float:left;padding:7px;}*/
#footerMobile .footerContent p{float:left;}
#footerMobile .footerContent2 p{float:right;}
/*WhatisVPN page*/
#whatisvpnContent .section-title h3{color:#fff; font-size:70px; font-weight:bold; text-align:center;}
#whatisvpnContent .section-subtitle h4{color:#fff; font-size:25px; line-height:45px; text-align:center;}
#whatisvpnContentENG .section-title h3{color:#fff; font-size:70px; font-weight:bold; text-align:center;}
#whatisvpnContentENG .section-subtitle h4{color:#fff; font-size:25px; line-height:45px; text-align:center;}
/*PrivacyProtect page*/
#privacyContent .section-title h3{color:#fff; font-size:70px; font-weight:bold; text-align:left;}
#privacyContent .section-subtitle h4{color:#fff; font-size:22px; line-height:45px; text-align:left;}
#privacyContent .DownloadBtn .btn{float:left;}
#privacyContentENG .section-title h3{color:#fff; font-size:70px; font-weight:bold; text-align:left;}
#privacyContentENG .section-subtitle h4{color:#fff; font-size:22px; line-height:45px; text-align:left;}
#privacyContentENG .DownloadBtn .btn{float:left;}
/*UnlimitedSpeed page*/
#unlimitedContent .section-title h3{color:#fff; font-size:70px; font-weight:bold; text-align:left;}
#unlimitedContent .section-subtitle h4{color:#fff; font-size:22px; line-height:45px; text-align:left;}
#unlimitedContent .DownloadBtn .btn{float:left;}
/*UnblockWebsite*/
#unblockContent .section-title h3{color:#fff; font-size:70px; font-weight:bold; text-align:center;}
#unblockContent .section-subtitle h4{color:#fff; font-size:25px; line-height:45px; text-align:center;}
/*Download Android page*/
#downloadAndroidContent .section-title h3{color:#000; font-size:70px; font-weight:bold; text-align:left;}
#downloadAndroidContent .section-subtitle h4{color:#000; font-size:16px; font-weight:bold; text-align:left;}
#downloadAndroidContent .downloadQRAndroid .section-subtitle h4{text-align:left;}
#downloadAndroidContent .DownloadBtn .btn{float:left;}
#downloadAndroidContent .DownloadBtn .googlePlay img{float:left;width:40%;height:40%;}
#downloadAndroidContentENG .section-title h3{color:#000; font-size:70px; font-weight:bold; text-align:left;}
#downloadAndroidContentENG .section-subtitle h4{color:#000; font-size:16px; font-weight:bold; text-align:left;}
#downloadAndroidContentENG .downloadQRAndroid .section-subtitle h4{text-align:left;}
#downloadAndroidContentENG .DownloadBtn .btn{float:left;}
#downloadAndroidContentENG .DownloadBtn .googlePlay img{float:left;width:40%;height:40%;}
/*Download IOS page*/
#downloadIOSContent .section-title h3{color:#000; font-size:70px; font-weight:bold; text-align:left;}
#downloadIOSContent .section-subtitle h4{color:#000; font-size:16px; font-weight:bold; text-align:left;}
#downloadIOSContent .downloadQRIOS .section-subtitle h4{text-align:left;}
#downloadIOSContent .DownloadBtn .btn{float:left;}
/*Download Windows page*/
#downloadWindowsContent .section-title h3{color:#000; font-size:70px; font-weight:bold; text-align:left;}
#downloadWindowsContent .section-subtitle h4{color:#000; font-size:16px; font-weight:bold; text-align:left;}
#downloadWindowsContent .downloadQRWindows .section-subtitle h4{text-align:left;}
#downloadWindowsContent .DownloadBtn .btn{float:left;}
.row-top-1{margin-top:5%}
@media (max-width: 1024px){
#rating{
width:280px;
height:300px;
border: 1px solid;
padding: 45px;
box-shadow: 2px 5px #d3d3d3;
background:#fcfcfc;
}
#rating .section-subtitle{ font-size:16px;line-height:1.6;text-align:justify;}
#rating .section-subtitle .Eng{ font-size:15px;line-height:1.6;text-align:justify;}
#VPNPageBackground{
background: url(../images/vpnBackground.jpg);
background-repeat: no-repeat;
background-size: 2000px 850px;
background-position:top;
}
#UnblockWebsiteEng .section-title h3{color:#fff; font-size:45px; font-weight:bold; text-align:center;}
#UnblockWebsiteEng .section-subtitle h4{color:#fff; font-size:20px; line-height:45px; text-align:center;}
#simpleBackgroundENG{
/*background: url(../images/background2.jpg);*/
background-repeat: no-repeat;
background-size: 2000px 760px;
background-position:top;
}
#downloadAndroidContentENG .section-title h3{color:#000; font-size:70px; font-weight:bold; text-align:left;}
#downloadAndroidContentENG .section-subtitle h4{color:#000; font-size:16px; font-weight:bold; text-align:left;}
#downloadAndroidContentENG .downloadQRAndroid .section-subtitle h4{text-align:left;}
#downloadAndroidContentENG .DownloadBtn .btn{float:left; font-size:18px;}
#downloadAndroidContentENG .DownloadBtn .googlePlay img{float:left;width:40%;height:40%;}
#SupportPageBackgroundENG{
/*background: url(../images/background2.jpg);*/
background-repeat: no-repeat;
background-size: 2000px 1900px;
background-position:top;
}
#topContent .text-center #homeLogo{background-image: url(../web.png);background-repeat: no-repeat; background-size: 300px 200px; width:300px;height:200px; margin-top:12%;}
#topContent .text-center .bxlogo{ display:block}
#topContent .text-center .maxlogo{display:none}
#topContent .text-center .arrangeTopContent2ENG #homeLogo{background-image: url(../web.png);background-repeat: no-repeat; background-size: 390px 290px; width:500px;height:500px; margin-top:12%;}
.row-top-1{margin-top:15%}
}
@media (max-width: 425px){
#simpleBackground{
/*background: url(../images/background2.jpg);*/
background-repeat: no-repeat;
background-size: 600px 900px;
background-position:top;
}
#simpleBackgroundENG{
/*background: url(../images/background2.jpg);*/
background-repeat: no-repeat;
background-size: 2000px 1000px;
background-position:top;
}
#downloadPageBackground{
/*background: url(../images/background2.jpg);*/
background-repeat: no-repeat;
background-size: 2000px 1400px;
background-position:top;
}
#topContent .section-title h3{color:#000; font-size:70px; font-weight:bold; text-align:center;}
#topContent .DownloadBtn .btn{float:none;}
#topContent .section-subtitle h4{color:#000; font-size:16px; font-weight:bold; text-align:center;}
#topContent .ind-download{text-align:center;}
#topContent .text-center .arrangeTopContent{margin-top:35%;}
#topContent .text-center .arrangeTopContent2{position:absolute;bottom:35%; margin-left: auto; margin-right: auto; }
#topContent .text-center #homeLogo{background-image: url(../images/logoMobile.png); background-position:top; background-repeat: no-repeat; background-size: 300px 90px; width:350px;height:500px; margin: 0 auto;}
#topContent .text-center .bxlogo{ display:block}
#topContent .text-center .maxlogo{display:none}
#topContent .text-center .arrangeTopContentENG{margin-top:30%;}
#topContent .text-center .arrangeTopContent2ENG{position:absolute;bottom:42%; margin-left: auto; margin-right: auto; }
#topContent .text-center .arrangeTopContent2ENG #homeLogo{background-image: url(../images/logoMobile.png); background-position:top; background-repeat: no-repeat; background-size: 300px 90px; width:350px;height:500px; margin: 0 auto;}
#HomeIntroContent .text-center .arrangeContent5{margin-top:5%;}
#HomeIntroContent .text-center{margin-top:5%;}
#HomeIntroContent .text-center .DownloadBtn .btn{float:none;}
#HomeIntroContent .text-center .section-title.title-jx{}
#HomeIntroContent .text-center .section-title h3{color:#000; font-size:40px; font-weight:bold; text-align:center;}
#HomeIntroContent .text-center .section-subtitle p{font-size:20px;line-height:1.6;text-align:center;}
#HomeIntroContent .text-center .content{margin-bottom:10%;}
#HomeIntroContent .text-center .arrangeContent{margin-bottom:10%;}
#HomeIntroContent .text-center .arrangeContent2{position:absolute;top:10%;}
#HomeIntroContent .text-center .content2{margin-bottom:5%; position:absolute;bottom:0;}
#HomeIntroContent .text-center .content11{ bottom:inherit}
#HomeIntroContent .text-center .content2 img{height:100%;width:100%;}
#HomeIntroContent .text-center .content3{margin-top:100%;margin-bottom:10%;}
#HomeIntroContent .text-center .content3ENG{margin-top:140%;margin-bottom:10%;}
#PrivacyIntroContent .text-center{margin-top:5%;}
#PrivacyIntroContent .text-center .DownloadBtn .btn{float:none;}
#PrivacyIntroContent .text-center .section-title h3{color:#000; font-size:40px; font-weight:bold; text-align:center;}
#PrivacyIntroContent .text-center .section-subtitle p{font-size:20px;line-height:1.6;text-align:center;}
#PrivacyIntroContent .text-center .arrangeContent{margin-bottom:100%;}
#UnlimitedContent .text-center{margin-top:5%;}
#UnlimitedContent .text-center .DownloadBtn .btn{float:none;}
#UnlimitedContent .text-center .section-title h3{color:#000; font-size:40px; font-weight:bold; text-align:center;}
#UnlimitedContent .text-center .section-subtitle p{font-size:20px;line-height:1.6;text-align:center;}
#UnlimitedContent .text-center .arrangeContent2{position:absolute;top:10%;}
#UnlimitedContent .text-center .content2{margin-bottom:10%; position:absolute;bottom:30%;}
#UnblockContent .text-center{margin-top:5%;}
#UnblockContent .text-center .DownloadBtn .btn{float:none;}
#UnblockContent .text-center .section-title h3{color:#000; font-size:40px; font-weight:bold; text-align:center;}
#UnblockContent .text-center .section-subtitle p{font-size:20px;line-height:1.6;text-align:center;}
#UnblockContent .text-center .content3{margin-top:95%;margin-bottom:10%;}
#UnlimitedContentENG .text-center{margin-top:5%;}
#UnlimitedContentENG .text-center .DownloadBtn .btn{float:none;}
#UnlimitedContentENG .text-center .section-title h3{color:#000; font-size:40px; font-weight:bold; text-align:center;}
#UnlimitedContentENG .text-center .section-subtitle p{font-size:20px;line-height:1.6;text-align:center;}
#UnlimitedContentENG .text-center .arrangeContent2{position:absolute;top:10%;}
#UnlimitedContentENG .text-center .content2{margin-bottom:10%; position:absolute;bottom:30%;}
#UnblockContentENG .text-center{margin-top:5%;}
#UnblockContentENG .text-center .DownloadBtn .btn{float:none;}
#UnblockContentENG .text-center .section-title h3{color:#000; font-size:40px; font-weight:bold; text-align:center;}
#UnblockContentENG .text-center .section-subtitle p{font-size:20px;line-height:1.6;text-align:center;}
#UnblockContentENG .text-center .content3{margin-top:130%;margin-bottom:10%;}
#rating{
width:auto;
height:350px;
border: 1px solid;
padding: 45px;
box-shadow: 2px 5px #d3d3d3;
background:#fcfcfc;
}
#rating .section-subtitle{ font-size:20px;line-height:1.6;text-align:justify;}
#rating .section-subtitle .Eng{ font-size:20px;line-height:1.6;text-align:justify;}
#rewards .rewardsImage img{height:auto;width:auto;}
#footerMobile .footerContent p{padding:7px;float:none;}
#footerMobile .footerContent2 p{float:none;}
#whatisvpnContent .section-title h3{color:#fff; font-size:60px; font-weight:bold; text-align:center;}
#whatisvpnContent .section-subtitle h4{color:#fff; font-size:20px; line-height:45px; text-align:justify;}
#whatisvpnContentENG .section-title h3{color:#fff; font-size:60px; font-weight:bold; text-align:center;}
#whatisvpnContentENG .section-subtitle h4{color:#fff; font-size:18px; line-height:45px; text-align:justify;}
#privacyContent .section-title h3{color:#fff; font-size:60px; font-weight:bold; text-align:center;margin-top:5%;}
#privacyContent .section-subtitle h4{color:#fff; font-size:20px; line-height:45px; text-align:justify;}
#privacyContent .DownloadBtn .btn{float:none;}
#privacyContentENG .section-title h3{color:#fff; font-size:60px; font-weight:bold; text-align:center;margin-top:5%;}
#privacyContentENG .section-subtitle h4{color:#fff; font-size:20px; line-height:45px; text-align:justify;}
#privacyContentENG .DownloadBtn .btn{float:none;}
#unlimitedContent .section-title h3{color:#fff; font-size:60px; font-weight:bold; text-align:center;}
#unlimitedContent .section-subtitle h4{color:#fff; font-size:20px; line-height:45px; text-align:center;}
#unlimitedContent .DownloadBtn .btn{float:none;}
#unblockContent .section-title h3{color:#fff; font-size:65px; font-weight:bold; text-align:center;}
#unblockContent .section-subtitle h4{color:#fff; font-size:20px; line-height:45px; text-align:center;}
#downloadAndroidContent .section-title h3{color:#000; font-size:70px; font-weight:bold; text-align:center;}
#downloadAndroidContent .section-subtitle h4{color:#000; font-size:20px; font-weight:bold; text-align:center;}
#downloadAndroidContent .downloadQRAndroid .section-subtitle h4{text-align:center;}
.downloadQRAndroid img{height:45%; width:45%;}
.downloadSSAndroid img{height:70%;width:70%;}
#downloadAndroidContent .DownloadBtn .btn{float:none;}
#downloadAndroidContent .DownloadBtn .googlePlay img{float:none; width:50%; height:50%;}
#downloadAndroidContentENG .section-title h3{color:#000; font-size:70px; font-weight:bold; text-align:center;}
#downloadAndroidContentENG .section-subtitle h4{color:#000; font-size:20px; font-weight:bold; text-align:center;}
#downloadAndroidContentENG .downloadQRAndroid .section-subtitle h4{text-align:center;}
.downloadQRAndroid img{height:45%; width:45%;}
.downloadSSAndroid img{height:70%;width:70%;}
#downloadAndroidContentENG .DownloadBtn .btn{float:none; font-size:18px;}
#downloadAndroidContentENG .DownloadBtn .googlePlay img{float:none; width:50%; height:50%;}
#downloadIOSContent .section-title h3{color:#000; font-size:70px; font-weight:bold; text-align:center;}
#downloadIOSContent .section-subtitle h4{color:#000; font-size:20px; font-weight:bold; text-align:center;}
#downloadIOSContent .downloadQRIOS .section-subtitle h4{text-align:center;}
.downloadQRIOS img{height:45%; width:45%;}
.downloadSSIOS img{height:50%;width:50%;}
#downloadIOSContent .DownloadBtn .btn{float:none;}
#downloadWindowsContent .section-title h3{color:#000; font-size:70px; font-weight:bold; text-align:center;}
#downloadWindowsContent .section-subtitle h4{color:#000; font-size:20px; font-weight:bold; text-align:center;}
#downloadWindowsContent .downloadQRWindows .section-subtitle h4{text-align:center;}
.downloadQRWindows img{height:45%; width:45%;}
.downloadSSWindows img{height:70%;width:70%;}
#downloadWindowsContent .DownloadBtn .btn{float:none;}
.Social li h4{font-weight: bold; line-height: 30px; margin-bottom: 10px; margin-right:20px;font-size:30px; color:#5289b4;}
table {
table-layout: fixed;
margin: 0 0 2em 0;
width: 1000px;
}
}
@media (max-width: 375px){
#VPNPageBackground{
background: url(../images/vpnBackground.jpg);
background-repeat: no-repeat;
background-size: 2000px 900px;
background-position:top;
}
#rating{
width:auto;
height:350px;
border: 1px solid;
padding: 45px;
box-shadow: 2px 5px #d3d3d3;
background:#fcfcfc;
}
#rating .section-subtitle{ font-size:18px;line-height:1.6;text-align:justify;}
#rating .section-subtitle .Eng{ font-size:18px;line-height:1.6;text-align:justify;}
#HomeIntroContent .text-center .content3{margin-top:120%;margin-bottom:10%;}
#HomeIntroContent .text-center .content3ENG{margin-top:150%;margin-bottom:10%;}
#topContent .text-center .arrangeTopContent2{position:absolute;bottom:32%; margin-left: auto; margin-right: auto; }
#topContent .text-center #homeLogo{background-image: url(../images/logoMobile.png); background-position:top; background-repeat: no-repeat; background-size: 300px 90px; width:305px;height:500px; margin: 0 auto;}
#topContent .text-center .bxlogo{ display:block}
#topContent .text-center .maxlogo{display:none}
#topContent .text-center .arrangeTopContent2ENG{position:absolute;bottom:43%; margin-left: auto; margin-right: auto; }
#topContent .text-center .arrangeTopContent2ENG #homeLogo{background-image: url(../images/logoMobile.png); background-position:top; background-repeat: no-repeat; background-size: 300px 90px; width:305px;height:550px; margin: 0 auto;}
#whatisvpnContent .section-title h3{color:#fff; font-size:50px; font-weight:bold; text-align:center;}
#whatisvpnContent .section-subtitle h4{color:#fff; font-size:20px; line-height:45px; text-align:justify;}
#unlimitedContent .section-subtitle h4{color:#fff; font-size:18px; line-height:45px; text-align:center;}
#UnblockWebsiteEng .section-title h3{color:#fff; font-size:40px; font-weight:bold; text-align:center;}
#UnblockWebsiteEng .section-subtitle h4{color:#fff; font-size:18px; line-height:45px; text-align:center;}
#UnblockContent .text-center .content3{margin-top:140%;margin-bottom:10%;}
#UnblockContentENG .text-center .content3{margin-top:170%;margin-bottom:10%;}
#downloadAndroidContent .DownloadBtn .googlePlay img{float:none; width:55%; height:55%;}
#downloadAndroidContent .DownloadBtn .btn{float:none; width:100%; font-size:19px;}
#downloadAndroidContentENG .DownloadBtn .googlePlay img{float:none; width:55%; height:55%;}
#downloadAndroidContentENG .DownloadBtn .btn{float:none; width:100%; font-size:15px;}
}
@media (max-width: 320px){
#HomeIntroContent .text-center .content3{margin-top:140%;margin-bottom:10%;}
#simpleBackground{
/*background: url(../images/background2.jpg);*/
background-repeat: no-repeat;
background-size: 600px 950px;
background-position:top;
}
#simpleBackgroundENG{
/*background: url(../images/background2.jpg);*/
background-repeat: no-repeat;
background-size: 2000px 1200px;
background-position:top;
}
#VPNPageBackground{
background: url(../images/vpnBackground.jpg);
background-repeat: no-repeat;
background-size: 2000px 920px;
background-position:top;
}
#rating{
width:auto;
height:320px;
border: 1px solid;
padding: 45px;
box-shadow: 2px 5px #d3d3d3;
background:#fcfcfc;
}
.DownloadBtn{ margin-bottom:30px;}
#HomeIntroContent .text-center .content3{margin-top:135%;margin-bottom:10%;}
#HomeIntroContent .text-center .content3ENG{margin-top:250%;margin-bottom:10%;}
#topContent .text-center .arrangeTopContent2{position:absolute;bottom:42%; margin-left: auto; margin-right: auto; }
#topContent .text-center #homeLogo{background-image: url(../images/logoMobile.png); background-position:top; background-repeat: no-repeat; background-size: 260px 80px; width:260px;height:500px; margin: 0 auto;}
#topContent .text-center .bxlogo{ display:block}
#topContent .text-center .maxlogo{display:none}
#topContent .text-center .arrangeTopContent2ENG{position:absolute;bottom:56%; margin-left: auto; margin-right: auto; }
#topContent .text-center .arrangeTopContent2ENG #homeLogo{background-image: url(../images/logoMobile.png); background-position:top; background-repeat: no-repeat; background-size: 260px 80px; width:260px;height:500px; margin: 0 auto;}
#rating .section-subtitle{ font-size:16px;line-height:1.6;text-align:justify;}
#rating .section-subtitle .Eng{ font-size:13px;line-height:1.6;text-align:justify;}
#downloadWindowsContent .section-title h3{color:#000; font-size:60px; font-weight:bold; text-align:center;}
#downloadAndroidContent .DownloadBtn .googlePlay img{float:none; width:60%; height:60%;}
#downloadAndroidContent .DownloadBtn .btn{float:none; width:100%; font-size:15px; text-align:center;}
#downloadAndroidContentENG .DownloadBtn .googlePlay img{float:none; width:60%; height:60%;}
#downloadAndroidContentENG .DownloadBtn .btn{float:none; width:100%; font-size:12px; text-align:center;}
.Social li h4{font-weight: bold; line-height: 30px; margin-bottom: 10px; margin-right:40px; font-size:22px; color:#5289b4;}
.Social li p{ color: #666 ;font-size: 13px;margin-right:30px;}
.Social li img{ width:20px;height:20px;}
#whatisvpnContentENG .section-subtitle h4{color:#fff; font-size:16px; line-height:45px; text-align:justify;}
#privacyContentENG .section-title h3{color:#fff; font-size:50px; font-weight:bold; text-align:center;margin-top:5%;}
#privacyContentENG .section-subtitle h4{color:#fff; font-size:20px; line-height:45px; text-align:justify;}
#privacyContentENG .DownloadBtn .btn{float:none;}
#UnblockWebsiteEng .section-title h3{color:#fff; font-size:35px; font-weight:bold; text-align:center;}
#UnblockWebsiteEng .section-subtitle h4{color:#fff; font-size:18px; line-height:45px; text-align:center;}
#UnblockContent .text-center .content3{margin-top:180%;margin-bottom:10%;}
#UnblockContentENG .text-center .content3{margin-top:210%;margin-bottom:10%;}
}