/*

Theme Name: Pro – Child Theme
Theme URI: http://theme.co/pro/
Author: Themeco
Author URI: http://theme.co/
Description: Make all of your modifications to Pro in this child theme.
Version: 1.0.0
Template: pro

*/

body,
html {
  background-color: #000000;
}

.x-scroll-top.right {
	z-index: 9999;
}

.x-section {
	margin-bottom: 0;
}

h1,h2,h3,h4,h5,h6,a {
  font-family: 'Open Sans';
}


/* MAIN NAV */
/*-----------------------------------------*/
#x-root .e556-5 .x-dropdown {
	background-color: rgba(27,33,51,0.5);
}
#x-root .e556-5 .sub-menu .x-anchor .x-anchor-text-primary {
	color: #fff;
    font-size: 12px;
    font-style: normal;
    font-weight: inherit;
    line-height: 1;
    letter-spacing: 0.15em;
    text-transform: uppercase;	
}

#x-root .e556-5 .sub-menu .x-anchor:hover {
	background-color: rgba(185,41,152,0.39);
}


/* BTNS */
/*-----------------------------------------*/
.button-primary {
  background: rgb(128,113,209);
  background: linear-gradient(to right, rgba(250,117,178,1) 0%, rgba(128,113,209,1) 51%, rgba(67,52,153,1) 99%);
  background-size: 200% auto;
  transition: .3s all;
  border: none;
  outline: none;
  box-shadow: none!important;
  text-shadow: none;
}
.button-primary:hover {
  background-position: 99% center;
  border: none;
	transition: .3s all;
}

.button-secondary {
  background-image: linear-gradient(to right, rgba(250,117,178,1) 0%, rgba(128,113,209,1) 51%, rgba(67,52,153,1) 99%);
  background-size: 200% auto;
	border-radius: 6px;
  box-sizing: border-box;
	color: #ffffff;
	display: inline-block;
	height: 50px;
	letter-spacing: .025em;
	margin: 0 auto;
	padding: 1px;
	position: relative;
  text-decoration: none;
	text-transform: uppercase;
	width: 200px;
	z-index: 2;
  font-family: "Raleway";
  font-weight: 200;
  transition: .2s all;
  border: none;
}

.button-secondary span {
	align-items: center;
	background: #1d1b26;
	border-radius: 6px;
	display: flex;
	justify-content: center;
	height: 100%;
	transition: background .5s ease;
	width: 100%;
  color: #fff;
}

.button-secondary:hover span {
	background: #1d1b26 ;
  color: #fff;
  transition: .2s all;
}

.button-secondary:hover {
  background-position: right center;
}

.button-tertiary {
  background: rgb(128,113,209);
  background: linear-gradient(to right,  rgb(72, 170, 237) 0%, rgb(70,199,165) 51%, rgb(70,147,138) 99%);
  background-size: 200% auto;
  transition: .3s all;
  border: none;
  outline: none;
  box-shadow: none!important;
  text-shadow: none;
  width: 250px;
}
.button-tertiary:hover {
  background-position: 99% center;
  border: none;
	transition: .3s all;
}

.cn-button.button-secondary {
    border: 1px solid hotpink!important;
    background: none;
    border-radius: 6px;
    box-sizing: border-box;
    color: #fff;
    letter-spacing: .025em;
    margin: 0 auto;
    padding: 1px;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    width: 140px;
    z-index: 2;
    font-family: "Raleway";
    transition: .2s all;
    display: inline-block;
    border: none;
    height: 38px;
    line-height: 35px;
    font-weight: 600;
}
.cn-button.button-secondary:hover {
	background: hotpink;
	color: black;
}

button-how-to-primary {

}




/* Language Popup. Don't display by default; turn on page-dependent */
/*-----------------------------------------*/
.switcher-popup {
	display: none;
	position:relative;
	top:4px;
}
.switcher-popup span:first-of-type {
	display: none;
}
.switcher-popup span {
	color: #f8f8f8!important;
}

a.glink span {
	color:	#0d0d0d;
}





