.subscribe h4,
article#contact-form .subscribe p {
color: #fff
}
*,
.subscribe {
box-sizing: border-box
}
.heading h2,
.snip1438,
.subscribe,
.subscribe h4,
.unique-approach p.centre {
text-align: center
}
.caption .btn-default,
.heading h2,
.subscribe h4 {
text-transform: uppercase
}
#blog-post .recent-post a,
#blog-post form .btn,
#contact-form a:hover,
.col-us-on>a,
.get-direction ul li a,
.panel-default>.panel-heading a,
.related-case-study>div a,
.service-nav ul li,
.service-nav ul li a,
.side-navbar ul li a,
.snip1438,
a.titleLink,
div.blog-item a,
nav a,
nav a:active,
nav a:hover,
nav a:visited {
text-decoration: none
}
.theme-bg {
background-color: #3bafe4
}
.carousel-control-prev img, .carousel-control-next img{
width: 100%;
filter: invert(1);
height: 100%;
}
.carousel-control-next img{
transform: rotate(180deg);
}
.carousel-control-prev, .carousel-control-next{
width: auto;
height: 100%;
display: inline-flex;
position: absolute;
top: 0;
align-items: center;
} 
.carousel-control-prev{
left: 0;
}
.carousel-control-next{
right: 0;
}
.carousel-control-prev span, .carousel-control-next span{
width: 36px;
border-radius: 50%;
background-color: #3bafe4;
display: flex;
overflow: hidden;
padding: 8px;
height: 36px;
justify-content: center;
align-items: center;
}
.carousel-control-prev span{
padding-left: 5px;
margin-left: -15px;
}
.carousel-control-next span{
padding-right: 5px;
margin-right: -15px;
}
.navbar-inverse .navbar-left li a {
color: #3bafe4
}
.navbar-inverse .navbar-left li a:focus,
.navbar-inverse .navbar-left li a:hover {
color: #219ad2
}
.navbar-left {
position: relative;
top: 20px
}
body {
overflow-x: hidden
}
.testi-content span.text {
padding: 10px 30px;
text-align: justify;
}
.reply {
border-top: 1px solid #eee
}
.gsc-control-cse {
border-color: transparent!important;
background-color: transparent!important
}
.mt-3 {
margin-top: 30px
}
.theme-btn,
.theme-btn2 {
background-color: #121741;
padding: 10px 20px;
border: 2px solid #121741;
color: #fff!important;
text-transform: uppercase;
font-weight: 600;
-webkit-transition: all .45s ease-in-out;
transition: all .45s ease-in-out
}
.theme-btn:hover {
background-color: #3bafe4;
border-color: #3bafe4;
color: #fff!important
}
.theme-btn2:hover {
background-color: #fff;
border-color: #fff;
color: #121741!important
}
.subscribe {
overflow: hidden;
padding: 15px;
background-color: #3bafe4
}
.subscribe .btn-default {
color: #fff;
background-color: #121741;
width: 100%;
border: 2px solid #121741;
box-sizing: border-box;
margin-top: 0
}
.subscribe .btn-default:hover {
color: #000;
background-color: #eee
}
.outer-menu .hamburger,
.outer-menu .menu {
-webkit-backface-visibility: hidden;
left: 0
}
.input__field,
select {
-webkit-appearance: none
}
@font-face {
font-family: Montserrat;
src: url(//www.nxtzeal.in/wp-content/themes/nxtzeal/fonts/montserrat-semibold.eot);
src: url(//www.nxtzeal.in/wp-content/themes/nxtzeal/fonts/montserrat-semibold.eot?#iefix) format("embedded-opentype"), url(//www.nxtzeal.in/wp-content/themes/nxtzeal/fonts/montserrat-semibold-webfont.woff2) format("woff2"), url(//www.nxtzeal.in/wp-content/themes/nxtzeal/fonts/Montserrat-SemiBold.woff) format("woff"), url(//www.nxtzeal.in/wp-content/themes/nxtzeal/fonts/Montserrat-SemiBold.ttf) format("truetype")
}
@font-face {
font-family: OpenSans;
src: url(//www.nxtzeal.in/wp-content/themes/nxtzeal/fonts/OpenSans-Regular.ttf);
src: url(//www.nxtzeal.in/wp-content/themes/nxtzeal/fonts/OpenSans-Regular.ttf?#iefix) format("truetype"), url(//www.nxtzeal.in/wp-content/themes/nxtzeal/fonts/OpenSans-Regular.woff) format("woff"), url(//www.nxtzeal.in/wp-content/themes/nxtzeal/fonts/OpenSans-Regular.ttf) format("truetype")
}
[data-aos=fade-right] {
transform: translate(-150px)
}
[data-aos=fade-left] {
transform: translate(150px)
}
img,
video {
width: 100%
}
.map>img {
height: 100%
}
#skype-call img {
width: 45px;
margin: 0!important;
vertical-align: middle!important
}
h1,
h2,
h3,
h4 {
font-family: Montserrat, sans-serif;
font-weight: 500;
color: #121741
}
h1 {
font-weight: 600
}
.heading h2,
h1 span,
h2 span,
h3 span,
h4 span {
font-weight: 500
}
a,
body,
p {
font-family: 'Open Sans', sans-serif;
color: #373737;
font-size: 14px;
line-height: 2
}
.mobile-view {
display: none
}
.system-view {
display: block
}
.heading h2 span {
font-weight: 500;
color: #3bafe4
}
.navbar-inverse .navbar-brand,
.navbar-right .fa {
color: #373737
}
.navbar-brand>img {
width: 100%;
margin: auto
}
.heading h2 span.line {
font-family: Montserrat, sans-serif;
font-weight: 300
}
#logo,
.navbar-header,
.navbar-right {
-webkit-transition: all .45s ease-in-out;
transition: all .45s ease-in-out
}
.outer-menu,
a.case-study-link {
-webkit-transition: all .4s ease-in-out
}
.navbar-header {
background-color: rgba(255, 255, 255, .7);
box-shadow: 2px -4px 7px;
width: 100%;
display: flex;
align-items: center;
}
.navbar-brand {
height: 100%;
padding: 13px 35px 10px;
position: relative;
width: 15%;
z-index: 1030
}
.navbar-inverse .container-fluid {
padding: 0
}
.navbar-inverse {
background-color: transparent;
border: none
}
.topnav-links {
width: calc(100% - 38%);
left: 0;
display: flex;
justify-content: space-between;
}
.navbar {
min-height: 0
}
.navbar-right {
position: relative;
right: 10%;
top: 25px
}
.get-quote {
height: 100%;
position: absolute;
right: 6%;
display: flex;
align-items: center
}
.get-quote .btn-default {
margin: 0;
vertical-align: middle;
color: #fff;
background-color: #3bafe4;
text-transform: uppercase;
}
.get-quote .btn-default:hover {
background-color: #121741;
border-color: #121741
}
.navbar-right li:hover .fa {
color: #3bafe4
} .navbar-inverse .topnav-links>li>a{
display: flex;
justify-content: center;
color: #121741 !important;
background-color: transparent !important;
-webkit-transition: all .45s ease-in-out;
transition: all .45s ease-in-out;
text-transform: uppercase;
font-size: 1.5rem;
}
.navbar-header.active{
background-color: rgba(0,0,0,0.8);
}
.navbar-header.active .topnav-links{
display: none;
}
.navbar-inverse .navbar-nav>.active>a::after, .navbar-inverse .navbar-nav>li:hover > a::after {
content: '';
position: absolute;
bottom: 0;
left: auto;
height: 2px;
width: 80%;
background: #121741;
}
.flex-center {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
* {
font-weight: 400
}
nav a,
nav a:active,
nav a:hover,
nav a:visited {
color: inherit
}
.nav>li>a {
padding: 10px
}
.outer-menu {
float: right;
position: absolute;
right: 25px;
top: 10px;
z-index: 1;
transition: all .4s ease-in-out
}
.outer-menu .checkbox-toggle {
position: absolute;
top: 0;
left: 0;
z-index: 2;
cursor: pointer;
width: 60px;
height: 60px;
opacity: 0
}
.outer-menu .hamburger,
.outer-menu .hamburger>div {
position: relative
}
.outer-menu .checkbox-toggle:checked+.hamburger>div {
-webkit-transform: rotate(135deg);
transform: rotate(135deg)
}
.outer-menu .checkbox-toggle:checked+.hamburger>div:after,
.outer-menu .checkbox-toggle:checked+.hamburger>div:before {
top: 0;
-webkit-transform: rotate(90deg);
transform: rotate(90deg)
}
.outer-menu .checkbox-toggle:checked+.hamburger>div:after {
opacity: 0
}
.outer-menu .checkbox-toggle:checked~.menu {
pointer-events: auto;
visibility: visible
}
.outer-menu .checkbox-toggle:checked~.menu>div {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition-duration: .75s;
transition-duration: .75s
}
.outer-menu .checkbox-toggle:checked~.menu>div>div {
opacity: 1;
-webkit-transition: opacity .4s ease .4s;
transition: opacity .4s ease .4s
}
.outer-menu .checkbox-toggle:checked:hover+.hamburger>div {
-webkit-transform: rotate(225deg);
transform: rotate(225deg)
}
.outer-menu .hamburger {
top: 0;
z-index: 1;
width: 60px;
height: 60px;
padding: .5em 1em;
background: 0 0;
border-radius: 0 .12em .12em 0;
cursor: pointer;
backface-visibility: hidden;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: all .4s ease;
transition: all .4s ease
}
.outer-menu .hamburger>div {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
width: 100%;
height: 2px;
background: #282828;
-webkit-transition: all .4s ease;
transition: all .4s ease;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.outer-menu .menu,
.outer-menu .menu>div {
overflow: hidden
}
.outer-menu .hamburger>div:after,
.outer-menu .hamburger>div:before {
content: '';
position: absolute;
z-index: 1;
top: -10px;
right: 0;
width: 100%;
height: 2px;
background: #282828;
-webkit-transition: all .4s ease;
transition: all .4s ease
}
.outer-menu .hamburger>div:before {
width: 80%
}
.outer-menu .hamburger>div:after {
width: 120%;
top: 10px;
content: 'MENU'
}
.outer-menu .menu {
position: fixed;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
visibility: hidden;
backface-visibility: hidden;
outline: transparent solid 1px;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.outer-menu:hover .hamburger>div,
.outer-menu:hover .hamburger>div:after,
.outer-menu:hover .hamburger>div:before {
background: #3bafe4;
color: #3bafe4
}
.input__field:focus,
select {
outline: 0
}
.outer-menu .menu>div {
width: 200vw;
height: 200vw;
color: #282828;
background: #fff;
border-radius: 50%;
-webkit-transition: all .4s ease;
transition: all .4s ease;
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.outer-menu .menu>div>div {
opacity: 0;
-webkit-transition: opacity .4s ease;
transition: opacity .4s ease;
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 60vw
}
ul.system-menu {
width: 100%;
padding: 0
}
.system-menu>li {
background-color: #fff;
box-shadow: 4px 0 15px #777;
height: 23rem;
list-style-type: none;
margin: 10px;
overflow: hidden;
position: relative;
width: 31%;
z-index: 0
}
.system-menu>li:nth-child(1) {
float: left
}
.system-menu>li:nth-child(2) {
float: right
}
.system-menu>li:nth-child(3) {
float: left;
clear: left
}
.system-menu>li:nth-child(4) {
float: right;
clear: right
}
.system-menu>li:nth-child(5) {
left: 0;
position: relative;
top: 12rem;
transform: rotate(-90deg);
margin: auto
}
.system-menu>li:nth-child(1) .snip1438>div {
background-image: url(https://nxtzeal.com/wp-content/uploads/2018/06/img1.jpg)
}
.system-menu>li:nth-child(2) .snip1438>div {
background-image: url(https://nxtzeal.com/wp-content/uploads/2018/06/img2.jpg)
}
.system-menu>li:nth-child(3) .snip1438>div {
background-image: url(https://nxtzeal.com/wp-content/uploads/2018/06/img3.jpg)
}
.system-menu>li:nth-child(4) .snip1438>div {
background-image: url(https://nxtzeal.com/wp-content/uploads/2018/06/img4.jpg)
}
.system-menu>li:nth-child(5) .snip1438>div {
background-image: url(https://nxtzeal.com/wp-content/uploads/2018/06/img5.jpg)
}
.system-menu>li>a {
height: 100%;
position: absolute;
width: 100%
}
.snip1438>div {
background-color: #e1e1e1;
height: 100%;
left: 0;
padding: 20px;
position: relative;
top: 0;
width: 100%;
background-size: 100% 100%;
background-repeat: no-repeat
}
.snip1438 {
position: relative;
overflow: hidden;
font-size: 40px;
padding: 15px;
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.snip1438::before {
background-color: #2b2b2b
}
.snip1438:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #3bafe4;
content: '';
z-index: -1;
display: inline-block;
-webkit-transform: rotate(-45deg) scale(2.5) translate(0, -100%);
transform: rotate(-45deg) scale(2.5) translate(0, -100%)
}
.snip1438:after,
.snip1438:before {
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out
}
.snip1438.hover,
.snip1438:active,
.snip1438:hover {
color: #282828
}
.snip1438.hover:after,
.snip1438:active:after,
.snip1438:hover:after {
-webkit-transform: rotate(-45deg) scale(2.5) translate(0, 0);
transform: rotate(-45deg) scale(2.5) translate(0, 0)
}
.snip1438>div>h2 {
bottom: unset;
top: 4%;
left: 6px;
position: absolute;
color: #121741
}
.snip1438>div>p {
bottom: 16%;
left: 6px;
position: absolute;
font-size: 17px;
font-weight: 600;
color: #000
}
.review-btn .btn-default:hover {
color: #fff!important
}
#SkypeButton_Call_live:santosh_937_1_paraElement img {
margin: 5px;
vertical-align: -18px
}
.search-box {
display: block;
float: left;
width: 300px;
margin-top: 0;
-webkit-transition: all .45s ease-in-out;
transition: all .45s ease-in-out;
margin-bottom: 15px
}
#gsc-i-id1 {
background: 0 0!important;
text-indent: 10px!important
}
#gsc-iw-id1 {
border-radius: 20px;
border-color: #373737
}
.gsc-search-button-v2 {
font-size: 20px!important;
padding: 0!important;
border: none!important;
background: 0 0!important;
margin-left: -40px!important
}
.gsc-search-button-v2 svg {
fill: #3bafe4!important
}
.gsc-result .gs-title {
height: 1.9em!important
}
#home {
-webkit-transition: all 2s ease-in-out;
transition: all 2s ease-in-out
}
article#home .rom {
overflow: hidden
}
.head-title video {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
transition: 1s opacity
}
.col-sm-12.head-title {
background-color: rgba(255, 255, 255, .8);
height: 100%;
padding: 2%;
position: absolute;
width: 100%;
overflow: hidden
}
.caption {
position: absolute;
bottom: 10%;
width: 30%;
left: 10%;
overflow: hidden;
padding-bottom: 10px
}
.caption p {
font-size: 25px;
margin-top: 30px;
line-height: 1.6
}
.caption h1 {
font-size: 5em;
color: #121741
}
.btn-default {
background-color: transparent;
border: 2px solid #3bafe4;
border-radius: 4px;
margin-top: 30px;
-webkit-transition: all .4s ease;
transition: all .4s ease
}
.btn-default.active,
.btn-default.active:hover,
.btn-default:active,
.btn-default:focus,
.btn-default:hover {
background-color: #3bafe4;
color: #fff;
border-color: #3bafe4;
box-shadow: none
}
.btn-blue {
margin-top: 15px;
border: 2px solid #3bafe4;
padding: 8px 43px;
color: #fff;
background-color: #3bafe4;
-webkit-transition: all .4s ease;
transition: all .4s ease
}
.btn-blue:hover {
background-color: #fff;
color: #3bafe4
}
.caption .theme-btn {
margin-top: 30px
}
article#home {
overflow: hidden;
height: 100vh;
position: relative
}
#our-experties .row {
overflow: hidden;
padding: 3% 0
}
#our-experties {
padding: 3% 0;
background-color: #fff
}
#our-experties h3 {
color: #565655;
font-size: 3.5em;
text-align: left
}
#our-experties .parent>div>div {
padding: 10%
}
#our-experties .parent2>div>div {
padding: 21% 2% 10%;
text-align: justify
}
.more-work a p,
.number,
article#our-clients p {
text-align: center
}
.digital-image.aos-init.aos-animate::after,
.web-design-image.aos-init.aos-animate::after {
background-color: rgba(0, 0, 0, 0);
border: 10px solid #3bafe4;
bottom: 6px;
content: "";
display: inline-block;
height: 80%;
position: absolute;
right: 0;
transform: rotate(0);
width: 80%;
z-index: -1
}
#our-experties .parent>div>div img {
border: 10px solid #f7f7f7;
box-shadow: 1px 2px 19px #777
}
article#case-study {
padding: 3% 0
}
.list-inline {
display: flex;
justify-content: center;
flex-wrap: wrap
}
.txt-white {
color: #fff
}
.work {
padding: 15px
}
.work>div {
position: relative;
overflow: hidden
}
.work a {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, .4);
text-decoration: none;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
opacity: 0
}
.work a:hover {
opacity: 1
}
.work>div:hover img {
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
transform: scale(1.1)
}
article#top-text {
padding: 10%
}
article#testimonial {
padding: 3% 0
}
#testimonial #myCarousel {
min-height: 380px
}
#top-text h3 {
font-size: 2.5em
}
#top-text h2 {
font-size: 25px;
line-height: 1.7
}
.testi-content {
display: flex
}
.testimonial>div {
padding: 30px 20px;
border-bottom: none;
height: 100%
}
.testimonial .testi-content {
flex-direction: column-reverse;
align-items: center
}
.testi-content>span {
padding: 10px;
text-align: center
}
.testi-content>span img {
border-radius: 50%;
border: 3px solid #ddd
}
.testi-content span.img {
width: 100px
}
span.text p {
line-height: 1.6;
font-size: .91em;
color: #121741
}
.testi-author {
padding: 0 15px
}
.testi-author h5 {
margin: 0
}
.testimonial .testi-author {
text-align: center
}
.checkbox-inline input {
margin-top: 7px
}
.price-banner {
background-image: url(https://www.nxtzeal.com/wp-content/uploads/2019/05/pricebg.jpg);
position: relative
}
.price-banner::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: #3bafe4;
top: 0;
left: 0;
opacity: .7
}
.price-banner h1 {
font-size: 5em;
line-height: 1.6;
color: #fff;
text-shadow: 3px 4px 9px #000
}
.price-banner p {
color: #fff;
font-size: 1.6em;
line-height: 1.6
}
.price-banner .row {
padding: 5% 0
}
.client-says {
padding: 15px
}
.client-img {
padding: 15px;
display: flex;
justify-content: center;
align-items: center
}
.client-img img {
border-radius: 50%;
max-width: 220px
}
.client-txt {
text-align: center
}
.carousel-indicators li {
background-color: #ddd
}
.carousel-indicators .active {
background-color: #3bafe4
}
.package {
border: 1px solid #ddd;
margin-top: 20px;
background-color: #fff;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
}
.package:hover {
transform: scale(1.05);
box-shadow: 1px 1px 15px #888;
z-index: 1;
}
.package .icon {
display: block
}
.package .icon img {
display: block;
max-width: 100px;
margin: auto
}
.package .btn-default {
background-color: #121741;
color: #fff;
width: 100%;
margin: 0;
padding: 10px;
border-color: #121741;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
}
.package .btn-default:hover {
background-color: #3bafe4;
border-color: #3bafe4
}
.package .list-group-item-heading {
margin-top: 5px;
color: #fff
}
.package p>span {
opacity: 0
}
.list-group-item del {
color: #777
}
.offer-sec {
padding: 3% 0
}
.offers {
padding: 15px;
margin-top: 15px;
margin-bottom: 20px
}
.offers .icon {
display: block
}
.offers .icon img {
display: block;
max-width: 56px;
margin: auto
}
article.portfolio {
padding: 3% 0
}
.pricing .btn-default {
width: 100%;
max-width: 200px;
padding: 10px;
background: #3bafe4;
color: #fff
}
.case-study-section {
margin-top: 8%;
height: 100%;
position: relative
}
.case-study-section h3 {
margin-bottom: 25px
}
.case-study-section img {
border: 9px solid #f7f7f7;
box-shadow: 1px 2px 19px #777
}
.case-study-one,
.case-study-three,
.case-study-two {
border: 9px solid #3bafe4;
height: 80%;
overflow: hidden;
margin-top: 3%;
margin-bottom: 13%
}
.case-study-two {
margin-left: 10%
}
.case-study-one,
.case-study-three {
margin-right: 10%
}
.case-study-one>.child-one,
.case-study-three>.child-one {
background-color: rgba(255, 255, 255, .7);
float: left;
padding: 30px 10% 30px 30px;
position: relative;
width: 54%;
z-index: 1
}
.case-study-one>.child-two,
.case-study-three>.child-two {
width: 42%;
position: absolute;
top: 0;
right: 12%
}
.case-study-two>.child-one {
width: 42%;
position: absolute;
top: 0;
left: 12%
}
iframe[seamless=seamless] {
display: none
}
.case-study-two>.child-two {
background-color: rgba(255, 255, 255, .7);
float: right;
padding: 30px 30px 30px 11%;
position: relative;
width: 54%;
z-index: 1
}
.number {
background-color: #f7f7f7;
height: 50px;
left: 0;
position: absolute;
top: 21%;
width: 50px;
z-index: 1
}
.case-study-two .number {
left: unset;
right: 0
}
.more-work a p {
color: #3bafe4;
margin-top: 20px
}
.case-study-section ul {
padding: 0;
margin-top: 20px
}
.case-study-section ul>li {
list-style-type: none;
display: inline-block;
border-right: 2px solid #3bafe4;
padding-right: 10px;
margin-left: 10px;
margin-bottom: 4px
}
.case-study-section ul>li:last-child {
border-right: none
}
.case-study-section .btn-default {
margin-top: 15px
}
article#start-a-project {
padding: 3% 0
}
article#start-a-project .row {
background: linear-gradient(to bottom, #54bfef 0, #3fb6ec 100%);
border-color: #54bfef;
border-radius: 5px;
box-shadow: 0 4px 9px 0 #888;
overflow: hidden;
text-align: center;
padding: 10px;
margin: 5%
}
.col-us-on>a {
color: #fff;
font-size: 22px;
font-weight: 600
}
.col-us-on p {
color: #fff;
font-size: 24px
}
article#start-a-project .line {
position: absolute;
width: 2px;
background-color: #fff;
height: 80%;
right: 50%;
top: 10%
}
article#start-a-project h2 {
margin: 15px
}
.work-with-us .btn-default {
background: linear-gradient(to bottom, #eee 0, #fff 100%);
border-color: #eee;
border-radius: 5px;
color: #373737;
font-size: 16px;
text-transform: capitalize;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
margin-top: 2%;
padding: 9px 15px
}
.work-with-us .btn-default:hover {
background-color: #f7f7f7;
color: #3bafe4
}
article#our-clients {
background-color: #fff;
padding: 3% 0
}
.client-static>div {
border: 1px solid #ddd;
margin: 15px;
transition: all .45s ease-in-out
}
.client-static>div:hover {
transform: scale(1.2);
box-shadow: 0 1px 2px #ddd
}
#carousel123 .item>div {
float: left;
width: 25%;
padding: 0 30px 30px
}
.input__field,
.input__label {
float: right;
font-weight: 700
}
.carousel-showmanymoveone .cloneditem-1,
.carousel-showmanymoveone .cloneditem-2,
.carousel-showmanymoveone .cloneditem-3 {
display: none
}
@media all and (min-width:768px) {
.carousel-showmanymoveone .carousel-inner>.active.left,
.carousel-showmanymoveone .carousel-inner>.prev {
left: -50%
}
.carousel-showmanymoveone .carousel-inner>.active.right,
.carousel-showmanymoveone .carousel-inner>.next {
left: 50%
}
.carousel-showmanymoveone .carousel-inner>.active,
.carousel-showmanymoveone .carousel-inner>.left,
.carousel-showmanymoveone .carousel-inner>.prev.right {
left: 0
}
.carousel-showmanymoveone .carousel-inner .cloneditem-1 {
display: block
}
}
@media all and (min-width:768px) and (transform-3d),
all and (min-width:768px) and (-webkit-transform-3d) {
.carousel-showmanymoveone .carousel-inner>.item.active.right,
.carousel-showmanymoveone .carousel-inner>.item.next {
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0);
left: 0
}
.carousel-showmanymoveone .carousel-inner>.item.active.left,
.carousel-showmanymoveone .carousel-inner>.item.prev {
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
left: 0
}
.carousel-showmanymoveone .carousel-inner>.item.active,
.carousel-showmanymoveone .carousel-inner>.item.left,
.carousel-showmanymoveone .carousel-inner>.item.prev.right {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0
}
}
@media all and (min-width:992px) {
.carousel-showmanymoveone .carousel-inner>.active.left,
.carousel-showmanymoveone .carousel-inner>.prev {
left: -25%
}
.carousel-showmanymoveone .carousel-inner>.active,
.carousel-showmanymoveone .carousel-inner>.active.right,
.carousel-showmanymoveone .carousel-inner>.left,
.carousel-showmanymoveone .carousel-inner>.next,
.carousel-showmanymoveone .carousel-inner>.prev.right {
left: 25%
}
.carousel-showmanymoveone .carousel-inner .cloneditem-2,
.carousel-showmanymoveone .carousel-inner .cloneditem-3 {
display: block
}
}
@media all and (min-width:992px) and (transform-3d),
all and (min-width:992px) and (-webkit-transform-3d) {
.carousel-showmanymoveone .carousel-inner>.item.active.right,
.carousel-showmanymoveone .carousel-inner>.item.next {
-webkit-transform: translate3d(25%, 0, 0);
transform: translate3d(25%, 0, 0);
left: 0
}
.carousel-showmanymoveone .carousel-inner>.item.active.left,
.carousel-showmanymoveone .carousel-inner>.item.prev {
-webkit-transform: translate3d(-25%, 0, 0);
transform: translate3d(-25%, 0, 0);
left: 0
}
.carousel-showmanymoveone .carousel-inner>.item.active,
.carousel-showmanymoveone .carousel-inner>.item.left,
.carousel-showmanymoveone .carousel-inner>.item.prev.right {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0
}
}
article#contact-form {
padding: 4%;
background-image: url(https://nxtzeal.com/wp-content/uploads/2018/06/form-bg.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top
}
article#contact-form>div {
padding: 0
}
article#contact-form a,
article#contact-form h3,
article#contact-form p {
color: #ddd
}
.input {
position: relative;
z-index: 1;
display: inline-block;
max-width: 100%;
width: 100%;
vertical-align: top
}
.input__field {
position: relative;
display: block;
padding: .8em;
width: 60%;
border: none;
border-radius: 0;
background: #f0f0f0;
color: #aaa
}
.input__label {
display: inline-block;
padding: 0 1em;
width: 40%;
color: #eee;
font-size: 87.25%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.input__label-content {
position: relative;
display: block;
padding: .3em 0;
width: 100%
}
.input--hoshi {
overflow: hidden
}
.input__field--hoshi {
margin-top: .5em;
padding: 1.5em .15em;
width: 100%;
background: 0 0;
color: #fff
}
.input__label--hoshi {
position: absolute;
bottom: 0;
left: 0;
padding: 0 .25em;
width: 100%;
height: calc(100% - 1em);
text-align: left;
pointer-events: none
}
.input__label-content--hoshi {
position: absolute
}
.input__label--hoshi::after,
.input__label--hoshi::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: calc(100% - 10px);
border-bottom: 1px solid #b9c1ca
}
.input__label--hoshi::after {
margin-top: 2px;
border-bottom: 4px solid red;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
-webkit-transition: -webkit-transform .3s;
transition: transform .3s
}
.input__label--hoshi-color-1::after,
.input__label--hoshi-color-2::after,
.input__label--hoshi-color-3::after,
.input__label--hoshi-color-4::after {
border-color: #00a9ff
}
.input--filled .input__label--hoshi::after,
.input__field--hoshi:focus+.input__label--hoshi::after {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.select .input__field--hoshi {
padding-bottom: 1.9em
}
.input--filled .input__label-content--hoshi,
.input__field--hoshi:focus+.input__label--hoshi .input__label-content--hoshi {
-webkit-animation: anim-1 .3s forwards;
animation: anim-1 .3s forwards
}
@-webkit-keyframes anim-1 {
50% {
opacity: 0;
-webkit-transform: translate3d(1em, 0, 0);
transform: translate3d(1em, 0, 0)
}
51% {
opacity: 0;
-webkit-transform: translate3d(-1em, -40%, 0);
transform: translate3d(-1em, -40%, 0)
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, -40%, 0);
transform: translate3d(0, -40%, 0)
}
}
@keyframes anim-1 {
50% {
opacity: 0;
-webkit-transform: translate3d(1em, 0, 0);
transform: translate3d(1em, 0, 0)
}
51% {
opacity: 0;
-webkit-transform: translate3d(-1em, -40%, 0);
transform: translate3d(-1em, -40%, 0)
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, -40%, 0);
transform: translate3d(0, -40%, 0)
}
}
.input__field--hoshi::-webkit-input-placeholder {
color: #999;
font-weight: 400;
font-size: 87.25%
}
.input__field--hoshi:-ms-input-placeholder {
color: #999;
font-weight: 400;
font-size: 87.25%
}
.input__field--hoshi::-moz-placeholder {
color: #999;
opacity: 1;
font-weight: 400;
font-size: 87.25%
}
.input__field--hoshi:-moz-placeholder {
color: #999;
opacity: 1;
font-weight: 400;
font-size: 87.25%
}
.get-in-touch .btn-default,
footer {
color: #fff
}
.about-us,
.get-in-touch,
.latest-post,
.reach-us {
padding: 15px
}
article#contact-form ul {
padding: 0;
width: 100%
}
article#contact-form ul>li {
list-style-type: none;
margin-bottom: 20px
}
.about-us img {
width: 60%;
margin-bottom: 20px
}
.reach-us li .fa {
font-size: 20px;
margin-right: 4px
}
article#page-title .big-font-v1,
article#page-title .title>div .big-font {
font-size: 8em;
position: relative;
text-transform: uppercase;
font-weight: 600;
font-family: Montserrat, sans-serif;
line-height: 1.15
}
article#contact-form .navbar-nav>li {
margin-right: 20px
}
article#contact-form a:hover {
color: #3bafe4
}
article#contact-form a.theme-btn {
font-size: 11px;
padding: 7px
}
article#contact-form .get-in-touch .theme-btn,
article#contact-form .subscribe .theme-btn2 {
font-size: 11px;
padding-top: 7px
}
article#contact-form .subscribe .theme-btn2 {
width: 100%
}
article#contact-form .subscribe .theme-btn2:hover {
background-color: #fff;
color: #121741!important
}
footer {
padding: 15px;
text-align: center;
background-color: #000
}
article#page-title {
margin-bottom: 2%;
background-color: #f5f8fa
}
article#page-title .title {
margin-top: 3%
}
article#page-title .title>div {
width: 50%;
float: left;
position: relative;
height: 400px
}
article#page-title .title>div .big-font {
bottom: -15%;
color: #e1e8ed;
right: -50px;
text-align: right;
transform: rotate(90deg)
}
article#page-title .who-we-are {
margin-top: 15%;
padding: 20px;
width: 50%;
margin-left: 10%
}
article#page-title .who-we-are p {
color: #8c98a0
}
article#page-title .big-font-v1 {
color: #373737;
text-align: left;
top: 10%
}
article#who-we-are {
text-align: justify
}
article#who-we-are h3 {
color: #565655;
font-size: 3.5em
}
article#who-we-are hr {
border-color: #3bafe4;
border-width: 10px
}
#who-we-are .row>div>div {
padding: 30px
}
article#partner {
background-color: #f5f8fa;
padding: 3% 0;
background-repeat: no-repeat
}
article#partner p {
line-height: 2.4
}
.partner-form>div {
border: 1px solid #ddd;
padding: 25px;
background-color: #fff
}
.partner-form h3 {
color: #3bafe4;
margin-top: 0
}
.partner-form .input__field--hoshi {
color: #373737
}
article#process {
background-color: #fff;
padding: 3%
}
.process-mobile {
position: relative;
width: 100%;
height: 100%
}
.process-mobile>div {
float: left
}
.process-mobile-child1 {
width: 50%;
height: 100%;
overflow: hidden
}
.process-mobile-child1 img {
height: 100%;
width: auto
}
.process-mobile-child2 {
width: 50%;
height: 100%
}
.process-mobile-child2 hr {
margin: 2px
}
.process-mobile-child2 h5 {
margin-bottom: 0;
font-weight: 600
}
article#our-team {
padding: 3% 0;
background-color: #f5f8fa
}
.team-mem {
padding: 20px
}
figure.snip0067 {
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
width: 100%;
background: #fff;
color: #000
}
figure.snip0067 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
figure.snip0067 img {
position: relative;
display: block;
filter: grayscale(100%);
width: 100%
}
figure.snip0067 figcaption {
padding-left: 30px;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
z-index: 1;
opacity: 0;
padding-bottom: 30px;
background-color: rgba(0, 0, 0, .3)
}
.services img:active,
.services img:focus,
.services img:hover,
.services>div:active img,
.services>div:focus img,
.services>div:hover img {
background-color: #14173f
}
figure.snip0067:hover figcaption {
opacity: 1
}
figure.snip0067 figcaption h2,
figure.snip0067 figcaption p {
margin: 0;
text-align: left;
padding: 5px 0 0;
width: 100%;
color: #fff
}
figure.snip0067 figcaption h2 {
font-size: 1.4em;
font-weight: 300;
text-transform: uppercase;
color: #fff
}
figure.snip0067 figcaption h2 span {
font-weight: 800
}
.process-step {
padding: 30px
}
.process-step>div {
position: relative;
width: 100%
}
.process-step>div:nth-child(1) {
text-align: center
}
.process-step>div p,
.process-step>div:nth-child(2),
.services ul li:nth-child(2) p,
div.main-service p {
text-align: justify
}
article#website-ui-ux {
padding: 5% 0
}
.main-service h1,
.main-service h2 {
font-size: 3.5em;
color: #565655;
font-weight: 500
}
.service-nav ul li:nth-child(1) a,
.service-nav ul li:nth-child(2) a:hover {
background-color: #3bafe4;
color: #fff
}
article#digital-marketing hr,
article#website-ui-ux hr {
border-color: #3bafe4;
border-width: 10px
}
div.main-service {
padding: 3% 20px 20px
}
article#digital-marketing .services,
article#website-ui-ux .services {
padding: 30px 30px 30px 0;
height: 300px
}
article#digital-marketing .service-nav>hr,
article#website-ui-ux .service-nav>hr {
border-width: 2px;
border-color: #eee;
margin-top: 40px
}
.service-nav ul li {
list-style-type: none;
display: inline-flex;
margin-right: 20px
}
.service-nav ul li .fa {
font-size: 30px
}
.service-nav ul li a {
padding: 10px 20px;
box-shadow: 0 4px 9px 0 #888;
border-radius: 2px;
border: 2px solid #3bafe4;
font-size: 20px;
-webkit-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.service-nav ul,
.services ul {
padding: 0
}
.services ul li {
list-style-type: none;
display: inline-block;
padding: 15px;
vertical-align: top
}
.services ul li:nth-child(1) {
width: 20%
}
.services ul li:nth-child(2) {
width: 78%
}
.services img {
border-radius: 50%;
width: 100%;
-webkit-transition: all .45s ease-in-out;
transition: all .45s ease-in-out
}
.services a {
text-decoration: none
}
.services h2 {
font-size: 18px
}
.services:active h2,
.services:focus h2,
.services:hover h2 {
color: #3bafe4
}
.services .btn-default {
margin-top: 10px
}
article#digital-marketing {
padding: 5% 0
}
article#case-study-gallery {
padding: 3% 0
}
.case-study h5 {
opacity: 0;
position: absolute;
bottom: 30px;
text-align: center;
color: #fff;
text-align: center;
width: 100%;
left: 0;
font-size: 1.3em;
background-color: rgba(0, 0, 0, .5);
padding: 10px
}
.case-study:hover h5 {
opacity: 1
}
.case-study {
padding: 0
}
.case-study>div {
margin: 15px;
position: relative
}
.case-study>div img {
width: 100%
}
a.case-study-link {
opacity: 1;
padding: 30px;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
background-color: rgba(0, 0, 0, .7);
transition: all .4s ease-in-out
}
.case-study:active a.case-study-link,
.case-study:focus a.case-study-link,
.case-study:hover a.case-study-link {
opacity: 0
}
.case-study-link p {
text-transform: uppercase;
color: #fff;
text-align: left;
font-size: 14px;
position: absolute;
bottom: 45px;
width: 85%
}
.case-study-link p span {
color: #3bafe4
}
.case-study-link>h2 {
font-size: 1.9em;
position: absolute;
font-weight: 400;
width: 90%;
top: 40%;
color: #fff;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
}
.case-study-link>h2:active,
.case-study-link>h2:focus,
.case-study-link>h2:hover {
color: #3bafe4
}
.case-study-link>span {
color: #3bafe4;
position: absolute;
bottom: 15px
}
article.price-bar {
padding: 2% 0
}
article.price-bar p {
margin: 0
}
article#blog {
padding: 3% 0
}
.post-detail-description img {
max-width: 600px;
position: relative;
margin: auto
}
.comment-author.vcard img {
max-width: 100%;
width: auto
}
article#blog div.date {
background-color: #3bafe4;
border-radius: 0 20px 0 0;
bottom: 0;
height: 66px;
position: absolute;
text-align: center;
width: 70px
}
.select,
article#blog div.blog-img {
position: relative;
overflow: hidden
}
article#blog div.date h4 {
color: #fff;
border-bottom: 2px solid #fff;
padding-bottom: 4px;
margin-bottom: 5px
}
article#blog div.date p {
color: #fff
}
article#blog div.blog-img {
height: 240px
}
article#blog div.blog-item>div {
box-sizing: border-box;
border: 1px solid #ddd;
height: 100%;
-webkit-transition: all .45s ease-in-out;
transition: all .45s ease-in-out
}
article#blog div.blog-item:hover>div {
box-shadow: 0 11px 25px -5px #999
}
article#blog div.blog-item div.blog-img img {
-webkit-transition: all .45s ease-in-out;
transition: all .45s ease-in-out
}
article#blog div.blog-item:hover div.blog-img img {
transform: scale(1.2)
}
article#blog div.post-desc {
padding: 20px
}
article#blog div.post-desc ul,
article#blog-post div.post-desc ul,
article#blog-post div.recent-post ul {
padding: 0
}
article#blog div.post-desc ul li,
article#blog-post div.post-desc ul li,
article#blog-post div.recent-post ul li {
list-style-type: none;
display: inline-block;
margin-right: 15px
}
article#blog div.post-desc ul li span,
article#blog-post div.post-desc ul li span,
article#blog-post div.recent-post ul li span {
color: #3bafe4
}
article#blog-post div.post-desc img {
padding: 30px 0
}
article#blog div.blog-item {
padding: 20px 10px;
height: 645px;
margin-bottom: 15px
}
div.blog-item a {
color: #282828
}
div.blog-item .read-blog {
color: #3bafe4;
font-weight: 600
}
article#blog-post {
padding: 3% 0
}
article#blog-post p {
color: #555;
font-size: 16px
}
article#blog-post div.row>div>div {
margin-top: 30px
}
article#blog-post div.comments img {
width: 80px
}
article#blog-post div.comments table {
width: 100%
}
#myModal form .half,
#package form .half,
article#blog-post form .half,
article#career .input.half,
article#career .input.half-left,
article#reach-us .input.half,
article#reach-us .input.half-left {
width: 50%;
float: left
}
#myModal .input__label {
color: #888
}
article#blog-post div.comments table td {
padding: 15px;
color: #555
}
.input ul {
list-style-type: none;
margin: 40px 0;
padding: 0
}
.checkbox-inline {
font-size: 13px;
color: #000
}
.input ul li {
display: inline-block;
margin-right: 30px;
margin-top: 11px;
color: #888
}
article#blog-post div.comments table tr {
border-bottom: 1px solid #ddd
}
article#blog-post form .btn {
background-color: #01b2b7;
border-color: #01b2b7;
border-radius: 0;
box-shadow: 0 4px 9px 0 #888;
color: #fff;
font-size: 18px;
margin-top: 15px;
padding: 10px 15px
}
article#blog-post form .btn:hover {
color: #282828
}
article#blog-post div.post-page {
padding-right: 50px
}
article#blog-post .recent-post a {
color: #282828
}
article#reach-us {
padding: 3% 0
}
article#reach-us .input.half {
padding-right: 10px
}
article#reach-us .input.half-left {
padding-left: 10px
}
.input.half .input__label--hoshi::after,
.input.half .input__label--hoshi::before {
width: 96%
}
article#career .input__field--hoshi,
article#reach-us .input__field--hoshi {
color: #373737
}
article#career .input__label,
article#reach-us .input__label {
color: #999
}
.reach-us-form {
padding-top: 3%
}
article#career {
background-color: #f5f8fa;
padding: 3% 0
}
.select,
select {
background: 0 0
}
.banner,
.map,
.select::after {
padding: 0
}
select {
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
box-shadow: none;
border: 0;
width: 100%;
height: 100%;
margin: 0;
cursor: pointer
}
.get-direction,
.map {
height: 535px;
overflow: hidden
}
.select {
display: block
}
select::-ms-expand {
display: none
}
.case-info li,
.get-direction ul>li ul>li {
display: inline-block;
list-style-type: none
}
.select::after {
content: '25bc';
color: transparent;
position: absolute;
top: 0;
right: 30px;
bottom: 0;
pointer-events: none;
background: url(https://www.nxtzeal.com/wp-content/uploads/2018/06/br_down.png) center no-repeat;
background-size: 100%
}
#service-page-inner,
.img-mask {
background-repeat: no-repeat;
background-attachment: fixed
}
.get-direction {
background-color: #3bafe4;
color: #fff
}
.get-direction>div {
width: 50%;
position: relative;
margin: 0 auto;
top: 15%;
left: 10%
}
.get-direction a,
.get-direction p {
color: #fff
}
.get-direction img {
width: 250px;
margin-left: -2%
}
.get-direction ul {
padding: 0;
text-align: left;
width: 100%;
margin: 0 auto;
position: relative
}
.direction-link span:nth-child(1),
.direction-link span:nth-child(2),
.review-button,
a.direction-link {
position: absolute;
left: 0;
width: 100%
}
.get-direction ul li a:hover {
color: #373737
}
.get-direction ul>li {
list-style-type: none;
margin-top: 15px
}
.get-direction ul>li ul>li {
margin-right: 20px
}
a.direction-link {
top: 0;
color: #fff;
background-color: rgba(0, 0, 0, .5);
height: 100%;
text-align: center;
vertical-align: middle
}
.direction-link span:nth-child(1) {
color: #ff5755;
font-size: 36px;
top: 35%
}
.direction-link h4 {
position: relative;
top: 45%;
color: #fff;
text-align: center
}
.direction-link h4:hover {
color: #3bafe4
}
.review-button {
top: 55%;
text-align: center
}
.case-info,
.right-skew {
position: absolute;
top: 0;
height: 100%
}
.review-button .btn-default {
background-color: #3bafe4;
border-color: transparent;
border-radius: 0;
color: #fff;
box-shadow: 0 4px 9px 0 #888;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out
}
.case-description,
.side-navbar {
-webkit-transition: all .8s ease
}
.review-button .btn-default:hover {
background-color: #f7f7f7;
color: #000
}
.case-info li,
.case-info p {
color: #fff;
font-size: 16px
}
.right-skew {
left: -10%;
width: 60%;
border-right: 2px solid #fff;
background-color: rgba(59, 175, 228, .6);
-webkit-transform: skew(-15deg);
-ms-transform: skew(-15deg);
transform: skew(-15deg)
}
.case-info {
left: 0;
width: 50%;
padding: 8%
}
#page-title .case-info>h1 {
color: #fff;
font-size: 2.8em;
top: 0;
text-transform: unset
}
.case-info hr {
border-width: 4px;
left: 0;
margin: 20px 0 10px;
position: relative;
text-align: left;
width: 10%
}
.case-info li {
font-family: Montserrat, sans-serif;
font-style: italic;
font-weight: 500;
margin-top: 5px;
text-align: center;
width: 105px
}
.webdesign-desc h2,
.webdesign-desc p {
color: #eee
}
.displayadds p,
.responsive-desc p,
.search-display-desc p,
.webdesign-desc p,
.wireframe-desc p {
font-size: 16px;
line-height: 2.4
}
.case-info>ul {
margin-top: 7%;
padding: 0
}
.circle {
margin-right: 10px
}
.circle p {
line-height: 1.4
}
.circle img {
width: 50px
}
.case-study-payperclick,
.case-study-webdesign {
padding: 3% 0;
background-color: #121741;
display: flex;
align-items: center
}
.webdesign-image {
overflow: hidden;
width: 50%;
float: left;
position: relative
}
.webdesign-image .child1::-webkit-scrollbar {
display: none
}
.webdesign-image .child1 {
height: 100%;
overflow: scroll;
position: relative;
overflow-x: hidden;
width: 102%
}
.addwords>div,
.case-study-payperclick>div,
.case-study-responsive>div,
.webdesign-desc,
.wireframe>div {
width: 50%;
float: left
}
.webdesign-desc {
padding-right: 10%;
padding-left: 5%
}
.case-study-responsive,
.wireframe {
padding: 4% 0;
display: flex;
align-items: center
}
.wireframe {
padding: 0;
background-color: #f5f8fa
}
.responsive-desc,
.wireframe-desc {
padding-left: 10%;
padding-right: 5%
}
.responsive-desc h2,
.wireframe-desc h2 {
color: #3bafe4
}
.responsive-image {
padding-right: 10%
}
.search-display-desc {
padding-right: 10%;
padding-left: 5%
}
.search-display-desc h2,
.search-display-desc p {
color: #eee
}
.addwords {
padding: 3% 0 0
}
.displayadds {
text-align: center;
padding: 3%
}
.project-details {
padding: 0;
background-color: #121741;
margin-top: 6%;
margin-bottom: 6%;
overflow: hidden
}
.project-details>div {
width: 33.33%;
padding: 3%;
float: left
}
.project-details>div:nth-child(1),
.project-details>div:nth-child(2) {
border-right: 1px solid #eee
}
.project-details>div h2 {
color: #888;
text-align: center
}
.project-details>div h3 {
color: #fff;
text-align: center
}
article#case-video {
padding: 3%;
background-color: #2b2b2b
}
.ourfix,
.post-heading,
.related-case-study {
background-color: #3bafe4
}
.related-case-study {
padding: 0
}
.related-case-study>div h2 {
color: #fff;
font-weight: 600
}
.related-case-study>div:nth-child(1),
.related-case-study>div:nth-child(3) {
width: 45%;
float: left;
text-align: center
}
.related-case-study>div:nth-child(2) {
width: 10%;
float: left;
text-align: center;
padding-top: 4%
}
.related-case-study>div:nth-child(1) {
background-image: url(https://www.nxtzeal.com/wp-content/uploads/2018/06/case-karunya-related.jpg);
padding: 2%;
background-size: 100%
}
.related-case-study>div:nth-child(3) {
background-image: url(https://www.nxtzeal.com/wp-content/uploads/2018/06/case-YJS-relaed.jpg);
padding: 2%;
background-size: 100%
}
.related-case-study .fa {
font-size: 4em
}
.related-case-study .fa:hover {
color: #fff
}
article#case-study-details {
padding-bottom: 3%
}
article#case-study-details h4 {
font-style: italic;
font-weight: 400
}
.case-description {
padding: 30px;
text-align: center;
transition: all .8s ease
}
.case-description h2 {
color: #3bafe4
}
.ourfix h2,
.ourfix p,
.post-heading p {
color: #fff
}
.case-description p {
text-align: justify;
padding-top: 30px;
font-size: 16px;
line-height: 2.4
}
div.prev {
float: left;
width: 33.33%
}
div.nxt {
float: right
}
a.center {
float: left;
width: 33.33%;
text-align: center
}
.post-image,
.process-listing li:nth-child(even) {
float: right
}
article#post-title {
margin-top: 5.6%;
padding: 30px 8% 0
}
.post-heading {
width: 50%;
padding: 30px;
position: absolute;
left: 0;
top: 25%;
height: 240px;
z-index: 1
}
.post-heading h1 {
color: #fff;
font-weight: 400;
font-size: 2.3em
}
.post-image {
position: relative;
right: 0;
top: 0;
width: 70%;
border: 10px solid #3bafe4
}
.post-share-links {
position: fixed;
left: 0;
top: 35%;
z-index: 1
}
.post-share-links ul {
padding: 20px;
background-color: rgba(255, 255, 255, .9);
position: relative;
z-index: 111
}
.post-share-links ul>li {
list-style-type: none;
margin-bottom: 20px
}
.post-share-links ul>li a {
color: #3bafe4
}
.post-share-links ul>li a:hover {
color: #000
}
.post-detail-description {
padding: 5% 10%
}
.post-detail-description p {
text-align: justify;
line-height: 2.1
}
#thankyou,
.augment-title .thin-heading {
text-align: center
}
.leave-comment .btn-default {
background-color: #3bafe4;
border-color: transparent;
border-radius: 0;
box-shadow: 0 4px 9px 0 #888;
color: #fff
}
.leave-comment .btn-default:hover {
color: #000
}
.leave-comment h4 {
font-style: italic;
font-weight: 400
}
.leave-comment p {
color: #888
}
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
width: 100%
}
.modal-body .input__field--hoshi {
color: #373737
}
.modal-body .form-group .btn-default {
border: 1px solid #b9c1ca
}
.modal-body .form-group .btn-default:hover {
background-color: transparent;
color: #373737
}
#thankyou {
position: relative;
overflow: hidden;
height: 100vh;
display: flex
}
#thankyou>div {
background-color: #3bafe4;
width: 30%;
margin: auto
}
#thankyou>div>div {
padding: 20px
}
#thankyou>div p {
color: #fff;
margin: 0
}
#thankyou img {
width: 60px
}
#thankyou>div h2 {
font-size: 2.5em;
font-weight: 400;
margin: 0
}
.popup-footer {
background-color: #121741
}
#top {
display: none
}
.arrow-pointing-to-up {
width: 42px;
padding: 7px;
position: fixed;
bottom: 6px;
left: 10px;
-webkit-animation: mymove 2s infinite;
animation: mymove 2s infinite;
border-radius: 50%;
z-index: 111111
}
.arrow-pointing-to-up img {
border-radius: 50%;
box-shadow: 0 0 1px #000
}
@-webkit-keyframes mymove {
0% {
bottom: 2px
}
100%,
25% {
bottom: 6px
}
75% {
bottom: 0
}
}
@keyframes mymove {
0% {
bottom: 2px
}
100%,
25% {
bottom: 6px
}
75% {
bottom: 0
}
}
#service-page-inner {
padding: 3%;
background-image: url(https://www.nxtzeal.com/wp-content/uploads/2018/06/img-mask2.jpg);
background-size: auto 100%;
background-position: center
}
#service-page-inner h1 {
color: #fff;
font-size: 4.5em;
font-weight: 500
}
#service-page-inner p {
color: #fff;
font-size: 1.6em;
line-height: 1.6
}
#service-page-inner .row {
display: flex;
align-items: center
}
.content-sec {
padding: 3% 0
}
.content-sec .row {
display: flex;
align-items: flex-start
}
.img-mask {
height: 250px;
background-image: url(https://www.nxtzeal.com/wp-content/uploads/2018/06/img-mask.jpg);
background-position: top;
background-size: 100%;
padding-top: 3%
}
.img-mask p {
font-size: 30px;
color: #fff
}
.img-mask h2 {
color: #fff
}
.thin-heading {
font-family: 'Open Sans', sans-serif;
margin-bottom: 30px;
font-weight: 400
}
.thin-heading span {
color: #3bafe4;
font-weight: 700
}
.design-process {
padding: 5% 0
}
.process-listing h4 {
color: #3bafe4
}
.process-listing {
padding: 0;
position: relative
}
.process-listing li {
list-style-type: none;
display: flex;
align-items: center;
margin-top: 5%
}
.process-flow>div,
.process-listing li:nth-child(odd) {
float: left
}
.process-listing li>div {
float: left;
box-sizing: border-box;
position: relative;
padding: 25px;
background-color: #fff;
box-shadow: -6px 5px 22px #aaa;
border: 2px solid #fff
}
.process-listing li.left-process>div:nth-child(1),
.process-listing li.right-process>div:nth-child(2) {
width: 175px;
height: 175px;
border-radius: 50%;
position: relative;
z-index: 1
}
.process-listing li.left-process>div:nth-child(2),
.process-listing li.right-process>div:nth-child(1) {
width: 680px;
height: 290px;
border-radius: 0;
margin-left: -56px;
padding-left: 80px;
border: 8px solid #3bafe4;
display: flex;
align-items: center
}
.process-listing li.right-process>div:nth-child(1) {
border-radius: 0;
margin-right: -56px;
padding-left: 50px;
padding-right: 80px
}
.light-grey {
background-color: #f6f6f6
}
.augment {
padding: 3% 0
}
.augment-title {
padding-bottom: 3%
}
.wt-we-give {
padding-left: 15px
}
.wt-we-give li {
list-style-type: none;
margin-bottom: 15px;
font-size: 15px
}
.wt-we-give li span {
color: #3bafe4;
font-size: 18px
}
.responsive-web {
padding: 3% 0
}
.process-flow {
position: relative;
overflow: hidden;
width: 100%;
border-radius: 100px 0 0 100px;
margin-bottom: 15px
}
.process-flow>div:nth-child(1) {
width: 186px;
height: 186px;
padding: 20px
}
.process-flow>div:nth-child(1) img {
width: 70px;
height: 70px;
margin: auto
}
.process-flow>div:nth-child(1)>div {
width: 100%;
height: 100%;
padding: 11px;
background-color: #fff;
border-radius: 50%
}
.process-flow>div:nth-child(1)>div>div {
width: 100%;
height: 100%;
display: flex;
align-items: center;
border-radius: 50%;
position: relative;
z-index: 100
}
.specialized-in li,
.wrap-box>div {
display: inline-block;
vertical-align: top
}
.process-flow>div ul {
text-align: left;
padding-left: 15px
}
.process-flow>div ul li {
line-height: 1.6;
font-size: 15px
}
.step-num {
font-size: 6em;
text-align: center;
width: 100%;
color: #fff
}
.process-flow>div:nth-child(2) {
width: 430px;
height: 392px;
margin-left: -90px;
background-color: #f6f6f6;
text-align: center;
padding: 0 18px 0 70px
}
.process-flow>div:nth-child(2) h2 {
color: #3bafe4
}
.process-flow>div:nth-child(2) p {
line-height: 1.6;
font-size: 15px;
text-align: justify
}
.specialized-in {
width: 100%;
padding: 0
}
.color-one {
background-color: #1a6a82
}
.color-two {
background-color: #f9c62c
}
.color-three {
background-color: #42a9aa
}
.color-four {
background-color: #e33a59
}
.specialized-in li {
list-style-type: none;
width: 33%;
text-align: center;
padding: 24px;
border: 1px solid #aaa;
border-radius: 4px;
height: 325px;
margin-bottom: 4px
}
.specialized-in.v2 li {
width: 24%
}
.specialized-in li img {
padding: 12px 12px 15px;
width: 120px
}
.specialized-in.v2 li img {
width: 40%;
padding: 5px
}
.specialized-in li p {
font-size: 15px;
line-height: 1.4;
text-align: justify
}
.ppc-process-img,
.process-box,
.process-ul li,
.top-reasons>div p,
.wrap-box {
text-align: center
}
.content-body {
padding: 3% 0
}
.top-reasons {
position: relative;
overflow: hidden;
margin-bottom: 3%
}
.wrap-box {
padding-right: 25px
}
.wrap-box>div {
position: relative;
top: 0
}
.wrap-box>div>div {
width: 270px;
height: 270px;
color: #fff;
border-radius: 50%;
display: flex;
margin-right: -25px;
padding: 25px;
align-items: center
}
.top-reasons>div p {
color: #fff;
font-size: 26px;
line-height: 1.5
}
.ppc-process-img img {
max-width: 600px
}
.process-box img {
width: 65%
}
.process-ul {
padding: 0;
width: 100%
}
.process-ul li {
list-style-type: none;
display: inline-block;
width: 19%;
padding: 20px;
vertical-align: top
}
.ver-center {
display: flex;
align-items: center
}
.unique-approach {
margin-bottom: 5%;
border-left: 3px solid #3bafe4
}
.unique-approach h2,
.unique-approach h4 {
color: #3bafe4;
font-size: 20px
}
.unique-approach img {
margin: auto;
position: relative;
display: block;
width: 100px
}
.unique-approach.v2 {
box-sizing: border-box;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
height: 540px;
text-align: center;
padding: 30px
}
.unique-approach.v2 ul {
text-align: left
}
.unique-approach.v2:nth-child(1),
.unique-approach.v2:nth-child(3) {
border-left: unset
}
.side-navbar {
position: fixed;
right: 15px;
top: 30%;
padding: 2px;
min-height: 200px;
transition: all .8s ease;
z-index: 900;
background-color: transparent
}
.side-navbar>div:nth-child(1) span {
width: 45px;
height: 45px;
position: absolute;
right: 0;
z-index: 1;
top: 0;
overflow: hidden;
line-height: 0;
border-radius: 50%;
background-color: #3bafe4;
padding: 10px;
box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
-webkit-transition: all .8s ease;
transition: all .8s ease
}
.side-navbar>div:nth-child(2) {
background-color: transparent;
opacity: 0;
-webkit-transition: all .8s ease;
transition: all .8s ease
}
.side-navbar ul {
padding: 0
}
.side-navbar ul li {
list-style-type: none
}
.side-navbar ul li a {
font-size: 13px
}
.side-navbar ul li a:hover {
color: #3bafe4;
font-weight: 600
}
.panel-title span {
float: right
}
.panel-default>.panel-heading a {
color: #fff
}
.panel-default>.panel-heading {
background-color: #3bafe4
}
#accordion {
background-color: #fff;
position: relative;
width: 300px;
right: -150%;
padding: 20px;
margin-top: 45px;
-webkit-transition: all .8s ease;
transition: all .8s ease;
box-shadow: 0 6px 20px rgba(0, 0, 0, .4)
}
#click-close {
display: none;
padding: 11px;
-webkit-transition: all 1.8s ease;
transition: all 1.8s ease
}
#click-open {
display: block
}
.panel-group {
margin: 0
}
.process-flow.v2>div:nth-child(2) {
height: 255px
}
.process-flow.v2 {
border-radius: 100px 0 0
}
.unique-approach p {
text-align: justify;
font-size: 15px;
line-height: 1.8
}
.unique-approach.v3 {
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
height: 385px;
padding: 0 30px;
text-align: center
}
.unique-approach.v3:nth-child(1),
.unique-approach.v3:nth-child(4) {
border-left: unset
}
.unique-approach.v4 {
border: unset;
text-align: center;
padding: 2px;
margin-bottom: 2px
}
.unique-approach.v4>div {
box-sizing: border-box;
border: 1px solid #ccc;
padding: 24px;
height: 340px;
border-radius: 5px
}
.unique-approach.v5 {
border: unset;
padding: 4px;
text-align: center;
margin-bottom: 0
}
.unique-approach.v5>div {
border: 1px solid #ccc;
padding: 24px;
height: 360px;
border-radius: 5px
}
.unique-approach.v6 {
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
text-align: center;
padding: 24px;
height: 520px
}
.unique-approach.v6:nth-child(1),
.unique-approach.v6:nth-child(4) {
border-left: unset
}
article#templates {
display: table;
width: 100%
}
.sidenav {
height: 100%;
border: 1px solid #eee;
width: 0;
position: sticky;
z-index: 1;
top: 0;
left: 0;
background-color: #fff;
overflow: hidden;
transition: .5s;
padding-top: 20px;
box-shadow: 2px 2px 10px #888;
float: left
}
.sidenav .closebtn {
position: absolute;
top: -15px;
right: 10px;
margin-left: 50px;
text-align: right;
z-index: 1;
}
.dropdown-menu>li>a {
white-space: normal
}
#main {
transition: margin-left .5s;
padding: 16px;
overflow: hidden
}
#mySidenav {
width: 250px;
display: table-cell;
height: 100%;
min-height: 100vh
}
.closebar {
font-size: 18px;
cursor: pointer
}
.openbar {
font-size: 18px;
cursor: pointer;
display: none;
}
.templateSearch {
display: block;
overflow: hidden;
padding: 5px
}
.templateSearch .input__label {
color: #888
}
.templateSearch .fa {
color: #3bafe4
}
.templateSearch .input__field--hoshi {
margin-top: 0;
color: #000
}
#mySidenav ul li {
list-style-type: none;
line-height: 1.6;
margin-bottom: 10px;
-webkit-transition: all 2s ease-in-out;
transition: all 2s ease-in-out
}
.template-filter li a {
color: #373737;
text-decoration: none;
font-size: 14px
}
.template-filter li .fa {
color: #3bafe4
}
.template-filter li a:hover {
color: #3bafe4
}
.theme-preview {
position: relative;
display: block;
padding: 30px
}
.theme-preview div {
position: relative;
display: block
}
.image-preview {
box-shadow: 0 0 20px #888;
border-radius: 8px;
overflow: hidden;
position: relative
}
.theme-details {
text-align: center;
padding: 15px
}
.image-preview a {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .8);
color: #fff;
opacity: 0;
display: flex;
z-index: 111;
top: 0;
left: 0;
justify-content: center;
align-items: center;
text-decoration: none;
font-size: 28px
}
.image-preview a:hover {
opacity: 1
}
.dropdown {
-webkit-transition: all 2s ease-in-out;
transition: all 2s ease-in-out
}
.template-filter .dropdown-menu {
position: relative;
width: 100%;
border: none;
box-shadow: none;
-webkit-transition: all 2s ease-in-out;
transition: all 2s ease-in-out
}
.pagination-links {
text-align: center
}
.pagination-links a {
font-size: 18px;
padding: 0 5px
}
.headspace {
height: 90px
}
.close-box {
position: relative
}
#toggle-veiw {
padding: 0 1%;
text-align: center;
margin: auto;
padding-bottom: 30px
}
#toggle-veiw>iframe {
width: 100%;
height: 100vh;
border: 1px solid #ddd;
padding: 10px;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out
}
.toggle-veiw-button {
text-align: center;
margin-top: 10px;
color: #777
}
.toggle-veiw-button>span {
cursor: pointer;
margin: 0 20px
}
span#mobile .fa {
font-size: 37px
}
.shadow-box{
box-shadow: 0 0 20px #888;
padding: 30px;
border-radius: 4px;
background-color: #fff;
height:300px;
overflow:hidden;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out
}
.shadow-box:hover{
transform: scale(1.05);
}
@media (min-width:1367px) and (max-width:1690px) {
.outer-menu .menu>div>div {
width: 70vw
}
.banner>img {
width: 130%;
margin-left: -20%
}
.case-info {
padding: 6%
}
}
@media (min-width:1025px) and (max-width:1366px) {
.get-quote {
right: 8%
}
.container {
padding: 0 9%
}
.caption {
bottom: 0;
top: 35%;
width: 36%
}
.caption h1 {
font-size: 4em
}
.outer-menu .checkbox-toggle:checked~.menu>div>div {
margin-top: 5%
}
.caption p {
font-size: 21px;
margin-top: 25px
}
#top-text h2 {
font-size: 21px
}
.caption .theme-btn {
margin-top: 20px
}
.left>.caption-box h5 {
font-size: 1.3em
}
.navbar-brand {
width: 21%
}
.system-menu>li {
height: 17vw
}
.outer-menu .menu>div>div {
width: 80vw
}
.left>.caption-box,
.right>.caption-box {
height: 240px
}
.right>.caption-box {
width: 380px;
padding: 2%
}
.caption-button {
bottom: 6%
}
article#page-title .big-font-v1,
article#page-title .title>div .big-font {
font-size: 6em
}
article#page-title .who-we-are {
padding: 30px;
width: 60%
}
.case-info {
padding: 5%
}
#page-title .case-info>h1 {
font-size: 2.6em
}
.case-info>ul {
margin-top: 7%
}
.banner>img {
width: 130%;
margin-left: -20%
}
.case-study-link>h2 {
top: 30%
}
a.case-study-link {
padding: 15px
}
.case-study-two>.child-two {
padding: 0 20px 20px 7%
}
.case-study-one>.child-one,
.case-study-three>.child-one {
padding: 0 7% 20px 20px
}
.wrap-box>div>div {
width: 230px;
height: 230px
}
.top-reasons>div p {
font-size: 20px
}
.specialized-in li {
height: 370px
}
.unique-approach.v5>div {
height: 400px
}
.unique-approach.v4>div {
height: 370px;
padding: 15px
}
.unique-approach.v3 {
padding: 0 15px
}
.unique-approach.v6 {
height: 575px;
padding: 15px
}
}
@media only screen and (min-width:992px) and (max-width:1024px) {
.left>.caption-box,
.right>.caption-box {
height: 200px
}
.head-title video {
width: auto;
height: 100%
}
.case-study-link>h2 {
top: 40%
}
}
@media only screen and (min-width:768px) and (max-width:991px) {
.head-title video {
width: auto;
height: 100%
}
.caption {
width: 90%
}
.outer-menu {
right: 25%;
margin-top: -10px
}
article#home {
height: 65vh
}
.caption h1 {
font-size: 3.4em
}
.navbar-brand {
width: 30%
}
.about-us,
.get-in-touch,
.latest-post,
.reach-us {
padding: 0
}
article#contact-form {
padding: 4%
}
.outer-menu .menu>div>div {
width: 90vw
}
.system-menu>li {
width: 22rem;
height: 21rem;
margin: 6px
}
.snip1438>div>h2 {
bottom: 60%
}
article#page-title .who-we-are {
margin-top: -12%;
width: 60%;
margin-left: 35%
}
article#page-title .title>div {
width: 38%
}
article#page-title .big-font-v1,
article#page-title .title>div .big-font {
font-size: 7em
}
.team-mem {
padding: 5px
}
figure.snip0067 {
margin: 0
}
.process-step,
a.case-study-link {
padding: 15px
}
.case-study-link>h2 {
top: 10%;
font-size: 24px
}
article#digital-marketing .services,
article#website-ui-ux .services {
height: 435px
}
.services ul li {
padding: 0
}
.related-case-study h2 {
font-size: 26px
}
.banner>img {
width: 220%;
margin-left: -85%
}
.case-info {
padding: 30px
}
#page-title .case-info>h1 {
font-size: 2em
}
.case-description p,
.displayadds p,
.responsive-desc p,
.search-display-desc p,
.webdesign-desc p,
.wireframe-desc p {
font-size: 16px;
line-height: 2
}
.case-description p {
padding-top: 15px
}
.responsive-desc,
.search-display-desc,
.webdesign-desc,
.wireframe-desc {
padding: 30px
}
.circle img {
width: 35px
}
#service-page-inner h1 {
font-size: 3.2em
}
.process-listing li.left-process>div:nth-child(2),
.process-listing li.right-process>div:nth-child(1) {
width: 615px;
height: 290px;
margin-left: -60px;
padding-left: 62px
}
.process-listing li.left-process>div:nth-child(1),
.process-listing li.right-process>div:nth-child(2) {
width: 145px;
height: 145px
}
.img-mask {
height: 200px;
background-size: 265%
}
.top-reasons>div p {
font-size: 20px
}
.process-flow {
border-radius: 60px 0 0 60px
}
.process-flow>div:nth-child(2) {
width: 80%;
height: 100%
}
.unique-approach.v2 {
height: 620px
}
.unique-approach.v3 {
height: 475px;
padding: 0 15px
}
.specialized-in li {
width: 32.5%;
height: 445px;
padding: 15px
}
.unique-approach.v4>div {
padding: 15px;
height: 450px
}
.unique-approach.v5>div {
padding: 15px;
height: 445px
}
.unique-approach.v6:nth-child(1),
.unique-approach.v6:nth-child(4) {
border-left: 1px solid #ccc
}
.unique-approach.v6 {
width: 50%
}
article#page-title .title>div .big-font {
right: 0
}
.price-banner h1 {
font-size: 3.4em
}
}
@media only screen and (min-width:480px) and (max-width:767px) {
.outer-menu .menu>div>div {
width: 95vw
}
.system-menu>li {
width: 44%
}
.snip1438>div>h2 {
bottom: unset;
top: 6%
}
.snip1438>div>p {
font-size: 16px;
line-height: 1.4
}
.caption h1,
article#page-title .big-font-v1,
article#page-title .title>div .big-font {
font-size: 4em
}
.system-menu>li:nth-child(5) {
top: 6rem
}
.navbar-brand {
width: 55%;
max-width: 260px
}
.nav>li {
display: inline-block
}
.caption {
width: 85%
}
.container-fluid>.navbar-collapse,
.container-fluid>.navbar-header,
.container>.navbar-collapse,
.container>.navbar-header {
margin: 0
}
.head-title video {
width: auto;
height: 100%
}
.case-study-one>.child-one,
.case-study-three>.child-one,
.case-study-two>.child-two {
width: 75%
}
.menu ul {
margin-top: 95px
}
article#page-title .title>div .big-font {
right: 0
}
article#page-title .who-we-are {
width: 100%;
margin-left: 0;
margin-top: 0
}
.get-direction,
.map {
height: 100%
}
.get-direction>div {
width: 100%
}
.post-heading,
.post-image {
width: 100%;
height: 100%;
position: relative
}
.banner p,
.banner ul,
article#start-a-project .line {
display: none
}
.case-info {
padding: 6px;
width: 100%;
display: flex;
align-items: center
}
.banner>img {
width: 260%;
margin-left: -130%
}
}
@media only screen and (min-width:300px) and (max-width:600px) {
.navbar-right.system-view {
display: none
}
}
@media only screen and (min-width:300px) and (max-width:479px) {
.testimonial>div{
padding: 10px 20px;
}
.testi-content span.text{
padding: 0;
}
.work-with-us,
article#contact-form {
background-size: auto 100%
}
.case-study-payperclick h2,
.case-study-section ul>li,
.related-case-study>div a p:hover,
.webdesign-image h2,
article#case-study h3 {
color: #fff
}
.mobile-view {
display: block
}
.banner p,
.banner ul,
.system-view,
article#start-a-project .line {
display: none
}
.caption {
left: 0;
padding: 20px;
width: 100%;
top: 15%
}
.caption h1 {
font-size: 3.2em;
line-height: 1.3
}
#top-text h2,
.caption p {
font-size: 18px
}
.head-title video {
width: auto;
height: 100%
}
.system-menu>li {
position: relative;
height: 40px;
margin: 9px;
width: 94%;
clear: both!important;
float: left!important;
transform: unset!important
}
.system-menu>li:nth-child(5) {
left: unset;
top: unset;
transform: unset;
margin: 9px
}
ul.system-menu {
padding: 0;
position: relative;
top: 30%;
width: 100%
}
.snip1438 {
font-size: 24px;
padding: 5px
}
.outer-menu .menu>div>div {
width: 75vw;
height: 100%
}
.snip1438.hover:after,
.snip1438:active:after,
.snip1438:hover:after {
-webkit-transform: rotate(-45deg) scale(7.5) translate(0, 0);
transform: rotate(-45deg) scale(7.5) translate(0, 0)
}
.snip1438::after {
-webkit-transform: rotate(-45deg) scale(5.5) translate(0, -100%);
transform: rotate(-45deg) scale(5.5) translate(0, -100%)
}
.outer-menu {
position: absolute;
right: 0;
top: 0
}
.snip1438>div {
background-image: unset!important;
padding: 1px
}
.snip1438>div>h2 {
margin: 0;
font-size: 24px;
position: relative;
left: 0;
bottom: 0
}
#home .carousel-inner>.item>a>img,
#home .carousel-inner>.item>img,
#home .img-responsive,
#home .thumbnail>img,
.thumbnail a>img {
max-width: 200%;
width: 190%
}
.right>.caption-box {
width: 90%;
height: 150px;
padding: 2%;
top: 25%
}
.caption-box h3 {
margin-top: 4%;
font-size: 22px
}
.caption-box p,
.left>.caption-box h5 {
font-size: 12px
}
.left>.caption-box {
top: 25%;
height: 150px;
width: 20%
}
.carousel-indicators {
bottom: -7px
}
.heading h2 {
font-size: 27px
}
#our-experties h3 {
font-size: 2.5em
}
.btn,
a,
body,
p {
font-size: 13px
}
#our-experties .parent2>div>div {
padding: 4% 2% 5%
}
.case-study-one>.child-two,
.case-study-three>.child-two {
width: 100%;
right: 0;
position: relative;
height: 100%
}
.case-study-one,
.case-study-three,
.case-study-two {
border: 0;
margin-bottom: 30px;
height: 100%;
overflow: hidden;
position: relative
}
.case-study-one,
.case-study-three {
margin-right: 0
}
.case-study-one>.child-one,
.case-study-three>.child-one {
padding: 38% 6% 6%;
width: 100%;
background-color: rgba(0, 0, 0, .4);
position: absolute;
height: 100%
}
.case-study-two>.child-one {
width: 100%;
left: 0;
position: relative
}
.case-study-two>.child-two {
padding: 38% 6% 6%;
width: 100%;
position: absolute;
top: 0;
height: 100%;
background-color: rgba(0, 0, 0, .4)
}
.case-study-two {
margin-left: 0
}
.case-study-section img {
border: 0
}
.case-study-section ul>li {
margin-top: 6px
}
article#case-study .btn.btn-default {
margin-top: 10px
}
article#case-study .list-inline .btn.btn-default {
color: #000
}
.number {
top: -6%;
left: 10%
}
.case-study-two .number {
right: 10%
}
.btn {
padding: 5px 8px
}
#carousel123 .item>div {
padding: 10px;
width: 80%;
left: 10%;
position: relative
}
.col-sm-6.parent2>div {
overflow: hidden
}
article#contact-form ul>li {
margin-bottom: 20px
}
article#contact-form .navbar-nav {
padding-left: 15px;
margin-top: 30px
}
article#contact-form .navbar-nav>li {
display: inline-block
}
article#page-title {
padding-top: 16.6%;
overflow: hidden
}
article#page-title .title>div:nth-child(1) {
width: 30%
}
article#page-title .title>div .big-font {
font-size: 3.8em;
right: 0;
bottom: unset
}
article#page-title .big-font-v1 {
font-size: 3.8em;
margin-left: 15px
}
article#page-title .title>div {
height: 150px;
width: 70%
}
.map {
height: 240px
}
.get-direction {
margin-top: 0;
height: 100%
}
.get-direction>div {
left: 0;
top: 0;
width: 100%;
padding: 20px
}
.direction-link span:nth-child(1) {
top: 28%
}
.carousel-caption>.left {
width: 35%
}
.carousel-caption>.half {
width: 65%
}
article#home {
padding-top: 16%;
max-height: 700px
}
.col-us-on h2 {
font-size: 22px
}
.work-with-us>h2 {
font-size: 23px
}
.services ul li {
padding: 5px;
vertical-align: middle
}
article#digital-marketing .services,
article#website-ui-ux .services {
padding: 15px;
height: 100%
}
.case-info,
.right-skew {
top: unset;
height: 30%;
bottom: 0
}
.banner>img {
width: 260%;
margin-left: -130%
}
.right-skew {
width: 100%;
left: 0;
-webkit-transform: skew(0);
-ms-transform: skew(0);
transform: skew(0);
border-top: 2px solid #fff;
border-right: unset
}
.case-info {
padding: 6px;
width: 100%;
display: flex;
align-items: center
}
#page-title .case-info>h1 {
font-size: 22px;
text-align: center;
margin: 0
}
.case-info hr {
margin: auto;
display: none
}
.case-info p {
font-size: 13px
}
.case-info li,
.case-info>ul {
margin-top: 5px;
font-size: 15px
}
.case-info>ul {
padding: 0;
width: 100%;
position: absolute
}
.case-description {
overflow: hidden;
padding: 0 30px 30px
}
.circle img {
width: 36px
}
.circle {
width: 25%
}
.case-description p,
.case-study-payperclick p,
.displayadds p,
.responsive-desc p,
.webdesign-desc p,
.wireframe-desc p {
padding-top: 18px;
font-size: 16px;
line-height: 1.8;
text-align: justify
}
.related-case-study .fa {
font-size: 15px
}
.related-case-study>div h2 {
display: none
}
.case-study-payperclick,
.case-study-responsive,
.case-study-webdesign,
.wireframe {
display: table
}
.case-study-payperclick>div,
.case-study-responsive>div,
.case-study-webdesign>div,
.wireframe>div {
width: 100%;
padding: 30px
}
.case-study-payperclick>div,
.case-study-webdesign>div {
padding-top: 0
}
.displayadds {
padding: 30px
}
.addwords>div {
width: 100%
}
.project-details>div {
width: 100%;
background-color: #121741
}
.project-details>div:nth-child(1),
.project-details>div:nth-child(2) {
border-bottom: 1px solid #eee
}
article#page-title .who-we-are {
margin-top: 65%;
margin-left: 0;
text-align: justify;
width: 100%
}
.outer-menu .hamburger>div::before {
top: -9px
}
.outer-menu .hamburger>div::after {
top: 9px
}
.outer-menu .hamburger {
width: 50px
}
.post-image,
.web-video {
width: 100%
}
.system-menu>li:nth-child(5) h2 {
transform: rotate(0)
}
.container-fluid>.navbar-collapse,
.container-fluid>.navbar-header,
.container>.navbar-collapse,
.container>.navbar-header {
margin: 0
}
.snip1438>div>p {
display: none
}
.post-share-links ul {
padding: 10px
}
article#post-title {
margin-top: 17%;
padding: 30px 3% 0
}
.post-heading {
padding: 29px;
width: 100%;
height: 100%;
position: relative;
top: 0
}
.caption .theme-btn {
padding: 8px 12px
}
.box>div {
padding: 0
}
.col-us-on>a {
font-size: 20px
}
.web-video {
height: auto
}
article#partner .row>div {
padding: 25px
}
.related-case-study>div a p {
margin: 0
}
.related-case-study {
overflow: hidden;
margin: 10px 0
}
.service-nav ul li,
.service-nav ul li a {
width: 100%;
text-align: center;
margin-right: 0;
margin-bottom: 5px
}
.side-navbar {
top: 42%
}
#service-page-inner .row {
display: block
}
#service-page-inner h1 {
font-size: 3.2em;
text-align: center
}
.augment p,
.content-body p,
.content-sec p,
.process-listing li p,
.responsive-web p {
text-align: justify
}
.content-sec .row {
display: block;
padding: 15px
}
.img-mask {
background-size: 400%
}
.img-mask p {
font-size: 20px;
line-height: 1.6
}
.process-listing li.left-process>div:nth-child(1),
.process-listing li.right-process>div:nth-child(2) {
width: 130px;
height: 130px
}
.process-listing li.left-process>div:nth-child(2),
.process-listing li.right-process>div:nth-child(1) {
width: 100%;
height: 100%;
margin-left: 0;
padding: 20px
}
.process-listing li.left-process>div:nth-child(2) {
margin-top: -60px;
padding-top: 60px
}
.process-listing li.right-process>div:nth-child(1) {
margin-bottom: -60px;
padding-bottom: 60px
}
.process-listing li {
display: block;
margin-top: 20%
}
.content-body .row>div {
padding: 0 30px 10px
}
.augment hr,
.content-body hr,
.content-sec hr,
.responsive-web hr {
display: none
}
.thin-heading {
margin-bottom: 15px
}
.wt-we-give {
padding-left: 0
}
.top-reasons {
padding-bottom: 40px
}
.process-flow {
border-radius: 100px 0 0;
padding-bottom: 30px
}
.process-flow>div:nth-child(2) {
width: 100%;
height: 100%;
padding: 50px 18px 0;
margin-left: 0;
margin-top: -90px
}
.content-body .step-num {
text-align: center
}
.specialized-in li {
width: 100%;
padding: 30px;
margin-bottom: 20px;
height: 100%
}
.specialized-in li img {
padding-top: 0
}
.unique-approach.v2,
.unique-approach.v3 {
height: 100%;
border-left: unset;
padding: 0 0 10px
}
.wrap-box {
padding-right: 0
}
.wrap-box>div>div {
width: 230px;
height: 230px;
margin-right: unset;
margin-bottom: -30px
}
.top-reasons>div p {
font-size: 22px
}
.unique-approach {
margin-bottom: 40px
}
.process-ul {
padding: 0
}
.process-ul li {
display: inline-block;
width: 48%
}
.specialized-in.v2 li {
width: 100%
}
.process-mobile-child2 p {
line-height: 1.42857143
}
.process-box {
margin-bottom: 30px
}
.process-box img {
width: 50%
}
.unique-approach.v4>div,
.unique-approach.v5>div {
height: 100%
}
.content-body .row .ppc-process-child {
padding-top: 0
}
.unique-approach.v6 {
padding: 0 0 10px;
height: 100%;
border-left: unset
}
article#case-video {
padding: 15% 0
}
.related-case-study>div a,
.related-case-study>div i,
.related-case-study>div p {
line-height: 1
}
.related-case-study>div:nth-child(2) {
overflow: hidden;
background-color: #ddd;
padding-top: 2px
}
.client-static {
padding: 0
}
.client-static>div {
margin: 3px
}
.client-static>div:hover {
transform: unset
}
.client-set {
overflow: hidden
}
.search-box {
box-sizing: border-box;
margin-top: 0!important;
width: 100%;
padding: 0 3rem
}
.gsc-search-box-tools .gsc-search-box .gsc-input {
padding-right: 0!important
}
.openbar {
opacity: 1
}
#mySidenav {
width: 0
}
#main {
margin-left: 0
}
.close-box {
margin-top: 30px
}
.theme-preview {
padding: 0
}
#toggle-veiw>iframe {
padding: 0
}
.toggle-veiw-button {
display: none
}
.navbar-right {
right: 10px;
top: 15px
}
.get-quote .btn-default {
font-size: 11px;
margin-right: -20px
}
.navbar-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
box-sizing: border-box
}
.get-quote {
position: relative;
right: unset;
display: unset;
align-items: unset
}
.navbar-brand {
padding: 0;
width: 40%;
margin-left: 60px
}
.outer-menu {
right: unset;
left: 0
}
.outer-menu .hamburger>div:after {
content: ''
}
.outer-menu .hamburger>div:after,
.outer-menu .hamburger>div:before {
right: unset;
left: 0
}
.outer-menu .hamburger {
top: 5px
}
.price-banner h1 {
font-size: 3em;
line-height: 1.3
}
#thankyou>div {
width: 90%
}
#testimonial #myCarousel {
min-height: 80vh
}
article#top-text {
padding: 15% 2%
}
#top-text h3 {
font-size: 2.1em;
margin-top: 0;
line-height: 1.5
}
.price-banner {
background-repeat: no-repeat;
background-size: auto 100%
}
#style-3 {
width: 36px
}
.ccw_plugin {
bottom: 6px!important;
right: 40px!important;
z-index: 9999999999!important;
width: 36px!important
}
article.price-bar {
padding: 3% 0
}
.navbar-header .topnav-links{
display: none;
}
}