/*
Theme Name:     Jupiter Child Theme
Template:       jupiter
*/

/* General */
html {
  scroll-behavior: smooth;
}

img {
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

.master-holder strong {
    color: #717171 !important;
}
#theme-page p, 
#theme-page ul, 
#theme-page li{
    font-size: 18px;
    line-height: 1.66em;
}
.bg-color{
    background-color: #f3f4f5;
}

::selection {
  background: #dadbdc;
  color: inherit;
}
::-moz-selection {
  background: #dadbdc;
  color: inherit;
}
.master-holder .project-text h2{
    font-size: 38px;
    margin-bottom: 20px;
    text-transform: initial;
    font-weight: 800;
}
.master-holder .project-text h3{
    font-size: 28px;
    font-weight: 500;
}
.master-holder .project-text h4{
    text-transform: initial;
    color: #717171;
    font-size: 20px;
    font-weight: 500px;
}
strong{
    font-weight: 600;
}
.link-decoration a{
    text-decoration: underline;
}
a:hover{
    font-weight: 500;
}
/* logo */
.my-logo{
    font-size: 22px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    height: 90px;
    line-height: 90px;
    vertical-align: middle;
    margin-top: 2px;
}
.a-sticky .my-logo{
    height: 55px;
    line-height: 55px;
}
.header-style-1.header-align-left .header-logo a{
    margin-left:15px;
}

/* Menu */
.projects-menu-item > a{
    pointer-events: none;
}
.mk-main-navigation #menu-main li.no-mega-menu ul.sub-menu:after{
    background-color: #ffffff;
}
.mk-main-navigation li.no-mega-menu ul.sub-menu{
    background-color: #ffffff!important;
    top: 80%;
    border: 2px solid #f3f4f5;
}
.mk-main-navigation ul.sub-menu a.menu-item-link:hover,
.main-navigation-ul ul.sub-menu li.current-menu-item > a.menu-item-link{
    font-weight: bold !important;
}
.mk-main-navigation #menu-main ul.sub-menu a.menu-item-link:hover,
#menu-main.main-navigation-ul ul.sub-menu li.current-menu-item > a.menu-item-link,
.mk-main-navigation ul.sub-menu a.menu-item-link{
    color: #404040 !important;
}
.menu-hover-style-5 .main-navigation-ul > li.menu-item > a.menu-item-link:after{
    background-color: #404040 !important;
}
/* Home Page */
.contact-icon {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 0;
}
.home-title{
    font-size: 48px;
    line-height: 1em;
    margin-bottom: 40px;
    display: block;
    color: #404040;
}/*
.home-desc{
    margin-bottom: 40px;
    display: block;
}
*/

#theme-page .my-big-text p{
    /*font-size: 25px;
    color: #404040;*/
    margin-bottom: 40px;
}
#theme-page .contact-icon{
    border-radius: 50%;
    box-shadow: 5px 7px 12px rgba(0,0,0,0.2);
    background-color: #fff;
}
#theme-page .contact-icon .vc_icon_element-inner{
    width: 2.5em;
    height: 2.5em;
}
#theme-page .contact-icon:hover{
    transform: scale(1.1);
}
#theme-page .contact-icon span.vc_icon_element-icon.fa{
    /*font-size: 1.5em!important;
    text-shadow: 0 15px 15px rgba(0,0,0,0.4);
    color: #717171;
    color: #e9867d;*/
}/*
#theme-page .contact-icon:hover span.vc_icon_element-icon.fa{
    text-shadow: 0 3px 3px rgba(0,0,0,0.4);
}*/
#theme-page .wave-row{
    background-image:url('/wp-content/themes/jupiter-child/bg/wave.svg');
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-size: cover;
    min-height: 200px;
}
#theme-page .wave-up-row {
    background-image:url('/wp-content/themes/jupiter-child/bg/wave_up.svg');
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-size: cover;
    min-height: 200px;
}
#theme-page .perfectfit-wave{
    min-height: 150px;
}

