/*======================================================
Project: Peyton - Ultimate Pricing Tables
Author: Black Theme
Released On: 01, july 2019
@version: 1.0
========================================================*/

/*==============================
[Table of contents]
* Peyton Default Layout CSS
================================*/ 

/*==============================
	peyton Default Layout CSS
================================*/
/* Defult CSS */
body{
	margin: 0 auto; 
	font-family: 'Lato', sans-serif;
	font-weight: normal;
	font-size: 18px;
	color: #222;
	background-color: #fefefe;	
	letter-spacing: 1px;
} 
hr{
	background-color: #ffffff4d;	
}
.col-lg-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 20%;
    max-width: 20%;
}
/* Easy Default Layout */
.home-section-1{
	padding: 100px 0;
	position: relative;
	background: rgba(0, 0, 0, 0) linear-gradient(to right, rgb(40, 60, 134), rgb(69, 162, 71)) repeat scroll 0% 0%;
}
/* Pricing Table Main Heading */
.home-heading{
	margin-bottom: 20px;
	text-align: center;
}
.home-heading h2{
	display: inline-block;
	position: relative;
	font-size: 35px;
	font-weight: 700;
	color: #fff;
	text-transform: capitalize;
}
.home-heading img{
	width: 300px;
}
.home-heading p{
	color: #fff;
}
.home-section-2 .home-column{
	text-align: center;
}
.home-section-2 .home-column p{
	color: #4f4d4d;
}
.home-section-2 .home-hover .home-image{
  	opacity: 1;
  	display: block;
  	width: 100%;
  	height: auto;
  	transition: .5s ease;
  	backface-visibility: hidden;
  	border-radius: 10px;
}
.home-section-2 .home-hover .home-middle{
	transition: .5s ease;
	opacity: 0;
	position: absolute;  
	text-align: center;
	top: 40%;
	left: 51%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}
.home-section-2 .home-hover:hover .home-image{
  	opacity: 0.3;
  	border-radius: 100px;
}
.home-section-2 .home-hover:hover .home-middle{
 	opacity: 1;
}
.home-section-2 .home-hover .home-middle i{
  	border: none;
  	color: #222;
  	padding: 15px 32px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: 50px;
  	margin: 4px 2px;
  	cursor: pointer;
  	z-index: 1;
}
.home-section-3{
	padding: 10px 0 0;
	background: #222;
	color: #fff;
	text-align: center;
}