/* Site wide gradient backgrounds */
/*-----------------------------------------*/
.gradient-one {
  background: #272733;
  background: linear-gradient(135deg, #272733 0%,#111111 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#272733', endColorstr='#111111',GradientType=1 );
}

.gradient-two {
  background: #00180a;);
  background: linear-gradient(45deg, #1b222e 0%,#2e2e3d 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00180a', endColorstr='#2e2e3d',GradientType=1 );
}

.gradient-three {
  background: #00180a;
	background: linear-gradient(to bottom, #121923, #14131c, #120d14, #0c060a, #000000);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#121923', endColorstr='#000000',GradientType=1 );
}
.gradient-five {
  background: #3c476b;
  background: linear-gradient(180deg, #3c476b 0%,#252e48 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3c476b', endColorstr='#252e48',GradientType=1 );
}
.gradient-six {
  background: rgb(27,33,50);
	background: linear-gradient(180deg, rgba(27,33,50,1) 27%, rgba(36,45,70,1) 100%);
}
.gradient-seven {
  background: rgb(16,16,22);
	background: linear-gradient(0deg, rgba(16,16,22,1) 0%, rgba(29,27,37,1) 100%);
}

.gradient-eight {
	background: rgb(40,34,67);
	background: radial-gradient(ellipse at center,  rgba(40,34,67,1) 1%,rgba(30,28,40,1) 100%);
}
.gradient-nine {
	background: rgb(60,71,107);
  background: linear-gradient(45deg,  rgba(60,71,107,1) 100%,rgba(37,46,72,1) 0%);
}





/* CONTACT FORM 7 STYLES */
/*-----------------------------------------*/
.wpcf7-form input[type=submit] {
	border-color: #0e9af1;
	background-color: #0e9af1!important;
	text-transform: uppercase;
	border: none;
	font-size: 1.2em;
	box-shadow: 0em 0.15em 0.65em 0em rgba(0,0,0,0.25);
	transition-duration: 0.3s;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	text-shadow: none;
	padding: 10px 25px;
}
.wpcf7-form input[type=submit]:hover {
	background-color: rgb(11, 129, 202)!important;
	box-shadow: 0em 0.15em 0.65em 0em rgba(0,0,0,0.25);
	border-color: rgb(11, 129, 202);
}
.wpcf7-form input,
.wpcf7-form textarea,
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
  font-size: 16px;
}
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
  color: #aaaaaa;
}




/* COOKIE NOTICE FOOTER POPUP */
/*-----------------------------------------*/
#cookie-notice .button-secondary:nth-of-type(2) {
	border: none!important;
	text-transform: initial;
}

.e556-4.x-bar-container {
	height: auto;
}
.e556-5.x-menu > li > .x-anchor .x-anchor-content {
    padding: 0 0.75em!important;
}


/* HOW-TO MYLIO PAGES */
/*-----------------------------------------*/

#how-to-nav {
  margin: 0 auto;
  text-align: center;
}
#how-to-nav .x-column {
  display: inline-block;
  float: none;
  margin-right: 1%;
  vertical-align: top;
}

#how-to-nav .nav-button {
  text-align: center;
  border: 1px solid rgb(8, 92, 109);
  display: block;
  border-radius: 10px;
  padding: 25px 0;
  transition: .2s all;
  height: 155px;
}
#how-to-nav .nav-button:hover {
  border:1px solid rgb(11, 182, 213);
}
#how-to-nav .nav-button:hover p {
  color: rgb(11, 182, 213);
  transition: .2s all;
}
#how-to-nav .nav-button.active {
  border: 1px solid rgb(11, 182, 213);
  background: rgba(0,0,0,.2)
}
#how-to-nav .nav-button.active p {
  color: rgb(11, 182, 213);
}
#how-to-nav .nav-button img {
  display: inline-block;
  width: 35%;
  padding-bottom: 10px;
}
#how-to-nav .nav-button p {
  display: block;
  color: #fafafa;
  transition: .2s all;
}

#how-to-timeline.main-timeline.timeline-blue::before {
    content: "";
    position: absolute;
    top: 190px;
    left: 1px;
    bottom: 0;
    width: 50%;
    margin-left: 1px;
    border-right-width: 1.5px;
    border-right-style: dotted;
    border-right-color: #0bb6d5;
}
#how-to-timeline .number-list-odd {
  top: 10px;
}
#how-to-timeline .number-list-odd span,
#how-to-timeline .number-list-even span {
  font: 600 38px/36px Helvetica;
  color: rgb(255,255,255,.9);
  padding-right: 10px;
  padding-left:20px;

}
#how-to-timeline .number-list-odd span:before {
    top: 22px;
    left: -4%;
    content: "";
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 2px solid #0bb6d5;
    background: #14151a;
    position: absolute;
    z-index: 1;
    transform: translate(-50%, -50%);
}
#how-to-timeline .number-list-odd span:after {
  	top: 22px;
    left: -4%;
		content: "";
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #ffffff;
    position: absolute;
    z-index: 1;
    transform: translate(-50%, -50%);
}
#how-to-timeline .number-list-even span:before {
    top: 22px;
    left: 108.5%;
    content: "";
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 2px solid #0bb6d5;
    background: #14151a;
    position: absolute;
    z-index: 1;
    transform: translate(-50%, -50%);
}
#how-to-timeline .number-list-even span:after {
  	top: 22px;
    left: 108.5%;
		content: "";
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #ffffff;
    position: absolute;
    z-index: 1;
    transform: translate(-50%, -50%);
}
#how-to-timeline ul li {
  padding-bottom: 15px;
}
#how-to-timeline a {
  color: rgb(84, 168, 231);
}