.cover-row{
    margin: 100px auto;
}
.cover-box-btn .vc_btn3.vc_btn3-color-grey.vc_btn3-style-modern{
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    padding: 10px 30px;
    color: #ffffff;
    font-size: 20px;
    letter-spacing: 1px;
    border: none;
}
.cover-box-btn a:hover {
    transform: scale(1.1);
}
/* Perfectfit cover */
.cover-perfectfit-row{
    background-image:url('/wp-content/themes/jupiter-child/bg/lightblue.svg');
    background-repeat: no-repeat;
    background-position: top;
}
.cover-perfectfit-row .cover-box-btn .vc_btn3.vc_btn3-color-grey.vc_btn3-style-modern{
background: rgba(28,216,210,1);
background: -moz-linear-gradient(left, rgba(28,216,210,1) 0%, rgba(147,237,199,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(28,216,210,1)), color-stop(100%, rgba(147,237,199,1)));
background: -webkit-linear-gradient(left, rgba(28,216,210,1) 0%, rgba(147,237,199,1) 100%);
background: -o-linear-gradient(left, rgba(28,216,210,1) 0%, rgba(147,237,199,1) 100%);
background: -ms-linear-gradient(left, rgba(28,216,210,1) 0%, rgba(147,237,199,1) 100%);
background: linear-gradient(to right, rgba(28,216,210,1) 0%, rgba(147,237,199,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1cd8d2', endColorstr='#93edc7', GradientType=1 );
}

/* Job Finder cover */
.cover-jobfinder-row{
    background-image:url('/wp-content/themes/jupiter-child/bg/yellow.svg');
    background-repeat: no-repeat;
    background-position: 90% 20px;
}
.cover-jobfinder-row .cover-box-btn .vc_btn3.vc_btn3-color-grey.vc_btn3-style-modern{
background: rgba(255,178,71,1);
background: -moz-linear-gradient(left, rgba(255,178,71,1) 0%, rgba(255,204,51,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,178,71,1)), color-stop(100%, rgba(255,204,51,1)));
background: -webkit-linear-gradient(left, rgba(255,178,71,1) 0%, rgba(255,204,51,1) 100%);
background: -o-linear-gradient(left, rgba(255,178,71,1) 0%, rgba(255,204,51,1) 100%);
background: -ms-linear-gradient(left, rgba(255,178,71,1) 0%, rgba(255,204,51,1) 100%);
background: linear-gradient(to right, rgba(255,178,71,1) 0%, rgba(255,204,51,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb247', endColorstr='#ffcc33', GradientType=1 );
}

/* Websites cover */
.cover-websites-row{
    background-image:url('./bg/blue.svg');
    background-repeat: no-repeat;
    background-position: 45% 40px;
}
.cover-websites-row .cover-box-btn .vc_btn3.vc_btn3-color-grey.vc_btn3-style-modern{
background: rgba(0,115,255,1);
background: -moz-linear-gradient(left, rgba(0,115,255,1) 0%, rgba(0,200,255,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,115,255,1)), color-stop(100%, rgba(0,200,255,1)));
background: -webkit-linear-gradient(left, rgba(0,115,255,1) 0%, rgba(0,200,255,1) 100%);
background: -o-linear-gradient(left, rgba(0,115,255,1) 0%, rgba(0,200,255,1) 100%);
background: -ms-linear-gradient(left, rgba(0,115,255,1) 0%, rgba(0,200,255,1) 100%);
background: linear-gradient(to right, rgba(0,115,255,1) 0%, rgba(0,200,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0073ff', endColorstr='#00c8ff', GradientType=1 );
}

/* brandbook cover */
.cover-brandbook-row{
    background-image:url('/wp-content/themes/jupiter-child/bg/orange.svg');
    background-repeat: no-repeat;
    background-position: 70% 20px;
}
.cover-brandbook-row .cover-box-btn .vc_btn3.vc_btn3-color-grey.vc_btn3-style-modern{
background: rgba(254,179,123,1);
background: -moz-linear-gradient(left, rgba(254,179,123,1) 0%, rgba(255,127,95,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(254,179,123,1)), color-stop(100%, rgba(255,127,95,1)));
background: -webkit-linear-gradient(left, rgba(254,179,123,1) 0%, rgba(255,127,95,1) 100%);
background: -o-linear-gradient(left, rgba(254,179,123,1) 0%, rgba(255,127,95,1) 100%);
background: -ms-linear-gradient(left, rgba(254,179,123,1) 0%, rgba(255,127,95,1) 100%);
background: linear-gradient(to right, rgba(254,179,123,1) 0%, rgba(255,127,95,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feb37b', endColorstr='#ff7f5f', GradientType=1 );
}

/* Footer */
#mk-footer{
    background-color: #ffffff;
    color: #404040;
    text-align: center;
}
.mk-footer-copyright{
    display: block;
    width: 100%;
    padding-left: 0!important;
    padding-right: 0!important;
}
#mk-footer .widget:not(.widget_social_networks) a{
    color: #404040;
}
#custom_html-3{
    margin-bottom: 0;
}

/* Perfectfit  and Job Finder */
.perfectfit-app-name-start {
    color: #000000;
    font-family: 'Roboto',Montserrat, sans-serif, serif !important;
    font-weight: 500;
}
.perfectfit-app-name-end {
    color: #E6424D;
    font-weight: 500;
}
.table-wrapper{
    border: 1px solid #ddd;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    overflow: auto;
    display: inline-block;
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    margin:20px auto;
    background-color: #ffffff;
    max-width: 100%;
}
#comp td:first-child, #comp th:first-child,
#comp td:last-child, #comp th:last-child,
#hmw td:first-child, #hmw th:first-child,
#hmw td:last-child, #hmw th:last-child{
    border-left: none;
    border-right: none;
}
#comp tr:first-child th,
#hmw tr:first-child th{
    border-top: none;
}
#comp tr:last-child td,
#hmw tr:last-child td{
    border-bottom: none;
}