/* Easy Default Layout */
.layout-section{
	padding: 100px 0;
}
.layout-section.bg{
	background: #f7f7f7;
}
/* Pricing Table Main Heading */
.layout-heading{
	margin-bottom: 20px;
	text-align: center;
}
.layout-heading h2{
	display: inline-block;
	position: relative;
	font-size: 24px;
	font-weight: 700;
	text-transform: capitalize;
}
.layout-heading h2,
.layout-heading p{
	color: #555;
}
a:hover, a:focus{
    text-decoration: none;
    outline: none;
}
/* MP Color */  
.pp-setting{
	display: block;
	position: fixed;
	top: 10%;
	right: 0px;
	width: 210px;
	box-shadow: 0px 0px 5px rgba(68, 68, 68, 0.59);
	z-index: 99;
}
.pp-setting .icon{
	position: absolute;
	margin-top: -13.5px;
	border-radius: 6px 0 0 6px;
	top: 50%;
	bottom: -24px;
	left: -50px;
	width: 50px;
	height: 50px;
	line-height: 50px;
	font-size: 32px;
	text-align: center;
	box-shadow: -2px 0px 3px rgba(68, 68, 68, 0.59);
	cursor: pointer;
}
.pp-setting,
.pp-setting .icon{
	background-color: #fff;	
}
.pp-setting .icon i{
	padding: 10px;
	font-size: 30px;
	cursor: pointer;	
}
.pp-header{
	display: block;
	padding: 10px;
	text-align: center;
}
.pp-setting .pp-header h4{
	margin-bottom: 0rem;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
}
.pp-setting .link{
	padding: 20px;
	margin: 0;
	text-align: left;
	list-style: none;	
}
.pp-setting .link li{
	margin-bottom: 10px;
}
.pp-setting .link li i{
	margin-right: 5px;
}
.pp-setting .link li a{
	font-size: 15px;
}
.pp-setting .link li a:hover{
	font-weight: bold;
	text-decoration: none;
	-webkit-transition: font-weight .3s ease-in-out;
	-moz-transition: font-weight .3s ease-in-out;
	-o-transition: font-weight .3s ease-in-out;
	transition: font-weight .3s ease-in-out;
}
.pp-setting .icon,
.pp-setting .link li a{
	font-size: 15px;
	color: #555;
}
.pp-setting .pp-color{	
	padding: 12px;
	text-align: center;
}
.pp-setting .pp-color span{
	display: inline-block;
	margin: 5px;
	width: 24px;
	height: 20px;
	border-radius: 0;
	cursor: pointer;
}
.pp-setting .pp-color span.color1{
	background: rgba(0, 0, 0, 0) linear-gradient(to right, rgb(0, 0, 0), rgb(67, 67, 67)) repeat scroll 0% 0%;/* Deep Space */
}
.pp-setting .pp-color span.color2{
	background: rgba(0, 0, 0, 0) linear-gradient(to right, rgb(33, 147, 176), rgb(109, 213, 237)) repeat scroll 0% 0%;/* Blue */
}
.pp-setting .pp-color span.color3{
	background: rgba(0, 0, 0, 0) linear-gradient(to right, rgb(17, 153, 142), rgb(56, 239, 125)) repeat scroll 0% 0%;/* Green */
}
.pp-setting .pp-color span.color4{
	background: rgba(0, 0, 0, 0) linear-gradient(to right, rgb(241, 39, 17), rgb(245, 175, 25)) repeat scroll 0% 0%;/* Orange */
}
.pp-setting .pp-color span.color5{
	background: linear-gradient(to right, #ff729b, #ce002f);/* Pink */
}
.pp-setting .pp-color span.color6{
	background: linear-gradient(to right, #b76cd2, #4c3bb3);/* Purple */
}
.pp-setting .pp-color span.color7{
	background: rgba(0, 0, 0, 0) linear-gradient(to right, rgb(142, 14, 0), rgb(31, 28, 24)) repeat scroll 0% 0%;/* Red */
}
.pp-setting .pp-color span.color8{
	background: linear-gradient(to left, #50cc7f, #f5d100);/* Dark Yellow */
}
.pp-setting .pp-color span.color9{
	background: rgba(0, 0, 0, 0) linear-gradient(to right, rgb(255, 0, 153), rgb(73, 50, 64)) repeat scroll 0% 0%;/* Yoda */
}
.pp-setting .pp-color span.color10{
	background: rgba(0, 0, 0, 0) linear-gradient(to right, rgb(15, 12, 41), rgb(48, 43, 99), rgb(36, 36, 62)) repeat scroll 0% 0%;/* Lawrencium */
}
.pp-setting .pp-color span.color11{
	background: rgba(0, 0, 0, 0) linear-gradient(to right, rgb(9, 48, 40), rgb(35, 122, 87)) repeat scroll 0% 0%;/* Under The lake */
}
.pp-setting .pp-color span.color12{
	background: rgba(0, 0, 0, 0) linear-gradient(to right, rgb(255, 183, 94), rgb(237, 143, 3)) repeat scroll 0% 0%;/* Light Orange */
}
.pp-setting .pp-color span.color13{
	background: rgba(0, 0, 0, 0) linear-gradient(to right, rgb(100, 145, 115), rgb(219, 213, 164)) repeat scroll 0% 0%;/* Earthly */
}
.pp-setting .pp-color span.color14{
	background: rgba(0, 0, 0, 0) linear-gradient(to right, rgb(102, 125, 182), rgb(0, 130, 200), rgb(0, 130, 200), rgb(102, 125, 182)) repeat scroll 0% 0%;/* Hydrogen */
}
.pp-setting .pp-color span.color15{
	background: rgba(0, 0, 0, 0) linear-gradient(to right, rgb(183, 152, 145), rgb(148, 113, 107)) repeat scroll 0% 0%;/* Copper */
}
.pp-setting .pp-color span.color16{
	background: rgba(0, 0, 0, 0) linear-gradient(to right, rgb(83, 105, 118), rgb(41, 46, 73)) repeat scroll 0% 0%;/* Royal Blue */
}
.pp-setting .pp-color span.color1:hover,
.pp-setting .pp-color span.color2:hover,
.pp-setting .pp-color span.color3:hover,
.pp-setting .pp-color span.color4:hover,
.pp-setting .pp-color span.color5:hover,
.pp-setting .pp-color span.color6:hover,
.pp-setting .pp-color span.color7:hover,
.pp-setting .pp-color span.color8:hover,
.pp-setting .pp-color span.color9:hover,
.pp-setting .pp-color span.color10:hover{
	box-shadow: 1px 2px 3px;
}