/*Best LP Desktop Style*/

section.videos {
	display: block;
	text-align: center;
	padding: 2em calc((100% - 1200px) / 2);
	position: relative;
}

section.videos h2 {
	display: block;
	padding: 1em 0em;
	color: rgb(6, 130, 154);
	font-size: 2rem;
	font-weight: 600;
	border-top: 2px solid rgb(6, 130, 154);
	border-bottom: 2px solid rgb(6, 130, 154);
}

section.videos div.container {
	display: block;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	height: 840px;
}

section.videos div.container ul.carousel {
	display: block;
	padding: 0;
	margin: 0;
	position: relative;
	height: 700px;
}

section.videos div.container ul.carousel li.item {
	margin: 0
}

section.videos div.container ul.carousel li.item a {
	display: inline-block;
	margin: 5px;
	width: 560px;
	color: white;
	position: relative;
}

section.videos div.container ul.carousel li.item a:before {
	content: '';
	position: absolute;
	top: 30%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background-color: rgba(0, 0, 0, 0.6);
	background-image: url(/wp-content/themes/angelsense/images/reviews/play-icon-video.png);
	background-repeat: no-repeat;
	background-position: center center;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	z-index: 100;
}

section.videos div.container ul.carousel li.item img {
	display: block;
	width: 100%;
	opacity: 0.5;
	border-radius: 8px;
	transition: all 0.3s;
}

section.videos div.container ul.carousel li.item.active img {
	opacity: 1;
}

section.videos div.container ul.carousel li.item a h3,
section.videos div.container ul.carousel li.item a p {
	visibility: hidden;
	opacity: 0;
	transition: all 0.6s;
	color: rgb(6, 130, 154);
	font-size: 1.2rem;
}

section.videos div.container ul.carousel li.item a h3 {
	margin-top: 1em;
	font-size: 1.4rem;
	font-weight: 700;
}

section.videos div.container ul.carousel li.item.active a h3,
section.videos div.container ul.carousel li.item.active a p {
	visibility: visible;
	opacity: 1;
}

section.videos div.container a.prev,
section.videos div.container a.next {
	position: absolute;
	top: 260px;
	left: -50px;
	display: inline-block;
	outline: 0;
	width: 50px;
	height: 50px;
}

section.videos div.container a.prev {
	right: -50px;
	left: auto;
}

section.videos div.container a.prev img,
section.videos div.container a.next img {
	display: block;
	width: 100%;
	height: auto;
}

section.list {
	display: block;
	padding: 2em calc((100% - 1200px) / 2);
	margin-top: -4.5em;
	text-align: center;
	padding-top: 6em;
	background:
	  url(/wp-content/themes/angelsense/images/best-lp/pattern.png),
	  linear-gradient(to bottom, #168ea9 0%,#24beb4 100%);
	  background-repeat: repeat, no-repeat;
	  background-position: center center, center center;
	  background-size: 100px 100px, 100% auto;
	color: white;
}

section.list h2 {
	font-weight: 700;
	font-size: 2rem;
}

section.list ul {
	margin: 0;
	padding: 0;
	margin-top: 4em;
	position: relative;
	min-height: 550px;
}

section.list ul li {
	position: absolute;
	top: 0;
	left: 0;
	width: 34%;
}

section.list ul li.three {
	top: 185px;
}

section.list ul li.five {
	left: 0px;
	top: 370px;
}

section.list ul li.two {
	left: auto;
	right: 0;
}

section.list ul li.four {
	left: auto;
	right: 0;
	top: 185px;
}

section.list ul li.six {
	left: auto;
	right: 0px;
	top: 370px;
}

section.list ul li div {
	display: block;
	padding: 1em 1em;
	border-radius: 70px;
	border: 1px dashed white;
	background-color: rgba(0, 0, 0, 0.30);
	min-height: 150px;
}


section.list ul li h3 {
	display: inline-block;
	vertical-align: middle;
	margin-bottom: 0.5em;
	font-weight: 700;
	font-size: 1.1rem;
	position: relative;
}

section.list ul li h3:before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	margin-right: 0.5em;
	background-image: url(/wp-content/themes/angelsense/images/best-lp/check.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
	width: 35px;
	height: 35px;
}

section.list ul li p {
	font-size: 1rem;
	line-height: 1.5em;
}

img.device {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 550px;
	height: 584px;
	margin-top: -530px;
	transform: translateX(-35px);
}

section.logos {
	display: block;
	padding: 4em calc((100% - 1200px) / 2);
}

ul.logos {
	margin: 0;
	padding: 0;
	text-align: center;
	border-bottom: 2px solid rgba(14, 188, 168, 0.2);
	background-color: white;
}

ul.logos:last-of-type {
	border-top: 2px solid rgba(14, 188, 168, 0.2);
	border-bottom: none;
}

ul.logos li {
	display: inline-block;
	vertical-align: middle;
	padding: 1em;
}

ul.logos li a {
	display: block;
	position: relative;
	outline: 0;
	height: 100px;
	width: 160px;
}

ul.logos li a:after {
	content: "";
	position: absolute;
	top: 108%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%) rotate(45deg);
	width: 20px;
	height: 20px;
	background-color: rgba(14, 188, 168, 0.2);
	z-index: -1;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s;
}