#hmw,
#comp{
    direction: ltr;
    border-collapse: collapse;
    width: 100%;
    overflow-x:auto;
    display: block;
    margin-bottom: 0;
}
#hmw td,
#comp td{
    text-align: left;
}

#hmw td, #hmw th,
#comp td, #comp th{
  border: 1px solid #ddd;
  padding: 8px;
  font-size: 18px;
  line-height: 1.66em;
}

#hmw th,
#comp th{
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
  text-transform: initial;
  font-weight: 600;
}
#comp td:nth-child(1),
#hmw td:nth-child(1){
    padding-right: 20px;
    padding-left: 20px;
}

#comp td:nth-child(2){
    background-color: rgba(221,221,229,0.4);
}
#comp td:first-child{
    font-weight:600;
}
#comp .jobfinder-comp-icon{
    font-size: 20px;
}
#perfectfit-process,
#perfectfit-user-research,
#perfectfit-persona,
#perfectfit-finding-prob,
#perfectfit-env,
#interactive-prototype,
#perfectfit-measure,
#jobfinder-user-research,
#jobfinder-persona,
#jobfinder-competitive-analysis,
#jobfinder-finding-prob,
#jobfinder-measure{
    padding: 100px 0;
}
#perfectfit-solving,
#perfectfit-ia,
#perfectfit-user-flow,
#perfectfit-wireframes,
#perfectfit-ui,
#jobfinder-solving,
#jobfinder-user-flow,
#jobfinder-wireframes,
#jobfinder-ui{
    padding: 70px 0;
}
#perfectfit-process,
#perfectfit-user-research,
#perfectfit-persona,
#jobfinder-user-research,
#jobfinder-persona,
#jobfinder-competitive-analysis{
    padding-bottom: 0;
}

#perfectfit-env{
    background: -moz-linear-gradient(top,  rgba(255,255,255,0.3) 0%, rgba(224,224,232,0.3) 9%, rgba(221,221,229,0.4) 10%, rgba(221,221,229,0.4) 90%, rgba(255,255,255,0.4) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0.3) 0%,rgba(224,224,232,0.3) 9%,rgba(221,221,229,0.4) 10%,rgba(221,221,229,0.4) 90%,rgba(255,255,255,0.4) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(255,255,255,0.3) 0%,rgba(224,224,232,0.3) 9%,rgba(221,221,229,0.4) 10%,rgba(221,221,229,0.4) 90%,rgba(255,255,255,0.4) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dffffff', endColorstr='#66ffffff',GradientType=0 ); /* IE6-9 */
}
.perfectfit-empathy-map strong{
    color: #0097A7;
}
#perfectfit-empathy-map .wpb_row{
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    border-radius: 20px;
}
.think-block,
.say-block{
    min-height: 300px;
}
#perfectfit-empathy-map .wpb_column{
    padding: 10px;
}
.perfectfit-nav-icon{
    vertical-align: bottom;
    font-size: 30px;
    color: #0097A7;
}
.perfectfit-btn a{
    color: #ffffff !important;
    background-color: #0097A7 !important;
}
.perfectfit-mockup-play-prototype img{
    max-width: 550px;
    width: 100%;
}

