/*Wandering page style*/

section.alerts {
	padding: 5em calc((100% - 1200px)/ 2);
	background-image: url('/wp-content/themes/angelsense/images/wandering-LP/runner_bg3.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 1416px 540px;
	position: relative;
}

section.alerts > img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 69px;
	top: -2em;
	position: relative;
}

section.alerts div {
	display: block;
	width: 50%;
	margin-left: auto;
}

section.alerts div h2 {
	font-size: 2rem;
	color: black;
	font-weight: 700;
	text-transform: capitalize;
	line-height: 1.1;
}

section.alerts div ul {
	display: block;
	margin-top: 1em;
	width: 85%;
}

section.alerts div ul li {
	margin: 1em 0em;
	position: relative;
	padding-left: 25px;
}

section.alerts div ul li:before {
	content: "";
	position: absolute;
	top: 6px;
	left: 0;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: rgb(247, 97, 98);
	box-shadow: 0 0 0 rgb(241, 179, 182);
	animation: pulsing 2s infinite;
}

@-webkit-keyframes pulsing {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(241, 179, 182, 0.6);
  }
  70% {
      -webkit-box-shadow: 0 0 0 10px rgba(241, 179, 182, 0.2);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(247, 97, 98, 0);
  }
}
@keyframes pulsing {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(241, 179, 182, 0.6);
    box-shadow: 0 0 0 0 rgba(241, 179, 182, 0.8);
  }
  70% {
      -moz-box-shadow: 0 0 0 10px rgba(241, 179, 182, 0.2);
      box-shadow: 0 0 0 10px rgba(241, 179, 182, 0.1);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(241, 179, 182, 0);
      box-shadow: 0 0 0 0 rgba(247, 97, 98, 0);
  }
}

section.alerts div ul p {
	font-size: 1.1rem;
	color: rgb(66, 66, 66);
}

section.tools {
	padding: 2em calc((100% - 1200px)/ 2);
	text-align: center;
	background-color: rgb(251, 251, 251)
}

section.tools > img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
	width: 69px;
	position: relative;
}

section.tools h2 {
	font-size: 2rem;
	color: black;
	font-weight: 700;
	line-height: 1.1;
}

section.tools ul {
	display: block;
	margin-top: 2em;
}

section.tools ul li {
	display: inline-block;
	vertical-align: top;
	width: 370px;
	height: 260px;
	margin: 10px;
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

section.tools ul li:hover div.description {
	top: 0;
}

section.tools ul li.location,
section.tools ul li.responder {
	background-color: rgb(73, 184, 227);
}

section.tools ul li.runner {
	background-color: rgb(0, 77, 121);
}

section.tools ul li.alarm {
	background-color: rgb(3, 127, 161);
}

section.tools ul li.indoor,
section.tools ul li.voice {
	background-color: rgb(20, 146, 187);
}

section.tools ul li div.content {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	transition: all 0.6s;
}

section.tools ul li div.content:after {
	content: "+";
	width: 20px;
	height: 20px;
	background-color: rgb(255, 255, 255);
	border-radius: 50%;
	position: absolute;
	top: 150px;
	right: 0.5em;
	line-height: 20px;
	font-size: 1.3rem;
	color: rgb(50, 180, 166);
	font-weight: 700;
}

section.tools ul li:hover div.content {
	top: 150%;
}

section.tools ul li div.content span {
	display: block;
	width: 85px;
	height: 85px;
	margin-left: auto;
	margin-right: auto;
}

section.tools ul li.runner div.content span {
	width: 75px;
	height: 75px;
}

section.tools ul li div.content h3 {
	display: block;
	font-size: 1.5rem;
	font-weight: 600;
	color: white;
}

section.tools ul li div.content span img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	height: auto;
}

section.tools ul li div.description {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: left;
	padding: 2em 1em;
	color: white;
	font-size: 1.1rem;
	background-color: inherit;
	top: -100%;
	transition: all 0.6s;
}

section.tools ul li div.description strong {
	font-size: 1.3rem;
}

section.stories {
	padding: 2em calc((100% - 1200px)/ 2);
	text-align: center;
}

section.stories h2 {
	display: block;
	text-align: center;
	color: rgb(50, 180, 166);
	font-size: 2.5rem;
	font-weight: 600;
	text-transform: capitalize;
	position: relative;
}

section.logo {
	text-align: center;
	background-color: rgb(251, 251, 251);
	padding: 2em calc((100% - 1200px)/ 2);
	padding-bottom: 6em;
	border-top: 1px solid rgb(223, 228, 231);
}

section.logo img {
	display: block;
	width: 100%;
	height: auto;
}

section.logo h3 {
	ont-weight: 600;
	color: rgb(50, 180, 166);
	text-transform: uppercase;
	font-size: 1.7rem;
	margin-top: 2em;
}

section.logo h3 br {
	display: none;
}

section.logo h3 span {
	display: inline-block;
	position: relative;
}

section.logo h3 span:after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	background-image: url(/wp-content/themes/angelsense/images/wandering-LP/heart.gif);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
	width: 75px;
	height: 66px;
	margin: 0em 0.3em;
}

/*Tablet version*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1367px) and (orientation: landscape){
	section.header {
		padding: 1em calc((100% - 900px)/ 2);
		margin-top: 60px;
	}

	section.header div.title {
		width: 70%;
	}

	section.features ul li {
		width: 40%;
		margin-bottom: 2em;
	}

	section.tools h2 {
		font-size: 1.8rem;
	}
}

/* Portrait */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
	section.header {
		padding: 1em calc((100% - 750px)/ 2);
		margin-top: 60px;
	}

	section.header div.title {
		width: 90%;
	}

	section.header h1 {
		font-size: 2rem;
	}

	section.header h3,
	section.header h2 {
		font-size: 1.5rem;
	}

	section.features ul li {
		width: 40%;
		margin-bottom: 2em;
	}

	section.tools h2 {
		font-size: 1.8rem;
	}

}