/*
Theme Name: mammoth_wp_theme
Theme URI: https://mammoth.io
Author: mammoth
Author URI: https://mammoth.io
Version: 1.0
*/
img {
max-width: 100%;
}
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
.screen-reader-text:focus {
background-color: #eee;
clip: auto !important;
-webkit-clip-path: none;
clip-path: none;
color: #444;
display: block;
font-size: 1em;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
/* Above WP toolbar. */
}
body.blog,
body.single-post {
background-color: #f5f6f6;
}
/*body.blog #mammoth-header > nav,
body.single-post #mammoth-header > nav {
background-color: #f5f6f6!important;
}*/
.blog #mammoth-header .navbar,
.category #mammoth-header .navbar,
.author #mammoth-header .navbar {
padding: 15px 45px;
/* background-color: #deede5!important; */
}
.blog #mammoth-header .navbar .dropdown-menu,
.category #mammoth-header .navbar .dropdown-menu,
.author #mammoth-header .navbar .dropdown-menu {
background-color: #deede5 !important;
}
.grid {
max-width: 1440px;
width: 100%;
margin: 0 auto;
padding: 0 20px;
}
.p-color {
color: #069762;
}
/* .grid::before,
.grid::after,
.row::before,
.row::after {
content: "";
display: table; }
*/
.grid::after,
.row::after,
.ipad-grid::after {
clear: both;
}
.col {
padding: 25px;
}
.pad {
padding: 30px;
}
[class*="col-"] {
width: 100%;
min-height: 1px;
float: left;
box-sizing: border-box;
position: relative;
}
.hide {
display: none;
}
.navmain,
.navmobile,
#menu-top-menu,
.signup-choice__list,
#menu-privacy {
display: flex;
justify-content: space-between;
align-items: center;
}
#menu-privacy .login-btn {
display: block;
}
.primary-btn,
.nav__item,
.remove-btn .close-btn #close-btn,
.signup-choice__item,
.feature-curve__item .feature-curve__text,
.curve-item {
transition: all 250ms ease-in-out;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
html,
body {
font-size: 16px;
}
* {
box-sizing: border-box;
}
h1 {
font-size: 3em;
line-height: 67.2px;
}
h2 {
font-size: 2.25em;
line-height: 50.4px;
}
h3 {
font-size: 1.5em;
line-height: 22.6px;
}
h4 {
font-size: 1.25em;
line-height: 28px;
}
h5 {
font-size: 0.875em;
line-height: 19.6px;
}
h6 {
font-size: 0.625em;
line-height: 14px;
}
p {
font-size: 0.875em;
margin-bottom: 0px !important;
}
li {
list-style-type: none;
}
a {
color: #21364d;
text-decoration: none;
}
.pp,
.tc {
color: #21364d;
}
a:hover {
color: #069762;
text-decoration: none !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Lato, sans-serif;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-left {
text-align: left;
}
.clearfix {
*zoom: 1;
}
.clearfix::before,
.clearfix::after {
display: table;
content: "";
line-height: 0;
}
.clearfix::after {
display: block;
clear: both;
content: "";
}
body {
font-weight: 400;
font-size: 0.875em;
font-family: Lato, sans-serif !important;
/* color: #21364d; */
color: #21364d;
}
.img-responsive {
display: inline-block;
max-width: 100%;
height: auto;
}
button {
border: 0;
font-family: Lato, sans-serif;
}
button:focus {
outline: 0;
}
.primary-btn {
background: #56c28c;
color: #fff;
text-transform: capitalize;
font-size: 13px;
font-weight: 400;
letter-spacing: 0.09em;
cursor: pointer;
border-radius: 4px;
width: 173px;
height: 44px;
}
.primary-btn:hover {
background: #83d3aa;
}
.product-des {
font-size: 14px;
}
input:focus {
outline: 0;
border-bottom: 1px solid #56c28c !important;
}
textarea:focus {
outline: 1px solid #56c28c !important;
}
.form-control {
padding: 16px 12px;
width: 100%;
font-size: 0.875em;
font-weight: 300;
background: #fff;
border: 1px solid #ccc;
text-align: center;
}
.secondarytitle {
font-size: 25px;
font-style: italic;
font-weight: 600;
color: #393d3e;
letter-spacing: 0;
padding-top: 17px;
padding-bottom: 60px;
line-height: 37px;
}
@media screen and (min-width: 1200px) {
#mammoth-header nav {
padding-right: calc(50% - 540px) !important;
padding-left: calc(50% - 540px) !important;
}
}
@media all and (min-width: 767px) and (max-width: 1000px) {
.login-btn {
display: none;
}
.nav__item {
margin-right: 38px !important;
}
.blog-item {
margin: 0 !important;
}
}
/*====================================*/
/* Hero Section*/
/*====================================*/
.hero {
background: #f0f7f3;
border-bottom: 0 solid #ccc;
}
.hero .grid {
text-align: center;
white-space: nowrap;
max-width: 1400px;
}
.grid.reg {
display: block;
width: 100%;
}
.grid.mobile {
display: none;
}
.hero .grid_l,
.hero .grid_r {
display: inline-block;
width: 50%;
position: relative;
text-align: left;
}
.hero .grid_l {
min-width: 536px;
}
.hero__section {
max-height: 800px;
position: relative;
width: 100%;
text-align: center;
min-height: 500px;
display: inline-block;
vertical-align: top;
margin-top: 75px;
}
.sos-img,
.zen-img {
position: relative;
margin: 0 auto;
margin-top: 30px;
max-width: 550px;
display: block;
}
.zen-img {
max-width: 400px;
height: 320px;
margin-top: 10px;
}
.sos-img .plants {
position: absolute;
top: 0;
left: 30px;
max-height: 403px;
}
.sosguy {
position: absolute;
top: 100px;
left: 210px;
max-height: 210px;
}
.zencharts {
position: absolute;
top: 40px;
left: 35px;
max-height: 105px;
}
.zenguy {
position: absolute;
top: 80px;
left: 90px;
max-height: 193px;
}
.zenguyshadow {
position: absolute;
bottom: -25px;
left: 100px;
max-height: 193px;
}
.heading-text {
color: #393d3e;
text-transform: uppercase;
line-height: 65px;
margin-bottom: 0;
/* to Insights: */
font-family: Lato, sans-serif;
font-weight: bold;
font-size: 30px;
}
.subhead-text {
color: #21364d;
font-family: "crayon2", sans-serif;
font-size: 23px;
font-weight: normal;
margin-bottom: 0;
}
.subtext-line {
margin: 0 auto;
}
.subtext-line img {
margin-left: 50px;
width: 370px;
}
.hero__btn {
width: 176px;
height: 42px;
font-weight: 400;
font-size: 13px;
}
@media all and (max-width: 1100px) {
.hero .grid_l,
.hero .grid_r {
transform: scale(0.8, 0.8);
}
.hero .grid_l {
margin-left: -15px;
}
.hero__section {
margin-top: 40px;
min-height: 500px;
}
}
@media all and (max-width: 900px) {
.hero .grid_l,
.hero .grid_r {
transform: scale(0.7, 0.7);
min-width: 400px;
}
.hero__section {
margin-top: 0;
}
.grid_l .heading-text {
margin-left: 140px;
}
.secondarytitle {
padding-bottom: 40px;
font-size: 24px;
line-height: 37px;
}
}
@media all and (max-width: 768px) {
.grid.reg {
display: none;
}
.grid.mobile {
display: block;
text-align: center;
min-width: 300px;
padding: 0;
position: relative;
padding-top: 30px;
}
.grid_top {
padding-top: 0;
}
.grid_top .heading-text {
line-height: 35px;
font-size: 25px;
}
.grid_top .subhead-text {
margin-top: 12px;
font-size: 20px;
}
.grid_top .subtext-line {
margin: 0;
margin-top: 0;
width: 100%;
}
.grid_top .subtext-line img {
margin-left: 20px;
max-width: 300px;
}
.grid_middle {
min-height: 400px;
padding-top: 5px;
position: relative;
}
.sos-img-mobile,
.zen-img-mobile {
position: relative;
margin: 0 auto;
margin-top: 15px;
text-align: center;
display: block;
}
.zen-img-mobile {
margin-top: -10px;
}
.sos-img-mobile .plants {
position: absolute;
top: -10px;
left: 0;
height: 350px;
}
.sosguy_mobile {
position: absolute;
top: 65px;
left: 0;
height: 165px !important;
}
.zenguy_mobile {
position: absolute;
top: 85px;
right: 0;
height: 180px !important;
}
.login-btn,
.request-btn {
display: none !important;
}
.btn_container {
position: absolute;
bottom: 21px;
width: 100%;
text-align: center;
}
.btn_container button {
width: 217px;
height: 49px;
}
.secondarytitle {
font-size: 16px !important;
line-height: 25px !important;
padding: 15px 10px !important;
padding-bottom: 45px !important;
display: block;
margin: 0px !important;
}
.wrangel-vh-pro .header {
font-size: 19px !important;
}
#cookie-notice {
min-width: 95% !important;
}
.grid.features .col-md-4 {
margin-bottom: 30px;
}
}
@media all and (max-width: 320px) {
.secondarytitle {
font-size: 15px !important;
}
}
/*====================================*/
/* Features Section*/
/*====================================*/
.features {
padding: 80px 0 70px 0;
}
.features_list {
text-align: center;
max-width: 1017px;
margin: 0 auto;
}
.features_list .ft {
display: inline-block;
vertical-align: top;
width: 25%;
height: 220px;
padding: 20px 12px;
border-radius: 9px;
text-align: center;
}
.features_list .ft-2 {
margin: 0 12% 0 12%;
}
@media all and (min-width: 767px) and (max-width: 1000px) {
.features_list .ft-2 {
margin: 0 10% 0 10% !important;
}
}
@media all and (max-width: 768px) {
.features_list .ft {
background-color: transparent;
}
.features_list .ft-2 {
margin: 0;
}
}
.features__icon {
max-height: 70px;
}
.feature__title {
line-height: 28px;
margin-top: 26px;
font-family: Lato, sans-serif;
font-size: 16px;
color: #56c28c;
letter-spacing: 0;
white-space: nowrap;
}
.feature__description {
font-size: 15px;
font-weight: 300;
line-height: 24px;
margin: 0 auto;
margin-top: 10px;
max-width: 230px;
color: #393d3e;
}
.about-us {
font-size: 15px;
}
.feature-btn {
width: 126px;
height: 30px;
font-size: 13px;
letter-spacing: 0.5px;
margin-top: 80px;
}
.feature-curve__text {
font-size: 14px;
}
@media all and (max-width: 900px) {
.features_list {
transform: scale(0.9, 0.9);
margin-left: -20px;
}
.features_list .ft {
padding: 0;
}
}
/* Mobile */
@media all and (max-width: 768px) {
.features {
/* IE 9 */
/* Safari */
transform: none;
padding: 0;
display: block;
}
.features_list {
max-width: 375px;
left: 0;
position: relative;
margin: 0 auto;
margin-top: 25px;
padding: 0 0;
}
.features_list .ft {
display: block;
vertical-align: top;
width: 100%;
text-align: center;
}
.features__icon {
height: 70px;
}
.feature__title {
font-size: 18px;
margin-top: 20px;
}
.feature__description {
margin-top: 5px;
line-height: 20px;
max-width: none;
font-size: 15px;
font-weight: 400;
letter-spacing: 0;
}
}
/*====================================*/
/* Feature Details*/
/*====================================*/
.featuredetails {
text-align: center;
padding-top: 10px;
padding-bottom: 120px;
}
@media all and (max-width: 768px) {
.featuredetails {
background-color: white;
}
}
.fdtitle {
padding: 30px 0;
padding-bottom: 60px;
}
.curvesection {
margin-top: 40px;
position: relative;
display: inline-block;
}
.img-curve-lg {
display: block;
background: url(//mammoth.io/wp-content/uploads/2019/07/curve-lg.svg)
no-repeat;
width: 370px;
height: 371px;
}
.img-curve-mobile {
display: none;
background: url(//mammoth.io/wp-content/uploads/2019/07/curve.svg) no-repeat;
width: 219px;
height: 279px;
}
.icongroup {
position: absolute;
width: 150px;
}
.icongroup .title {
font-weight: 400;
font-size: 16px;
color: #393d3e;
padding-bottom: 10px;
}
.icongroup.connect {
top: -50px;
left: -70px;
}
.icongroup.store {
top: -50px;
left: 110px;
}
.icongroup.prepare {
top: 55px;
left: 290px;
}
.icongroup.discover {
top: 130px;
left: 110px;
}
.icongroup.analyze {
top: 230px;
left: -70px;
}
.icongroup.visualize {
top: 315px;
left: 110px;
}
.icongroup.communicate {
top: 315px;
left: 290px;
}
.icongroup.connect .icon-connect {
background: url(//mammoth.io/wp-content/uploads/2019/07/arrow-down-black-icon.svg)
no-repeat center;
height: 39px;
}
.icongroup.connect .icon-connect:hover,
.icongroup.selected .icon-connect {
background: url(//mammoth.io/wp-content/uploads/2019/07/arrow-down-icon.svg)
no-repeat center;
height: 39px;
}
.icongroup.store .icon-store {
background: url(//mammoth.io/wp-content/uploads/2019/07/home-black-icon.svg)
no-repeat center;
height: 39px;
}
.icongroup.store .icon-store:hover,
.icongroup.selected .icon-store {
background: url(//mammoth.io/wp-content/uploads/2019/07/home-icon.svg)
no-repeat center;
height: 39px;
}
.icongroup.prepare .icon-prepare {
background: url(//mammoth.io/wp-content/uploads/2019/07/wrench-black-icon.svg)
no-repeat center;
height: 38px;
}
.icongroup.prepare .icon-prepare:hover,
.icongroup.selected .icon-prepare {
background: url(//mammoth.io/wp-content/uploads/2019/07/wrench-icon.svg)
no-repeat center;
}
.icongroup.discover .icon-discover {
background: url(//mammoth.io/wp-content/uploads/2019/07/ruby-black-icon.svg)
no-repeat center;
height: 39px;
}
.icongroup.discover .icon-discover:hover,
.icongroup.selected .icon-discover {
background: url(//mammoth.io/wp-content/uploads/2019/07/ruby-icon.svg)
no-repeat center;
}
.icongroup.analyze .icon-analyze {
background: url(//mammoth.io/wp-content/uploads/2019/07/glasses-black-icon.svg)
no-repeat center;
height: 38px;
}
.icongroup.analyze .icon-analyze:hover,
.icongroup.selected .icon-analyze {
background: url(//mammoth.io/wp-content/uploads/2019/07/glasses-icon.svg)
no-repeat center;
}
.icongroup.visualize .icon-visualize {
background: url(//mammoth.io/wp-content/uploads/2019/07/bars-black-icon.svg)
no-repeat center;
height: 38px;
}
.icongroup.visualize .icon-visualize:hover,
.icongroup.selected .icon-visualize {
background: url(//mammoth.io/wp-content/uploads/2019/07/bars-icon.svg)
no-repeat center;
}
.icongroup.communicate .icon-communicate {
background: url(//mammoth.io/wp-content/uploads/2019/07/arrow-black-icon.svg)
no-repeat center;
height: 38px;
}
.icongroup.communicate .icon-communicate:hover,
.icongroup.selected .icon-communicate {
background: url(//mammoth.io/wp-content/uploads/2019/07/arrow-icon.svg)
no-repeat center;
}
.icongroup .iconcontent {
position: absolute;
border-radius: 8px;
background: #f4f4f4;
padding: 30px;
font-size: 15px;
color: #393d3e;
width: 290px;
top: -60px;
opacity: 0;
cursor: pointer;
transition: all 0.7s ease-in-out;
}
.icongroup .iconcontent .ic_title {
font-weight: 400;
padding-bottom: 12px;
font-family: Lato, sans-serif;
letter-spacing: 0.5px;
white-space: nowrap;
}
.icongroup .iconcontent .ic_desc {
font-family: Lato, sans-serif;
line-height: 21px;
text-align: left;
padding-left: 10px;
font-size: 15px;
letter-spacing: 0.2px;
}
.icongroup.connect .iconcontent {
left: -300px;
top: -50px;
}
.icongroup.store .iconcontent {
left: 364px;
top: -50px;
}
.icongroup.prepare .iconcontent {
left: 150px;
top: 0;
}
.icongroup.discover .iconcontent {
left: -535px;
top: -105px;
}
.icongroup.analyze .iconcontent {
left: -300px;
top: -45px;
}
.icongroup.visualize .iconcontent {
left: -535px;
top: -20px;
}
.icongroup.communicate .iconcontent {
left: 150px;
top: -70px;
}
.icongroup .iconcontent .ic_connector {
height: 0;
border-top: 2px dashed #56c28c;
position: absolute;
top: 70px;
}
.icongroup.connect .iconcontent .ic_connector {
right: -40px;
width: 40px;
top: 62px;
}
.icongroup.store .iconcontent .ic_connector {
left: -255px;
width: 255px;
top: 62px;
}
.icongroup.prepare .iconcontent .ic_connector {
left: -35px;
width: 35px;
top: 15px;
}
.icongroup.discover .iconcontent .ic_connector {
right: -275px;
width: 275px;
top: 116px;
}
.icongroup.analyze .iconcontent .ic_connector {
right: -45px;
width: 45px;
top: 57px;
}
.icongroup.visualize .iconcontent .ic_connector {
right: -275px;
width: 275px;
top: 32px;
}
.icongroup.communicate .iconcontent .ic_connector {
left: -36px;
width: 36px;
top: 84px;
}
.icongroup.selected .icon-connect,
.icongroup.selected .icon-store,
.icongroup.selected .icon-prepare,
.icongroup.selected .icon-discover,
.icongroup.selected .icon-analyze,
.icongroup.selected .icon-visualize,
.icongroup.selected .icon-communicate {
/* IE 9 */
/* Safari */
transform: scale(1.1, 1.1);
transition: all 0.2s ease-in-out;
}
.icongroup.selected .title {
font-family: Lato, sans-serif;
font-weight: 400;
color: #56c28c;
transition: all 0.7s ease-in-out;
}
.icongroup.selected img path {
fill: #56c28c;
}
.icongroup.selected .iconcontent {
opacity: 1;
}
@media all and (max-width: 1200px) {
.curvesection {
transform: scale(0.9, 0.9);
margin-top: 20px;
}
.featuredetails {
padding-bottom: 50px;
}
}
@media all and (max-width: 1100px) {
.curvesection {
transform: scale(0.8, 0.8);
margin-top: 20px;
}
.featuredetails {
padding-bottom: 50px;
}
}
@media all and (max-width: 900px) {
.curvesection {
transform: scale(0.65, 0.65);
margin-top: 0;
}
.featuredetails {
padding-bottom: 10px;
}
.icongroup .iconcontent .ic_title {
font-size: 18px;
}
.icongroup .iconcontent .ic_desc {
font-size: 18px;
}
}
/* Mobile */
@media all and (max-width: 768px) {
.fdtitle {
padding: 0 30px !important;
padding-bottom: 35px !important;
}
.curvesection {
margin-top: 50px;
transform: scale(1.1, 1.1);
margin-bottom: 260px;
}
.featuredetails.resp {
/* IE 9 */
/* Safari */
transform: none;
margin-top: 20px;
}
.img-curve-lg {
display: none;
}
.img-curve-mobile {
display: block;
}
.icongroup svg {
height: 30px;
width: 30px;
-webkit-animation: scatter-shadow 2s infinite;
animation: scatter-shadow 2s infinite;
border-radius: 50%;
}
.icongroup.selected img,
.icongroup.mobileviewselected img {
-webkit-animation: none;
}
.icongroup .title {
font-size: 13px;
letter-spacing: 0.5px;
font-weight: 400;
padding-bottom: 8px;
width: 75px;
margin: 0 auto;
color: #666;
background-color: white;
}
.blog-post {
margin-top: 20px;
padding: 0 10px !important;
}
.blog-content a,
.blog-content a:hover {
word-break: break-all;
}
.icongroup.connect {
top: -37px;
left: -70px;
}
.icongroup.store {
top: -37px;
left: 40px;
}
.icongroup.prepare {
top: 45px;
left: 140px;
}
.icongroup.prepare svg {
background: #fff;
}
.icongroup.discover {
top: 98px;
left: 40px;
}
.icongroup.analyze {
top: 175px;
left: -70px;
}
.icongroup.analyze svg {
background: #fff;
}
.icongroup.visualize {
top: 240px;
left: 40px;
}
.icongroup.communicate {
top: 240px;
left: 140px;
}
.icongroup .iconcontent {
width: 305px;
}
.icongroup .iconcontent .ic_title {
font-size: 14px;
}
.icongroup .iconcontent .ic_desc {
font-size: 14px;
background: inherit;
margin: 0 -25px;
padding: 0 25px;
z-index: 1 !important;
position: relative;
}
.icongroup.connect .iconcontent {
left: 29px;
top: 357px;
}
.icongroup.store .iconcontent {
left: -81px;
top: 357px;
}
.icongroup.prepare .iconcontent {
left: -181px;
top: 275px;
}
.icongroup.discover .iconcontent {
left: -81px;
top: 222px;
}
.icongroup.analyze .iconcontent {
left: 29px;
top: 145px;
}
.icongroup.visualize .iconcontent {
left: -81px;
top: 80px;
}
.icongroup.communicate .iconcontent {
left: -181px;
top: 80px;
}
.icongroup .iconcontent .ic_connector {
border: 2px dashed #56c28c;
position: absolute;
top: 70px;
z-index: 0;
}
.icongroup.connect .iconcontent .ic_connector {
left: -19px;
width: 47px;
top: -319px;
height: 399px;
border-right-width: 0;
}
.icongroup.store .iconcontent .ic_connector {
left: 176px;
width: 143px;
top: -328px;
height: 401px;
border-left-width: 0;
}
.icongroup.prepare .iconcontent .ic_connector {
left: 280px;
width: 42px;
top: -239px;
height: 323px;
border-left-width: 0;
}
.icongroup.discover .iconcontent .ic_connector {
left: -25px;
width: 166px;
top: -196px;
height: 300px;
border-right-width: 0;
}
.icongroup.analyze .iconcontent .ic_connector {
left: -15px;
width: 36px;
top: -108px;
height: 193px;
border-right-width: 0;
}
.icongroup.visualize .iconcontent .ic_connector {
left: 154px;
width: 0;
top: -24px;
height: 24px;
border-right-width: 0;
border-bottom-width: 0;
}
.icongroup.communicate .iconcontent .ic_connector {
left: 255px;
width: 2px;
top: -24px;
height: 24px;
border-left-width: 0;
border-bottom-width: 0;
}
.icongroup.mobileviewselected svg {
/* IE 9 */
/* Safari */
transform: scale(1.1, 1.1);
transition: all 0.2s ease-in-out;
}
.icongroup.mobileviewselected .title {
font-family: Lato, sans-serif;
font-weight: bold;
color: #56c28c;
transition: all 0.7s ease-in-out;
}
.icongroup.mobileviewselected svg path {
fill: #56c28c;
}
.icongroup.mobileviewselected .iconcontent {
opacity: 1;
}
}
@media all and (max-width: 499px) {
.curvesection {
transform: scale(1, 1);
margin-bottom: 220px !important;
}
}
@media all and (max-width: 320px) {
.curvesection {
transform: scale(0.8, 0.8);
margin-top: 30px;
margin-bottom: 100px;
}
}
/*====================================*/
/* Wrangel vs Pro Section*/
/*====================================*/
.wrapper {
display: grid;
background-color: #f9f9f9;
background-image: url(images/pro-wrangel-background.svg);
background-position-y: 100px;
background-repeat: no-repeat;
background-size: 100%;
grid-template-columns: auto repeat(20, 64px) auto;
grid-template-rows: repeat(45, 16px);
}
@media (min-width: 2500px) {
.wrapper {
grid-template-columns: repeat(40, 1fr);
grid-template-rows: repeat(41, 1fr);
background-image: url(images/big-screen-pro-wrangel-background.svg);
background-position-y: 292px;
}
}
@media (min-width: 767px) and (max-width: 1260px) {
.wrapper {
grid-template-columns: auto repeat(20, 38.4px) auto;
grid-template-rows: repeat(49, 14px);
}
}
.wrangel-v-pro .header {
grid-row-start: 4;
grid-row-end: 7;
grid-column-start: 8;
grid-column-end: 16;
font-weight: 600;
font-style: italic;
font-size: 25px;
text-align: center;
}
@media (min-width: 2500px) {
.wrangel-v-pro .header {
grid-row-start: 4;
grid-row-end: 7;
grid-column-start: 13;
grid-column-end: 29;
}
}
@media (min-width: 767px) and (max-width: 1260px) {
.wrangel-v-pro .header {
grid-column-start: 6;
grid-column-end: 18;
}
}
.wrangel-v-pro .wrangel-mammoth {
grid-row-start: 9;
grid-row-end: 19;
grid-column-start: 7;
grid-column-end: 11;
z-index: 3;
}
@media all and (min-width: 768px) {
.wrangel-v-pro .wrangel-mammoth:hover ~ .wrangel-description {
box-shadow: 0 3px 4px 3px rgba(57, 61, 62, 0.2);
cursor: pointer;
}
.wrangel-v-pro .wrangel-mammoth:hover {
cursor: pointer;
}
}
@media (min-width: 2500px) {
.wrangel-v-pro .wrangel-mammoth {
grid-row-start: 9;
grid-row-end: 19;
grid-column-start: 15;
grid-column-end: 19;
height: 184px;
}
}
@media (min-width: 767px) and (max-width: 1260px) {
.wrangel-v-pro .wrangel-mammoth {
grid-row-start: 10;
grid-column-start: 5;
grid-column-end: 11;
}
}
.wrangel-v-pro .wrangel-description {
grid-column-start: 6;
grid-column-end: 11;
grid-row-start: 16;
grid-row-end: 34;
transition: box-shadow 0.5s ease-in-out;
z-index: 2;
text-align: center;
padding: 22% 11% 10% 11%;
border-radius: 9px;
background-color: white;
}
@media all and (min-width: 768px) {
.wrangel-v-pro .wrangel-description:hover {
box-shadow: 0 3px 4px 3px rgba(57, 61, 62, 0.2);
cursor: pointer;
}
}
@media (min-width: 2500px) {
.wrangel-v-pro .wrangel-description {
grid-row-start: 14;
grid-row-end: 29;
grid-column-start: 13;
grid-column-end: 20;
}
}
@media (min-width: 767px) and (max-width: 1260px) {
.wrangel-v-pro .wrangel-description {
grid-column-start: 4;
grid-column-end: 11;
grid-row-start: 18;
grid-row-end: 36;
font-size: 12px;
}
}
.wrangel-v-pro .pro-mammoth {
grid-row-start: 9;
grid-row-end: 19;
grid-column-start: 14;
grid-column-end: 18;
z-index: 2;
}
@media all and (min-width: 768px) {
.wrangel-v-pro .pro-mammoth:hover ~ .pro-description {
box-shadow: 0 3px 4px 3px rgba(57, 61, 62, 0.2);
cursor: pointer;
}
.wrangel-v-pro .pro-mammoth:hover {
cursor: pointer;
}
}
@media (min-width: 2500px) {
.wrangel-v-pro .pro-mammoth {
grid-row-start: 9;
grid-row-end: 19;
grid-column-start: 24;
grid-column-end: 29;
height: 186px;
}
}
@media (min-width: 767px) and (max-width: 1260px) {
.wrangel-v-pro .pro-mammoth {
grid-row-start: 10;
grid-column-start: 14;
grid-column-end: 18;
}
}
.wrangel-v-pro .pro-description {
grid-row-start: 16;
grid-row-end: 34;
grid-column-start: 13;
grid-column-end: 18;
z-index: 1;
text-align: center;
background-color: white;
padding: 22% 11% 10% 11%;
border-radius: 9px;
transition: box-shadow 0.5s ease-in-out;
}
@media all and (min-width: 768px) {
.wrangel-v-pro .pro-description:hover {
box-shadow: 0 3px 4px 3px rgba(57, 61, 62, 0.2);
cursor: pointer;
}
}
@media (min-width: 2500px) {
.wrangel-v-pro .pro-description {
grid-row-start: 14;
grid-row-end: 29;
grid-column-start: 22;
grid-column-end: 29;
}
}
@media (min-width: 767px) and (max-width: 1260px) {
.wrangel-v-pro .pro-description {
grid-row-start: 18;
grid-row-end: 36;
grid-column-start: 13;
grid-column-end: 20;
font-size: 12px;
}
}
.wrangel-v-pro .titles {
width: 100%;
}
.wrangel-v-pro .description-sub-header {
padding: 20px 0 20px 0;
font-size: 16px;
font-weight: 600;
color: #565c5e;
font-style: italic;
}
.wrangel-v-pro .wrangel-v-pro-features {
grid-column-start: 5;
grid-column-end: 19;
grid-row-start: 37;
grid-row-end: 47;
background-color: #deede5;
text-align: center;
}
@media (min-width: 2500px) {
.wrangel-v-pro .wrangel-v-pro-features {
grid-column-start: 12;
grid-column-end: 30;
grid-row-start: 33;
grid-row-end: 40;
}
.wrangel-v-pro .mobile-connect {
right: 23px !important;
grid-row-start: 35 !important;
grid-column-start: 12 !important;
}
.wrangel-v-pro .mobile-store {
right: 12px !important;
grid-row-start: 35 !important;
grid-column-start: 15 !important;
}
.wrangel-v-pro .mobile-prepare {
left: 29px !important;
grid-row-start: 35 !important;
grid-column-start: 17 !important;
}
.wrangel-v-pro .mobile-discover {
right: 34px !important;
grid-row-start: 35 !important;
grid-column-start: 21 !important;
}
.wrangel-v-pro .mobile-analyse {
right: 26px !important;
grid-row-start: 35 !important;
grid-column-start: 24 !important;
}
.wrangel-v-pro .mobile-visualise {
left: 28px !important;
grid-row-start: 35 !important;
grid-column-start: 26 !important;
}
.wrangel-v-pro .mobile-export {
grid-row-start: 38 !important;
grid-column-start: 26 !important;
bottom: 17px !important;
left: 27px !important;
}
.wrangel-v-pro .mobile-report {
right: 23px !important;
grid-row-start: 35 !important;
grid-column-start: 30 !important;
}
.wrangel-v-pro .wrangel-v-pro-features .wrangel-export-curve {
left: 261px !important;
top: -13px !important;
}
}
@media (min-width: 767px) and (max-width: 1260px) {
.wrangel-v-pro .wrangel-v-pro-features {
grid-column-start: 3;
grid-column-end: 21;
grid-row-start: 41;
grid-row-end: 50;
}
.wrangel-v-pro .mobile-connect {
right: 14px !important;
grid-row-start: 43 !important;
grid-column-start: 3 !important;
}
.wrangel-v-pro .mobile-store {
left: -8px !important;
grid-row-start: 43 !important;
grid-column-start: 6 !important;
}
.wrangel-v-pro .mobile-prepare {
left: 20px !important;
grid-row-start: 43 !important;
grid-column-start: 8 !important;
}
.wrangel-v-pro .mobile-discover {
right: 23px !important;
grid-row-start: 43 !important;
grid-column-start: 12 !important;
}
.wrangel-v-pro .mobile-analyse {
right: -11px !important;
grid-row-start: 43 !important;
grid-column-start: 14 !important;
}
.wrangel-v-pro .mobile-visualise {
left: 4px !important;
grid-row-start: 43 !important;
grid-column-start: 17 !important;
}
.wrangel-v-pro .mobile-export {
grid-row-start: 46 !important;
grid-column-start: 17 !important;
bottom: 0 !important;
}
.wrangel-v-pro .mobile-report {
left: 6px !important;
grid-row-start: 43 !important;
grid-column-start: 20 !important;
}
.wrangel-v-pro .wrangel-v-pro-features .wrangel-export-curve {
left: 155px !important;
}
}
.wrangel-v-pro .wrangel-v-pro-features .pro-features {
display: none;
width: 100%;
transition: opacity 0.5s ease-in-out;
opacity: 0;
}
@media (min-width: 2500px) {
.wrangel-v-pro .wrangel-v-pro-features .pro-features {
width: 97% !important;
top: -23px !important;
}
}
.wrangel-v-pro .wrangel-v-pro-features .default-features {
width: 100%;
}
.wrangel-v-pro .wrangel-v-pro-features .wrangel-features {
display: none;
opacity: 0;
transition: opacity 0.5s ease-in-out;
width: 100%;
}
.wrangel-v-pro .wrangel-v-pro-features .wrangel-export-curve {
opacity: 0;
position: relative;
display: none;
left: 206px;
transition: opacity 0.5s ease-in-out;
top: -8px;
width: 13%;
}
.wrangel-v-pro .mobile-connect,
.wrangel-v-pro .mobile-store,
.wrangel-v-pro .mobile-prepare,
.wrangel-v-pro .mobile-discover,
.wrangel-v-pro .mobile-analyse,
.wrangel-v-pro .mobile-export,
.wrangel-v-pro .mobile-visualise,
.wrangel-v-pro .mobile-report {
transition: all 0.5s ease-in-out;
color: #636363;
font-weight: 600;
position: relative;
}
.wrangel-v-pro .mobile-connect {
right: 23px;
grid-row-start: 39;
grid-column-start: 5;
}
.wrangel-v-pro .mobile-store {
left: 6px;
grid-row-start: 39;
grid-column-start: 7;
}
.wrangel-v-pro .mobile-prepare {
left: 20px;
grid-row-start: 39;
grid-column-start: 9;
}
.wrangel-v-pro .mobile-discover {
right: 23px;
grid-row-start: 39;
grid-column-start: 12;
}
.wrangel-v-pro .mobile-analyse {
right: 1px;
font-weight: 600;
grid-row-start: 39;
grid-column-start: 14;
}
.wrangel-v-pro .mobile-export {
grid-row-start: 43;
opacity: 0;
grid-column-start: 16;
left: 16px;
bottom: 5px;
}
.wrangel-v-pro .mobile-visualise {
left: 14px;
grid-row-start: 39;
grid-column-start: 16;
}
.wrangel-v-pro .mobile-report {
right: 23px;
grid-row-start: 39;
grid-column-start: 19;
}
.wrangel-v-pro .wrangel-v-pro-features .wrangel-features-mobile {
display: none;
width: 100%;
}
.wrangel-v-pro .wrangel-v-pro-features .pro-features-mobile {
display: none;
width: 100%;
}
/*Features Mobile*/
@media all and (max-width: 768px) {
.wrapper {
background-image: url(images/stretched-pro-wrangel-background.svg);
background-color: white;
background-position-y: 140px;
background-repeat: no-repeat;
background-size: 143%;
grid-template-columns: auto repeat(24, 15px) auto;
grid-template-rows: repeat(68, 10px);
margin-top: 20px;
}
.wrangel-v-pro .header {
grid-row-start: 3;
grid-row-end: 7;
grid-column-start: 8;
grid-column-end: 20;
font-weight: 600;
font-style: italic;
font-size: 19px;
}
.wrangel-v-pro .wrangel-mammoth {
grid-row-start: 12;
grid-row-end: 13;
grid-column-start: 10;
grid-column-end: 13;
-webkit-transition: opacity 1.5s ease-in-out;
-moz-transition: opacity 1.5s ease-in-out;
-ms-transition: opacity 1.5s ease-in-out;
-o-transition: opacity 1.5s ease-in-out;
z-index: 3;
width: 128px;
}
.wrangel-v-pro .wrangel-description {
grid-column-start: 3;
grid-column-end: 25;
grid-row-start: 20;
grid-row-end: 49;
z-index: 2;
padding: 22% 11% 10% 11%;
border-radius: 9px;
background-color: white;
box-shadow: 3px 3px 4px 2px rgba(155, 194, 173, 0.2);
transition: box-shadow 0.5s ease-in-out;
}
.wrangel-v-pro .pro-description {
grid-column-start: 3;
grid-column-end: 25;
grid-row-start: 20;
grid-row-end: 49;
display: none;
z-index: 1;
padding: 20% 11% 10% 11%;
border-radius: 9px;
background-color: white;
box-shadow: 3px 3px 4px 2px rgba(155, 194, 173, 0.2);
transition: box-shadow 0.5s ease-in-out;
}
.wrangel-v-pro .pro-mammoth {
grid-row-start: 12;
grid-row-end: 13;
grid-column-start: 10;
grid-column-end: 13;
display: none;
z-index: 2;
width: 160px;
transition: opacity 1.5s ease-in-out;
}
.wrangel-v-pro .default-features {
display: none !important;
}
.wrangel-v-pro .wrangel-v-pro-features .wrangel-export-curve {
display: none !important;
}
.wrangel-v-pro .wrangel-v-pro-features .wrangel-features {
display: none !important;
}
.wrangel-v-pro .wrangel-v-pro-features .pro-features {
display: none !important;
}
.wrangel-v-pro .wrangel-v-pro-features {
display: block;
grid-row-start: 56;
grid-row-end: 62;
grid-column-start: 3;
grid-column-end: 25;
}
.wrangel-v-pro .mobile-connect {
display: block;
position: unset;
grid-row-start: 60;
grid-row-end: 61;
grid-column-start: 2;
grid-column-end: 6;
}
.wrangel-v-pro .mobile-store {
display: block;
position: unset;
grid-row-start: 53;
grid-row-end: 54;
grid-column-start: 4;
grid-column-end: 8;
}
.wrangel-v-pro .mobile-prepare {
display: block;
position: unset;
grid-row-start: 62;
grid-row-end: 63;
grid-column-start: 8;
grid-column-end: 11;
}
.wrangel-v-pro .mobile-discover {
display: block;
position: unset;
grid-row-start: 53;
grid-row-end: 54;
grid-column-start: 12;
grid-column-end: 15;
}
.wrangel-v-pro .mobile-analyse {
display: block;
position: unset;
grid-row-start: 62;
grid-row-end: 63;
grid-column-start: 17;
grid-column-end: 21;
}
.wrangel-v-pro .mobile-export {
display: none;
}
.wrangel-v-pro .mobile-visualise {
display: block;
position: unset;
grid-row-start: 53;
grid-row-end: 54;
grid-column-start: 21;
grid-column-end: 23;
-webkit-transition: color 1.5s ease-in-out;
-moz-transition: color 1.5s ease-in-out;
-ms-transition: color 1.5s ease-in-out;
-o-transition: color 1.5s ease-in-out;
color: white;
}
.wrangel-v-pro .mobile-report {
display: block;
position: unset;
grid-row-start: 60;
grid-row-end: 61;
grid-column-start: 23;
grid-column-end: 24;
-webkit-transition: color 1.5s ease-in-out;
-moz-transition: color 1.5s ease-in-out;
-ms-transition: color 1.5s ease-in-out;
-o-transition: color 1.5s ease-in-out;
color: white;
}
.wrangel-v-pro .wrangel-v-pro-features .wrangel-features-mobile {
display: block;
-webkit-transition: opacity 1.5s ease-in-out;
-moz-transition: opacity 1.5s ease-in-out;
-ms-transition: opacity 1.5s ease-in-out;
-o-transition: opacity 1.5s ease-in-out;
}
.wrangel-v-pro .wrangel-v-pro-features .pro-features-mobile {
display: block;
-webkit-transition: opacity 1.5s ease-in-out;
-moz-transition: opacity 1.5s ease-in-out;
-ms-transition: opacity 1.5s ease-in-out;
-o-transition: opacity 1.5s ease-in-out;
}
}
/*====================================*/
/* Carousel Section*/
/*====================================*/
.screenshots {
background-color: #f0f7f3;
display: grid;
grid-template-columns: repeat(128, 1fr);
grid-template-rows: auto;
text-align: center;
}
.ss_container {
grid-column-start: 24;
grid-column-end: 104;
grid-row-start: 1;
grid-row-end: 50;
}
@media all and (max-width: 768px) {
.ss_container {
grid-column-start: 3 !important;
grid-column-end: 127 !important;
grid-row-start: 1 !important;
grid-row-end: 50 !important;
}
}
@media (min-width: 1920px) and (max-width: 2600px) {
.ss_container {
grid-column-start: 32;
grid-column-end: 98;
}
}
.ss_container .slide {
width: 100%;
}
.ss_container .slide img {
width: 100%;
}
.slideshowtext {
padding-bottom: 40px;
letter-spacing: 0.5px;
position: relative;
}
.subtitle {
color: #1d3c29;
font-size: 16px;
font-weight: 400;
}
/* .slideshowtext span{margin: 0 10px;} */
.slideshowtext span::after {
content: " . ";
color: #999;
}
.slideshowtext span:last-child::after {
content: none;
}
/* .slideshowtext .selected {color: #56c28c;} */
.carousel__nav {
grid-column-start: 42;
grid-column-end: 86;
grid-row-start: 46;
grid-row-end: 54;
padding-bottom: 10px;
height: 70px;
}
@media all and (min-width: 767px) and (max-width: 1000px) {
.carousel__nav {
grid-row-start: 46;
grid-row-end: 54;
height: 60px;
}
}
@media all and (max-width: 768px) {
.carousel__nav {
grid-column-start: 24;
grid-column-end: 106;
grid-row-start: 46;
grid-row-end: 54;
}
}
.screenshots .arrow {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.screenshots .arrow:hover {
cursor: pointer;
}
@media (min-width: 1920px) and (max-width: 2600px) {
.screenshots .arrow {
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
}
}
.screenshots .left-arrow {
grid-column-start: 20;
grid-column-end: 22;
grid-row-start: 21;
grid-row-end: 23;
border-right: 10px solid #56c28c;
}
@media (min-width: 1920px) and (max-width: 2600px) {
.screenshots .left-arrow {
grid-column-start: 28;
grid-column-end: 30;
border-right: 15px solid #56c28c;
}
}
.carousel__nav__product {
display: none;
}
#products {
position: relative;
top: -45px;
}
#features {
position: relative;
top: -70px;
}
@media all and (max-width: 768px) {
.carousel__nav__product {
display: block;
grid-column-start: 13;
grid-column-end: 15;
grid-row-start: 47;
grid-row-end: 48;
padding-bottom: 10px;
}
.w-dot {
margin-right: 25% !important;
}
}
.screenshots .right-arrow {
grid-column-start: 107;
grid-column-end: 109;
grid-row-start: 21;
grid-row-end: 23;
border-left: 10px solid #56c28c;
}
@media (min-width: 1920px) and (max-width: 2600px) {
.screenshots .right-arrow {
grid-column-start: 100;
grid-column-end: 101;
border-left: 15px solid #56c28c;
}
}
@media all and (max-width: 768px) {
.arrow {
border-top: 7px solid transparent !important;
border-bottom: 7px solid transparent !important;
}
.screenshots .right-arrow {
grid-column-start: 93 !important;
position: relative;
grid-column-end: 102;
grid-row-start: 45 !important;
grid-row-end: unset !important;
bottom: -7px;
border-left: 7px solid #56c28c !important;
}
.screenshots .left-arrow {
grid-column-start: 35 !important;
grid-column-end: unset !important;
position: relative;
bottom: -7px;
grid-row-start: 45 !important;
grid-row-end: unset !important;
border-right: 7px solid #56c28c;
}
}
.screenshots .dot,
.carousel__nav__product .dot {
cursor: pointer;
width: 8px;
height: 8px;
background-color: #ccc;
margin: 0 2%;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
@media (min-width: 1920px) and (max-width: 2600px) {
.screenshots .dot {
width: 12px;
height: 12px;
}
}
.screenshots .dot.active,
.carousel__nav__product .dot.active {
background-color: #56c28c;
}
/* Mobile */
@media all and (max-width: 768px) {
.screenshots {
padding: 0 0 30px 0;
background-color: #f5f5f5;
}
.slideshowtext {
padding-bottom: 25px !important;
}
.carousel__nav {
margin: -10px 0 0 0;
height: 20px;
}
.ss_container .slide img {
width: 100%;
padding: 55px 0 0 0;
max-width: 410px;
}
.dot {
height: 6px !important;
width: 6px !important;
}
.carousel__nav .arrow img {
height: 20px;
margin-bottom: -5px;
}
}
/*====================================*/
/* About Section*/
/*====================================*/
.about {
width: 100%;
text-align: center;
font-size: 16px;
line-height: 22px;
font-weight: 400;
}
.about .about-us {
background-color: #fff;
margin-top: 100px;
margin-bottom: 100px;
}
@media all and (max-width: 768px) {
.about .about-us {
font-size: 13px;
line-height: 1.4;
}
}
.about .about-us .header,
.about-mammoth .header {
font-size: 40px;
padding-bottom: 40px;
font-family: Lato-Light, Lato, sans-serif;
color: #393d3e;
}
.about .about-us .description,
.about-mammoth .description {
font-size: 25px;
line-height: 1.4;
font-family: Lato-Light, Lato, sans-serif;
color: #393d3e;
margin-bottom: 30px;
}
.about .about-us .header {
font-size: 25px;
font-weight: 600;
padding-bottom: 40px;
}
.about .mammoth-contact-blog-image {
background-image: url(images/pw-normal.svg);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 0;
padding-top: 28.546875%;
}
.about-mammoth .about-image {
background: url('data:image/svg+xml;utf8,')
no-repeat center;
height: 321px;
margin-top: 60px;
}
.about-mammoth .values {
font-size: 15px;
font-family: Lato-Regular, Lato, sans-serif;
color: #9da3a4;
}
.about-mammoth .value-heading {
font-size: 35px;
font-family: Lato-Light, Lato, sans-serif;
color: #393d3e;
margin-bottom: 40px;
}
.about-mammoth .values .mt-20 {
margin-top: 20px;
}
.about-mammoth .innovation {
margin-bottom: 170px;
margin-top: 85px;
}
.about-mammoth .our-value {
margin-bottom: 170px;
}
.about-mammoth .about-header {
margin: 70px 0;
padding-bottom: 0;
}
.office .office-location-lon {
background: url('data:image/svg+xml;utf8,')
no-repeat;
height: 173px;
}
.office .office-location-ban {
background: url('data:image/svg+xml;utf8,')
no-repeat;
height: 173px;
}
.office {
background-color: #f0f7f3;
padding: 80px 160px;
}
.office h4 {
color: #9da3a4;
font-size: 35px;
font-family: Lato-Light, Lato, sans-serif;
}
.office p {
color: #9da3a4;
font-size: 15px;
line-height: 2.2;
font-family: Laot-Regular, Lato, sans-serif;
}
.office h3 {
font-size: 41px;
font-family: Lato-Light, Lato, sans-serif;
color: #393d3e;
margin-bottom: 80px;
}
@media (min-width: 1920px) and (max-width: 2600px) {
.about .mammoth-contact-blog-image {
background-image: url(images/big-screen-mammoth-contact-blog.svg);
padding-top: 12.02247%;
}
}
@media all and (max-width: 768px) {
.about .mammoth-contact-blog-image {
background-image: url(images/pw-mobile.svg);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
padding-top: 38.546875%;
}
.about .about-us .header {
font-size: 19px;
font-style: italic;
padding-bottom: 30px;
}
.office {
padding: 80px 60px !important;
}
}
/*====================================*/
/* Signup Modal*/
/*====================================*/
.signup_modal {
position: fixed;
left: 0;
top: -1000;
width: 100%;
height: 100%;
overflow: auto;
background: rgba(74, 74, 74, 0.4);
z-index: 1000;
padding: 15px;
}
.signup_modal.show {
top: 0;
}
.modal__box {
padding: 15px 54px 21px 54px;
opacity: 0;
position: relative;
z-index: 10000;
left: 50%;
max-width: 766px;
width: 100%;
top: 10%;
background: #fff;
border-radius: 4.4px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
transform: translateX(-50%);
transition: opacity 0.3s ease-in-out;
}
.signup_modal.show .modal__box {
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
.remove-btn {
position: absolute;
top: 15px;
right: 15px;
}
.remove-btn .close-btn {
cursor: pointer;
}
.remove-btn .close-btn:hover #close-btn {
stroke: #777;
}
.modal_logo {
padding-top: 10px;
}
.modal_logo img {
height: 40px;
}
.close {
color: #aaa;
float: right;
font-size: 1.75em;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.signup-ques {
font-size: 14px;
text-transform: uppercase;
color: #333;
letter-spacing: 1px;
padding-top: 30px;
}
.signup-choices {
background: #f9f9f9;
margin-top: 32px;
border: 1px solid #eee;
border-radius: 5px;
}
.signup-choice__list {
position: relative;
}
.signup-choice__item {
text-align: center;
padding: 5px 30px;
font-size: 13px;
font-weight: 300;
flex-grow: 1;
line-height: 20px;
cursor: pointer;
color: #999;
}
.signup-choice__item:hover {
color: #333;
}
.signup-choice__item.active {
color: #333;
background: #fff;
}
.signup-choice__list .activebox {
border: 1px solid #56c28c;
box-shadow: 1px 0 10px #eee;
border-radius: 5px;
color: #333;
cursor: default;
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 210px;
transition: left 0.3s ease-in-out;
}
.signup-choice__list .activebox.first + li {
color: #333;
background-color: #fff;
}
.signup-choice__list .activebox.second + li + li {
color: #333;
background-color: #fff;
}
.signup-choice__list .activebox.third + li + li + li {
color: #333;
background-color: #fff;
}
.signup-choice__list .activebox.second {
left: 210px;
width: 220px;
}
.signup-choice__list .activebox.third {
left: 430px;
width: 227px;
}
.signup-input {
width: 100%;
text-align: center;
margin-top: 20px;
display: inline-block;
position: relative;
}
.signup-input .form_item {
padding: 10px;
font-size: 12px;
font-weight: 300;
margin: 0 auto;
transition: max-height 0.3s ease-in-out;
opacity: 1;
z-index: -1;
max-height: 0;
top: -1000px;
position: absolute;
}
.signup-input .form_item.active {
position: relative;
top: 0;
opacity: 1;
z-index: 1000 !important;
transition: max-height 0.3s ease-in-out;
}
.signup-input .form_item.first.active {
max-height: 0;
padding-bottom: 0;
margin-bottom: 25px;
}
.signup-input .form_item.second.active {
max-height: 300px;
margin-top: 40px;
margin-bottom: -10px;
}
.signup-input .form_item.third.active {
max-height: 300px;
margin-top: 15px;
margin-bottom: -10px;
}
.signup-input .form_item .form-txt {
border: transparent;
border-bottom: 1px solid #ccc;
padding: 3px 10px;
margin: 0 5px;
min-width: 280px;
font-size: 13px;
}
.signup-input .form_item .form-txt.othernotes {
height: 50px;
width: 100%;
background-color: #f9f9f9;
border-radius: 4px;
border: transparent;
}
.signup-input .form_item .form-txt.error {
border: 1px solid red !important;
}
.signup-input .form_item .form-dd {
padding: 3px 10px;
max-width: 190px;
margin: 0 5px;
background-color: #f9f9f9;
border-radius: 4px;
border: 1px solid #eee;
}
.signup-input .form_item .form-dd.error {
color: red;
}
.signup-btn {
margin: 20px auto;
margin-top: 20px;
text-align: center;
}
.signup-btn .btn {
background: #e6e6e6;
}
.signup-btn .btn:active,
.signup-btn .btn.active {
background: #56c28c;
}
.select-container {
text-align: center;
margin-top: 25px;
display: none;
}
.select__item-list {
position: relative;
padding: 9px 42px;
cursor: pointer;
font-size: 12px;
border: 1px solid #56c28c;
border-radius: 2px;
background: transparent;
background: url(images/arrow.png) no-repeat;
background-position: 95% 15px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.select__item-list:focus {
outline: none;
}
@media all and (max-width: 768px) {
.modal__box {
padding: 10px;
}
.signup_modal {
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}
.remove-btn {
top: 15px;
right: 15px;
}
.remove-btn .close-btn {
height: 12px;
width: 13px;
}
.modal_logo img {
width: 149px;
}
.signup-choices {
display: none;
}
.signup-ques {
font-size: 12px;
color: #000;
font-weight: bold;
}
.signup-input {
margin-top: 10px;
}
.signup-input .form-control {
padding: 0 12px 10px 12px;
margin-top: 20px;
font-size: 12px;
font-weight: 300;
border: 0;
border-bottom: 1px solid #bcbcbc;
}
.submit-btn {
padding: 12px 60px;
margin-top: 30px;
}
.submit-btn:active {
background: #56c28c;
}
.select-container {
display: block;
}
.form_item {
max-width: 400px;
}
.form_item .form-txt {
margin-bottom: 10px !important;
min-width: 230px !important;
}
.form_item .form-dd {
margin-bottom: 10px !important;
min-width: 230px !important;
}
.signup-input .form_item.first.active {
max-height: 0;
padding-bottom: 40px;
margin-bottom: 25px;
}
.signup-input .form_item.second.active {
max-height: 300px;
margin-top: 0;
margin-bottom: -10px;
}
.signup-input .form_item.third.active {
max-height: 300px;
margin-top: 5px;
margin-bottom: -15px;
}
.select__item-list {
padding: 9px 22px;
}
.signup-input .form_item .form-txt.othernotes {
height: 70px;
}
}
/*====================================*/
/* Plans and Pricing*/
/*====================================*/
.plans {
padding-top: 85px;
}
.card-container {
margin-top: 70px;
padding: 0 30px;
display: flex;
justify-content: space-between;
}
.card {
height: 550px;
position: relative;
left: 0;
display: inline-block;
}
.card-background {
position: absolute;
bottom: 0;
z-index: -1;
}
.card-background1 {
left: -30px;
}
.card-background2 {
right: -30px;
}
.card__inner {
height: 550px;
background: #f5f5f5;
width: 390px;
position: relative;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.24);
border-radius: 4px;
}
.card__btn {
position: absolute;
width: 100%;
bottom: -23px;
}
.card__btn .primary-btn {
padding: 18px 68px;
font-size: 22px;
font-weight: 700;
}
.content {
background: #83d3aa;
margin-top: 140px;
height: 800px;
}
@media all and (max-width: 768px) {
/*====================================*/
/* Plans and Pricing*/
/*====================================*/
.plans {
padding-top: 89px;
}
.col {
padding: 16px;
}
.card-container {
padding: 0 0;
}
.card-background {
display: none;
}
.card__inner {
height: 330px;
width: 215px;
}
.card__btn {
display: none;
}
.content {
display: none;
}
}
.ui-loader {
display: none;
}
.swipehide {
opacity: 0;
}
.swipeshow {
opacity: 1 !important;
}
.show-pro-mammoth {
opacity: 1 !important;
z-index: 3 !important;
}
.show-pro-description {
opacity: 1 !important;
z-index: 2 !important;
}
.fade {
color: white !important;
opacity: 1 !important;
}
.emphasise {
color: #393d3e !important;
font-weight: 600 !important;
}
.show-feature {
display: inline-block !important;
opacity: 1 !important;
}
.hide-feature {
display: none;
opacity: 1 !important;
}
.fix-body {
position: fixed;
}
.mobile-view {
display: none;
}
.mobile-view .pro-mammoth {
display: block;
}
.mobile-view .pro-description {
display: block;
}
.mobile-view .mobile-visualise {
color: #636363;
}
.mobile-view .mobile-report {
color: #636363;
}
/* Request Invite Success */
.error-msg {
font-family: Lato, sans-serif;
font-style: italic;
font-size: 20px;
margin: 40px 0 40px 0;
padding: 10px;
}
.sos-received {
margin-bottom: 20px;
}
@media all and (max-width: 768px) {
.sos-received {
width: 35vh;
}
}
#form-wrapper {
text-align: center;
}
.select-product {
box-shadow: inset 0 0 0 3px #56c28c !important;
cursor: default !important;
}
.compare-products {
transition: all 0.5s ease-in-out;
top: 20px;
position: relative;
font-weight: 300;
font-size: 14px;
letter-spacing: 0.5px;
color: #86a798;
text-align: center;
font-family: "crayon2", sans-serif;
}
.bg-wrapper {
background-color: #f0f7f3;
}
.wrangel-vh-pro .header {
font-weight: 600;
font-style: italic;
font-size: 24px;
text-align: center;
}
.left-6,
.right-6 {
text-align: center;
}
.left-6 .wrangel-description,
.right-6 .pro-description {
z-index: 1;
text-align: center;
background-color: white;
padding: 22% 11% 10% 11%;
border-radius: 9px;
transition: box-shadow 0.5s ease-in-out;
}
.left-6 .description-sub-header,
.right-6 .description-sub-header {
padding: 20px 0 20px 0;
font-size: 16px;
font-weight: 600;
color: #565c5e;
font-style: italic;
}
.wrangel-vh-pro .wrangel-mammoth {
position: relative;
top: 60px;
}
.wrangel-vh-pro .pro-mammoth {
position: relative;
top: 60px;
left: 30px;
}
.pro-description .titles,
.wrangel-description .titles {
width: 100%;
}
.wrangel-vh-pro .wrangel-v-pro-features .default-features {
width: 100%;
}
.wrangel-vh-pro .wrangel-v-pro-features .pro-features {
display: none;
width: 100%;
/* position: relative; */
/* top: -17px; */
transition: opacity 0.5s ease-in-out;
opacity: 0;
}
.wrangel-vh-pro .wrangel-v-pro-features .wrangel-features {
/* position: relative; */
display: none;
opacity: 0;
transition: opacity 0.5s ease-in-out;
/* top: -34px; */
width: 100%;
}
.wrangel-vh-pro .wrangel-v-pro-features .wrangel-export-curve {
opacity: 0;
position: absolute;
display: none;
right: 20.3%;
transition: opacity 0.5s ease-in-out;
width: 13%;
margin-top: -9px;
}
.wrangel-vh-pro .wrangel-v-pro-features .wrangel-features-mobile {
display: none;
width: 100%;
}
.wrangel-vh-pro .mobile-connect,
.wrangel-vh-pro .mobile-store,
.wrangel-vh-pro .mobile-prepare,
.wrangel-vh-pro .mobile-discover,
.wrangel-vh-pro .mobile-analyse,
.wrangel-vh-pro .mobile-export,
.wrangel-vh-pro .mobile-report,
.wrangel-vh-pro .mobile-visualise {
transition: all 0.5s ease-in-out;
font-weight: 600;
color: #636363;
position: absolute;
display: inline-block;
bottom: 20px;
}
/*Product-section-css*/
.wrangel-vh-pro .mobile-connect {
left: -24px;
}
.wrangel-vh-pro .mobile-store {
left: 15%;
}
.wrangel-vh-pro .mobile-prepare {
left: 31%;
}
.wrangel-vh-pro .mobile-discover {
left: 47%;
}
.wrangel-vh-pro .mobile-analyse {
left: 64%;
}
.wrangel-vh-pro .mobile-visualise {
left: 80%;
}
.wrangel-vh-pro .mobile-report {
left: 98%;
}
.right-6 {
top: -10px;
}
@media (min-width: 300px) {
.col-lg-3 {
flex: 0 0 92%;
max-width: 92%;
display: block;
float: none;
margin-left: 4%;
padding: 0;
}
.left-6,
.right-6 {
padding: 0 15px 0 15px;
}
.wrangel-vh-pro .pro-description,
.wrangel-vh-pro .wrangel-description {
box-shadow: 3px 3px 4px 2px rgba(155, 194, 173, 0.2);
transition: box-shadow 0.5s ease-in-out;
cursor: default;
height: auto;
}
.mobile-view {
display: block;
}
.wrangel-vh-pro .wrangel-v-pro-features .default-features,
.wrangel-vh-pro .wrangel-v-pro-features .wrangel-features,
.wrangel-vh-pro .wrangel-v-pro-features .wrangel-export-curve,
.wrangel-vh-pro .wrangel-v-pro-features .pro-features {
opacity: 0;
}
.compare-products {
display: none;
}
.desktop-view {
display: none;
}
.right-6 {
top: 90px;
}
.mobile-pro {
margin-top: 90px;
margin-bottom: -25px;
}
.wrangel-vh-pro .mobile-view .mobile-connect {
left: -24px;
bottom: -8px;
}
.wrangel-vh-pro .mobile-view .mobile-store {
left: 6%;
bottom: 60px;
}
.wrangel-vh-pro .mobile-view .mobile-prepare {
left: 22%;
bottom: -30px;
}
.wrangel-vh-pro .mobile-view .mobile-discover {
left: 41%;
bottom: 60px;
}
.wrangel-vh-pro .mobile-view .mobile-analyse {
left: 64%;
bottom: -30px;
}
.wrangel-vh-pro .mobile-view .mobile-visualise {
left: 80%;
bottom: 60px;
}
.wrangel-vh-pro .mobile-view .mobile-report {
left: 92%;
bottom: -8px;
}
.wrangel-v-pro-features {
position: relative;
top: 60px;
height: auto;
}
.mr15 {
margin-right: 9%;
}
.ml15 {
margin-left: 9%;
}
.mobile-pro .fade {
color: #636363 !important;
}
.mobile-wrangel .mobile-visualise,
.mobile-wrangel .mobile-report {
color: #fff;
}
}
@media (min-width: 576px) {
.col-lg-3 {
flex: 0 0 44%;
max-width: 44%;
display: block;
float: none;
margin-left: 27%;
padding: 0;
}
.ml15 {
margin-left: 25%;
}
.mr15 {
margin-right: 30%;
}
.wrangel-vh-pro .wrangel-v-pro-features .wrangel-features-mobile {
display: block;
width: 100%;
}
.wrangel-vh-pro .pro-description,
.wrangel-vh-pro .wrangel-description {
box-shadow: 3px 3px 4px 2px rgba(155, 194, 173, 0.2);
transition: box-shadow 0.5s ease-in-out;
cursor: default;
height: auto;
}
.mobile-view {
display: block;
}
.desktop-view {
display: none;
}
.wrangel-vh-pro .mobile-view .mobile-connect {
left: -24px;
bottom: 0;
}
.wrangel-vh-pro .mobile-view .mobile-store {
left: 6%;
bottom: 60px;
}
.wrangel-vh-pro .mobile-view .mobile-prepare {
left: 22%;
}
.wrangel-vh-pro .mobile-view .mobile-discover {
left: 41%;
bottom: 60px;
}
.wrangel-vh-pro .mobile-view .mobile-analyse {
left: 64%;
}
.wrangel-vh-pro .mobile-view .mobile-visualise {
left: 80%;
bottom: 60px;
}
.wrangel-vh-pro .mobile-view .mobile-report {
left: 92%;
bottom: 0;
}
.wrangel-v-pro-features {
position: relative;
top: 60px;
height: auto;
}
}
@media (max-width: 576px) {
.wrangel-vh-pro .wrangel-v-pro-features .wrangel-features-mobile {
display: block;
width: 100%;
}
}
@media (min-width: 768px) {
.offset-lg-3 {
margin-left: 17%;
}
.col-lg-3 {
flex: 0 0 30%;
max-width: 30%;
float: left;
padding: 0;
}
.wrangel-vh-pro .wrangel-v-pro-features .wrangel-features-mobile {
display: none;
width: 100%;
}
.right-6 {
margin-left: 77px;
top: -8px;
}
.wrangel-vh-pro .wrangel-v-pro-features .wrangel-export-curve {
right: 20.3%;
transition: opacity 0.5s ease-in-out;
width: 14%;
margin-top: -8px;
}
.wrangel-vh-pro .mobile-export {
opacity: 0;
left: 78.5%;
bottom: 6px !important;
}
.wrangel-vh-pro .pro-description,
.wrangel-vh-pro .wrangel-description {
box-shadow: none;
cursor: pointer;
height: 300px;
}
.wrangel-vh-pro .wrangel-v-pro-features .default-features {
width: 100%;
opacity: 1;
}
.mobile-view {
display: none;
}
.desktop-view {
display: block;
}
.wrangel-vh-pro .mobile-connect {
left: 0;
}
.wrangel-vh-pro .mobile-store {
left: 17%;
}
.wrangel-vh-pro .mobile-prepare {
left: 31%;
}
.wrangel-vh-pro .mobile-discover {
left: 47%;
}
.wrangel-vh-pro .mobile-analyse {
left: 63%;
}
.wrangel-vh-pro .mobile-visualise {
left: 78%;
}
.wrangel-vh-pro .mobile-report {
left: 95%;
}
.wrangel-v-pro-features {
position: relative;
top: 50px;
}
.compare-products {
display: block;
}
.ml15 {
margin-left: 9%;
}
.mr15 {
margin-right: 8%;
}
.wrangel-vh-pro .mobile-connect,
.wrangel-vh-pro .mobile-store,
.wrangel-vh-pro .mobile-prepare,
.wrangel-vh-pro .mobile-discover,
.wrangel-vh-pro .mobile-analyse,
.wrangel-vh-pro .mobile-export,
.wrangel-vh-pro .mobile-report,
.wrangel-vh-pro .mobile-visualise {
bottom: 20px;
}
}
@media (min-width: 992px) {
.offset-lg-3 {
margin-left: 20% !important;
}
.offset-lg-1 {
margin-left: 5%;
}
.col-lg-3 {
flex: 0 0 25%;
max-width: 25%;
float: left;
padding: 0;
}
.wrangel-vh-pro .wrangel-v-pro-features .wrangel-features-mobile {
display: none;
width: 100%;
}
.right-6 {
margin-left: 128px;
top: -10px;
}
.wrangel-vh-pro .mobile-export {
opacity: 0;
left: 79.5%;
}
.wrangel-vh-pro .pro-description:hover,
.wrangel-vh-pro .wrangel-description:hover {
box-shadow: 0 3px 4px 3px rgba(57, 61, 62, 0.2);
cursor: pointer;
}
.wrangel-vh-pro .pro-description,
.wrangel-vh-pro .wrangel-description {
height: auto;
}
.mobile-view {
display: none;
}
.desktop-view {
display: block;
}
.wrangel-vh-pro .mobile-connect {
left: 0;
}
.wrangel-vh-pro .mobile-store {
left: 17.5%;
}
.wrangel-vh-pro .mobile-prepare {
left: 32%;
}
.wrangel-vh-pro .mobile-discover {
left: 47.5%;
}
.wrangel-vh-pro .mobile-analyse {
left: 64%;
}
.wrangel-vh-pro .mobile-visualise {
left: 79%;
}
.wrangel-vh-pro .mobile-report {
left: 95%;
}
.wrangel-v-pro-features {
position: relative;
top: 50px;
}
.compare-products {
display: block;
}
.wrangel-vh-pro .wrangel-v-pro-features .wrangel-export-curve {
right: 20.3%;
transition: opacity 0.5s ease-in-out;
width: 13%;
margin-top: 0;
}
.mr15 {
margin-right: 14%;
}
.ml15 {
margin-left: 14%;
}
}
@media (min-width: 1400px) {
.offset-lg-3 {
margin-left: 26%;
}
.offset-lg-1 {
margin-left: 5%;
}
.col-lg-3 {
flex: 0 0 20%;
max-width: 20%;
float: left;
padding: 0;
}
.wrangel-vh-pro .wrangel-v-pro-features .wrangel-features-mobile {
display: none;
width: 100%;
}
.right-6 {
margin-left: 128px;
top: -10px;
}
.wrangel-vh-pro .mobile-export {
opacity: 0;
left: 80.5%;
bottom: -9% !important;
}
.wrangel-vh-pro .pro-description:hover,
.wrangel-vh-pro .wrangel-description:hover {
box-shadow: 0 3px 4px 3px rgba(57, 61, 62, 0.2);
cursor: pointer;
}
.mr15 {
margin-right: 22%;
}
.ml15 {
margin-left: 22%;
}
.wrangel-vh-pro .wrangel-v-pro-features .wrangel-export-curve {
right: 20.3%;
transition: opacity 0.5s ease-in-out;
width: 12.5%;
margin-top: -11px;
}
.mobile-view {
display: none;
}
.desktop-view {
display: block;
}
.wrangel-vh-pro .mobile-connect {
left: -24px;
}
.wrangel-vh-pro .mobile-store {
left: 15%;
}
.wrangel-vh-pro .mobile-prepare {
left: 31%;
}
.wrangel-vh-pro .mobile-discover {
left: 47%;
}
.wrangel-vh-pro .mobile-analyse {
left: 64%;
}
.wrangel-vh-pro .mobile-visualise {
left: 80%;
}
.wrangel-vh-pro .mobile-report {
left: 98%;
}
.wrangel-v-pro-features {
position: relative;
top: 40px;
}
.compare-products {
display: block;
}
.wrangel-vh-pro .mobile-connect,
.wrangel-vh-pro .mobile-store,
.wrangel-vh-pro .mobile-prepare,
.wrangel-vh-pro .mobile-discover,
.wrangel-vh-pro .mobile-analyse,
.wrangel-vh-pro .mobile-export,
.wrangel-vh-pro .mobile-report,
.wrangel-vh-pro .mobile-visualise {
bottom: 0;
}
}
@media (min-width: 2000px) {
.offset-lg-3 {
margin-left: 30.5%;
}
.offset-lg-1 {
margin-left: 5%;
}
.col-lg-3 {
flex: 0 0 17%;
max-width: 17%;
float: left;
padding: 0;
}
.wrangel-vh-pro .wrangel-v-pro-features .wrangel-features-mobile {
display: none;
width: 100%;
}
.right-6 {
margin-left: 128px;
top: -10px;
}
.wrangel-vh-pro .mobile-export {
opacity: 0;
left: 80.5%;
bottom: 0% !important;
}
.wrangel-vh-pro .pro-description:hover,
.wrangel-vh-pro .wrangel-description:hover {
box-shadow: 0 3px 4px 3px rgba(57, 61, 62, 0.2);
cursor: pointer;
}
.mr15 {
margin-right: 28%;
}
.ml15 {
margin-left: 28%;
}
.wrangel-vh-pro .wrangel-v-pro-features .wrangel-export-curve {
right: 20.3%;
transition: opacity 0.5s ease-in-out;
width: 12.5%;
margin-top: -11px;
}
.mobile-view {
display: none;
}
.desktop-view {
display: block;
}
.wrangel-vh-pro .mobile-connect {
left: -24px;
}
.wrangel-vh-pro .mobile-store {
left: 15%;
}
.wrangel-vh-pro .mobile-prepare {
left: 31%;
}
.wrangel-vh-pro .mobile-discover {
left: 47%;
}
.wrangel-vh-pro .mobile-analyse {
left: 64%;
}
.wrangel-vh-pro .mobile-visualise {
left: 80%;
}
.wrangel-vh-pro .mobile-report {
left: 98%;
}
.wrangel-v-pro-features {
position: relative;
top: 40px;
}
.compare-products {
display: block;
}
.wrangel-vh-pro .mobile-connect,
.wrangel-vh-pro .mobile-store,
.wrangel-vh-pro .mobile-prepare,
.wrangel-vh-pro .mobile-discover,
.wrangel-vh-pro .mobile-analyse,
.wrangel-vh-pro .mobile-export,
.wrangel-vh-pro .mobile-report,
.wrangel-vh-pro .mobile-visualise {
bottom: 0;
}
}
/* Product-section-css */
@media (max-width: 1260px) and (min-width: 767px) {
.offset-lg-3 {
margin-left: 14%;
}
.col-lg-3 {
flex: 0 0 32%;
max-width: 32%;
float: left;
padding: 0;
}
.wrangel-vh-pro .pro-mammoth,
.wrangel-vh-pro .wrangel-mammoth {
top: 50px;
}
.ml15 {
margin-left: 7%;
margin-right: 6%;
}
}
.feature-wrapper {
padding-bottom: 140px;
}
.desktop-view {
height: 60px;
}
.wrangelFeature {
position: relative;
}
.input-group-append {
margin-left: 75px !important;
}
.input-group-append button {
width: 200px;
}
.subscribe {
border-radius: 20px !important;
border: 1px solid #56c28c !important;
}
.btn-subscribe {
background-color: #56c28c !important;
width: 175px;
border: transparent !important;
}
.footer-section {
padding: 90px 0 90px 90px;
display: none;
}
.benefit {
width: 270px;
height: 172px;
background: #f7f7f7;
}
.blog-post {
margin-top: 20px;
padding: 0 60px;
}
.blog-title {
font-weight: 600;
font-size: 30px;
margin-left: -1.88px;
line-height: 1.04;
letter-spacing: -0.015em;
margin-bottom: 10px;
}
.blog-title,
.blog-content,
.category-post,
.blog-content h3,
.blog-content h2,
.archive h2 {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
line-height: 1.58;
}
.blog-content h3,
.blog-content h2 {
color: #21364d;
}
.blog-title a,
.blog-title a:hover {
color: #000;
}
.blog-content ol,
.blog-content ul {
margin: 40px 0;
}
.blog-content ol li,
.blog-content ul li {
margin-top: 15px;
margin-left: 10px;
list-style-type: disc;
list-style-position: inside;
}
.blog-content ol li ul li,
.blog-content ul li ul li {
list-style-type: decimal;
}
.blog-content a,
.blog-content a:hover {
color: #069762;
}
.header {
/* height: 64px; */
height: 85px;
}
.error404 .header {
height: 84px;
}
.read-more-link {
color: #0000008a;
margin-top: 10px;
font-size: 15px;
}
.read-more-link:hover {
color: #393d3e;
}
.read-more-link::after {
content: "...";
}
.read-more,
.read-more:hover,
.read-more-link,
.read-more-link:hover {
color: #56c28c;
font-size: 14px;
text-align: right;
}
.read-more:hover,
.read-more-link:hover {
text-decoration: underline !important;
}
.ms-item {
min-height: 292px !important;
margin-bottom: 20px;
}
.article-meta-extra,
.article-meta-extra a,
.article-meta-extra a:hover {
color: #989c9d;
font-size: 12px;
}
.blog-content p {
margin-top: 15px;
}
.blog-content a {
display: inline-block;
}
.category-post p {
color: #000;
font-size: 21px;
font-weight: 400;
margin-top: 15px;
}
.wp-video {
margin-top: 25px;
}
#ms-container {
margin-top: 20px;
}
/************ Features for all your needs ***************/
.features-tab h2 {
color: #393d3e;
font-weight: 300;
margin-bottom: 30px;
}
.features-tab h6 {
font-size: 20px;
color: #393d3e;
font-weight: 300;
margin-bottom: 30px;
}
.features-tab .elementor-tab-title,
.features-tab .elementor-tabs-content-wrapper,
.features-tab .elementor-tab-content,
.features-tab .elementor-tab-title::after {
border: 0px !important;
}
.features-tab .elementor-tab-content {
color: #9da3a4;
}
.features-tab .btn.primary-btn {
line-height: 30px;
}
.features-tab .btn.primary-btn a {
color: #fff;
}
#menu-footer-menu {
display: flex;
justify-content: center;
}
.footer .menu-item a {
font-size: 14px;
}
@media only screen and (max-width: 767px) {
.footer .col-md-2.pl-0,
.footer .col-md-2,
.footer .col-md-2.pl-4,
.footer .col-md-6.pl-4 {
padding: 0 15px !important;
}
.footer ul li {
padding: 2px 0;
}
.footer ul li a {
display: contents;
}
.footer-section {
padding: 30px 15px 30px 15px;
}
}
.hide-section {
display: none;
}
.show-section {
display: block;
}
#signup-success-wrapper {
text-align: center;
}
.about-content {
margin-bottom: 20px;
font-size: 16px;
text-align: left;
}
.terms-condition,
.privacy {
padding: 50px;
}
.terms-condition p,
.privacy p {
font-size: 16px;
line-height: 1.5;
font-weight: 400;
}
.privacy .hdr,
.terms-condition .hdr {
font-size: 22px;
font-weight: bold;
padding-bottom: 5px;
}
.privacy .date,
.terms-condition .date {
font-size: 12px;
}
.privacy .title,
.terms-condition .title {
font-size: 25px;
margin-top: 30px;
font-weight: 600;
color: #21364d;
font-family: arialroundedmt, sans-serif;
-webkit-font-smoothing: antialiased;
}
.privacy a,
.terms-condition a {
color: #51c389;
display: inline-block;
text-decoration: underline;
}
.privacy a:hover,
.terms-condition a:hover {
text-decoration: underline;
}
.privacy ul,
.privacy menu,
.privacy dir,
.terms-condition ul,
.terms-condition menu,
.terms-condition dir {
display: block;
-webkit-margin-before: 1em;
margin-block-start: 1em;
-webkit-margin-after: 1em;
margin-block-end: 1em;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-end: 0;
margin-inline-end: 0;
-webkit-padding-start: 40px;
padding-inline-start: 40px;
}
.privacy ol,
.terms-condition ol {
display: block;
-webkit-margin-before: 1em;
margin-block-start: 1em;
-webkit-margin-after: 1em;
margin-block-end: 1em;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-end: 0;
margin-inline-end: 0;
-webkit-padding-start: 40px;
padding-inline-start: 40px;
}
ol[Attributes Style] {
list-style-type: lower-alpha;
}
.privacy ul li,
.privacy ol li,
.terms-condition ul li,
.terms-condition ol li {
font-size: 16px;
line-height: 1.5;
display: list-item;
list-style-type: disc;
}
.privacy .ul_g li,
.terms-condition .ul_g li {
list-style-type: none;
padding-bottom: 10px;
}
.privacy .ul_g a,
.terms-condition .ul_g a {
color: #51c389;
}
.featuredetails-section .iconcontent {
background: #f4f4f4;
padding: 30px;
font-size: 15px;
color: #393d3e;
min-height: 206px;
border-radius: 10px;
margin-bottom: 30px;
}
.featuredetails-section .ic_title {
font-weight: 400;
padding-bottom: 12px;
font-family: Lato, sans-serif;
letter-spacing: 0.5px;
white-space: nowrap;
}
.featuredetails-section .title {
font-family: Lato, sans-serif;
font-weight: 400;
color: #56c28c;
margin-bottom: 15px;
text-transform: uppercase;
}
.featuredetails-section {
text-align: center;
padding-top: 10px;
padding-bottom: 30px;
}
body .mammoth-bg {
background-color: #f0f7f3;
}
#cookie-notice {
box-shadow: 0 0 0 1px rgba(20, 20, 31, 0.05),
0 2px 7px 1px rgba(20, 20, 31, 0.16);
background-color: hsla(0, 0%, 100%, 0.98) !important;
left: 50%;
transform: translateX(-50%);
bottom: 10px;
border-radius: 4px;
min-width: auto;
}
#cookie-law-info-bar {
font-size: 15px !important;
font-weight: 400 !important;
}
.cookie-notice-container {
padding: 5px 10px;
}
#cookie-notice #cn-accept-cookie {
background: url(//mammoth.io/wp-content/uploads/2019/07/cross-icon.svg)
no-repeat center;
float: right;
position: relative;
top: 6px;
left: 8px;
}
.footer .c_t {
background-color: #deede5;
}
#cookie-notice .cn-button {
margin-left: 0;
}
#cookie_action_close_header {
margin: 10px 50px !important;
padding: 12px 50px !important;
border-radius: 4px !important;
}
#cn-more-info.cn-more-info {
font-size: 13px;
padding: 0;
vertical-align: baseline;
margin-left: 2px;
}
.cookie-notice-container a,
.cookie-notice-container a:hover {
color: #52bb90;
}
@media (max-width: 900px) {
.cookie-notice-container #cn-notice-text {
display: inline-block;
margin-bottom: 0;
}
}
.ewd-ufaq-faqs .ufaq-faq-div .ewd-ufaq-post-margin-symbol {
font-family: inherit;
float: right;
background: url(//mammoth.io/wp-content/uploads/2019/07/plus-icon.svg)
no-repeat center;
}
.ewd-ufaq-faqs .ufaq-faq-div.ewd-ufaq-post-active .ewd-ufaq-post-margin-symbol {
background: url(//mammoth.io/wp-content/uploads/2019/07/minus-icon.svg)
no-repeat center;
}
.ewd-ufaq-faqs .ewd-ufaq-post-margin-symbol span {
color: transparent;
}
.ewd-ufaq-faqs .ufaq-faq-title h4 {
color: #21364d;
font-size: 20px;
font-weight: bold;
word-break: break-word;
line-height: 1;
}
.ewd-ufaq-faqs .ufaq-faq-title-text {
padding: 15px 0;
border-bottom: 0 solid #cfd0d1;
}
.ewd-ufaq-faqs .ufaq-faq-post p {
color: #000;
font-size: 16px;
margin-top: 15px;
}
.ewd-ufaq-faqs .ufaq-faq-body {
padding: 10px 25px;
padding-left: 45px;
}
/********** FAQ page ************/
.faq {
padding-top: 30px;
padding-bottom: 30px;
}
.ufaq-faq-list {
max-width: 950px;
margin: auto;
}
.postid-935 .blog-post {
padding-bottom: 50px;
}
.postid-935 .blog-title {
color: #8f9195;
font-weight: 600;
font-size: 16px;
text-transform: uppercase;
font-family: arialroundedmt, sans-serif !important;
}
.postid-935 h2 {
font-size: 25px;
font-family: arialroundedmt, sans-serif !important;
margin-bottom: 35px;
margin-top: 30px !important;
}
.ufaq-faq-title > a {
display: flex;
flex-flow: row-reverse;
padding: 0 15px;
}
.ewd-ufaq-post-margin-symbol {
margin-right: 0;
width: 17px;
margin-left: 20px;
}
.ufaq-faq-title-text {
width: calc(100% - 17px);
}
.ufaq-faq-title {
border-bottom: 1px solid #cfd0d1;
}
.ufaq-faq-div {
padding-left: 15px;
padding-right: 15px;
}
@media only screen and (max-width: 767px) {
.ewd-ufaq-faqs .ufaq-faq-title h4 {
font-size: 18px;
}
.ufaq-faq-title > a {
padding: 0;
}
.ewd-ufaq-faqs .ufaq-faq-body {
padding: 10px !important;
}
.desk-img {
display: none;
}
.d-none.mobile {
display: inline-block !important;
width: 100%;
margin: 0 auto;
}
.data-journey .btn-success {
text-align: center;
}
}
.data-journey .btn-success {
display: inline-block;
background: #21364d;
padding: 10px 40px;
margin: 50px 0 0;
border-radius: 4px;
text-decoration: none;
transition: 0.5s;
}
.privacy .ul_g div.anchor {
font-weight: bold;
color: #212529;
display: block;
}
.hero.bg {
background: #fff;
}
.landing-page .about-us,
.landing-page .about-us p {
font-size: 16px;
}
.landing-page .about-us h1 {
font: bold 30px Lato, sans-serif;
}
.landing-page .about-us h1 + div {
margin-top: 45px;
margin-bottom: 50px;
}
.landing-page .data-journey .btn-success {
display: inline-block;
background: #21364d;
padding: 10px 40px;
margin: 50px 0 0;
font-size: 17px;
line-height: normal;
border-radius: 4px;
text-decoration: none;
transition: 0.5s;
}
.landing-page .data-journey .btn-success:hover {
box-shadow: 0 0 7px 2px rgba(18, 46, 76, 0.43);
}
.landing-page .data-journey h1 {
text-align: center;
font: bold 30px/1.7 Lato, sans-serif;
margin-bottom: 45px;
color: #21364d;
}
.landing-page .grid.features,
.landing-page .grid.reviews {
padding: 80px 0;
max-width: none;
background-image: url(//mammoth.io/wp-content/uploads/2019/07/Group-2.svg);
}
.landing-page .feature__description {
color: #fff;
max-width: none;
}
.landing-page .data-journey {
margin-top: 110px !important;
margin-bottom: 90px !important;
}
.landing-page .feature__title {
color: #fff;
font-size: 22px;
white-space: normal;
}
.landing-page .features_list {
text-align: left;
}
.landing-page .grid.features h4 {
position: relative;
margin-bottom: 25px;
padding-bottom: 25px;
margin-top: 0;
}
.landing-page .grid.features h4::after {
content: "";
width: 100px;
height: 4px;
background: #06a66b;
position: absolute;
left: 0;
border-radius: 50px;
bottom: 0;
}
@media screen and (max-width: 767px) {
.landing-page .data-journey .row {
padding: 20px;
}
}
.landing-page .security .green {
background: #06a66b;
padding: 30px;
width: 100%;
border-radius: 10px;
}
.landing-page .security .green h1 {
font: bold 30px Lato, sans-serif;
color: #fff;
margin-bottom: 20px;
}
.landing-page .security .green p {
color: #fff;
font: 16px/1.5 Lato, sans-serif;
}
.landing-page .security .green p:last-child {
margin-bottom: 15px !important;
}
.landing-page .security .green a {
background: #fff;
padding: 10px 40px;
font-size: 17px;
line-height: normal;
border-radius: 4px;
text-decoration: none;
display: inline-block;
color: #06a66b;
transition: 0.5s;
}
.landing-page .security .green a:hover {
box-shadow: 0 0 7px 2px rgba(255, 255, 255, 0.59);
}
.landing-page .grid.reviews {
margin-top: 100px;
margin-bottom: 100px;
color: #fff;
font-size: 16px;
}
.landing-page .grid.reviews h1 {
font: bold 30px/1.67 Lato, sans-serif;
text-align: center;
}
.landing-page .grid.reviews .row {
margin-top: 100px;
margin-bottom: 50px;
}
.landing-page .grid.reviews p {
font-weight: 600;
font-size: 16px;
max-width: 280px;
}
.landing-page .grid.reviews p:last-of-type {
margin-top: 45px;
-ms-grid-row-align: end;
align-self: end;
}
.grid.reviews strong {
display: block;
margin-bottom: 10px;
color: #069762;
}
.grid.reviews strong + span {
font-weight: normal;
}
.landing-page .grid.reviews .row > div {
display: flex;
flex-flow: row wrap;
}
@media screen and (max-width: 1090px) {
.landing-page .security .green a {
padding: 10px 40px;
margin-top: 40px;
}
}
@media screen and (min-width: 658px) {
.landing-page .security .green {
padding: 50px;
}
}
@media screen and (min-width: 768px) {
.landing-page .security .green {
padding: 60px;
}
}
@media screen and (min-width: 992px) and (max-width: 1090px) {
.landing-page .security .green a {
min-width: 160px;
}
}
@media screen and (min-width: 992px) {
.landing-page .security .green {
padding: 48px 95px;
}
}
.landing-page .heading-text {
font-size: 35px;
text-transform: none;
color: #21364d;
}
.landing-page .secondarytitle {
letter-spacing: -0.2px;
color: #21364d;
line-height: 32px;
font-style: inherit;
}
.landing-page .zencharts {
left: 60px;
max-height: none;
}
.landing-page .zenguy {
max-height: none;
top: 100px;
}
.landing-page .sosguy {
max-height: none;
top: 120px;
left: 200px;
}
@media (max-width: 768px) {
.landing-page .sosguy_mobile {
top: 100px;
left: -5px;
}
}
.landing-page .signup {
width: 216px;
height: 50px;
border-radius: 4px;
color: #fff;
background-color: #1b2c3f;
line-height: 2;
}
.landing-page .signup:hover {
box-shadow: 0 0 7px 2px rgba(18, 46, 76, 0.43);
}
.post-935 .blog-content ol li {
font-size: 16px !important;
margin-top: 15px !important;
font-weight: 400 !important;
font-family: Lato, sans-serif;
color: #000;
}
.sidebar a:hover {
text-decoration: underline !important;
}
.container {
padding: 0 30px;
}
/********* Landing Page Template Starts ****************/
strong {
font-weight: 600;
}
.landing-template-content {
margin-top: 40px;
}
.landing-template-content p {
font-size: 18px;
line-height: 1.5;
font-family: Lato, sans-serif;
-webkit-font-smoothing: antialiased;
margin-bottom: 20px !important;
}
.landing-template-content li {
font-size: 18px;
line-height: 1.5;
font-family: Lato, sans-serif;
-webkit-font-smoothing: antialiased;
list-style-type: disc;
list-style-position: inside;
}
.landing-template-content .title {
font-size: 35px;
font-weight: bold;
color: #069762;
font-family: Lato, sans-serif;
-webkit-font-smoothing: antialiased;
line-height: 1.3;
margin-bottom: 15px;
}
.landing-template-content .sub-title {
font-size: 30px;
font-weight: bold;
font-family: Lato, sans-serif;
-webkit-font-smoothing: antialiased;
line-height: 1.3;
margin-bottom: 15px;
}
.landing-template-content .hbspt-form {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.16);
padding: 10%;
margin-left: 10%;
}
@media screen and (max-width: 767px) {
.column-content {
margin-bottom: 40px;
}
.landing-template-content .hbspt-form {
margin-left: 0;
}
}
/********* Landing Page Template Ends ****************/
#feature h1 {
line-height: 1em;
}
#feature .multi li {
padding: 10px 0 20px 70px;
}
#feature .side-page .main-sider {
padding-bottom: 30px;
}
#feature .side-page .main-sider > .row .col {
padding: 0;
}
.page-template-features .mt-5,
.my-5 {
margin-top: 85px !important;
}
#feature section:last-child ul:last-child li:last-child p {
margin-bottom: 0 !important;
}
#feature section:last-child ul:last-child li:last-child {
padding-bottom: 0 !important;
}
#feature section:last-child {
padding-bottom: 0 !important;
}
@media screen and (min-width: 767px) {
#feature .col-lg-4.fixed .sidemenu {
max-width: 216px;
}
#feature .sidemenu ul li a {
padding: 10px 10px;
}
#feature .sidemenu ul {
padding-bottom: 45px;
}
#feature .feature-page-content .main-side {
padding-left: 7px;
}
#feature .feature-page-content .sidemenu {
top: 105px !important;
}
}
@media screen and (min-width: 1400px) {
#feature .fixed {
padding-left: 0 !important;
}
}
#feature .sidemenu {
position: -webkit-sticky;
}
.page-id-1602 .hs-input {
width: 365px;
height: 40px;
border-radius: 4px;
border: solid 1px #8f9195;
background-color: #fff;
}
.cc-banner,
.cc-color-override--38786966.cc-window {
background-color: #27303b !important;
color: #fff;
text-align: center;
bottom: 0;
}
.cc-btn {
color: #27303b !important;
border-radius: 4px;
padding: 10px 30px !important;
font-size: 17px !important;
font-weight: 400 !important;
}
/**
* Following templates use this stylesheet:
* template-tutorials.php
* single-tutorial_pt.php
* template-use-cases.php
* single-use_case_pt.php
*/
/*body,
body #mammoth-header > nav {
background-color: #f5f6f6!important;
}*/
.h2 {
font: bold 35px Lato, sans-serif;
color: #21364d;
margin-bottom: 10px;
}
.sub-h {
font: 20px/1.35 Lato, sans-serif;
margin-bottom: 10px !important;
}
.post-content {
padding: 45px 0;
}
.posts-cnt {
margin-top: 45px;
margin-bottom: 45px;
}
.posts-cnt > div > div {
max-width: 325px;
margin: auto;
}
.featured-media {
box-shadow: 0 7px 38px -9px rgba(97, 97, 97, 0.5);
overflow: hidden;
margin-bottom: 30px;
}
.featured-media,
.featured-media > img,
.featured-video-plus.fvp-responsive .mejs-overlay,
.featured-video-plus.fvp-responsive .mejs-poster,
.featured-video-plus.fvp-responsive .mejs-container {
vertical-align: middle;
border-radius: 10px;
}
.featured-image.use-cases-thumb {
max-height: 215px;
}
.mejs-controls {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.posts-cnt > div {
margin-bottom: 75px;
}
.posts-cnt .title {
font: 600 22px Lato, sans-serif;
margin-bottom: 15px;
}
.posts-cnt .description {
margin-bottom: 15px;
}
.posts-cnt .description,
.posts-cnt .description p {
font: 16px/1.25 Lato, sans-serif;
}
.posts-cnt .read-more {
text-align: left;
}
.posts-cnt .title,
.posts-cnt .description,
.posts-cnt .read-more {
margin-left: 10px;
margin-right: 10px;
}
.posts-cnt .read-more > a {
color: #069762;
font-size: 15px;
text-decoration: underline;
}
.featured-video-plus,
.featured-video-plus > div,
.wp-video video {
min-height: 215px;
}
.featured-video-plus.fvp-responsive .mejs-container {
padding-top: 215px;
}
.btn.btn-primary:not(:disabled),
.btn.btn-primary:not(:disabled):focus,
.btn.btn-primary:not(:disabled):hover,
.btn.btn-primary:not(:disabled):active,
.btn.btn-primary:not(:disabled):active:focus {
background-color: #069762;
outline: #069762;
border-color: #069762;
border-radius: 4px;
padding: 10px 40px;
}
.btn-primary.focus,
.btn-primary:focus {
box-shadow: none;
}
button.load-dynamic-posts.loading {
font-size: 0;
}
button.load-dynamic-posts.loading::after {
content: "Loading...";
font-size: 1rem;
}
@media screen and (min-width: 576px) and (max-width: 767px) {
.featured-video-plus.fvp-responsive .mejs-container {
padding-top: 148.85px;
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
.featured-video-plus.fvp-responsive .mejs-container {
padding-top: 132.3px;
}
body.single-post .post ~ .widget .posts-container .type-post {
display: flex;
align-items: center;
justify-content: space-between;
}
.similar-posts .featured-image,
.single-related-post-body {
width: 48.5%;
}
body.single-post .post ~ .widget .posts-container .type-post .blog-title {
margin-top: 0;
}
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
.featured-video-plus.fvp-responsive .mejs-container {
padding-top: 185.233px;
}
}
@media screen and (max-width: 1199px) {
.featured-video-plus,
.featured-video-plus > div,
.wp-video video {
min-height: unset;
}
}
/**
* Single Use Case
*/
.single-use_case_pt .use_case_pt,
.single-tutorial_pt .tutorial_pt {
margin: 0 -15px;
}
.single-use_case_pt .blog-content,
.single-tutorial_pt .blog-content {
max-width: 795px;
margin: auto;
font-family: Lato, sans-serif;
}
/* .single-use_case_pt .container,
.single-use_case_pt .blog-content,
.single-use_case_pt #mammoth-footer .container.c-footer {
max-width: 1440px;
} */
.single-use_case_pt .blog-content > h1,
.single-tutorial_pt .blog-content > h1 {
margin-top: 0;
margin-bottom: 25px;
font: bold 25px/1.2 Lato, sans-serif;
}
.single-use_case_pt .wp-block-video > video,
.single-use_case_pt .blog-content img,
.single-tutorial_pt .wp-block-video > video,
.single-tutorial_pt .blog-content img {
border-radius: 10px;
vertical-align: middle;
}
.single-use_case_pt .blog-content .wp-block-image,
.single-tutorial_pt .blog-content .wp-block-image {
margin-bottom: 10px;
}
.single-use_case_pt .blog-content img:first-of-type,
.single-tutorial_pt .blog-content img:first-of-type {
margin-bottom: 25px;
}
.single-use_case_pt .blog-content .review,
.single-use_case_pt .blog-content .reviewer,
.single-tutorial_pt .blog-content .review,
.single-tutorial_pt .blog-content .reviewer {
font-weight: bold;
font-size: 17px;
line-height: 1.47;
color: #21364d;
margin-bottom: 35px !important;
}
.single-use_case_pt .blog-content .reviewer,
.single-tutorial_pt .blog-content .reviewer {
font-size: 16px;
margin-bottom: 70px !important;
max-width: 220px;
}
.single-use_case_pt .blog-content .reviewer span,
.single-tutorial_pt .blog-content .reviewer span {
display: inline-block;
}
.single-use_case_pt .blog-content .reviewer > span:not(:first-of-type),
.single-tutorial_pt .blog-content .reviewer > span:not(:first-of-type) {
margin-top: 10px;
}
.single-use_case_pt .blog-content p,
.single-tutorial_pt .blog-content p {
font-size: 15px;
line-height: 1.67;
margin-bottom: 30px !important;
}
.single-use_case_pt .blog-content h2,
.single-tutorial_pt .blog-content h2 {
font: bold 20px Lato, sans-serif;
margin-top: 40px;
}
.single-use_case_pt .blog-content ul,
.single-tutorial_pt .blog-content ul {
padding-left: 20px;
}
.single-use_case_pt .blog-content ul li,
.single-tutorial_pt .blog-content ul li {
list-style: none;
position: relative;
font-size: 15px;
margin-bottom: 45px;
}
.single-use_case_pt .blog-content ul li::before,
.single-tutorial_pt .blog-content ul li::before {
content: "•";
position: absolute;
left: -20px;
color: #069762;
}
.single-use_case_pt .blog-content ul li .p-color,
.single-tutorial_pt .blog-content ul li .p-color {
font-size: 17px;
display: inline-block;
margin-bottom: 20px;
}
.gs {
background-color: #21364d;
color: #fff;
text-align: center;
border-radius: 10px;
padding: 55px 25px 40px;
margin: 50px 0 0;
}
.gs h1 {
font: bold 25px Lato, sans-serif;
margin-bottom: 20px;
}
.gs p {
font: normal 16px/1.5 Lato, sans-serif;
margin-bottom: 20px !important;
}
.gs .btn {
background-color: #fff;
padding: 10px 28px;
font-size: 17px;
border: 1px solid #fff;
line-height: normal;
width: 100%;
margin-top: 20px;
}
.gs .btn:focus,
.gs .btn:hover {
background-color: #21364d;
color: #fff;
}
@media screen and (min-width: 768px) {
.single-use_case_pt .use_case_pt,
.single-tutorial_pt .tutorial_pt {
margin: 0;
}
.single-use_case_pt .blog-content > h1,
.single-tutorial_pt .blog-content > h1 {
margin-top: 45px;
margin-bottom: 50px;
font: bold 35px/1.25 Lato, sans-serif;
}
.single-use_case_pt .blog-content img:first-of-type,
.single-tutorial_pt .blog-content img:first-of-type {
margin-bottom: 35px;
}
.single-use_case_pt .blog-content .review,
.single-use_case_pt .blog-content .reviewer,
.single-tutorial_pt .blog-content .review,
.single-tutorial_pt .blog-content .reviewer {
font-size: 20px;
line-height: 1.5;
margin-bottom: 30px !important;
}
.single-use_case_pt .blog-content .reviewer,
.single-tutorial_pt .blog-content .reviewer {
margin-bottom: 100px !important;
max-width: unset;
font-size: 16px;
}
.single-use_case_pt .blog-content .reviewer span,
.single-tutorial_pt .blog-content .reviewer span {
display: inline;
}
.single-use_case_pt .blog-content .reviewer > span:not(:first-of-type),
.single-tutorial_pt .blog-content .reviewer > span:not(:first-of-type) {
margin-left: 10px;
}
.single-use_case_pt .blog-content h2,
.single-tutorial_pt .blog-content h2 {
font-size: 22px;
margin-top: 60px;
}
.gs {
padding: 40px 95px;
margin: 100px 0 52px;
text-align: inherit;
}
.gs h1 {
font-size: 30px;
margin-bottom: 25px;
}
.gs .btn {
width: auto;
margin-top: 0;
}
}
/** Jobs Shortcode */
.jobs-section {
max-width: 910px;
}
.jobs-section .title {
font-size: 40px;
line-height: 1.25;
margin-top: 20px;
}
.jobs-container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.jobs-container > .job {
flex: 1 0 350px;
width: 100%;
max-width: 350px;
margin-bottom: 60px;
}
.job > .job-content {
max-width: 380px;
}
.jobs-container .job-title a {
font: bold 25px/1.25 Lato, sans-serif;
margin-bottom: 10px;
display: block;
}
.jobs-container .job-brief {
margin-bottom: 20px !important;
font-size: 15px;
}
.jobs-container .job-anchor {
font-size: 17px;
padding: 10px 38px;
background-color: #069762;
color: #fff;
border-radius: 4px;
box-shadow: none;
display: inline-block;
transition: background-color 0.25s ease;
}
.jobs-container .job-anchor:hover {
background-color: #21364d;
}
.jobs-section .filters-container {
text-align: center;
margin: 30px 0 55px;
}
.jobs-section .filters-container > div {
display: inline-block;
position: relative;
}
.jobs-section .filters-container select {
background-color: transparent;
border: 1px solid #8f9195;
padding: 7px 25px 7px 10px;
border-radius: 2px;
min-width: 180px;
position: relative;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.jobs-section .filters-container .filter-container:not(:last-of-type) {
margin-right: 15px;
}
.jobs-section .filters-container .filter-container::after {
content: "";
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #4c5055;
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
}
@media screen and (min-width: 1200px) {
.single-use_case_pt .container.page-content,
.single-use_case_pt #mammoth-header .navbar .container {
padding: 0;
}
}
@media screen and (max-width: 767px) {
.jobs-container {
display: block;
}
.jobs-section > .title {
font-size: 25px;
line-height: 1.25;
}
.jobs-container .job,
.job > .job-content {
max-width: revert;
max-width: unset;
text-align: center;
}
.jobs-container > .job {
margin-bottom: 40px;
}
.jobs-container .job-title {
font-size: 20px;
}
.jobs-container .job-brief {
margin-bottom: 20px !important;
}
.jobs-container .job-anchor {
width: 270px;
}
.jobs-section .filters-container {
margin: 30px 0;
}
.jobs-section .filters-container select {
max-width: 140px;
min-width: 140px;
}
}
@media screen and (max-width: 358px) {
.jobs-section .filters-container select {
max-width: 100%;
min-width: 200px;
}
.jobs-section .filters-container > div {
display: inline-block;
margin: auto !important;
}
.jobs-section .filters-container > div:not(:last-of-type) {
margin-bottom: 15px !important;
}
}
/** Jobs Shortcode Ends */
/** Single Job Post Page */
.single-job {
max-width: 880px;
margin: auto;
}
.single-job .job-header {
display: flex;
padding: 50px 0;
}
.single-job .job-header .left {
flex: 1 1 auto;
}
.single-job .job-header .right {
flex: 1 0 200px;
}
.single-job .job-title {
font-size: 30px;
line-height: 1.5;
margin-bottom: 20px;
font-weight: 600;
}
.single-job .job-title + p {
font-size: 15px;
}
.single-job-listing .footer.mt-5 {
margin-top: 0 !important;
}
.job-contents {
padding: 50px 0 100px;
}
.job-sections > div {
margin-bottom: 50px;
}
.job-sections > div:last-of-type {
margin-top: 10px;
margin-bottom: 100px;
}
.job-sections h2 {
font-size: 25px;
font-weight: 600;
margin-bottom: 20px;
line-height: 1.6;
}
.job-sections .job-content,
.job-sections .job-content p {
font-size: 15px;
line-height: 24px;
}
.job-sections .job-content p:not(:last-child) {
margin-bottom: 30px !important;
}
.job-sections .job-content ul {
margin: 30px 0;
display: block;
width: 100%;
}
.job-sections .job-content h2 + ul {
margin-top: 10px;
}
.job-sections .job-content ul,
.job-sections .job-content ul li {
font-size: 15px;
line-height: 22px;
list-style: none;
position: relative;
}
.job-sections .job-content ul li {
padding-left: 30px;
margin-bottom: 20px;
}
.job-sections .job-content ul li:last-of-type {
margin-bottom: 0;
}
.job-sections .job-content li::before {
position: absolute;
content: "\02022";
top: 0;
left: 5px;
}
.single-job-listing .job-form {
padding: 65px 0;
}
.single-job-listing .job-form .section-title:not(:first-of-type) {
margin-top: 55px;
}
.single-job-listing .job-form .section-title {
margin-bottom: 40px;
}
.single-job-listing .job-form .section-title h2 {
font-size: 25px;
font-weight: 600;
line-height: 1.25;
}
.single-job-listing .job-form .section-title p:not(:last-of-type) {
margin-bottom: 30px !important;
}
.job-form .form-control {
border-color: #8f9195;
}
.job-form .col-form-label {
font-size: 16px;
line-height: 24px;
}
.job-form .form-check {
margin-top: 10px;
}
.job-form .form-check:not(:first-of-type) {
margin-top: 15px;
}
.job-form .form-check-label {
vertical-align: middle;
margin-left: 10px;
}
.job-form input[type="text"],
.job-form input[type="email"],
.job-form input[type="tel"],
.job-form input[type="url"],
.job-form textarea {
text-align: left;
font-size: 16px;
color: #4c5055;
}
.job-form p {
font-size: 16px;
}
.job-form select.form-control {
background-color: transparent;
border: 1px solid #8f9195;
padding: 7px 25px 7px 10px;
border-radius: 2px;
min-width: 180px;
text-align: left;
position: relative;
-webkit-appearance: none;
-moz-appearance: none;
apperance: none;
}
.job-form .job-select-container {
position: relative;
}
.job-form .job-select-container::after {
content: "";
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #4c5055;
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
}
.job-form a {
font-size: 16px;
text-decoration: underline;
}
.job-form hr {
border-color: #8f9195;
}
.job-form button {
margin: 30px auto;
display: block;
}
.col-form-label > span {
color: #ff0026;
}
/********** Single Blog page Container january 29***********/
body.single-post .post,
body .posts-container {
max-width: 795px;
margin-left: auto;
margin-right: auto;
}
body.single-post .post ~ .widget,
body.single-post .posts-container,
body.single-post .post + hr {
max-width: 100%;
}
body.single-post .post ~ .widget .posts-container .type-post {
max-width: calc(33.3333% - 30px) !important;
margin-left: 0;
margin-right: 0;
}
.similar-posts .featured-image {
height: 248px;
display: flex;
overflow: hidden;
}
.similar-posts .featured-image img {
-o-object-fit: cover;
object-fit: cover;
height: 100%;
width: 100%;
}
body.single-post .post ~ .widget .posts-container > a.post {
margin-bottom: 30px;
}
.single-post h2.widgettitle {
font: bold 25px Lato, sans-serif;
margin-bottom: 30px;
}
.single-post-featured-image {
display: none;
}
.single-post section.header {
box-shadow: 0 0px 12px 0 rgba(0, 0, 0, 0.05);
}
body.single-post .blog-title {
font: bold 40px Lato, Georgia, Cambria, "Times New Roman", Times, serif;
margin-bottom: 30px;
line-height: 48px;
}
body.single-post .blog-content,
body.single-post .blog-content ol li,
body.single-post .blog-content p,
body.single-post .blog-content ul li {
font: 400 18px Lato, Georgia, Cambria, "Times New Roman", Times, serif;
margin-bottom: -9px !important;
line-height: 1.58;
margin-top: 42px;
}
body.single-post .blog-content h2 {
font-size: 34px !important;
font-weight: 600 !important;
line-height: 1.12 !important;
letter-spacing: -0.02px !important;
margin-top: 56px !important;
margin-bottom: -9px !important;
}
body.single-post figure {
margin-top: 56px;
}
body.single-post {
background-color: #fff;
}
body.single-post .post ~ .widget .posts-container .type-post .blog-title {
font: 400 24px Lato, Georgia, Cambria, "Times New Roman", Times, serif;
line-height: 32px;
}
body .posts-container .type-post .post-body {
font-size: 16px;
line-height: 22px;
}
figcaption {
font-size: 15px;
color: #555;
}
/********** Single Blog page Container ***********/
/*********** Blog Page ***********/
.blog-sec.blog-sidebar {
display: flex;
padding: 60px 0 0;
border-top: 1px solid #ddd;
justify-content: space-between;
}
aside.blog-sec .blog-col.sidebar {
width: calc(33.3333% - 30px);
}
.blog-col {
padding: 0 10px;
}
.blog-col .font-weight-bold {
color: #000 !important;
font-size: 20px;
line-height: normal;
}
.blog-sidebar .blog-col li a {
display: block;
line-height: 1.2;
margin-bottom: 10px;
}
.blog-sidebar select {
width: 100%;
margin-bottom: 20px;
height: 40px;
border: 1px solid #888;
color: #888;
border-radius: 4px;
text-indent: 5px;
background-color: #fff;
}
.main-blog-content .pagination .nav-links {
margin: 0 auto;
}
.main-blog-content {
padding-bottom: 50px;
}
.single.single-post .back-btn {
text-align: center;
}
.single.single-post .back-btn > a {
margin: 60px 0 20px;
text-align: center;
line-height: 1.58;
text-decoration: none;
}
hr.horizontal-r {
margin: 40px 0 60px;
}
.back-btn + aside.blog-sec.blog-sidebar {
padding: 0;
border: 0;
}
.widget_similarpostswidget + aside.blog-sec.blog-sidebar {
margin-top: 30px;
}
/********* Blog Page ends***********/
/***********************************************
Header Footer CSS for Job Page Only. .page-id-5134
***********************************************/
.page-id-5134 #mammoth-footer .justify-content-center {
justify-content: space-between !important;
}
.page-id-5134 #mammoth-footer .btn.btn-success {
margin: 0 0 0 auto;
}
/*.page-id-5134*/
#mammoth-header .navbar {
padding: 15px 0 !important;
}
/*.page-id-5134*/
#mammoth-header .navbar .container {
padding: 0 20px;
}
/***********************************************/
@media (max-width: 991px) {
body.single-post .post ~ .widget .posts-container .type-post {
max-width: 100% !important;
}
body.single-post
.post
~ .widget
.posts-container
> a.post:not(:last-child) {
padding-bottom: 30px;
border-bottom: 1px solid #eee;
}
.single.single-post .back-btn > a {
margin: 45px 0 45px;
padding-bottom: 45px;
}
.blog-sec.blog-sidebar {
flex-wrap: wrap;
}
.blog-sec.blog-sidebar .sidebar {
position: initial;
}
.blog-sec.blog-sidebar .sidebar:not(:last-child) {
margin-bottom: 30px;
}
body.single-post .post + hr.horizontal-r,
hr.horizontal-r {
margin: 30px 0;
}
.blog-sec.blog-sidebar {
padding-top: 45px;
}
aside.blog-sec .blog-col.sidebar {
width: 100%;
max-width: 100%;
padding: 0;
}
.main-blog-content + .blog-sec.blog-sidebar {
padding-left: 15px;
padding-right: 15px;
}
.page-id-5134 #mammoth-footer .btn.btn-success {
margin: auto;
}
.page-id-5134 #mammoth-footer .justify-content-center {
justify-content: center !important;
}
.jobs-section {
max-width: 740px;
}
.jobs-container > .job {
max-width: 340px;
}
}
@media screen and (max-width: 767px) {
.single-job-listing .job-form {
padding: 30px 0;
}
.single-job {
max-width: 100%;
}
.single-job .job-header {
display: block;
text-align: center;
padding: 30px 0;
}
.single-job .job-header h1 {
font-size: 25px;
line-height: 1.25;
margin-bottom: 15px;
}
.single-job .job-header h1 + p {
margin-bottom: 30px !important;
}
.single-job-listing .btn-apply-for-job {
width: 100%;
max-width: 270px;
}
.job-contents {
padding: 30px 0 40px;
}
.job-sections h2 {
font-size: 20px;
}
.job-sections > div {
margin-bottom: 30px;
}
.job-sections > div:last-of-type {
margin-top: 0;
margin-bottom: 40px;
}
.single-job-listing .job-form .section-title:not(:first-of-type) {
margin-top: 40px;
}
.single-job-listing .job-form .section-title {
margin-bottom: 25px;
}
.job-form .section-title h2:not(:last-child) {
margin-bottom: 30px;
}
.job-form button {
width: 100%;
max-width: 270px;
margin-bottom: 0;
}
.single.single-post .back-btn > a {
margin: 45px 0 45px !important;
padding-bottom: 45px;
}
.blog-sec.blog-sidebar ul > li:not(.widget_text) {
display: block;
}
.blog-sec.blog-sidebar {
padding-top: 45px;
}
.main-blog-content {
padding-bottom: 45px;
}
.widget_similarpostswidget + aside.blog-sec.blog-sidebar {
margin-top: 10px;
}
/******* Single Page Font Formating ******/
body.single-post .blog-title {
font-size: 30px;
margin-bottom: 0;
}
body.single-post .blog-content,
body.single-post .blog-content ol li,
body.single-post .blog-content p,
body.single-post .blog-content ul li {
font-size: 18px;
margin-top: 28px;
margin-bottom: -8px;
}
body.single-post figure {
margin-top: 35px;
}
body.single-post .blog-content h2 {
font-size: 30px !important;
margin-top: 36px !important;
}
.single.single-post .back-btn > a {
font-size: 18px;
}
.jobs-container > .job {
max-width: unset;
}
.page-id-5134 .post-5134 .p-5 {
padding-bottom: 0 !important;
}
}
@media (max-width: 340px) {
.blog #mammoth-header .navbar,
.category #mammoth-header .navbar,
.author #mammoth-header .navbar {
padding: 15px 30px;
}
}
/** Single Job Post Page Ends */
.wpro-info {
font-size: 0;
width: 12px;
height: 12px;
background: url(//mammoth.io/wp-content/uploads/2019/07/info.svg) no-repeat;
display: inline-block;
vertical-align: middle;
margin-left: 10px;
margin-bottom: 2px;
cursor: pointer;
}
.single-case_studies_pt .footer {
margin-top: 0 !important;
}