#vertical-nav {
    position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
}
#vertical-nav.right {
    right: 17px;
}
#vertical-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#vertical-nav ul li {
    display: block;
    width: 14px;
    height: 13px;
    margin: 7px;
    position: relative;
}
#vertical-nav ul li a{
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
}
#vertical-nav ul li a .vn-dot {
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    border: 1px solid #000;
    background: rgba(0, 0, 0, 0);
    border-radius: 50%;
    position: absolute;
    z-index: 1;
}
#vertical-nav ul li a.active .vn-dot {
    background: #717171;
    border-color: #717171;
}
#vertical-nav ul li a .vn-text {
    white-space: nowrap;
    top: -8px;
    left: -250px;
    position: absolute;
    z-index: 1;
    opacity: 0;
    color: #717171;
    background-color: #ffffff;
}
#vertical-nav ul li a:hover .vn-text {
  opacity: 1;
}
#perfectfit-process .five-cols,
#jobfinder-process .five-cols{
    padding-top:20px;
}
#perfectfit-process ul,
#jobfinder-process ul{
    margin-left: 0.5em;
}
.process-title{
    padding: 15px 30px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    border-radius: 5px;
    display: block;
    margin-bottom: 20px;
    text-align: center;
}
.process-title:after {
    content: "\2192";
    position: absolute;
    right: -10px;
}

a.process-link {
    font-size: 14px;
    text-decoration: underline;
}
.process-last-link .process-title:after{
    content: "";
}
.process-link .material-icons {
    content: "\003E";
    font-size: 16px;
    vertical-align: middle;
}

/* Job Finder */
.cover-row img,
#brandbook-main-img img,
#websites-main-img img,
#perfectfit-main-img img,
#jobfinder-main-img-section img{
    max-width: 760px;
    height: auto;
}

.jobfinder-mockup {
    margin: auto;
    padding: 20px;
}
.jobfinder-criterias {
    list-style-type: circle;
    padding-left: 20px;
    margin-bottom: 0;
}
.jobfinder-applied-boxes {
    margin-bottom: 0;
}
.jobfinder-mockup.jobfinder-img-title {
    margin-bottom: 5px;
}
.jobfinder-caption p {
    margin-bottom: 0;
    text-align: center;
}
.jobfinder-slider{
    margin: auto;
}
.jobfinder-gradient-icon{
    vertical-align: bottom;
    font-size: 36px;
    margin-right: 10px;
    background: rgba(63,38,255,1);
    background: -moz-linear-gradient(top, rgba(63,38,255,1) 0%, rgba(37,183,236,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(63,38,255,1)), color-stop(100%, rgba(37,183,236,1)));
    background: -webkit-linear-gradient(top, rgba(63,38,255,1) 0%, rgba(37,183,236,1) 100%);
    background: -o-linear-gradient(top, rgba(63,38,255,1) 0%, rgba(37,183,236,1) 100%);
    background: -ms-linear-gradient(top, rgba(63,38,255,1) 0%, rgba(37,183,236,1) 100%);
    background: linear-gradient(to bottom, rgba(63,38,255,1) 0%, rgba(37,183,236,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f26ff', endColorstr='#25b7ec', GradientType=0 );
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

#jobfinder-finding-prob,
#perfectfit-finding-prob{
    background-image: url(/wp-content/themes/jupiter-child/bg/gray.svg);
    background-repeat: no-repeat;
    background-position: 80% 110%;
    background-size: 600px;
}
.perfectfit-hmw-icon,
.jobfinder-hmw-icon{
    vertical-align: baseline;
    font-size: 18px;
    margin-right: 5px;
    vertical-align: text-top;
}
#wireframes-slider{
    max-width: 883px;
}
/* Websites page */
.websites-mockup{
    margin-left: auto;
    margin-right: auto;
    margin-bottom:100px;
}
.websites-mockup img{
    max-width: 700px;
    border: 1px solid #cfcfcf;
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    width: 100%;
}
/* Brand book page */
.df-ui-share{
    display: none;
}
._df_book{
    border-radius: 20px;
    margin-bottom: 100px;
}
/* Responsive */
@media screen and (min-width: 768px) {
	.five-cols .vc_col-sm-2 {
		float: left;
		width: 18.5%;
		padding: 0;
		margin-left: 1.5%;
		min-height: 0;
	}
	.five-cols .vc_col-sm-2:nth-last-child(2) {
		margin-right: 0;
	}
}
@media screen and (max-width: 1400px) {
    .websites-mockup img {
        max-width: 500px;
    }
}
@media screen and (max-width: 768px) {
    .my-big-text p {
        font-size: 22px;
    }
    .cover-info{
        position: initial;
        top: initial;
        left:initial;
        transform: initial;
    }
    
    .cover-perfectfit-row,
    .cover-jobfinder-row,
    .cover-websites-row,
    .cover-brandbook-row{
        background-position: 0 100%;
        background-size: 300px;
    }
    .cover-row img,
    #brandbook-main-img img,
    #websites-main-img img,
    #perfectfit-main-img img,
    #jobfinder-main-img-section img{
        width: 100%;
    }
}