ul.logos:last-of-type li a:after {
	content: "";
	position: absolute;
	top: auto;
	bottom: 108%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%) rotate(45deg);
	width: 20px;
	height: 20px;
	z-index: -1;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s;
}

ul.logos:last-of-type li a.active:after,
ul.logos li a.active:after {
	opacity: 1;
	visibility: visible;
}

ul.logos li a.active img {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}

ul.logos li a:hover img {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}

ul.logos li a img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-filter: grayscale(1);
	filter: grayscale(1);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	transition: all 0.3s;
}

div.description {
	margin: 2em 0em;
	padding: 5em 0em;
	position: relative;
	overflow: hidden;
}

div.description span {
	position: absolute;
	text-align: center;
	top: 100%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 50%;
	font-size: 1.3rem;
	opacity: 0;
	visibility: hidden;
	transition: all 0.5s;
	transition-timing-function: ease-in-out;
	color: #32B4A6;
	font-weight: 700;
}

div.description span.active {
	visibility: visible;
	opacity: 1;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	transition: all 0.5s;
	transition-delay: 0.2s;
}

section.plans {
	display: block;
	text-align: center;
	padding: 4em calc((100% - 1200px) / 2);
	background-color: rgb(35, 186, 181);
	color: white;
}

section.plans h2 {
	font-weight: 700;
	font-size: 2rem;
}

ul#plans {
	margin-top: 4em;
}

ul#plans li {
	display: inline-block;
	vertical-align: top;
	margin-bottom: 2em;
	width: 20%;
}

ul#plans li a {
	color: white;
	cursor: default;
}

ul#plans li div {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 140px;
	height: 140px;
	border: 2px solid white;
	position: relative;
	border-radius: 8px;
}

ul#plans li div img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

ul#plans li h3 {
	font-weight: 600;
	font-size: 1.2rem;
	padding: 0.5em 2em;
}

section.gift {
	padding: 4em calc((100% - 1180px)/ 2);
	background-color: white;
	text-align: center;
}

section.gift h2 {
	font-weight: 700;
	margin-bottom: 2em;
	font-size: 2rem;
	color: rgb(35, 186, 181);;
}

section.gift img,
section.gift ul {
	display: inline-block;
	vertical-align: middle;
	box-sizing: border-box;
	padding: 0em 1em;
	width: 45%;
}

section.gift ul {
	text-align: left;
}

section.gift ul li {
	display: inline-block;
	vertical-align: middle;
	margin-bottom: 1em;
	font-size: 1.2rem;
	position: relative;
}

section.gift ul li:last-of-type {
	padding-top: 0.5em;
	border-top: 1px solid rgb(241, 241, 241);
	color: #3abeb0;
}

section.gift ul li:before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	margin-right: 0.5em;
	padding: 0em 0.2em;
	width: 0.7em;
	height: 0.7em;
	background-color: #3abeb0;
	border-radius: 50%;
}

section.gift ul li:last-of-type:before {
	display: none;
}

section.gift ul li:last-of-type:after {
	content: "";
	display: inline-block;
	vertical-align: bottom;
	margin-left: 0.5em;
	background-image: url(../images/dementia/shipping.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center center;
	width: 28px;
	height: 19px;
}

section.gift div.action {
	margin-top: 2em;
}