@media (max-width: 768px){
  #how-to-timeline div {
    text-align: left!important;
  }
  #how-to-timeline span:before,
  #how-to-timeline span:after {
    left: 0!important;
  }
  #how-to-timeline h1 {
    padding-left: 30px!important;
  }
  #how-to-timeline.main-timeline.timeline-blue::before {
    width: 6%!important;
  }
  #how-to-nav .x-column {
    width: 25%;
  }
  #how-to-timeline .x-container {
    display: flex;
    flex-direction: column-reverse;
  }
}

/*-----------------------------------------*/
/* SOCIAL PROOF */
/* Doug Daulton */
/*-----------------------------------------*/

/* sp-view: All Views */
/*-----------------------------------------*/
/* sp-view = Wraps The Block */
/* sp-attribution = Quote Attribution */
/*-----------------------------------------*/

body .sp-view {
    font-size: 16px;
    font-weight: bold;
}

.sp-view .sp-attribution {
    font-size: 14px;
    font-style: italic;
    font-weight: bold;
}

.sp-view .sp-attribution::before {
    content: "— ";
    font-weight: bold;
}

.sp-view .sp-attribution::after {
    content: " —";
    font-weight: bold;
}


/*-----------------------------------------*/
/* sp-view: Dsscreet Views */
/*-----------------------------------------*/

/* sp-view-all */
/*-----------------------------------------*/
.sp-view-all .testimonial-inner {
    background-color: #e11f5b;
    color: #ffffff;
}

/* sp-view-bold */
/*-----------------------------------------*/
.sp-view .sp-view-bold a,
.sp-view .sp-view-bold a:active {
    color: #ffffff;
    font-weight: bold;
}

body .sp-view-bold .t-slide {
    background-color: #e11f5b;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    font-size: 18px;
    padding: 15px 10px 15px 10px;
}

.sp-view-bold .sp-attribution {
    color: #ffffff !important;
    font-size: 14px;
    font-style: italic;
    font-weight: bold;
}

/* sp-view-card */
/*-----------------------------------------*/
.sp-view-card .testimonial-inner {
    background-color: #0e9af1;
    color: #ffffff;
}

/* sp-view-elegant */
/*-----------------------------------------*/
.sp-view-elegant .wpmtst-testimonial-content .testimonial-content {
    background-color: #35a78c;
    color: #ffffff;
}

/* sp-view-modern */
/*-----------------------------------------*/
.sp-view-modern .testimonial-inner {
    background-color: #16181d;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color: #ffffff;
}

.sp-view-modern .wpmtst-testimonial .testimonial-content::before,
.sp-view-modern .wpmtst-testimonial .testimonial-content::after {
    color: #ffffff !important;
}

/* sp-view-influencer */
/*-----------------------------------------*/

.sp-view-influencer .testimonial-inner {
    background-color: #16181d;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color: #0e9af1;
    padding: 20px;
}

.sp-view-influencer .sp-attribution {
    color: #0e9af1 !important;
    font-size: 14px;
    font-style: italic;
    font-weight: bold;
    text-align: right !important;
}

.sp-view-influencer .sp-attribution::before {
    color: #0e9af1 !important;
    content: "— ";
    font-weight: bold;
}

.sp-view-influencer .sp-attribution::after {
    color: #0e9af1 !important;
    content: " —";
    font-weight: bold;
}

/* sp-view-simple */
/*-----------------------------------------*/

.sp-view-simple .testimonial-inner {
    background-color: #35a78c;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color: #ffffff;
}

.sp-view-simple .wpmtst-testimonial-content .testimonial-content p {
    color: #ffffff;
}